:root { --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-base: #AEDCE7; --color-blue2: #A1C1C9; --header-height: 64px; --header-logo-width: 180px; --btn-detail-height: 60px; --btn-menu-width: 36px; --nav-width: 300px; --btn-credit-width: 17px; --btn-height: 60px; --innerW: calc(100% - 26px); --r5: 5px; --r10: 10px; --r15: 15px; --r20: 20px; --fs-9-10: 10px; --fs-10-10: 10px; --fs-10-11: 10px; --fs-10-12: 10px; --fs-11-12: 11px; --fs-12-12: 12px; --fs-12-13: 12px; --fs-12-15: 12px; --fs-13-14: 13px; --fs-14-16: 14px; --fs-14-20: 14px; --fs-16-20: 16px; --fs-18-20: 18px; --fs-20-26: min(5.13vw, 20px); --fs-20-25: 20px; --fs-20-30: 20px; --fs-22-26: 22px; --fs-24-30: 24px; --fs-11-12-w: 11px; --fs-12-12-w: 12px; --fs-18-20-w: 18px; --fs-24-30-w: 24px; --fs-ttl-concept: min(5.64vw, 22px); --play-width: 60px; } @media all and (min-width: 769px) { :root { --header-height: 70px; --header-logo-width: 203px; --btn-detail-height: min(4.69vw, 60px); --btn-menu-width: 60px; --nav-width: calc(50% - 10px); --btn-credit-width: 19px; --innerW: calc(100% - 40px); --fs-10-10: min(0.78vw, 10px); --fs-10-11: min(0.86vw, 11px); --fs-10-12: min(0.94vw, 12px); --fs-11-12: min(0.94vw, 12px); --fs-12-12: min(0.94vw, 12px); --fs-12-13: min(1.02vw, 13px); --fs-12-15: min(1.17vw, 15px); --fs-13-14: min(1.09vw, 14px); --fs-14-16: min(1.25vw, 16px); --fs-14-20: min(1.56vw, 20px); --fs-16-20: min(1.56vw, 20px); --fs-18-20: min(1.56vw, 20px); --fs-20-25: min(1.95vw, 25px); --fs-20-26: min(2.03vw, 26px); --fs-20-30: min(2.34vw, 30px); --fs-22-26: min(2.03vw, 26px); --fs-24-30: min(2.34vw, 30px); --fs-11-12-w: 0.94vw; --fs-12-12-w: 0.94vw; --fs-18-20-w: 1.56vw; --fs-24-30-w: 2.34vw; --fs-ttl-concept: min(1.95vw, 25px); --item-minheight: 680px; --play-width: 90px; } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } html { font-size: 3.125vw; } #lp_chantowa { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } #lp_chantowa { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { color: #000; font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; overflow-wrap: anywhere; word-break: normal; line-break: strict; background: var(--color-base); } #lp_chantowa { line-height: 1.5; letter-spacing: 0; transition: transform 0.2s ease; } #lp_chantowa a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } #lp_chantowa li { list-style: none; } #lp_chantowa h1, #lp_chantowa h2, #lp_chantowa h3, #lp_chantowa h4, #lp_chantowa h5, #lp_chantowa h6 { font-weight: normal; margin: 0; letter-spacing: revert; color: revert; text-align: revert; font-size: revert; padding: revert; } #lp_chantowa .textbox { text-box: trim-both cap alphabetic; } #lp_chantowa span.c-icon { position: relative; } #lp_chantowa span.c-icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } button { cursor: pointer; } button[data-menu] { z-index: 10; } .scrolled #nav { top: 13px; height: calc(100% - 26px); } .android #nav { height: calc(100vh - 26px - var(--header-height)); } #nav { position: fixed; top: calc(13px + var(--header-height)); left: 0px; width: var(--nav-width); height: calc(100% - 26px - var(--header-height)); border-radius: 0 15px 15px 0; background: var(--color-blue2); z-index: 5; transition: transform 0.2s ease; transform: translate3d(-100%, 0, 0); } #nav .nav_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow-y: auto; } #nav .nav_content { width: calc(100% - 52px); height: 100%; box-sizing: border-box; margin-inline: auto; padding-bottom: min(3.33vw, 13px); position: relative; } #nav #nav_page { padding-top: min(11.28vw, 44px); } #nav #nav_page ul li { margin-bottom: 0px; line-height: 1.72; } #nav #nav_page ul li a { font-size: var(--fs-24-30); font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; color: var(--color-black); } #nav #nav_page ul li a:focus, #nav #nav_page ul li a:hover { text-decoration: none !important; } #nav ul#glbnav_items { display: flex; flex-wrap: wrap; max-width: 280px; column-gap: min(5.13vw, 20px); row-gap: min(5.13vw, 20px); margin: min(1.54vw, 6px) 0 min(4.87vw, 19px) 0; } #nav ul#glbnav_items li { width: min(15.38vw, 60px); line-height: 1; } #nav ul#glbnav_items li a figure { width: min(15.38vw, 60px); height: min(15.38vw, 60px); background: var(--color-white); border-radius: 100vmax; display: flex; align-items: center; justify-content: center; } #nav ul#glbnav_items li a figure img { width: min(8.46vw, 33px); height: auto; } #nav ul#glbnav_items li a p { font-size: var(--fs-11-12); font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; letter-spacing: 0em; color: var(--color-black); text-align: center; margin-top: 0.5em; } #nav .nav_btm { width: 100%; position: absolute; bottom: 13px; } #nav .c-wrap_btn { margin-top: min(6.15vw, 24px); } #nav .c-wrap_btn a { width: 100%; height: min(15.38vw, 60px); display: flex; align-items: center; justify-content: center; position: relative; } #nav .c-wrap_btn a:before { background: var(--color-white); width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); border-radius: 100vmax; content: ""; } #nav .c-wrap_btn a .inr { position: relative; } #nav .c-wrap_btn a span { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; font-size: var(--fs-14-16); } #nav .c-sns { margin-top: min(8.46vw, 33px); display: flex; align-items: center; column-gap: min(5.13vw, 20px); } #nav .c-sns p { font-size: var(--fs-12-15); line-height: 1; font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; } #nav .c-sns ul { display: flex; column-gap: min(4.36vw, 17px); } #nav .c-sns ul li button, #nav .c-sns ul li a { width: min(9.23vw, 36px); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; } #nav .c-sns ul li button:before, #nav .c-sns ul li a:before { background: var(--color-white); width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; border-radius: 100vmax; content: ""; } #nav .c-sns ul li button .inr, #nav .c-sns ul li a .inr { position: relative; } #nav .c-sns ul li button span, #nav .c-sns ul li a span { display: block; position: relative; } #nav .c-sns ul li button span svg, #nav .c-sns ul li a span svg { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; fill: var(--color-blue2); } #nav .c-sns ul li .icon_instagram { width: min(4.1vw, 16px); height: min(4.1vw, 16px); } #nav .c-sns ul li .icon_fb { width: min(4.49vw, 17.5px); height: min(4.49vw, 17.5px); } #nav .c-sns ul li .icon_line { width: min(4.36vw, 17px); height: min(4.1vw, 16px); } #nav .c-sns ul li .icon_x { width: min(4.1vw, 16px); height: min(4.1vw, 16px); } #nav .c-sns ul li .icon_youtube { width: min(4.74vw, 18.5px); height: min(3.33vw, 13px); } .pc-footer { display: none; } header { width: 100%; height: var(--header-height); position: absolute; top: 0px; left: 0px; background: var(--color-white); z-index: 10; } header .header_inner { width: 100%; height: var(--header-height); position: relative; } header p { width: var(--header-logo-width); aspect-ratio: 203/24; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 calc(var(--header-logo-width) / -2); } button[data-menu] { width: var(--btn-menu-width); height: var(--btn-menu-width); position: sticky; margin-top: calc(var(--header-height) + 5px); top: 5px; left: 5px; background: var(--color-white); border-radius: 100vmax; } button[data-menu] .inr { width: 14px; height: 11.5px; display: block; position: absolute; top: 50%; left: 50%; margin: -5.75px 0 0 -7px; } button[data-menu] .inr span { width: 100%; height: 1.5px; background: #A1C1C9; display: block; border-radius: 100vmax; position: absolute; } button[data-menu] .inr span:nth-of-type(1) { top: 0px; transition: top 0.3s ease 0s, rotate 0.3s ease 0s; } button[data-menu] .inr span:nth-of-type(2) { top: 5px; left: 50%; transform: translate3d(-50%, 0, 0); transition: width 0.3s ease; } button[data-menu] .inr span:nth-of-type(3) { top: 10px; transition: top 0.3s ease 0s, rotate 0.3s ease 0s; } .hide_scroll body { width: 100%; overflow-x: hidden; } #bg_nav { content: ""; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.6); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .show_menu #nav { transform: translate3d(0, 0, 0); transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); } .show_menu button[data-menu] .inr span:nth-of-type(1) { rotate: 45deg; top: 5px; transition-delay: 0.2s; } .show_menu button[data-menu] .inr span:nth-of-type(2) { width: 0%; } .show_menu button[data-menu] .inr span:nth-of-type(3) { rotate: -45deg; top: 5px; transition-delay: 0.2s; } .show_menu #lp_chantowa { /*width: calc(100% - var(--scrollbar));*/ transform: translate3d(var(--nav-width), 0, 0); transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); } .show_menu #bg_nav { opacity: 1; pointer-events: auto; } .android #lp_chantowa section { transition: transform 0.2s ease; } .android.show_menu #lp_chantowa { transform: translate3d(0, 0, 0); } .android.show_menu #lp_chantowa section { transform: translate3d(var(--nav-width), 0, 0); transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); } #b-loading { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 1000; } #b-loading .loading_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } #b-loading p, #b-loading svg { width: 57px; height: 111px; } #b-loading svg { position: absolute; bottom: 0px; left: 0px; } #b-loading p { position: relative; } #b-loading p span { position: absolute; width: 57px; overflow: hidden; bottom: 0px; left: 0px; top: auto; display: block; } #b-loading p span:nth-of-type(1) { height: 111px; } #b-loading p span:nth-of-type(1) svg { fill: #A1C1C9; } #b-loading p span:nth-of-type(2) { height: 0%; transition: height 0.05s linear; } #b-loading p span:nth-of-type(2) svg { fill: var(--color-white); } a.c-btn { height: var(--btn-height); display: block; position: relative; } a.c-btn .inr { width: 100%; height: var(--btn-height); display: flex; align-items: center; justify-content: center; position: relative; } a.c-btn .inr span { font-size: var(--fs-14-16); font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; } a.c-btn.c-white:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: var(--color-white); border-radius: 100vmax; } a.c-btn.round { border-radius: 100vmax; } .c-btn.blur { height: var(--btn-height); border-radius: var(--r10); background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .c-btn.blur .inr { display: flex; width: 100%; height: var(--btn-height); align-items: center; justify-content: center; } .c-btn span.c-icon_arrow { width: 35px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: absolute; background: var(--color-blue2); border-radius: 100vmax; position: absolute; right: 3.33vw; top: 50%; margin-top: -17.5px; } .c-btn span.c-icon_arrow span.c-icon { width: 10px; height: 10px; display: block; position: relative; } .c-btn span.c-icon_arrow span.c-icon svg { fill: var(--color-white); } .c-btn span.txt { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; font-size: var(--fs-16-20); } .block-page-top { display: none !important; } .c-pagetop { display: flex; justify-content: center; padding-bottom: min(20.51vw, 80px); } .c-pagetop a { display: block; width: fit-content; margin-inline: auto; } .c-pagetop a span.c-circle { width: min(7.69vw, 30px); margin-inline: auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 100vmax; background: var(--color-white); } .c-pagetop a span.c-circle span.c-icon { width: min(2.05vw, 8px); height: min(2.05vw, 8px); } .c-pagetop a span.c-circle span.c-icon svg { fill: rgb(161, 193, 201); } .c-pagetop a p { font-size: var(--fs-14-20); font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; text-align: center; margin-top: min(3.59vw, 14px); line-height: 1; } .pane-footer__bnr, .pane-footer__txt { display: none; } .pane-footer__chat-btn { display: none; } .nunito-b { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; } #lp_chantowa { margin-top: calc(var(--btn-menu-width) * -1 - var(--header-height) - 5px); } #lp_chantowa #staffsnaps { width: 100%; margin-top: 13px; } #lp_chantowa #staffsnaps .c-staffsnap_bnr { width: calc(100% - 26px); margin-inline: auto; background: var(--color-blue2); border-radius: var(--r15); } #lp_chantowa #staffsnaps .c-staffsnap_bnr .c-ttl { padding: 6.41vw 0; text-align: center; } #lp_chantowa #staffsnaps .c-staffsnap_bnr .c-ttl h3 { font-size: var(--fs-20-30); } #lp_chantowa #staffsnaps .c-staffsnap_bnr .img_bnr { width: calc(100% - 26px); margin-inline: auto; border-radius: var(--r15); overflow: hidden; } #lp_chantowa #staffsnaps .c-wrap_viewall { width: calc(100% - 26px); max-width: 370px; margin: 6.67vw auto 0 auto; padding-bottom: 6.67vw; } #lp_chantowa #movie .s-inner { width: calc(100% - 26px); margin-inline: auto; padding-top: 13px; } #lp_chantowa #movie .c-movie_col2 { background: var(--color-blue2); border-radius: var(--r15); } #lp_chantowa #movie .c-movie_col2 .movie_col_l { width: 100%; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .col_l_inner { padding: 5.13vw 0 6.67vw 0; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .txt_v .c-ttl { font-size: 5.13vw; font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; color: var(--color-white); text-align: center; line-height: 1.4; margin-bottom: 4.1vw; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .txt_v h3 { width: 66.67vw; height: 4.12vw; aspect-ratio: 260/16.05; margin-inline: auto; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .txt_v h3 img { width: 100%; } #lp_chantowa #movie .c-movie_col2 .movie_col_r { width: 100%; } #lp_chantowa #movie .c-movie_col2 .movie_col_r .c-movie { width: 100%; border-radius: var(--r15); overflow: hidden; } #lp_chantowa #movie .c-movie_col2 .movie_col_r .c-movie iframe { scale: 1.01; } #lp_chantowa #movie .c-movie { width: 100%; aspect-ratio: 364/204; position: relative; border-radius: var(--r15); overflow: hidden; } #lp_chantowa #movie .c-movie iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #lp_chantowa #movie .c-movie .c-movie_cover { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; transition: opacity 0.1s ease; opacity: 0; pointer-events: none; } #lp_chantowa #movie .c-movie .c-movie_cover figure { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #lp_chantowa #movie .c-movie .c-movie_cover figure:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); } #lp_chantowa #movie .c-movie .c-movie_cover .cover_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } #lp_chantowa #movie .c-movie .c-movie_cover button { width: var(--play-width); aspect-ratio: 1/1; } #lp_chantowa #movie .c-movie.pause { transition: opacity 0.4s ease; } #lp_chantowa #movie .c-movie.pause .c-movie_cover { opacity: 1; pointer-events: auto; } #lp_chantowa #archives { padding-bottom: min(20.51vw, 80px); } #lp_chantowa #archives .c-list_archives { width: var(--innerW); margin-inline: auto; } #lp_chantowa #archives .c-list_archives ul li { padding-top: 13px; } #lp_chantowa #archives .c-list_archives ul li a { width: 100%; display: block; position: relative; } #lp_chantowa #archives .c-list_archives ul li figure { width: 100%; border-radius: var(--r15); overflow: hidden; } #lp_chantowa #archives .c-list_archives ul li .content { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #lp_chantowa #archives .c-list_archives ul li .c-btn_wrap { width: 92.85%; position: absolute; bottom: 3.33vw; left: 3.575%; } #lp_chantowa #archives .c-list_archives ul li.archives_winter h4 { width: 12.72vw; position: absolute; top: 7.69vw; left: 6.67vw; } #lp_chantowa #archives .c-list_archives ul li.archives_winter p.logo { width: 25.64vw; position: absolute; top: 5.38vw; right: 3.33vw; } #lp_chantowa #archives .c-list_archives ul li.archives_cs { width: 100%; margin-inline: auto; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr { border-radius: var(--r15); background: var(--color-blue2); height: 76.92vw; display: flex; align-items: center; justify-content: center; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr p.logo { width: 73.07%; max-width: 266px; margin-inline: auto; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr dl { text-align: center; margin-top: 8.97vw; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr dl dt, #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr dl dd { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700 !important; font-style: normal; color: var(--color-white); font-size: var(--fs-20-25); line-height: 1.4; } @media screen and (max-height: 548px) { #nav #nav_page { padding-top: min(7.69vw, 30px); } #nav #nav_page ul li { margin-bottom: 0px; line-height: 1.8; } #nav #nav_page ul#glbnav_items { width: 200px; column-gap: min(5.13vw, 20px); row-gap: min(7.69vw, 30px); margin: min(1.03vw, 4px) 0 min(4.62vw, 18px) 0; } #nav #nav_page ul#glbnav_items li { width: min(10.26vw, 40px); line-height: 1; } #nav #nav_page ul#glbnav_items li a { position: relative; padding-bottom: 0em; display: block; } #nav #nav_page ul#glbnav_items li a figure { width: min(10.26vw, 40px); height: min(10.26vw, 40px); } #nav #nav_page ul#glbnav_items li a figure img { width: min(5.64vw, 22px); height: auto; } #nav #nav_page ul#glbnav_items li a p { font-size: var(--fs-10-10); white-space: nowrap; margin-top: 0.5em; position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); } #nav .c-wrap_btn { margin-top: min(5.13vw, 20px); } #nav .c-sns { margin-top: min(5.13vw, 20px); } } @media all and (min-width: 769px) { .sp-footer { display: none; } .pc-footer { display: block; padding-top: 0px; } button[data-menu] { margin-top: calc(var(--header-height) + 10px); top: 10px; left: 10px; } button[data-menu] .inr { width: 25px; height: 16px; margin: -8px 0 0 -12.5px; } button[data-menu] .inr span { width: 100%; height: 2px; } button[data-menu] .inr span:nth-of-type(1) { top: 0px; } button[data-menu] .inr span:nth-of-type(2) { top: 7px; } button[data-menu] .inr span:nth-of-type(3) { top: 14px; } #lp_chantowa { margin-top: calc(var(--btn-menu-width) * -1 - var(--header-height) - 17px); } header p { margin: -12px 0 0 calc(var(--header-logo-width) / -2); } #b-loading p, #b-loading svg { width: 75px; height: 146px; } #b-loading p span, #b-loading svg span { width: 75px; } #b-loading p span:nth-of-type(1), #b-loading svg span:nth-of-type(1) { height: 146px; } #b-loading p span:nth-of-type(2), #b-loading svg span:nth-of-type(2) { height: 0%; } .scrolled #nav { top: 20px; height: calc(100% - 40px); } #nav { position: fixed; top: calc(20px + var(--header-height)); left: 0px; width: var(--nav-width); height: calc(100% - 40px - var(--header-height)); border-radius: 0 20px 20px 0; } #nav .nav_content { width: calc(100% - 132px); min-height: 540px; height: 100%; max-width: 400px; margin-inline: 0; margin-left: 80px; display: flex; align-items: center; } #nav .content_inner { width: 100%; } #nav #nav_page { padding-top: 0; } #nav #nav_page ul li { margin-bottom: 0px; line-height: 1.9; } #nav ul#glbnav_items { display: none; } #nav .nav_btm { position: relative; bottom: auto; } #nav .c-wrap_btn { margin-top: min(4.69vw, 60px); } #nav .c-wrap_btn a { width: 100%; height: min(4.69vw, 60px); } #nav .c-sns { margin-top: min(6.25vw, 80px); display: block; } #nav .c-sns p { margin-bottom: min(1.56vw, 20px); } #nav .c-sns ul { column-gap: min(2.73vw, 35px); } #nav .c-sns ul li a, #nav .c-sns ul li button { width: min(4.06vw, 52px); } #nav .c-sns ul li .icon_instagram { width: min(1.88vw, 24px); height: min(1.88vw, 24px); } #nav .c-sns ul li .icon_fb { width: min(1.95vw, 25px); height: min(1.95vw, 25px); } #nav .c-sns ul li .icon_line { width: min(1.91vw, 24.5px); height: min(1.8vw, 23px); } #nav .c-sns ul li .icon_x { width: min(1.8vw, 23px); height: min(1.8vw, 23px); } #nav .c-sns ul li .icon_youtube { width: min(2.11vw, 27px); height: min(1.48vw, 19px); } .show_menu button[data-menu] .inr span:nth-of-type(1) { rotate: 45deg; top: 7px; } .show_menu button[data-menu] .inr span:nth-of-type(3) { rotate: -45deg; top: 7px; } .c-pagetop { padding-bottom: min(7.81vw, 100px); } .c-pagetop a span.c-circle { width: 40px; } .c-pagetop a span.c-circle span.c-icon { width: 13px; height: 13px; } .c-pagetop a p { margin-top: 16px; } #lp_chantowa #staffsnaps { width: 100%; margin-top: 13px; } #lp_chantowa #staffsnaps .c-staffsnap_bnr { width: calc(100% - 40px); margin-inline: auto; border-radius: var(--r20); } #lp_chantowa #staffsnaps .c-staffsnap_bnr .c-ttl { padding: min(3.13vw, 40px) 0 min(2.34vw, 30px) 0; } #lp_chantowa #staffsnaps .c-staffsnap_bnr .img_bnr { width: calc(100% - 40px); margin-inline: auto; border-radius: var(--r20); } #lp_chantowa #staffsnaps .c-wrap_viewall { width: 86.66%; max-width: 400px; margin: min(3.91vw, 50px) auto min(4.69vw, 60px) auto; } #lp_chantowa #staffsnaps .c-wrap_viewall { margin: min(2.34vw, 30px) auto 0 auto; padding-bottom: min(2.34vw, 30px); } #lp_chantowa #movie .s-inner { width: calc(100% - 40px); padding-top: 20px; } #lp_chantowa #movie .c-movie_col2 { display: flex; flex-direction: row-reverse; background: none; border-radius: 0; justify-content: space-between; } #lp_chantowa #movie .c-movie_col2 .movie_col_l { width: 10.08%; background: var(--color-blue2); border-radius: var(--r20); } #lp_chantowa #movie .c-movie_col2 .movie_col_l .col_l_inner { padding: 0; width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .txt_v .c-ttl { display: none; } #lp_chantowa #movie .c-movie_col2 .movie_col_l .txt_v h3 { width: 1.95vw; margin-inline: 0; aspect-ratio: 25/432; height: 33.75vw; } #lp_chantowa #movie .c-movie_col2 .movie_col_r { width: calc(89.92% - 20px); } #lp_chantowa #movie .c-movie_col2 .movie_col_r .c-movie { width: 100%; border-radius: var(--r20); } #lp_chantowa #movie .c-movie { width: 100%; aspect-ratio: 1240/698; border-radius: var(--r20); } #lp_chantowa #movie .c-movie iframe { scale: 1.01; } #lp_chantowa #archives { padding-bottom: min(6.25vw, 80px); } #lp_chantowa #archives .c-list_archives { width: var(--innerW); } #lp_chantowa #archives .c-list_archives ul li { padding-top: 20px; } #lp_chantowa #archives .c-list_archives ul li figure { width: 100%; border-radius: var(--r20); } #lp_chantowa #archives .c-list_archives ul li .c-btn_wrap { width: calc(100% - 40px); bottom: 20px; left: 20px; } #lp_chantowa #archives .c-list_archives ul li .c-btn_wrap .c-btn .inr { display: flex; align-items: center; column-gap: 3.13vw; } #lp_chantowa #archives .c-list_archives ul li .c-btn_wrap .c-icon_arrow { position: relative; top: auto; right: auto; margin: 0; } #lp_chantowa #archives .c-list_archives ul li.archives_winter h4 { width: 5.63vw; top: 4.69vw; left: auto; right: 8.59vw; } #lp_chantowa #archives .c-list_archives ul li.archives_winter p.logo { width: 25.31vw; top: 13.83vw; right: auto; left: 7.73vw; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr { border-radius: var(--r20); background: var(--color-blue2); height: auto; display: flex; align-items: center; justify-content: center; padding: min(3.13vw, 40px) 0; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr p.logo { width: min(25.31vw, 324px); max-width: 324px; margin-inline: auto; } #lp_chantowa #archives .c-list_archives ul li.archives_cs .inr dl { text-align: center; margin-top: min(3.52vw, 45px); } } .l-section { width: 100%; padding-top: var(--header-height); } #b-loading { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 1000; background: var(--color-base); } #b-loading.disable { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } #b-loading .loading_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } #b-loading p, #b-loading svg { width: 57px; height: 111px; } #b-loading svg { position: absolute; bottom: 0px; left: 0px; } #b-loading p { position: relative; } #b-loading p span { position: absolute; width: 57px; overflow: hidden; bottom: 0px; left: 0px; top: auto; display: block; } #b-loading p span:nth-of-type(1) { height: 111px; } #b-loading p span:nth-of-type(1) svg { fill: #A1C1C9; } #b-loading p span:nth-of-type(2) { height: 0%; transition: height 0.05s linear; } #b-loading p span:nth-of-type(2) svg { fill: var(--color-white); } @media all and (min-width: 769px) { .start #b-loading .loading_inner { width: calc(100% + var(--scrollbar)); } #b-loading p, #b-loading svg { width: 75px; height: 146px; } #b-loading p span, #b-loading svg span { width: 75px; } #b-loading p span:nth-of-type(1), #b-loading svg span:nth-of-type(1) { height: 146px; } #b-loading p span:nth-of-type(2), #b-loading svg span:nth-of-type(2) { height: 0%; } }