@charset "utf-8";
body {font-family: "Noto Sans JP", sans-serif; font-size: 16px; color: #222; line-height: 1.75;}
img {display: block; width: 100%;}
a {text-decoration: none; color: #222; 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.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); 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 {transition: .5s;}
#header .header .wrap h1 .logo img {height: 35px;}
#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 2vw 0 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#header .header .wrap .nav .menu>li>a {text-decoration: none; color: #4A4A4A; transition: .5s;}
#header .header .wrap .nav .menu>li:last-child>a {color: #fff; line-height: 3; background-color: #2C3E50; border: 1px solid #2C3E50; border-radius: 99px; padding: 0 2vw;}
#header .header .wrap .nav .menu>li>a:hover {opacity: .7;}
#header .header .wrap .nav .menu>li:last-child>a:hover {opacity: 1; color: #2C3E50; background-color: #fff;}
#header .header .wrap .nav .menu>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;}
#header .header .wrap .nav .nav_info .nav_logo img {height: 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:1280px) {
    #header .header .wrap h1 .logo img {height: 25px;}
    #header .header .wrap .nav .menu>li>a {font-size: 16px;}
}
@media screen and (max-width:1080px) {
    #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: #2C3E50; 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>a {color: #fff; line-height: 1.75; background-color: none; border: none; border-radius: 0; padding: 0;}
    #header .header .wrap .nav .menu>li>a>span {font-size: 12px; display: block;}
    #header .header .wrap .nav .menu>li:last-child>a:hover {opacity: .7; color: #fff; background-color: none;}
}
#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 {height: 20px;}
    #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, #header .header .wrap .nav .nav_info {width: 100%; padding: 0 0 0 40px; margin: 50px 0 0;}
    #header .header .wrap .nav .nav_info .nav_logo img {height: 25px;}
    #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 */
.link a {display: inline-block; font-size: 30px; font-weight: bold; color: #2C3E50; position: relative; padding: 0 80px 0 0;}
.link.white a {color: #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) {
    .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: 100px; color: #F2F4F7; 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: 85px;}
    #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: 50px;}    
}
.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 .content {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 */
#service .wrap {padding: 100px 20px;}
#service .wrap .block {display: flex;}
#service .wrap .block .content {background-color: #2C3E50; color: #fff; border-radius: 1.56vw; padding: 5.2vw 3.65vw; width: 50%; display: flex; flex-direction: column; justify-content: center;}
#service .wrap .block .content h2 {font-size: 30px;}
#service .wrap .block .content h2 span {font-size: 18px;}
#service .wrap .block .content .text {margin: 5.2vw auto;}
#service .wrap .block .images {width: 50%;}
#service .wrap .block .images .img-1 {width: 100%; height: 60%; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 1.56vw;}
#service .wrap .block .images .image {display: flex; height: 40%;}
#service .wrap .block .images .img-2 {width: 60%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 1.56vw;}
#service .wrap .block .images .img-3 {width: 40%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 1.56vw;}
@media screen and (max-width:1080px) {
    #service .wrap .block {flex-direction: column;}
    #service .wrap .block .content,
    #service .wrap .block .images {width: 100%; display: flex;}
    #service .wrap .block .images .img-1 {width: 60%; height: 100%; aspect-ratio: 6 / 5;}
    #service .wrap .block .images .image {width: 40%; height: 100%; flex-direction: column;}
    #service .wrap .block .images .img-2 {width: 100%; height: 100%; aspect-ratio: 4 / 3;}
    #service .wrap .block .images .img-3 {width: 100%; height: 100%; aspect-ratio: 2 / 1;}
}
@media screen and (max-width:768px) {
    #service .wrap {padding: 70px 10px;}
    #service .wrap .block .content {padding: 70px 40px;}
    #service .wrap .block .content h2 {font-size: 24px;}
    #service .wrap .block .content h2 span {font-size: 14px;}
}
@media screen and (max-width:590px) {
    #service .wrap .block .content {padding: 50px 20px;}
    #service .wrap .block .content h2 {font-size: 20px;}
    #service .wrap .block .content h2 span {font-size: 12px;}
}
/* about */
#about .wrap {background-color: #F2F4F7; padding: 100px 0;}
#about .wrap .block {padding: 0 2vw;}
#about .wrap .block h2 {font-size: 30px; margin: 0 auto 50px;}
#about .wrap .block .content {display: flex;}
#about .wrap .block .content .catch {width: 30%; font-size: 24px; font-weight: bold;}
#about .wrap .block .content .text {width: 70%;}
#about .wrap .slider .swiper.swiper-images {padding: 100px 0;}
#about .wrap .slider .swiper .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#about .wrap .slider .swiper .swiper-wrapper .swiper-slide .item img {display: block; width: 100%; border-radius: 999px;}
#about .wrap .slider .loop {display: flex; justify-content: flex-start; align-items: center; overflow: hidden;}
#about .wrap .slider .loop ul {display: flex; animation: loop-text 40s linear infinite;}
#about .wrap .slider .loop ul li {display: inline-block; font-family: "Josefin Sans", sans-serif; font-weight: bold; font-size: 100px; white-space: nowrap; padding: 0 50px 0 0;}
@keyframes loop-text {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
#about .wrap .link {margin: 100px auto 0; text-align: center;}
@media screen and (max-width:768px) {
    #about .wrap .block h2 {font-size: 24px; margin: 0 auto 30px;}
    #about .wrap .block .content {display: block;}
    #about .wrap .block .content .catch {width: 100%; font-size: 20px; margin: 0 auto 10px;}
    #about .wrap .block .content .text {width: 100%;}
    #about .wrap .slider .swiper.swiper-images {padding: 70px 0;}
    #about .wrap .slider .loop ul li {font-size: 75px; padding: 0 37px 0 0;}
    #about .wrap .link {margin: 70px auto 0;}
}
/* case */
#case .wrap {padding: 100px 0;}
#case .wrap .block {padding: 0 2vw;}
#case .wrap .block h2 {font-size: 30px; margin: 0 auto 50px;}
#case .wrap .block h2 span {font-size: 18px;}
#case .wrap .block .content {display: flex;}
#case .wrap .block .content .catch {width: 30%; font-size: 24px; font-weight: bold;}
#case .wrap .block .content .text {width: 70%;}
#case .wrap .case-list {margin: 100px auto; max-width: calc(1360px - 2vw); padding: 0 2vw;}
#case .wrap .case-list ul {list-style: none;}
#case .wrap .case-list ul li {background-color: #F2F4F7; border-radius: 1.56vw; margin: 0 auto 100px;}
#case .wrap .case-list ul li .item {display: flex;}
#case .wrap .case-list ul li .item .img,
#case .wrap .case-list ul li .item .text {width: 50%; padding: 3.5vw;}
#case .wrap .case-list ul li .item .text h3 {font-size: 20px; border-bottom: 2px solid #2C3E50; line-height: 3;}
#case .wrap .case-list ul li .item .text .excerpt {margin: 3.5vw auto;}
#case .wrap .link {text-align: center;}
#case .wrap .case-list ul li .item .text .link {text-align: right;}
#case .wrap .case-list ul li .item .text .link a {font-size: 20px; padding: 0 40px 0 0;}
#case .wrap .case-list ul li .item .text .link a::after {width: 30px; height: 30px;}
@media screen and (max-width:1080px) {
    #case .wrap .case-list ul li .item {display: block;}
    #case .wrap .case-list ul li .item .img,
    #case .wrap .case-list ul li .item .text {width: 100%;}
    #case .wrap .case-list ul li .item .img img {max-width: 640px; margin: 0 auto;}
    #case .wrap .case-list ul li .item .text .link {text-align: center;}
}
@media screen and (max-width:768px) {
    #case .wrap .block h2 {font-size: 24px; margin: 0 auto 30px;}
    #case .wrap .block h2 span {font-size: 14px;}
    #case .wrap .block .content {display: block;}
    #case .wrap .block .content .catch {width: 100%; font-size: 20px; margin: 0 auto 10px;}
    #case .wrap .block .content .text {width: 100%;}
    #case .wrap .case-list ul li .item .img {padding: 50px 20px 25px;}
    #case .wrap .case-list ul li .item .text {padding: 25px 20px 50px;}
    #case .wrap .case-list ul li .item .text h3 {font-size: 16px; border-bottom: 1px solid #2C3E50;}
    #case .wrap .case-list ul li .item .text .link a {font-size: 18px; padding: 0 36px 0 0;}
    #case .wrap .case-list ul li .item .text .link a::after {width: 25px; height: 25px;}
}
/* news */
#news .wrap {background-color: #F2F4F7; padding: 100px 0;}
#news .wrap .block {max-width: calc(1360px - 2vw); margin: 0 auto; padding: 0 2vw;}
#news .wrap .block h2 {font-size: 30px; text-align: center;}
#news .wrap .block .news-list {margin: 100px auto;}
#news .wrap .block .news-list ul {list-style: none;}
#news .wrap .block .news-list>ul>li {border-bottom: 1px solid #2C3E50; padding: 0 2vw; margin: 0 auto 50px;}
#news .wrap .block .news-list>ul>li:last-child {margin: 0 auto;}
#news .wrap .block .news-list>ul>li .date {display: flex;}
#news .wrap .block .news-list>ul>li .date time {margin: 0 50px 0 0;}
#news .wrap .block .news-list>ul>li .date .cat ul {display: flex;}
#news .wrap .block .news-list>ul>li .date .cat ul li {background-color: #2C3E50; color: #fff; border-radius: 99px; font-size: 14px; min-width: 100px; line-height: 2; text-align: center;}
#news .wrap .block .news-list>ul>li a h3 {font-size: 20px; line-height: 3; display: inline-block;}
#news .wrap .block .news-list>ul>li a:hover {opacity: .7;}
#news .wrap .block .link {text-align: center;}
@media screen and (max-width:768px) {
    #news .wrap .block h2 {font-size: 24px;}
    #news .wrap .block .news-list {margin: 70px auto;}
    #news .wrap .block .news-list>ul>li .date time {margin: 0 30px 0 0;}
    #news .wrap .block .news-list>ul>li .date .cat ul li {font-size: 12px;}
    #news .wrap .block .news-list>ul>li a h3 {font-size: 18px;}
}
/* links */
#links .wrap {padding: 100px 0;}
#links .wrap .swiper .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#links .wrap .swiper .swiper-wrapper .swiper-slide a img {display: block; width: 100%;}
/* footer */
#contact .wrap {padding: 0 2vw 50px;}
#contact .wrap .block {padding: 3vw 4vw; background-color: #2C3E50; border-radius: 1.56vw; color: #fff;}
#contact .wrap .block h2 {font-size: 30px;}
#contact .wrap .block .text {margin: 3vw auto;}
#contact .wrap .block .contact-link {display: flex; justify-content: center;}
#contact .wrap .block .contact-link div:first-child {margin: 0 100px 0 0;}
@media screen and (max-width:768px) {
    #contact .wrap .block {padding: 50px 25px;}
    #contact .wrap .block h2 {font-size: 24px;}
    #contact .wrap .block .text {margin: 50px auto;}
}
@media screen and (max-width:590px) {
    #contact .wrap .block .contact-link {flex-direction: column;}
    #contact .wrap .block .contact-link div:first-child {margin: 0 auto 50px;}
    #contact .wrap .block .contact-link div {margin: 0 auto;}
}
#footer .wrap {padding: 100px 5vw 10px; background-color: #222; border-radius: 1.56vw 1.56vw 0 0;}
#footer .wrap .block .logo {display: inline-block;}
#footer .wrap .block .logo img {height: 35px;}
#footer .wrap .block .footer-nav {display: flex; margin: 2vw auto;}
#footer .wrap .block .footer-nav .address {width: 40%;}
#footer .wrap .block .footer-nav .address p,
#footer .wrap .block .footer-nav .address a {color: #fff;}
#footer .wrap .block .footer-nav .menu {width: 60%; list-style: none; display: grid; grid-template-columns: auto auto auto;}
#footer .wrap .block .footer-nav .menu li a {color: #fff;}
#footer .wrap .copy {color: #fff; text-align: center;}
@media screen and (max-width:1080px) {
    #footer .wrap .block .footer-nav {display: block;}
    #footer .wrap .block .footer-nav .address {width: 100%; margin: 0 auto 50px;}
    #footer .wrap .block .footer-nav .menu {width: 100%;}
}
@media screen and (max-width:768px) {
    #footer .wrap .block .logo img {height: 25px;}
    #footer .wrap .block .footer-nav .menu {grid-template-columns: auto auto;}

}