html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*{
margin:0;
padding:0;
list-style: none;
box-sizing: border-box;
}
html,body{
font-family:YakuHanJP,'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium";
font-size: 16px;
font-weight: normal;
line-height: 1.5;
color: var(--main);
}
img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a,a:visited{
text-decoration:none;
color:#1977ec;
transition: ease all .4s;
}
a:hover{
opacity: .7;
color:#ec194a;
}
.poppins{
font-family: 'Poppins';
}
.w106{
width: 100%;
max-width: 1100px;
padding: 0 20px;
margin: 0 auto;
}
/*=====================================
*
*common
*
=======================================*/
:root {
--main: #00303E;
--blue: #46C7C7;
--orange: #FCB116;
}
/*=====================================
*
*header
*
=======================================*/
header{
}
header .header_inner{
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 100%;
padding: 0 20px 20px;
}
header .header_inner .logo_area{
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 15px;
}
header .header_inner .logo_area .logo{
margin-right: 20px;
}
header .header_inner .logo_area .logo img{
height: 50px;
}
header .header_inner .logo_area .logo span{
display: block;
font-weight: 500;
font-size: 16px;
margin-top: 10px;
background: var(--main);
color: #fff;
padding: 5px;
line-height: 1;
text-align: center;
}
header .header_inner .logo_area .skill_logo img{
height: 71px;
}
header .header_inner .cta{
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
header .header_inner .cta .contact{
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}
header .header_inner .cta .contact a{
color: var(--main);
font-size: 18px;
}
header .header_inner .cta .trial a{
color: var(--main);
font-size: 18px;
padding: 15px;
border-radius: 0 0 10px 10px;
background: #FFFB00;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
font-weight: 600;
height: 100%;
}
header .header_inner .cta .info a{
font-size: 18px;
color: #fff;
padding: 15px;
border-radius: 0 0 10px 10px;
background: var(--blue);
width: 200px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
font-weight: 600;
position: relative;
height: 100%;
}
header .header_inner .cta .info a::after{
content: '';
background: url(../images/cta-icon-w.png) no-repeat;
display: block;
width: 24px;
height: 22px;
margin-left: 10px;
}
header .header_inner .menu{
}
header .header_inner .menu ol{
display: flex;
justify-content: flex-end;
align-items: center;
}
header .header_inner .menu ol li{
}
header .header_inner .menu ol li a{
padding: 5px 15px;
line-height: 1;
color: var(--main);
border-right: 1px dashed #708c94;
font-weight: 500;
font-size: 1vw;
}
header .header_inner .menu ol li:nth-last-child(2) a{
border: none;
}
header .header_inner .menu ol li.btn{
}
header .header_inner .menu ol li.btn a{
border: 1px solid var(--main);
border-radius: 500px;
padding: 10px 30px;
padding-right: 35px;
position: relative;
display: block;
}
header .header_inner .menu ol li.btn a::before{
content: '';
display: block;
width: 7px;
height: 10px;
background: url(../images/arrow.png) no-repeat;
background-size: 100%;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
header.header_individual .header_inner .cta .trial a{
background: var(--main);
color: #fff;
width: 270px;
}
header.header_individual .header_inner .cta .info a{
width: 270px;
}
header.header_individual .header_inner .cta .info a::after{
content: none;
}
@media screen and (min-width:969px){
header .header_sp_btn{
display: none;
}
}
@media screen and (max-width:1360px){
header.header_individual .header_inner .cta .trial a,
header.header_individual .header_inner .cta .info a{
width: 240px;
}
header .header_inner .cta .contact a,
header .header_inner .cta .trial a,
header .header_inner .cta .info a{
font-size: 16px;
}
header .header_inner .menu ol li a{
padding: 5px 10px;
}
header .header_inner .menu ol li.btn a{
padding: 10px 20px;
padding-right: 25px;
}
header .header_inner .logo_area .logo span{
font-size: 14px;
margin-top: 10px;
}
}
@media screen and (max-width:1160px){
header .header_inner .logo_area .skill_logo img{
height: 66px;
}
header .header_inner .logo_area .logo span {
font-size: 11px;
margin-top: 5px;
}
}
@media screen and (max-width:1068px){
header .header_inner .logo_area .logo {
margin-right: 10px;
}
header .header_inner .logo_area .logo img{
height: 3.8vw;
}
header .header_inner .menu ol li a{
font-size: 1.1vw;
}
}
@media screen and (min-width:969px){
header .header_inner .cta .trial a br,
header .header_inner .cta .info a br{
display: none;
}
}
@media screen and (max-width:968px){
header .header_inner{
padding: 0;
align-items: center;
height: 70px;
}
header.header_individual .header_inner .cta .trial a,
header.header_individual .header_inner .cta .info a {
width: 220px;
}
header.header_individual .header_inner .cta{
display: none;
}
header .header_inner .logo_area{
margin-top: 0;
}
header .header_inner .logo_area .logo {
margin-right: 10px;
padding-left: 10px;
}
header .header_inner .logo_area .logo img{
height: 32px;
}
header .header_inner .logo_area .skill_logo img{
height: 50px;
}
header .header_inner .cta{
display: block;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
left: 0;
z-index: 98;
display: flex;
justify-content: space-between;
height: 70px;
width: 100%;
}
header .header_inner .cta .contact{
margin: 0 auto;
width: 35%;
}
header .header_inner .cta .contact a{
width: 100%;
height: auto;
font-size: 14px;
font-weight: 600;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #DEFFF8;
}
header .header_inner .cta .trial{
width: 30%;
}
header .header_inner .cta .info{
width: 35%;
}
header .header_inner .cta .info a::after{
width: 18px;
height: 16px;
background-size: 100%;
}
header .header_inner .cta .trial a,
header .header_inner .cta .info a,
header .header_inner .cta .trial a,
header.header_individual .header_inner .cta .info a {
font-size: 14px;
width: 100%;
border-radius: 0;
text-align: center;
}
header .header_right .menu{
position: fixed;
right: 0;
top: 0;
padding: 40px 20px;
padding-top: 70px;
height: 100vh;
width: 60%;
min-width: 300px;
background: #fff;
display: block;
overflow-y: scroll;
transition: ease all .4s;
transform: translateX(100%);
z-index: 99;
}
header .header_right .menu.active{
transform: translateX(0);
box-shadow: 4px 0px 11px 2px #00000063;
}
header .header_inner .menu ol{
display: block;
}
header .header_inner .menu ol li a {
display: block;
font-size: 16px;
padding: 20px;
display: block;
border-right: none;
border-bottom: 1px dashed #708c94;
}
header .header_inner .menu ol li.btn a{
padding: 15px 20px;
padding-right: 25px;
text-align: center;
margin-top: 10px;
}
header .header_sp_btn{
display: flex;
flex-direction: column;
width: 70px;
height: 70px;
justify-content: space-between;
position: relative;
z-index: 99;
padding: 20px 15px;
background: var(--main);
position: fixed;
right: 0;
top: 0;
}
header .header_sp_btn span{
display: block;
width: 100%;
height: 3px;
background: #fff;
transition: ease all .4s;
position: relative;
top: 0;
}
header .header_sp_btn.active span:nth-child(1){
transform: rotate(45deg);
top: 14px;
}
header .header_sp_btn.active span:nth-child(2){
transform: rotate(-45deg);
}
header .header_sp_btn.active span:nth-child(3){
opacity: 0;
pointer-events: none;
}
header .header_modal_bg{
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
width: 100vw;
height: 100vh;
z-index: 98;
}
header .header_modal_bg.active{
pointer-events: all;
opacity: .3;
}
}
/*=====================================
*
*footer
*
=======================================*/
footer{
background: var(--main);
color: #fff;
position: relative;
overflow: hidden;
}
footer .bg{
position: absolute;
right: -20px;
top: 0;
}
footer .footer_inner{
max-width: 860px;
padding: 0 20px;
margin: 70px auto;
position: relative;
}
footer .footer_inner .text{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 30px;
border-bottom: 1px solid #ffffff30;
width: calc(100% - 80px);
margin: 0 auto;
}
footer .footer_inner .text .title{
}
footer .footer_inner .text .title .en{
font-size: 12px;
font-weight: 700;
opacity: .5;
letter-spacing: 1px;
padding-left: 3px;
}
footer .footer_inner .text .title .ja{
font-size: 42px;
font-weight: 700;
line-height: 1;
}
footer .footer_inner .btn{
display: flex;
justify-content: space-between;
margin-top: 30px;
}
footer .footer_inner .btn .contact{
width: calc( 50% - 5px );
margin-right: 10px;
}
footer .footer_inner .btn .contact a{
position: relative;
display: block;
color: var(--main);
background: #FFFB00;
font-size: 22px;
font-weight: 700;
padding: 33px 0;
text-align: center;
border-radius: 500px;
}
footer .footer_inner .btn .contact a::before{
content: '';
width: 12px;
height: 16px;
background: url(../images/footer-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
footer .footer_inner .btn .info{
width: calc( 50% - 5px );
}
footer .footer_inner .btn .info a{
position: relative;
display: block;
color: #fff;
background: #00BDB7;
font-size: 22px;
font-weight: 700;
padding: 33px 0;
text-align: center;
border-radius: 500px;
}
footer .footer_inner .btn .info a::before{
content: '';
width: 24px;
height: 22px;
background: url(../images/cta-icon-w.png) no-repeat;
display: block;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
footer.footer_individual .footer_inner .btn .info a::before{
content: '';
width: 12px;
height: 16px;
background: url(../images/btn-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
footer .footer_menu{
background: #001B23;
position: relative;
}
footer .footer_menu ol{
display: flex;
justify-content: space-between;
max-width: 1200px;
width: 100%;
padding: 26px 20px;
margin: 0 auto;
}
footer .footer_menu ol li{
position: relative;
}
footer .footer_menu ol li a{
color: #fff;
font-size: 12px;
text-decoration: underline;
padding: 0 10px;
border-right: 1px solid #fff;
}
footer .footer_menu ol li:last-child a{
border-right: none;
}
footer .footer_menu .pagetop{
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 76px;
height: 76px;
background: #E60012;
}
footer .copyright{
position: relative;
text-align: center;
padding: 30px;
color: var(--main);
font-size: 14px;
background: #fff;
line-height: 1;
}
@media screen and (max-width: 1320px){
footer .footer_menu ol{
margin: 0;
}
}
@media screen and (max-width: 1260px){
footer .footer_menu ol{
margin: 0;
flex-wrap: wrap;
justify-content: flex-start;
width: 860px;
padding: 16px 20px;
}
footer .footer_menu ol li:nth-child(3) a{
margin-right: 0;
border-right: none;
}
footer .footer_menu .pagetop {
width: 80px;
height: 80px;
}
}
@media screen and (max-width:968px){
footer .footer_inner .text .title .ja{
font-size: 34px;
}
footer .footer_inner .text{
text-align: center;
padding-bottom: 20px;
width: 100%;
}
footer .footer_inner .text p{
font-size: 13px;
margin-top: 20px;
}
footer .copyright{
padding-bottom: 100px;
}
footer.footer_individual .copyright{
padding: 30px;
}
}
@media screen and (max-width:768px){
footer .bg{
opacity: .3;
}
footer .footer_inner .btn .contact a,
footer .footer_inner .btn .info a{
padding: 20px 0;
}
footer .footer_menu ol{
width: 100%;
display: block;
}
footer .footer_menu ol li{
margin: 0;
}
footer .footer_menu ol li a{
border-right: none;
padding: 20px 0;
display: block;
border-bottom: 1px solid #ffffff30;
}
footer .footer_menu ol li:last-child a{
border: none;
}
footer .footer_menu .pagetop{
height: 60px;
top: auto;
bottom: 0;
position: relative;
width: 100%;
}
footer .copyright{
font-size: 12px;
}
}
@media screen and (max-width:680px){
footer .footer_inner{
margin: 40px auto;
}
footer .footer_inner .text{
display: block;
}
footer .footer_inner .text .title .ja {
font-size: 28px;
}
footer .footer_inner .text .title{
margin-bottom: 10px;
}
footer .footer_inner .btn{
display: block;
}
footer .footer_inner .btn .contact{
margin-bottom: 10px;
width: 100%;
}
footer .footer_inner .btn .info{
width: 100%;
}
}
/*=====================================
*
*mv
*
=======================================*/
.mv{
background: linear-gradient(to right,#ddfff8,#fff);
}
.mv .mv_inner{
position: relative;
height: 430px;
display: flex;
justify-content: center;
align-items: center;
}
.mv .mv_inner .bg{
position: absolute;
right: 5%;
top: 0;
}
.mv .mv_inner .mv_image{
height: calc(100% + 68px);
width: 100%;
padding: 0 10%;
text-align: right;
position: absolute;
top: 0;
left: 0;
}
.mv .mv_inner .mv_image img{
height: 100%;
}
.mv .mv_inner .mv_text{
position: relative;
width: 100%;
max-width: 1300px;
padding: 0 20px;
}
.mv .mv_inner .mv_text .label{
background: var(--main);
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 5px 15px;
display: inline-block;
line-height: 1;
}
.mv .mv_inner .sub{
color: var(--main);
font-size: 31px;
font-weight: bold;
margin-top: 10px;
}
.mv .mv_inner h1{
color: var(--blue);
font-size: 76px;
font-weight: bold;
line-height: 1.1;
}
.mv .mv_inner h1 span{
font-size: 23px;
}
.mv .mv_inner .text{
color: var(--main);
font-size: 16px;
line-height: 1.6;
margin-top: 10px;
}
.mv .mv_inner .mv_btn{
position: absolute;
right: 5%;
bottom: 40px;
}
@media screen and (max-width:1260px){
.mv .mv_inner .sub{
font-size: 26px;
}
.mv .mv_inner h1{
font-size: 60px;
}
.mv .mv_inner h1 span {
font-size: 20px;
}
}
@media screen and (max-width:968px){
.mv .mv_inner{
height: 300px;
}
.mv .mv_inner .mv_image{
height: calc(100% + 52px);
}
.mv .mv_inner .mv_text .label{
font-size: 16px;
}
.mv .mv_inner .sub {
font-size: 20px;
}
.mv .mv_inner h1 {
font-size: 40px;
}
.mv .mv_inner .text{
font-size: 14px;
}
.mv .mv_inner .mv_btn{
width: 200px;
}
}
@media screen and (max-width:768px){
.mv .mv_inner .mv_image {
height: auto;
bottom: -6.3vw;
width: 80%;
padding: 0 20px;
right: 0;
top: auto;
left: auto;
}
}
@media screen and (min-width:651px){
.mv .mv_inner .sub br{
display: none;
}
.mv .mv_inner .text br.pcnone{
display: none;
}
.mv .mv_inner .mv_btn .pcnone{
display: none;
}
}
@media screen and (max-width:650px){
.mv .mv_inner {
padding: 0;
padding-top: 40px;
height: 460px;
display: block;
}
.mv .mv_inner .mv_text .label {
font-size: 14px;
}
.mv .mv_inner .sub {
font-size: 24px;
}
.mv .mv_inner h1 {
font-size: 47px;
}
.mv .mv_inner h1 span{
display: block;
}
.mv .mv_inner .mv_btn{
width: 100%;
left: 0;
bottom: 0;
transform: translateY(50%);
text-align: center;
z-index: 2;
}
.mv .mv_inner .mv_btn .spnone{
display: none;
}
.mv .mv_inner .mv_image{
bottom: 0;
width: auto;
padding: 0;
height: auto;
overflow: hidden;
}
.mv .mv_inner .mv_image img{
position: relative;
right: -40px;
height: auto;
}
}
@media screen and (max-width:568px){
}
/*=====================================
*
*top_cta
*
=======================================*/
.top_cta{
background: var(--main);
overflow: hidden;
position: relative;
}
.top_cta .top_cta_inner{
max-width: 760px;
padding: 0 20px;
margin: 45px auto;
display: flex;
justify-content: center;
align-items: center;
}
.top_cta .top_cta_inner .btn{
}
.top_cta .top_cta_inner .btn a{
color: var(--main);
background: #FFFB00;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 70px;
font-size: 22px;
font-weight: 700;
border-radius: 10px;
}
.top_cta .top_cta_inner .btn a::after {
content: '';
background: url(../images/cta-icon.png) no-repeat;
display: block;
width: 24px;
height: 22px;
margin-left: 20px;
}
.top_cta .top_cta_inner .text{
font-size: 18px;
font-weight: 500;
margin-left: 20px;
color: #fff;
text-decoration: underline;
}
.top_cta .top_cta_inner .text a{
color: #fff;
}
@media screen and (max-width:768px){
.top_cta .top_cta_inner{
display: block;
text-align: center;
margin-top: 75px;
}
.top_cta .top_cta_inner .btn {
max-width: 460px;
margin: 0 auto 20px;
}
.top_cta .top_cta_inner .btn a{
font-size: 18px;
padding: 20px 40px;
}
}
/*=====================================
*
*top common
*
=======================================*/
#top{
color: var(--main);
}
.top_ttl{
position: relative;
text-align: center;
padding-top: 20px;
margin-bottom: 40px;
}
.top_ttl h2{
font-size: 40px;
font-weight: 700;
color: var(--main);
}
.top_ttl h2 span{
color: var(--blue);
}
.top_ttl .en{
color: #176F6F;
font-weight: 700;
position: absolute;
top: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.top_ttl .sub{
text-align: center;
color: #176f6f;
font-weight: 600;
line-height: 1;
margin-top: 10px;
}
.top_ttl.white h2{
color: #fff;
}
.top_ttl.white h2 span{
color: #FFFB00;
}
.top_ttl.white .en{
color: #fff;
}
.top_btn{
margin: 40px auto;
text-align: center;
}
.top_btn.size28{ width: 100%;max-width: 280px; }
.top_btn.size30{ width: 100%;max-width: 300px; }
.top_btn.size32{ width: 100%;max-width: 320px; }
.top_btn.size36{ width: 100%;max-width: 360px; }
.top_btn.size42{ width: 100%;max-width: 420px; }
.top_btn a{
background: var(--main);
color: #fff;
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 20px;
display: block;
width: 100%;
border-radius: 500px;
position: relative;
}
.top_btn a::before {
content: '';
width: 8px;
height: 16px;
background: url(../images/btn-arrow.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width:768px){
.top_ttl h2{
font-size: 28px;
}
.top_ttl.white .en{
font-size: 14px;
}
.top_ttl .sub{
font-size: 14px;
}
.top_btn.size28{ width: 100%;max-width: 240px; }
.top_btn.size30{ width: 100%;max-width: 260px; }
.top_btn.size32{ width: 100%;max-width: 280px; }
.top_btn.size36{ width: 100%;max-width: 320px; }
.top_btn.size42{ width: 100%;max-width: 380px; }
}
/*=====================================
*
*top_logo
*
=======================================*/
.top_logo{
margin: 40px auto;
}
.top_logo .title{
text-align: center;
}
.top_logo .title h2{
display: inline-block;
position: relative;
color: var(--main);
font-size: 20px;
font-weight: 500;
}
.top_logo .title h2::before{
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--main);
position: absolute;
left: -20px;
top: 50%;
transform: translate(-100%, -50%);
}
.top_logo .title h2::after{
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--main);
position: absolute;
right: -20px;
top: 50%;
transform: translate(100%,-50%);
}
.top_logo .logo_list{
margin: 0 auto;
padding: 40px 0;
position: relative;
}
.top_logo .logo_list::after{
content: '';
display: block;
width: 100%;
max-width: 1260px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
height: 1px;
background: #CBCBCB;
}
.top_logo .logo_list .logo_list_slider{
position: relative;
}
.top_logo .logo_list .logo_list_slider::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 30%;
background: linear-gradient(to right,#fff,transparent);
z-index: 2;
}
.top_logo .logo_list .logo_list_slider::after{
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30%;
background: linear-gradient(to left,#fff,transparent);
z-index: 2;
}
.top_logo .logo_list ol li{
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width:1260px){
.top_logo .logo_list::after{
width: calc( 100% - 40px );
}
}
@media screen and (min-width:769px){
.top_logo .title h2 br{
display: none;
}
}
@media screen and (max-width:768px){
.top_logo .title h2{
font-size: 18px;
}
.top_logo .logo_list ol li img{
max-height: 100px;
}
}
/*=====================================
*
*top01
*
=======================================*/
.top01{
margin: 80px auto;
}
.top01 .image{
text-align: center;
margin: 40px auto;
}
.top01 .center_text{
text-align: center;
font-size: 18px;
line-height: 1.8;
}
.top01 .center_text span{
font-weight: 700;
}
.top01 .left_text{
text-align: left;
font-size: 16px;
line-height: 1.8;
margin: 40px auto;
}
.top01 .videobg{
background: #F5F9F9;
padding: 60px;
}
.top01 .videobg .video_inner{
position: relative;
padding-top: 56.3%;
}
.top01 .videobg iframe{
position: absolute;
left: 0;
top: 0;
}
@media screen and (max-width:1160px){
.top01 .videobg {
padding: 40px;
}
}
@media screen and (max-width:768px){
.top01 .videobg {
padding: 20px;
}
.top01 .center_text{
font-size: 16px;
text-align: left;
}
.top01 .center_text span br{
display: none;
}
}
@media screen and (min-width:569px){
.top01 .image .pcnone{
display: none;
}
}
@media screen and (max-width:568px){
.top01 .image .spnone{
display: none;
}
}
/*=====================================
*
*top02
*
=======================================*/
.top02{
background: #46C7C7;
padding: 70px 0;
}
.reason{
width: 100%;
max-width: calc( 100% - 100px );
padding: 60px 20px 40px;
margin: 0 auto;
border-radius: 10px;
}
.reason_list{
margin: 0 auto;
max-width: 1140px;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.reason_list .reason_list_inner{
width: calc( ( 100% - 20px ) / 3 );
}
.reason_list .reason_list_inner{
margin: 20px 0;
background: #fff;
position: relative;
border-radius: 0 0 10px 10px;
}
.reason_list .reason_list_inner:nth-child(2){
margin: 20px 10px;
}
.reason_list .reason_list_inner:nth-child(4){
margin-right: 10px;
}
.reason_list .reason_list_inner .num{
position: absolute;
left: 10px;
top: -10px;
background: var(--main);
z-index: 2;
color: #fff;
padding: 10px;
padding-top: 15px;
font-size: 8px;
font-weight: 600;
text-align: center;
width: 60px
}
.reason_list .reason_list_inner .num span{
display: block;
font-weight: 700;
font-size: 28px;
line-height: 1;
}
.reason_list .reason_list_inner .num::before{
content: '';
border: 10px solid transparent;
border-top: 0px solid var(--main);
border-left: 30px solid var(--main);
position: absolute;
bottom: -10px;
left: 0;
}
.reason_list .reason_list_inner .num::after{
content: '';
border: 10px solid transparent;
border-top: 0px solid var(--main);
border-right: 30px solid var(--main);
position: absolute;
bottom: -10px;
right: 0;
}
.reason_list .reason_list_inner .image{
position: relative;
}
.reason_list .reason_list_inner .image::after{
content: '';
display: block;
background: linear-gradient(to top, #fff, #ffffffd9, transparent);
width: 100%;
height: 25%;
position: absolute;
left: 0;
bottom: 0;
}
.reason_list .reason_list_inner .text{
padding: 0 20px;
padding-bottom: 120px;
}
.reason_list .reason_list_inner .text .title{
font-size: 22px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
height: 100px;
}
.reason_list .reason_list_inner .text p{
line-height: 1.8;
}
.reason_list .reason_list_inner .text .btn{
width: 100%;
max-width: 260px;
position: absolute;
bottom: 40px;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.reason_list .reason_list_inner .text .btn a{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--main);
color: var(--main);
position: relative;
font-weight: 700;
border-radius: 500px;
padding: 15px 0;
line-height: 1;
}
.reason_list .reason_list_inner .text .btn a::after {
content: '';
width: 8px;
height: 12px;
background: url(../images/footer-arrow.png) no-repeat center;
background-size: 100%;
display: block;
position: relative;
top: 1px;
margin-left: 10px;
}
@media screen and (max-width:1090px){
.reason{
max-width: calc( 100% - 40px );
padding: 40px 20px 20px;
}
.reason_list{
padding: 0;
}
.reason_list .reason_list_inner .text .title{
font-size: 18px;
height: 80px;
}
.reason_list .reason_list_inner .text p {
line-height: 1.8;
font-size: 14px;
}
}
@media screen and (max-width:968px){
.reason_list .reason_list_inner {
width: 48%;
margin: 20px 0;
margin-right: 2%;
}
.reason_list .reason_list_inner:nth-child(2n) {
margin-right: 0;
}
.reason_list .reason_list_inner .image::after{
bottom: -1px;
}
.reason_list .reason_list_inner .num::before,
.reason_list .reason_list_inner .num::after{
bottom: -9px;
}
}
@media screen and (max-width:680px){
.reason_list .reason_list_inner,
.reason_list .reason_list_inner:nth-child(2n){
width: 100%;
margin: 20px auto;
}
.reason_list .reason_list_inner .text{
padding-bottom: 40px;
}
.reason_list .reason_list_inner .text .btn{
position: relative;
top: 0;
margin-top: 20px;
}
}
/*=====================================
*
*top03
*
=======================================*/
.top03{
margin: 80px auto;
}
.prace_list{
margin: 40px auto;
display: flex;
justify-content: space-between;
}
.prace_list .price_list_inner{
padding: 30px;
background: #E8F5F3;
width: calc( 100% - 20px );
}
.prace_list .price_list_inner:first-child{
margin-right: 20px;
}
.prace_list .price_list_inner h3{
font-size: 30px;
font-weight: 700;
color: var(--main);
}
.prace_list .price_list_inner h3 span{
border-bottom: 2px solid var(--main);
}
.prace_list .price_list_inner .text{
margin: 20px auto;
line-height: 1.6;
}
.prace_list .price_list_inner .price_table{
width: 100%;
}
.prace_list .price_list_inner .price_table table{
border-collapse: collapse;
width: 100%;
}
.prace_list .price_list_inner .price_table table th{
width: 50%;
background: #DDFFFF;
padding: 10px 20px;
height: 70px;
text-align: left;
border: 1px solid var(--main);
vertical-align: middle;
}
.prace_list .price_list_inner .price_table table th span{
font-weight: 600;
}
.prace_list .price_list_inner .price_table table td{
width: 50%;
background: #fff;
padding: 10px 20px;
height: 70px;
border: 1px solid var(--main);
font-size: 20px;
font-weight: 500;
vertical-align: middle;
text-align: center;
}
.prace_list .price_list_inner .price_table table td span{
font-family: 'Noto Sans JP';
font-size: 12px;
font-weight: 700;
}
.prace_list .price_list_inner .price_table table td .saled{
font-family: 'Noto Sans JP';
font-size: 14px;
font-weight: 700;
padding: 8px 10px;
line-height: 1;
background: #FFFB00;
display: inline-block;
margin-left: 15px;
}
.prace_list .price_list_inner .price_table .bottom{
text-align: right;
font-size: 12px;
font-weight: 500;
}
@media screen and (max-width:1060px){
.prace_list .price_list_inner .price_table table th{
padding: 10px;
}
.prace_list .price_list_inner .price_table table td{
padding: 10px;
font-size: 18px;
}
.prace_list .price_list_inner .price_table table td .saled{
padding: 5px 8px;
margin-left: 8px;
}
}
@media screen and (max-width:968px){
.prace_list{
display: block;
}
.prace_list .price_list_inner{
width: 100%;
}
.prace_list .price_list_inner:first-child{
margin-right: 0;
margin-bottom: 20px;
}
.prace_list .price_list_inner h3 span{
font-size: 22px;
}
}
@media screen and (min-width:569px){
.prace_list .price_list_inner .price_table table th .pcnone,
.prace_list .price_list_inner .price_table table td .pcnone{
display: none;
}
}
/*=====================================
*
*top04
*
=======================================*/
.top04{
margin: 80px auto;
}
.case_list{
position: relative;
}
.case_list::before{
content: '';
display: block;
width: 100%;
max-width: 1060px;
height: 80%;
background: #0057543d;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
filter: blur(50px);
}
.case_list .case_list_slider{
width: 100%;
max-width: 1100px;
padding: 0 20px;
margin: 0 auto;
}
.case_list ol{
}
.case_list ol li{
border-radius: 10px;
background: #fff;
margin: 20px 0 40px;
}
.case_list ol li a{
padding: 20px 15px;
display: block;
}
.case_list ol li .image{
display: flex;
justify-content: center;
align-items: center;
background: #F5F9F9;
padding: 10px;
height: 180px;
}
.case_list ol li .image img{
max-height: 130px;
}
.case_list ol li .title{
font-size: 18px;
font-weight: 700;
margin-top: 10px;
color: var(--main);
}
.case_list .splide__arrow--prev{
left: -2em;
width: 60px;
height: 60px;
background: var(--blue);
opacity: 1;
}
.case_list .splide__arrow--next{
right: -2em;
width: 60px;
height: 60px;
background: var(--blue);
opacity: 1;
}
.case_list .splide__arrow--prev svg,
.case_list .splide__arrow--next svg{
fill: #fff;
}
@media screen and (max-width:1060px){
.case_list .splide__arrow--prev{
left: -1em;
width: 44px;
height: 44px;
}
.case_list .splide__arrow--next{
right: -1em;
width: 44px;
height: 44px;
}
}
@media screen and (max-width:768px){
.case_list ol li .title {
font-size: 16px;
}
}
@media screen and (max-width:568px){
.case_list .case_list_slider{
padding: 0;
}
.case_list .splide__arrow--prev{
left: 1em;
}
.case_list .splide__arrow--next{
right: 1em;
}
}
/*=====================================
*
*top05
*
=======================================*/
.top05{
margin: 80px auto;
padding: 60px 0;
background: #DEEFEC;
}
.support .comment{
border: 1px solid #4E9588;
border-radius: 10px;
margin: 60px auto;
position: relative;
}
.support .comment::before{
content: '';
border: 20px solid transparent;
border-top: 25px solid #4E9588;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -45px;
}
.support .comment::after{
content: '';
border: 20px solid transparent;
border-top: 25px solid #DEEFEC;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -43px;
}
.support .comment h3{
text-align: center;
font-size: 30px;
font-weight: 700;
position: relative;
top: -26px;
z-index: 2;
}
.support .comment h3::before{
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 15px;
background: #DEEFEC;
height: 20px;
width: 460px;
z-index: -1;
}
.support .comment h3 span{
color: #AB1818;
border-bottom: 2px solid #AB1818;
}
.support .comment .check_list{
margin: 0 auto 40px;
display: flex;
justify-content: center;
align-items: center;
}
.support .comment .check_list ol{
position: relative;
}
.support .comment .check_list ol li{
position: relative;
font-size: 18px;
font-weight: 500;
margin: 10px 0;
padding: 10px;
display: flex;
justify-content: flex-start;
}
.support .comment .check_list ol li::before{
content: '';
display: inline-block;
margin-right: 10px;
width: 28px;
height: 29px;
background: url(../images/check.png)no-repeat center;
}
.support .comment .check_list ol li span{
border-bottom: 1px solid #91C3BA;
}
.support .support_cont{
display: flex;
justify-content: space-between;
}
.support .support_cont .support_cont_inner{
background: #fff;
width:calc( 50% - 10px );
border-radius: 10px;
padding: 40px;
}
.support .support_cont .support_cont_inner:first-child{
margin-right: 10px;
}
.support .support_cont .support_cont_inner .title{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.support .support_cont .support_cont_inner .title .num{
font-size: 50px;
font-weight: 700;
color: var(--blue);
line-height: 1;
margin-right: 25px;
}
.support .support_cont .support_cont_inner .title h3{
font-size: 20px;
font-weight: 800;
line-height: 1.4;
}
.support .support_cont .support_cont_inner .image{
overflow: hidden;
border-radius: 10px;
}
.support .support_cont .support_cont_inner .btn{
width: 100%;
max-width: 240px;
margin: 40px auto 0;
}
.support .support_cont .support_cont_inner .btn a{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--main);
color: var(--main);
position: relative;
font-weight: 700;
border-radius: 500px;
padding: 15px 0;
line-height: 1;
}
.support .support_cont .support_cont_inner .btn a::after {
content: '';
width: 8px;
height: 12px;
background: url(../images/footer-arrow.png) no-repeat center;
background-size: 100%;
display: block;
position: relative;
top: 1px;
margin-left: 10px;
}
@media screen and (max-width:968px){
.support .support_cont .support_cont_inner .title h3{
font-size: 18px;
}
.support .support_cont .support_cont_inner .title .num{
font-size: 40px;
margin-right: 15px;
}
}
@media screen and (max-width:768px){
.support .comment h3{
font-size: 22px;
top: -20px;
}
.support .comment h3::before{
top: 10px;
width: 360px;
}
.support .comment .check_list{
margin: -10px auto 10px;
}
.support .comment .check_list ol li{
font-size: 16px;
line-height: 1;
}
.support .comment .check_list ol li::before{
width: 20px;
height: 21px;
background-size: 100%;
}
.support .support_cont{
display: block;
}
.support .support_cont .support_cont_inner{
width: 100%;
}
.support .support_cont .support_cont_inner:first-child{
margin-right: 0;
margin-bottom: 20px;
}
.support .support_cont .support_cont_inner{
padding: 20px;
}
.support .support_cont .support_cont_inner .btn{
margin-top: 20px;
}
}
@media screen and (max-width:568px){
.support .comment .check_list{
padding: 0 20px;
}
.support .comment h3 {
font-size: 24px;
top: 0;
margin-top: 20px;
}
.support .comment h3::before {
top: 5px;
width: 260px;
}
.support .comment .check_list {
padding: 0 20px;
margin: 20px auto;
}
.support .comment .check_list ol li {
font-size: 14px;
line-height: 1.5;
align-items: center;
padding: 0;
}
.support .comment .check_list ol li span {
width: calc(100% - 30px);
padding: 5px 0;
}
}
/*=====================================
*
*top06
*
=======================================*/
.top06{
margin: 80px auto;
}
.news_cont{
display: flex;
justify-content: space-between;
}
.news_cont .top_ttl{
text-align: left;
width: 25%;
border-right: 1px dashed var(--main);
margin: 0;
}
.news_cont .top_ttl .en{
text-align: left;
}
.news_cont .news_list {
width: 70%;
}
.news_cont .news_list ol{
}
.news_cont .news_list ol li{
margin-bottom: 30px;
}
.news_cont .news_list ol li:last-child{
margin-bottom: 0;
}
.news_cont .news_list ol li a{
display: flex;
align-items: center;
color: var(--main);
}
.news_cont .news_list ol li a .text{
display: flex;
border-bottom: 1px dashed var(--main);
padding: 3px 0;
margin-right: 10px;
width: calc(100% - 35px);
}
.news_cont .news_list ol li a .text .date{
margin-right: 20px;
min-width: 120px;
}
@media screen and (max-width:1060px){
.news_cont .top_ttl{
width: 20%;
}
.news_cont .news_list {
width: 75%;
}
}
@media screen and (max-width:968px){
.news_cont{
display: block;
}
.news_cont .top_ttl{
border-bottom: 1px dashed var(--main);
border-right: none;
width: 100%;
padding-bottom: 10px;
margin-bottom: 40px;
}
.news_cont .news_list {
width: 100%;
}
}
@media screen and (max-width:768px){
.news_cont .news_list ol li {
margin-bottom: 20px;
}
.news_cont .news_list ol li a{
border-bottom: 1px dashed var(--main);
}
.news_cont .news_list ol li a .text{
display: block;
border-bottom: none;
}
.news_cont .news_list ol li a .text .date{
margin-right: 20px;
opacity: .8;
}
}
/*=====================================
*
*page_header
*
=======================================*/
.page_header{
}
.page_header{
background: linear-gradient(to right,#ddfff8,#fff);
}
.page_header .page_header_inner{
position: relative;
height: 400px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row-reverse;
width: 100%;
max-width: 1100px;
padding: 0 20px;
margin: 0 auto;
}
.page_header .page_header_inner .bg{
position: absolute;
right: 0;
top: 0;
}
.page_header .page_header_inner .page_header_image{
height: 100%;
width: 100%;
text-align: right;
position: relative;
top: 20px;
width: 50%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.page_header .page_header_inner .page_header_image img{
max-height: 100%;
}
.page_header .page_header_inner .page_header_text{
position: relative;
width: 60%;
}
.page_header .page_header_inner h1{
color: var(--main);
font-size: 40px;
font-weight: bold;
line-height: 1.3;
}
.page_header .page_header_inner .text{
color: var(--main);
font-size: 18px;
line-height: 1.6;
margin-top: 40px;
}
@media screen and (max-width:1260px){
.page_header .page_header_inner .sub{
font-size: 26px;
}
.page_header .page_header_inner h1 span {
font-size: 20px;
}
}
@media screen and (max-width:968px){
.page_header .page_header_inner{
height: 300px;
}
}
@media screen and (max-width:768px){
.mv .mv_inner .bg{
right: 2%;
}
.page_header .page_header_inner .page_header_image {
width: 210px;
height: 100%;
bottom: -2px;
top: auto;
right: 5%;
}
.page_header .page_header_inner .text{
font-size: 16px;
}
}
@media screen and (max-width:650px){
}
@media screen and (max-width:568px){
.page_header .page_header_inner .bg {
position: absolute;
right: 5%;
bottom: -5%;
width: 80%;
}
.page_header .page_header_inner{
display: block;
}
.page_header .page_header_inner .page_header_image{
position: absolute;
right: 5%;
bottom: -2px;
}
.page_header .page_header_inner .page_header_image{
height: 140px;
width: inherit;
}
.page_header .page_header_inner .page_header_text{
width: 100%;
margin-top: 40px;
text-shadow: 0 0 5px #fff, 0 0 5px #fff;
}
.page_header .page_header_inner .page_header_text br{
display: none;
}
.page_header .page_header_inner h1{
font-size: 30px;
line-height: 1.3;
}
.page_header .page_header_inner .text{
margin-top: 20px;
font-size: 14px;
}
.page_header .page_header_inner.individual{
height: 230px;
}
}
/*=====================================
*
*page common
*
=======================================*/
#page .top_ttl h2{
font-size: 28px;
}
#page .center_text{
text-align: center;
margin: 60px auto;
}
.page_btn{
margin: 40px auto;
}
.page_btn ol{
display: flex;
justify-content: space-between;
}
.page_btn ol li{
max-width: 220px;
width: 100%;
}
.page_btn ol li a{
width: 100%;
background: var(--main);
color: #fff;
text-align: center;
font-weight: bold;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
position: relative;
border-radius: 500px;
line-height: 1.2;
}
.page_btn ol li a::before{
content: '';
display: block;
width: 14px;
height: 10px;
background: url(../images/page_btn-arrow.png)no-repeat center;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.page_title{
font-size: 28px;
font-weight: 700;
margin: 40px auto;
padding: 10px;
border-left: 10px solid var(--main);
border-bottom: 2px solid #ccc;
}
.page_title03{
margin: 60px auto 40px;
padding: 20px 0;
font-size: 24px;
font-weight: 700;
border-bottom: 2px solid #ccc;
position: relative;
}
.page_title03::after{
content: '';
display: block;
width: 80px;
height: 2px;
background: var(--main);
position: absolute;
left: 0;
bottom: -2px;
}
@media screen and (max-width:968px){
.page_title,
#page .top_ttl h2{
font-size: 24px;
}
.page_btn ol li{
max-width: 23%;
}
.page_btn ol li a{
font-size: 14px;
}
.page_btn ol li a::before{
right: 10px;
}
.page_title03{
font-size: 20px;
}
}
@media screen and (max-width:768px){
.page_btn ol {
flex-wrap: wrap;
}
.page_btn ol li {
max-width: 48%;
margin: 10px 0;
}
}
@media screen and (max-width:568px){
#page .center_text{
margin: 40px auto;
}
}
/*=====================================
*
*test
*
=======================================*/
#test .center_text{
margin: 60px auto;
text-align: center;
}
.tab{
}
#page .tab .center_text{
margin: 40px auto;
}
.tab .top_btn a{
font-size: 16px;
}
.tab .top_btn a::before {
content: '';
display: block;
width: 14px;
height: 10px;
background: url(../images/page_btn-arrow.png) no-repeat center;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.tab .tab_select{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 70px;
}
.tab .tab_select .tab_title{
width: 250px;
border: 1px solid var(--blue);
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-size: 20px;
font-weight: 500;
color: var(--blue);
border-radius: 10px 10px 0 0;
transition: ease all .4s;
}
.tab .tab_select .tab_title.active{
width: calc( 100% - 750px);
background: var(--blue);
color: #fff;
height: 70px;
font-size: 24px;
font-weight: 500;
}
.tab .tab_select .tab_title:hover{
cursor: pointer;
}
.tab .tab_cont{
border: 1px solid var(--blue);
position: relative;
top: -1px;
padding: 40px;
padding-bottom: 20px;
}
.tab .tab_cont .tab_cont_inner{
width: 100%;
display: none;
pointer-events: none;
}
.tab .tab_cont .tab_cont_inner.active{
pointer-events: all;
display: block;
}
.tab .tab_cont .tab_link{
}
.tab .tab_cont .tab_link ol{
display: flex;
justify-content: center;
}
.tab .tab_cont .tab_link ol li a{
color: var(--main);
position: relative;
display: inline-flex;
align-items: center;
border-bottom: 1px solid var(--main);
font-size: 14px;
}
.tab .tab_cont .tab_link ol li a::after{
content: '';
display: block;
width: 10px;
height: 6px;
margin-left: 10px;
background: url(../images/test/tab-link.png)no-repeat center;
}
.tab .tab_cont .tab_link ol li:first-child a{
margin-right: 80px;
}
.tab .tab_cont .text{
margin: 50px auto 60px;
}
.tab .tab_cont .text .title{
font-size: 24px;
font-weight: 500;
margin-bottom: 40px;
}
.tab .tab_cont .text p{
font-size: 14px;
font-weight: 400;
}
.tab .tab_cont h2{
font-size: 20px;
font-weight: 600;
position: relative;
padding-left: 30px;
margin: 60px auto 40px;
}
.tab .tab_cont h2::before{
content: '';
display: block;
width: 20px;
height: 2px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--main);
}
.tab .tab_cont .scroll_guide{
display: none;
}
.tab .tab_cont .tab_table{
margin: 40px auto;
}
.tab .tab_cont .tab_table table{
border-collapse: collapse;
width: 100%;
min-width: 978px;
}
.tab .tab_cont .tab_table table th{
width: 25%;
background: var(--blue);
color: #fff;
border: 1px solid #fff;
font-size: 20px;
font-weight: bold;
height: 80px;
vertical-align: middle;
}
.tab .tab_cont .tab_table table td{
border: 1px solid #aedada;
vertical-align: middle;
text-align: center;
font-weight: 500;
background: #f5f9f9;
padding: 10px 5px;
font-size: 15px;
}
.tab .tab_cont .tab_table table td.title{
min-height: 80px;
vertical-align: middle;
text-align: center;
padding: 20px 5px;
border-left: 1px solid #fff;
font-weight: 600;
background: #eef6f6;
}
.tab .tab_cont .tab_table table td:last-child{
border-right: 1px solid #fff;
}
.tab .tab_cont .tab_table table tr:last-child td{
border-bottom: none;
}
.tab .tab_cont .tab_table table td.bbn{
border-bottom: none;
}
.tab .tab_cont .center_image{
width: 100%;
max-width: 768px;
margin: 40px auto;
display: block;
}
.tab .tab_cont .test_text{
display: flex;
align-items: center;
justify-content: center;
margin: 40px auto 60px;
line-height: 1.8;
}
.tab .tab_cont .center_image{
text-align: center;
margin: 40px auto;
}
.tab .tab_cont .tab_table.col5 table th{
width: 23%;
}
.tab .tab_cont .tab_table.col5 table th:first-child{
width: 8%;
}
@media screen and (max-width:1100px){
.tab .tab_select .tab_title{
width: 24%;
}
.tab .tab_select .tab_title.active{
width: 28%;
}
.tab .tab_cont .tab_table {
overflow-x: scroll;
}
}
@media screen and (max-width:968px){
.tab .tab_cont{
padding: 20px;
}
.tab .tab_cont .scroll_guide{
display: block;
font-size: 14px;
margin-bottom: -30px;
}
.tab .tab_cont .text .title{
font-size: 20px;
}
}
@media screen and (max-width:768px){
.tab .tab_select .tab_title{
font-size: 18px;
}
.tab .tab_select .tab_title.active{
font-size: 22px;
}
}
@media screen and (max-width:568px){
.tab .tab_select{
height: 50px;
}
.tab .tab_cont h2{
margin: 40px auto 20px;
}
.tab .tab_select .tab_title{
font-size: 14px;
height: 40px;
}
.tab .tab_select .tab_title.active{
font-size: 18px;
height: 50px;
}
.tab .tab_cont .scroll_guide{
margin-bottom: -10px;
}
.tab .tab_cont .tab_table {
margin: 20px auto;
}
.tab .tab_cont .center_image {
text-align: center;
margin: 20px auto;
}
.tab .tab_cont .test_text{
font-size: 14px;
margin: 40px auto;
}
}
/*=====================================
*
*report
*
=======================================*/
.report{
margin: 80px auto 0;
background: #f5f9f9;
overflow: hidden;
}
.report .report_inner{
padding: 40px;
background: #fff;
margin-bottom: 40px;
}
.report .report_inner .report_inner_flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.report .report_inner .report_inner_flex .image{
max-width: 260px;
width: 100%;
}
.report .report_inner .report_inner_flex .text{
width: calc( 100% - 280px );
}
.report .report_inner .report_inner_flex .text ol li{
padding: 20px 0;
font-size: 20px;
line-height: 1;
font-weight: 600;
}
.report .report_inner .report_inner_flex .text ol li:nth-child(2){
border-top: 1px dashed #b1cdd5;
border-bottom: 1px dashed #b1cdd5;
}
.report .report_inner .report_inner_flex .text ol li .head{
color: #d50505;
}
.report .report_inner .report_inner_flex .text ol li .mini{
font-size: 14px;
display: inline-block;
}
.report .report_inner .report_inner_flex .text .btn{
margin-top: 40px;
font-size: 14px;
position: relative;
display: inline-block;
border-bottom: 1px solid var(--main);
}
.report .report_inner .report_inner_flex .text .btn::after{
content: '';
width: 13px;
height: 13px;
background: url(../images/icon-modal.png) no-repeat center;
display: inline-block;
margin: 0 10px;
}
.report .report_inner .report_inner_flex .text .btn:hover{
cursor: pointer;
opacity: .7;
}
.report .report_inner .bottom{
margin-top: 20px;
font-size: 14px;
color: #16596d;
}
.report .report_modal{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
background: #fff;
border-radius: 10px;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
padding: 20px;
box-shadow: 0px 5px 15px 0 #0000003b;
z-index: 98;
min-width: 497px;
}
.report .report_modal.active{
opacity: 1;
pointer-events: all;
}
.report .report_modal img{
width: 457px;
}
.report .report_modal .close{
text-align: center;
font-size: 14px;
text-decoration: underline;
transition: ease all .4s;
}
.report .report_modal .close:hover{
cursor: pointer;
opacity: .7;
}
.report .report_modal_bg{
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
width: 100vw;
height: 100vh;
}
.report .report_modal_bg.active{
pointer-events: all;
opacity: .3;
}
@media screen and (max-width:968px){
.report .report_inner .report_inner_flex .text ol li{
line-height: 1.2;
}
}
@media screen and (max-width:768px){
.report .report_inner{
padding: 20px;
}
.report .report_inner .report_inner_flex .image{
max-width: 160px;
width: 100%;
}
.report .report_inner .report_inner_flex .text {
width: calc(100% - 180px);
}
.report .report_inner .report_inner_flex .text ol li{
font-size: 16px;
padding: 15px 0;
}
.report .report_inner .report_inner_flex .text .btn{
margin-top: 20px;
}
}
@media screen and (max-width:568px){
.report .report_inner .report_inner_flex{
display: block;
}
.report .report_inner .report_inner_flex .image{
margin: 0 auto;
}
.report .report_inner .report_inner_flex .text {
width: 100%;
display: flex;
flex-flow: column-reverse;
}
.report .report_inner .report_inner_flex .text .btn {
margin: 10px auto;
}
.report .report_modal{
min-width: 96%;
}
.report .report_modal img {
width: 100%;
}
}
/*=====================================
*
*score
*
=======================================*/
.score{
margin: 80px auto;
background: #f5f9f9;
overflow: hidden;
}
.score .score_inner{
padding: 40px;
background: #fff;
margin-bottom: 40px;
}
.score .score_inner .score_inner_flex{
display: flex;
justify-content: flex-start;
align-items: center;
}
.score .score_inner .score_inner_flex .image{
max-width: 440px;
width: 100%;
margin-right: 20px;
}
.score .score_inner .score_inner_flex .text{
width: 100%;
max-width: 360px;
}
.score .score_inner .score_inner_flex .text ol li{
padding: 20px 0;
line-height: 1;
font-weight: 600;
}
.score .score_inner .score_inner_flex .text ol li a{
display: flex;
justify-content: flex-start;
align-items: center;
}
.score .score_inner .score_inner_flex .text ol li a .pdf{
margin-right: 10px;
width: 28px;
}
.score .score_inner .score_inner_flex .text ol li a .title{
color: var(--main);
padding: 10px;
border-bottom: 1px dashed var(--main);
width: calc( 100% - 38px );
font-size: 16px;
position: relative;
}
.score .score_inner .score_inner_flex .text ol li a .title::after{
content: '';
width: 13px;
height: 13px;
background: url(../images/icon-modal.png) no-repeat center;
display: inline-block;
margin: 0 10px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(calc(-50% - .5px));
}
.score .score_inner .score_inner_flex .text ol li .mini{
font-size: 14px;
display: inline-block;
}
.score .score_inner .score_inner_flex .text .btn{
margin-top: 40px;
font-size: 14px;
position: relative;
display: inline-block;
border-bottom: 1px solid var(--main);
}
.score .score_inner .score_inner_flex .text .btn::after{
content: '';
width: 13px;
height: 13px;
background: url(../images/icon-modal.png) no-repeat center;
display: inline-block;
margin: 0 10px;
}
.score .score_inner .score_inner_flex .text .btn:hover{
cursor: pointer;
opacity: .7;
}
.score .score_inner .bottom{
margin-top: 20px;
font-size: 14px;
color: #16596d;
}
.score .score_modal{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
background: #fff;
border-radius: 10px;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
padding: 20px;
box-shadow: 0px 5px 15px 0 #0000003b;
z-index: 98;
min-width: 1064px;
}
.score .score_modal.active{
opacity: 1;
pointer-events: all;
}
.score .score_modal img{
width: 1024px;
}
.score .score_modal .close{
text-align: center;
font-size: 14px;
text-decoration: underline;
transition: ease all .4s;
}
.score .score_modal .close:hover{
cursor: pointer;
opacity: .7;
}
.score .score_modal_bg{
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
width: 100vw;
height: 100vh;
}
.score .score_modal_bg.active{
pointer-events: all;
opacity: .3;
}
@media screen and (max-width:1160px){
.score .score_modal{
width: 96%;
min-width: inherit;
}
.score .score_modal img{
max-width: 100%;
}
}
@media screen and (max-width:968px){
.score .score_inner .score_inner_flex .text ol li{
line-height: 1.2;
}
.score .score_modal{
}
}
@media screen and (max-width:768px){
.score .score_inner{
padding: 20px;
}
.score .score_inner .score_inner_flex .image{
max-width: 310px;
width: 100%;
}
.score .score_inner .score_inner_flex .text {
width: calc(100% - 180px);
}
.score .score_inner .score_inner_flex .text ol li{
font-size: 16px;
padding: 15px 0;
}
.score .score_inner .score_inner_flex .text .btn{
margin-top: 20px;
}
}
@media screen and (max-width:568px){
.score .score_inner .score_inner_flex{
display: block;
}
.score .score_inner .score_inner_flex .image{
margin: 0 auto;
}
.score .score_inner .score_inner_flex .text {
width: 100%;
display: flex;
flex-flow: column-reverse;
max-width: 100%;
}
.score .score_inner .score_inner_flex .text .btn {
margin: 10px auto;
}
.score .score_modal{
min-width: 96%;
}
.score .score_modal img {
width: 100%;
}
}
/*=====================================
*
*business
*
=======================================*/
.business_image{
margin: 80px auto;
}
.business_image .center_image{
text-align: center;
margin: 0 auto;
}
.business_image .center_image img{
max-width: 800px;
width: 80%;
}
.business_btn{
margin-top: 40px;
font-size: 14px;
position: relative;
display: inline-block;
border-bottom: 1px solid var(--main);
margin: 20px auto;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.business_btn a{
color: var(--main);
transition: ease all .4s;
}
.business_btn::after{
content: '';
width: 13px;
height: 13px;
background: url(../images/icon-modal.png) no-repeat center;
display: inline-block;
margin-left: 10px;
}
.business_btn:hover{
cursor: pointer;
opacity: .7;
}
.business_modal{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
background: #fff;
border-radius: 10px;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
padding: 20px;
box-shadow: 0px 5px 15px 0 #0000003b;
z-index: 98;
min-width: 1064px;
}
.business_modal.active{
opacity: 1;
pointer-events: all;
}
.business_modal img{
width: 1024px;
}
.business_modal .close{
text-align: center;
font-size: 14px;
text-decoration: underline;
transition: ease all .4s;
}
.business_modal .close:hover{
cursor: pointer;
opacity: .7;
}
.business_modal_bg{
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: 0;
pointer-events: none;
transition: ease all .4s;
width: 100vw;
height: 100vh;
}
.business_modal_bg.active{
pointer-events: all;
opacity: .3;
}
@media screen and (max-width:1100px){
.business_modal{
min-width: inherit;
width: 96%;
}
}
/*=====================================
*
*page_price
*
=======================================*/
.page_price{
margin: 80px auto;
}
.page_price .prace_list{
margin: 40px auto;
display: flex;
justify-content: space-between;
background: var(--main);
padding: 20px;
}
.page_price .prace_list .price_list_inner{
padding: 15px;
background: #fff;
width: calc( 100% - 20px );
}
.page_price .prace_list .price_list_inner:first-child{
margin-right: 20px;
}
.page_price .prace_list .price_list_inner h3{
font-size: 24px;
font-weight: 700;
color: var(--main);
border-bottom: 2px solid var(--main);
padding: 20px 0;
}
.page_price .prace_list .price_list_inner h3 span{
border: none;
}
.page_price .prace_list .price_list_inner .text{
margin: 20px auto;
line-height: 1.6;
font-size: 14px;
min-height: 46px;
}
.page_price .prace_list .price_list_inner .price_table{
width: 100%;
}
.page_price .prace_list .price_list_inner .price_table table{
border-collapse: collapse;
width: 100%;
}
.page_price .prace_list .price_list_inner .price_table table th{
width: 64%;
background: #f4f9fa;
padding: 15px 5px;
height: auto;
text-align: left;
border: 1px solid #94abb0;
vertical-align: middle;
font-size: 14px;
}
.page_price .prace_list .price_list_inner .price_table table th span{
font-weight: 600;
}
.page_price .prace_list .price_list_inner .price_table table td{
width: 36%;
background: #fff;
padding: 15px 5px;
border: 1px solid var(--main);
font-size: 16px;
height: auto;
font-weight: 500;
vertical-align: middle;
text-align: center;
border: 1px solid #94abb0;
}
.page_price .prace_list .price_list_inner .price_table table td span{
font-family: 'Noto Sans JP';
font-size: 12px;
font-weight: 700;
}
.page_price .prace_list .price_list_inner .price_table table td .saled{
font-family: 'Noto Sans JP';
font-size: 12px;
font-weight: 700;
padding: 0;
line-height: 1;
background: none;
display: inline-block;
margin-left: 0;
}
.page_price .prace_list .price_list_inner .price_table .bottom{
text-align: right;
font-size: 12px;
font-weight: 500;
}
@media screen and (max-width:1060px){
.page_price .prace_list .price_list_inner .price_table table th{
padding: 10px;
}
.page_price .prace_list .price_list_inner .price_table table td{
padding: 10px;
font-size: 18px;
}
.page_price .prace_list .price_list_inner .price_table table td .saled{
padding: 5px 8px;
margin-left: 8px;
}
}
@media screen and (max-width:968px){
.page_price .prace_list{
display: block;
}
.page_price .prace_list .price_list_inner{
width: 100%;
}
.page_price .prace_list .price_list_inner:first-child{
margin-right: 0;
margin-bottom: 20px;
}
.page_price .prace_list .price_list_inner h3{
font-size: 22px;
}
}
@media screen and (max-width:568px){
.page_price .prace_list .price_list_inner h3{
font-size: 20px;
}
.page_price .prace_list .price_list_inner .price_table table th{
width: 50%;
font-size: 16px;
}
.page_price .prace_list .price_list_inner .price_table table td{
width: 50%;
padding: 10px;
font-size: 18px;
line-height: 1.2;
}
.page_price .prace_list .price_list_inner .price_table table td .saled{
padding: 0;
margin-left: 0;
}
}
/*=====================================
*
*select
*
=======================================*/
.select{
margin: 80px auto;
}
.select .select_cont{
margin: 60px auto;
background: #f5f9f9;
padding: 20px;
}
.select .select_cont .select_cont_flex{
display: flex;
justify-content: space-between;
}
.select .select_cont .select_cont_flex .select_inner{
width: 49%;
position: relative;
}
.select .select_cont .select_cont_flex .select_inner .image{
position: relative;
}
.select .select_cont .select_cont_flex .select_inner .image::before{
content: '';
display: block;
position: absolute;
left: 10px;
top: 10px;
width: calc( 100% - 20px );
height: calc( 100% - 20px );
border: 1px solid #fff;
opacity: .3;
}
.select .select_cont .select_cont_flex .select_inner .tag{
position: absolute;
left: 10px;
top: -10px;
}
.select .select_cont .select_cont_flex .select_inner .tag ol{
display: flex;
justify-content: flex-start;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li{
background: #fffb00;
margin-right: 10px;
text-align: center;
padding: 15px 5px;
width: 90px;
height: 90px;
position: relative;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li::before {
content: '';
border: 10px solid transparent;
border-top: 0px solid #fffb00;
border-left: 47px solid #fffb00;
position: absolute;
bottom: -10px;
left: 0;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li::after {
content: '';
border: 10px solid transparent;
border-top: 0px solid #fffb00;
border-right: 47px solid #fffb00;
position: absolute;
bottom: -10px;
right: 0;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li .title{
margin-top: 5px;
font-size: 12px;
font-weight: 700;
}
.select .select_cont .select_cont_flex .select_inner .text{
font-size: 20px;
font-weight: 700;
text-align: center;
margin-top: 10px;
}
.select .select_cont .top_btn{
margin-bottom: 0;
}
@media screen and (max-width:968px){
.select .select_cont .select_cont_flex .select_inner .text{
font-size: 18px;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li::before,
.select .select_cont .select_cont_flex .select_inner .tag ol li::after{
bottom: -9px;
}
}
@media screen and (max-width:768px){
.select .select_cont .select_cont_flex{
display: block
}
.select .select_cont .select_cont_flex .select_inner{
margin: 40px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
}
@media screen and (max-width:568px){
.select .select_cont .select_cont_flex .select_inner .tag ol li{
padding: 10px 5px;
width: 74px;
height: 74px;
}
.select .select_cont .select_cont_flex .select_inner .tag ol li .title{
font-size: 10px;
}
.select .select_cont .select_cont_flex .select_inner .text{
font-size: 14px;
}
}
/*=====================================
*
*remote_about
*
=======================================*/
.remote_about{
max-width: calc( 100% - 100px );
width: 100%;
margin: 80px auto;
background: var(--blue);
overflow: hidden;
padding-bottom: 60px;
}
.remote_about .top_ttl {
margin: 60px auto 40px;
}
.remote_about .top_ttl h2{
color: #fff;
font-size: 28px;
}
.remote_about .top_ttl .sub{
color: #fff;
}
.remote_about .remote_tab{
margin: 40px auto;
}
.remote_about .remote_tab .remote_tab_select{
display: flex;
justify-content: flex-start;
align-items: flex-end;
height: 82px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title{
width: 250px;
background: #3ab1b1;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
padding: 15px 0;
position: relative;
border-radius: 10px 10px 0 0;
border: 1px solid #fff;
transition: ease all .4s;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title:hover{
cursor: pointer;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title span{
font-size: 18px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #fff;
color: #3ab1b1;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active{
width: calc( 100% - 750px );
background: #fff;
color: var(--main);
padding: 25px 0;
font-size: 20px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active span{
font-size: 24px;
background: var(--main);
color: #fff;
width: 40px;
height: 40px;
}
.remote_about .remote_tab .remote_tab_cont{
background: #fff;
padding: 40px;
}
.remote_about .remote_tab .remote_tab_cont h3{
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
}
.remote_about .remote_tab .remote_tab_cont .remote_tab_inner{
width: 100%;
display: none;
pointer-events: none;
}
.remote_about .remote_tab .remote_tab_cont .remote_tab_inner.active{
pointer-events: all;
display: block;
}
.remote_about .remote_tab .remote_tab_cont .image_list{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.remote_about .remote_tab .remote_tab_cont .image_list.col1{
width: 100%;
padding: 20px;
background: #eefbfb;
text-align: center;
}
.remote_about .remote_tab .remote_tab_cont .image_list.col3 .image{
width: 32%;
padding: 20px;
background: #eefbfb;
text-align: center;
}
.remote_about .remote_tab .remote_tab_cont .image_list.col4 .image{
width: 23%;
padding: 20px;
background: #eefbfb;
text-align: center;
}
.remote_about .remote_tab .remote_tab_cont .image_list .image .title{
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
min-height: 54px;
}
.remote_about .remote_tab .remote_tab_cont .center_image{
text-align: center;
padding: 20px;
background: #eefbfb;
}
@media screen and (max-width:1168px){
.remote_about{
max-width: 100%;
}
}
@media screen and (max-width:1100px){
.remote_about .remote_tab .remote_tab_select .remote_tab_title{
width: 24%;
position: relative;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active{
width: 28%;
padding: 20px 0;
top: 1px;
}
}
@media screen and (max-width:968px){
.remote_about .top_ttl {
margin: 40px auto;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title{
padding: 5px 0;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title span{
width: 20px;
height: 20px;
font-size: 14px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active span {
font-size: 18px;
background: var(--main);
color: #fff;
width: 30px;
height: 30px;
}
.remote_about .remote_tab .remote_tab_cont{
padding: 40px 20px;
}
.remote_about .remote_tab .remote_tab_cont .image_list .image .title{
font-size: 16px;
}
.remote_about .remote_tab .remote_tab_cont h3 {
font-size: 20px;
margin-bottom: 20px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title{
font-size: 16px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title span {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active {
padding: 10px;
font-size: 18px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active span {
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width:568px){
.remote_about .remote_tab .remote_tab_select{
height: 70px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title {
font-size: 14px;
padding: 8px 0;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active {
padding: 10px;
font-size: 16px;
}
.remote_about .remote_tab .remote_tab_select .remote_tab_title.active span {
font-size: 14px;
width: 24px;
height: 24px;
}
}
/*=====================================
*
*merit_text
*
=======================================*/
.merit_text{
margin: 80px auto;
}
.merit_text .left_text{
margin: 60px auto;
line-height: 1.8;
}
.merit_text .box_text{
border: 2px solid #176f6f;
background: #faffff;
padding: 0 40px 50px;
border-radius: 10px;
color: #176f6f;
}
.merit_text .box_text h3{
text-align: center;
font-weight: 600;
position: relative;
font-size: 24px;
top: -20px;
z-index: 2;
}
.merit_text .box_text h3 span{
position: relative;
}
.merit_text .box_text h3 span::before{
content: '';
display: block;
height: 8px;
width: 100%;
padding: 0 40px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% + 1px));
z-index: -1;
}
.merit_text .box_text p{
line-height: 2;
padding-top: 10px;
}
/*=====================================
*
*study_text
*
=======================================*/
.study_text{
margin: 80px auto;
}
.study_text .left_text{
margin: 60px auto;
line-height: 1.6;
}
.pick_text{
border: 2px solid #176f6f;
background: #faffff;
padding: 0 40px 35px;
border-radius: 10px;
color: #176f6f;
}
.pick_text h3{
font-weight: 600;
position: relative;
font-size: 24px;
top: -20px;
left: 50px;
z-index: 2;
}
.pick_text h3 span{
position: relative;
}
.pick_text h3 span::before{
content: '';
display: block;
height: 10px;
width: 100%;
padding: 0 20px;
background: #fff;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
z-index: -1;
}
.pick_text ol li{
position: relative;
font-weight: 500;
line-height: 2;
margin: 15px 0;
padding-left: 30px;
line-height: 1.6;
}
.pick_text ol li::before{
content: '';
display: inline-block;
width: 16px;
height: 16px;
background: url(/cestbusiness/assets/images/study-support/star.png)no-repeat center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width:968px){
.pick_text h3{
font-size: 20px;
top: -15px;
}
.pick_text h3 span::before{
top: 6px;
}
}
@media screen and (max-width:568px){
.pick_text h3 {
font-size: 18px;
top: -15px;
left: 0;
text-align: center;
}
.pick_text{
font-size: 14px;
padding: 0 20px 10px;
}
}
/*=====================================
*
*study_wrapper
*
=======================================*/
.study_wrapper{
margin: 80px auto;
}
.study_cont{
background: var(--main);
padding: 40px 20px;
margin: 80px auto;
}
.study_cont h2{
color: #fff;
text-align: center;
font-weight: 800;
font-size: 28px;
margin: 40px auto;
}
.study_cont.vertical .study_inner{
margin: 40px auto 0;
}
.study_cont.vertical .study_inner:first-child{
margin: 0 auto;
}
.study_cont .study_inner.flex{
display: flex;
justify-content: space-between;
}
.study_cont .study_inner .study_inner_col{
background: #fff;
padding: 40px 20px;
}
.study_cont .study_inner .study_inner_col .video .video_inner{
position: relative;
padding-top: 56.3%;
}
.study_cont .study_inner .study_inner_col .video .video_inner iframe{
position: absolute;
left: 0;
top: 0;
}
.study_cont .study_inner .study_inner_col .video .video_text{
font-size: 12px;
text-align: center;
font-weight: 400;
margin-top: 10px;
}
.study_cont .study_inner .study_inner_col .video .video_text a{
color: var(--main);
}
.study_cont .study_inner .study_inner_col h3{
font-size: 24px;
font-weight: 700;
margin: 20px 0;
padding: 20px 0;
line-height: 1;
border-bottom: 2px solid var(--main);
}
.study_cont .study_inner .study_inner_col p{
font-size: 14px;
margin: 40px auto;
line-height: 2;
}
.study_cont .study_inner .study_inner_col p span{
font-size: 17px;
font-weight: 600;
}
.study_cont .study_inner .study_inner_col p span.red{
color: #ff2c2c;
}
.study_cont .study_inner .study_inner_col .text_btn{
max-width: 320px;
}
.study_cont .study_inner .study_inner_col .text_btn a{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #999;
background: #fff;
position: relative;
height: 70px;
color: #333;
border-radius: 500px;
}
.study_cont .study_inner .study_inner_col .text_btn a::before{
content: '';
width: 18px;
height: 18px;
background: url(/cestbusiness/assets/images/study-support/tab_link.png)no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.study_cont .study_inner .study_inner_col table{
width: 100%;
border-collapse: collapse;
margin: 40px auto;
}
.study_cont .study_inner .study_inner_col table th{
font-size: 14px;
font-weight: 400;
padding: 10px;
background: #f4f9fa;
border: 1px solid #94abb0;
width: 40%;
}
.study_cont .study_inner .study_inner_col table td{
font-size: 16px;
font-weight: 500;
padding: 10px;
border: 1px solid #94abb0;
width: 60%;
text-align: center;
}
.study_cont .study_inner .study_inner_col table td span{
font-size: 12px;
display: inline-block;
}
.study_cont .study_inner .study_inner_col .btn{
text-align: center;
}
.study_cont .study_inner .study_inner_col .btn a{
background: #fcb116;
color: var(--main);
font-weight: 600;
font-size: 20px;
position: relative;
overflow: hidden;
border-radius: 500px;
width: 100%;
max-width: 320px;
display: flex;
justify-content: center;
align-items: center;
height: 70px;
margin: 0 auto;
}
.study_cont .study_inner .study_inner_col .btn a::before {
content: '';
width: 12px;
height: 16px;
background: url(../images/footer-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.study_cont .study_inner .study_inner_col .btn ol{
display: flex;
justify-content: center;
}
.study_cont .study_inner .study_inner_col .btn ol li{
max-width: 300px;
width: 30%;
}
.study_cont .study_inner .study_inner_col .btn ol li.first{
margin-right: 60px;
}
.study_cont .study_inner .study_inner_col .btn ol li.first a{
color: #fff;
background: var(--main);
}
.study_cont .study_inner .study_inner_col .btn ol li.first a::before {
content: '';
width: 12px;
height: 16px;
background: url(../images/btn-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.study_cont .study_inner .study_inner_col .btn ol.col3 li.first{
margin-right: 0;
}
.study_cont .study_inner .study_inner_col .btn ol.col3 li:nth-child(2){
margin: 0 40px;
}
.study_cont .study_inner .study_inner_col .btn_bottom{
margin-top: 10px;
text-align: center;
}
.study_cont .study_inner .study_inner_col .btn_bottom a{
font-size: 14px;
text-align: center;
text-decoration: underline;
color: var(--main);
}
.study_cont .study_inner .study_inner_col .tag{
margin-bottom: 20px;
}
.study_cont .study_inner .study_inner_col .tag ol{
display: flex;
justify-content: flex-start;
}
.study_cont .study_inner .study_inner_col .tag ol li.individual{
background: var(--blue);
color: #fff;
padding: 5px 15px;
line-height: 1;
font-weight: 700;
font-size: 12px;
margin-right: 15px;
}
.study_cont .study_inner .study_inner_col .tag ol li.corporation{
background: #fffb00;
color: var(--main);
padding: 5px 15px;
line-height: 1;
font-weight: 700;
font-size: 12px;
margin-right: 15px;
}
.study_cont .study_inner.flex .study_inner_col{
width: 49.02%;
}
.study_cont .study_inner.flex .study_inner_col .text{
width: 100%;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex{
display: flex;
justify-content: space-between;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .video{
width: 46.94%;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .video.size34{
width: 34.5%;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .text{
width: 46.94%;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .text h3{
margin-top: 0;
padding-top: 0;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .image{
display: flex;
justify-content: center;
align-items: center;
}
.study_cont .study_inner .study_inner_col.size60 .study_inner_col_flex .image{
width: 34.5%;
}
.study_cont .study_inner .study_inner_col.size60 .study_inner_col_flex .text{
width: 61.225%;
}
.study_cont .note{
margin-top: 40px;
}
.study_cont .note .title{
font-size: 18px;
margin-bottom: 20px;
color: #fff;
}
.study_cont .note table{
font-size: 14px;
font-weight: 300;
color: #e0eaed;
}
.study_cont .note table th{
font-size: 14px;
padding: 3px 0;
text-align: left;
width: 110px;
}
.study_cont .note table td{
font-size: 14px;
padding: 3px 0;
line-height: 1.8;
}
@media screen and (max-width:968px){
.study_cont h2{
font-size: 24px;
}
.study_cont .study_inner.flex{
display: block;
}
.study_cont .study_inner.flex .study_inner_col{
width: 100%;
margin-bottom: 40px;
}
.study_cont .study_inner .study_inner_col h3{
font-size: 20px;
}
.study_cont .study_inner .study_inner_col .btn ol li{
max-width: inherit;
width: 32%;
}
.study_cont .study_inner .study_inner_col .btn a{
height: 60px;
width: 100%;
max-width: 320px;
font-size: 16px;
}
.study_cont .study_inner .study_inner_col .btn a::before{
right: 20px;
}
.study_cont .study_inner .study_inner_col .btn ol.col3 li:nth-child(2) {
margin: 0 20px;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex{
display: block;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .video,
.study_cont .study_inner .study_inner_col.size60 .study_inner_col_flex .image,
.study_cont .study_inner .study_inner_col .study_inner_col_flex .video.size34{
width: 100%;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .text,
.study_cont .study_inner .study_inner_col.size60 .study_inner_col_flex .text{
width: 100%;
margin-top: 40px;
}
}
@media screen and (max-width:768px){
.study_text .left_text{
margin: 40px auto;
}
.study_cont .study_inner .study_inner_col .btn ol{
display: block;
}
.study_cont .study_inner .study_inner_col .btn ol li,
.study_cont .study_inner .study_inner_col .btn ol.col3 li.first,
.study_cont .study_inner .study_inner_col .btn ol.col3 li:nth-child(2){
margin: 20px auto;
width: 100%;
}
.study_cont .study_inner .study_inner_col .text_btn{
margin: 0 auto;
}
.study_cont .study_inner .study_inner_col .study_inner_col_flex .text h3{
line-height: 1.5;
}
}
@media screen and (max-width:568px){
.study_cont .study_inner .study_inner_col{
padding: 20px;
}
.study_cont .study_inner .study_inner_col p{
margin: 20px auto;
}
.study_cont .study_inner .study_inner_col .btn_bottom a{
font-size: 12px;
}
.study_cont .study_inner .study_inner_col h3{
padding: 10px 0;
}
.study_cont .note .title{
font-size: 16px;
}
.study_cont .note table th{
font-size: 12px;
width: 90px;
}
.study_cont .note table td{
font-size: 12px;
}
.study_cont .study_inner .study_inner_col.size60 .study_inner_col_flex .image{
padding: 20px 0;
}
}
/*=====================================
*
*individual common
*
=======================================*/
#page.individual .top_ttl h2{
font-size: 36px;
}
#page.individual .left_text{
margin: 40px auto;
}
#page.individual .page_title{
margin: 0 auto 40px;
}
.fixed_banner{
position: fixed;
right: 0;
bottom: 40px;
z-index: 9;
transition: ease all .4s;
max-width: 298px;
width: 100%;
border: 2px solid #007874;
background: #007874;
opacity: 0;
pointer-events: none;
}
.fixed_banner.active{
opacity: 1;
pointer-events: all;
}
.fixed_banner.remove,
.individual .fixed_banner.remove{
pointer-events: none !important;
opacity: 0 !important;
}
.fixed_banner .close{
position: absolute;
left: 0;
top: 0;
transform: translate(-40%,-40%);
background: #007874;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 26px;
line-height: 1;
z-index: 2;
border-radius: 50%;
}
.fixed_banner .close:hover{
cursor: pointer;
}
.fixed_banner .btn{
padding: 10px;
}
.fixed_banner .btn .btn_inner{
}
.fixed_banner .btn .btn_inner a{
background: #fff;
color: #007874;
font-weight: 600;
width: 100%;
border-radius: 500px;
padding: 15px 10px;
display: block;
text-align: center;
margin: 0 auto 20px;
position: relative;
}
.fixed_banner .btn .btn_inner:last-child a{
margin-bottom: 0;
}
.fixed_banner .btn .btn_inner a::before{
content: '';
display: block;
width: 7px;
height: 10px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(calc( -50% - 1px ));
background: url(../images/candidate/banner-arrow.png)no-repeat center;
}
@media screen and (max-width: 1260px){
.individual .fixed_banner .close{
width: 30px;
height: 30px;
font-size: 20px;
}
}
@media screen and (max-width: 968px) {
#page.individual .top_ttl h2 {
font-size: 24px;
}
.fixed_banner,
.fixed_banner.active{
opacity: 0;
pointer-events: none;
}
.individual .fixed_banner,
.individual .fixed_banner.active{
width: 60%;
opacity: 1;
pointer-events: all;
}
}
/*=====================================
*
*individual_header
*
=======================================*/
.individual_header{
position: relative;
background: url(../images/candidate/mv-pc.jpg)no-repeat center top;
height: 500px;
}
.individual_header .mv_btn {
position: absolute;
right: 5%;
bottom: 40px;
z-index: 2;
}
.individual_header .individual_header_inner .individual_header_text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1640px;
padding: 0 20px;
color: var(--main);
font-weight: 800;
z-index: 2;
}
.individual_header .individual_header_inner .individual_header_text h1{
font-size: 48px;
margin: 20px auto 30px;
line-height: 1;
}
.individual_header .individual_header_inner .individual_header_text h1 span.blue{
color: var(--blue);
}
.individual_header .individual_header_inner .individual_header_text h1 .title{
display: block;
margin-top: 20px;
}
.individual_header .individual_header_inner .individual_header_text h1 .title span{
font-size: 23px;
}
.individual_header .individual_header_inner .individual_header_text .border_text{
position: relative;
padding-left: 40px;
font-size: 18px;
font-weight: 500;
line-height: 1;
}
.individual_header .individual_header_inner .individual_header_text .border_text::before{
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--main);
position: absolute;
left: 0;
top: calc( 50% + 1px );
transform: translateY(-50%);
}
.individual_header .individual_header_inner .individual_header_text .text{
margin-top: 20px;
font-size: 18px;
font-weight: 500;
line-height: 1;
}
.individual_header .individual_header_inner .individual_header_text .btn{
margin-top: 60px;
}
.individual_header .individual_header_inner .individual_header_text .btn a{
max-width: 320px;
width: 100%;
height: 70px;
background: #fffb00;
color: var(--main);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 500;
border-radius: 500px;
position: relative;
}
.individual_header .individual_header_inner .individual_header_text .btn a::before {
content: '';
width: 8px;
height: 16px;
background: url(../images/footer-arrow.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.individual_header .individual_header_inner .individual_header_text .btn_text{
margin-top: 10px;
max-width: 320px;
width: 100%;
text-align: center;
}
.individual_header .individual_header_inner .individual_header_text .btn_text a{
font-size: 14px;
line-height: 1;
color: var(--main);
font-weight: 500;
text-decoration: underline;
}
@media screen and (max-width:1260px){
.individual_header{
background-position: 60%;
}
.individual_header::before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, #dcf0ef8a, transparent);
}
.individual_header .individual_header_inner .individual_header_text h1 .title span{
font-size: 20px;
}
}
@media screen and (max-width:968px){
.individual_header .mv_btn{
width: 200px;
}
.individual_header{
background-position: 75%;
}
.individual_header .individual_header_inner .individual_header_text h1{
font-size: 38px;
}
}
@media screen and (min-width:769px){
.individual_header .individual_header_inner .individual_header_text h1 br{
display: none;
}
}
@media screen and (max-width:768px){
.individual_header .individual_header_inner .individual_header_text h1{
line-height: 1.4;
}
}
@media screen and (min-width: 651px) {
.individual_header .mv_btn .pcnone {
display: none;
}
}
@media screen and (max-width: 650px) {
.individual_header{
height: auto;
background-size: cover;
}
.individual_header::before{
background: linear-gradient(to right, #dcf0ef6b, #dcf0ef6b, #dcf0ef6b, transparent);
}
.individual_header .individual_header_inner .individual_header_text{
position: relative;
left: 0;
top: 0;
transform: none;
padding-top: 40px;
padding-bottom: 60px;
}
.individual_header .individual_header_inner .individual_header_text .text{
line-height: 1.5;
padding-right: 20px;
}
.individual_header .individual_header_inner .individual_header_text .btn a{
margin: 0 auto;
}
.individual_header .individual_header_inner .individual_header_text .btn_text{
max-width: 100%;
}
.individual_header .mv_btn {
width: 100%;
left: 0;
bottom: 0;
transform: translateY(50%);
text-align: center;
z-index: 2;
}
.individual_header .mv_btn .spnone {
display: none;
}
.individual_header .individual_header_inner .individual_header_text h1 .title span{
display: block;
}
}
/*=====================================
*
*individual_top
*
=======================================*/
.individual_top{
margin: 80px auto;
position: relative;
}
.individual_top ol{
display: flex;
justify-content: space-between;
}
.individual_top ol li{
width: 30%;
background: #fff;
text-align: center;
padding: 40px 20px;
border-radius: 5px;
box-shadow: 0 5px 30px 0px #65899440, 0 5px 50px 0px #65899420
}
.individual_top ol li .title{
margin-top: 20px;
font-size: 20px;
font-weight: 700;
}
.individual .report{
background: none;
}
.individual .report .report_flex{
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px auto;
}
.individual .report .report_flex .text{
width: calc( 100% - 400px );
}
.individual .report .report_flex .text p{
line-height: 1.8;
}
.individual .report .report_flex .text .title{
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
}
.individual .report .report_flex .top_btn{
margin: 0;
}
.individual .report .report_inner{
border: 1px solid var(--main);
}
@media screen and (max-width: 968px) {
.individual_top ol li{
width: 32%;
}
.individual_top ol li .title{
font-size: 18px;
}
.individual_top ol li .title br{
display: none;
}
#page.individual .left_text br {
display: none;
}
.individual .report .report_flex{
display: block;
}
.individual .report .report_flex .text{
width: 100%;
}
.individual .report .report_flex .top_btn{
margin: 0 auto;
margin-top: 40px;
}
}
@media screen and (max-width: 768px){
.individual_top ol{
display: block;
}
.individual_top ol li{
width: 100%;
margin: 20px auto;
}
}
/*=====================================
*
*next_test
*
=======================================*/
.next_test{
margin: 80px auto;
}
.next_test .next_test_cont{
background: #f5f9f9;
padding: 40px 20px;
}
.next_test .next_test_cont h2{
color: var(--main);
font-weight: 800;
font-size: 28px;
}
.next_test .next_test_cont .next_test_inner{
padding: 30px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.next_test .next_test_cont .next_test_inner:nth-of-type(1){
border-bottom: 1px dashed #b1cdd5;
}
.next_test .next_test_cont .next_test_inner .text{
}
.next_test .next_test_cont .next_test_inner .text h3{
font-weight: 700;
font-size: 20px;
color: var(--main);
margin-bottom: 10px;
}
.next_test .next_test_cont .next_test_inner .btn{
width: 360px;
height: 70px;
}
.next_test .next_test_cont .next_test_inner .btn a{
color: var(--main);
border: 2px solid var(--main);
background: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 500px;
font-size: 20px;
font-weight: 700;
position: relative;
}
.next_test .next_test_cont .next_test_inner .btn a::before {
content: '';
width: 8px;
height: 12px;
background: url(../images/footer-arrow.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.next_test .next_test_cont .calendar{
text-align: right;
margin-top: 10px;
}
.next_test .next_test_cont .calendar a{
font-size: 14px;
font-weight: 500;
color: var(--main);
text-decoration: underline;
}
@media screen and (max-width:968px){
.next_test .next_test_cont h2 {
font-size: 24px;
}
.next_test .next_test_cont .next_test_inner .text h3{
font-size: 18px;
}
.next_test .next_test_cont .next_test_inner .btn {
width: 300px;
}
.next_test .next_test_cont .next_test_inner .btn a{
font-size: 16px;
}
}
@media screen and (max-width:850px){
.next_test .next_test_cont .next_test_inner{
display: block;
}
.next_test .next_test_cont .next_test_inner .btn{
margin-top: 20px;
}
}
@media screen and (max-width:768px){
.next_test .next_test_cont .next_test_inner{
padding: 20px 10px;
}
.next_test .next_test_cont .next_test_inner .btn{
width: 100%;
}
.next_test .next_test_cont .next_test_inner .btn a::before{
right: 20px;
}
}
/*=====================================
*
*step
*
=======================================*/
.step{
margin: 80px auto;
}
.step .step_list{
margin: 60px auto;
}
.step .step_list ol{
display: flex;
justify-content: space-between;
}
.step .step_list ol li{
width: calc( 100% / 4 - 45px);
border: 1px solid var(--main);
background: #fff;
position: relative;
text-align: center;
padding: 20px;
}
.step .step_list ol li::before{
content: '';
border: 10px solid transparent;
border-left: 10px solid var(--main);
position: absolute;
right: -45px;
top: 50%;
transform: translateY(-50%);
}
.step .step_list ol li:last-child::before{
content: none;
}
.step .step_list ol li .num{
text-align: center;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -55%);
line-height: 1;
font-size: 20px;
font-weight: 700;
width: 140px;
background: #fff;
}
.step .step_list ol li .num span{
font-size: 25px;
display: inline-block;
margin-left: 10px;
}
.step .step_list ol li .image{
margin: 30px auto;
margin-top: 20px;
}
.step .step_list ol li .title{
font-weight: 700;
font-size: 20px;
}
@media screen and (max-width:1100px){
.step .step_list ol{
overflow-x: scroll;
padding: 20px 0px;
}
.step .step_list ol li{
min-width: 220px;
margin-right: 65px;
}
.step .step_list ol li .title {
font-weight: 700;
font-size: 18px;
}
}
@media screen and (max-width:768px){
.step .step_list ol li {
min-width: 180px;
}
}
/*=====================================
*
*test_table
*
=======================================*/
.test_table{
margin: 80px auto;
}
.test_table .test_table_inner{
margin: 60px auto 0;
}
.test_table .test_table_inner table{
border-collapse: collapse;
}
.test_table .test_table_inner table tr th{
width: 420px;
border: 1px solid #fff;
background: var(--blue);
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 30px;
height: 80px;
}
.test_table .test_table_inner table tr th:first-child{
width: 220px;
}
.test_table .test_table_inner table tr td{
background: #f5f9f9;
border-right: 1px solid #aedada;
border-bottom: 1px solid #aedada;
padding: 15px 20px;
text-align: center;
vertical-align: middle;
font-weight: 700;
line-height: 1.2;
height: 80px;
}
.test_table .test_table_inner table tr td .comment{
display: inline-block;
position: relative;
color: #fff;
background: #78bdbd;
font-size: 12px;
line-height: 1;
padding: 8px 16px;
border-radius: 5px;
margin-bottom: 13px;
}
.test_table .test_table_inner table tr td .comment::before{
content: '';
border: 8px solid transparent;
border-top: 4px solid #78bdbd;
position: absolute;
bottom: -11px;
left: 50%;
transform: translateX(-50%);
}
.test_table .test_table_inner table tr td .blue{
font-size: 12px;
color: #78bdbd;
}
.test_table .test_table_inner table tr td .mini{
font-size: 12px;
font-weight: 500;
color: #335a65;
}
.test_table .test_table_inner table tr td .btn{
display: block;
}
.test_table .test_table_inner table tr td .btn.mt10{
margin-top: 10px;
}
.test_table .test_table_inner table tr td .btn a{
color: var(--main);
font-weight: 500;
background: #fff;
border: 1px solid var(--main);
border-radius: 500px;
padding: 5px 30px;
position: relative;
font-size: 12px;
display: inline-block;
}
.test_table .test_table_inner table tr td .btn a::before {
content: '';
width: 8px;
height: 4px;
background: url(../images/application/arrow.png) no-repeat center;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.test_table .test_table_inner table tr td:last-child{
border-right: none;
}
.test_table .test_table_inner table tr:last-child td{
border-bottom: none;
}
.test_table .test_table_inner table tr td.title{
background: #eef6f6;
font-size: 18px;
text-align: left;
vertical-align: middle;
}
.test_table .note{
margin-top: 10px;
font-size: 14px;
}
@media screen and (max-width:1100px){
.test_table .test_table_inner{
overflow-x: scroll;
}
.test_table .test_table_inner table tr th{
width: 35%;
}
.test_table .test_table_inner table tr th:first-child {
width: 30%;
}
}
@media screen and (max-width:968px){
.test_table .test_table_inner table tr td.title{
font-size: 16px;
}
.test_table .test_table_inner table {
width: 100%;
}
.test_table .test_table_inner table tr th{
font-size: 18px;
}
}
@media screen and (max-width:768px){
.test_table .test_table_inner table tr th{
width: 200px;
}
}
@media screen and (min-width:641px){
.test_table .table_scroll_text{
display: none;
}
}
@media screen and (max-width:640px){
.test_table .table_scroll_text{
font-size: 14px;
display: block;
margin-bottom: -50px;
}
.test_table .test_table_inner table {
width: 620px;
}
.test_table .test_table_inner table tr td {
padding: 15px;
font-size: 14px;
}
}
/*=====================================
*
*test_date
*
=======================================*/
.test_date{
margin: 80px auto;
}
.test_date .test_date_inner{
margin: 60px auto;
background: #f5f9f9;
padding: 40px 20px;
}
.test_date .test_date_inner h3{
font-size: 24px;
font-weight: 700;
border-bottom: 2px solid var(--main);
padding: 20px 0;
margin-bottom: 40px;
}
.test_date .test_date_inner .text{
margin: 40px auto;
font-weight: 500;
line-height: 2;
}
.test_date .test_date_inner .test_date_inner_table{
}
.test_date .test_date_inner .test_date_inner_table table{
width: 100%;
border-collapse: collapse;
}
.test_date .test_date_inner .test_date_inner_table table th{
width: 220px;
background: var(--blue);
color: #fff;
font-weight: 700;
font-size: 20px;
height: 80px;
vertical-align: middle;
text-align: center;
border: 1px solid #fff;
}
.test_date .test_date_inner .test_date_inner_table table th.size36{
width: 360px;
}
.test_date .test_date_inner .test_date_inner_table table th.size58{
width: 580px;
}
.test_date .test_date_inner .test_date_inner_table table th:first-child{
border-left: none;
}
.test_date .test_date_inner .test_date_inner_table table th:last-child{
border-right: none;
}
.test_date .test_date_inner .test_date_inner_table table td{
color: var(--main);
vertical-align: middle;
font-weight: 500;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid #aedada;
border-right: 1px solid #aedada;
background: #fff;
}
.test_date .test_date_inner .test_date_inner_table table .brnone{
border-right: none;
}
.test_date .test_date_inner .test_date_inner_table table .bbnone{
border-bottom: none;
}
.test_date .test_date_inner .test_date_inner_table table .title{
background: #eef6f6;
font-weight: 700;
text-align: left;
font-size: 18px;
}
.test_date .test_date_inner .address{
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
}
.test_date .test_date_inner .address .title{
font-weight: 700;
font-size: 16px;
}
.test_date .test_date_inner .address .tab_link{
margin-top: 20px;
}
.test_date .test_date_inner .address .tab_link a{
position: relative;
font-size: 12px;
font-weight: 600;
color: #19596b;
display: inline-flex;
align-items: center;
}
.test_date .test_date_inner .address .tab_link a::before{
content: '';
display: block;
width: 15px;
height: 15px;
background: url(../images/application/tab_link.png)no-repeat center;
margin-right: 8px;
}
.test_date .test_date_inner .btn{
margin-top: 40px;
text-align: center;
}
.test_date .test_date_inner .btn a{
max-width: 420px;
width: 100%;
background: #fff;
color: var(--main);
font-weight: 600;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--main);
position: relative;
height: 70px;
border-radius: 500px;
margin: 0 auto;
}
.test_date .test_date_inner .btn a::before {
content: '';
width: 12px;
height: 16px;
background: url(../images/footer-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width:1100px){
.test_date .test_date_inner .test_date_inner_table{
overflow-x: scroll;
}
}
@media screen and (max-width:968px){
.test_date .test_date_inner .test_date_inner_table table th{
font-size: 18px;
width: 24%;
}
.test_date .test_date_inner .test_date_inner_table table th.size36{
width: 27%;
}
.test_date .test_date_inner .test_date_inner_table table .title{
font-size: 16px;
}
}
@media screen and (min-width:769px){
.test_date .test_date_inner .btn a br{
display: none;
}
.test_date .test_date_inner .table_scroll_text{
display: none;
}
}
@media screen and (max-width:768px){
.test_date .test_date_inner{
}
.test_date .test_date_inner .table_scroll_text{
display: block;
font-size: 14px;
margin-bottom: 10px;
}
.test_date .test_date_inner .test_date_inner_table table{
width: 688px;
}
.test_date .test_date_inner .test_date_inner_table table td{
padding: 15px;
font-size: 14px;
}
.test_date .test_date_inner .test_date_inner_table table th.size58 {
width: 52%;
}
.test_date .test_date_inner .btn a{
font-size: 16px;
}
}
/*=====================================
*
*caution
*
=======================================*/
.caution{
margin: 80px auto;
}
.caution .map_flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.caution .map_flex .maps{
width: 45.284%;
position: relative;
padding-top: 30.19%;
}
.caution .map_flex .maps iframe{
position: absolute;
left: 0;
top: 0;
}
.caution .map_flex .text{
width: 50%;
}
.caution .map_flex .text .title{
font-size: 18px;
margin-bottom: 25px;
line-height: 1;
font-weight: 500;
}
.caution .map_flex .text span{
font-size: 13px;
}
.caution .caution_table{
margin: 40px auto;
}
.caution .caution_table table{
width: 100%;
border-collapse: collapse;
}
.caution .caution_table table th{
background: #eef6f6;
padding: 40px 20px;
font-size: 18px;
font-weight: 700;
width: 300px;
text-align: left;
border-right: 1px solid #aedada;
}
.caution .caution_table table td{
background: #f5f9f9;
padding: 40px 20px;
font-size: 14px;
width: 760px;
}
.caution .caution_table table tr:first-child th,
.caution .caution_table table tr:first-child td{
border-bottom: 1px solid #aedada;
}
.caution .caution_table table td .title{
font-size: 16px;
font-weight: 600;
}
.caution .caution_table table td .caution_table_inner{
display: flex;
margin: 10px 0;
font-weight: 500;
}
.caution .caution_table table td .caution_table_inner .text{
flex-shrink: 0;
margin-right: 10px;
}
.caution .caution_table table td .bottom_text{
margin-top: 30px;
}
.caution .caution_table table td .bottom_text.mtnone{
margin-top: 0;
}
.caution .caution_table table td .bottom_text p{
margin-top: 10px;
}
.caution .caution_table .tab_link{
margin-top: 20px;
}
.caution .caution_table .tab_link a{
position: relative;
font-size: 13px;
font-weight: 600;
color: #19596b;
display: inline-flex;
align-items: center;
}
.caution .caution_table table td .tab_link a{
font-size: 14px;
}
.caution .caution_table .tab_link a::before{
content: '';
display: block;
width: 15px;
height: 15px;
background: url(../images/application/tab_link.png)no-repeat center;
margin-right: 8px;
}
.caution .caution_table .btn_flex{
margin: 60px auto;
}
.caution .caution_table .btn_flex .title{
text-align: center;
}
.caution .caution_table .btn_flex ol{
display: flex;
justify-content: center;
margin: 40px auto;
}
.caution .caution_table .btn_flex ol li{
width: 300px;
}
.caution .caution_table .btn_flex ol li:first-child{
margin-right: 80px;
}
.caution .caution_table .btn_flex ol li a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 70px;
background: var(--main);
color: #fff;
font-weight: 600;
font-size: 20px;
border-radius: 500px;
}
.caution .caution_table .btn_flex ol li a::before {
content: '';
width: 12px;
height: 16px;
background: url(../images/btn-arrow.png) no-repeat center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width:968px){
.caution .caution_table .caution_table_inner{
overflow-x: scroll;
}
.caution .caution_table table th{
padding: 20px 15px;
width: 210px;
font-size: 16px;
}
.caution .caution_table table td{
padding: 20px 15px;
width: calc( 100% - 210px );
}
}
@media screen and (max-width:768px){
.caution .map_flex{
display: block;
}
.caution .map_flex .maps{
width: 100%;
padding-top: 60%;
}
.caution .map_flex .text{
width: 100%;
margin-top: 20px;
}
.caution .caution_table .btn_flex ol li:first-child{
margin-right: 40px;
}
.caution .caution_table table th{
width: 175px;
}
.caution .caution_table table td{
width: calc(100% - 175px);
}
}
@media screen and (min-width:701px){
.caution .table_scroll_text{
display: none;
}
}
@media screen and (max-width:700px){
.caution .table_scroll_text{
display: block;
font-size: 14px;
margin-bottom: 10px;
}
.caution .caution_table table{
width: 660px;
}
.caution .caution_table table td{
width: calc(100% - 175px);
}
}
@media screen and (max-width:568px){
.caution .caution_table .btn_flex ol{
display: block;
}
.caution .caution_table .btn_flex ol li:first-child,
.caution .caution_table .btn_flex ol li{
margin: 20px auto;
}
.caution .map_flex .text .title{
font-size: 16px;
}
.caution .map_flex .text p{
font-size: 14px;
}
}
/*=====================================
*
*faq
*
=======================================*/
.faq{
margin: 80px auto;
overflow: hidden;
background: #deefec;
padding: 20px 0;
}
.faq.mb0{
margin-bottom: 0;
}
.faq .faq_inner{
margin: 60px auto;
}
.faq .faq_inner ol li{
background: #fff;
margin: 20px auto;
}
.faq .faq_inner ol li .title{
padding: 20px;
position: relative;
font-size: 18px;
font-weight: 600;
display: flex;
justify-content: flex-start;
align-items: center;
transition: ease all .4s;
}
.faq .faq_inner ol li .title:hover{
cursor: pointer;
}
.faq .faq_inner ol li .title span{
width: 30px;
height: 30px;
position: relative;
background: var(--main);
border-radius: 50%;
margin-right: 20px;
flex-shrink: 0;
}
.faq .faq_inner ol li .title span::before{
content: '';
width: 14px;
height: 2px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transition: ease all .4s;
}
.faq .faq_inner ol li .title span::after{
content: '';
width: 2px;
height: 14px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transition: ease all .4s;
}
.faq .faq_inner ol li .title.active span::after{
transform: translate(-50%,-50%) rotate(90deg);
opacity: 0;
}
.faq .faq_inner ol li .text{
max-width: calc( 100% - 40px );
width: 100%;
padding: 40px 50px;
border-top: 2px solid var(--main);
margin: 0 auto;
display: none;
line-height: 1.8;
}
.faq .faq_inner ol li .text a{
text-decoration: underline;
color: var(--main);
}
.page_faq .faq{
background: none;
margin: 0 auto;
}
.page_faq .faq .faq_inner ol li{
background: #eef6f6;
}
@media screen and (max-width:768px){
.faq .faq_inner ol li .title{
font-size: 16px;
}
.faq .faq_inner ol li .text{
padding: 20px 50px;
}
}
@media screen and (max-width:768px){
.faq .faq_inner ol li .title{
font-size: 16px;
}
.faq .faq_inner ol li .title span{
margin-right: 10px;
}
.faq .faq_inner ol li .title span::before{
width: 10px;
}
.faq .faq_inner ol li .title span::after{
height: 10px;
}
.faq .faq_inner ol li .text{
padding: 20px 50px;
}
}
@media screen and (max-width:568px){
.faq .faq_inner ol li .title{
padding: 20px 10px;
font-size: 14px;
}
.faq .faq_inner ol li .title span{
margin-right: 10px;
width: 24px;
height: 24px;
}
.faq .faq_inner ol li .text{
max-width: calc( 100% - 20px );
font-size: 14px;
padding: 20px;
}
}
/*=====================================
*
*law
*
=======================================*/
.law{
margin: 60px auto;
}
.law p{
line-height: 1.8;
}
.law .pdf_link{
margin: 40px auto;
padding: 20px;
background: #f5f9f9;
}
.law .pdf_link .pdf_link_inner{
border-bottom: 1px dashed var(--main);
}
.law .pdf_link .pdf_link_inner:last-child{
border-bottom: none;
}
.law .pdf_link .pdf_link_inner a{
position: relative;
width: auto;
display: inline-flex;
align-items: center;
padding: 0;
color: var(--main);
padding: 15px 20px;
padding-right: 43px;
}
.law .pdf_link .pdf_link_inner a .pdf{
margin-right: 10px;
width: 28px;
}
.law .pdf_link .pdf_link_inner a img{
margin-right: 10px;
}
.law .pdf_link .pdf_link_inner a::after{
content: '';
width: 13px;
height: 13px;
background: url(../images/icon-modal.png) no-repeat center;
display: inline-block;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(calc(-50% + .5px));
}
@media screen and (max-width:768px){
.law .pdf_link .pdf_link_inner a{
font-size: 14px;
}
}