@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* --------------------------------------------------
 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: 1200px;
    background: #002f51;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    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: #fff; text-decoration: none;}
a:hover{ color: #fff; text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative; overflow: hidden;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 3.555555556vw;}
    .pc{ display: none;}
    .sp{ display: block;}
}

.fadein1{ opacity: 0; animation: fadein1 1s ease .5s forwards;}
@keyframes fadein1 {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.fadein2{ opacity: 0; animation: fadein2 1s ease forwards;}
@keyframes fadein2 {
    0% { opacity: 0; transform: translateY(13%);}
    100% { opacity: 1; transform: translateY(0);}
}

@keyframes slidein {
    0% { width: 0; opacity: 0;}
    100% { width: 100%; opacity: 1;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
.lp header{ position: relative; height: 56.25vw; background: url("/campaign/2026/begin_vasic/0427/images/main.jpg") no-repeat top center / contain;}
.lp h1{ position: absolute; top: 8.59375vw; left: 50%; width: 39.0625vw; opacity: 0; transform: translate(-50%,0); animation: fadein1 1s cubic-bezier(.23,1,.32,1) 1s forwards;}

@media screen and (max-width: 768px){
    .lp{ overflow: hidden;}
    .lp header{ height: 125.2203467vw; background: url("/campaign/2026/begin_vasic/0427/images/main_sp.jpg") no-repeat top center / contain;}
    .lp h1{ top: 4.946666667vw; width: 64.18875556vw;}
}

.content{ text-align: center;}

@media screen and (max-width: 768px){
}

.catch{ position: relative; margin: -104px 0 0;}
.catch:before{ position: absolute; top: 52px; left: 50%; width: 800px; height: 52px; border-radius: 28.867px 28.867px 0 0; background: #002f51; content: ""; transform: translate(-50%,0);}
.catch dl{ position: relative; display: flex; flex-direction: column; align-items: center; font-feature-settings: "palt" 1;}
.catch dl dt{ display: flex; width: 250px; height: 104px; border-radius: 25px; background: #fff; color: #002f51; font-weight: 700; font-size: 4rem; line-height: 1; justify-content: center; align-items: center;}
.catch dl dt span{ padding: 0 0 .1em; font-size: 10.4rem; font-family: "Plus Jakarta Sans", sans-serif;}
.catch dl dd{ padding: .5em 0 0; font-size: 5rem; line-height: 1.4;}
.catch p{ margin: 50px auto 0; width: 900px; text-align: left; font-size: 1.5rem; line-height: 2; font-feature-settings: "palt" 1;}

@media screen and (max-width: 768px){
    .catch{ margin: -17.33333333vw auto 0;}
    .catch:before{ top: 5.777777778vw; width: 80vw; height: 11.55555556vw; border-radius: 2.222222222vw 2.222222222vw 0 0;}
    .catch dl dt{ width: 26.66666667vw; height: 11.55555556vw; border-radius: 1.721333333vw; font-size: 4.444444444vw;}
    .catch dl dt span{ padding: 0 0 .1em; font-size: 11.55555556vw;}
    .catch dl dd{ padding: .5em 0 0; font-size: 6.222222222vw; line-height: 1.285714286;}
    .catch p{ margin: 1.25em auto 0; width: 80vw; text-align: justify; font-size: 3.555555556vw; line-height: 1.75;}
}

.prof{ display: flex; flex-direction: column; margin: 60px 0 0; align-items: center;}
.prof h2{ display: flex; width: 450px; height: 50px; border: 1.5px solid #fff; border-radius: 25px; color: #fff; font-size: 1.8rem; justify-content: center; align-items: center;}
.prof figure{ display: flex; margin: 60px 0 0; justify-content: center; align-items: center;}
.prof figure > div{ padding: 0 0 0 30px; width: 280px;}
.prof figure > div img{ width: 250px;}
.prof figure > figcaption{ padding: 0 0 0 40px; width: 345px; text-align: left;}
.prof figure > figcaption h3{ font-weight: 900; font-size: 2.5rem; font-feature-settings: "palt" 1;}
.prof figure > figcaption p{ margin: 1em 0 0; text-align: justify; font-size: 1.5rem; line-height: 2;}

@media screen and (max-width: 768px){
    .prof{ margin: 8.888888889vw 0 0;}
    .prof h2{ width: 80vw; height: 8.888888889vw; border: 0.177777778vw solid #fff; border-radius: 4.444444444vw; font-size: 3.288888889vw;}
    .prof figure{flex-direction: column; margin: 5.777777778vw 0 0; justify-content: flex-start; }
    .prof figure > div{ padding: 0; width: 40vw;}
    .prof figure > div img{ width: 100%;}
    .prof figure > figcaption{ padding: 2.222222222vw 0 0; width: 80vw;}
    .prof figure > figcaption h3{ font-size: 3.555555556vw; line-height: 1.5;}
    .prof figure > figcaption p{ margin: 1em 0 0; font-size: 3.555555556vw; line-height: 1.75;}
}

.lead-wrap{ position: relative; margin: 100px 0 0; padding: 22px 0;}
.lead-wrap:before,
.lead-wrap:after{ position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff; content: "";}
.lead-wrap:before{ top: 0;}
.lead-wrap:after{ bottom: 0;}

.lead{ position: relative; display: block; padding: 450px 0 60px;}
.lead:before,
.lead:after{ position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff; content: "";}
.lead:before{ top: 0;}
.lead:after{ bottom: 0;}
.lead span{ position: relative; font-weight: 900; font-size: 3.5rem; line-height: 1.285714286; font-feature-settings: "palt" 1;}
.lead figure{ position: absolute; opacity: 0;}
.lead .img1{ top: 20px; right: calc(50% - 64px); width: 707.9823px;}
.lead .img2{ top: -134px; left: calc(50% - 68px); width: 690.846px; filter: drop-shadow(10px 10px 2px rgba(0,0,0,.5));}

@media screen and (max-width: 768px){
    .lead-wrap{ margin: 8.888888889vw 0 0; padding: 1.955555556vw 0;}
    .lead-wrap:before,
    .lead-wrap:after{ height: 1px;}
    
    .lead{ padding: 79.11111111vw 0 2.666666667vw;}
    .lead:before,
    .lead:after{ height: 1px;}
    .lead span{ font-size: 4vw; line-height: 1.444444444;}

    .lead .img1{ top: 31.11111111vw; right: auto; left: 4.444444444vw; width: 71.71581333vw;}
    .lead .img2{ top: -9.333333333vw; right: 6.666666667vw; left: auto; width: 69.97997333vw; filter: drop-shadow(1.244444444vw 1.244444444vw 0.355555556vw rgba(0,0,0,.5));}
}

.update{ margin: 80px 0 0; text-decoration: underline; font-weight: 600; font-size: 2rem; font-family: "Plus Jakarta Sans", sans-serif; font-feature-settings: "palt" 1;}

@media screen and (max-width: 768px){
    .update{ margin: 2.666666667vw 0 0; font-size: 3.555555556vw;}
}

.dl-share{ display: flex; margin: 50px auto 0; padding: 0 38px; width: 400px; height: 50px; border-radius: 25px; background: #fff; color: #002f51; justify-content: space-between; align-items: center;}
.dl-share dt{ font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif; font-feature-settings: "palt" 1;}
.dl-share dd ul{ display: flex; align-items: center;}
.dl-share dd ul > li{ margin: 0 0 0 40px;}
.dl-share dd ul a{ display: block; width: 30px;}

@media screen and (max-width: 768px){
    .dl-share{ margin: 8vw auto 0; padding: 0 4.444444444vw; width: 80vw; height: 8.888888889vw; border-radius: 4.444444444vw;}
    .dl-share dd ul > li{ margin: 0 0 0 7.111111111vw;}
    .dl-share dd ul a{ width: 5.333333333vw;}
}

section{ position: relative; margin: 100px auto 0; width: 1200px;}

@media screen and (max-width: 768px){
    section{ margin: 8.888888889vw 0 0; width: 100%;}
}

.sec1:before{ position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; background: #fff; content: ""; transform: translate(-50%,0);}
.sec1 h2{ display: flex; margin: 0 auto; width: 400px; height: 104px; border-radius: 0 0 25px 25px; background: #eb0000; color: #fff; font-weight: 700; font-size: 4rem; justify-content: center; align-items: center;}
.sec1 h2 span{ font-weight: 700; font-size: 6.4rem; font-family: "Plus Jakarta Sans", sans-serif;}
.sec1 h2 i{ padding: 0 .25em;}
.sec1 h2 i img{ width: auto; height: 86.4687px;}

@media screen and (max-width: 768px){
    .sec1 h2{ width: 44.44444444vw; height: 11.55555556vw; border-radius: 0 0 2.222222222vw 2.222222222vw; font-size: 4.444444444vw;}
    .sec1 h2 span{ font-size: 7.111111111vw;}
    .sec1 h2 i{ padding: 0 .25em;}
    .sec1 h2 i img{ width: auto; height: 9.605422222vw;}
}

.list-thumb{ display: flex; margin: 35px 0 0; justify-content: center;}
.list-thumb > li{ width: 430px; opacity: 0;}
.list-thumb figure{ position: relative; margin: 0 auto; width: 250px;}
.list-thumb figcaption{ position: absolute; bottom: -37px; left: 50%; display: flex; width: 75px; height: 75px; border-radius: 100%; background: #eb0000; color: #fff; font-weight: 900; font-size: 5rem; font-family: "Plus Jakarta Sans", sans-serif; transform: translate(-50%,0); justify-content: center; align-items: center;}
.list-thumb p{ margin: 50px 0 0; font-size: 4rem; line-height: 1.4; font-feature-settings: "palt" 1;}

@media screen and (max-width: 768px){
    .list-thumb{ position: relative; flex-direction: column; margin: 6.222222222vw 0 0; padding: 0 1px 0 9.955555556vw; text-align: left;}
    .list-thumb:after{ position: absolute; top: -16vw; left: 13.33333333vw; z-index: -1; width: 1px; height: calc(100% + 16vw + 5.333333333vw); background: #fff; content: "";}
    .list-thumb > li{ position: relative; display: flex; flex-direction: row-reverse; width: 100%; justify-content: space-between;}
    .list-thumb > li + li{ margin: 3.555555556vw 0 0;}
    .list-thumb figure{ position: static; margin: 0; width: 17.77777778vw;}
    .list-thumb figcaption{ top: -.25vw; bottom: auto; left: 0; width: 6.666666667vw; height: 6.666666667vw; border: 1px solid #fff; font-size: 4.444444444vw; transform: none;}
    .list-thumb p{ margin: 0; padding: 0 0 0 8.2vw; width: calc(100% - 17.77777778vw); font-weight: 700; font-size: 4.888888889vw; line-height: 1.285714286;}
}

.box{ margin: 100px 0 0; padding: 60px 0 100px; border-radius: 25px 25px 0 0; background: #fff; text-align: left;}
.box h3{ position: relative; display: flex; flex-direction: column; margin: 100px auto 0; padding: 0 0 0 150px; width: 900px; font-size: 5rem; align-items: flex-start;}
.box > h3:first-child{ margin: 0 auto;}
.box h3 i{ position: absolute; top: 0; left: 35px; display: flex; padding: 0 0 .05em; width: 75px; height: 75px; border-radius: 100%; background: #eb0000; color: #fff; font-weight: 900; font-style: normal; font-family: "Plus Jakarta Sans", sans-serif; justify-content: center; align-items: center;}
.box h3 span{ position: relative; width: 750px; color: #002f51; white-space: nowrap; font-weight: 700; font-feature-settings: "palt" 1;}
.box h3 span + span{ margin: 50px 0 0;}
.box h3 span:after{ position: absolute; bottom: -20px; left: 0; width: 0; height: 10px; border-radius: 5px; background: #eb0000; content: "";}
.box h3.is-animate span:after{ animation: slidein 1s ease .25s forwards;}
.box figure{ margin: 100px 0 0; opacity: 0;}
.box h4{ margin: 40px auto 0; width: 900px; color: #002f51; white-space: nowrap; font-weight: 900; font-size: 2.5rem; font-feature-settings: "palt" 1;}
.box p{ margin: 1em auto 0; width: 900px; color: #000; text-align: justify; line-height: 2; font-feature-settings: "palt" 1;}

@media screen and (max-width: 768px){
    .box{ margin: 7.111111111vw 0 0; padding: 7.555555556vw 9.777777778vw 10.22222222vw; border-radius: 0;}
    .box h3{ margin: 8.888888889vw 0 0; padding: 0 0 0 8.444444444vw; width: 100%; font-size: 4.444444444vw;}
    .box h3 i{ left: 0; width: 6.666666667vw; height: 6.666666667vw;}
    .box h3 span{ width: 100%;}
    .box h3 span + span{ margin: 4.444444444vw 0 0;}
    .box h3 span:after{ bottom: -1.777777778vw; height: 1.111111111vw; border-radius: 0.555555556vw;}
    .box figure{ margin: 5.333333333vw calc(50% - 50vw) 0;}
    .box h4{ margin: 5.777777778vw 0 0; width: 100%; font-size: 3.555555556vw; line-height: 1.5;}
    .box p{ margin: .5em 0 0; width: 100%; line-height: 1.75;}
}

.box .qa{ position: relative; margin: 60px 0 0; font-weight: 900; font-size: 4rem;}
.box .qa:after{ position: absolute; top: 50%; right: 40px; width: 125px; height: 125px; background: url("/campaign/2026/begin_vasic/0427/images/pt_qa.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
.box h3 + .qa{ margin: 80px 0 0;}
.box .qa dt{ display: flex; padding: 0 0 0 185px; align-items: center;}
.box .qa dd{ display: flex; flex-direction: row-reverse; margin: 15px 0 0; padding: 0 150px 0 0; align-items: center;}
.box .qa i{ display: flex; padding: 0 0 .05em; width: 75px; height: 75px; border-radius: 100%; background: #002f51; color: #fff; font-weight: 900; font-style: normal; font-size: 5rem; font-family: "Plus Jakarta Sans", sans-serif; justify-content: center; align-items: center;}
.box .qa dd i{ background: #eb0000;}
.box .qa div{ position: relative; display: flex; margin: 0 0 0 20px; padding: 0 1.5em; width: auto; height: 150px; border-radius: 75px; background: #002f51; color: #fff; white-space: nowrap; font-weight: 900; font-size: 4rem; line-height: 1.5; opacity: 0; justify-content: center; align-items: center; font-feature-settings: "palt" 1;}
.box .qa dd div{ margin: 0 20px 0 0; background: #eb0000;}
.box .qa div:after{ position: absolute; bottom: 20px; left: -20px; width: 57.1815px; height: 25.7687px; background: url("/campaign/2026/begin_vasic/0427/images/arrow1.png") no-repeat center / contain; content: "";}
.box .qa dd div:after{ right: -20px; left: auto; background: url("/campaign/2026/begin_vasic/0427/images/arrow2.png") no-repeat center / contain;}
.box .qa dt.is-animate div{ animation: .6s slide-skew1 .3s ease-in-out forwards;}
.box .qa dd.is-animate div{ animation: .6s slide-skew2 1.2s ease-in-out forwards;}

@keyframes slide-skew1 {
    0% { opacity: 0; transform: translate(-180px,30px);}
    100% { transform: translate(0,0) rotate(0);}
    20%,100% { opacity: 1;}
}

@keyframes slide-skew2 {
    0% { opacity: 0; transform: translate(180px,30px);}
    100% { transform: translate(0,0) rotate(0);}
    20%,100% { opacity: 1;}
}

@media screen and (max-width: 768px){
    .box .qa{ margin: 5.333333333vw calc(50% - 50vw) 0; font-size: 3.555555556vw;}
    .box .qa:after{ right: 3.466666667vw; width: 11.11111111vw; height: 11.11111111vw; transform: translate(0,-65%);}
    .box h3 + .qa{ margin: 6.444444444vw calc(50% - 50vw) 0;}
    .box .qa dt{ padding: 0 0 0 10vw;}
    .box .qa dd{ margin: 1.333333333vw 0 0; padding: 0 10vw 0 0;}
    .box .qa i{ width: 6.666666667vw; height: 6.666666667vw; font-size: 4.444444444vw;}
    .box .qa div{ margin: 0 0 0 1.777777778vw; padding: 0 1.5em; height: 13.33333333vw; border-radius: 6.666666667vw; font-size: 3.555555556vw;}
    .box .qa dd div{ margin: 0 1.777777778vw 0 0;}
    .box .qa div:after{ bottom: 2.133333333vw; left: -2.133333333vw; width: 5.0828vw; height: 2.290551111vw;}
    .box .qa dd div:after{ right: -2.133333333vw;}
    .box .qa dt.is-animate div{ animation: .6s slide-skew1-sp .3s ease-in-out forwards;}
    .box .qa dd.is-animate div{ animation: .6s slide-skew2-sp 1.2s ease-in-out forwards;}
}

@keyframes slide-skew1-sp {
    0% { opacity: 0; transform: translate(-25vw,2.666666667vw);}
    100% { transform: translate(0,0) rotate(0);}
    20%,100% { opacity: 1;}
}

@keyframes slide-skew2-sp {
    0% { opacity: 0; transform: translate(25vw,2.666666667vw);}
    100% { transform: translate(0,0) rotate(0);}
    20%,100% { opacity: 1;}
}

.box .img3{ position: relative;}
.box .img3 .sub{ position: absolute; right: -60px; bottom: -104px; width: 487.9437px; filter: drop-shadow(10px 10px 2px rgba(0,0,0,.5));}

@media screen and (max-width: 768px){
    .box .img3 .sub{ right: -4.922195556vw; bottom: -16.03795556vw; width: 43.37277333vw; filter: drop-shadow(1.244444444vw 1.244444444vw 0.355555556vw rgba(0,0,0,.5));}
}

.item{ margin: 100px 0 0;}
h3 + .item{ margin: 40px 0 0;}
.item figure{ opacity: 0;}
.item dl{ margin: 35px 0 0; text-align: center; font-size: 3.2rem;}
.item dt{ font-weight: 700; line-height: 1.5;}
.item dd{ margin: 20px 0 0; font-family: "Plus Jakarta Sans", sans-serif;}
.item p{ margin: 40px auto 0; width: 900px; text-align: justify; line-height: 2;}
.item .btn{ margin: 40px 0 0;}
.item .btn a{ display: flex; margin: 0 auto; width: 450px; height: 50px; border: 2px solid #eb0000; border-radius: 25px; color: #eb0000; font-weight: 800; font-size: 2rem; font-family: "Plus Jakarta Sans", sans-serif; justify-content: center; align-items: center;}
.item .btn a:hover{ background: #eb0000; color: #fff;}

@media screen and (max-width: 768px){
    .item{ margin: 0; padding: 0 9.777777778vw 8.888888889vw;}
    h3 + .item{ margin: 4vw 0 0;}
    .item figure{ margin: 0 -9.777777778vw; width: auto;}
    .item dl{ margin: 3.555555556vw 0 0; font-size: 3.555555556vw;}
    .item dt{ white-space: nowrap;}
    .item dd{ margin: 1em 0 0;}
    .item p{ margin: 5.333333333vw 0 0; width: 100%; line-height: 1.75;}
    .item .btn{ margin: 5.777777778vw 0 0;}
    .item .btn a{ width: 100%; height: 8.888888889vw; border-radius: 4.444444444vw; font-size: 3.555555556vw;}
}

.box2{ margin: 100px 0 0; padding: 0; background: none; color: #fff;}
.box2 .tl2{ display: flex; flex-direction: column; align-items: center; font-feature-settings: "palt" 1;}
.box2 .tl2 .line2{ display: flex; width: 100%; height: 100px; background: #eb0000; text-align: center; align-items: center; justify-content: center;}
.box2 .tl2 .line2 + .line2{ margin: 20px 0 0;}
.box2 .tl2 .line2 span{ display: flex; color: #fff; font-weight: 400; font-size: 5.6rem; opacity: 0; align-items: center; justify-content: center;}
.box2 .tl2 .line2 span.is-animate{ animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) .5s forwards;}
.box2 .tl2 > .line2:nth-child(even) span.is-animate{ animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) .5s forwards;}
.box2 .tl2 .line2 span i{ margin: 0 .3em 0 0; width: 110px;}
.box2 p{ margin: 60px auto 0; color: #fff; text-align: justify;}
.box2 figure ul{ display: flex; justify-content: space-between;}
.box2 figure ul > li{ width: 580px;}

@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-180px);}
    100% { transform: translateX(0);}
    40%,100% { opacity: 1;}
}

@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(180px);}
    100% { transform: translateX(0);}
    40%,100% { opacity: 1;}
}

@media screen and (max-width: 768px){
    .box2{ margin: 0; padding: 0 9.777777778vw 10.22222222vw;}
    .box2 .tl2{ margin: 0 calc(50% - 50vw); padding: 0;}
    .box2 .tl2 .line2{ height: 10.66666667vw; font-size: 6.222222222vw;}
    .box2 .tl2 .line2 + .line2{ margin: 3.555555556vw 0 0;}
    .box2 .tl2 .line2 span{white-space: nowrap; font-size: 4.888888889vw; font-feature-settings: "palt" 1; }
    .box2 .tl2 .line2 span i{ margin: 0 .1em 0 0; width: 11.11111111vw;}
    .box2 p{ margin: 5.333333333vw 0 0;}
    .box2 figure ul{ display: flex; justify-content: space-between;}
    .box2 figure ul > li{ width: 48.22222222vw;}
}


/* --------------------------------------------------
 aside
--------------------------------------------------- */
aside{ overflow: hidden; margin: 0 calc(50% - 50vw); padding: 100px 0 150px; width: 100vw;}
aside h2{ display: flex; justify-content: center;}
aside h2 span{ display: flex; width: 23.4375vw; height: 2.6041vw; border-radius: 2.6041vw; background: #fff; color: #002f51; font-weight: 800; font-size: 1.0416vw; font-family: "Plus Jakarta Sans", sans-serif; align-items: center; justify-content: center;}
aside ul{ display: flex; margin: 2.0833vw 0 0; padding: 0 13.802vw; flex-wrap: wrap; justify-content: center;}
aside ul > li{ padding: 3.125vw 1.302vw 0; width: 20%;}
aside ul a{ display: block; color: #fff;}
aside ul a:hover{ color: #fff;}
aside ul time{ display: inline-block; margin: 1.0416vw 0 0; border-bottom: 1px solid; font-weight: 800; font-style: italic; font-size: 1.0416vw; font-family: 'Plus Jakarta Sans', sans-serif;}
aside ul p{ position: relative; margin: 1.5625vw 0 0; white-space: nowrap; font-weight: 700; font-size: .7812vw; line-height: 2; font-feature-settings: "palt" 1;}
aside ul p span{ position: absolute; top: -1.2vw; left: 0; color: #eb0000; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif;}
aside .more{ display: flex; padding: 5.2083vw 0 0; justify-content: center;}
aside .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;}
aside .more.open{ display: none;}
aside .drop{ display: none;}
aside .drop ul{ margin: 0; justify-content: flex-start;}

@media screen and (max-width: 768px){
    aside{ margin: 0; padding: 8.888888889vw 9.777777778vw 0; width: 100%;}
    aside h2 span{ width: 100%; height: 8.888888889vw; border-radius: 4.444444444vw; font-size: 3.5555vw;}
    aside ul{ flex-direction: column; margin: 3.5555vw 0 0; padding: 0;}
    aside ul > li{ padding: 5.3333vw 0 0; width: 100%;}
    aside ul a{ display: flex; justify-content: space-between;}
    aside ul a figure{ width: 50%;}
    aside ul a .detail{ padding: 1.4222vw 0 0 3.1111vw; width: 50%;}
    aside ul time{ margin: 0; font-size: 3.5555vw;}
    aside ul p{ margin: 5.3333vw -9.777vw 0 0; font-size: 2.6666vw; line-height: 1.75;}
    aside ul p span{ top: -3.8vw;}
    aside .more{ padding: 5.3333vw 0 0;}
    aside .more span{ width: 100%; height: 8.8888vw; border-radius: 8.8888vw; font-size: 3.5555vw;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ margin: 0 calc(50% - 50vw); padding: 0 0 5.2083vw; width: 100vw; 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;}
}