/* Theme Name: MOMENT Author: KISEISHA.Inc Version: 1.2 Description: MOMENT公式サイト */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } h1{ font-family: 'Cormorant Garamond', serif; } h2{ font-family: 'Cormorant Garamond', serif; } .pc_only{ display: block; } .sp_only{ display: none; } .breadcrumbs{ font-size: 10px; letter-spacing: 0.7px; } /* フェードインアニメーション */ .animation { opacity: 0; transition: all 2s; } .fadeIn { opacity: 1; } /* ロード画面 */ .start { background: #FFF; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9000; } .start p { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; z-index: 9999; width: 200px; } /* header */ .menu{ position: fixed; width: 100%; height: 70px; top: 0; left: 0; z-index: 10; color: #fff; transition: 0.5s ease-out; } .menu.headerColorScroll { color: #000; background-color: #fff; transition: 0.5s ease-out; } .menu .right.headerColorScroll .openbtn2 span{ background-color: #000; } .menu .menu_wrapper{ display: flex; justify-content: space-between; align-items: center; padding: 25px 60px; } .menu .menu_wrapper .left img{ height: 20px; object-fit: content; } .menu .menu_wrapper .left .logo-before{ display: block; } .menu .menu_wrapper .left .logo-after{ display: none; } .menu .menu_wrapper .left .logo-before.none-logo{ display: none; } .menu .menu_wrapper .left .logo-after.show-logo{ display: block; } .openbtn2{ position: relative; width: 40px; height:20px; cursor: pointer; z-index: 10; } .openbtn2 span{ display: inline-block; transition: all .4s; position: absolute; left: 5px; height: 2px; background-color: #fff; } .openbtn2 span:nth-of-type(1) { top: 5px; width: 100%; } .openbtn2 span:nth-of-type(2) { top: 15px; width: 80%; } .openbtn2.active span:nth-of-type(1) { top: 0px; left: 16px; transform: translateY(6px) rotate(-45deg); width: 100%; background-color: #000; } .openbtn2.active span:nth-of-type(2) { top: 12px; left: 16px; transform: translateY(-6px) rotate(45deg); width: 100%; background-color: #000; } /* 以下、ハンバーガーメニュー */ .nav_wrapper{ width: 30vw; height: 100vh; position: fixed; top: 0; right: 0; transform: translate(50vw); transition: all .5s; z-index: 2; } .nav_wrapper.open { opacity: 1; visibility: visible; transform: translate(0); transition: 0.5s ease-out; } .nav_content{ overflow: auto; color: #000; background-color: #eee; height: 100%; width: 100%; z-index: 2; padding: 50px 20px; box-sizing: border-box; } .nav_content .top_nav{ width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #cecece; padding: 20px 20px; box-sizing: border-box; } .nav_content .top_nav .left{ width: 50%; } .nav_content .top_nav .left a{ display:block; font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; text-decoration: none; } .nav_content .top_nav .left a:hover{ transition:1s; text-decoration: underline; } .nav_content .top_nav .left a:last-of-type{ margin-bottom: initial; } .nav_content .top_nav .right{ width: 50%; } .nav_content .top_nav .right img{ width: 100%; object-fit: content; } .nav_content .bottom_nav{ width: 100%; } .nav_content .bottom_nav .nav_about{ padding: 10px 20px; } .nav_content .bottom_nav .nav_about a{ display:block; font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 2px; text-decoration: none; } .nav_content .bottom_nav .nav_about p{ color: #6d6d6d; font-size: 11px; font-family: sans-serif; margin-bottom: 10px; } .nav_content .bottom_nav .nav_about .reserve_now{ width: 100%; font-size: 12px; text-align: center; padding: 5px; color: #000; background-color: #cacaca; } .nav_content .bottom_nav .nav_studio{ padding: 0 20px; } .nav_content .bottom_nav .nav_studio p{ color: #6d6d6d; font-size: 11px; font-family: sans-serif; margin-bottom: 10px; } .nav_content .bottom_nav .nav_studio .studio_ttl{ display:block; font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #6d6d6d; letter-spacing: 2px; margin-bottom: initial; } .nav_content .bottom_nav .nav_studio img { width: 100%; height: 160px; object-fit: cover; } .nav_content .bottom_nav .nav_link{ padding: 10px 20px; } .nav_content .bottom_nav .nav_link .box{ position: relative; width: 100%; font-size: 12px; display: block; text-align: center; margin-bottom: 8px; padding: 8px; border: 1px solid #000; } .nav_content .bottom_nav .nav_link .box:hover{ transition:0.5s; background-color: rgba(190,190,190,0.4); } .nav_content .bottom_nav .nav_link .box:nth-child(1):before{ content: ""; position: absolute; background: url(./assets/img/contact.png) 0 0/18px 16px no-repeat; width: 18px; height: 16px; left: 90px; top: calc(50% - 8px); } .nav_content .bottom_nav .nav_link .box:nth-child(2):before{ content: ""; position: absolute; background: url(./assets/img/icon_instagram.png) 0 0/18px 16px no-repeat; width: 18px; height: 18px; left: 130px; top: calc(50% - 8px); } .nav_content .bottom_nav .nav_link .box:nth-child(3):before{ content: ""; position: absolute; background: url(./assets/img/icon_tiktok.png) 0 0/18px 16px no-repeat; width: 18px; height: 18px; left: 130px; top: calc(50% - 8px); } /* main */ .top{ width: 100vw; height: 100vh; } .top_mov{ width: 100%; height: 100%; } .top_mov video{ width: 100%; height: 100%; object-fit: cover; } .sec01{ width: 100%; height: 100%; } .content_wrapper{ max-width: 1000px; margin: 0 auto; padding: 120px 20px; box-sizing: border-box; } .sec01 .content_wrapper .flex_wrapper{ display: flex; justify-content: space-between; flex-wrap: wrap-reverse; align-items: center; } .sec01 .content_wrapper .flex_wrapper .left{ width: 45%; position: relative; } .sec01 .content_wrapper .flex_wrapper .left .content_box{ display: flex; justify-content: space-between; } .sec01 .content_wrapper .flex_wrapper .left .content_box .ttl{ width: 10%; font-size: 54px; letter-spacing: 2px; font-family: 'Cormorant Garamond', serif; color: #CECECE; -webkit-writing-mode: vertical-rl; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content{ width: 85%; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > h1{ display: inline-block; font-size: 24px; padding: 40px 0; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > p{ font-family: 'Cormorant Garamond', serif; display: inline-block; padding-left: 10px; font-size: 20px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > h2{ font-size: 12px; line-height: 30px; margin-bottom: 40px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > a{ position: relative; font-size: 12px; letter-spacing: 1px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > a:after{ content: ''; display: block; border-bottom: 1px solid #aaa; width: 30px; position: absolute; bottom: calc(50% - 1px); right: -40px; } .sec01 .content_wrapper .flex_wrapper .right{ width: 45%; } .sec01 .content_wrapper .flex_wrapper .right img{ width: 100%; object-fit: content; } .sec02 .content_wrapper{ position: relative; width: 100%; height: 180vh; } .sec02 .content_wrapper .img01{ position: absolute; width: 40%; top: 0; left: 5%; } .sec02 .content_wrapper .img02{ position: absolute; width: 40%; top: 20%; right: 5%; } .sec02 .content_wrapper .img03{ position: absolute; width: 40%; bottom: 5%; left: 5%; } .sec02 .content_wrapper .img_frame{ width: 100%; height: 100%; position: relative; } .sec02 .content_wrapper .img_frame .left_bar{ position: absolute; content:""; width: 20%; height: 1px; background-color: #fff; top: 50%; left: 5%; } .sec02 .content_wrapper .img_frame .right_bar{ position: absolute; content:""; width: 20%; height: 1px; background-color: #fff; top: 50%; right: 5%; } .sec02 .content_wrapper .img_frame h3{ position: absolute; font-size: 16px; letter-spacing: 2px; font-family: 'Cormorant Garamond', serif; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .sec03{ width: 100%; } .sec03 .pr_mov{ width: 100%; } .sec03 .pr_mov video{ width: 100%; height: auto; object-fit: cover; } .sec04 .content_wrapper{ max-width: 1000px; margin: 0 auto 40px; padding: 120px 20px 40px; box-sizing: border-box; } .sec04 .content_wrapper p{ font-size: 54px; letter-spacing: 2px; font-family: 'Cormorant Garamond', serif; } .swiper-slide img { width: 100%; height: 600px; object-fit: cover; padding: 5px; box-sizing: border-box; } .swiper-slide video{ width: 100%; height: 600px; object-fit: cover; padding: 5px; box-sizing: border-box; } .swiper-wrapper { transition-timing-function: linear; } .sec04 .link{ max-width: 1000px; margin: 0 auto; height: 80px; box-sizing: border-box; position: relative; } .sec04 .link a{ position: absolute; right: 80px; bottom: 50%; font-size: 14px; letter-spacing: 1px; font-family: 'Cormorant Garamond', serif; } .sec04 .link a:after{ content: ''; display: block; border-bottom: 1px solid #aaa; width: 30px; position: absolute; bottom: calc(50% - 1px); right: -40px; } .sec05{ width: 100%; height: 100%; } .sec05 .content_wrapper .news_box{ display: flex; justify-content: space-between; flex-wrap: wrap; } .sec05 .content_wrapper .news_box .ttl{ width: 10%; font-size: 54px; letter-spacing: 2px; font-family: 'Cormorant Garamond', serif; color: #CECECE; -webkit-writing-mode: vertical-rl; } .sec05 .content_wrapper .news_box .news_wrapper{ width: 85%; } .sec05 .content_wrapper .news_box .news_wrapper > p{ padding: 40px 0; font-size: 28px; } .sec05 .content_wrapper .news_box .news_wrapper .news{ display: inline-block; width: calc(100% - 40px); margin-left: 40px; padding: 20px; box-sizing: border-box; border-bottom: 1px solid #E5E5E5; } .sec05 .content_wrapper .news_box .news_wrapper .news:last-of-type{ border-bottom: initial; } .sec05 .content_wrapper .news_box .news_wrapper .news .date{ font-size: 10px; margin-bottom: 10px; letter-spacing: 1px; } .sec05 .content_wrapper .news_box .news_wrapper .news .content{ font-size: 14px; } .footer_top{ width: 100%; background-image: url(./assets/img/contact.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .footer_top .contact_wrapper{ max-width: 1000px; margin: 0 auto; padding: 250px 20px; box-sizing: border-box; color: #fff; } .footer_top .contact_wrapper .ttl{ font-size: 54px; margin-bottom: 50px; font-family: 'Cormorant Garamond', serif; } .footer_top .contact_wrapper .bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; } .footer_top .contact_wrapper .bottom .left{ width: 45%; } .footer_top .contact_wrapper .bottom .left p{ font-size: 12px; letter-spacing: 1px; line-height: 30px; } .footer_top .contact_wrapper .bottom .right{ width: 45%; } .footer_top .contact_wrapper .bottom .right a{ position: relative; display: block; font-size: 12px; letter-spacing: 1px; text-align: center; padding: 20px; border: 1px solid #fff; } .footer_top .contact_wrapper .bottom .right a:before{ content: ''; position: absolute; top: 30px; right: 60px; display: block; width: 12px; height: 1px; background: #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .footer_top .contact_wrapper .bottom .right a:after{ content: ''; display: block; position: absolute; top: 25px; right: 60px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; } .footer_menu{ width: 100%; } .footer_menu .content_wrapper .contents{ display: flex; justify-content: space-between; flex-wrap: wrap; } .footer_menu .content_wrapper .contents .left{ width: 45%; text-align: center; } .footer_menu .content_wrapper .contents .left img{ width: 180px } .footer_menu .content_wrapper .contents .right{ width: 45%; } .footer_menu .content_wrapper .contents .right .icons{ display: flex; justify-content: right; margin-bottom: 30px; } .footer_menu .content_wrapper .contents .right .icons .moment{ display: inline-block; height: 24px; margin-right: 50px; } .footer_menu .content_wrapper .contents .right .icons .instagram{ display: inline-block; height: 24px; } .footer_menu .content_wrapper .contents .right .copyright{ font-size: 10px; letter-spacing: 1px; text-align: right; } /* 下層ページ共通 */ .page_top{ position: relative; width: 100vw; height: 50vh; text-align: center; color: #fff; } .page_top > img{ width: 100%; height: 100%; object-fit: cover; } .page_top .ttl_wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .page_top .ttl_wrapper h2{ font-family: serif; font-size: 32px; letter-spacing: 2px; margin-bottom: 10px; } .page_top .ttl_wrapper h1{ font-size: 14px; letter-spacing: 1px; font-family: initial; } .pan{ max-width: 1000px; margin: 0 auto; box-sizing: border-box; } .pan .pan_list{ padding: 20px 20px 10px; } .pan .pan_list p{ font-size: 10px; } /* ペジネーション */ .pagination{ max-width: 1000px; margin: 0 auto; padding: 0px 20px 80px; box-sizing: border-box; } .numbers { text-align: center; list-style-position: inside; list-style-type: none; padding: 0; margin-bottom: 30px; } .numbers li { display: inline-block; } .numbers .current{ color: #fff; background-color: #000; } .page-numbers{ width: 40px; height: 40px; line-height: 40px; display: inline-block; margin: .2rem; color: #000; background: #fff; border: 1px solid #000; } .numbers .prev{ font-weight: bold; color: #000; background-color: initial; border: initial; transform: scaleY(1.5); } .numbers .next{ font-weight: bold; color: #000; background-color: initial; border: initial; transform: scaleY(1.5); } @media screen and (max-width:768px){ .pc_only{ display: none; } .sp_only{ display: block; } .content_wrapper { padding: 70px 20px; } .nav_wrapper { width: 85vw; transform: translate(85vw); } .nav_content { padding: 20px 0px; } .nav_content .bottom_nav .nav_link .box:nth-child(2):before { left: 85px; } .nav_content .bottom_nav .nav_link .box:nth-child(3):before { left: 85px; } .nav_content .bottom_nav .nav_studio p { font-size: 11px; } .menu .menu_wrapper { padding: 25px 20px; } .nav_content .bottom_nav .nav_link .box { font-size: 10px; padding: 6px; } .sec01 .content_wrapper .flex_wrapper .left { width: 100%; margin-top: 40px; } .sec01 .content_wrapper .flex_wrapper .right{ width: 100%; } .sec01 .content_wrapper .flex_wrapper .right .img_container{ width: 100%; height: 50vh; } .sec01 .content_wrapper .flex_wrapper .right .img_container img{ width: 100%; height: 100%; object-fit: cover; } .footer_menu .content_wrapper .contents .left { width: 100%; } .footer_menu .content_wrapper .contents .left img { width: 140px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .ttl { width: 15%; font-size: 48px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content { width: 80%; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > h1 { font-size: 18px; padding: 15px 0 30px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > p { font-size: 15px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > h2 { font-size: 12px; line-height: 24px; margin-bottom: 30px; } .sec01 .content_wrapper .flex_wrapper .left .content_box .content > a { font-size: 12px; } .sec02 .content_wrapper { height: 118vh; } .sec02 .content_wrapper .img01 { width: 45%; } .sec02 .content_wrapper .img02 { width: 45%; top: 32%; } .sec02 .content_wrapper .img03 { width: 45%; } .sec04 .content_wrapper { margin: 0 auto 30px; padding: 70px 20px 0px; } .sec04 .content_wrapper p { font-size: 40px; } .swiper-slide img { height: 300px; } .swiper-slide video { height: 300px; } .sec05 .content_wrapper .news_box .ttl { width: 15%; font-size: 48px; } .sec05 .content_wrapper .news_box .news_wrapper { width: 80%; } .sec05 .content_wrapper .news_box .news_wrapper .news { width: 100%; margin-left: 0px; padding: 15px 10px; } .sec05 .content_wrapper .news_box .news_wrapper > p { padding: 20px 0; font-size: 22px; } .sec05 .content_wrapper .news_box .news_wrapper .news .date { font-size: 10px; margin-bottom: 10px; } .sec05 .content_wrapper .news_box .news_wrapper .news .content { font-size: 12px; } .footer_top .contact_wrapper { padding: 100px 20px; } .footer_top .contact_wrapper .ttl { font-size: 34px; margin-bottom: 20px; } .footer_top .contact_wrapper .bottom .left { width: 100%; margin-bottom: 30px; } .footer_top .contact_wrapper .bottom .left p { font-size: 12px; } .footer_top .contact_wrapper .bottom .right { width: 100%; } .footer_top .contact_wrapper .bottom .right a { font-size: 11px; padding: 12px; } .footer_top .contact_wrapper .bottom .right a:before { top: 22px; } .footer_top .contact_wrapper .bottom .right a:after { top: 17px; } .footer_menu .content_wrapper .contents .right { width: 100%; } .footer_menu .content_wrapper .contents .right .icons { justify-content: center; margin-top: 60px; margin-bottom: 20px; } .footer_menu .content_wrapper .contents .right .icons .moment { height: 16px; margin-right: 40px; } .footer_menu .content_wrapper .contents .right .icons .instagram { height: 16px; } .footer_menu .content_wrapper .contents .right .copyright { text-align: center; font-size: 8px; } .pagination { padding: 0px 20px 20px; } .page-numbers { font-size: 12px; width: 30px; height: 30px; line-height: 30px; } }