html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;} body{ margin:0;} .clear{ clear:both; height:0;} .center{ text-align:center;} img{ border:0; vertical-align:bottom; max-width: 100%; height: auto;} ul{ margin:0; padding:0; list-style:none;} p{ margin:0;} :root{ --blue: #005ECC; --lightblue: #E1F6FF; --lime: #ECFF9D; --lightlime: #FBFFE8; --navy: #373755; --gray: #AFAFBB; } /*--------------------------------------------- CONTAINER ---------------------------------------------*/ #container{ font-family: 'Noto Sans JP', sans-serif; color: var(--navy); width: 100%; overflow: hidden; padding-bottom: 100px; min-width: 1220px; font-size: 18px;} #container p{ line-height: 2; font-feature-settings: "palt"; font-weight: 500;} #container h2, #container h3, #container h4, #container h5, #container h6, #container li{ font-feature-settings: "palt";} /*-- MAIN --*/ #mainBox{ position: relative; width: 1220px; height: 900px; background-image: url(../img/main-pc.webp); background-repeat: no-repeat; background-position: center center; background-size: 100%; margin: 0 auto 120px; text-align: center;} #mainBox h2{ width: 100%; margin: 0 auto 12px; padding-top: 20px;} #mainBox h2 img{ display: block; margin: 0 auto; width: 430px;} #mainBox .innerMain{ filter: drop-shadow(5px 5px 0px #000); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: 10px;} #mainBox .line1{ font-weight: 900; font-size: 42px; position: relative; display: inline-block; padding: 0 25px 8px; line-height: 1; box-sizing: border-box; max-width: 100%; margin: 0 auto;} #mainBox .line1 .large{ font-size: 48px; display: inline-block; transform: translateY(0.05em);} #mainBox .line2{ font-weight: 900; font-size: 42px; position: relative; display: inline-block; padding: 3px 25px 9px; line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line2 small{ font-size: 30px; line-height: 30px; display: inline-block;} #mainBox .line3{ font-weight: 900; font-size: 70px; position: relative; display: inline-block; padding: 0 30px 15px; line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line3 .large{ font-size: 78px; display: inline-block; transform: translateY(0.05em);} #mainBox .line4{ font-weight: 900; font-size: 42px; position: relative; display: inline-block; padding: 0 25px 8px; line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line4 small{ font-size: 30px; line-height: 30px; display: inline-block;} #mainBox .line4 .large{ font-size: 48px; display: inline-block; transform: translateY(0.05em);} #mainBox .line1 > span, #mainBox .line2 > span, #mainBox .line3 > span, #mainBox .line4 > span{ position: relative; line-height: 1; display: inline-block; color: #000;} #mainBox .line1::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0% 100%); width: 100%; height: 100%;} #mainBox .line2::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); width: 100%; height: 100%;} #mainBox .line3::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0% 100%); width: 100%; height: 100%;} #mainBox .line4::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); width: 100%; height: 100%;} /*-- CONTENT --*/ #container .ttlWave{ font-size: 50px; text-align: center; color: var(--blue); font-weight: 900; padding-bottom: 40px; line-height: 1.8; background-image: url(../img/line-wave.svg); background-repeat: no-repeat; background-position: center bottom; background-size: 400px 20px; margin: 0 auto 10px;} /*-- ABLE TO --*/ #container #able-to{ margin-bottom: 140px;} #container .wrapSection .section{ padding: 60px 0 90px; position: relative;} #container .wrapSection .section:not(:first-child){ margin-top: -20px;} #container .wrapSection .section:nth-child(4n+1)::before{ content: ""; display: block; width: 100%; height: 100%; background-color: var(--lime); position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 100% 150px, 100% 100%, 0 calc(100% - 150px));} #container .wrapSection .section:nth-child(4n+3)::before{ content: ""; display: block; width: 100%; height: 100%; background-color: var(--lime); position: absolute; top: 0; left: 0; clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);} #container .wrapSection .section .innerSection{ position: relative; width: 1220px; margin: 0 auto; display: flex; align-items: center;} #container .wrapSection .section:nth-child(even) .innerSection{ flex-direction: row-reverse;} #container .wrapSection .section .innerSection::before{ content: ""; display: block; width: 310px; height: 520px; position: absolute; top: -75px;} #container .wrapSection .section:nth-child(odd) .innerSection::before{ background-image: url(../img/bg-confetti-r.webp); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; right: 0;} #container .wrapSection .section:nth-child(even) .innerSection::before{ background-image: url(../img/bg-confetti-l.webp); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; left: 0;} #container .wrapSection .section .innerSection::after{ content: ""; display: block; width: 124px; height: 134px; position: absolute; top: -50px;} #container .wrapSection .section:nth-child(odd) .innerSection::after{ left: 0; } #container .wrapSection .section:nth-child(even) .innerSection::after{ left: 50%; } #container .wrapSection .section:nth-child(1) .innerSection::after{ background-image: url(../img/icon-no01.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section:nth-child(2) .innerSection::after{ background-image: url(../img/icon-no02.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section:nth-child(3) .innerSection::after{ background-image: url(../img/icon-no03.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section .innerSection .imgBox{ width: 50%; padding: 0 50px; box-sizing: border-box; position: relative;} #container .wrapSection .section .innerSection .imgBox figure{ width: 100%; margin: 0;} #container .wrapSection .section .innerSection .imgBox figure img{ display: block; width: 100%;} #container .wrapSection .section .innerSection .imgBox .deco{ position: absolute;} #container .wrapSection .section:nth-child(1) .innerSection .imgBox .deco{ width: 150px; height: 240px; bottom: -80px; right: -10px;} #container .wrapSection .section:nth-child(2) .innerSection .imgBox .deco{ width: 350px; height: 160px; bottom: -80px; right: 0;} #container .wrapSection .section:nth-child(3) .innerSection .imgBox .deco{ width: 310px; height: 222px; bottom: -80px; right: -60px;} #container .wrapSection .section .innerSection .textBox{ width: 50%; box-sizing: border-box;} #container .wrapSection .section:nth-child(odd) .innerSection .textBox{ padding-right: 50px;} #container .wrapSection .section:nth-child(even) .innerSection .textBox{ padding-left: 50px;} #container .wrapSection .section .innerSection .textBox h4{ margin: 0 auto 30px;} #container .wrapSection .section .innerSection .textBox h4 span{ font-size: 30px; color: var(--blue); font-weight: 500; background-image: linear-gradient(180deg, transparent 0%, transparent 70%, #fff 70%, #fff 100%); line-height: 1.6;} #container .wrapSection .section:nth-child(even) .innerSection .textBox h4 span{ font-size: 30px; color: var(--blue); font-weight: 500; background-image: linear-gradient(180deg, transparent 0%, transparent 70%, var(--lime) 70%, var(--lime) 100%); line-height: 1.6;} #container .wrapSection .section .innerSection .textBox .text{ font-weight: 500; color: var(--navy);} #container .wrapSection .section .innerSection .textBox .text .caution{ font-size: 16px; line-height: 1.6;} /*-- TARGET --*/ #container #target{ margin-bottom: 160px;} #container #target .ttlWave{ margin-bottom: 70px;} #container .linkBox{ width: 800px; margin: 0 auto;} #container .linkBox .linkList{ display: flex; margin: 0; box-sizing: border-box; padding: 40px; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: space-between; color: var(--navy);} #container .linkBox .linkList:nth-child(odd){ background-color: var(--lightlime);} #container .linkBox .linkList:nth-child(even){ background-color: var(--lime);} #container .linkBox .linkList.end{ color: var(--gray);} #container .linkBox .linkList.active{ color: var(--blue);} #container .linkBox .linkList dt{ width: calc(100% - 255px - 41px ); margin: 0;} #container .linkBox .linkList dt p{ font-weight: 500;} #container .linkBox .linkList dt .end{ display: inline-block; background-color: var(--navy); color: #fff; font-size: 16px; line-height: 1; padding: 5px 12px 8px; position: relative; margin-bottom: 12px; } #container .linkBox .linkList dt .end::after{ content: ""; display: block; width: 11px; height: 11px; background-color: var(--navy); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%);} #container .linkBox .linkList dt .pick{ display: inline-block; background-color: var(--blue); color: #fff; font-size: 16px; line-height: 1; padding: 5px 12px 8px; position: relative; margin-bottom: 12px; } #container .linkBox .linkList dt .pick::after{ content: ""; display: block; width: 11px; height: 11px; background-color: var(--blue); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%);} #container .linkBox .linkList dt .date{ font-size: 18px; font-weight: 500; line-height: 1.6;} #container .linkBox .linkList dt .ttl{ font-size: 22px; font-weight: 700; line-height: 1.6;} #container .linkBox .linkList dt .caution{ font-size: 14px; line-height: 1.6;} #container .linkBox .linkList dd{ width: 255px; margin: 0;} #container .linkBox .linkList dd .btn{ line-height: 1; } #container .linkBox .linkList dd .btn span{ background-color: var(--gray); color: #fff; width: 100%; display: block; text-align: center; font-size: 18px; font-weight: 500; padding: 15px; box-sizing: border-box; position: relative;} #container .linkBox .linkList dd .btn a{ background-color: var(--blue); color: #fff; width: 100%; display: block; text-align: center; font-size: 18px; font-weight: 500; padding: 15px 30px 20px; box-sizing: border-box; position: relative; text-decoration: none; transition: .5s ease-in-out;} #container .linkBox .linkList dd .btn a:hover{ opacity: .5;} #container .linkBox .linkList dd .btn a::after{ content: ""; display: block; width: 10px; height: 10px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: calc(50% - 8px); transform: rotate(45deg); right: 30px;} /*-- RACE --*/ #container .endall{ width: 1220px; border: 2px solid #f50207; padding: 30px; box-sizing: border-box; margin: 0 auto; color: #f50207; text-align: center; font-weight: 700; margin-bottom: 80px; font-size: 20px;} #container .innerRace{ width: 1220px; margin: 0 auto;} #container .innerRace + .innerRace{ margin-top: 180px;} #container .innerRace h3{ margin: 0 auto 50px; color: var(--blue); text-align: center; font-weight: 900;} #container .innerRace h3 .date{ display: inline-block; background-color: var(--lightblue); font-size: 24px; padding: 10px; margin-bottom: 20px;} #container .innerRace h3 .small{ display: block; font-size: 32px;} #container .innerRace h3 .main{ display: block; font-size: 50px; } #container .innerRace h3 .small + .main{ margin-top: 10px;} #container .innerRace figure{ margin: 0 auto;} #container .innerRace figure img{ display: block; width: 100%;} #container .wrapCheckBox{ margin: 60px auto 0; display: flex; flex-wrap: wrap; row-gap: 60px; column-gap: 100px;} #container .checkBox{ width: calc(50% - 50px); } #container .checkBox.wide{ width: 100%;} #container .checkBox h4{ border-bottom: 2px solid var(--lime); display: flex; color: var(--blue); font-size: 26px; font-weight: 800; align-items: center; gap: 15px; margin: 0 auto 40px;} #container .checkBox h4::before{ content: ""; display: block; width: 80px; height: 55px; background-color: var(--lime); background-image: url(../img/icon-check.svg); background-position: center center; background-repeat: no-repeat; background-size: 46px 20px;} #container .checkBox .text + .text{ margin-top: 50px;} #container .checkBox .circleList{ display: flex; flex-wrap: wrap; gap: 10px; font-weight: 500; line-height: 2;} #container .checkBox .circleList > li{ width: 100%; text-indent: -1.5em; padding-left: 1.5em; box-sizing: border-box;} #container .checkBox .circleList > li::before{ content: "●"; margin-right: 0.5em;} #container .checkBox .dotList{ display: flex; flex-wrap: wrap; font-weight: 500; line-height: 2;} #container .checkBox .dotList > li{ width: 100%; text-indent: -0.5em; padding-left: 0.5em; box-sizing: border-box;} #container .checkBox .dotList > li::before{ content: "・";} #container .checkBox .blue{ color: var(--blue); font-weight: 800;} #container .checkBox .screenList{ display: flex; gap: 40px; align-items: flex-start; margin: 60px auto;} #container .checkBox .screenList li{ width: 380px; background-color: var(--lightblue);} #container .checkBox .screenList li .text{ box-sizing: border-box; padding: 25px 30px; font-size: 18px;} #container .btnList{ margin: 60px auto 0; width: 720px; display: flex; flex-wrap: wrap; gap: 60px;} #container .btnList:not(:last-child){ margin-bottom: 180px;} #container .btnList li{ width: 100%; } #container .btnList li a{ width: 100%; display: block; padding: 40px 70px 40px 50px; background-color: var(--lightblue); color: var(--blue); font-size: 22px; text-decoration: none; font-weight: 500; position: relative; transition: .5s ease-in-out; box-sizing: border-box;} #container .btnList li a:hover{ opacity: .5;} #container .btnList li.shop a{ background-color: var(--blue); color: #fff; font-weight: 700;} #container .btnList li a::after{ content: ""; display: block; width: 14px; height: 14px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); position: absolute; top: calc(50% - 7px); transform: rotate(45deg); right: 50px;} #container .btnList li.shop a::after{ border-top: 2px solid #fff; border-right: 2px solid #fff;} #container .btnList li.shop a span{ display: block;} #container .btnList li.shop a span.deco, #container .btnList li.shop a small{ color: var(--lime); font-size: 20px; margin-bottom: 5px; display: block;} #container .btnList li.shop a span.deco::before{ content: "＼"; margin-right: 5px; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.shop a span.deco::after{ content: "／"; margin-left: 5px; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.shop a span.main{ font-size: 24px;} #container .btnList li.noLink.shop{ width: 100%; padding: 40px 70px 40px 50px; background-color: var(--gray); color: #fff; font-weight: 700; box-sizing: border-box;} #container .btnList li.noLink.shop span{ display: block;} #container .btnList li.noLink.shop span.deco, #container .btnList li.noLink.shop small{ color: #fff; font-size: 20px; margin-bottom: 5px; display: block;} #container .btnList li.noLink.shop span.deco::before{ content: "＼"; margin-right: 5px; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.noLink.shop span.deco::after{ content: "／"; margin-left: 5px; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.noLink.shop span.main{ font-size: 24px;} #container .btnList li.type02{ width: 80%; margin: 0 auto 0;} #container .btnList li.type02 a{ background-color: var(--lime); color: var(--blue); font-weight: 500;} #container .btnList li.type02.noLink{ display: block; padding: 40px 70px 40px 50px; background-color: var(--gray); color: #fff; font-size: 22px; text-decoration: none; font-weight: 500; box-sizing: border-box;} #container .unit-accordion{ width: 100%; margin: 30px auto 0;} #container .unit-accordion + .unit-accordion{ margin-top: 10px;} #container .unit-accordion dt{ background-color: var(--lime); cursor: pointer; padding: 15px 15px 15px 45px; box-sizing: border-box; color: var(--blue); font-weight: 800; position: relative;} #container .unit-accordion dt .icon{ aspect-ratio: 1 / 1; width: 16px; height: 16px; display: block; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); transition: all 0.5s ease;} #container .unit-accordion dt .icon::before{ content: ""; display: block; width: 100%; height: 4px; background-color: var(--blue); position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #container .unit-accordion dt .icon::after{ content: ""; display: block; width: 4px; height: 100%; background-color: var(--blue); position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.5s ease;} #container .unit-accordion dt.active .icon::after{ transform: translateX(-50%) scaleY(0); opacity: 0; } #container .unit-accordion dt.active .icon{ transform: translateY(-50%) rotate(180deg);} #container .unit-accordion dd{ padding: 30px 15px 15px; box-sizing: border-box; margin: 0; display: none; font-size: 18px ; font-weight: 500;} #container .unit-accordion dd .unit-gallery{ width: 100%; display: flex; gap: 30px; flex-wrap: wrap;} #container .unit-accordion dd .unit-gallery .img{ width: 100%; margin: 0 auto;} #container .unit-accordion dd .unit-gallery .img + .img{ margin-top: 10px;} #container .unit-accordion dd .unit-gallery .img img{ width: 100%; margin: 0 auto; display: block;} #container .unit-accordion dd .unit-gallery .img.small img{ width: 70%;} #container .unit-accordion dd .unit-gallery .img .caption{ text-align: center; font-size: 16px;} @media screen and (min-width: 750px){ .sp{ display: none;} } @media screen and (max-width: 749px){ /*--------------------------------------------- CONTAINER ---------------------------------------------*/ #container{ font-family: 'Noto Sans JP', sans-serif; color: var(--navy); width: 100%; overflow: hidden; padding-bottom: var(--comp-180); min-width: 100%; container-type: inline-size; font-size: var(--comp-27);} #container p{ line-height: 2; font-feature-settings: "palt"; font-weight: 500;} #container h2, #container h3, #container h4, #container h5, #container h6, #container li{ font-feature-settings: "palt";} :root{ --comp-250: 33.7837837837837vw; --comp-230: 31.081081081081vw; --comp-220: 29.7297297297297vw; --comp-210: 28.3783783783783vw; --comp-200: 27.027027027027vw; --comp-195: 26.3513513513513vw; --comp-190: 25.6756756756756vw; --comp-185: 25vw; --comp-180: 24.3243243243243vw; --comp-175: 23.6486486486486vw; --comp-170: 22.9729729729729vw; --comp-165: 22.2972972972972vw; --comp-160: 21.6216216216216vw; --comp-155: 20.9459459459459vw; --comp-150: 20.2702702702702vw; --comp-145: 19.5945945945945vw; --comp-140: 18.9189189189189vw; --comp-135: 18.2432432432432vw; --comp-130: 17.5675675675675vw; --comp-125: 16.8918918918918vw; --comp-120: 16.2162162162162vw; --comp-115: 15.5405405405405vw; --comp-110: 14.8648648648648vw; --comp-105: 14.1891891891891vw; --comp-100: 13.5135135135135vw; --comp-95: 12.83783783783783vw; --comp-90: 12.1621621621621vw; --comp-85: 11.48648648648648vw; --comp-80: 10.8108108108108vw; --comp-75: 10.13513513513513vw; --comp-70: 9.459459459459459vw; --comp-65: 8.738738738738738vw; --comp-60: 8.108108108108108vw; --comp-55: 7.432432432432432vw; --comp-50: 6.756756756756756vw; --comp-45: 6.081081081081081vw; --comp-40: 5.405405405405405vw; --comp-35: 4.729729729729729vw; --comp-30: 4.054054054054054vw; --comp-25: 3.378378378378378vw; --comp-20: 2.702702702702702vw; --comp-15: 2.027027027027027vw; --comp-10: 1.351351351351351vw; --comp-5: 0.6756756756756756vw; --comp-60: 8.1081081081081vw; --comp-32: 4.32432432432432vw; --comp-27: 3.64864864864865vw; --comp-20: 2.70270270270270vw; --comp-18: 2.43243243243243vw; --comp-8: 1.081081081081081vw; --comp-6: 0.81081081081081vw; } /*-- MAIN --*/ #mainBox{ position: relative; width: 100%; height: auto; aspect-ratio: 1480 / 2000; background-image: url(../img/main-sp.webp); background-repeat: no-repeat; background-position: center center; background-size: 100%; margin: 0 auto var(--comp-120); text-align: center;} #mainBox h2{ width: 100%; margin: 0 auto var(--comp-15); padding-top: var(--comp-95);} #mainBox h2 img{ display: block; margin: 0 auto; width: 48.6486486486486486%;} #mainBox .innerMain{ filter: drop-shadow(var(--comp-5) var(--comp-5) 0px #000); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: var(--comp-10);} #mainBox .line1{ font-weight: 900; font-size: var(--comp-30); position: relative; display: inline-block; padding: var(--comp-5) var(--comp-15) var(--comp-8); line-height: 1; box-sizing: border-box; max-width: 100%; margin: 0 auto;} #mainBox .line1 .large{ font-size: 112%; display: inline-block; transform: translateY(0.05em);} #mainBox .line2{ font-weight: 900; font-size: var(--comp-30); position: relative; display: inline-block; padding: var(--comp-6) var(--comp-10) var(--comp-8) var(--comp-15); line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line2 small{ font-size: var(--comp-20); line-height: 1; display: inline-block;} #mainBox .line2 .large{ font-size: 110%; display: inline-block; transform: translateY(0.05em);} #mainBox .line3{ font-weight: 900; font-size: var(--comp-60); position: relative; display: inline-block; padding: var(--comp-5) var(--comp-40) var(--comp-10); line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line3 .large{ font-size: 110%; display: inline-block; transform: translateY(0.05em);} #mainBox .line4{ font-weight: 900; font-size: var(--comp-30); position: relative; display: inline-block; padding: var(--comp-5) var(--comp-20) var(--comp-8); line-height: 1; box-sizing: border-box; max-width: 100%;} #mainBox .line4 small{ font-size: var(--comp-20); line-height: 1; display: inline-block;} #mainBox .line4 .large{ font-size: 112%; display: inline-block; transform: translateY(0.05em);} #mainBox .line1 > span, #mainBox .line2 > span, #mainBox .line3 > span, #mainBox .line4 > span{ position: relative; line-height: 1; display: inline-block; color: #000;} #mainBox .line1::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(0 0, calc(100% - var(--comp-10)) 0, 100% 100%, var(--comp-10) 100%); width: 100%; height: 100%;} #mainBox .line2::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(var(--comp-10) 0, 100% 0, calc(100% - var(--comp-10)) 100%, 0% 100%); width: 100%; height: 100%;} #mainBox .line3::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(0 0, calc(100% - var(--comp-10)) 0, 100% 100%, var(--comp-10) 100%); width: 100%; height: 100%;} #mainBox .line4::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; clip-path: polygon(var(--comp-10) 0, 100% 0, calc(100% - var(--comp-10)) 100%, 0% 100%); width: 100%; height: 100%;} /*-- CONTENT --*/ #container .ttlWave{ font-size: var(--comp-40); text-align: center; color: var(--blue); font-weight: 900; padding-bottom: var(--comp-40); line-height: 1.8; background-image: url(../img/line-wave.svg); background-repeat: no-repeat; background-position: center bottom; background-size: 60% var(--comp-30); margin: 0 auto 5%; } /*-- ABLE TO --*/ #container #able-to{ margin-bottom: var(--comp-100);} #container .wrapSection .section{ padding: var(--comp-80) 0 var(--comp-200); position: relative;} #container .wrapSection .section:not(:first-child){ margin-top: -10%;} #container .wrapSection .section:nth-child(4n+1)::before{ content: ""; display: block; width: 100%; height: 100%; background-color: var(--lime); position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 100% var(--comp-150), 100% 100%, 0 calc(100% - var(--comp-150)));} #container .wrapSection .section:nth-child(4n+3)::before{ content: ""; display: block; width: 100%; height: 100%; background-color: var(--lime); position: absolute; top: 0; left: 0; clip-path: polygon(0 var(--comp-150), 100% 0, 100% calc(100% - var(--comp-150)), 0 100%);} #container .wrapSection .section .innerSection{ position: relative; width: 90%; margin: 0 auto; display: block; align-items: center;} #container .wrapSection .section:nth-child(even) .innerSection{ flex-direction: row-reverse;} #container .wrapSection .section .innerSection::before{ content: ""; display: block; width: 45%; height: 100%; position: absolute; top: 5%;} #container .wrapSection .section:nth-child(odd) .innerSection::before{ background-image: url(../img/bg-confetti-r-sp.webp); background-repeat: no-repeat; background-position: center center; background-size: 100%; right: -5%;} #container .wrapSection .section:nth-child(even) .innerSection::before{ background-image: url(../img/bg-confetti-l-sp.webp); background-repeat: no-repeat; background-position: center center; background-size: 100%; left: -5%;} #container .wrapSection .section .innerSection::after{ content: ""; display: block; width: 20%; height: auto; aspect-ratio: 124 / 134; position: absolute; top: calc(var(--comp-50) * (-1));} #container .wrapSection .section:nth-child(odd) .innerSection::after{ top: -9%; left: 0; } #container .wrapSection .section:nth-child(even) .innerSection::after{ top: -9%; left: 0; } #container .wrapSection .section:nth-child(1) .innerSection::after{ background-image: url(../img/icon-no01.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section:nth-child(2) .innerSection::after{ background-image: url(../img/icon-no02.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section:nth-child(3) .innerSection::after{ background-image: url(../img/icon-no03.svg); background-repeat: no-repeat; background-position: center center; background-size: 100%; } #container .wrapSection .section .innerSection .imgBox{ width: 100%; padding: 0 5%; box-sizing: border-box; position: relative; margin-bottom: var(--comp-60);} #container .wrapSection .section .innerSection .imgBox figure{ width: 100%; margin: 0;} #container .wrapSection .section .innerSection .imgBox figure img{ display: block; width: 100%;} #container .wrapSection .section .innerSection .imgBox .deco{ position: absolute;} #container .wrapSection .section:nth-child(1) .innerSection .imgBox .deco{ width: 25%; height: auto; aspect-ratio: 150 / 240; bottom: -10%; right: -2.5%;} #container .wrapSection .section:nth-child(2) .innerSection .imgBox .deco{ width: 55%; height: auto; aspect-ratio: 350 / 160; bottom: -12%; right: -2.5%;} #container .wrapSection .section:nth-child(3) .innerSection .imgBox .deco{ width: 45%; height: auto; aspect-ratio: 310 / 222; bottom: -10%; right: -2.5%;} #container .wrapSection .section .innerSection .textBox{ width: 90%; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;} #container .wrapSection .section:nth-child(odd) .innerSection .textBox{ padding-right: 0;} #container .wrapSection .section:nth-child(even) .innerSection .textBox{ padding-left: 0;} #container .wrapSection .section .innerSection .textBox h4{ margin: 0 auto var(--comp-20);} #container .wrapSection .section .innerSection .textBox h4 span{ font-size: var(--comp-35); color: var(--blue); font-weight: 500; background-image: linear-gradient(180deg, transparent 0%, transparent 70%, #fff 70%, #fff 100%); line-height: 1.6;} #container .wrapSection .section:nth-child(even) .innerSection .textBox h4 span{ font-size: var(--comp-32); color: var(--blue); font-weight: 500; background-image: linear-gradient(180deg, transparent 0%, transparent 70%, var(--lime) 70%, var(--lime) 100%); line-height: 1.6;} #container .wrapSection .section .innerSection .textBox .text{ font-weight: 500; color: var(--navy);} #container .wrapSection .section .innerSection .textBox .text .caution{ font-size: var(--comp-20); line-height: 1.6;} /*-- TARGET --*/ #container #target{ margin-bottom: var(--comp-160);} #container #target .ttlWave{ margin-bottom: 10%;} #container .linkBox{ width: 90%; margin: 0 auto;} #container .linkBox .linkList{ display: block; margin: 0; box-sizing: border-box; padding: 7%; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: space-between; color: var(--navy);} #container .linkBox .linkList:nth-child(odd){ background-color: var(--lightlime);} #container .linkBox .linkList:nth-child(even){ background-color: var(--lime);} #container .linkBox .linkList.end{ color: var(--gray);} #container .linkBox .linkList.active{ color: var(--blue);} #container .linkBox .linkList dt{ width: 100%; margin: 0 auto;} #container .linkBox .linkList dt p{ font-weight: 500;} #container .linkBox .linkList dt .end{ display: inline-block; background-color: var(--navy); color: #fff; font-size: var(--comp-20); line-height: 1; padding: 3% 4%; position: relative; margin-bottom: 5%; } #container .linkBox .linkList dt .end::after{ content: ""; display: block; width: 11px; height: 11px; background-color: var(--navy); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%);} #container .linkBox .linkList dt .pick{ display: inline-block; background-color: var(--blue); color: #fff; font-size: var(--comp-20); line-height: 1; padding: 3% 4%; position: relative; margin-bottom: 5%; } #container .linkBox .linkList dt .pick::after{ content: ""; display: block; width: 11px; height: 11px; background-color: var(--blue); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%);} #container .linkBox .linkList dt .date{ font-size: var(--comp-25); font-weight: 500; line-height: 1.6;} #container .linkBox .linkList dt .ttl{ font-size: var(--comp-32); font-weight: 700; line-height: 1.6;} #container .linkBox .linkList dt .caution{ font-size: var(--comp-20); line-height: 1.6;} #container .linkBox .linkList dd{ width: 100%; margin: 5% 0 0;} #container .linkBox .linkList dd .btn{ line-height: 1; } #container .linkBox .linkList dd .btn span{ background-color: var(--gray); color: #fff; width: 100%; display: block; text-align: center; font-size: var(--comp-25); font-weight: 500; padding: 6%; box-sizing: border-box; position: relative;} #container .linkBox .linkList dd .btn a{ background-color: var(--blue); color: #fff; width: 100%; display: block; text-align: center; font-size: var(--comp-25); font-weight: 500; padding: 6%; box-sizing: border-box; position: relative; text-decoration: none;} #container .linkBox .linkList dd .btn a::after{ content: ""; display: block; width: 6px; height: 6px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: calc(50% - 4px); transform: rotate(45deg); right: 6%;} #container .linkBox .linkList dd .btn a:hover{ opacity: 1;} /*-- RACE --*/ #container .endall{ width: 90%; border: 2px solid #f50207; padding: var(--comp-30); box-sizing: border-box; margin: 0 auto; color: #f50207; text-align: center; font-weight: 700; margin-bottom: var(--comp-100); font-size: var(--comp-26);} #container .innerRace{ width: 90%; margin: -20% auto 0; padding-top: 20%;} #container .innerRace + .innerRace{ margin-top: calc(-20% + var(--comp-180));} #container .innerRace h3{ margin: 0 auto var(--comp-60); color: var(--blue); text-align: center; font-weight: 900;} #container .innerRace h3 .date{ display: inline-block; background-color: var(--lightblue); font-size: var(--comp-25); padding: 2% 5%; margin-bottom: var(--comp-20);} #container .innerRace h3 .small{ display: block; font-size: var(--comp-32);} #container .innerRace h3 .main{ display: block; font-size: var(--comp-40); } #container .innerRace h3 .small + .main{ margin-top: 0;} #container .innerRace figure{ margin: 0 auto;} #container .innerRace figure img{ display: block; width: 100%;} #container .wrapCheckBox{ margin: 0 auto; display: block;} #container .checkBox{ width: 100%; margin-top: var(--comp-60); } #container .checkBox.wide{ width: 100%;} #container .checkBox h4{ border-bottom: 2px solid var(--lime); display: flex; color: var(--blue); font-size: var(--comp-30); font-weight: 800; align-items: center; gap: 3%; margin: 0 auto var(--comp-30);} #container .checkBox h4::before{ content: ""; display: block; width: var(--comp-110); height: var(--comp-60); background-color: var(--lime); background-image: url(../img/icon-check.svg); background-position: center center; background-repeat: no-repeat; background-size: 10vw auto;} #container .checkBox .text + .text{ margin-top: var(--comp-45);} #container .checkBox .circleList{ display: flex; flex-wrap: wrap; gap: 10px; font-weight: 500; line-height: 2;} #container .checkBox .circleList > li{ width: 100%; text-indent: -1.5em; padding-left: 1.5em; box-sizing: border-box;} #container .checkBox .circleList > li::before{ content: "●"; margin-right: 0.5em;} #container .checkBox .dotList{ display: flex; flex-wrap: wrap; font-weight: 500; line-height: 2;} #container .checkBox .dotList > li{ width: 100%; text-indent: -0.5em; padding-left: 0.5em; box-sizing: border-box;} #container .checkBox .dotList > li::before{ content: "・";} #container .checkBox .blue{ color: var(--blue); font-weight: 800;} #container .checkBox .screenList{ display: block; margin: var(--comp-45) auto ;} #container .checkBox .screenList li{ width: 100%; background-color: var(--lightblue);} #container .checkBox .screenList li:not(:first-child){ margin-top: var(--comp-80);} #container .checkBox .screenList li .text{ box-sizing: border-box; padding: 5% 7%; font-size: var(--comp-27);} #container .btnList{ margin: var(--comp-60) auto 0; width: 90%; display: flex; flex-wrap: wrap; gap: var(--comp-60);} #container .btnList:not(:last-child){ margin-bottom: var(--comp-180);} #container .btnList li{ width: 100%; } #container .btnList li a:hover{ opacity: 1;} #container .btnList li a{ width: 100%; display: block; padding: 6% 7% 7%; background-color: var(--lightblue); color: var(--blue); font-size: var(--comp-30); text-decoration: none; font-weight: 500; position: relative; box-sizing: border-box;} #container .btnList li.shop a{ background-color: var(--blue); color: #fff; font-weight: 700;} #container .btnList li a::after{ content: ""; display: block; width: 8px; height: 8px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue); position: absolute; top: calc(50% - 5px); transform: rotate(45deg); right: 7%;} #container .btnList li.shop a::after{ border-top: 1px solid #fff; border-right: 1px solid #fff; } #container .btnList li.shop a span{ display: block;} #container .btnList li.shop a span.deco{ color: var(--lime); font-size: var(--comp-25); margin-bottom: 3%;} #container .btnList li.shop a span.deco::before{ content: "＼"; margin-right: 2%; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.shop a span.deco::after{ content: "／"; margin-left: 2%; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.shop a span.main{ font-size: var(--comp-30);} #container .btnList li.noLink.shop{ width: 100%; padding: 6% 7% 7%; background-color: var(--gray); color: #fff; font-weight: 700;} #container .btnList li.noLink.shop span{ display: block;} #container .btnList li.noLink.shop span.deco{ color: #fff; font-size: var(--comp-25); margin-bottom: 3%;} #container .btnList li.noLink.shop span.deco::before{ content: "＼"; margin-right: 2%; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.noLink.shop span.deco::after{ content: "／"; margin-left: 2%; animation: blinking .8s ease-in-out infinite alternate;} #container .btnList li.noLink.shop span.main{ font-size: var(--comp-30);} #container .btnList li.type02{ width: 80%; margin: 0 auto 0;} #container .btnList li.type02 a{ background-color: var(--lime); color: var(--blue); font-weight: 500;} #container .btnList li.type02.noLink{ display: block; padding: 6% 7% 7%; background-color: var(--gray); color: #fff; font-size: var(--comp-30); text-decoration: none; font-weight: 500; box-sizing: border-box;} #container .unit-accordion{ width: 100%; margin: var(--comp-40) auto 0;} #container .unit-accordion + .unit-accordion{ margin-top: var(--comp-15);} #container .unit-accordion dt{ background-color: var(--lime); cursor: pointer; padding: var(--comp-20) var(--comp-15) var(--comp-20) var(--comp-50); box-sizing: border-box; color: var(--blue); font-weight: 800; position: relative;} #container .unit-accordion dt .icon{ aspect-ratio: 1 / 1; width: var(--comp-20); height: var(--comp-20); display: block; position: absolute; left: var(--comp-15); top: 50%; transform: translateY(-50%); transition: all 0.5s ease;} #container .unit-accordion dt .icon::before{ content: ""; display: block; width: 100%; height: 2px; background-color: var(--blue); position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #container .unit-accordion dt .icon::after{ content: ""; display: block; width: 2px; height: 100%; background-color: var(--blue); position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.5s ease;} #container .unit-accordion dt.active .icon::after{ transform: translateX(-50%) scaleY(0); opacity: 0; } #container .unit-accordion dt.active .icon{ transform: translateY(-50%) rotate(180deg);} #container .unit-accordion dd{ padding: var(--comp-30) var(--comp-15) var(--comp-15); box-sizing: border-box; margin: 0; display: none; font-size: var(--comp-27) ; font-weight: 500;} #container .unit-accordion dd .unit-gallery{ width: 100%; display: flex; gap: var(--comp-30); flex-wrap: wrap;} #container .unit-accordion dd .unit-gallery .img{ width: 100%; margin: 0 auto;} #container .unit-accordion dd .unit-gallery .img img{ width: 100%; margin: 0 auto; display: block;} #container .unit-accordion dd .unit-gallery .img.small img{ width: 70%;} #container .unit-accordion dd .unit-gallery .img .caption{ text-align: center; font-size: var(--comp-25);} } /*-- ANIMATION --*/ .fadein{ opacity : 0; transition : transform 800ms, opacity 800ms;} .fadeR{ transform : translate(100px, 100px);} .fadeL{ transform : translate(-100px, 100px);} .feadZ{ animation: zoomIn .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;} .fadein.scrollin { opacity : 1; transform : translate(0, 0);} @keyframes zoomIn { 0% { transform: scale(1); opacity: 0; } 80% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes blinking { 0% { opacity: 0; } 100% { opacity: 1; } }