@charset "UTF-8"; /* include */ @import url('./popup.css'); /* common */ @media all and (min-width:769px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-wrapper {height: 100% !important;} } /* Main Visual */ #mainVisual {clear: both; display: block; width: 100%; height: 850px; margin: 0 auto; padding: 0; background: transparent; overflow: hidden; position: relative; z-index: 1;} #mainVisual .swiper-main-visual {width: 100%; height: 100%;} #mainVisual .swiper-main-visual .swiper-wrapper {} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide {display: flex; justify-content: center; align-items: center; background: #222; font-size: inherit; text-align: center;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .inner.w1440 {width: 100%; height: 100%;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW {margin: 0 auto; text-align: left; position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 2.375em)); z-index: 2;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW {} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p {color: #fff; word-break: keep-all;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p br.mobile {display: none;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p span.brick {display: inline-block;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.ti {margin-bottom: .75em; font-size: 2.375em; font-weight: 700; line-height: 1.25;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.subti {display: inline-block; padding-bottom: 2.6em; border-bottom: 1px solid #fff; font-size: 1.25em; font-weight: 300; line-height: 1.5;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW {margin-top: calc(2em - calc(1.625em * .25));} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more {display: block; width: fit-content; transition: .3s;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p {display: inline-block; color: #fff;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {margin-bottom: .25em; font-size: 1.625em; font-weight: 600; line-height: 1; vertical-align: middle;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add {margin-left: .5em; padding: .5em .875em .625em; background: #910002; border: 1px solid transparent; border-radius: 2em; font-size: 1em; font-weight: 300; line-height: 1; vertical-align: middle; transition: .3s;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add span {padding-right: calc(.5em + 9px); line-height: 1; position: relative; transition: .3s;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add span::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add span::after {content: ''; display: block; background: #fff; position: absolute; transition: .3s;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add span::before {width: 9px; height: 1px; right: 0; top: 50%;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add span::after {width: 1px; height: 9px; right: 4px; top: calc(50% - 4px);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover p.add, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus p.add {background: rgba(255, 255, 255, .85); border-color: #910002; color: #910002;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover p.add span::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus p.add span::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover p.add span::after, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus p.add span::after {background: #910002;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW {text-align: center; position: absolute; right: 10px; bottom: calc(3em + 4px + 8px); transition: .3s; z-index: 2;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW.click {transform: translateY(-.5em);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW p {color: #fff; font-weight: 300; line-height: 1; letter-spacing: .015em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR {width: calc(120px + 8px); height: calc(120px + 8px); border: 4px solid #a70004; margin: .875em auto 0; position: relative; z-index: 0;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR::after {content: ''; display: block; width: 100%; height: 100%; background: #a70004; opacity: 0; inset: -4px; position: absolute; left: 50%; top: 50%; transform-origin: center; animation: pulseOut 3s ease-out infinite;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR::before {z-index: -2;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR::after {animation-delay: 1s; z-index: -1;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR img {width: 100%;} @keyframes pulseOut {0% {transform: translate(-50%, -50%) scale(1); opacity: .85;} 100% {transform: translate(-50%, -50%) scale(1.25); opacity: 0;}} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:hover, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:focus {} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:hover .QR::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:focus .QR::before, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:hover .QR::after, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link:focus .QR::after {animation: pulseOutMouse 1.5s ease-out infinite;} @keyframes pulseOutMouse {0% {transform: translate(-50%, -50%) scale(1); opacity: 1;} 100% {transform: translate(-50%, -50%) scale(1.25); opacity: 0;}} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .imgW {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .imgW::before {content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .35); position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .imgW img {display: block; width: 100%; min-width: auto; height: auto; min-height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #mainVisual .swiper-main-visual .bgBox {} #mainVisual .swiper-main-visual .bgBox .inner {position: static;} #mainVisual .swiper-main-visual .bgBox .pager {width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(calc(-3em / 2)); z-index: 1;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev, #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next {width: 3em; height: 3em; margin: 0; background: rgba(0, 0, 0, .3); /*backdrop-filter: blur(4px);*/ border-radius: 50%; color: transparent; top: 0;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev {left: 3em; right: auto;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next {left: auto; right: 3em;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev::before, #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next::before {content: ''; display: block; width: 9px; height: 15px; position: absolute; top: 50%; z-index: 11;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev::before {background: url('../images/ico_arrow_left_light.png') no-repeat 0 0 / cover; right: calc(50% + 2px); transform: translate(50%, -50%);} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next::before {background: url('../images/ico_arrow_right_light.png') no-repeat 0 0 / cover; left: calc(50% + 2px); transform: translate(-50%, -50%);} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev::after, #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next::after {font-size: 0;} #mainVisual .swiper-main-visual .bgBox .swiper-pagination {height: 4px; background: rgba(255, 255, 255, .3); top: auto; bottom: 0;} #mainVisual .swiper-main-visual .bgBox .swiper-pagination span {background: #a70004;} /* contents */ /* #mainContents {width: 100%; margin: 0 auto; padding: 1em 0; background: transparent; overflow: hidden; z-index: 1;} */ /* #Countdown {width: 100%; height: 100%; padding: 6em 0 6.5em; background: #131e40; background: linear-gradient(180deg, #131e40 0%, #18254f 100%);} #Countdown .inner.w1440 {} #Countdown .tiW {text-align: center;} #Countdown .tiW p {color: #fff; font-size: 1.625em; font-weight: 700; line-height: 1.5; word-break: keep-all;} #Countdown .tiW p.ti {} #Countdown .timer {display: flex; justify-content: center; gap: 1.5em; margin: 3em auto 0;} #Countdown .timer div {text-align: center;} #Countdown .timer div p {color: #fff; font-weight: 500;} #Countdown .timer div p span {color: #9ba6ce; font-weight: 500; position: relative;} #Countdown .timer div.time {width: 120px;} #Countdown .timer div.time p {color: #fff; line-height: 1; font-weight: 500;} #Countdown .timer div.time p span {} #Countdown .timer div.time p.number {font-size: 3.375em;} #Countdown .timer div.time p.txt {margin: .875em auto 0; color: #c2cbec; font-size: .938rem;} #Countdown .timer div.time p.txt span {position: relative;} #Countdown .timer div.time p.txt span::before, #Countdown .timer div.time p.txt span::after {display: inline-block; color: inherit; font-size: .875em; vertical-align: top;} #Countdown .timer div.time p.txt span::before {content: '(';} #Countdown .timer div.time p.txt span::after {content: ')';} #Countdown .timer div.colon {display: flex; justify-content: center; flex-direction: column; align-self: flex-start; width: 16px;} #Countdown .timer div.colon p {color: #a2b1e2; font-size: 3.375em;} */ #Countdown {width: 100%; height: 100%; padding: 6em 0 6.5em; background: #fff;} #Countdown .inner.w1440 {} #Countdown .tiW {text-align: center;} #Countdown .tiW p {color: #22336e; font-size: 1.625em; font-weight: 700; line-height: 1.5; word-break: keep-all;} #Countdown .tiW p.ti {} #Countdown .timer {display: flex; justify-content: center; gap: 1.5em; margin: 3em auto 0;} #Countdown .timer div {text-align: center;} #Countdown .timer div p {font-weight: 500;} #Countdown .timer div p span {color: #2c418d; font-weight: 500; position: relative;} #Countdown .timer div.time {width: 120px;} #Countdown .timer div.time p {color: #131e40; line-height: 1; font-weight: 500;} #Countdown .timer div.time p span {} #Countdown .timer div.time p.number {font-size: 3.375em;} #Countdown .timer div.time p.txt {margin: .875em auto 0; color: #2c418d; font-size: .938rem;} #Countdown .timer div.time p.txt span {position: relative;} #Countdown .timer div.time p.txt span::before, #Countdown .timer div.time p.txt span::after {display: inline-block; color: inherit; font-size: .875em; vertical-align: top;} #Countdown .timer div.time p.txt span::before {content: '(';} #Countdown .timer div.time p.txt span::after {content: ')';} #Countdown .timer div.colon {display: flex; justify-content: center; flex-direction: column; align-self: flex-start; width: 16px;} #Countdown .timer div.colon p {color: #8b91a6; font-size: 3.375em;} @media all and (max-width:1699px){ #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .inner.w1440 {max-width: 1280px;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev {left: 1.5em;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next {right: 1.5em;} } @media all and (max-width:1599px){ #Countdown .inner.w1440 {padding: 0 1.5em;} } @media all and (max-width:1440px){ #mainVisual {height: 700px;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .inner.w1440 {max-width: 100%;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW {left: calc(1.5em + 3em + 20px);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW {right: calc(1.5em + 3em + 20px);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.ti {font-size: 2em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.subti {font-size: 1.125em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {font-size: 1.25em;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-prev {left: 20px;} #mainVisual .swiper-main-visual .bgBox .pager .swiper-button-next {right: 20px;} } @media all and (max-width:1279px){ } @media all and (max-width:1023px){ #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.ti {font-size: 1.75em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.ti br.mobile {display: block;} } @media all and (max-width:768px){ #mainVisual {height: 600px; min-height: 420px;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW {width: 100%; padding: 0 calc(3em + 20px * 2); text-align: center; left: 50%; transform: translate(-50%, calc(-50% - 68px));} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.ti {font-size: 1.5em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .tiW p.subti {padding-bottom: 1.5em; border-bottom: none; font-size: 1em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW {margin-top: 0;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more {margin: 0 auto;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {font-size: 1.125em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add {font-size: .875em;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW {right: 50%; bottom: calc(68px + 4px + 8px); transform: translateX(50%);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW.click {transform: translate(50%, -.5em);} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .qrW a.link .QR {width: calc(90px + 8px); height: calc(90px + 8px);} #Countdown {padding: 4.5em 0 5em;} #Countdown .tiW p {font-size: 1.5em;} #Countdown .timer {gap: .75em; margin: 2em auto 0;} #Countdown .timer div.time {width: 100%;} #Countdown .timer div.time p.number, #Countdown .timer div.colon p {font-size: 2.75em;} } @media all and (max-width:580px){ #mainVisual .swiper-main-visual .bgBox .pager {display: none;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW {padding: 0 20px;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more {padding: .875em 1em; background: #910002; border: 1px solid transparent; border-radius: 2em; vertical-align: middle;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {margin: 0 auto; position: relative;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti::after {content: '→'; display: inline-block; margin-left: .25em; color: #fff; font-size: inherit; vertical-align: top;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus {background: rgba(255, 255, 255, .85); border-color: #910002;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover p.ti, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus p.ti, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:hover p.ti::after, #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more:focus p.ti::after {color: #910002;} #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.add {display: none;} } @media all and (max-width:480px){ #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {font-size: 1em;} #Countdown {padding: 3.25em 0 3.75em;} #Countdown .tiW p {font-size: 1.25em;} #Countdown .timer {margin: 1.5em auto 0;} #Countdown .timer div.time p.number, #Countdown .timer div.colon p {font-size: 2em;} #Countdown .timer div.time p.txt {font-size: .875rem;} } @media all and (max-width:380px){ #Countdown .tiW p {font-size: 4.75vw;} #Countdown .timer div.time p.number, #Countdown .timer div.colon p {font-size: 7.5vw;} #Countdown .timer div.time p.txt {font-size: 3vw;} } @media all and (max-width:350px){ #mainVisual .swiper-main-visual .swiper-wrapper .swiper-slide .txtW .moreW .more p.ti {font-size: 4vw;} } @media all and (max-width:319px){ } /* ie hack */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){ }