/*** 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; } body { color: #000; font-size: 3.2vw; letter-spacing: 0.05em; line-height: 1; background-color: #fff; overflow-x: clip; } @media screen and (min-width: 1025px) { body { font-size: 14px; } } a { display: block; color: inherit; text-decoration: none; transition: all 0.6s; } img { width: 100%; display: block; } [v-cloak] { display: none; } body { font-family: dnp-shuei-gothic-gin-std, sans-serif; } @media screen and (min-width: 1025px) { .l-main { display: flex; position: relative; } } @media screen and (min-width: 1025px) { .l-main__center { width: 520px; } } @media screen and (min-width: 1025px) { .l-main__left, .l-main__right { width: calc((100vw - 520px) / 2); height: 100svh; position: sticky; top: 0; } } @media screen and (min-width: 1025px) { .l-main__left { display: flex; flex-direction: column; align-items: center; border-right: 1px solid #000; } } @media screen and (min-width: 1025px) { .l-main__right { border-left: 1px solid #000; } } .c-list { width: 84.8vw; } @media screen and (min-width: 1025px) { .c-list { width: 20.9722222222vw; } } .c-list > li:not(:first-child) { padding-top: 6.4vw; } @media screen and (min-width: 1025px) { .c-list > li:not(:first-child) { padding-top: 1.5277777778vw; } } .c-list > li:not(:last-child) { padding-bottom: 6.4vw; } @media screen and (min-width: 1025px) { .c-list > li:not(:last-child) { padding-bottom: 1.5277777778vw; } } .c-list > li .date { display: flex; align-items: flex-start; gap: 1.3333333333vw; font-size: 4.5333333333vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 100, "wght" 400, "slnt" 0; } @media screen and (min-width: 1025px) { .c-list > li .date { font-size: 1.1111111111vw; gap: 0.3472222222vw; } } .c-list > li .date .day { padding: 0 0.5333333333vw; font-size: 3.4666666667vw; border-radius: 50%; } @media screen and (min-width: 1025px) { .c-list > li .date .day { padding: 0 0.0694444444vw; font-size: 0.8333333333vw; } } .c-list > li .pref { margin-top: -1.3333333333vw; color: #93D995; font-size: 17.0666666667vw; letter-spacing: -0.015em; } @media screen and (min-width: 1025px) { .c-list > li .pref { margin-top: -0.3472222222vw; font-size: 4.1666666667vw; } } .c-list > li .place { margin-top: -1.6vw; font-size: 4.5333333333vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 600, "slnt" -15; } @media screen and (min-width: 1025px) { .c-list > li .place { margin-top: -0.3472222222vw; font-size: 1.1111111111vw; } } .c-list__link { width: 37.3333333333vw; aspect-ratio: 140/35; } @media screen and (min-width: 1025px) { .c-list__link { width: 9.3055555556vw; } } .c-list__link > * { height: 100%; } .c-list__link a { height: 100%; padding-top: 0.5333333333vw; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 4.2666666667vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 700, "slnt" 0; position: relative; } @media screen and (min-width: 1025px) { .c-list__link a { padding-top: 0.1388888889vw; font-size: 1.0416666667vw; } } .c-list__link a::after { content: ""; width: 2.1333333333vw; height: 3.2vw; clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; top: 50%; right: 2.6666666667vw; transform: translateY(-50%); transition: all 0.6s; } @media screen and (min-width: 1025px) { .c-list__link a::after { width: 0.5555555556vw; height: 0.8333333333vw; right: 0.6944444444vw; } } @media screen and (min-width: 1025px) { .c-list__link a:hover { background-color: transparent; } } .c-top__image { position: relative; } .c-top__image .model { max-height: none; position: absolute; z-index: 1; } .c-top__heading { padding: 4vw 0; background-color: #EEF27D; text-align: center; } @media screen and (min-width: 1025px) { .c-top__heading { padding: 20px 0; } } .c-top__heading .pref { font-size: 17.6vw; letter-spacing: 0.03em; } @media screen and (min-width: 1025px) { .c-top__heading .pref { font-size: 79px; } } .c-top__heading .place { font-size: 5.3333333333vw; font-family: bookmania, serif; font-weight: 600; letter-spacing: -0.02em; } @media screen and (min-width: 1025px) { .c-top__heading .place { font-size: 24px; } } .c-top__heading .place .italic { font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 500, "slnt" -15; } .c-top__heading .date { margin-top: -1.3333333333vw; font-size: 5.3333333333vw; font-family: bookmania, serif; font-weight: 600; letter-spacing: -0.02em; } @media screen and (min-width: 1025px) { .c-top__heading .date { font-size: 24px; margin-top: -5px; } } .c-top__heading .day, .c-top__heading .open { font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 500, "slnt" -15; } .c-top__heading .info { margin-top: 2.6666666667vw; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 700; line-height: 1.5; white-space: pre-line; } @media screen and (min-width: 1025px) { .c-top__heading .info { margin-top: 10px; } } .sendai .model { width: 42.6666666667vw; top: -2.4vw; left: 28.8vw; } @media screen and (min-width: 1025px) { .sendai .model { width: 225px; top: -16px; left: 145px; } } .shinjuku .model { width: 45.3333333333vw; top: -1.3333333333vw; left: 25.0666666667vw; } @media screen and (min-width: 1025px) { .shinjuku .model { width: 235px; top: -6px; left: 130px; } } .hiroshima .model { width: 65.8666666667vw; top: 1.0666666667vw; left: 15.2vw; } @media screen and (min-width: 1025px) { .hiroshima .model { width: 350px; top: 4px; left: 80px; } } @media screen and (min-width: 1025px) { .c-navi { padding-top: 40px; } } .c-navi > li + li { border-top: 1px solid #000; } .c-navi > li .day { border: 1px solid #000; } .c-navi__link a { height: 100%; color: #EEF27D; background-color: #000; border: 1px solid #000; } .c-navi__link a::after { content: ""; background-color: #EEF27D; } @media screen and (min-width: 1025px) { .c-navi__link a:hover { color: #000; } .c-navi__link a:hover::after { background-color: #000; } } .c-footer { padding-bottom: 16vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .c-footer { padding-top: 44px; padding-bottom: 0; } } .c-footer__logo { width: 84.5333333333vw; } @media screen and (min-width: 1025px) { .c-footer__logo { width: 285px; } } @media screen and (min-width: 1025px) { .c-footer__logo > a:hover { opacity: 0.6; } } .c-footer__navi { width: 79.4666666667vw; margin-top: 5.8666666667vw; display: flex; align-items: flex-end; justify-content: space-between; } @media screen and (min-width: 1025px) { .c-footer__navi { width: 285px; margin-top: 20px; } } .c-footer__list { display: flex; flex-direction: column; gap: 4vw; } @media screen and (min-width: 1025px) { .c-footer__list { gap: 14px; } } .c-footer__list > li { font-size: 3.7333333333vw; font-family: sofia-pro, sans-serif; font-weight: 400; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .c-footer__list > li { font-size: 12px; } } .c-footer__list > li > a { text-decoration: underline; } @media screen and (min-width: 1025px) { .c-footer__list > li > a:hover { opacity: 0.6; } } .c-footer__copy { font-size: 2.6666666667vw; font-family: nimbus-sans, sans-serif; font-weight: 400; } @media screen and (min-width: 1025px) { .c-footer__copy { font-size: 10px; } } .p-comingsoon { width: 100%; height: 100svh; background-color: #93D995; position: fixed; top: 0; left: 0; } .p-comingsoon__img { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .p-comingsoon__img > picture { width: 100%; } .p-loading { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #93D995; position: fixed; top: 0; left: 0; z-index: 100; } .p-loading__icon { width: 29.3333333333vw; } @media screen and (min-width: 1025px) { .p-loading__icon { width: 10.4166666667vw; } } .p-firstView { padding: 20.2666666667vw 0 12vw; display: flex; flex-direction: column; align-items: center; color: #EEF27D; background-image: url(../images/firstView/bg-sp.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } @media screen and (min-width: 1025px) { .p-firstView { aspect-ratio: 1440/785; padding: 0 9.375vw 0 6.6666666667vw; align-items: normal; flex-direction: row-reverse; justify-content: space-between; background-image: url(../images/firstView/bg-pc.jpg); } } .p-firstView__heading { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-firstView__heading { padding-top: 16.6666666667vw; } } .p-firstView__logo { width: 44.2666666667vw; } @media screen and (min-width: 1025px) { .p-firstView__logo { width: 15.6944444444vw; } } .p-firstView__new { margin-top: 4vw; display: flex; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 200, "slnt" -15; font-size: 14.6666666667vw; letter-spacing: 0.05em; } @media screen and (min-width: 1025px) { .p-firstView__new { margin-top: 1.3888888889vw; font-size: 5.2083333333vw; } } .p-firstView__open { margin-top: -6.6666666667vw; color: transparent; font-size: 29.8666666667vw; font-family: fairplex-wide, serif; font-weight: 900; -webkit-text-stroke-width: 0.5333333333vw; -webkit-text-stroke-color: #EEF27D; } @media screen and (min-width: 1025px) { .p-firstView__open { margin-top: -2.0833333333vw; font-size: 10.625vw; -webkit-text-stroke-width: 0.1388888889vw; } } .p-firstView__list { margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-firstView__list { margin: 0; padding-top: 8.3333333333vw; } } .p-firstView__list > li + li { border-top: 1px solid #EEF27D; } .p-firstView__list > li .day { border: 1px solid #EEF27D; } .p-firstView__link a { color: #000; background-color: #EEF27D; border: 1px solid #EEF27D; } .p-firstView__link a::after { content: ""; background-color: #000; } @media screen and (min-width: 1025px) { .p-firstView__link a:hover { color: #EEF27D; } .p-firstView__link a:hover::after { background-color: #EEF27D; } } .p-loop { background-color: #93D995; } .p-loop__wrap { padding: 13.3333333333vw 0; overflow: hidden; } @media screen and (min-width: 1025px) { .p-loop__wrap { padding: 60px 0; } } .p-loop__list { width: 706.6666666667vw; display: flex; flex-direction: row-reverse; } @media screen and (min-width: 1025px) { .p-loop__list { width: 217.0138888889vw; } } .p-about { padding: 16vw 0 8vw; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (min-width: 1025px) { .p-about { padding: 50px 0; } } .p-about__map { width: 89.3333333333vw; aspect-ratio: 335/154; position: relative; } @media screen and (min-width: 1025px) { .p-about__map { width: 402px; } } .p-about__map > * { position: absolute; } .p-about__map .map { width: 100%; bottom: 0; left: 0; } .p-about__map .text { width: 30.9333333333vw; top: 0; left: 9.6vw; } @media screen and (min-width: 1025px) { .p-about__map .text { width: 140px; left: 43px; } } .p-about__map .pin { width: 10.6666666667vw; } @media screen and (min-width: 1025px) { .p-about__map .pin { width: 48px; } } .p-about__map .pin--1 { top: 13.6vw; right: 22.9333333333vw; } @media screen and (min-width: 1025px) { .p-about__map .pin--1 { top: 62px; right: 104px; } } .p-about__map .pin--2 { top: 22.9333333333vw; right: 29.8666666667vw; } @media screen and (min-width: 1025px) { .p-about__map .pin--2 { top: 104px; right: 134px; } } .p-about__map .pin--3 { top: 18.1333333333vw; left: 24.5333333333vw; } @media screen and (min-width: 1025px) { .p-about__map .pin--3 { top: 82px; left: 110px; } } .p-about__desc { margin-top: 10.6666666667vw; text-align: center; line-height: 2; } @media screen and (min-width: 1025px) { .p-about__desc { margin-top: 50px; } } body { font-family: dnp-shuei-gothic-gin-std, sans-serif; } .p-contents { padding-bottom: 17.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents { width: 100%; padding-bottom: 7.9861111111vw; } } .p-contents__section { padding-top: 8vw; } @media screen and (min-width: 1025px) { .p-contents__section { padding-top: 50px; } } .p-contents__section + .p-contents__section { margin-top: 24vw; } @media screen and (min-width: 1025px) { .p-contents__section + .p-contents__section { margin-top: 100px; } } .p-contents__article { margin-top: 13.3333333333vw; display: flex; flex-direction: column; align-items: center; gap: 8.5333333333vw; } @media screen and (min-width: 1025px) { .p-contents__article { margin-top: 60px; gap: 40px; } } .p-contents__article > li { width: 90.6666666667vw; border-radius: 2.6666666667vw 2.6666666667vw 0 2.6666666667vw; overflow: hidden; } @media screen and (min-width: 1025px) { .p-contents__article > li { width: 408px; border-radius: 1.5277777778vw 1.5277777778vw 0 1.5277777778vw; } } .p-contents__before, .p-contents__after { background-color: #93D995; } .p-contents__before .top, .p-contents__after .top { aspect-ratio: 340/150; } @media screen and (min-width: 1025px) { .p-contents__before .top, .p-contents__after .top { aspect-ratio: 408/180; } } .p-contents__before .top { padding: 4.2666666667vw 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: #A9E1AA; } @media screen and (min-width: 1025px) { .p-contents__before .top { padding: 20px 0; } } .p-contents__before .top .index { width: 40.8vw; } @media screen and (min-width: 1025px) { .p-contents__before .top .index { width: 184px; } } .p-contents__before .top .date { margin-top: 4vw; color: #fff; font-size: 17.6vw; font-family: bookmania, serif; font-weight: 600; position: relative; } @media screen and (min-width: 1025px) { .p-contents__before .top .date { margin-top: 1.3888888889vw; font-size: 79px; } } .p-contents__before .top .day { font-size: 5.8666666667vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 50, "wght" 400, "slnt" 0; position: absolute; top: -2.1333333333vw; right: -1.3333333333vw; transform: translateX(100%); } @media screen and (min-width: 1025px) { .p-contents__before .top .day { font-size: 26px; top: -10px; right: 0px; } } .p-contents__before .top .info { margin-top: -1.3333333333vw; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 700; } @media screen and (min-width: 1025px) { .p-contents__before .top .info { margin-top: -0.6944444444vw; } } .p-contents__before .text { aspect-ratio: 340/76; padding: 2.6666666667vw 5.3333333333vw; display: flex; align-items: flex-end; justify-content: flex-end; } @media screen and (min-width: 1025px) { .p-contents__before .text { aspect-ratio: 408/90; padding: 15px 25px; } } .p-contents__before .text .desc { font-size: 7.4666666667vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 100, "wght" 500, "slnt" -15; letter-spacing: -0.02em; } @media screen and (min-width: 1025px) { .p-contents__before .text .desc { font-size: 33px; } } .p-contents__after { transition: all 0.6s; cursor: pointer; } @media screen and (min-width: 1025px) { .p-contents__after:hover { opacity: 0.6; } } .p-contents__after .top { overflow: hidden; } .p-contents__after .top .thumb { width: 100%; height: 100%; overflow: hidden; } .p-contents__after .top .thumb > img { width: 100%; height: 100%; object-fit: cover; } .p-contents__after .text { padding: 2.1333333333vw 6.6666666667vw 3.2vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-contents__after .text { padding: 15px 30px 20px; } } .p-contents__after .text .index { font-size: 2.9333333333vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 75, "wght" 600, "slnt" -15; } @media screen and (min-width: 1025px) { .p-contents__after .text .index { font-size: 12px; } } .p-contents__after .text .container { width: 100%; margin-top: 0.8vw; display: flex; align-items: center; gap: 1.3333333333vw; justify-content: space-between; font-size: 4.2666666667vw; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 700; } @media screen and (min-width: 1025px) { .p-contents__after .text .container { margin-top: 10px; gap: 10px; font-size: 16px; } } .p-contents__after .text .title { flex: 1; line-height: 1.25; } .p-contents__after .text .arrow { width: 7.2vw; } @media screen and (min-width: 1025px) { .p-contents__after .text .arrow { width: 30px; } } .p-modal { height: 100svh; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 50; overflow-y: scroll; } @media screen and (min-width: 1025px) { .p-modal { width: 100%; } } .p-modal__inner { padding: 9.3333333333vw 0 12vw; } @media screen and (min-width: 1025px) { .p-modal__inner { padding: 50px 0 0; } } @media screen and (min-width: 1025px) { .p-modal__wrap { display: flex; position: relative; } } .p-modal__center { width: 100%; padding-top: 17.0666666667vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-modal__center { width: 520px; padding-top: 50px; padding-bottom: 50px; } } .p-modal__link { margin-top: 25px; display: block; text-decoration: underline; } @media screen and (min-width: 1025px) { .p-modal__link:hover { opacity: 0.6; } } .p-modal__contents { width: 90.6666666667vw; display: flex; flex-direction: column; } @media screen and (min-width: 1025px) { .p-modal__contents { width: 408px; } } .p-modal__image { width: 90.6666666667vw; border-radius: 5.3333333333vw; overflow: hidden; } @media screen and (min-width: 1025px) { .p-modal__image { width: 100%; border-radius: 24px; } } .p-modal__index { margin-top: 8vw; color: #93D995; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 75, "wght" 600, "slnt" -15; } @media screen and (min-width: 1025px) { .p-modal__index { margin-top: 32px; } } .p-modal__title { margin-top: 5.3333333333vw; font-size: 4.8vw; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 700; line-height: 1.25; } @media screen and (min-width: 1025px) { .p-modal__title { margin-top: 20px; font-size: 22px; } } .p-modal__desc { margin-top: 5.3333333333vw; line-height: 2; white-space: pre-line; } @media screen and (min-width: 1025px) { .p-modal__desc { margin-top: 20px; } } .p-modal__close { width: 29.8666666667vw; aspect-ratio: 112/40; margin-top: 16vw; padding-top: 1.3333333333vw; padding-left: 4vw; display: flex; align-items: center; font-size: 5.3333333333vw; font-family: rotulo-variable, sans-serif; font-variation-settings: "wdth" 100, "wght" 400, "slnt" 0; background-color: #93D995; border: 1px solid #93D995; position: relative; transition: all 0.6s; cursor: pointer; } @media screen and (min-width: 1025px) { .p-modal__close { width: 134px; margin-top: 60px; padding-top: 5px; padding-left: 15px; font-size: 24px; } } @media screen and (min-width: 1025px) { .p-modal__close:hover { opacity: 0.6; } } .p-modal__close .arrow { width: 8vw; position: absolute; right: 4vw; bottom: 3.2vw; } @media screen and (min-width: 1025px) { .p-modal__close .arrow { width: 36px; right: 15px; bottom: 12px; } } @media screen and (min-width: 1025px) { .p-modal__left, .p-modal__right { width: calc((100vw - 520px) / 2); height: 100svh; position: sticky; top: 0; } } @media screen and (min-width: 1025px) { .p-modal__left { display: flex; flex-direction: column; align-items: center; border-right: 1px solid #000; } } @media screen and (min-width: 1025px) { .p-modal__right { border-left: 1px solid #000; } } @media screen and (min-width: 1025px) { .p-modal .c-top { width: 100%; display: flex; flex-direction: column; align-items: center; } } @media screen and (min-width: 1025px) { .p-modal .c-top__image { width: 520px; } } @media screen and (min-width: 1025px) { .p-modal .c-top__heading { width: 100%; } } @media screen and (min-width: 1025px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 1024px) { .u-hidden-sp { display: none !important; } } .pref { font-family: dry-cowboy, sans-serif; }/*# sourceMappingURL=app.css.map */