@charset "utf-8";
body {font-family: "BIZ UDPGothic", sans-serif; font-size: 16px; color: #333; line-height: 1.75;}
img {display: block; width: 100%;}
a {text-decoration: none; color: #333; transition: .5s;}
a:hover {opacity: .7;}
ul,ol {list-style-position: inside;}
.grecaptcha-badge {visibility: hidden;}
@media screen and (max-width:768px) {
    body {font-size: 14px;}
}
/* header */
#header .header {width: 100%; height: 100px; position: fixed; background: rgba(255, 255, 255, 0.6); top: 0; left: 0; z-index: 100;}
#header .header .wrap {height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .header .wrap h1 {padding: 0 0 0 2vw;}
#header .header .wrap h1 .logo {display: flex; align-items: center;}
#header .header .wrap h1 .logo img {width: 50px; height: 50px;}
#header .header .wrap h1 .logo p {margin: 0 0 0 10px; font-size: clamp(24px, 2.2vw, 36px); font-weight: bold;}
#header .header .wrap h1 .logo p .logo_n {font-size: clamp(36px, 3vw, 50px); color: #002060;}
#header .header .wrap h1 .logo p .logo_a {font-size: clamp(36px, 3vw, 50px); color: #FF0000;}
#header .header .wrap .nav {height: 100%;}
#header .header .wrap .nav .menu {display: flex; list-style: none; align-items: center; height: 100%;}
#header .header .wrap .nav .menu>li {padding: 0 1vw; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#header .header .wrap .nav .menu>li>a {text-decoration: none; color: #333; transition: .5s; font-size: clamp(12px, 1vw, 16px);}
#header .header .wrap .nav .menu>li:last-child {padding: 0 0 0 1vw;}
#header .header .wrap .nav .menu>li:last-child>a {color: #fff; height: 100%; display: flex; align-items: center; background-color: #002060; padding: 0 2vw;}
#header .header .wrap .nav .menu>li>a>span {display: none;}
#header .header .wrap .nav .menu .company {position: relative;}
#header .header .wrap .nav .menu>li .dropdown {transform: scaleY(0) translate(-50%,0); transform-origin: center top; transition: all .3s; position: absolute; top: 100px; left: 50%; list-style: none; width: max-content; min-width: 200px;}
#header .header .wrap .nav .menu .company:hover .dropdown {transform: scaleY(1) translate(-50%,0);}
#header .header .wrap .nav .menu>li .dropdown li a {display: block; text-decoration: none; background-color: #002060; color: #fff; transition: .5s; line-height: 4; padding: 0 2vw; text-align: center; font-size: clamp(12px, 1vw, 16px);}
#header .header .wrap .nav .menu>li .dropdown li a span {display: none;}
#header .header .wrap .responsive {display: flex;}
#header .header .wrap .responsive .responsive_box {display: none; top: 0; right: 0; padding: 11px;}
#header .header .wrap .responsive .responsive_box .responsive_btn {display: none; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; cursor: pointer; position: relative;}
.menu_line_1 ,.menu_line_2 ,.menu_line_3 {background: #222222; width: 100%; height: 2px; margin: 6px 0; transition: 0.5s;}
#header .header .wrap .nav .nav_info {display: none;}
#header .header .wrap .nav .nav_info .nav_logo {display: inline-block; text-decoration: none; transition: .5s; display: flex; align-items: center;}
#header .header .wrap .nav .nav_info .nav_logo img {width: 30px; height: 30px;}
#header .header .wrap .nav .nav_info .nav_logo p {margin: 0 0 0 10px; font-size: 18px; font-weight: bold; color: #fff;}
#header .header .wrap .nav .nav_info .nav_logo p .logo_n {font-size: 25px;}
#header .header .wrap .nav .nav_info .nav_logo p .logo_a {font-size: 25px;}
#header .header .wrap .nav .nav_info ul li {list-style: none; margin-top: 1rem; color: #fff; white-space: pre-wrap; word-break: keep-all;}
.nav_info_tel,.nav_info_map {text-decoration: none; color: #fff; margin-top: 1rem; transition: .5s;}
.nav_info_map::after{display: inline-block; width: 10px; margin-left: 5px; content: url(../img/link_w.svg); }
@media screen and (max-width:1100px) {
    #header .header .wrap .responsive {margin: 0 2vw 0 0; z-index: 101;}
    #header .header .wrap .responsive .responsive_box {display: flex;}
    #header .header .wrap .responsive .responsive_box .responsive_btn {display: flex;}
    #header .header .wrap .nav {display: flex; align-items: center; background: #002060; width: 100%; height: 100vh; position: fixed; top: 0; right: -100%; transition: 0.5s; z-index: 100;}
    #header .header .wrap .nav .menu, #header .header .wrap .nav .nav_info {display: block; width: 50%; padding: 0 0 0 2vw; height: auto;}
    #header .header .wrap .nav .menu>li {padding: 0 0 2vw; height: auto; position: relative; display: block;}
    #header .header .wrap .nav .menu>li>a {display: inline-block; font-size: 16px; color: #fff;}
    #header .header .wrap .nav .menu>li:last-child {padding: 0 0 2vw;}
    #header .header .wrap .nav .menu>li:last-child>a {color: #fff; line-height: 1.75; background-color: transparent; border: none; border-radius: 0; padding: 0; display: inline;}
    #header .header .wrap .nav .menu>li>a>span {font-size: 12px; display: block;}
    #header .header .wrap .nav .menu>li:last-child>a:hover {color: #fff; background-color: none;}
    #header .header .wrap .nav .menu .company a {padding: 0 0 2vw;}
    #header .header .wrap .nav .menu>li .dropdown {transform: none; transition: none; position: static; width: auto; min-width: auto; padding: 0 0 0 2vw;}
    #header .header .wrap .nav .menu .company:hover .dropdown {transform: none;}
    #header .header .wrap .nav .menu>li .dropdown li a {display: inline; background-color: transparent; line-height: 1.75; padding: 0 0 2vw; text-align: left;}
    #header .header .wrap .nav .menu>li .dropdown li a span {font-size: 12px; display: block;}
}
#header .header .wrap .menu_active {right: 0;}
.line_1_active {transform: translateY(14px) rotate(-45deg); background: #fff;}
.line_2_active {opacity: 0;}
.line_3_active {transform: translateY(-14px) rotate(45deg); background: #fff;}
@media screen and (max-width:768px) {
    #header .header {height: 70px;}
    #header .header .wrap h1 {padding-left: 15px;}
    #header .header .wrap h1 .logo img {width: 30px; height: 30px;}
    #header .header .wrap h1 .logo p {font-size: 18px;}
    #header .header .wrap h1 .logo p .logo_n {font-size: 25px;}
    #header .header .wrap h1 .logo p .logo_a {font-size: 25px;}
    #header .header .wrap .responsive {margin: 0 15px 0 0;}
    #header .header .wrap .responsive .responsive_box {padding: 7px;}
    #header .header .wrap .responsive .responsive_box .responsive_btn {width: 36px; height: 36px;}
    #header .header .wrap .nav {display: block;}
    #header .header .wrap .nav .menu {width: 100%; padding: 0 0 0 40px; margin: 50px 0 0;}
    #header .header .wrap .nav .nav_info {display: none;}
    #header .header .wrap .nav .menu>li {padding: 0 0 1rem;}
    .menu_line_1 ,.menu_line_2 ,.menu_line_3 {height: 2px; margin: 4.5px 0;}
    .line_1_active {transform: translateY(11px) rotate(-45deg);}
    .line_3_active {transform: translateY(-11px) rotate(45deg);}
}
/* common */
.area h2 {text-align: center; font-size: 40px;}
.area h2 span {font-size: 20px;}
.area {margin: 0 auto; padding: 200px 20px;}
#top .wrap .area {padding: 200px 20px 0;}
.blueback {background-color: #002060; background-image: url(../img/lines.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.blueback .area {color: #fff;}
.blueback .link {text-align: center;}
.grayback {background-color: #ECECEC; background-image: url(../img/lines_2.svg); background-repeat: repeat-y; background-size: 100% auto; background-position: top center;}
.text700 {margin: 100px auto; max-width: 700px; line-height: 2.5;}
.link a {display: inline-block; font-size: 22px; color: #333; position: relative; padding: 0 80px 0 0; border-bottom: 1px solid #333;}
.link.white a {color: #fff; border-bottom: 1px solid #fff;}
.link a::after {position: absolute; right: 0; top: 50%; transform: translate(0,-50%); content: url(../img/arrow.svg); width: 50px; height: 50px;}
.link.white a::after {content: url(../img/arrow_w.svg);}
@media screen and (max-width:768px) {
    .area h2 {text-align: center; font-size: 25px;}
    .area h2 span {font-size: 14px;}
    .area {margin: 0 auto; padding: 150px 20px;}
    #top .wrap .area {padding: 150px 20px 0;}
    .blueback {background-size: 250%;}
    .text700 {margin: 70px auto;}
    .link a {font-size: 20px; padding: 0 40px 0 0;}
    .link a::after {width: 30px; height: 30px;}
}
#header .wrap.page {padding: 150px 0 0;}
#header .wrap.page h2 {font-size: 30px; padding: 0 0 0 2vw; position: relative; line-height: 2.7;}
#header .wrap.page h2 span {position: absolute; font-family: "Josefin Sans", sans-serif; font-weight: bold; text-transform: uppercase; font-size: 80px; color: rgba(0, 32, 96, 0.1); line-height: 1; top: 0; left: 2vw; z-index: -1; letter-spacing: 0.25em;}
#header .wrap.page .image {width: 85%; margin: 70px auto 0 0;}
#header .wrap.page .image img {border-radius: 0 1.56vw 1.56vw 0;}
@media screen and (max-width:768px) {
    #header .wrap.page {padding: 100px 0 0;}
    #header .wrap.page h2 {font-size: 24px;}
    #header .wrap.page h2 span {font-size: 60px;}
    #header .wrap.page .image {width: 95%; margin: 50px auto 0 0;}
}
@media screen and (max-width:590px) {
    #header .wrap.page h2 {font-size: 20px; line-height: 2;}
    #header .wrap.page h2 span {font-size: 40px;}    
}
.wrap.basic {max-width: calc(1360px - 2vw); margin: 0 auto; padding: 100px 2vw;}
.wrap.basic h3 {font-size: 24px; line-height: 1;}
.wrap.basic h3 span {font-size: 14px;}
.wrap.basic .area {margin: 50px auto;}
@media screen and (max-width:768px) {
    .wrap.basic {padding: 70px 2vw;}
    .wrap.basic h3 {font-size: 20px;}
    .wrap.basic h3 span {font-size: 10px;}
}
/* service-list */
.service-list {list-style: none; padding: 0 0 200px 0;}
.service-list li {display: flex; margin: 0 0 400px 0;}
.service-list li:nth-child(even) {flex-direction: row-reverse;}
.service-list li:last-child {margin: 0;}
.service-list li .img,
.service-list li .desc {width: 50%;}
.service-list li .desc .box {max-width: 680px; margin: 0 auto 0 0; padding: 0 0 0 50px;}
.service-list li:nth-child(even) .desc .box {margin: 0 0 0 auto; padding: 0 50px 0 0;}
.service-list li .desc .box h3 {font-size: 30px; text-align: right; line-height: 1.25;}
.service-list li:nth-child(even) .desc .box h3 {text-align: left;}
.service-list li .desc .box h3 span {font-family: "Josefin Sans", sans-serif; font-size: 70px;}
.service-list li .desc .box .catch {font-size: 25px; margin: 80px 0; text-align: right;}
.service-list li:nth-child(even) .desc .box .catch {text-align: left;}
.service-list li .desc .box .link {margin: 80px auto 0; text-align: right;}
.service-list li:nth-child(even) .desc .box .link {text-align: left;}
@media screen and (max-width:1400px) {
    .service-list li .desc .box {padding: 0 20px 0 50px;}
    .service-list li:nth-child(even) .desc .box {padding: 0 50px 0 20px;}
}
@media screen and (max-width:1280px) {
    .service-list li {display: block; margin: 0 0 300px 0;}
    .service-list li .img,
    .service-list li .desc {width: 100%;}
    .service-list li .img img {max-width: 680px;}
    .service-list li .desc .box,
    .service-list li:nth-child(even) .desc .box {margin: -150px 0 0 auto; background-color: rgba(236, 236, 236, 0.7); padding: 50px; position: relative; z-index: 1;}
    .service-list li .desc .box h3,
    .service-list li:nth-child(even) .desc .box h3 {font-size: 20px; text-align: right;}
    .service-list li .desc .box h3 span {font-size: 50px;}
    .service-list li .desc .box .catch,
    .service-list li:nth-child(even) .desc .box .catch {font-size: 18px; margin: 50px 0; text-align: right;}
    .service-list li .desc .box .link,
    .service-list li:nth-child(even) .desc .box .link {margin: 50px auto 0; text-align: right;}
}
@media screen and (max-width:768px) {
    .service-list {padding: 0 0 150px 0;}
    .service-list li {margin: 0 0 150px 0;}
    .service-list li .img img {max-width: auto;}
    .service-list li .desc .box,
    .service-list li:nth-child(even) .desc .box {margin: 70px auto 0; background-color: transparent; padding: 0 20px;}
    .service-list li .desc .box h3,
    .service-list li:nth-child(even) .desc .box h3 {font-size: 18px;}
    .service-list li .desc .box h3 span {font-size: 40px;}
    .service-list li .desc .box .catch,
    .service-list li:nth-child(even) .desc .box .catch {font-size: 16px;}
}
/* news */
#news .wrap .area {max-width: 1360px;}
#news .wrap .area .news-list {margin: 100px auto;}
#news .wrap .area .news-list ul {list-style: none;}
#news .wrap .area .news-list>ul>li {border-bottom: 1px solid #fff; padding: 0 2vw; margin: 0 auto 50px; color: #fff;}
#news .wrap .area .news-list>ul>li:last-child {margin: 0 auto;}
#news .wrap .area .news-list>ul>li .date {display: flex;}
#news .wrap .area .news-list>ul>li .date time {margin: 0 50px 0 0;}
#news .wrap .area .news-list>ul>li .date .cat ul {display: flex;}
#news .wrap .area .news-list>ul>li .date .cat ul li {background-color: #fff; color: #002060; border-radius: 99px; font-size: 14px; min-width: 100px; line-height: 2; text-align: center;}
#news .wrap .area .news-list>ul>li a h3 {font-size: 20px; line-height: 3; color: #fff; display: inline-block;}
#news .wrap .area .news-list>ul>li a:hover {opacity: .7;}
#news .wrap .area .link {text-align: center;}
@media screen and (max-width:768px) {
    #news .wrap .area h2 {font-size: 24px;}
    #news .wrap .area .news-list {margin: 70px auto;}
    #news .wrap .area .news-list>ul>li .date time {margin: 0 30px 0 0;}
    #news .wrap .area .news-list>ul>li .date .cat ul li {font-size: 12px;}
    #news .wrap .area .news-list>ul>li a h3 {font-size: 18px;}
}
/* cfs */
.wrap.step,
.wrap.card {padding: 200px 20px;}
.wrap .block {max-width: 1360px; margin: 0 auto;}
.wrap .block  h3 {font-size: 24px; line-height: 1;}
.wrap .block  h3 span {font-size: 14px;}
.wrap .note {margin: 50px auto;}
@media screen and (max-width:768px) {
    .wrap.step,
    .wrap.card {padding: 150px 20px;}
}
/* step */
.wrap.step .block .step-list {margin: 50px auto 0;}
.wrap.step .block .step-list ol {list-style: none; display: flex; flex-direction: column; gap: 50px;}
.wrap.step .block .step-list ol li {background-color: rgba(0, 32, 96, 0.1); border-radius: 1.56vw; position: relative; counter-increment: mycounter;}
.wrap.step .block .step-list ol li::before {font-size: 50px; font-weight: bold; position: absolute; top: 1.5vw; left: 1.5vw; line-height: 1; color: #fff; content: counter(mycounter, decimal-leading-zero);}
.wrap.step .block .step-list ol li .step {padding: 3.5vw 7vw;}
.wrap.step .block .step-list ol li .step .ttl { margin: 0 auto 50px;}
.wrap.step .block .step-list ol li .step .ttl h4 {font-size: 20px; border-bottom: 1px solid #222;}
.wrap.step .block .step-list ol li .step .ttl .subttl {font-size: 12px;}
.wrap.step .block .step-list ol li .step .box {display: flex;}
.wrap.step .block .step-list ol li .step .box .text {width: 50%;}
.wrap.step .block .step-list ol li .step .box .img {width: 50%; padding: 0 0 0 2vw;}
@media screen and (max-width:1080px) {
    .wrap.step .block .step-list ol li .step {padding: 70px 3vw;}
    .wrap.step .block .step-list ol li .step .box {display: block;}
    .wrap.step .block .step-list ol li .step .box .text {width: 100%;}
    .wrap.step .block .step-list ol li .step .box .img {width: 100%; padding: 2vw 0 0 0;}
    .wrap.step .block .step-list ol li .step .box .img img {max-width: 600px; margin: 0 auto;}
}
@media screen and (max-width:768px) {
    .wrap.step .block h3 {font-size: 20px;}
    .wrap.step .block h3 span {font-size: 10px;}
    .wrap.step .block .step-list ol li .step .box .text h4 {font-size: 18px;}
}
/* card */
.wrap.card {background-color: rgba(0, 32, 96, 0.1);}
.wrap.card .block .card-list ul {list-style: none; display: flex; flex-wrap: wrap; gap: 2vw;}
.wrap.card .block .card-list ul li {width: calc(50% - 1vw); padding: 3vw; background-color: #fff; border-radius: 1.56vw;}
.wrap.card .block .card-list ul li h4 {font-size: 20px; text-align: center;}
.wrap.card .block .card-list ul li .img {margin: 2vw auto 3vw;}
.wrap.card .block .card-list ul li .img img {max-width: 540px; margin: 0 auto;}
.wrap.card .block .card-list .image {width: 100%;; padding: 5vw; margin: 2vw 0; background-color: #fff; border-radius: 1.56vw;}
.wrap.card .block .card-list .image img {max-width: 1048px; margin: 0 auto;}
@media screen and (max-width:768px) {
    .wrap.card .block h3 {font-size: 20px;}
    .wrap.card .block h3 span {font-size: 10px;}
    .wrap.card .block .card-list ul li {width: 100%;}
    .wrap.card .block .card-list ul li h4 {font-size: 18px;}
}
/* footer */
#contact .wrap {background-image: url(../img/footer-contact.webp);background-repeat: no-repeat; background-position: center; background-size: cover;}
#contact .wrap .filter {padding: 120px 90px; background-color: rgba(0, 32, 96, 0.8); color: #fff; background-image: url(../img/lines_3.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#contact .wrap .filter h2 {font-size: 30px; text-align: left;}
#contact .wrap .filter .text {margin: 50px auto 80px;}
#contact .wrap .filter .contact-link {display: flex; justify-content: center;}
#contact .wrap .filter .contact-link div:first-child {margin: 0 100px 0 0;}
@media screen and (max-width:768px) {
    #contact .wrap .filter {padding: 100px 50px;}
    #contact .wrap .filter h2 {font-size: 24px;}
    #contact .wrap .filter .text {margin: 30px auto 50px;}
}
@media screen and (max-width:590px) {
    #contact .wrap .filter .contact-link {flex-direction: column;}
    #contact .wrap .filter .contact-link div:first-child {margin: 0 auto 50px;}
    #contact .wrap .filter .contact-link div {margin: 0 auto;}
}
#footer .wrap {padding: 80px 90px; background-color: #051129;}
#footer .wrap .inner .logo-w p {font-size: 36px; color: #fff;}
#footer .wrap .inner .logo-w span {font-size: 50px;}
#footer .wrap .inner .footer-nav {max-width: 1000px; display: flex; margin: 0 0 100px auto;}
#footer .wrap .inner .footer-nav .menu {width: 25%; list-style: none;}
#footer .wrap .inner .footer-nav .menu li a {color: #fff; line-height: 3;}
#footer .wrap .inner .footer-nav .menu li .child-menu {list-style: none; margin-left: 1rem;}
#footer .wrap .copy {color: #fff; text-align: center;}
@media screen and (max-width:1000px) {
    #footer .wrap {padding: 80px 20px;}
}
@media screen and (max-width:768px) {
    #footer .wrap .inner .logo-w p {font-size: 18px;}
    #footer .wrap .inner .logo-w span {font-size: 25px;}
    #footer .wrap .inner .footer-nav {display: block; margin: 70px auto;}
    #footer .wrap .inner .footer-nav .menu {width: 100%;}
}