@charset "utf-8";

:root{
    --base-font: 'メイリオ', Meiryo, sans-serif, system-ui;
    
    --base-font-color: #1A1A1A;
    --navy: #002144;
    --blue: #004282;
    --gray: #C4C4C5;
    --darkgray: #9EA0A8;
    --lightgray: #F0F2F4;
    --vividred: #cf2e2e;

    --comp-660: 89.1891891891891vw;
    --comp-580: 78.3783783783783vw;
    --comp-540: 72.9729729729729vw;
    --comp-520: 70.2702702702702vw;
    --comp-500: 67.5675675675675vw;
    --comp-480: 64.8648648648648vw;
    --comp-400: 54.054054054054vw;
    --comp-360: 48.6486486486486vw;
    --comp-350: 47.2972972972972vw;
    --comp-340: 45.9459459459459vw;
    --comp-300: 40.5405405405405vw;
    --comp-280: 37.83783783783784vw;
    --comp-260: 35.1351351351351vw;
    --comp-250: 33.7837837837837vw;
    --comp-240: 32.4324324324324vw;
    --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-68: 9.189189189189189vw;
    --comp-62: 8.378378378378378vw;
    --comp-58: 7.837837837837837vw;
    --comp-56: 7.567567567567567vw;
    --comp-54: 7.297297297297297vw;
    --comp-52: 7.027027027027027vw;
    --comp-48: 6.486486486486486vw;
    --comp-46: 6.216216216216216vw;
    --comp-44: 5.945945945945945vw;
    --comp-42: 5.675675675675675vw;
    --comp-39: 5.270270270270270vw;
    --comp-38: 5.135135135135135vw;
    --comp-36: 4.864864864864864vw;
    --comp-34: 4.594594594594594vw;
    --comp-33: 4.459459459459459vw;
    --comp-32: 4.324324324324324vw;
    --comp-28: 3.783783783783783vw;
    --comp-27: 3.648648648648648vw;
    --comp-26: 3.513513513513513vw;
    --comp-24: 3.243243243243243vw;
    --comp-22: 2.972972972972972vw;
    --comp-21: 2.837837837837837vw;
    --comp-19: 2.567567567567567vw;
    --comp-18: 2.432432432432432vw;
    --comp-16: 2.162162162162162vw;
    --comp-14: 1.891891891891891vw;
    --comp-13-5: 1.82432432432432432vw;
    --comp-12: 1.621621621621621vw;
    --comp-8: 1.08108108108108108vw;
    --comp-7: 0.94594594594594594vw;
    --comp-4: 0.54054054054054054vw;
    --comp-3: 0.40540540540540540vw;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	img {
		image-rendering: -webkit-optimize-contrast !important;
	}
}

body{ margin:0 auto; padding:0; font-display: auto; -webkit-font-smoothing: antialiased !important; font-smoothing: antialiased !important; color: var(--base-font-color); width: 100%; letter-spacing: 0.07em; /*animation: openingFadeIn 1.5s ease forwards; animation-delay: 0.3s; opacity: 0;*/ font-family: var(--base-font); font-feature-settings: "palt";}
img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto; max-width: 100%;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0; line-height: 2.5; font-size: min(var(--comp-24), 16px); font-family: var(--base-font); color: var(--navy);}
.nowrap{ text-wrap: nowrap; display: inline-block;}

/* IE8+, Chrome  */
a{ transition: all ease 0.5s; outline: 0;}

@media (any-hover: hover) {
    a:hover{ opacity: 0.7;}
}

@media screen and (width > 1000px){
.sp{ display: none !important;}
}
    
@media screen and (width <= 1000px){
.pc{ display: none !important;}
}

/* Firefox */
a::-moz-focus-inner,
a::-moz-focus-inner { border: 0;}

/*----------------------------------------------
HEADER
----------------------------------------------*/
header{ position: sticky; top: 0; left: 0; z-index: 10000; background-color: #fff; padding: 10px; height: 80px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
header .innerHeader{ display: flex; width: min(100%, 1000px); justify-content: space-between; margin: 0 auto;}
header .innerHeader h1{ width: 220px;}
header .innerHeader .siteLogo{ width: 60px;}

@media screen and (width <= 1000px){
header{ padding: 5%; height: auto; max-height: 200px; }
header .innerHeader{ width: 100%; justify-content: space-between; margin: 0 auto;}
header .innerHeader h1{ width: min(40%, 305px);}
header .innerHeader .siteLogo{ width: min(10%, 80px);}
}

/*----------------------------------------------
FOOTER
----------------------------------------------*/
footer{ background-color: #fff; padding: 40px 10px 80px; position: relative;}
footer .innerFooter{ max-width: 1000px; margin: 0 auto; position: relative; padding-top: 40px;}
footer .footerNav{ font-size: 13px; width: 40em; margin: 0 auto;}
footer .footerNav ul{ display: flex; flex-wrap: wrap; justify-content: center; line-height: 2.5; color: #005A8B;}
footer .footerNav li::after { content: "／"; padding: 0px 0.6em;}
footer .footerNav li:nth-child(3n)::after{ content: none;}
footer .innerFooter .copyright{ position: absolute; top: 0; left: 0; font-size: 13px; color: #005A8B; line-height: 1;}

@media screen and (width <= 1000px){
footer{ padding: var(--comp-40) 0 var(--comp-80);}
footer .innerFooter{ padding-top: var(--comp-40);}
footer .footerNav{ font-size: var(--comp-16); width: 45em;}
footer .footerNav ul{ display: flex; flex-wrap: wrap; justify-content: center; line-height: 2.5; color: #005A8B;}
footer .footerNav li::after { content: "／"; padding: 0px 0.5em;}
footer .footerNav li:nth-child(3n)::after{ content: none;}
footer .innerFooter .copyright{ position: absolute; top: 0; left: var(--comp-10); font-size: var(--comp-16); color: #005A8B; line-height: 1;}
}

/*----------------------------------------------
PAGE TOP
----------------------------------------------*/
#page-top{ width: 100px; display:none; position:fixed; right: 20px; bottom: 22px; z-index:200;}
#page-top p{ margin:0; padding:0;}
#page-top p img{ width: 100%;}
#move-page-top{ text-decoration:none; display:block; cursor:pointer; transition: opacity 0.5s;}

@media screen and (width <= 1000px){
#page-top{ width: 15%; display:none; position:fixed; right: 5%; bottom: 12%; z-index:200;}
}

/*--------------------------------------------------------------------------------------------

CONTENT

--------------------------------------------------------------------------------------------*/
/*----------------------------------------------
CONTENT BASE
----------------------------------------------*/
#container{ background-image: linear-gradient(to bottom, rgba(0 77 160 / 1) 0%, rgba(210 229 246 / 1) 100%); background-position: center top; background-size: 100% 200%; width: 100%; overflow: hidden;}
#content{ padding: 20px; box-sizing: border-box; width: 100%;}

@media screen and (width <= 1000px){
#content{ padding: var(--comp-10) 0;}
}

/*----------------------------------------------
MAIN
----------------------------------------------*/
#main{ margin-top: 10px; overflow: hidden;}
#main .wrapMain{ height: 618px; background-image: url(../img/common/bg-mv-pc.webp); background-repeat: no-repeat; background-position: center top; background-size: cover;}
#main .innerMain{ width: min(90%, 1200px); margin: 0 auto; height: 100%; position: relative;}
#main .innerMain h1{ position: absolute; top: 0; right: 0; width: 18%; }
#main .innerMain .mainCatch{ width: min(39.5%, 395px); position: absolute; top: 115px; left: calc(50% - 21.7%); animation: openingSlideIn 0.5s ease-out forwards; animation-delay: 1.2s; transform: translateY(min(var(--comp-20), 20px)); opacity: 0;}
#main .innerMain .mainStop{ position: absolute; top: 0; left: 0; width: min(14.6%, 146px); transform: translateY(-101%); animation: openingStop 0.1s ease-out forwards; animation-delay: 3.2s; }
#main .innerMain .loupe{ position: absolute; bottom: -275px; left: 50%; width: min(45%, 450px); opacity: 0; transform: scale(0.5); animation: openingLoupe 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 0.3s;}
#main .innerMain .loupe .body{ position: relative; z-index: 2}
#main .innerMain .loupe .inner{ display: block; width: 100%; aspect-ratio: 1 / 1; background-image: url(../img/common/bg-magnifying.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; border-radius: 50%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; animation: openingFadeIn 0.7s ease forwards; animation-delay: 1.5s;}
#main .innerMain .loupe .inner #mainAnimation{ position: absolute; top: 0; left: 0;}

#main .catchBox{ padding: 90px 0; margin: 0 auto; width: min(90%, 1000px); position: relative; display: flex; justify-content: space-between; align-items: flex-end;}
#main .catchBox .catch{ color: #fff; font-weight: bold; font-size: 25px; line-height: 1.8; width: 80%;}
#main .catchBox .catchImgBox{ width: min(43%, 430px); display: flex; justify-content: space-between; align-items: flex-end;}
#main .catchBox .catchImgBox figure{ width: min(46.9767441%, 202px);}
#main .catchBox .catchImgBox .icon{ width: min(16.744186%, 72px);}

@media screen and (width <= 1000px){
#main{ margin-top: var(--comp-10); overflow: hidden;}
#main .wrapMain{ height: 0; padding-top: 138.4%; background-image: url(../img/common/bg-mv-sp.webp); background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative;}
#main .innerMain{ width: 100%; height: 100%; margin: 0 auto; height: 100%; position: absolute; top: 0; left: 0;}
#main .innerMain h1{ top: 0; right: var(--comp-30); width: 21.6%; }
#main .innerMain .mainCatch{ width: 70%; position: absolute; top: auto; bottom: calc(var(--comp-120) * (-1)); left: 50%; }
#main .innerMain .mainCatch img{ transform: translateX(-50%);}
#main .innerMain .mainStop{ left: var(--comp-60); width: 28.266666666%;}
#main .innerMain .loupe{ position: absolute; bottom: auto; top: var(--comp-180); left: calc(50% - 15.6%); width: 60%;}
#main .innerMain .loupe .body{ position: relative; z-index: 2}
#main .innerMain .loupe .inner{ display: block; width: 100%; aspect-ratio: 1 / 1; background-image: none; border-radius: 50%; position: absolute; z-index: 1; top: 0; left: 0;}

#main .catchBox{ padding: var(--comp-130) 0 var(--comp-40); width: 100%; display: block; }
#main .catchBox .catch{ font-size: var(--comp-28); line-height: 1.6; width: 85%; margin: 0 auto;}
#main .catchBox .catchImgBox{ width: 58%; display: flex; justify-content: space-between; align-items: flex-end; margin: var(--comp-30) var(--comp-30) 0 auto;}
#main .catchBox .catchImgBox figure{ width: 30vw;}
#main .catchBox .catchImgBox .icon{ width: 14vw;}
}

/*----------------------------------------------
SLIDE
----------------------------------------------*/
#slide{ width: min(100%, 1000px); background-color: rgba(255 255 255 / 0.35); margin: 0 auto; padding: 30px 10px; box-sizing: border-box; margin-bottom: 20px; overflow: hidden;}
#slide h2{ font-size: 50px; text-align: center; text-decoration: underline; text-underline-offset: 0.3em; color: #fff; font-weight: bold; margin: 0 auto 45px;}
#slide h2 .small{ font-size: 38px;}
#slide h2 .yellow{ font-size: 60px; color: #FFF100;}
#slide .sliderBox{ overflow: visible !important;}
#slide .pagination{ position: relative; display: flex; align-items: center; justify-content: center; gap: 30px}
#slide .pagination .slick-dots,
#slide .pagination .slick-prev,
#slide .pagination .slick-next{ position: relative; left: auto; right: auto; bottom: auto; top: auto;}
#slide .pagination .slick-dots{ order: 2; width: auto; display: flex; gap: 20px; margin: 0;}
#slide .pagination .slick-dots li{ margin: 0; height: 15px; width: 15px; border-radius: 50%; overflow: hidden;}
#slide .pagination .slick-dots li button{ margin: 0; padding: 0; width: 100%; height: 100%; }
#slide .pagination .slick-dots li button:before{ width: 100%; height: 100%; border-radius: 0; background-color: #fff; opacity: 1; transition: all 0.3s ease;}
#slide .pagination .slick-dots li.slick-active button:before{ background-color: #fff100;}
#slide .pagination .slick-prev,
#slide .pagination .slick-next{ position: relative; width: auto; height: auto; line-height: 1; transform: none; opacity: 1;}
#slide .pagination .slick-prev{ order: 1; }
#slide .pagination .slick-next{ order: 3; }
#slide .pagination .slick-prev:before{ content: "＜";}
#slide .pagination .slick-next:before{ content: "＞";}

@media screen and (width > 1000px){
.scroll-hint-icon-wrap{ opacity: 0;}
}

@media screen and (width <= 1000px){
#slide{ padding: var(--comp-30) 0; box-sizing: border-box; margin-bottom: var(--comp-10); overflow: hidden;}
#slide h2{ font-size: var(--comp-40); text-decoration: none; margin: 0 var(--comp-40) var(--comp-30); padding: 0 0 var(--comp-10); border-bottom: 2px solid #fff;}
#slide h2 .small{ font-size: var(--comp-30);}
#slide h2 .yellow{ font-size: var(--comp-48); }
#slide .sliderBox{ position: relative;}
#slide .sliderBox .slick-slide{ padding: 0 var(--comp-20); box-sizing: border-box;}
#slide .sliderBox .slick-dotted.slick-slider{ margin-bottom: var(--comp-30);}
#slide .pagination{ gap: var(--comp-30)}
#slide .pagination .slick-dots{ gap: var(--comp-20);}
#slide .pagination .slick-dots li{ height: var(--comp-15); width: var(--comp-15); }
#slide .pagination .slick-prev:before{ content: "＜"; font-size: var(--comp-20);}
#slide .pagination .slick-next:before{ content: "＞"; font-size: var(--comp-20);}
.scroll-hint-icon-wrap{ z-index: 1000;}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon,
.scroll-hint-icon-wrap .scroll-hint-icon{ width: var(--comp-250); height: var(--comp-250); background-image: url('../img/common/icon-finger.svg'); background-size: contain; background-repeat: no-repeat; background-color: transparent; left: calc(50% - var(--comp-125)); top: 10%;}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon::before,
.scroll-hint-icon-wrap.is-active .scroll-hint-icon::after,
.scroll-hint-icon-wrap .scroll-hint-icon::before,
.scroll-hint-icon-wrap .scroll-hint-icon::after{ content: none;}
.scroll-hint-text{ display: none !important;}
}

/*----------------------------------------------
POINT
----------------------------------------------*/
#point{ background-image: linear-gradient(to bottom, rgba(210 229 246 / 1) 0%, rgba(255 255 255 / 1) 100%); background-position: center top; background-size: 100% 200%; box-sizing: border-box; padding: 30px 10px; margin-bottom: 20px;}
#point .innerSection{ width: min(100%, 1196px); margin: 0 auto;}
#point h2{ font-size: 32px; color: #0060AF; text-align: center; font-weight: bold; line-height: 1.8; margin: 0 auto 40px;}
#point h2 .purple{ color: #B74C96; }

@media screen and (width <= 1000px){
#point{ padding: var(--comp-30) 0; margin-bottom: var(--comp-10);}
#point .innerSection{ width: min(100%, 1196px); margin: 0 auto;}
#point h2{ font-size: var(--comp-38); text-align: left; margin: 0 auto var(--comp-30); width: 80%;}
#point h2 .purple{ color: #B74C96; }
#point .scroll-hint{ overflow-x: scroll;}
#point .scroll-hint figure{display: block; padding: 0 var(--comp-10); width: min(258%, 1946px);}
#point .point02,
#point .point03{ width: 80%; margin: var(--comp-60) auto 0;}
#point h3{ margin: 0 auto var(--comp-20);}
#point .point02 > .red{ text-align: center; font-size: var(--comp-34); text-align: center; color: #E50012; font-weight: bold; line-height: 1.6; margin: var(--comp-30) auto;}
#point .circleText{ font-size: var(--comp-42); text-align: center; color: #B74C96; font-weight: bold; line-height: 1.5; border-radius: 50%; border: 2px solid #B74C96; padding: var(--comp-20) 0}
#point .circleText .red{ color: #E50012;}
#point .circleText .small{ font-size: var(--comp-40);}
}

/*----------------------------------------------
ITEM
----------------------------------------------*/
#item{ background-image: linear-gradient(to bottom, rgba(210 229 246 / 1) 0%, rgba(255 255 255 / 1) 100%); background-position: center top; background-size: 100% 200%; box-sizing: border-box; padding: 30px 10px 10px; margin-bottom: 20px;}
#item h2{ text-align: center; font-size: 49px; color: #004C97; font-weight: bold; margin: 0 auto 30px; vertical-align: baseline;}
#item h2 .line01{ display: block; line-height: 1; margin-bottom: 30px;}
#item h2 .line02{ display: block; line-height: 1; margin-bottom: 20px;}
#item h2 .line03{ display: block; line-height: 1;}
#item h2 img{ width: 250px; vertical-align: baseline;}
#item h2 .large{ font-size: 56px;}
#item .itemList{ display: flex; justify-content: center; margin: 0 auto 70px;}
#item .itemList li{ width: 330px; text-align: center;}
#item .itemList li figure{ display: block; width: min(90%, 230px); margin: 0 auto 30px;}
#item .itemList li .btn{ text-align: center;}
#item .itemList li .btn a{ background-color: #fff; color: #0041A2; font-size: 14px; padding: 9px 15px 7px; display: inline-block;  line-height: 1; border-radius: 50px;}
#item .bottom img{ display: block; margin: 0 auto; width: 275px; height: auto; aspect-ratio: 275 / 15;}

@media screen and (width <= 1000px){
#item{ padding: var(--comp-30) 0 var(--comp-10); margin-bottom: var(--comp-10);}
#item h2{ text-align: center; font-size: var(--comp-45); margin: 0 auto var(--comp-30);}
#item h2 .line01{ display: block; line-height: 1; margin-bottom: var(--comp-25);}
#item h2 .line02{ display: block; line-height: 1; margin-bottom: var(--comp-20);}
#item h2 .line03{ display: block; line-height: 1;}
#item h2 img{ width: var(--comp-250); vertical-align: baseline;}
#item h2 .large{ font-size: var(--comp-50);}

#item .spSlideBox{ position: relative;}
#item .itemList{ display: flex; justify-content: center; margin: 0 auto var(--comp-120);}
#item .itemList li{ width: 100%; text-align: center;}
#item .itemList li figure{ display: block; width: 70%; margin: 0 auto var(--comp-30);}
#item .itemList li .btn{ text-align: center;}
#item .itemList li .btn a{ font-size: var(--comp-24); padding: var(--comp-10) var(--comp-20); display: inline-block;  line-height: 1; border-radius: 50px;}
#item .bottom img{ margin: 0 auto; width: var(--comp-300); height: auto;}
}

.fadein{ opacity: 0;}
.fadein.scrollin{ animation: openingSlideIn 1.5s ease forwards; animation-delay: 0.2s;}

@keyframes openingFadeIn {
0% { opacity: 0;}
100% { opacity: 1;}
}

@keyframes openingSlideIn {
0% { transform: translateY(min(var(--comp-20), 20px)); opacity: 0;}
100% { transform: translateY(0); opacity: 1;}
}

@keyframes slideOutInCF {
0% { background-position: 0% center; }
40% { background-position: 110% center; }
40.0001% { background-position: -110% center; }
60% { background-position: -110% center; }
100% { background-position: 0% center; }
}
@keyframes slideOutInCF-re {
0% { background-position: 0% center; }
40% { background-position: calc(min(var(--comp-20), 15px)*(-1) - 1px) center; }
40.0001% { background-position: calc(min(var(--comp-20), 15px) + 1px) center; }
60% { background-position: calc(min(var(--comp-20), 15px) + 1px) center; }
100% { background-position: 0% center; }
}

@keyframes openingStop{
0%{ transform: translateY(-101%);}
100%{ transform: translateY(0);}
}

@keyframes openingLoupe{
0%{ opacity: 0; transform: scale(0.5);}
100%{ opacity: 1; transform: scale(1);}
}