@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Plus+Jakarta+Sans:wght@500;600;800&display=swap');

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);
*/

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:normal;}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1210px;
    background: #fff;
    color: #000;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}

img{ width: 100%; vertical-align: bottom;}
i{ display: block;}
a{ color: #000; text-decoration: none;}
a:hover{ color: #000; text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative; margin: 0 auto; width: 1210px;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.3rem;}
    .pc{ display: none;}
    .sp{ display: block;}
    #wrap{ width: 100%;}
}

/* --------------------------------------------------
 article
--------------------------------------------------- */
article{ margin: 0 auto; width: 1210px;}
section{ position: relative; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50% + 160px); width: 100vw;}

@media screen and (max-width: 768px){
    article{ width: 100%;}
    section{ padding: 0 calc(50vw - 50% + 9.5555vw);}
}

/* header
--------------------------------------------------- */
header{ margin: 0 calc(50% - 50vw); padding: 80px calc(50vw - 50%) 0; width: 100vw; background: #003894; text-align: center;}
header .inner{ position: relative;}
header h1 img{ width: 350px;}
header .lead1{ padding: 40px 0 0;}
header .lead1 img{ width: 797px;}
header .lead2{ padding: 120px 0 0;}
header .lead2 img{ width: 785px;}
header .lead3{ position: absolute; right: 221px; bottom: 336px; width: 250px;}
header .img{ position: absolute;}
header .img1{ bottom: 375px; left: 0; width: 93px;}
header .img2{ bottom: 438px; left: 190px; width: 77px;}
header .img3{ bottom: 340px; left: 289px; width: 101px;}
header .img4{ bottom: 83px; left: 34px; width: 104px;}
header .img5{ right: 0; bottom: 515px; width: 89px;}
header .img6{ right: 90px; bottom: 368px; width: 93px;}
header .img7{ right: 72px; bottom: 75px; width: 88px;}

@media screen and (max-width: 768px){
    header{ padding: 0;}
    header .inner{ position: relative; padding: 7.7333vw 0 0;}
    header h1 img{ width: 45.7777vw;}
    header .lead1{ padding: 5.1111vw 0 0;}
    header .lead1 img{ margin: 0 auto; width: 88.8888vw;}
    header .lead2{ padding: 4.8vw 0 0;}
    header .lead2 img{ margin: 0 auto; width: 86.9333vw;}
    header .lead3{top: 44vw;  right: 9.1555vw; bottom: auto; width: 22.2222vw;}
    header .img1{top: 35.5555vw;  bottom: auto; left: 5.1555vw; width: 8.2666vw;}
    header .img2{top: 46.6666vw;  bottom: auto; left: 13.5111vw; width: 6.8444vw;}
    header .img3{ bottom: 10.0444vw; left: 18.0444vw; width: 8.9777vw;}
    header .img4{ bottom: 0.8888vw; left: 6.9333vw; width: 9.2444vw;}
    header .img5{top: 45.0666vw;  right: auto; bottom: auto; left: 27.7333vw; width: 8.2666vw;}
    header .img6{ right: 7.9111vw; bottom: 1.3333vw; width: 7.9111vw;}
    header .img7{ right: 18.4888vw; bottom: 9.7777vw; width: 7.8222vw;}
}

/* sec1
--------------------------------------------------- */
.sec1{ padding: 75px calc(50vw - 50% + 160px) 50px; background: #003894; color: #ffff00;}
.sec1 h2{ display: flex; margin: 0 auto; width: 450px; height: 50px; border: 1px solid #fff; border-radius: 50px; font-weight: 700; align-items: center; justify-content: center;}

@media screen and (max-width: 768px){
    .sec1{ padding: 8.8888vw calc(50vw - 50% + 9.5555vw) 16vw;}
    .sec1 h2{ width: 100%; height: 8.8888vw; border-radius: 8.8888vw;}
}

.list-ico{ display: flex; overflow: hidden; margin: 35px auto 0; width: 450px; line-height: 1.5; justify-content: space-between;}
.list-ico > li{ text-align: center;}
.list-ico > li:last-child{ padding: 0 50px 0 0;}
.list-ico img{ width: 100px;}
.list-ico figcaption{ padding: 34px 0 0; font-weight: 700;}
.list-ico figcaption span{ font-size: 2.5rem;}

@media screen and (max-width: 768px){
    .list-ico{ margin: 3.5555vw 0 0; width: 100%;}
    .list-ico > li{ padding: 0 0 0 8vw;}
    .list-ico > li:last-child{ padding: 0 11.5555vw 0 0;}
    .list-ico img{ width: 17.7777vw;}
    .list-ico figcaption{ padding: 2.2222vw 0 0; font-size: 2.6666vw;}
    .list-ico figcaption span{ font-size: 3.5555vw;}
}

.exp{ margin: 45px 0 0; padding: 0 75px 45px;}
.exp p{ text-align: justify; text-decoration: underline; font-weight: 500; font-size: 2.4rem; line-height: 2.25;}

@media screen and (max-width: 768px){
    .exp{ margin: 5.3333vw 0 0; padding: 0 2.6666vw;}
    .exp p{ font-size: 3.5555vw; line-height: 2;}
}

.sec1 h3{ display: flex; margin: 35px auto 0; width: 450px; height: 50px; border-radius: 50px; background: #fff; color: #003894; font-weight: 700; font-size: 2.6rem; align-items: center; justify-content: center;}
.sec1 h3 span{ font-size: 2rem;}

@media screen and (max-width: 768px){
    .sec1 h3{ margin: 7.1111vw 0 0; width: 100%; height: 8.8888vw; border-radius: 8.8888vw; font-size: 4.6222vw;}
    .sec1 h3 span{ font-size: 3.5555vw;}
}

.list-prize{ margin: 40px 0 0;}
.list-prize > li{ position: relative; display: flex; padding: 0 0 75px; justify-content: space-between;}
.list-prize figure{ position: relative; width: 450px; text-align: center;}
.list-prize figure .img{ position: relative;}
.list-prize figure .img:after{ position: absolute; right: -10px; bottom: -10px; width: 100%; height: 100%; background: #ffff00; content: "";}
.list-prize figure .img img{ position: relative; z-index: 10; display: block;}
.list-prize figcaption{ position: absolute; bottom: -75px; left: 50%; font-weight: 700; font-size: 1.5rem; line-height: 1.6; transform: translate(-50%,0);}
.list-prize figcaption span{ font-size: 2rem;}
.list-prize .detail{ display: flex; flex-direction: column; padding: 0 80px 0 0; width: 345px; color: #fff; text-align: justify; line-height: 1.75; justify-content: flex-end;}
.list-prize .detail .btn{ margin: 40px 0 -10px; text-align: center;}
.list-prize .detail .btn a{ display: flex; margin: 0 auto; width: 230px; height: 50px; border: 2px solid; border-radius: 50px; color: #fff; letter-spacing: normal; font-weight: 700; font-size: 2rem; align-items: center; justify-content: center;}
.list-prize .comment{ position: absolute; top: 20px; right: 53px; z-index: 20; display: flex; align-items: center;}
.list-prize .cn1{ width: 335px;}
.list-prize .cn2{ padding: 0 0 0 15px; width: 115px;}

@media screen and (max-width: 768px){
    .list-prize{ margin: 5.3333vw 0 0;}
    .list-prize > li{ flex-direction: column; padding: 0;}
    .list-prize figure{ width: 100%;}
    .list-prize figure .img:after{ right: -1.7777vw; bottom: -1.7777vw;}
    .list-prize figcaption{ position: relative; bottom: auto; left: auto; padding: 5.3333vw 0 0; font-size: 2.6666vw; line-height: 1.5; transform: none;}
    .list-prize figcaption span{ font-size: 3.5555vw;}
    .list-prize .detail{ display: block; padding: 6.2222vw 0 0; width: 100%;}
    .list-prize .detail p{ margin: 5.3333vw 0 0; padding: 0 3.5555vw;}
    .list-prize .detail .btn{ margin: 5.3333vw 0 0;}
    .list-prize .detail .btn a{ width: 40vw; height: 8.8888vw; border-radius: 8.8888vw; font-size: 3.5555vw;}
    .list-prize .comment{ position: relative; top: auto; right: auto; justify-content: space-between;}
    .list-prize .cn1{ width: 59.5555vw;}
    .list-prize .cn2{ padding: 0; width: 17.7777vw;}
}

.list-prize.reverse > li{ flex-direction: row-reverse;}
.list-prize.reverse figure .img:after{ right: auto; left: -10px;}
.list-prize.reverse .detail{ padding: 0 0 0 80px;}
.list-prize.reverse .comment{ top: -10px; right: auto; left: 53px; flex-direction: row-reverse;}
.list-prize.reverse .cn2{ padding: 0 15px 0 0;}

@media screen and (max-width: 768px){
    .list-prize.reverse > li{ flex-direction: column;}
    .list-prize.reverse figure .img:after{ left: -1.7777vw;}
    .list-prize.reverse .detail{ padding: 6.2222vw 0 0;}
    .list-prize.reverse .comment{ left: auto;}
    .list-prize.reverse .cn2{ padding: 0;}
}

/* sec2
--------------------------------------------------- */
.sec2{ padding: 100px calc(50vw - 50% + 160px) 60px; background: #ffff00; color: #003894;}
.sec2 h2{ position: absolute; top: -75px; left: 50%; width: 215px; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .sec2{ padding: 10.6666vw calc(50vw - 50% + 9.5555vw) 7.1111vw;}
    .sec2 h2{ top: -10.2222vw; width: 29.3333vw;}
}

.list-prize.column{ margin: 0;}
.list-prize.column > li{ flex-direction: column;  padding: 0; align-items: center;}
.list-prize.column figure .img:after{ background: #003894;}
.list-prize.column figcaption{ position: relative; bottom: auto; left: auto; padding: 20px 0 0; color: #003894; transform: none;}
.list-prize.column .detail{ display: block; padding: 50px 0 0; width: 730px; color: #003894; line-height: 1.75;}
.list-prize.column .detail p{ margin: 0;}
.list-prize.column .detail .btn a{ color: #003894;}
.list-prize.column .cn1{ position: absolute; z-index: 20; width: 335px;}
.list-prize.column .comment1 .cn1{ top: 40px; right: -220px;}
.list-prize.column .comment2 .cn1{ top: 340px; left: -200px;}
.list-prize.column .cn2{ position: absolute; z-index: 20; width: 100px;}
.list-prize.column .comment1 .cn2{ top: 264px; right: -126px;}
.list-prize.column .comment2 .cn2{ top: 250px; left: -128px;}

@media screen and (max-width: 768px){
    .list-prize.column figcaption{ padding: 5.3333vw 0 0;}
    .list-prize.column .detail{ display: block; padding: 0; width: 100%;}
    .list-prize.column .detail p{ margin: 5.3333vw 0 0; padding: 0 3.5555vw;}
    .list-prize.column .comment1{display: flex;  margin: 5.3333vw 0 0; justify-content: space-between; align-items: center;}
    .list-prize.column .comment2{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;}
    .list-prize.column .cn1{ position: relative; width: 59.5555vw;}
    .list-prize.column .comment1 .cn1{ top: auto; right: auto;}
    .list-prize.column .comment2 .cn1{ top: auto; left: auto;}
    .list-prize.column .cn2{ position: relative; width: 17.7777vw;}
    .list-prize.column .comment1 .cn2{ top: auto; right: auto;}
    .list-prize.column .comment2 .cn2{ top: auto; left: auto;}
}

/* motion
--------------------------------------------------- */
/* 傾斜15度リピート */
.act1 { transform: rotate(0); animation: act1 2s running steps(1) infinite;}
@keyframes act1 {
    0% { transform: rotate(0);}
    50% { transform: rotate(15deg);}
    100% { transform: rotate(0);}
}
.act2 { transform: rotate(0); animation: act2 2s running steps(1) infinite;}
@keyframes act2 {
    0% { transform: rotate(0);}
    50% { transform: rotate(-15deg);}
    100% { transform: rotate(0);}
}
.act2s { transform: rotate(0); animation: act2s 2s running steps(1) infinite;}
@keyframes act2s {
    0% { transform: rotate(0);}
    50% { transform: rotate(-5deg);}
    100% { transform: rotate(0);}
}

/* フェードイン */
.act3 { opacity: 0;}
.fadein3{ animation: act3 .8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes act3 {
  0% { opacity: 0; transform: scale(0.8);}
  100% { opacity: 1; transform: scale(1);}
}

/* 回転 */
.act4{ opacity: 0;}
.fadein4 { opacity: 1; animation: act4 .8s ease-out;}
@keyframes act4 {
  0%{ opacity: 0; transform: rotateY(0) translateY(30px);}
  100%{ opacity: 1; transform: rotateY(360deg) translateY(0);}
}

/* 跳ね */
.act5 { opacity: 0; transform: translateY(-150px);}
.fadein5{ animation: act5 .5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;}
@keyframes act5 {
    0% { opacity: 0; transform: translateY(-150px);}
    50% { transform: translateY(0);}
    65% { transform: translateY(-30px);}
    100% { transform: translateY(0);}
    20%,100% { opacity: 1;}
}

/* --------------------------------------------------
 aside
--------------------------------------------------- */
aside{ padding: 40px 0 70px;}
aside a{ display: block; margin: 0 auto; width: 337px; text-align: center;}
aside .aside2{ padding: 10px 0 0;}
aside .aside2 img{ width: 100px;}
aside .aside3{ padding: 18px 0 0;}
aside .aside3 img{ width: 250px;}

@media screen and (max-width: 768px){
    aside{ padding: 8.8888vw 0;}
    aside a{ width: 60vw;}
    aside .aside2{ padding: 2.6666vw 0 0;}
    aside .aside2 img{ width: 17.7777vw;}
    aside .aside3{ padding: 2.6666vw 0 0;}
    aside .aside3 img{ width: 44.4444vw;}
}

/* sec3
--------------------------------------------------- */
.sec3{ margin: 0 calc(50% - 50vw); padding: 75px calc(50vw - 50% + 160px) 0; width: 100vw; background: #003894; color: #ffff00;}
.sec3 h2{ display: flex; margin: 0 auto; width: 450px; height: 50px; border-radius: 50px; background: #fff; color: #003894; align-items: center; justify-content: center;}
.sec3 h2 span{ font-weight: 800; font-size: 2rem; font-family: 'Plus Jakarta Sans', sans-serif;}
.list-acv{ display: flex; margin: 0 auto; width: calc(265px * 3); flex-wrap: wrap;}
.list-acv > li{ padding: 30px 20px 0; text-align: center;}
.list-acv a{ display: block; color: #fff; line-height: 1.5;}
.list-acv .vol{ display: inline-block; color: #ffff00; text-decoration: underline; font-weight: 600; font-size: 2.5rem; font-family: 'Plus Jakarta Sans', sans-serif;}
.list-acv .vol span{ display: inline-block; margin: 0 .2em 0 0; color: #eb0000; text-decoration: none; font-size: 2rem;}
.list-acv h3{ margin: 0 -20px; font-weight: 700; font-size: 2rem;}
.list-acv figure{ margin: 15px 0 0; width: 225px;}

@media screen and (max-width: 768px){
    .sec3{ padding: 8.8888vw calc(50vw - 50% + 9.5555vw);}
    .sec3 h2{ width: 100%; height: 8.8888vw; border-radius: 8.8888vw; font-size: 4.6222vw;}
    .sec3 h2 span{ font-size: 3.5555vw;}
    .list-acv{ flex-direction: column; padding: 3.5555vw 17.7777vw 0; width: 100%;}
    .list-acv > li{ padding: 3.5555vw 0 0;}
    .list-acv .vol{ font-size: 4.4444vw;}
    .list-acv .vol span{ font-size: 2.6666vw;}
    .list-acv h3{ margin: 0 -17.7777vw; font-size: 2.6666vw;}
    .list-acv figure{ margin: 3.5555vw 0 0; width: 100%;}
}

.sec3 .more{ display: flex; padding: 5.2083vw 0 0; justify-content: center;}
.sec3 .more span{ display: flex; width: 23.4375vw; height: 2.6041vw; border: 1px solid; border-radius: 2.6041vw; color: #fff; font-weight: 800; font-size: 1.0416vw; font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; align-items: center; justify-content: center;}
.sec3 .more.open{ display: none;}
.sec3 .drop{ display: none;}

@media screen and (max-width: 768px){
    .sec3 .more{ padding: 5.3333vw 0 0;}
    .sec3 .more span{ width: 100%; height: 8.8888vw; border-radius: 8.8888vw; font-size: 3.5555vw;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
footer{ margin: 0 calc(50% - 50vw); padding: 7.2916vw 0 5.2083vw; width: 100vw; background: #003894; text-align: center;}
footer small{ display: inline-block; width: 11.9791vw;}

@media screen and (max-width: 768px){
    footer{ margin: 0; padding: 20px 0 30px; width: 100%;}
    footer small{ width: 40.622vw;}
}