@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

#wrap{ overflow: visible;}
main{ padding: 0;}
.thinkportal{ margin: 0 calc(50% - 50vw); padding: 0; width: 100vw; background: #fff; color: #000; letter-spacing: normal; font-family: "Yu Gothic Pr6N M"; line-height: 1;}
.thinkportal *{ margin: 0; padding: 0; letter-spacing: normal;}
.thinkportal img{ vertical-align: bottom;}
.thinkportal img.sp{ display: none;}

@media screen and (max-width: 1024px){
    main{ padding: 0;}
    .thinkportal{ margin: 0; width: 100%;}
    .thinkportal img.pc{ display: none;}
    .thinkportal img.sp{ display: block;}
}

.sec1 .slide-main{ font-size: 0; line-height: 1; opacity: 0; transition: opacity .3s linear;}
.sec1 .slide-main.slick-initialized{ opacity: 1;}
.sec1 h2{ display: flex; padding: 100px 9.375vw; background: #F5F5F5;}
.sec1 h2 img{ width: 353.48px;}

@media screen and (max-width: 1024px){
    .sec1 .slide-wrap{ overflow: scroll;}
    .sec1 .slide-main{ display: flex; width: calc(200vw * 7); opacity: 1;}
    .sec1 .slide-main > li{ width: 200vw;}
    .sec1 h2{ padding: 16vw 0; justify-content: center;}
    .sec1 h2 img{ width: 78.344vw;}
}

.thinkportal h3{ text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 22px; font-family: "Lato", sans-serif;}
.thinkportal h3 + p{ margin: 2em auto 0; text-align: center; letter-spacing: .05em; font-size: 16px; line-height: 1.875;}

@media screen and (max-width: 1024px){
    .thinkportal h3{ font-size: 5.333333333vw;}
    .thinkportal h3 + p{ margin: 2em 0 0; text-align: left; letter-spacing: .025em; font-size: 3.733333333vw; line-height: 1.928571429;}
}

.sec-wrap{ position: relative;}
.thinkportal .btn{ position: sticky; right: 0; bottom: 0; z-index: 20; margin-left: auto; padding-bottom: 67px; width: fit-content;}
.thinkportal .btn a{ position: relative; display: flex; flex-direction: column; padding: 0 0 0 20px; width: 175px; height: 104px; border-radius: 12px 0 0 12px; background: #6A6A6A; color: #fff; text-decoration: none; font-size: 12px; font-family: "Yu Gothic Pr6N M"; line-height: 1.5; align-items: flex-start; justify-content: center;}
.thinkportal .btn a span{ margin: 0 0 1em; letter-spacing: .1em; font-weight: 400; font-size: 13px; font-family: "Lato", sans-serif;}
.thinkportal .btn a:after{ position: absolute; top: 50%; right: 16px; width: 18px; height: 18px; background: url("/img/about/thinkportal/arrow_btn.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 1024px){
    .thinkportal .btn{ padding-bottom: 8vw;}
    .thinkportal .btn a{ padding: 0 0 0 5.333333333vw; width: 37.33333333vw; height: 21.33333333vw; border-radius: 1.6vw 0 0 1.6vw; font-size: 2.666666667vw;}
    .thinkportal .btn a span{ margin: 0 0 .5em; font-size: 2.666666667vw;}
    .thinkportal .btn a:after{ right: 2.666666667vw; width: 4vw; height: 4vw;}
}

.sec2{ padding: 100px 0 150px;}
.sec2 h3 + p{ margin: 2em auto 0; width: 790px; text-align: left; font-size: 18px; line-height: 2;}

@media screen and (max-width: 1024px){
    .sec2{ padding: 13.33333333vw 5.333333333vw 20vw;}
    .sec2 h3 + p{ margin: 2em 0 0; width: 100%; font-size: 3.733333333vw; line-height: 1.928571429;}
}

.sec3{ padding: 80px 0; background: #F5F5F5;}
.sec3 h3{ display: flex; justify-content: center;}
.sec3 h3 span{display: flex; flex-direction: column;  padding: 0 0 .25em; border-bottom: 3px solid; letter-spacing: .1em; line-height: 1.5;align-items: center; }
.sec3 h3 + p{ width: 780px; text-align: left; font-size: 14px; line-height: 1.857142857;}

@media screen and (max-width: 1024px){
    .sec3{ padding: 16vw 5.333333333vw; border-top: 1px solid #fff;}
    .sec3 h3 span{ padding: 0 0 .25em; border-bottom: 0.533333333vw solid;}
    .sec3 h3 + p{ width: 100%; font-size: 3.733333333vw; line-height: 1.928571429;}
}

.sec3 .dl1{ margin: 70px auto 0; padding: 30px 40px; width: 780px; border-radius: 16px; background: #363636; color: #fff;}
.sec3 .dl1 dt{ display: flex; letter-spacing: -.03em; font-weight: 700; font-size: 28px; font-family: helvetica-neue-lt-pro, sans-serif; justify-content: center;}
.sec3 .dl1 dt em{ margin: 0 1em 0 0; letter-spacing: normal; font-weight: 400; font-style: italic; font-family: helvetica-neue-lt-pro, sans-serif;}
.sec3 .dl1 dd{ padding: 1em 0 0; letter-spacing: .08em; font-size: 14px; line-height: 1.857142857;}

@media screen and (max-width: 1024px){
    .sec3 .dl1{ margin: 12vw 0 0; padding: 10.66666667vw 8vw 9.333333333vw; width: 100%; border-radius: 4.266666667vw;}
    .sec3 .dl1 dt{ flex-direction: column; font-size: 8.533333333vw; justify-content: flex-start; align-items: center;}
    .sec3 .dl1 dt em{ margin: 0 0 .5em; font-size: 6.4vw;}
    .sec3 .dl1 dd{ font-size: 3.733333333vw; line-height: 1.928571429;}
}

.sec3 .slide-wrap{ margin: 40px 0 0;}
.sec3 .slide{ opacity: 0; transition: opacity .3s linear;}
.sec3 .slide.slick-initialized{ opacity: 1;}
.sec3 .slide .slick-slide{ padding: 0 15px;}
.sec3 .slide .slick-slide img{ width: auto; height: 390px;}
.sec3 .slide .slick-slide video{ height: 390px; aspect-ratio: 16 / 9;}
.sec3 .slide .slick-prev,
.sec3 .slide .slick-next{ z-index: 10; width: 34px; height: 34px;}
.sec3 .slide .slick-prev.slick-disabled:before,
.sec3 .slide .slick-next.slick-disabled:before{ opacity: 1;}
.sec3 .slide .slick-prev:before,
.sec3 .slide .slick-next:before{ display: block; width: 100%; height: 100%; background: url("/img/about/thinkportal/arrow_slide.png") no-repeat center / contain; content: ""; opacity: 1;}
.sec3 .slide .slick-prev{ left: calc(50% - 485px); transform: translate(0,-50%) scale(-1,1);}
.sec3 .slide .slick-next{ left: calc(50% + 451px);}

@media screen and (max-width: 1024px){
    .sec3 .slide-wrap{ margin: 9.333333333vw calc(50% - 50vw) 0;}
    .sec3 .slide .slick-slide{ padding: 0; width: 100vw;}
    .sec3 .slide .slick-slide img{ width: 100%; height: auto;}
    .sec3 .slide .slick-prev,
    .sec3 .slide .slick-next{ width: 4.266666667vw; height: 4.266666667vw;}
    .sec3 .slide .slick-prev{ left: 3.2vw;}
    .sec3 .slide .slick-next{ right: 3.2vw; left: auto;}
    .sec3 .slide .slick-prev:before,
    .sec3 .slide .slick-next:before{ background: url("/img/about/thinkportal/arrow_slide_sp.png") no-repeat center / contain;}
}

.sec3 .video-wrap{ display: none;}

@media screen and (max-width: 1024px){
    .sec3 .video-wrap{ display: block; margin: 9.333333333vw 0 0;}
    .sec3 .video-wrap video{ width: 100%;}
}

.sec3 .area{ margin: 95px 0 0; text-align: center;}
.sec3.west .area img{ width: 810px;}
.sec3.east .area img{ width: 810px;}
.sec3.recept .area img{ width: 375px;}

@media screen and (max-width: 1024px){
    .sec3 .area{ margin: 13.33333333vw 0 0;}
    .sec3.west .area img{ width: 100%;}
    .sec3.east .area img{ width: 100%;}
    .sec3.recept .area img{ margin: 0 auto; width: 41.06666667vw;}
}

.sec3 .list1{ display: grid; margin: 120px auto 0; width: 980px; counter-reset: my-counter; text-align: left; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.sec3.recept .list1{ padding: 0 0 80px;}
.sec3 .list1 > li{ counter-increment: my-counter;}
.sec3 .list1 h4{ position: relative; padding: 0 0 0 40px; letter-spacing: .1em; font-weight: 400; font-size: 20px; font-family: "Lato", sans-serif;}
.sec3 .list1 h4:after{ position: absolute; top: 50%; left: 0; width: 31px; color: #fff; content: '0'counter(my-counter); text-align: center; letter-spacing: .05em; font-weight: 400; font-size: 14px; font-family: helvetica-neue-lt-pro, sans-serif; transform: translate(0,-50%);}
.sec3 .list1 h4:before{ position: absolute; top: 50%; left: 0; width: 31px; height: 31px; border-radius: 100%; content: ""; transform: translate(0,-50%);}
.sec3.west .list1 h4:before{ background: #363636;}
.sec3.east .list1 h4:before{ background: #39556C;}
.sec3.recept .list1 h4:before{ background: #3E524E;}
.sec3 .list1 figure{ margin: 40px 0 0;}
.sec3 .list1 p{ margin: 1.5em 0 0; letter-spacing: .05em; font-size: 13px; line-height: 1.538461538;}

@media screen and (max-width: 1024px){
    .sec3 .list1{ margin: 13.33333333vw 0 0; width: 100%; grid-template-columns: 1fr 1fr; gap: 8vw 5.333333333vw;}
    .sec3.recept .list1{ padding: 0;}
    .sec3 .list1 h4{ padding: 0 0 0 8vw; letter-spacing: .05em; font-size: 4.266666667vw;}
    .sec3 .list1 h4:after{ width: 5.866666667vw; font-size: 2.666666667vw;}
    .sec3 .list1 h4:before{ width: 5.866666667vw; height: 5.866666667vw;}
    .sec3 .list1 figure{ margin: 4vw 0 0;}
    .sec3 .list1 p{ margin: 1em 0 0; font-size: 3.2vw; line-height: 1.5;}
}

.sec4{ padding: 90px 0 0; text-align: center;}
.sec4 address{ display: flex; flex-direction: row-reverse; margin: 0 auto; padding: 90px 0 120px; width: 820px; text-align: left; justify-content: space-between;}
.sec4 address .detail{ width: 313px;}
.sec4 address .detail p{ letter-spacing: .05em; font-size: 13px; line-height: 2.307692308;}
.sec4 address .detail p + p{ margin: 2em 0 0;}
.sec4 address figure{ width: 480px;}
.sec4 address figure iframe{ width: 100%; height: 100%;}

@media screen and (max-width: 1024px){
    .sec4{ padding: 16vw 0;}
    .sec4 h3 + p{ text-align: center; font-size: 3.733333333vw; line-height: 1.909090909;}
    .sec4 address{ flex-direction: column; margin: 9.333333333vw 0 0; padding: 0; width: 100%; text-align: center; justify-content: flex-start; align-items: center;}
    .sec4 address .detail{ width: 100%;}
    .sec4 address .detail p{ margin: 2em 0 0; font-size: 3.2vw; line-height: 2.222222222;}
    .sec4 address .detail p + p{ margin: 2em 0 0;}
    .sec4 address figure{ width: 78.93333333vw;}
    .sec4 address figure iframe{ height: 56.53333333vw;}
}

.sec5{ padding: 100px 0 130px; background: #F5F5F5;}
.sec5 h3 + p{ margin: 1.5em auto 0;}
.sec5 .cap{ margin: 40px auto 0; width: 460px; letter-spacing: .05em; font-size: 13px; line-height: 2.076923077;}

@media screen and (max-width: 1024px){
    .sec5{ padding: 18.66666667vw 10.66666667vw 30.66666667vw;}
    .sec5 h3 + p{ margin: 2em 0 0; text-align: center; font-size: 3.733333333vw; line-height: 1.909090909;}
    .sec5 .cap{ margin: 5.333333333vw 0 0; width: 100%; font-size: 3.2vw; line-height: 2.111111111;}
}

.form{ margin: 80px auto 0; width: 820px; letter-spacing: .05em; font-size: 12px;}
.form table{ width: 100%; border-bottom: 1px solid #DCDCDC; text-align: left;}
.form table th{ padding: 30px 0; width: 240px; border-top: 1px solid #DCDCDC; vertical-align: top; line-height: 2.5;}
.form table td{ padding: 30px 160px 30px 0; border-top: 1px solid #DCDCDC;}
.form table .noborder th{ padding: 0 0 30px; border: none;}
.form table .noborder td{ padding: 0 160px 30px 0; border: none;}
.form input[type="email"],
.form input[type="tel"],
.form input[type="text"],
.form textarea{ padding: 1em; width: 100%; border: 1px solid #DCDCDC; background: #fff; line-height: 1.5;}
.form input.short{ width: 160px;}
.form textarea{ height: 10em;}
.form table ::placeholder{ color: #C1C1C1;}
.form .privacy{ margin: 0 0 3em 1.5em;}
.form .privacy > li{ list-style: decimal; letter-spacing: .05em; font-size: 10px; line-height: 2;}
.form .submit{ display: flex; margin: 45px 0 0; justify-content: center;}
.form .submit input[type="submit"],
.form .submit input[type="reset"],
.form .submit input[type="button"]{display: flex;  margin: 0 1em; width: 300px; height: 80px; border: 1px solid #C1C1C1; background: #fff; font-size: 16px; cursor: pointer; justify-content: center; align-items: center;}
.form .radio-field{ display: flex; flex-wrap: wrap;}
.form .radio-field .mwform-radio-field{ margin: 0 2em 1em 0;}
.form .error{ display: block; margin: 1em 0 0; width: 100%;}
.form .radio-field .error{ margin: 0;}
.form .line{ line-height: 1.875;}
.form .mwform-checkbox-field label,
.form .mwform-radio-field label{ display: flex; align-items: center;}
.form .mwform-checkbox-field input,
.form .mwform-radio-field input{ margin: 0 .5em 0 0;}
.mw_wp_form_complete p{ margin: 2em auto 0; text-align: center; letter-spacing: .05em; font-size: 16px; line-height: 1.875;}

@media screen and (max-width: 1024px){
    .form{ margin: 6.666666667vw 0 0; width: 100%; font-size: 3.2vw;}
    .form table th{ display: block; padding: 4vw 0 2.133333333vw; width: 100%; line-height: 1.777777778;}
    .form table td{ display: block; padding: 0 0 5.333333333vw; width: 100%; border-top: none;}
    .form table .noborder th{ padding: 0 0 2.133333333vw;}
    .form table .noborder td{ padding: 0 0 5.333333333vw;}
    .form input[type="email"],
    .form input[type="tel"],
    .form input[type="text"],
    .form textarea{ padding: 1em; width: 100%; border: 1px solid #DCDCDC; background: #fff; line-height: 1.5;}
    .form input.short{ width: 23.46666667vw;}
    .form textarea{ height: 10em;}
    .form label + label{ margin: 0 0 0 2em;}
    .form label input{ vertical-align: sub;}
    .form table ::placeholder{ color: #C1C1C1;}
    .form .privacy{ margin: 0 0 3em 1.5em;}
    .form .privacy > li{ font-size: 3.2vw; line-height: 2.222222222;}
    .form .submit{ margin: 5.333333333vw 0 0;}
    .form .submit input[type="submit"],
    .form .submit input[type="reset"],
    .form .submit input[type="button"]{ width: 42.66666667vw; height: 10.66666667vw; border: 1px solid #C1C1C1; font-size: 3.2vw;}
    .mw_wp_form_complete p{ margin: 2em 0 0; text-align: left; letter-spacing: .025em; font-size: 3.733333333vw; line-height: 1.928571429;}
}