@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&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}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:bolder}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;color: #333;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{ -webkit-overflow-scrolling: touch; width: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 140px;}
body{
    background: #fff;
    color: #333;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;

    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
body.active{ overflow-y: hidden;}
img{ width: 100%; vertical-align: bottom;}
video{ max-width: 100%; vertical-align: bottom;}
a{ color: #333; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}
#wrap{ overflow: hidden;}

@media screen and (max-width: 768px){
    html{ scroll-padding-top: 18.66666667vw;}
    body{ font-size: 3.2vw;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: relative; display: flex; padding: 15px 50px 0; height: 140px; justify-content: space-between;}
.header:after{ position: absolute; top: -297px; left: -96px; z-index: -1; width: 446px; height: 436px; background: url("/cms/wp-content/themes/aeco/assets/img/common/blt.svg") no-repeat center / contain; content: "";}
.top .header:after{ top: -177px; left: -33px; width: 448px; height: 438px;}

.header h1{ position: relative;}
.header h1 a{ display: block; width: 140px;}
.top .header h1 a{ width: 14vw;}
.header h1 img{ width: 100%;}

.header .switch{ display: none;}

.header nav{ position: relative;}
.header nav > ul{ display: flex; font-weight: 500; align-items: center;}
.header nav > ul > li{ padding: 0 0 0 28px;}
.header nav > ul > li.btn{ padding: 0 0 0 50px;}
.header nav > ul > li > a,
.header nav > ul > li > div{ display: block; padding: 0 0 .5em; border-bottom: 2px dashed; color: #3e4298; cursor: pointer;}
.header nav > ul > li > a:hover,
.header nav > ul > li > div:hover{ border-bottom: 2px solid;}
.header nav > ul > li.btn a{ position: relative; display: flex; padding: 0 0 0 20px; width: 280px; height: 60px; border: 2px solid; border-radius: 30px; font-weight: 700; font-size: 1.8rem; align-items: center;}
.header nav > ul > li.btn a:after{ position: absolute; top: 50%; right: 15px; width: 28px; height: 28px; background: url("/cms/wp-content/themes/aeco/assets/img/common/ico.svg") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

.header nav > ul > li.drop{ position: relative;}
.header nav > ul > li.drop:hover > div{ border-bottom: 2px solid;}
.header nav > ul > li.drop ul{ position: absolute; top: 100%; left: 50%; z-index: 10; display: flex; visibility: hidden; padding: 2em 0 0; font-size: 1.4rem; opacity: 0; transition: all .2s ease; transform: translate(-50%,0);}
.header nav > ul > li.drop:hover ul{ z-index: 20; visibility: visible; opacity: 1;}
.header nav > ul > li.drop ul > li{ padding: 0 1em;}
.header nav > ul > li.drop ul > li a{ display: block; padding: 0 0 .5em; border-bottom: 2px dashed; color: #3e4298; white-space: nowrap;}
.header nav > ul > li.drop ul > li a:hover{ border-bottom: 2px solid;}

@media screen and (max-width: 768px){
    .header{ display: block; padding: 1.733333333vw 5.066666667vw 0; height: 18.66666667vw;}
    .header:after{ top: -46.8vw; left: -18.66666667vw; width: 74.46606667vw; height: 72.79642667vw;}
    .top .header:after{ top: -46.8vw; left: -18.66666667vw; width: 74.46606667vw; height: 72.79642667vw;}
    
    .header h1 a{ width: 22vw;}
    .top .header h1 a{ width: 22vw;}
    
    .header nav{ position: fixed; top: 0; left: 0; z-index: 10; visibility: hidden; padding: 10.66666667vw; width: 100%; height: 100%; background: #3e4298; color: #fff; opacity: 0; transform: translateY(-100%);}
    .header nav.open{ visibility: visible; opacity: 1; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translateY(0);}
    
    .header .switch{ position: fixed; top: 3.333333333vw; right: 3.333333333vw; z-index: 110; display: block; width: 7.466666667vw;}
    .drawer-hamburger{ position: relative; width: 100%; height: 5.866666667vw; outline: 0; border: 0; background: transparent; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate3d(0, 0, 0); justify-content: center; align-items: center;}
    .drawer-hamburger:after{ position: absolute; top: -6.462546667vw; right: -5.662546667vw; z-index: -1; width: 17.33333333vw; height: 17.33333333vw; border-radius: 100%; background: #3e4298; content: "";}
    .drawer-hamburger:hover{ background: transparent; cursor: pointer;}
    .drawer-hamburger-icon{ position: relative; display: block;}
    .drawer-hamburger-icon,
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ position: absolute; right: 0; width: 7.466666667vw; height: 0.8vw; background: #fff; content: ''; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
    .drawer-hamburger-icon:before{ top: -2.4vw;}
    .drawer-hamburger-icon:after{ top: 2.4vw;}
    .drawer-hamburger.open .drawer-hamburger-icon { background: transparent;}
    .drawer-hamburger.open .drawer-hamburger-icon:before,
    .drawer-hamburger.open .drawer-hamburger-icon:after{ top: 0;}
    .drawer-hamburger.open .drawer-hamburger-icon:before{ transform: rotate(45deg);}
    .drawer-hamburger.open .drawer-hamburger-icon:after { transform: rotate(-45deg);}
    
    .header nav > ul{ flex-direction: column; font-size: 3.733333333vw; align-items: flex-start;}
    .header nav > ul > li{ padding: 0; width: 100%;}
    .header nav > ul > li + li{ margin: 3em 0 0;}
    .header nav > ul > li.btn{ padding: 0;}
    .header nav > ul > li > a,
    .header nav > ul > li > div{ color: #fff;}
    .header nav > ul > li.btn a{ padding: 0 0 0 4vw; width: 56vw; height: 12vw; border-radius: 6vw; font-size: 3.6vw;}
    .header nav > ul > li.btn a:after{ right: 2.666666667vw; width: 5.6vw; height: 5.6vw;}

    .header nav > ul > li.drop:hover > div{ border-bottom: 0.533333333vw dashed;}
    .header nav > ul > li.drop ul{ position: relative; top: auto; left: auto; visibility: visible; padding: 0; font-size: 3.2vw; opacity: 1; transition: none; transform: none; flex-wrap: wrap;}
    .header nav > ul > li.drop ul > li{ padding: 1em 0 0; width: 50%;}
    .header nav > ul > li.drop ul > li a{ display: block; padding: 0; border-bottom: none; color: #fff; white-space: nowrap;}
    .header nav > ul > li.drop ul > li a:hover{ border-bottom: none;}
}


/* --------------------------------------------------
 main
--------------------------------------------------- */
.act{ opacity: 0;}
.is-active{ opacity: 1;}

/* top
--------------------------------------------------- */
.top main{ margin: 0 auto; padding: 0 0 8.571428571vw; width: 71.42857143vw;}
.top .sec1,
.top .sec2{ position: relative;}
.top h2{ position: relative; padding: 4.285714286vw 0 0; letter-spacing: .1em; font-weight: 500; font-size: 2.285714286vw;}
.top h2:before{ position: absolute; top: 0; left: 0; width: 29.5vw; height: 0.357142857vw; background: url("/cms/wp-content/themes/aeco/assets/img/top/blt_ttl.png") no-repeat top left / contain; content: "";}
.top p{ margin: 4.285714286vw 0 0; font-size: 1.142857143vw; line-height: 1.75;}
.top .list{ margin: 4.285714286vw 0 0;}
.top .list > li + li{ margin: 2.142857143vw 0 0;}
.top .list a{ display: flex; color: #3e4298; font-weight: 500; font-size: 1.142857143vw; align-items: center;}
.top .list a i{ margin: 0 0 0 .25em; width: 2vw;}
.top .list-flex{ display: flex; margin: 4.285714286vw calc(50% - 50vw) 0; justify-content: center;}
.top .list-flex > li{ border-left: 1px solid #dcdce0;}
.top .list-flex > li:first-child{ border-left: none;}
.top .list-flex > li + li{ margin: 0;}
.top .list-flex a{ padding: .5em 1.5em; justify-content: center;}

@media screen and (max-width: 768px){
    .top main{ margin: 0; width: 100%;}
    .top h2{ padding: 8vw 0 0; text-align: center; font-size: 4.266666667vw;}
    .top h2:before{ left: 50%; width: 55.07377333vw; height: 0.682666667vw; background: url("/cms/wp-content/themes/aeco/assets/img/top/blt_ttl_sp.png") no-repeat center / contain; transform: translate(-50%,0);}
    .top p{ margin: 1.5em 0 0; font-size: 3.2vw;}
    .top .list{ margin: 0; padding: 4vw 0 0;}
    .top .list > li{ margin: 4vw 0 0;}
    .top .list > li + li{ margin: 4vw 0 0;}
    .top .list a{ font-size: 3.2vw; line-height: 1.5;}
    .top .list a i{ margin: 0 0 0 .5em; width: 5.65916vw;}
    .top .list-flex{ padding: 5.866666667vw 0 0; flex-wrap: wrap; justify-content: flex-start;}
    .top .list-flex > li{ margin: 0; width: 50%; border-right: 1px solid #dcdce0; border-bottom: 1px solid #dcdce0; border-left: none;}
    .top .list-flex > li + li{ margin: 0;}
    .top .list-flex > li.bottom{ border-bottom: none;}
    .top .list-flex > li:nth-child(even){ border-right: none;}
    .top .list-flex a{display: flex;  padding: 1em 0; height: 100%; align-items: center;}
}

/* vw = X / 1400 * 100 */
.top .sec1{ position: relative; display: flex; margin: 0 calc(50% - 50vw); padding: 0 3.571428571vw 0 0; justify-content: flex-end;}
.top .sec1 figure{ position: relative; width: 78.57142857vw;}
.top .sec1 figcaption{ position: absolute; top: 6.071428571vw; left: 5vw; color: #fff; letter-spacing: .1em; font-weight: 700; font-size: 1.714285714vw; line-height: 2.041666667;}
.top .sec1 .view{ position: absolute; right: 3.571428571vw; bottom: 3.928571429vw; width: 205px; cursor: pointer;}
.top .sec1 .bg{ position: absolute; bottom: 8.90625vw; left: -4.296875vw; z-index: -1; width: 32.03125vw;}
.top .sec1 .bg svg{ width: 100%;}
.remodal{ width: 60vw; border: 2px solid #fff;}
.video-wrap{ position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; height: 0;}
.video-wrap1{ border-radius: 3.125vw;}
.video-wrap video,
.video-wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 768px){
    .top .sec1{ display: block; margin: 0; padding: 0 3.333333333vw 13.33333333vw;}
    .top .sec1 figure{ width: 100%;}
    .top .sec1 figcaption{ position: relative; top: auto; left: auto; margin: 5.333333333vw 0 0; padding: 0 0 0 2vw; color: #3e4298; letter-spacing: .05em; font-size: 3.2vw; line-height: 2;}
    .top .sec1 .view{ top: 33vw; right: 2.666666667vw; bottom: auto; width: 30.66666667vw;}
    .top .sec1 .bg{ right: -16.26666667vw; bottom: 13.33333333vw; left: auto; width: 54.77589333vw;}
    .remodal{ width: 90vw;}
    .video-wrap1{ border-radius: 4vw;}
}

.sec2{ margin: 0 calc(50% - 50vw);}
.sec2 .list-cnt > li{ display: flex; flex-direction: row-reverse; margin: 8.571428571vw 0 0; flex-wrap: wrap; align-items: center;}
.sec2 .list-cnt > li:nth-child(odd){ flex-direction: row;}
.sec2 .list-cnt > li figure{ overflow: hidden; width: 42.85714286vw; border-radius: 4.285714286vw 0 0 4.285714286vw;}
.sec2 .list-cnt > li:nth-child(odd) figure{ border-radius: 0 4.285714286vw 4.285714286vw 0;}
.sec2 .list-cnt > li .detail{ padding: 0 5.714285714vw 0 0; width: 42.5vw;}
.sec2 .list-cnt > li:nth-child(odd) .detail{ padding: 0 0 0 5.714285714vw;}
.sec2 .list-cnt > li .detail p span{ display: none;}
.sec2 .list-cnt > li .snav{ width: 100%;}

@media screen and (max-width: 768px){
    .sec2{ margin: 0;}
    .sec2 .list-cnt > li{ flex-direction: column; margin: 12vw 0 0; align-items: flex-end;}
    .sec2 .list-cnt > li:first-child{ margin: 0;}
    .sec2 .list-cnt > li:nth-child(odd){ flex-direction: column; align-items: flex-start;}
    .sec2 .list-cnt > li figure{ width: 92vw; border-radius: 5.333333333vw 0 0 5.333333333vw;}
    .sec2 .list-cnt > li:nth-child(odd) figure{ border-radius: 0 5.333333333vw 5.333333333vw 0;}
    .sec2 .list-cnt > li .detail{ padding: 8vw 8vw 0; width: 100%;}
    .sec2 .list-cnt > li:nth-child(odd) .detail{ padding: 8vw 8vw 0;}
    .sec2 .list-cnt > li .detail p span{ display: inline;}
    .sec2 .list-cnt > li .snav{ padding: 0 8vw; width: 100%;}
}

.sec2 .list-cnt .detail2{ margin: 0 auto; width: 71.42857143vw;}
.sec2 .list-cnt .detail2 h2{ padding: 0;}
.sec2 .list-cnt .detail2 h2:before{ content: none;}

@media screen and (max-width: 768px){
    .sec2 .list-cnt .detail2{ margin: 0; padding: 0 8vw; width: 100%;}
}

.sec2 .list-cnt .bg-wrap{ margin: 4.285714286vw 0 0; padding: 8.571428571vw 0; width: 100%; background: #f4f4f9;}

@media screen and (max-width: 768px){
    .sec2 .list-cnt .bg-wrap{ margin: 6vw 0 0; padding: 12vw 0;}
}

.sec2 .list-cnt .list-video{ display: flex; margin: 4.285714286vw 0 0; justify-content: space-between;}
.sec2 .list-cnt .list-video > li{ width: 100%;}
.sec2 .list-cnt .list-video figure{ display: flex; overflow: visible; width: 100%; border-radius: 0; justify-content: space-between; align-items: flex-start;}
.sec2 .list-cnt .list-video a{ position: relative; display: block; padding: 0.285714286vw; width: 50%; background: #fff; box-shadow: 0.285714286vw 0.285714286vw 0.285714286vw rgba(0,0,0,.1); cursor: pointer;}
.sec2 .list-cnt .list-video a:after{ position: absolute; top: 50%; left: 50%; width: 2.857142857vw; height: 2.857142857vw; background: url("/cms/wp-content/themes/aeco/assets/img/common/ico_play.svg") no-repeat center / contain; content: ""; transition: transform .5s ease; transform: translate(-50%,-50%) scale(1);}
.sec2 .list-cnt .list-video a:hover:after{ transform: translate(-50%,-50%) scale(1.5);}
.sec2 .list-cnt .list-video figure figcaption{ width: calc(50% - 3em); font-size: 1.142857143vw; line-height: 1.75;}

@media screen and (max-width: 768px){
    .sec2 .list-cnt .list-video{ display: block; /*margin: 6vw calc(50% - 50vw) 0; width: 100vw;*/ margin: 6vw 0 0; opacity: 0; transition: opacity 1s ease;}
    .sec2 .list-cnt .list-video.slick-initialized{ opacity: 1;}
    .sec2 .list-cnt .list-video .slick-slide{ /*padding: 0 1.866666667vw; width: 70vw;*/ width: 84vw;}
    .sec2 .list-cnt .list-video figure{ flex-direction: column; justify-content: flex-start; align-items: center;}
    .sec2 .list-cnt .list-video a{ padding: 1.066666667vw; width: 100%; box-shadow: 1.066666667vw 1.066666667vw 1.066666667vw rgba(0,0,0,.1);}
    .sec2 .list-cnt .list-video a:after{ width: 10.66666667vw; height: 10.66666667vw;}
    .sec2 .list-cnt .list-video figure figcaption{ padding: 2em 0 0; width: 100%; font-size: 3.2vw;}
}

/*
.top .sec2{ position: relative; margin: 0 calc(50% - 50vw); padding: 5.714285714vw calc(50vw - 50%) 10vw;}
.top .sec2 p{ width: 42.5vw;}
.top .sec2 .bg{ position: absolute; top: 17.1875vw; right: -11.09375vw; width: 56.25vw;}
.top .sec2 .bg svg{ width: 100%;}

@media screen and (max-width: 768px){
    .top .sec2{ padding: 0 5.333333333vw 5.333333333vw;}
    .top .sec2 p{ width: 100%;}
    .top .sec2 .bg{ position: relative; top: auto; right: auto; margin: 4vw 0 0; width: 100%;}
}

.top .sec3{ margin: 0 calc(50% - 50vw); padding: 8.571428571vw calc(50vw - 50%) 4.25vw; min-height: 35.71428571vw; background: #fdfdf3;}
.top .sec3 figure{ position: absolute; bottom: -3.571428571vw; left: 0; width: 42.85714286vw;}
.top .sec3 h2{ margin: 0 0 0 34.28571429vw;}
.top .sec3 p{ margin: 4.285714286vw 0 0 34.28571429vw;}
.top .sec3 .list-flex{ margin: 4.285714286vw 0 0 34.28571429vw; flex-wrap: wrap;}
.top .sec3 .list-flex > li{ width: 50%; border-left: none; border-top: 1px solid #dcdce0; border-right: 1px solid #dcdce0;}
.top .sec3 .list-flex > li:first-child,
.top .sec3 .list-flex > li:nth-child(2){ border-top: none;}
.top .sec3 .list-flex > li:nth-child(even){ border-right: none;}
.top .sec3 .list-flex a{ padding: 1em 0;}

@media screen and (max-width: 768px){
    .top .sec3{ margin: 0; padding: 0 5.333333333vw 10.66666667vw; min-height: 0;}
    .top .sec3 figure{ position: relative; bottom: auto; left: auto; margin: 0 0 0 -5.333333333vw; width: calc(100vw - 5.333333333vw);}
    .top .sec3 h2{ margin: 9.333333333vw 0 0;}
    .top .sec3 p{ margin: 1.5em 0 0; text-align: center;}
    .top .sec3 .list{ margin: 0;}
    .top .sec3 .list > li{ display: flex; justify-content: center;}
}

.top .sec4{ margin: 0 calc(50% - 50vw); padding: 13.57142857vw calc(50vw - 50%) 7.857142857vw;}
.top .sec4 .img1{ position: absolute; top: 9.285714286vw; right: 0; width: 42.85714286vw;}
.top .sec4 .img2{ position: absolute; bottom: 5.714285714vw; left: 0; width: 22.71428571vw;}
.top .sec4 .list{ margin: 4.285714286vw 0 0 12.5vw;}

@media screen and (max-width: 768px){
    .top .sec4{ margin: 0; padding: 13.33333333vw 5.333333333vw;}
    .top .sec4 .img1{ position: relative; top: auto; right: auto; margin: 8vw -5.333333333vw 0 auto; width: calc(100vw - 5.333333333vw);}
    .top .sec4 .img2{ bottom: 13.33333333vw; left: 0; width: 42.44897333vw;}
    .top .sec4 .list{ margin: 0 0 0 auto; width: 50%;}
}
*/

/* page
--------------------------------------------------- */
.bread{ margin: 0 auto; width: 1000px;}
.bread ul{ display: flex; font-size: 1.4rem;}
.bread ul > li{ position: relative; margin: 0 0 0 36px;}
.bread ul > li:before{ position: absolute; top: 50%; left: -18px; content: ">"; transform: translate(0,-50%);}
.bread ul > li:first-child{ margin: 0;}
.bread ul > li:first-child:before{ content: none;}

@media screen and (max-width: 768px){
    .bread{ display: none;}
}

article{ margin: 70px auto 0; padding: 0 0 80px; width: 1000px;}
article header{ position: relative;}
article header h1{ position: relative; color: #3e4298; letter-spacing: .1em; font-weight: 500; font-size: 3.2rem;}
article header h1:before{ position: absolute; top: 50%; left: calc(-50vw + 500px); width: calc(50vw - 510px); border-top: 2px dashed #3e4298; content: ""; transform: translate(0,-50%);}
article header .bg{ position: absolute; top: -70px; right: -210px; z-index: -1; width: 410px;}
article header .bg svg{ width: 100%;}

@media screen and (max-width: 768px){
    article{ margin: 16vw 0 0; padding: 0 5.333333333vw 13.33333333vw; width: 100%;}
    article header h1{ font-size: 5.333333333vw;}
    article header h1:before{ content: none;}
    article header .bg{ top: -16vw; right: -12vw; width: 54.77589333vw;}
}

.page2 article header .sub{ position: relative; display: flex; width: 160px; height: 34px; border: 2px solid; border-radius: 17px; color: #3e4298; letter-spacing: .1em; font-weight: 500; font-size: 1.6rem; justify-content: center; align-items: center;}
.page2 article header .sub:before{ position: absolute; top: 50%; left: calc(-50vw + 500px); width: calc(50vw - 510px); border-top: 2px dashed #3e4298; content: ""; transform: translate(0,-50%);}
.page2 article header h1{ margin: 20px 0 0; color: #3e4298; letter-spacing: .1em; font-weight: 500; font-size: 3.2rem;}
.page2 article header h1:before{ content: none;}

@media screen and (max-width: 768px){
    .page2 article header .sub{ width: 32vw; height: 6.666666667vw; border-radius: 3.333333333vw; font-size: 3.2vw;}
    .page2 article header .sub:before{ content: none;}
    .page2 article header h1{ margin: 2vw 0 0; font-size: 5.333333333vw;}
    .page2 article header h1:before{ content: none;}
}

.content h2{ margin: 120px 0 0; letter-spacing: .1em; font-weight: 500; font-size: 2.4rem;}
.content > h2:first-child{ margin: 60px 0 0;}
.content h2 span{ position: relative; display: inline-block; padding: 0 30px; height: 74px; line-height: 74px;}
.content h2 span:before,
.content h2 span:after{ position: absolute; top: 0; width: 15px; height: 74px; background: url("/cms/wp-content/themes/aeco/assets/img/common/bg_tl.svg") no-repeat center / contain; content: "";}
.content h2 span:before{ left: 0;}
.content h2 span:after{ right: 0; transform: rotate(-180deg);}
.content h3{ margin: 100px 0 0; letter-spacing: .1em; font-weight: 500; font-size: 2rem;}
.content h3 span{ display: inline-block; padding: 0 0 .5em; border-bottom: 2px solid #3e4298;}
.content p{ margin: 2em 0 0; line-height: 1.75;}
.content p strong{ color: #3e4298; font-weight: 500; font-size: 2rem;}
.content p em{ color: #f00; font-style: normal;}
.content .btn{ margin: 60px 0 0;}
.content .btn a{ position: relative; display: flex; margin: 0 auto; padding: 0 0 0 20px; width: 280px; height: 60px; border: 2px solid; border-radius: 30px; color: #3e4298; font-weight: 700; font-size: 1.8rem; align-items: center;}
.content .btn2 a{ width: 280px;}
.content .btn a:after{ position: absolute; top: 50%; right: 15px; width: 28px; height: 28px; background: url("/cms/wp-content/themes/aeco/assets/img/common/ico.svg") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 768px){
    .content h2{ display: flex; margin: 20vw 0 0; font-size: 4.8vw; justify-content: center;}
    .content > h2:first-child,
    .content li h2{ margin: 10vw 0 0;}
    .content h2 span{ display: flex; padding: 0 6vw; height: 14.93333333vw; text-align: center; line-height: 1.5; justify-content: center; align-items: center;}
    .content h2 span:before,
    .content h2 span:after{ width: 3.066666667vw; height: 14.93333333vw; background: url("/cms/wp-content/themes/aeco/assets/img/common/bg_tl_sp.svg") no-repeat center / contain;}
    .content h3{ margin: 13.33333333vw 0 0; font-size: 4vw;}
    .content h3 span{ line-height: 1.5;}
    .content p{ margin: 2em 0 0;}
    .content p strong{ font-size: 3.2vw;}
    .content .btn{ margin: 8vw 0 0;}
    .content .btn a{ padding: 0 0 0 4vw; width: 56vw; height: 12vw; border-radius: 6vw; font-size: 3.6vw;}
    .content .btn2 a{ width: 56vw;}
    .content .btn a:after{ right: 2.666666667vw; width: 5.6vw; height: 5.6vw;}
}

.pager{ margin: 45px 0 0; text-align: center; line-height: 1;}
.pager span,
.pager a{ display: inline; margin: 0 3px; padding: 5px 10px; border: 1px solid; color: #3e4298; vertical-align: middle; text-align: center; text-decoration: none;}
.pager span{ border: 1px solid #3e4298; background: #3e4298; color: #fff;}
.pager .extend{ padding: 0; border: none; background: none; color: #dcdce0;}
.pager .last,
.pager .first{ margin: 0 13px; padding: 0; border: none;}
.pager .previouspostslink{ margin: 0 15px 0 0; padding: 0; border: none; font-size: 2rem;}
.pager .nextpostslink{ margin: 0 0 0 15px; padding: 0; border: none; font-size: 2rem;}

@media screen and (max-width: 480px){
    .pager{ margin: 10.66666667vw 0 0; font-size: 3.733333333vw;}
    .pager a{ margin: 0 0.8vw; padding: 1.066666667vw 2.133333333vw;}
    .pager .previouspostslink{ margin: 0 2.666666667vw 0 0; font-size: 4.8vw;}
    .pager .nextpostslink{ margin: 0 0 0 2.666666667vw; font-size: 4.8vw;}
}

article nav{ margin: 125px 0 0; color: #3e4298; text-align: center; font-weight: 500;}
article nav .tl{ display: flex; letter-spacing: .1em; font-size: 1.8rem; align-items: center;}
article nav .tl:before{ margin-right: 1em; height: 1px; background: #dcdce0; content: ""; flex-grow: 1;}
article nav .tl:after{ margin-left: 1em; height: 1px; background: #dcdce0; content: ""; flex-grow: 1;}
article nav ul{ display: flex; margin: 40px 0 0; justify-content: center;}
article nav ul > li{ padding: 0 2.5em; border-right: 1px solid #dcdce0;}
article nav ul > li:first-child{ border-left: 1px solid #dcdce0;}
article nav ul a{ display: flex; padding: 15px 0; color: #3e4298; justify-content: center; align-items: center;}
article nav ul i{ margin: 0 0 0 .25em; width: 28px;}

@media screen and (max-width: 768px){
    article nav{ margin: 13.33333333vw 0 0;}
    article nav .tl{ font-size: 4.266666667vw;}
    article nav ul{ margin: 5.333333333vw 0 0; border-left: none; flex-wrap: wrap; justify-content: flex-start;}
    article nav ul > li{ padding: 0; width: 50%; border-bottom: 1px solid #dcdce0;}
    article nav ul > li:first-child{ border-left: none;}
    article nav ul > li:nth-child(even){ border-right: none;}
    article nav ul > li.bottom{ border-bottom: none;}
    article nav ul a{ padding: 5.866666667vw 0; text-align: left;white-space: nowrap; font-size: 3.2vw; line-height: 1.25; }
    article nav ul i{ margin: 0 0 0 .5em; width: 5.65916vw;}
}

.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots{ bottom: -24px;}
.slick-dots li{ margin: 0 5px; width: 12px; height: 12px;}
.slick-dots li button{ padding: 0; width: 100%; height: 100%; border: none; background: none;}
.slick-dots li button:before{ display: block; width: 100%; height: 100%; border: 2px solid #3e4298; border-radius: 100%; content: ''; opacity: 1;}
.slick-dots li.slick-active button:before{ background: #3e4298; opacity: 1;}

@media screen and (max-width: 768px){
    .slick-dots{ bottom: -5.333333333vw;}
    .slick-dots li{ margin: 0 1.333333333vw; width: 2.666666667vw; height: 2.666666667vw;}
}

/* livecam
--------------------------------------------------- */
.list-livecam{ display: flex; margin: 0 -25px; text-align: center; font-size: 1.4rem; flex-wrap: wrap;}
.list-livecam > li{ padding: 70px 25px 0; width: calc(100% / 3);}
.list-livecam time{ position: relative; padding: 0 0 .5em; color: #3e4298;}
.list-livecam time:after{ position: absolute; top: -20px; left: 50%; z-index: -1; width: 188px; height: 188px; border: 2px solid #3e4298; border-radius: 100%; content: ""; transform: translate(-50%,0);}
.list-livecam figure{ overflow: hidden; border-radius: 20px;}

@media screen and (max-width: 768px){
    .list-livecam{ margin: 0 -1.333333333vw; font-size: 2.933333333vw;}
    .list-livecam > li{ padding: 9.333333333vw 1.333333333vw 0; width: 50%;}
    .list-livecam time:after{ top: -5vw; width: 37.69006667vw; height: 37.69006667vw;}
    .list-livecam figure{ border-radius: 2.666666667vw;}
}

/* news
--------------------------------------------------- */
.list-news{ padding: 30px 0 0;}
.list-news > li{ display: flex; padding: 30px 0 0; font-size: 1.6rem; line-height: 1.75; align-items: baseline; flex-wrap: wrap;}
.list-news time{ width: 110px; white-space: nowrap; letter-spacing: normal;}
.list-news .cat{ padding: 8px 0; width: 120px; border-radius: 4px; background: #3e4298; color: #fff; text-align: center; white-space: nowrap; font-weight: 700; font-size: 1.2rem; line-height: 1;}
.list-news .cat1{ background: #e22e7f;}
.list-news .cat2{ background: #3e4298;}
.list-news p{ margin: 0; padding: 0 0 0 15px; width: calc(100% - 230px);}
.list-news a:hover{ color: #3e4298;}

@media screen and (max-width: 768px){
    .list-news{ padding: .5em 0 0;}
    .list-news > li{ padding: 1.5em 0 0; font-size: 3.733333333vw;}
    .list-news time{ width: 25%; font-size: 3.733333333vw;}
    .list-news .cat{ padding: 1.6vw; width: auto; border-radius: 0.8vw; font-size: 2.666666667vw; line-height: 1;}
    .list-news p{ padding: .25em 0 0; width: 100%;}
}

.news-entry .head{ padding: 60px 0 30px; line-height: 1.5;}
.news-entry .head time{ display: block; padding: 0 0 .5em; font-size: 1.4rem;}
.news-entry .head time a{ font-weight: 700;}
.news-entry .head h2{ margin: 0; font-weight: 500; font-size: 2.4rem;}
.news-entry .detail{ line-height: 1.75;}
.news-entry .detail img{ max-width: 100%; width: auto; height: auto;}

@media screen and (max-width: 768px){
    .news-entry .head{ padding: 10.66666667vw 0 0;}
    .news-entry .head time{ font-size: 3.2vw;}
    .news-entry .head h2{ display: block; font-size: 5.333333333vw;}
    .news-entry .detail{ padding: 2em 0 0; line-height: 1.75;}
}


/* about
--------------------------------------------------- */
.sdgs{ display: flex; margin: 40px 0 0;}
.sdgs > figure{ width: 275px;}
.sdgs > ul{ margin: 0 0 0 40px;}
.sdgs > ul > li{ display: flex; align-items: center;}
.sdgs > ul > li + li{ margin: 2em 0 0;}
.sdgs > ul i{ width: 1em; color: #3e4298; text-align: center; font-weight: 700; font-style: normal; font-size: 5rem; font-family: "Roboto Condensed", sans-serif;}
.sdgs > ul span{ padding: 0 0 0 1em; line-height: 1.5;}

@media screen and (max-width: 768px){
    .sdgs{ flex-direction: column; margin: 6.666666667vw 0 0;}
    .sdgs > figure{ width: 100%;}
    .sdgs > ul{ margin: 0;}
    .sdgs > ul > li{ margin: 2em 0 0;}
    .sdgs > ul i{ font-size: 8vw;}
    .sdgs > ul span{ padding: 0 0 0 1em; line-height: 1.35;}
}

figure.wide{ position: relative; margin: 40px 0 0;}
figure.wide a{ display: block; padding: 40px; border: 2px solid #3e4298; border-radius: 10px; cursor: pointer;}
figure.wide figcaption{ position: absolute; top: 0; left: 0; padding: 1em; border-radius: 10px 0 10px 0; background: #3e4298; color: #fff; text-align: center; font-weight: 600; font-size: 80%;}

@media screen and (max-width: 768px){
    figure.wide{ margin: 4vw 0 0;}
    figure.wide a{ padding: 8vw 4vw 4vw; border: 2px solid #3e4298; border-radius: 2.666666667vw;}
    figure.wide figcaption{ padding: .75em; border-radius: 2.666666667vw 0 2.666666667vw 0;}
}

.lead-fig{ display: flex; flex-direction: column; align-items: center;}
.lead-fig p{ width: 100%;}
.lead-fig figure img{display: block;  margin: 0 auto; width: 65%;}

@media screen and (max-width: 768px){
    .lead-fig figure.wide{ margin: 2em 0 0;}
    .lead-fig figure img{ width: 100%;}
}

.list-gallery{ display: flex; overflow: hidden; margin: -45px -15px 0; padding: 60px 0 0; flex-wrap: wrap;}
.list-gallery > li{ padding: 45px 15px 0; width: calc(100% / 3);}
.list-gallery figcaption{ padding: 15px 0 0; text-align: center;}

@media screen and (max-width: 768px){
    .list-gallery{ margin: -20px -10px 0; padding: 40px 0 0;}
    .list-gallery > li{ padding: 20px 10px 0; width: 50%;}
    .list-gallery figcaption{ padding: 5px 0 0;}
}


/* business
--------------------------------------------------- */
.detail-wrap h3{ margin: 50px 0 0;}
.detail-wrap table{ margin: 25px 0 0; width: 100%; border-top: 1px solid #dcdce0; text-align: left; line-height: 1.75;}
.detail-wrap th{ padding: 1em; width: 25%; border-bottom: 1px solid #dcdce0; background: #f4f4f9;}
.detail-wrap td{ padding: 1em; width: 75%; border-bottom: 1px solid #dcdce0;}
.detail-wrap .cap{ margin: 1em 0 0; line-height: 1.75;}

@media screen and (max-width: 768px){
    .detail-wrap h3{ margin: 13.33333333vw 0 0;}
    .detail-wrap table{ margin: 6.666666667vw 0 0;}
    .detail-wrap th{ width: 35%; white-space: nowrap;}
    .detail-wrap td{ width: 65%;}
    .detail-wrap .cap{ margin: 1em 0 0; line-height: 1.75;}
}


/* company
--------------------------------------------------- */
.company h3{ margin: 50px 0 0;}
.company .box{ margin: 80px 0 0; padding: 40px; border: 2px solid #3e4298; border-radius: 20px; background: #f4f4f9;}
.company .box table{ margin: 0 auto; text-align: left; letter-spacing: .1em; line-height: 1.75;}
.company .box th{ padding: 1em 2em 1em 0; width: 25%; vertical-align: top;}
.company .box td{ padding: 1em 0 1em 2em; border-left: 1px solid #dcdce0; vertical-align: top;}

@media screen and (max-width: 768px){
    .company .box{ margin: 8vw 0 0; padding: 5.333333333vw 5.333333333vw 0; border-radius: 2.666666667vw;}
    .company .box table{ margin: 0;}
    .company .box th{ display: block; padding: 0; width: 100%; font-weight: 700;}
    .company .box td{ display: block; padding: 0 0 5.333333333vw; border-left: none;}
}

.auth{ display: flex; flex-direction: column; margin: 4em 0 0; line-height: 1.75; align-items: flex-end;}
.auth dd{ padding: .5em 0 0; width: 200px;}

@media screen and (max-width: 768px){
    .auth dd{ width: 50%;}
}

/* contact
--------------------------------------------------- */
.content .list-contact{ margin: 40px 0 0; padding: 60px 0; border: 2px solid #3e4298; border-radius: 20px; background: #f4f4f9;}

@media screen and (max-width: 768px){
    .content .list-contact{ margin: 8vw 0 0; padding: 5.333333333vw 0; border-radius: 2.666666667vw;}
}

.form-wrap{ margin: 40px 0 0; padding: 40px 60px 60px; border-radius: 20px; background: #f4f4f9; text-align: left;}
.form-wrap table{ width: 100%; line-height: 1.5;}
.form-wrap th{ padding: 1em 0; width: 30%; border-bottom: 1px solid #dcdce0; white-space: nowrap;}
.form-wrap td{ padding: 1em 0; width: 70%; border-bottom: 1px solid #dcdce0;}
.form-wrap td div + div{ margin: 1em 0 0;}
.form-wrap td .error{ display: block; color: #f00; font-size: 1.2rem;}
.form-wrap .submit{ display: flex; margin: 40px 0 0; justify-content: center;}
.form-wrap .submit input{ display: flex; margin: 0 .5em; width: 300px; height: 50px; border: none; background: #3e4298; color: #fff; font-weight: 600; cursor: pointer; justify-content: center; align-items: center;}
.form-wrap input[type="text"],
.form-wrap input[type="email"]{ padding: .5em; width: 100%; border: none; border: 1px solid #dcdce0; background: #fff;}
.form-wrap input.short,
.form-wrap input[type="tel"]{ width: 25%;}
.form-wrap textarea{ padding: .5em; width: 100%; height: 200px; border: none; border: 1px solid #dcdce0; background: #fff; line-height: 1.5;}
.form-wrap table em{ display: inline-block; margin: 0 0 0 .5em; color: #f00; font-style: normal;}

@media screen and (max-width: 768px){
    .form-wrap{ margin: 8vw 0 0; padding: 5.333333333vw; border-radius: 2.666666667vw;}
    .form-wrap th{ display: block; padding: 1em 0 .5em; width: 100%; border-bottom: none;}
    .form-wrap td{ display: block; padding: 0 0 1em; width: 100%;}
    .form-wrap td div + div{ margin: .5em 0 0;}
    .form-wrap td .error{ font-size: 3.2vw;}
    .form-wrap .submit{ margin: 5.333333333vw 0 0;}
    .form-wrap .submit input{ width: 45%; height: 8vw;}
    .form-wrap textarea{ height: 26.66666667vw;}
}

.list-tour{ display: flex; margin: 40px 0 0; padding: 40px 0; border-radius: 20px; background: #f4f4f9; justify-content: space-between;}
.list-tour > li{ position: relative; padding: 40px; width: 25%; border-left: 1px solid #dcdce0;}
.list-tour > li:first-child{ border: none;}
.list-tour h3{ display: flex; flex-direction: column; margin: 0; min-height: 140px; color: #3e4298; text-align: center; letter-spacing: .1em; line-height: 1.25; align-items: center;}
.list-tour i{ display: flex; margin: 0 0 .5em; width: 50px; height: 50px; border-radius: 100%; background: #f4f4f9; color: #3e4298; font-weight: 600; font-style: normal; font-size: 3rem; font-family: "Roboto Condensed", sans-serif; justify-content: center; align-items: center;}
.list-tour p{ margin: 0; font-size: 1.4rem;}
.list-tour .list{ margin: 0 0 0 1em; font-size: 1.4rem; line-height: 1.5;}
.list-tour .list > li{ list-style: disc;}

@media screen and (max-width: 768px){
    .list-tour{ flex-direction: column; margin: 40px 0 0; padding: 5.333333333vw; border-radius: 2.666666667vw;}
    .list-tour > li{ padding: 5.333333333vw 0; width: 100%; border-top: 1px solid #dcdce0; border-left: none;}
    .list-tour h3{ flex-direction: row; min-height: 0; color: #3e4298; font-size: 4.8vw; align-items: center; justify-content: flex-start;}
    .list-tour i{ margin: 0 .25em 0 0; width: 9.333333333vw; height: 9.333333333vw; font-size: 6.4vw;}
    .list-tour p{ margin: 1em 0 0; font-size: 3.2vw;}
    .list-tour .list{ margin: 1em 0 0 1.4em; font-size: 3.2vw; line-height: 1.5;}
    .list-tour .list > li{ list-style: disc;}
}

.list2{ margin: 2em 0 0 1em; line-height: 1.5;}
.list2 > li{ list-style: disc;}
.list2 > li + li{ margin: 1em 0 0;}


/* --------------------------------------------------
 aside
--------------------------------------------------- */
.aside{ padding: 60px 0; background: #f4f4f9;}
.list-contact{ display: flex; justify-content: space-between;}
.list-contact > li{ display: flex; width: 50%; border-left: 1px solid #dcdce0; justify-content: center;}
.list-contact > li:first-child{ border: none;}
.list-contact a{ position: relative; display: flex; flex-direction: column; padding: 0 0 50px; align-items: center;}
.list-contact a:after{ position: absolute; bottom: 10px; left: 50%; width: 28px; height: 28px; background: url("/cms/wp-content/themes/aeco/assets/img/common/ico.svg") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.list-contact i img{ width: auto; height: 51px;}
.list-contact .tl{ margin: 1em 0 0; text-align: center; font-size: 2.4rem; line-height: 1.5;}
.list-contact .tl span{ display: block; font-size: 1.4rem;}

@media screen and (max-width: 768px){
    .aside{ padding: 5.333333333vw 0;}
    .list-contact a{ padding: 4vw 0 13.33333333vw; height: 100%;}
    .list-contact a:after{ bottom: 6vw; width: 5.65916vw; height: 5.65916vw;}
    .list-contact i img{ height: 9.526146667vw;}
    .list-contact .tl{ font-size: 3.2vw;}
    .list-contact .tl span{ display: none;}
}


/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ display: flex; padding: 35px 80px; background: #3e4298; color: #fff; justify-content: space-between;}
.footer .address{ position: relative; display: flex; flex-direction: column; font-size: 1.4rem;}
.footer .address h1 a{ color: #fff; letter-spacing: .15em; font-weight: 700; font-size: 3.2rem; line-height: 1.5;}
.footer .address address{ margin: 2em 0 0;}
.footer .address small{ position: absolute; bottom: 0; left: 0; font-size: 1.2rem;}
.footer nav{ display: flex;}
.footer nav > ul{ padding: 30px 0 30px 20px; width: 255px; border-left: 1px solid; font-weight: 500; font-size: 1.6rem;}
.footer nav > ul ul{ padding: 1em 0 0 1em; font-size: 1.4rem;}
.footer nav li{ margin: 1em 0 0;}
.footer nav ul > li:first-child{ margin: 0;}
.footer nav a{ display: inline-block; padding: 0 0 .5em; border-bottom: 2px dashed; color: #fff;}

@media screen and (max-width: 768px){
    .footer{ flex-direction: column; padding: 5.333333333vw 0; align-items: center;}
    .footer .address{ font-size: 2.666666667vw; align-items: center;}
    .footer .address h1 a{ letter-spacing: .1em; font-size: 4.8vw;}
    .footer .address address{ margin: 1em 0 0;}
    .footer .address small{ position: relative; bottom: auto; left: auto; margin: 3em 0 0; font-size: 2.666666667vw;}
    .footer nav{ display: none;}
}