@charset "utf-8";
/*home*/
/*fv*/
#fv{ background: url("../images/fv_bg.jpg") center center no-repeat; background-size: cover; padding: 200px 0 80px; position: relative;}
#fv .fv_tit{ display: flex; flex-direction: column; max-width: 1240px; margin: 0 auto;}
#fv .fv_tit span{ font-size: 1.95rem; line-height: 1em; color: #fff; margin-bottom: 10px;}
#fv .fv_tit h1{ font-size: 5.2rem; color: #fff; letter-spacing: 0.05em; line-height: 1.25em; margin-bottom: 30px;}
#fv .fv_tit h1 strong{ color: #20E0C2;}
#fv .fv_txt{ max-width: 1240px; margin: 0 auto;}
#fv .fv_txt p{ color: #fff; font-size: 1.2rem; line-height: 1.5em; letter-spacing: 0.05em; font-weight: 500;}
#fv .scroll{ position: absolute; right: 25px;; bottom: 0;}
#fv .scroll:after{ content: ""; width: 1px; height: 170px; background: #fff; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
#fv .scroll span{ writing-mode: vertical-rl; font-size: 1rem; letter-spacing: 0.05em; color: #fff; margin-bottom: 195px;}
@media screen and (max-width:767px){
#fv{ padding: 15vw 3.75vw 7.5vw;}
#fv .fv_tit{ width: 100%;}
#fv .fv_tit span{ font-size: 1.1rem; margin-bottom: 1.25%;}
#fv .fv_tit h1{ font-size: 3rem; margin-bottom: 5%;}
#fv .fv_txt{ width: 100%;}
#fv .fv_txt p{ font-size: 1rem;}
#fv .scroll{ right: 1.875vw; bottom: 0;}
#fv .scroll:after{ height: 15vw;}
#fv .scroll span{ font-size: 0.8rem; margin-bottom: 17.5vw;}
}

/*lead*/
#home_lead .maincontent{ display: flex; align-items: center; justify-content: space-between; position: relative;}
#home_lead figure.img{ margin: 0; position: relative; z-index: 3;}
#home_lead figure.img img{ width: 600px; max-width: 600px; margin-left: -140px;}
#home_lead .txt{ color: #fff; width: 550px; height: 675px; display: flex; flex-direction: column;  align-items: flex-start; justify-content: center; position: relative; z-index: 1;}
#home_lead .txt:before{ content: ""; width: calc(50vw + 220px); height: 675px; background: #1B416F; position: absolute; left: -220px; top: 0; z-index: -1;}
#home_lead .txt:before{ background: linear-gradient(135deg,  rgba(18,53,95,1) 0%,rgba(65,139,178,1) 100%);}
#home_lead .txt h2.tit_h2{ color: #fff; align-items: flex-start; justify-content: flex-start;}
#home_lead .txt p{ text-align: justify; font-size: 0.9rem; line-height: 2.22em;}
@media screen and (max-width:767px){
#home_lead .maincontent{ padding: 7.5% 0 0; display: block;}
#home_lead figure.img img{ width: 100%; max-width: 100%; margin: 0;}
#home_lead .txt{ width: 100%; height: auto; padding: 7.5% 0;}
#home_lead .txt:before{ width: calc(100% + 7.5vw); height: calc(100% + 7.5vw); left: -3.75vw; top: -7.5vw; z-index: -1;}
#home_lead .txt h2.tit_h2{ color: #fff; align-items: flex-start; justify-content: flex-start;}
#home_lead .txt p{ text-align: justify; font-size: 0.9rem; line-height: 2.22em;}
}

/*news*/
#home_news{ background: #fff; padding: 100px 0;}
#home_news h2.tit_h2{ align-items: flex-start; justify-content: flex-start; margin-bottom: 10px;}
@media screen and (max-width:767px){
#home_news{ padding: 15% 0;}
#home_news h2.tit_h2{ margin-bottom: 1.875%;}
}

/*concerns*/
#home_concerns{ background: #F5F5F5; padding: 100px 0;}
#home_concerns h2.tit_h2{ margin-bottom: 50px;}
#home_concerns p.txt{ text-align: center; font-size: 0.9rem;}

#home_concerns .concerns_list{ margin-top: 90px; position: relative;}
#home_concerns .concerns_list figure.img{ width: 500px; position: absolute; right: 30px; top: -40px;}
#home_concerns .concerns_list figure.img img{ width: 200px;}
#home_concerns .concerns_list ul{ display: flex; flex-wrap: wrap; margin: -12.5px 0;}
#home_concerns .concerns_list ul li{ width: calc(50% - 60px); margin: 12.5px 30px;}
#home_concerns .concerns_list ul li:nth-child(1){ margin: 12.5px 300px 12.5px 30px;}
#home_concerns .concerns_list ul li dl{ position: relative;}
#home_concerns .concerns_list ul li dl dt{ background: #D0DCEA; display: flex; align-items: center; justify-content: center; text-align: center; width: 450px; height: 120px; position: relative; z-index: 3;}
#home_concerns .concerns_list ul li dl dt:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 120px 450px 0px 0px; border-color: #DBE5F0 transparent transparent transparent; position: absolute; left: 0; top: 0; z-index: -1;}
#home_concerns .concerns_list ul li dl dt h3{ font-size: 1rem; font-weight: 500; line-height: 1.5em; color: #12355F;}
#home_concerns .concerns_list ul li dl dd{ background: #fff; display: flex; align-items: center; justify-content: center; width: 460px; height: 245px; margin: -110px 0 0 auto; padding: 110px 80px 0 80px; position: relative; z-index: 1;}
#home_concerns .concerns_list ul li dl dd:before{ content: "A"; font-size: 6rem; line-height: 1em; color: #12355F; opacity: 0.06; position: absolute; left: 30px; bottom: 10px;}
#home_concerns .concerns_list ul li dl dd p{ text-align: center; font-size: 0.75rem; line-height: 1.5em;}
@media screen and (max-width:767px){
#home_concerns{ padding: 15% 0;}
#home_concerns h2.tit_h2{ margin-bottom: 5%; text-align: center;}
#home_concerns p.txt{ font-size: 0.9rem;}

#home_concerns .concerns_list{ margin-top: 5%;}
#home_concerns .concerns_list figure.img{ width: 33.33%; position: static; margin-bottom: 3.75%;}
#home_concerns .concerns_list figure.img img{ width: 100%;}
#home_concerns .concerns_list ul{ display: block; margin: 0;}
#home_concerns .concerns_list ul li{ width: 100%; margin: 5% auto 0;}
#home_concerns .concerns_list ul li:nth-child(1){ margin: 5% auto 0;}
#home_concerns .concerns_list ul li dl dt{ width: 87.5vw; height: 20vw;}
#home_concerns .concerns_list ul li dl dt:before{ border-width: 20vw 87.5vw 0px 0px;}
#home_concerns .concerns_list ul li dl dt h3{ font-size: 0.9rem;}
#home_concerns .concerns_list ul li dl dd{ width: 87.5vw; height: 37.5vw; margin: -15vw 0 0 auto; padding: 15vw 10% 0 10%;}
#home_concerns .concerns_list ul li dl dd:before{ font-size: 5rem; left: 2.5vw; bottom: 1.25vw;}
#home_concerns .concerns_list ul li dl dd p{ font-size: 0.75rem;}
}

/*reason*/
#home_reason{ background: #1B416F; color: #fff; padding: 180px 0 80px;}
#home_reason{ background: linear-gradient(135deg,  rgba(18,53,95,1) 0%,rgba(67,123,191,1) 100%);}
#home_reason h2{ position: relative; text-align: center; margin-bottom: 100px; padding-top: 50px; z-index: 1;}
#home_reason h2 strong{ color: #fff; font-size: 2.1rem;}
#home_reason h2 span{ width: 1920px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; font-size: 6rem; color: rgba(255,255,255,0.12);}

#home_reason .reason_list dl{ display: flex; flex-direction: row-reverse; align-items: center; margin-top: 80px;}
#home_reason .reason_list dl dt{ width: 530px;}
#home_reason .reason_list dl dt img{ width: calc(530px + 60px); max-width: calc(530px + 60px); margin-left: -60px;}
#home_reason .reason_list dl dd{ background: #fff; width: 550px; padding: 60px; position: relative; z-index: 3;}
#home_reason .reason_list dl dd span.num{ font-size: 6.5rem; font-weight: 600; line-height: 1em; color: #1FE0C2; opacity: 0.75; position: absolute; left: 0; top: -0.6em;}
#home_reason .reason_list dl dd h3{ text-align: center; font-size: 1.2rem; line-height: 1.5em; font-weight: 500; color: #004C7D; margin-bottom: 15px;}
#home_reason .reason_list dl dd p{ color: #004C7D; font-size: 0.9rem; line-height: 1.5em; text-align: justify; margin-bottom: 15px;}
#home_reason .reason_list dl dd p:last-child{ margin-bottom: 0;}
#home_reason .reason_list dl dd .box{ background: #D3DFED; color: #004C7D; padding: 20px;}
#home_reason .reason_list dl dd .box p{ font-size: 0.8rem; line-height: 1.5em; margin: 0;}
#home_reason .reason_list dl dd figure.btn{ display: flex; justify-content: flex-end; margin-top: 15px;}
#home_reason .reason_list dl dd figure.btn a{ display: flex; align-items: center; justify-content: center; width: 220px; height: 44px; background: #fff; border: 1px solid #12355F; color: #12355f; font-size: 0.7rem; border-radius: 44px; transition: 0.3s;}
#home_reason .reason_list dl dd figure.btn a span:after{ display: inline-block; vertical-align: middle; content: ""; width: 6px; height: 6px; background: #1FE0C2; margin-left: 6px; margin-bottom: 0.1em; border-radius: 50%;}
#home_reason .reason_list dl dd figure.btn a:hover{ background: #12355f; color: #fff;}
#home_reason .reason_list dl:nth-child(2n){ flex-direction: row;}
#home_reason .reason_list dl:nth-child(2n) dt img{ margin-left: 0; margin-right: -60px;}
#home_reason .reason_list dl:nth-child(2n) dd span.num{ left: auto; right: 0;}
@media screen and (max-width:767px){
#home_reason{ padding: 15% 0 10%;}
#home_reason h2{ margin-bottom: 10%; padding-top: 5%;}
#home_reason h2 strong{ font-size: 2rem; line-height: 1.25em;}
#home_reason h2 span{ width: 400vw; font-size: 4rem;}

#home_reason .reason_list{ width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#home_reason .reason_list dl{ display: block; margin-top: 10%;}
#home_reason .reason_list dl dt{ width: 96.25%; margin: 0 0 0 auto;}
#home_reason .reason_list dl dt img{ width: 100%; max-width: 100%; margin: 0;}
#home_reason .reason_list dl dd{ width: 96.25%; padding: 7.5% 7.5%; margin: -7.5vw auto 0 0;}
#home_reason .reason_list dl dd span.num{ font-size: 4rem; left: 0; top: -0.5em;}
#home_reason .reason_list dl dd h3{ font-size: 1rem; margin-bottom: 2.5%;}
#home_reason .reason_list dl dd p{ font-size: 0.8rem; margin-bottom: 2.5%;}
#home_reason .reason_list dl dd .box{ padding: 3.75%;}
#home_reason .reason_list dl dd .box p{ font-size: 0.7rem;}
#home_reason .reason_list dl dd figure.btn{ margin-top: 2.5%;}
#home_reason .reason_list dl dd figure.btn a{ width: 40vw; height: 7.5vw; font-size: 0.7rem; border-radius: 7.5vw;}
#home_reason .reason_list dl dd figure.btn a span:after{ width: 1.25vw; height: 1.25vw; margin-left: 1.25vw;}
#home_reason .reason_list dl:nth-child(2n) dt{ margin: 0 auto 0 0;}
#home_reason .reason_list dl:nth-child(2n) dt img{ margin: 0;}
#home_reason .reason_list dl:nth-child(2n) dd{ margin: -7.5vw 0 0 auto;}
#home_reason .reason_list dl:nth-child(2n) dd span.num{ left: auto; right: 0;}
}

/*service*/
#home_service{ background: #fff; padding: 100px 0;}
#home_service .maincontent{ width: 1200px;}
#home_service h2.tit_h2{ margin-bottom: 50px;}
#home_service .service_cat{ display: flex; gap: 4px;}
#home_service .service_cat span{ display: flex; align-items: center; justify-content: center; border: 1px solid #12355F; border-bottom: none; font-size: 1rem; line-height: 1em; font-weight: 500; color: #12355F; padding: 0.75em 1em 0.66em; transition: 0.3s; cursor: pointer;}
#home_service .service_cat span:hover,
#home_service .service_cat span.active{ background: #12355f; color: #fff;}

#home_service .service_detail{ border: 1px solid #12355F; padding: 60px;}
#home_service .service_box{ display: none;}
#home_service .service_box.active{ display: flex;}
#home_service .service_box{ justify-content: space-between; width: 100%;}
#home_service .service_box figure.img{ width: 410px; margin: 0;}
#home_service .service_box .detail{ width: 620px;}
#home_service .service_box .detail p.att{ font-size: 0.8rem; color: #12355F;}
#home_service .service_box .detail dl{ margin-bottom: 20px;}
#home_service .service_box .detail dl:last-child{ margin-bottom: 0;}
#home_service .service_box .detail dl dt{ margin-bottom: 10px;}
#home_service .service_box .detail dl dt h4{ font-size: 1.3rem; line-height: 1.5em; position: relative; padding-left: 1em; color: #12355F;}
#home_service .service_box .detail dl dt h4 span{ position: absolute; left: 0; top: 0;}
#home_service .service_box .detail dl dd p{ font-size: 0.9rem; line-height: 1.5em; color: #12355F; text-align: justify;}
#home_service .service_box .detail dl dd .box{ background: #E5F1FF; padding: 30px 40px;}
#home_service .service_box .detail dl dd .box table{ border-collapse: collapse; border-spacing: 0; font-size: 0.9rem; line-height: 1.5em; color: #12355F;}
#home_service .service_box .detail dl dd .box table th{ width: 5em;}
#home_service .service_box .detail dl dd .box h5{ font-size: 1.2rem; color: #12355F; margin-bottom: 10px;}
#home_service .service_box .detail dl dd .box ul li{ font-size: 0.9rem; line-height: 1.5em; padding-left: 14px; margin-bottom: 0.75em; color: #12355F; position: relative;}
#home_service .service_box .detail dl dd .box ul li:last-child{ margin-bottom: 0;}
#home_service .service_box .detail dl dd .box ul li:before{ content: ""; width: 7px; height: 7px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 0.5em;}
@media screen and (max-width:767px){
#home_service{ padding: 15% 0;}
#home_service .maincontent{ width: 92.5%;}
#home_service h2.tit_h2{ margin-bottom: 5%;}
#home_service .service_cat{ gap: 1.875vw;}
#home_service .service_cat span{ font-size: 0.8rem; line-height: 1.5em; text-align: center; padding: 0.75em 1em 0.66em;}

#home_service .service_detail{ padding: 7.5% 5%;}
#home_service .service_box .detail p.att{ font-size: 0.7rem;}
#home_service .service_box{ flex-direction: column; align-items: center; justify-content: center;}
#home_service .service_box figure.img{ width: 75%; margin: 0 auto 7.5%;}
#home_service .service_box .detail{ width: 100%;}
#home_service .service_box .detail dl{ margin-bottom: 5%;}
#home_service .service_box .detail dl dt{ margin-bottom: 2.5%;}
#home_service .service_box .detail dl dt h4{ font-size: 1.2rem;}
#home_service .service_box .detail dl dd p{ font-size: 0.8rem;}
#home_service .service_box .detail dl dd .box{ padding: 5%;}
#home_service .service_box .detail dl dd .box table{ font-size: 0.8rem;}
#home_service .service_box .detail dl dd .box table th{ width: 5em;}
#home_service .service_box .detail dl dd .box h5{ font-size: 1rem; margin-bottom: 2.5%;}
#home_service .service_box .detail dl dd .box ul li{ font-size: 0.8rem; padding-left: 2.5vw;}
#home_service .service_box .detail dl dd .box ul li:before{ width: 1.25vw; height: 1.25vw;}
}





/*page*/
#page_fv #page_fv01{ background: #1B416F; color: #fff; display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 40px 0;}
#page_fv #page_fv01{ background: linear-gradient(135deg,  rgba(18,53,95,1) 0%,rgba(65,139,178,1) 100%);}
#page_fv #page_fv01 h1{ display: flex; flex-direction: column; margin: auto; width: 1080px;}
#page_fv #page_fv01 h1 span{ font-size: 1rem; line-height: 1.25em; font-weight: 500; position: relative; padding-left: 12px; margin-bottom: 10px;}
#page_fv #page_fv01 h1 span:before{ content: ""; width: 6px; height: 6px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#page_fv #page_fv01 h1 strong{ font-size: 2.4rem; line-height: 1.25em; font-weight: 500;}
@media screen and (max-width:767px){
#page_fv #page_fv01{ min-height: 40vw; padding: 10% 0;}
#page_fv #page_fv01 h1{ width: 92.5%;}
#page_fv #page_fv01 h1 span{ font-size: 1rem; padding-left: 2.5vw; margin-bottom: 1.875%;}
#page_fv #page_fv01 h1 span:before{ width: 1.25vw; height: 1.25vw;}
#page_fv #page_fv01 h1 strong{ font-size: 2rem;}
}

#page_fv #page_fv02{ width: 100%; height: 420px;}
#page_fv #page_fv02 figure{ width: 100%; height: 100%;}
#page_fv #page_fv02 figure img{ width: 100%; height: 100%; object-fit: cover;}
@media screen and (max-width:767px){
#page_fv #page_fv02{ height: 40vw;}
}

.page h3.tit_h3{ font-size: 2.1rem; font-weight: 500; padding-bottom: 20px; margin: 100px auto 50px; position: relative;}
.page h3.tit_h3:before{ content: ""; width: 100%; height: 1px; background: #DBDBDB; position: absolute; left: 0; bottom: 0; z-index: 1;}
.page h3.tit_h3:after{ content: ""; width: 100px; height: 1px; background: #1FE0C2; position: absolute; left: 0; bottom: 0; z-index: 3;}
.page p{ font-size: 0.9rem; line-height: 2.25em;}
@media screen and (max-width:767px){
.page h3.tit_h3{ font-size: 1.6rem; padding-bottom: 2.5vw; margin: 10% auto 5%;}
.page h3.tit_h3:after{ width: 20vw;}
.page p{ font-size: 0.8rem; line-height: 1.75em;}
}



/*association*/
#association{ padding: 100px 0 100px;}
#association h2{ padding-top: 70px; margin-top: -20px; margin-bottom: 30px; position: relative; z-index: 1;}
#association h2 span{ font-size: 5.5rem; line-height: 1em; font-weight: bold; color: #EDF1F8; width: 1920px; text-align: left; position: absolute; left: 0; top: 0; z-index: -1;}
#association h2 strong{ font-size: 2.1rem; line-height: 1em; font-weight: 500; color: #12355F;}

#association .greeting p{ line-height: 1.5em;}
#association .greeting p.sign{ text-align: right; font-weight: 500;}
#association .greeting p.sign strong{ font-size: 1.2rem; line-height: 1.5em;}

#association .business_field dl{ display: flex; align-items: flex-start;}
#association .business_field dl dt{ width: 540px;}
#association .business_field dl dt img{ width: 590px; max-width: 590px;}
#association .business_field dl dd{ margin-top: 50px; background: #F5F9FD; display: flex; align-items: center; justify-content: center; width: 540px; height: 410px; position: relative; z-index: 3;}
#association .business_field dl dd ul li{ font-size: 1rem; line-height: 1.5em; margin: 1em auto; padding-left: 20px; position: relative;}
#association .business_field dl dd ul li:before{ content: ""; width: 6px; height: 6px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 0.66em;}

#association .organization table{ width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 0.9rem; margin-top: -30px;}
#association .organization table th{ width: 260px; font-weight: 500; line-height: 1.5em; padding: 1.5em 1em; border-bottom: 1px solid #D8D8D8;}
#association .organization table td{ line-height: 1.5em; padding: 1.5em 0; border-bottom: 1px solid #D8D8D8;}
#association .organization table td a{ color: #12355F; text-decoration: underline;}
#association .organization table td a:hover{ text-decoration: none;}

#association .group h4{ font-size: 1.5rem; margin-bottom: 50px;}

#association .access .g_map{ margin-bottom: 50px;}
#association .access .g_map iframe{ width: 100%; height: 400px; vertical-align: bottom;}
#association .access table{ width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 0.9rem; margin-top: -30px;}
#association .access table th{ width: 260px; font-weight: 500; line-height: 1.5em; padding: 1.5em 1em; border-bottom: 1px solid #D8D8D8;}
#association .access table td{ line-height: 1.5em; padding: 1.5em 0; border-bottom: 1px solid #D8D8D8;}
#association .access table td a{ color: #12355F; text-decoration: underline;}
#association .access table td a:hover{ text-decoration: none;}
@media screen and (max-width:767px){
#association{ padding: 15% 0;}
#association h2{ padding-top: 10%; margin-top: -5%; margin-bottom: 5%;}
#association h2 span{ font-size: 4rem; width: 400vw;}
#association h2 strong{ font-size: 2rem; line-height: 1.25em;}

#association .greeting p.sign strong{ font-size: 1rem;}

#association .business_field dl{ display: block;}
#association .business_field dl dt{ width: 90%; margin-right: auto;}
#association .business_field dl dt img{ width: 100%; max-width: 100%;}
#association .business_field dl dd{ margin-top: -10vw; width: 90%; height: auto; margin-left: auto; padding: 5% 0;}
#association .business_field dl dd ul li{ font-size: 0.9rem; padding-left: 3.75vw; margin: 0.5em auto;}
#association .business_field dl dd ul li:before{ width: 1.25vw; height: 1.25vw; top: 0.66em;}

#association .organization table{ font-size: 0.8rem; margin-top: -1em;}
#association .organization table th{ display: block; width: 100%; padding: 1em 1em 0.5em; border-bottom: none;}
#association .organization table td{ display: block; width: 100%;padding: 0 1em 1em;}

#association .group h4{ font-size: 1.2rem; margin-bottom: 7.5%;}

#association .access .g_map{ margin-bottom: 7.5%;}
#association .access .g_map iframe{ height: 50vw;}
#association .access table{ font-size: 0.8rem; margin-top: -1em;}
#association .access table th{ display: block; width: 100%; padding: 1em 1em 0.5em; border-bottom: none;}
#association .access table td{ display: block; width: 100%;padding: 0 1em 1em;}
}



/*service_nav*/
#service_nav{ padding: 50px 0; background: #FAFAFA;}
#service_nav dl{ margin-bottom: 30px;}
#service_nav dl:last-child{ margin-bottom: 0;}
#service_nav dl dt{ font-size: 1.2rem; font-weight: 500; margin-bottom: 10px;}
#service_nav dl dd ul{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin: -10px 0 -10px -10px;}
#service_nav dl dd ul li{ width: calc(25% - 20px); margin: 10px;}
#service_nav dl dd ul li a{ display: flex; align-items: center; background: #fff; border: 1px solid #D8D8D8; padding: 10px 15px; position: relative; transition: 0.3s;}
#service_nav dl dd ul li a span{ display: flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1.5em; height: 3em; font-weight: 500; color: #12355F; transition: 0.3s;}
#service_nav dl dd ul li a i{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #1FE0C2; transition: 0.3s;}
#service_nav dl dd ul li a:hover{ background: #12355F;}
#service_nav dl dd ul li a:hover span,
#service_nav dl dd ul li a:hover i{ color: #fff;}
@media screen and (max-width:767px){
#service_nav{ padding: 10% 0;}
#service_nav dl{ margin-bottom: 7.5%;}
#service_nav dl dt{ font-size: 1rem; margin-bottom: 2.5%;}
#service_nav dl dd ul{ width: calc(100% + 3.75vw); margin: -1.875vw 0 -1.875vw -1.875vw;}
#service_nav dl dd ul li{ width: calc(50% - 3.75vw); margin: 1.875vw;}
#service_nav dl dd ul li a{ padding: 5%;}
#service_nav dl dd ul li a span{ font-size: 0.75rem;}
#service_nav dl dd ul li a i{ right: 1.875vw;}
}


#service{ padding: 0 0 100px;}
#service #service01{ width: calc(100% + 100px); margin-left: -50px;}
#service .service_mv dl{ display: flex; align-items: center; background: #000; color: #fff;}
#service .service_mv dl{ background: linear-gradient(135deg,  rgba(18,53,95,1) 0%,rgba(65,139,178,1) 100%);}
#service .service_mv dl dt{ flex: 1; padding: 20px 70px;}
#service .service_mv dl dd{ width: 480px;}
#service .service_mv dl dt h2{ display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px;}
#service .service_mv dl dt h2 span{ display: flex; align-items: center; justify-content: center; background: #fff; color: #12355F; font-size: 0.8rem; padding: 0.25em 1.5em; margin-bottom: 15px;}
#service .service_mv dl dt h2 strong{ font-size: 2.1rem; line-height: 1.25em;}
#service .service_mv dl dt p{ font-size: 0.9rem; line-height: 2em;}

#service .service_cont{ padding: 50px; background: #F5F9FD;}
#service .service_cont .lead{ margin: 0 auto 50px;}
#service .service_cont .lead p{ font-size: 0.9rem; line-height: 2em;}

#service .service_box{ background: #fff; padding: 50px; margin-top: 50px;}
#service .service_box .toggle_btn{ display: flex; align-items: center; justify-content: center; margin: 30px auto 0;}
#service .service_box .toggle_btn strong{ display: flex; align-items: center; justify-content: center; width: 300px; height: 40px; border: 1px solid #D8D8D8; border-radius: 4px; position: relative; cursor: pointer;}
#service .service_box .toggle_btn strong:before{ content: "詳細を見る"; color: #12355F; font-size: 0.8rem; line-height: 1em; font-weight: 400; transition: 0.3s;}
#service .service_box .toggle_btn strong span{ display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#service .service_box .toggle_btn strong span:before{ content: ""; width: 100%; height: 2px; background: #12355F; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: 0.3s;}
#service .service_box .toggle_btn strong span:after{ content: ""; width: 100%; height: 2px; background: #12355F; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(90deg); transition: 0.3s;}
#service .service_box .toggle_btn:hover strong{ background: #12355F; border-color: #12355F;}
#service .service_box .toggle_btn:hover strong:before{ color: #fff;}
#service .service_box .toggle_btn:hover strong span:before,
#service .service_box .toggle_btn:hover strong span:after{ background: #fff;}
#service .service_box .toggle_btn.active span:after{ transform: translateX(-50%) translateY(-50%) rotate(0deg); opacity: 0;}
#service .service_box .toggle_btn.active strong:before{ content: "閉じる";}
#service .service_box .service_box_detail{ display: none;}
#service .service_box .service_box_detail.active{ display: block;}

#service .service_box hr{ border: 1px dotted #D8D8D8; margin: 50px auto;}
#service .service_box h4{ font-size: 1.5rem; color: #12355F; padding-left: 1em; margin-bottom: 20px; position: relative;}
#service .service_box h4 small{ font-size: 0.9rem; font-weight: 400; margin-left: 1em;}
#service .service_box h4 small.block{ display: block; margin: 0;}
#service .service_box h4 span{ position: absolute; left: 0; top: 0;}
#service .service_box h5{ font-size: 1.1rem; color: #12355F; margin: 50px auto 20px;}
#service .service_box h5:first-child{ margin-top: 0;}
#service .service_box h5.mt50{ margin-top: 50px;}
#service .service_box p.att{ font-size: 0.9rem; line-height: 1.5em; padding-left: 1em; color: #B70023; position: relative;}
#service .service_box p.att:before{ content: "※"; position: absolute; left: 0; top: 0;}

#service .service_box .zu{ margin: 30px auto 50px;}
#service .service_box .zu h6{ font-size: 0.75rem; font-weight: 500; margin-bottom: 10px;}
#service .service_box .zu figure.zu01 img{ width: 840px;}
#service .service_box .zu figure.zu02{ text-align: left;}
#service .service_box .zu figure.zu02 img{ width: 728px;}
#service .service_box .zu figure.zu03{ text-align: left;}
#service .service_box .zu figure.zu03 img{ width: 548px;}

#service .service_box .list ul li{ padding-left: 20px; font-size: 0.9rem; line-height: 1.5em; margin-top: 0.75em; position: relative;}
#service .service_box .list ul li:before{ content: ""; width: 6px; height: 6px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 0.66em;}

#service .service_box .price{ background: #F5F9FD; padding: 30px 50px; margin-top: 50px;}
#service .service_box .price dl{ display: flex;}
#service .service_box .price dl dt{ font-size: 0.9rem; line-height: 1.5em; font-weight: 500; color: #12355F;}
#service .service_box .price dl dd{ margin-left: 40px; font-size: 0.9rem; line-height: 1.5em;}

#service .service_box .example_list{ background: #F5F9FD; padding: 30px; margin: 50px auto;}
#service .service_box .example_list dl{ display: flex;}
#service .service_box .example_list dl dt{ display: flex; align-items: center; font-size: 0.9rem; color: #12355F; font-weight: 500; width: 140px; border-right: 1px dotted #D8D8D8; padding-left: 10px;}
#service .service_box .example_list dl dd{ display: flex; flex-direction: column; flex: 1; justify-content: center; padding-left: 40px;}
#service .service_box .example_list dl dd ul li{ padding-left: 20px; font-size: 0.9rem; line-height: 1.5em; margin-top: 0.5em; position: relative;}
#service .service_box .example_list dl dd ul li:before{ content: ""; width: 6px; height: 6px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 0.66em;}
#service .service_box .example_list dl dd p{ font-size: 0.9rem; line-height: 1.5em; margin-top: 0.5em;}

#service .service_box .example_img{ margin: 50px auto;}
#service .service_box .example_img ul{ display: flex; align-items: center; justify-content: center; width: calc(100% + 44px); margin-left: -22px;}
#service .service_box .example_img ul li{ width: calc(33.33% - 44px); margin: 0 22px; text-align: center;}
#service .service_box .example_img ul li h6{ font-size: 0.65rem; font-weight: 500; margin-top: 0.5em;}

#service .service_box .table{ width: 100%; border-top:1px dotted #D8D8D8; padding: 20px 0 0; margin: 20px auto;}
#service .service_box .table table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#service .service_box .table table thead th{ width: 290px; background: #D8E1ED; color: #12355F; font-size: 0.9rem; font-weight: 500; padding: 0.5em 1em; border: 2px solid #fff;}
#service .service_box .table table thead td{ background: #D8E1ED; color: #12355F; font-size: 0.9rem; font-weight: 500; padding: 0.5em 1em; border: 2px solid #fff;}
#service .service_box .table table tbody th{ border: none; border-bottom: 1px solid #D8D8D8; padding: 1em 1em 1em 1.5em; font-size: 0.8rem; font-weight: 400; position: relative;}
#service .service_box .table table tbody th span{ position: absolute; left: 0; top: 0.8em; font-size: 1rem; color: #12355F; font-weight: 500;}
#service .service_box .table table tbody td{ border: none; border-bottom: 1px solid #D8D8D8; padding: 1em; font-size: 0.8rem; font-weight: 400;}

#service #service02{ width: calc(100% + 100px); margin-left: -50px; margin-top: 100px;}
#service #service02 h4{ padding-left: 0;}
#service #service02 figure.btn_more{ display: flex; margin-top: 30px;}
#service #service02 figure.btn_more a{ display: flex; align-items: center; justify-content: center; width: 270px; height: 60px; background: #fff; border: 1px solid #12355F; color: #12355f; font-size: 0.8rem; border-radius: 44px; transition: 0.3s;}
#service #service02 figure.btn_more a span:after{ display: inline-block; vertical-align: middle; content: ""; width: 6px; height: 6px; background: #1FE0C2; margin-left: 6px; margin-bottom: 0.1em; border-radius: 50%;}
#service #service02 figure.btn_more a:hover{ background: #12355f; color: #fff;}
#service #service02 .table2{ margin-top: 30px;}
#service #service02 .table2 table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#service #service02 .table2 table th{ width: 290px; border: none; border-bottom: 1px solid #D8D8D8; padding: 1em 1em 1em 1.5em; font-size: 0.8rem; font-weight: 400; position: relative;}
#service #service02 .table2 table th span{ position: absolute; left: 0; top: 0.8em; font-size: 1rem; color: #12355F; font-weight: 500;}
#service #service02 .table2 table td{ border: none; border-bottom: 1px solid #D8D8D8; padding: 1em; font-size: 0.8rem; font-weight: 400;}
@media screen and (max-width:767px){
#service{ padding: 0 0 10%;}
#service #service01{ width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#service .service_mv dl{ display: block;}
#service .service_mv dl dt{ width: 100%; padding: 5%;}
#service .service_mv dl dd{ width: 100%;}
#service .service_mv dl dt h2{ margin-bottom: 2.5%;}
#service .service_mv dl dt h2 span{ font-size: 0.8rem; margin-bottom: 2.5%;}
#service .service_mv dl dt h2 strong{ font-size: 1.6rem;}
#service .service_mv dl dt p{ font-size: 0.8rem;}

#service .service_cont{ padding: 10% 5%;}
#service .service_cont .lead{ margin: 0 auto 10%;}
#service .service_cont .lead p{ font-size: 0.8rem;}

#service .service_box{ padding: 5%; margin-top: 10%;}
#service .service_box .toggle_btn{ margin: 5% auto 0;}
#service .service_box .toggle_btn strong{ width: 50vw; height: 10vw;}
#service .service_box .toggle_btn strong:before{ font-size: 0.8rem;}
#service .service_box .toggle_btn strong span{ width: 2.5vw; height: 2.5vw; right: 3.75vw;}

#service .service_box hr{ margin: 10% auto;}
#service .service_box h4{ font-size: 1.2rem; margin-bottom: 5%;}
#service .service_box h4 small{ font-size: 0.8rem;}
#service .service_box h5{ font-size: 1rem; margin: 10% auto 3.75%;}
#service .service_box h5.mt50{ margin-top: 10%;}
#service .service_box p.att{ font-size: 0.8rem;}

#service .service_box .zu{ margin: 5% auto 10%;}
#service .service_box .zu h6{ font-size: 0.75rem; margin-bottom: 2.5%;}
#service .service_box .zu figure.zu01 img{ width: 100%;}
#service .service_box .zu figure.zu02 img{ width: 100%;}
#service .service_box .zu figure.zu03 img{ width: 100%;}

#service .service_box .list ul li{ padding-left: 3.75vw; font-size: 0.8rem;}
#service .service_box .list ul li:before{ width: 1.25vw; height: 1.25vw; top: 0.6em;}

#service .service_box .price{ padding: 5%; margin-top: 10%;}
#service .service_box .price dl{ display: block;}
#service .service_box .price dl dt{ font-size: 0.9rem; margin-bottom: 2.5%;}
#service .service_box .price dl dd{ margin-left: 0; font-size: 0.8rem;}

#service .service_box .example_list{ padding: 5%; margin: 10% auto;}
#service .service_box .example_list dl{ display: block;}
#service .service_box .example_list dl dt{ display: block; font-size: 0.9rem; width: 100%; border: none; border-bottom: 1px dotted #D8D8D8; padding: 0 0 2.5%;}
#service .service_box .example_list dl dd{ display: block; padding: 2.5% 0 0;}
#service .service_box .example_list dl dd ul li{ padding-left: 3.75vw; font-size: 0.8rem;}
#service .service_box .example_list dl dd ul li:before{ width: 1.25vw; height: 1.25vw; top: 0.6em;}
#service .service_box .example_list dl dd p{ font-size: 0.8rem;}

#service .service_box .example_img{ margin: 10% auto;}
#service .service_box .example_img ul{ display: block; width: 100%; margin: 0;}
#service .service_box .example_img ul li{ width: 100%; margin: 5% auto 0;}
#service .service_box .example_img ul li h6{ font-size: 0.75rem;}

#service .service_box .table{ padding: 3.75% 0 0; margin: 3.75% auto;}
#service .service_box .table table thead th{ width: 40%; font-size: 0.8rem; text-align: center; padding: 0.5em;}
#service .service_box .table table thead td{ width: 60%; font-size: 0.8rem; text-align: center; padding: 0.5em;}
#service .service_box .table table tbody th{ vertical-align: middle; font-size: 0.7rem; padding: 0.5em 1em 0.5em 1.5em;}
#service .service_box .table table tbody th span{ top: 50%; transform: translateY(-50%); font-size: 1rem;}
#service .service_box .table table tbody td{ vertical-align: middle; font-size: 0.7rem; padding: 0.5em;}

#service #service02{ width: calc(100% + 7.5vw); margin-left: -3.75vw; margin-top: 15%;}
#service #service02 figure.btn_more{ margin-top: 5%;}
#service #service02 figure.btn_more a{ width: 50vw; height: 10vw; font-size: 0.8rem; border-radius: 10vw;}
#service #service02 figure.btn_more a span:after{ display: inline-block; vertical-align: middle; content: ""; width: 6px; height: 6px; background: #1FE0C2; margin-left: 6px; margin-bottom: 0.1em; border-radius: 50%;}
#service #service02 figure.btn_more a:hover{ background: #12355f; color: #fff;}

#service #service02 .table2{ margin-top: 5%;}
#service #service02 .table2 table th{ vertical-align: middle;width: 25%; padding: 0.5em 1em 0.5em 1em; font-size: 0.7rem;}
#service #service02 .table2 table td{ vertical-align: middle; width: 75%; padding: 0.5em; font-size: 0.7rem;}
}



/*case*/
#case{ padding: 100px 0 100px;}
#case .lead p{ font-size: 0.9rem;}

#case .before_after{ background: #FAFAFA; padding: 30px; margin-top: 50px;}
#case .before_after.w100{ position: relative; z-index: 1;}
#case .before_after.w100:before{ content: ""; width: 100vw; height: 100%; background: #FAFAFA; position: absolute; left: -50vw; top: 0; z-index: -1;}
#case .before_after.w100:after{ content: ""; width: 100vw; height: 100%; background: #FAFAFA; position: absolute; right: -50vw; top: 0; z-index: -1;}

#case .before_after h4{ font-size: 1.3rem; color: #12355F; margin-bottom: 20px;}
#case .before_after h4 span{ font-size: 0.9rem; margin-left: 1em;}
#case .before_after h4.mt20{ margin-top: 20px;}
#case .before_after ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
#case .before_after ul.flex_start{ justify-content: flex-start;}
#case .before_after ul li{ width: calc(50% - 10px); position: relative;}
#case .before_after ul.gap0{ gap: 0;}
#case .before_after ul.gap0 li{ width: 50%;}
#case .before_after ul li span{ display: flex; align-items: center; justify-content: center; background: #12355F; color: #fff; font-size: 0.75rem; letter-spacing: 0; font-weight: 500; /*width: 70px; height: 25px;*/ padding: 0.15em 0.5em; position: absolute; left: 0; top: 0;}
#case .before_after ul li h5{ font-size: 0.9rem; font-weight: 400; margin-top: 0.5em;}

#case .before_after .area{ margin: 20px auto 50px;}
#case .before_after .area .data{ display: flex;}
#case .before_after .area .data span{ display: flex; align-items: center; margin-right: 1.5em; font-size: 0.9rem;}
#case .before_after .area .data span i{ color: #A5A5A5; margin-right: 0.5em;}
#case .before_after .area h3{ font-size: 2rem; font-weight: 500; margin: 20px auto;}
#case .before_after .area table{ border-collapse: collapse; border-spacing: 0; margin-left: 20px;}
#case .before_after .area table th{ border-bottom: 1px dotted #D8D8D8; font-size: 0.75rem; font-weight: 400; padding: 0.5em 0;}
#case .before_after .area table td{ border-bottom: 1px dotted #D8D8D8; font-size: 0.75rem; font-weight: 500; color: #12355F; padding: 0.5em 0 0.5em 1em;}
#case .before_after .area table tr:last-child th,
#case .before_after .area table tr:last-child td{ border-bottom: none;}
#case .before_after .area p{ font-size: 0.9rem; line-height: 2em; margin-top: 30px;}
@media screen and (max-width:767px){
#case{ padding: 15% 0;}
#case .lead p{ font-size: 0.9rem;}

#case .before_after{ padding: 3.75%; margin-top: 5%;}

#case .before_after h4{ font-size: 1.2rem; margin-bottom: 2.5%;}
#case .before_after h4 span{ font-size: 0.8rem;}
#case .before_after h4.mt20{ margin-top: 5%;}
#case .before_after ul{ gap: 1.875vw;}
#case .before_after ul li{ width: calc(50% - 1.875vw);}
#case .before_after ul li span{ font-size: 0.6rem;}
#case .before_after ul li h5{ font-size: 0.75rem;}

#case .before_after .area{ margin: 2.5% auto 5%;}
#case .before_after .area .data span{ font-size: 0.8rem;}
#case .before_after .area h3{ font-size: 1.6rem; margin: 2.5% auto;}
#case .before_after .area table{ margin-left: 3.75vw;}
#case .before_after .area table th{ font-size: 0.75rem;}
#case .before_after .area table td{ font-size: 0.75rem;}
#case .before_after .area p{ font-size: 0.8rem; margin-bottom: 5%;}
}



/*jaspac*/
#jaspac{ padding: 100px 0 100px;}
#jaspac h2{ padding-top: 70px; margin-top: -20px; margin-bottom: 30px; position: relative; z-index: 1;}
#jaspac h2 span{ font-size: 5.5rem; line-height: 1em; font-weight: bold; color: #EDF1F8; width: 1920px; text-align: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1;}
#jaspac h2 strong{ font-size: 2.1rem; line-height: 1em; font-weight: 500; color: #12355F;}

#jaspac .lead h4{ font-size: 1rem; font-weight: 500; margin-bottom: 15px;}
#jaspac .lead p{ font-size: 0.9rem;}

#jaspac .box{ background: #F5F9FD; padding: 30px; margin: 30px auto;}
#jaspac .box h4{ font-size: 1rem; color: #12355F; margin-bottom: 15px;}
#jaspac .box p{ line-height: 1.5em;}
#jaspac .box ul{ margin-top: 30px;}
#jaspac .box ul:first-child{ margin-top: 0;}
#jaspac .box ul li{ font-size: 0.9rem; line-height: 1.5em; color: #12355F; padding-left: 30px; margin: 0.5em auto; position: relative;}
#jaspac .box ul li:before{ content: ""; width: 18px; height: 18px; background: url("../images/resilience/check.png") center center; background-size: 100%; position: absolute; left: 0; top: 0.25em;}

#jaspac .flow{ width: 880px; margin: 0 auto;}
#jaspac .flow span.arrow{ display: flex; align-items: center; justify-content: center; margin: 10px auto; font-size: 1.2rem; color: #12355F; line-height: 1em;}
#jaspac .flow dl{ background: #F5F9FD; padding: 20px; display: flex;}
#jaspac .flow dl dt{ width: 420px; display: flex;}
#jaspac .flow dl dt figure:nth-child(1){ width: 180px;}
#jaspac .flow dl dt figure:nth-child(2){ width: 240px;}
#jaspac .flow dl dd{ flex: 1; margin-left: 20px;}
#jaspac .flow dl dd ul li{ font-size: 0.9rem; line-height: 1.25em; margin-bottom: 0.5em; padding-left: 20px; position: relative;}
#jaspac .flow dl dd ul li:last-child{ margin-bottom: 0;}
#jaspac .flow dl dd ul li:before{ content: ""; width: 6px; height: 6px; background: #1FE0C2; border-radius: 50%; position: absolute; left: 0; top: 0.5em;}

#jaspac .merit dl{ display: flex; position: relative; margin-top: 120px;}
#jaspac .merit dl dt{ width: 980px; margin: 0 auto 0 0; background: #FAFAFA; padding: 60px 530px 60px 60px; position: relative;}
#jaspac .merit dl dt span.num{ line-height: 0; position: absolute; left: 0; top: -66px;}
#jaspac .merit dl dt span.num img{ height: 98px;}
#jaspac .merit dl dt h4{ font-size: 1.2rem; line-height: 1.5em; color: #004C7D; margin-bottom: 0.5em;}
#jaspac .merit dl dt p{ font-size: 0.9rem; line-height: 2em; color: #004C7D; text-align: justify;}
#jaspac .merit dl dd{ width: 590px; position: absolute; right: 0; top: -30px;}
#jaspac .merit dl:nth-child(2n){ flex-direction: row-reverse;}
#jaspac .merit dl:nth-child(2n) dt{ margin: 0 0 0 auto; padding: 60px 60px 60px 530px;}
#jaspac .merit dl:nth-child(2n) span.num{ left: auto; right: 60px;}
#jaspac .merit dl:nth-child(2n) dd{ left: 0; right: auto;}

#jaspac .feature h4{ font-size: 1.5rem; font-weight: 500; color: #12355F; margin: 50px auto 20px;}
#jaspac .feature .feature_detail{ display: flex; gap: 30px;}
#jaspac .feature .feature_detail dl{ width: calc(33.3% - 15px); border: 4px solid #1FE0C2; border-top: none;}
#jaspac .feature .feature_detail dl dt{ background: #1FE0C2; color: #12355F; font-size: 1.3rem; font-weight: 500; padding: 0.5em; text-align: center;}
#jaspac .feature .feature_detail dl dd{ padding: 20px;}
#jaspac .feature .feature_detail dl dd figure{ width: 154px; margin: 0 auto 10px;}
#jaspac .feature .feature_detail dl dd h5{ display: flex; align-items: flex-start; margin-bottom: 10px;}
#jaspac .feature .feature_detail dl dd h5 span{ display: flex; align-items: center; justify-content: center; background: #EDEDED; width: 5em; font-size: 0.8rem; font-weight: 400; line-height: 1.25rem; padding: 0.25em;}
#jaspac .feature .feature_detail dl dd h5 strong{ font-size: 0.9rem; font-weight: 400; line-height: 1.25rem; margin-left: 0.5em; margin-top: 0.25em;}
#jaspac .feature .feature_detail dl dd p{ font-size: 0.9rem; line-height: 1.5em; margin-bottom: 10px;}
#jaspac .feature .feature_detail dl dd ul li{ font-size: 0.9rem; line-height: 1.5em; color: #12355F; padding-left: 30px; margin-bottom: 0.5em; position: relative;}
#jaspac .feature .feature_detail dl dd ul li:before{ content: ""; width: 18px; height: 18px; background: url("../images/jaspac/check.png") center center; background-size: 100%; position: absolute; left: 0; top: 0.25em;}
@media screen and (max-width:767px){
#jaspac{ padding: 15% 0;}
#jaspac h2{ padding-top: 10%; margin-top: -5%; margin-bottom: 5%;}
#jaspac h2 span{ font-size: 4rem; width: 400vw;}
#jaspac h2 strong{ font-size: 2rem; line-height: 1.25em;}

#jaspac .lead h4{ font-size: 1rem; margin-bottom: 3.75%;}
#jaspac .lead p{ font-size: 0.9rem;}

#jaspac .box{ background: #F5F9FD; padding: 30px; margin: 30px auto;}
#jaspac .box h4{ font-size: 1rem; color: #12355F; margin-bottom: 15px;}
#jaspac .box p{ line-height: 1.5em;}
#jaspac .box ul{ margin-top: 30px;}
#jaspac .box ul li{ font-size: 0.9rem; line-height: 1.5em; color: #12355F; padding-left: 30px; margin: 0.5em auto; position: relative;}
#jaspac .box ul li:before{ content: ""; width: 18px; height: 18px; background: url("../images/resilience/check.png") center center; background-size: 100%; position: absolute; left: 0; top: 0.25em;}

#jaspac .flow{ width: 100%;}
#jaspac .flow span.arrow{ margin: 2.5% auto; font-size: 1.2rem;}
#jaspac .flow dl{ padding: 3.75%; display: block;}
#jaspac .flow dl dt{ width: 100%; display: flex;}
#jaspac .flow dl dt figure:nth-child(1){ width: 42.8%;}
#jaspac .flow dl dt figure:nth-child(2){ width: 57.2%;}
#jaspac .flow dl dd{ width: 100%; margin: 5% 5% 2.5%;}
#jaspac .flow dl dd ul li{ font-size: 0.8rem; padding-left: 3.75vw;}
#jaspac .flow dl dd ul li:before{ width: 1.25vw; height: 1.25vw; top: 0.33em;}

#jaspac .merit dl{ display: block; margin-top: 15%;}
#jaspac .merit dl dt{ width: 92.5%; margin: 0 auto 0 0; padding: 7.5% 5% 15vw;}
#jaspac .merit dl dt span.num{ top: -7.5vw;}
#jaspac .merit dl dt span.num img{ height: 12.5vw;}
#jaspac .merit dl dt h4{ font-size: 1rem;}
#jaspac .merit dl dt p{ font-size: 0.8rem; line-height: 1.75em;}
#jaspac .merit dl dd{ width: 92.5%; position: relative; left: 0; top: 0; margin: -10vw 0 0 auto; z-index: 1;}
#jaspac .merit dl:nth-child(2n) dt{ margin: 0 0 0 auto; padding: 7.5% 5% 15vw;}
#jaspac .merit dl:nth-child(2n) span.num{ left: auto; right: 0;}
#jaspac .merit dl:nth-child(2n) dd{ left: 0; right: 0; margin: -10vw auto 0 0;}

#jaspac .feature h4{ font-size: 1.2rem; margin: 10% auto 3.75%;}
#jaspac .feature .feature_detail{ display: block; gap: 0;}
#jaspac .feature .feature_detail dl{ width: 100%; border-top: none; margin-top: 5%;}
#jaspac .feature .feature_detail dl dt{ font-size: 1.1rem;}
#jaspac .feature .feature_detail dl dd{ padding: 3.75% 3.75% 3.75% 32.5%; position: relative;}
#jaspac .feature .feature_detail dl dd figure{ width: 25%; margin: 0; position: absolute; left: 3.75%; top: 50%; transform: translateY(-50%);}
#jaspac .feature .feature_detail dl dd h5{ margin-bottom: 2.5%;}
#jaspac .feature .feature_detail dl dd h5 span{ width: 5em; font-size: 0.8rem;}
#jaspac .feature .feature_detail dl dd h5 strong{ font-size: 0.9rem;}
#jaspac .feature .feature_detail dl dd p{ font-size: 0.8rem; margin-bottom: 2.5%;}
#jaspac .feature .feature_detail dl dd ul li{ font-size: 0.8rem; padding-left: 5vw;}
#jaspac .feature .feature_detail dl dd ul li:before{ width: 3.75vw; height: 3.75vw; top: 0.25em;}
}



/*resilience*/
#resilience{ padding: 100px 0 100px;}
#resilience h2{ padding-top: 70px; margin-top: -20px; margin-bottom: 30px; position: relative; z-index: 1;}
#resilience h2 span{ font-size: 5.5rem; line-height: 1em; font-weight: bold; color: #EDF1F8; width: 1920px; text-align: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1;}
#resilience h2 strong{ font-size: 2.1rem; line-height: 1em; font-weight: 500; color: #12355F;}

#resilience .box{ background: #F5F9FD; padding: 30px; margin: 30px auto;}
#resilience .box h4{ font-size: 1rem; color: #12355F; margin-bottom: 15px;}
#resilience .box p{ line-height: 1.5em;}
#resilience .box ul{ margin-top: 30px;}
#resilience .box ul li{ font-size: 0.9rem; line-height: 1.5em; color: #12355F; padding-left: 30px; margin: 0.5em auto; position: relative;}
#resilience .box ul li:before{ content: ""; width: 18px; height: 18px; background: url("../images/resilience/check.png") center center; background-size: 100%; position: absolute; left: 0; top: 0.25em;}

#resilience .box .link{ display: flex; flex-direction: column; align-items: flex-start;}
#resilience .box .link a{ display: flex; align-items: center; border-bottom: 1px solid #12355F; font-size: 0.9rem; color: #12355F; margin-top: 0.5em;}
#resilience .box .link a:hover{ border-color: transparent;}
#resilience .box .link a i{ margin-left: 0.5em;}

#resilience .box .license dl{ display: flex;}
#resilience .box .license dl dt{ width: 468px;}
#resilience .box .license dl dd{ margin-left: 30px;}
#resilience .box .license dl dd h5{ width: 390px; padding: 1em; margin: 10px auto 20px; display: flex; align-items: center; justify-content: center; background: #fff; color: #12355F; font-size: 1rem;}

#resilience .merit{ margin-top: 50px;}
#resilience .merit ul{ display: flex; gap: 20px;}
#resilience .merit ul li{ width: 25%; border: 2px solid #12355F; border-radius: 50px; padding: 40px 20px;}
#resilience .merit ul li figure{ width: 90px; margin: 0 auto 20px;}
#resilience .merit ul li h4{ text-align: center; font-size: 1.1rem; color: #12355F; font-weight: 500; margin-bottom: 10px;}
#resilience .merit ul li p{ font-size: 0.8rem; line-height: 1.5em; color: #12355F;}
@media screen and (max-width:767px){
#resilience{ padding: 15% 0;}
#resilience h2{ padding-top: 10%; margin-top: -5%; margin-bottom: 5%;}
#resilience h2 span{ font-size: 4rem; width: 400vw;}
#resilience h2 strong{ font-size: 2rem; line-height: 1.25em;}

#resilience .box{ padding: 5%; margin: 5% auto;}
#resilience .box h4{ font-size: 1rem; margin-bottom: 2.5%;}
#resilience .box ul{ margin-top: 5%;}
#resilience .box ul li{ font-size: 0.8rem; padding-left: 5vw;}
#resilience .box ul li:before{ width: 3.7vw; height: 3.75vw;}

#resilience .box .link a{ font-size: 0.8rem;}

#resilience .box .license dl{ display: block;}
#resilience .box .license dl dt{ width: 100%;}
#resilience .box .license dl dd{ margin: 2.5% auto 0;}
#resilience .box .license dl dd p{ margin-bottom: 0;}
#resilience .box .license dl dd h5{ padding: 0.5em; margin: 2.5% auto;}

#resilience .merit{ margin-top: 7.5%;}
#resilience .merit ul{ display: flex; flex-wrap: wrap; gap: 2.5vw;}
#resilience .merit ul li{ width: calc(50% - 1.25vw); border-radius: 5vw; padding: 5% 3.75%;}

#resilience .merit ul li figure{ width: 15vw; margin: 0 auto 5%;}
#resilience .merit ul li h4{  font-size: 0.9rem; margin-bottom: 2.5%;}
#resilience .merit ul li p{ font-size: 0.7rem;}
}



/*contact*/
#contact{ padding: 100px 0;}
#contact .maincontent{ max-width: 900px;}
@media screen and (max-width:767px){
#contact{ padding: 10% 0;}
}

#contact.thanks h2{ font-size: 1.8rem; color: #12355F; font-weight: 400; margin-bottom: 15px;}
#contact p.txt{ font-size: 0.9rem;}
#contact .att ul li{ padding-left: 1em; position: relative; font-size: 0.75rem; line-height: 1.5em; color: #DD143A;}
#contact .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
#contact .contact_tel{ background: #12355F; color: #fff; padding: 25px; margin: 15px auto;}
#contact .contact_tel dl{ display: flex; align-items: center;}
#contact .contact_tel dl dt{ width: 340px; padding-right: 25px; text-align: center; font-size: 1.1rem; font-weight: 500;}
#contact .contact_tel dl dd{ flex: 1; display: flex; flex-direction: column; padding-left: 40px; border-left: 1px solid #fff;}
#contact .contact_tel dl dd span{ font-size: 0.8rem; line-height: 1em; margin-bottom: 0;}
#contact .contact_tel dl dd a{ font-size: 2.3rem; font-weight: 600;}
@media screen and (max-width:767px){
#contact.thanks h2{ font-size: 1.4rem; margin-bottom: 2.5%;}
#contact p.txt{ font-size: 0.8rem;}
#contact .att ul li{ font-size: 0.75rem;}
#contact .contact_tel{ padding: 5%; margin: 3.75% auto;}
#contact .contact_tel dl{ display: block;}
#contact .contact_tel dl dt{ width: 100%; padding: 0 0 3.75%; font-size: 1.1rem;}
#contact .contact_tel dl dd{ padding-top: 3.75%; align-items: center; justify-content: center; padding-left: 0; border: none; border-top: 1px solid #fff;}
#contact .contact_tel dl dd span{ font-size: 0.8rem;}
#contact .contact_tel dl dd a{ font-size: 2.3rem;}
}

/*form-parts*/
::placeholder{ color: #AFAFAF; line-height: 1.25em;}
::-ms-input-placeholder{ color: #AFAFAF; line-height: 1.25em;}
input[type=submit], button{ -webkit-appearance: none;}
input, textarea, select, button{ width:100%; padding: 0.75em 1em; font-size: 0.8rem; line-height: 1.25em; box-sizing: border-box; outline: none; border: none; color:#000; font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; vertical-align: bottom; background: #fff; border-radius: 4px;}
textarea{ text-align: left; height: 26.5em; font-weight: normal;}
label{ cursor: pointer;}
input[type="checkbox"],
input[type="radio"]{ padding: 0; margin: 0 0.5em 0 0; width: auto;}
input.error, textarea.error, select.error{ border: 1px solid #DD143A !important;}
@media screen and (max-width:767px){
input, textarea, select, button{ padding: 0.75em 1em; font-size: 0.8rem;}
textarea{ height: 14em;}
}

#contact .contact_form{ background: #E2EAF2; padding: 60px; margin: 40px auto 0;}
#contact .contact_form h3{ font-size: 1.2rem; color: #12355F; font-weight: 500; border-bottom: 2px solid #12355f; padding-bottom: 0.5em; margin-bottom: 40px;}
#contact .contact_form table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#contact .contact_form table th{ display: block; width: 100%; font-size: 1rem; font-weight: 500; line-height: 1em; margin-top: 30px; margin-bottom: 10px;}
#contact .contact_form table tr:first-child th{ margin-top: 0;}
#contact .contact_form table th span{ display: inline-block; background: #DD143A; color: #fff; border-radius: 2px; font-size: 0.6rem; line-height: 1em; padding: 0.125em 0.5em; margin-left: 0.5em; position: relative; top: -0.2em;}
#contact .contact_form table td{ display: block; width: 100%; font-size: 0.9rem; line-height: 1em;}
#contact .contact_form table td p{ font-size: 1rem; margin: 10px 0; line-height: 1.5em;}
#contact .contact_form table td p:first-child{ margin-top: 0;}
#contact .contact_form table td p:last-child{ margin-bottom: 0;}
#contact .contact_form table td p.error_txt{ font-size: 0.75rem; color: #DD143A; margin: 10px 0 0;}
#contact .contact_form .list ul li{ margin: 0.5em auto 0; font-size: 0.9rem; line-height: 1.5em; padding-left: 20px; position: relative;}
#contact .contact_form .list ul li input{ position: absolute; left: 0; top: 0.33em;}
#contact .contact_form .list ul li:first-child{ margin-top: 0;}

#contact.confirm .contact_form table td{ padding-bottom: 30px; border-bottom: 1px solid #C3C3C3;}
#contact.confirm .contact_form table td p{ font-size: 0.9rem; margin: 5px auto;}
#contact.confirm .contact_form table td p:first-child{ margin-top: 0;}
#contact.confirm .contact_form table td p:last-child{ margin-bottom: 0;}
#contact.confirm .contact_form table td .list{ font-size: 1rem; font-weight: 500; line-height: 1.5em;}

#contact .contact_form.contact_form03 p.txt{ text-align: center; font-size: 0.9rem; line-height: 1.5em;}
#contact .contact_form.contact_form03 .pv_box{ background: #fff; padding: 30px 50px; height: 400px; overflow-x: hidden; overflow-y: auto;}
#contact .contact_form.contact_form03 .pv_box h4{ text-align: center; font-size: 1rem; margin-bottom: 30px;}
#contact .contact_form.contact_form03 .pv_box p{ font-size: 0.8rem; line-height: 1.5em;}
#contact .contact_form.contact_form03 .pv_check{ margin-top: 30px;}
#contact .contact_form.contact_form03 .pv_check label{ display: flex; align-items: center; justify-content: center;}
#contact .contact_form.contact_form03 .pv_check p{ font-size: 0.9rem; line-height: 1em; margin: 0;}
#contact .contact_form.contact_form03 .pv_check span{ display: inline-block; background: #DD143A; color: #fff; border-radius: 2px; font-size: 0.6rem; line-height: 1em; padding: 0.125em 0.5em; margin-left: 0.5em;}
#contact .contact_form.contact_form03 .pv_check p.error_txt{ text-align: center; font-size: 0.75rem; color: #DD143A; margin: 10px 0 0;}


#contact .submit_btn{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px;}
#contact .submit_btn button{ display: flex; align-items: center; justify-content: center; background: #12355F; color: #fff; width: 250px; height: 60px; border-radius: 30px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: 0.3s;}
#contact .submit_btn button:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
#contact .contact_form{ padding: 5%; margin: 7.5% auto 0;}
#contact .contact_form h3{ font-size: 1.2rem; margin-bottom: 7.5%;}
#contact .contact_form table th{ font-size: 1rem; margin-top: 10%; margin-bottom: 2.5%;}
#contact .contact_form table th span{ font-size: 0.6rem;}
#contact .contact_form table td{ font-size: 0.9rem;}
#contact .contact_form table td p{ margin: 2.5% 0;}
#contact .contact_form .list ul li{ font-size: 0.8rem;}

#contact.confirm .contact_form table td{ padding-bottom: 7.5%;}
#contact.confirm .contact_form table td p{ font-size: 0.9rem; margin: 1.25% auto;}
#contact.confirm .contact_form table td .list{ font-size: 1rem;}

#contact .contact_form.contact_form03 p.txt{ text-align: justify; font-size: 0.8rem;}
#contact .contact_form.contact_form03 .pv_box{ padding: 5%; height: 100vw;}
#contact .contact_form.contact_form03 .pv_box h4{ font-size: 0.9rem; margin-bottom: 5%;}
#contact .contact_form.contact_form03 .pv_box p{ font-size: 0.7rem;}
#contact .contact_form.contact_form03 .pv_check{ margin-top: 5%;}
#contact .contact_form.contact_form03 .pv_check p{ font-size: 0.8rem;}
#contact .contact_form.contact_form03 .pv_check span{ font-size: 0.6rem;}

#contact .submit_btn{ margin-top: 7.5%;}
#contact .submit_btn button{ width: 50vw; height: 10vw; border-radius: 10vw; font-size: 1rem;}
}





/*archive*/
/*page_nav*/
.page_nav{ margin-top: 30px;}
.page_nav ul{ display: flex; align-items: center; justify-content: center;}
.page_nav ul li{ font-size: 1.1rem; font-weight: 500; color: #12355F; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 12px;}
.page_nav ul li a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: none; border-radius: 50%; transition: 0.3s;}
.page_nav ul li a:hover,
.page_nav ul li.active a,
.page_nav ul li.next a,
.page_nav ul li.prev a{ background: #12355f; color: #fff;}
@media screen and (max-width:767px){
.page_nav{ margin-top: 5%;}
.page_nav ul li{ font-size: 1rem; width: 7.5vw; height: 7.5vw; margin: 0 1.25vw;}
}



/*news*/
#archive_news{ padding: 100px 0;}
@media screen and (max-width:767px){
#archive_news{ padding: 10% 0;}
}
.news_list ul li{ padding: 30px 0; border-bottom: 1px solid #E6E6E6; display: flex;}
.news_list ul li span.date{ width: 9em; font-size: 0.8rem; line-height: 1.66em; font-weight: 500; color: #909090;}
.news_list ul li p{ flex: 1; font-size: 0.9rem; line-height: 1.5em;}
.news_list ul li p a:hover{ text-decoration: underline;}
@media screen and (max-width:767px){
.news_list ul li{ padding: 5% 0;}
.news_list ul li span.date{ width: 7.5em; font-size: 0.8rem;}
.news_list ul li p{ font-size: 0.9rem;}
}





/*post*/
/*news*/
#post_news{ padding: 100px 0;}
#post_news .maincontent{ width: 900px;}

#post_news #post_news_tit{ border-bottom: 1px solid #000; padding-bottom: 30px; margin-bottom: 50px;}
#post_news #post_news_tit h1{ font-size: 2rem; font-weight: 400; margin-bottom: 10px;}
#post_news #post_news_tit .date{ font-size: 0.9rem; font-weight: 500; color: #909090;}

#post_news .back_to_btn{ display: flex; align-items: center; justify-content: center; margin-top: 50px;}
#post_news .back_to_btn a{ display: flex; align-items: center; font-size: 0.9rem; font-weight: 500; color: #12355F; transition: 0.3s;}
#post_news .back_to_btn a i{ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #12355F; color: #fff; font-size: 1rem; margin-right: 20px; border-radius: 50%;}
#post_news .back_to_btn a:hover{ opacity: 0.7;}

#post_news .box{ background: #F5F9FD; padding: 30px; margin: 30px auto;}
#post_news .inc{ background: #F7F7F7; padding: 30px; border-left: 4px solid #12355F; margin: 50px auto;}

#post_news figure.mv{ width: 600px; margin: 50px auto;}
#post_news h2{ font-size: 1.8rem; line-height: 1.5em; font-weight: 500; margin-bottom: 30px;}
#post_news h3{ font-size: 1.5rem; line-height: 1.5em; font-weight: 500; margin-bottom: 30px;}
#post_news h4{ font-size: 1.3rem; line-height: 1.5em; font-weight: 500; margin-bottom: 30px;}

#post_news p.lead{ font-size: 0.9rem; line-height: 2em; text-align: justify; margin: 1em auto;}
#post_news p{ font-size: 0.8rem; line-height: 2em; text-align: justify; margin: 1em auto;}
#post_news strong.bg_bl{ background: linear-gradient(to bottom, rgba(236,243,248,0) 0%, rgba(236,243,248,0) 50%, rgba(236,243,248,1) 51%, rgba(236,243,248,1) 100%);}
#post_news p:first-child{ margin-top: 0;}
#post_news p:last-child{ margin-bottom: 0;}
#post_news p.txt_link a{ text-decoration: underline; color: #12355F;}
#post_news p.txt_link a i{ margin-right: 0.5em;}
#post_news p.txt_link a:hover{ text-decoration: none;}

#post_news dl{ display: flex; justify-content: space-between; margin: 50px auto;}
#post_news dl dt{ width: 425px;}
#post_news dl dd{ width: 430px;}

#post_news ul{ margin: 50px auto;}
#post_news ul li{ padding-left: 16px; font-size: 0.8rem; line-height: 2em; margin: 0.25em auto; position: relative;}
#post_news ul li:before{ content: ""; width: 8px; height: 8px; background: #004C7D; border-radius: 50%; position: absolute; left: 0; top: 0.75em;}
@media screen and (max-width:767px){
#post_news{ padding: 10% 0;}
#post_news .maincontent{ width: 92.5%;}

#post_news #post_news_tit{ padding-bottom: 3.75%; margin-bottom: 5%;}
#post_news #post_news_tit h1{ font-size: 1.5rem; margin-bottom: 1.875%;}
#post_news #post_news_tit .date{ font-size: 0.8rem;}

#post_news .back_to_btn{ margin-top: 7.5%;}
#post_news .back_to_btn a{ font-size: 0.8rem;}
#post_news .back_to_btn a i{ width: 7.5vw; height: 7.5vw; font-size: 0.8rem; margin-right: 1.875vw;}

#post_news .box{ padding: 5%; margin: 5% auto;}
#post_news .inc{ padding: 5%; margin: 7.5% auto;}

#post_news figure.mv{ width: 75%; margin: 7.5%;}
#post_news h2{ font-size: 1.5rem; margin-bottom: 5%;}
#post_news h3{ font-size: 1.25rem; margin-bottom: 5%;}
#post_news h4{ font-size: 1.1rem; margin-bottom: 5%;}

#post_news p.lead{ font-size: 0.8rem;}
#post_news p{ font-size: 0.7rem;}

#post_news dl{ display: block; margin: 7.5% auto;}
#post_news dl dt{ width: 100%; margin-bottom: 5%;}
#post_news dl dd{ width: 100%;}

#post_news ul{ margin: 7.5% auto;}
#post_news ul li{ padding-left: 2.5vw; font-size: 0.7rem;}
#post_news ul li:before{ width: 1.25vw; height: 1.25vw;}
}