@charset "UTF-8";

/*=============================================
 * HOME
*=============================================*/
#mv {
   display: flex;
   justify-content: center;
   align-items: center;
   /*background: url("../img/index/mv-bg-img.jpg") no-repeat center/cover;*/
   width: 100%;
   height: 475px;
   position: relative;
}

#mv video {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   object-fit: cover;
}

#mv h2 {
   max-width: 981px;
   margin: 0 auto;
}

@media screen and (max-width: 767px) {
   #mv {
      height: 42vw;
      min-height: 150px;
   }
}

/* -- --*/
#top__products {
   padding: 30px 0;
}

#top__products .swiper-slide {
   width: 185px;
   margin-right: 20px;
}

#top__products .swiper-slide p {
   width: 100%;
   padding-top: 140px;
   position: relative;
}

#top__products .swiper-slide p img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__products .swiper-slide figcaption {
   background-color: #1b2d75;
   color: #fff;
   font-weight: 500;
   text-align: center;
   padding: 7px;
}

#top__products .swiper-button-next,
#top__products .swiper-button-prev {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   margin-top: 0;
}

#top__products .swiper-button-next {
   right: -50px;
}

#top__products .swiper-button-prev {
   left: -50px;
}

@media screen and (max-width: 1200px) {
   #top__products .wrap {
      padding: 0 50px;
   }

   #top__products .swiper-button-next {
      right: 0;
   }

   #top__products .swiper-button-prev {
      left: 0;
   }
}

@media screen and (max-width: 767px) {
   #top__products .swiper-button-next {
      right: 5px;
   }

   #top__products .swiper-button-prev {
      left: 5px;
   }
}

/* -- --*/
#top__about {
   background: url('../img/index/about-bg.webp') no-repeat center / cover;
   color: #fff;
   padding: 110px 0;
}

#top__about h3 {
   padding-top: 40px;
}

#top__about .txt {
   line-height: 48px;
   padding-top: 25px;
}

@media screen and (max-width: 1023px) {
   #top__about h3 {
      font-size: 32px;
   }

   #top__about .txt br.pc {
      display: none;
   }
}

@media screen and (max-width: 767px) {
   #top__about {
      padding: 50px 0;
   }

   #top__about h3 {
      font-size: 22px;
      padding-top: 30px;
   }

   #top__about .txt {
      line-height: 32px;
      padding-top: 20px;
   }
}

/* -- --*/
#top__point {
   padding: 80px 0 90px;
}

#top__point .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding-top: 90px;
}

#top__point .box .col {
   background-color: #f2f2f2;
   position: relative;
}

#top__point .box figure {
   position: relative;
}

#top__point .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #f2f2f2 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#top__point .box figure figcaption {
   color: #fff;
   font-weight: 700;
   font-size: 21px;
   line-height: 26px;
   position: absolute;
   top: 50%;
   right: 0;
   left: 0;
   transform: translateY(-50%);
   text-align: center;
}

#top__point .box .no {
   font-size: 30px;
   line-height: 50px;
   position: absolute;
   top: -30px;
   left: 0;
   z-index: 1;
}

#top__point .box .no strong {
   font-weight: 400;
   font-size: 50px;
}

#top__point .box .txt {
   padding: 16px;
}

@media screen and (max-width: 1023px) {
   #top__point .box {
      gap: 10px;
   }
}

@media screen and (max-width: 767px) {
   #top__point {
      padding: 50px 0;
   }

   #top__point .box {
      grid-template-columns: 1fr;
      gap: 50px;
      padding-top: 50px;
   }
}

/* -- --*/
#top__flow {
   padding-bottom: 90px;
}

#top__flow figure {
   margin: 0 -14px;
   padding-top: 40px;
}

@media screen and (max-width: 1200px) {
   #top__flow figure {
      margin: 0;
   }
}

@media screen and (max-width: 767px) {
   #top__flow {
      padding-bottom: 50px;
   }

   #top__flow figure {
      padding-top: 20px;
   }
}

/* -- --*/
#top__service {
   background: #1b2d75;
   color: #fff;
   padding: 90px 0 100px;
}

#top__service .desc {
   padding-top: 50px;
}

#top__service .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 35px 25px;
   padding-top: 50px;
}

#top__service .box .col a {
   display: block;
   background-color: #fff;
   color: #1b2d75;
}

#top__service .box figure {
   padding-top: 66.4%;
   position: relative;
}

#top__service .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#top__service .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__service .box .text {
   padding: 15px;
}

#top__service .box h3 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 44px;
   line-height: 22px;
   border-bottom: 1px solid #fff;
   padding-bottom: 15px;
}

#top__service .box .txt {
   padding-top: 15px;
}

#top__service .button {
   padding-top: 60px;
}

@media screen and (max-width: 1023px) {
   #top__service .box {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   #top__service {
      padding: 50px 0;
   }

   #top__service .desc {
      padding-top: 20px;
   }

   #top__service .box {
      grid-template-columns: 1fr;
      padding-top: 20px;
   }

   #top__service .button {
      padding-top: 30px;
   }
}

@media screen and (min-width: 1201px) {
   #top__service .wrap {
      max-width: 1100px;
   }
}

/* -- --*/
#top__works {
   background-color: #f2f2f2;
   padding: 90px 0;
}

#top__works .desc {
   padding-top: 50px;
}

#top__works .block {
   padding-top: 50px;
}

#top__works .block+.block {
   padding-top: 70px;
}

#top__works .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
   padding-top: 30px;
}

#top__works .box figure {
   position: relative;
   padding-top: 68%;
}

#top__works .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#top__works .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__works .box .ttl {
   background-color: #1b2d75;
   color: #fff;
   padding: 10px;
   text-align: center;
}

#top__works .button {
   padding-top: 50px;
}

@media screen and (max-width: 1023px) {
   #top__works .box {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   #top__works {
      padding: 50px 0;
   }

   #top__works .desc {
      padding-top: 20px;
   }

   #top__works .block {
      padding-top: 20px;
   }

   #top__works .block+.block {
      padding-top: 50px;
   }

   #top__works .box {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding-top: 20px;
   }

   #top__works .box .ttl {
      font-size: 14px;
   }

   #top__works .button {
      padding-top: 30px;
   }
}

@media screen and (min-width: 1201px) {
   #top__works .wrap {
      max-width: 1100px;
   }
}

/* -- --*/
#top__column {
   padding: 90px 0;
}

#top__column .desc {
   padding-top: 50px;
}

#top__column .box {
   display: grid;
   gap: 30px 0;
   padding-top: 50px;
}

#top__column .box .item a {
   display: grid;
   grid-template-columns: 280px 1fr;
   align-items: center;
   gap: 25px;
   background-color: #f2f2f2;
   padding: 25px 80px 25px 25px;
   position: relative;
}

#top__column .box .item a:before {
   content: '';
   width: 50px;
   background: #1b2d75;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
}

#top__column .box .item a:after {
   content: '';
   border-width: 7px 0 7px 10px;
   border-color: transparent transparent transparent #fff;
   border-style: solid;
   position: absolute;
   top: calc(50% - 7px);
   right: 20px;
   transition: all 0.3s;
}

#top__column .box .item a:hover:after {
   transform: translateX(5px);
}

#top__column .box figure {
   padding-top: 215px;
   position: relative;
}

#top__column .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__column .box .cat {
   display: inline-block;
   background-color: #fff;
   min-width: 80px;
   font-size: 14px;
   line-height: 30px;
   border-radius: 50px;
   padding: 0 20px;
   text-align: center;
}

#top__column .box h3 {
   border-bottom: 1px solid;
   padding: 10px 0;
}

#top__column .box h3 span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#top__column .box .txt {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 10px;
}

#top__column .button {
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   #top__column {
      padding: 50px 0;
   }

   #top__column .desc {
      padding-top: 20px;
   }

   #top__column .box {
      padding-top: 30px;
   }

   #top__column .box .item a {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px 20px 50px;
   }

   #top__column .box .item a:before {
      width: 100%;
      height: 30px;
      top: auto;
   }

   #top__column .box .item a:after {
      top: calc(100% - 21px);
      right: auto;
      left: calc(50% - 5px);
   }

   #top__column .box figure {
      padding-top: 76.7%;
   }

   #top__column .button {
      padding-top: 30px;
   }
}

/* =============================================
 * 当社の強み
*=============================================*/
#strengths__lead {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 60px 30px;
   padding-top: 27px;
}

#strengths__lead .col {
   width: calc(33.33% - 20px);
   background-color: #f2f2f2;
   position: relative;
   text-align: center;
   transition: all 0.3s;
}

#strengths__lead .col a {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   font-size: 0;
}

#strengths__lead .col:hover {
   opacity: 0.7;
}

#strengths__lead figure {
   position: relative;
}

#strengths__lead figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #f2f2f2 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#strengths__lead .no {
   font-size: 30px;
   line-height: 50px;
   position: absolute;
   top: -30px;
   left: 0;
   z-index: 1;
}

#strengths__lead .no strong {
   font-weight: 400;
   font-size: 50px;
}

#strengths__lead .txt {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 105px;
   line-height: 26px;
}

@media screen and (max-width: 1200px) {
   #strengths__lead .col {
      width: calc(50% - 15px);
   }
}

@media screen and (max-width: 767px) {
   #strengths__lead {
      flex-direction: column;
   }

   #strengths__lead .col {
      width: 100%;
   }
}

/* -- -- */
[id*="strengths__sec"] {
   padding-top: 60px;
}

[id*="strengths__sec"] h2 {
   display: grid;
   grid-template-columns: 140px 1fr;
   align-items: center;
   gap: 20px;
   background-color: #1b2d75;
   color: #fff;
   padding: 20px 25px 15px;
}

[id*="strengths__sec"] h2 .no {
   font-size: 20px;
   line-height: 1;
   border-right: 1px solid #fff;
   padding-right: 20px;
}

[id*="strengths__sec"] h2 .no strong {
   font-weight: 400;
   font-size: 40px;
}

[id*="strengths__sec"] .box-img {
   display: flex;
   gap: 45px;
   padding-top: 35px;
}

[id*="strengths__sec"] .box-img figure {
   width: 360px;
}

[id*="strengths__sec"] .box-img .txt {
   width: 495px;
   font-weight: 400;
   line-height: 34px;
   padding: 10px 0;
}

[id*="strengths__sec"] .box-img.img-r {
   flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
   [id*="strengths__sec"] h2 {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 20px 20px 15px;
   }

   [id*="strengths__sec"] h2 .no {
      text-align: center;
      border-right: 0;
      border-bottom: 1px solid #fff;
      padding: 0 0 10px;
   }

   [id*="strengths__sec"] .box-img {
      flex-direction: column;
      gap: 30px;
      padding-top: 30px;
   }

   [id*="strengths__sec"] .box-img .txt,
   [id*="strengths__sec"] .box-img figure {
      width: 100%;
   }

   [id*="strengths__sec"] .box-img .txt {
      line-height: 28px;
      padding: 0;
   }

   [id*="strengths__sec"] .box-img.img-r {
      flex-direction: column;
   }
}

/* =============================================
 * 技術・サービス
*=============================================*/
.page-id-30 #top__service {
   background: #f2f2f2;
   padding: 0;
}

.page-id-30 #top__service .box {
   grid-template-columns: repeat(3, 1fr);
   gap: 35px 30px;
   padding: 35px;
}

@media screen and (max-width: 1200px) {
   .page-id-30 #top__service .box {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   .page-id-30 #top__service .box {
      grid-template-columns: 1fr;
      padding: 20px;
   }
}

/* -- -- */
.service-details h2 {
   display: flex;
   align-items: center;
   gap: 20px;
   font-weight: 700;
   font-size: 50px;
   line-height: 50px;
}

.service-details h2:before,
.service-details h2:after {
   content: '';
   border-top: 1px solid;
   flex: 1 0 0;
}

.service-details .box {
   display: flex;
   gap: 32px;
   padding-top: 30px;
}

.service-details .box figure {
   width: 340px;
}

.service-details .box .txt {
   width: 490px;
}

.service-details .block {
   background-color: #f2f2f2;
   margin-top: 50px;
}

.service-details .problem {
   padding: 45px 35px;
   position: relative;
}

.service-details .problem:before {
   content: '';
   width: 100%;
   height: 81px;
   background-color: #f2f2f2;
   position: absolute;
   top: 100%;
   left: 0;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
   margin-top: -1px;
}

.service-details .problem .list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding-top: 30px;
}

.service-details .problem .list h4 {
   font-weight: 900;
   text-align: center;
}

.service-details .problem .list h4 span {
   font-weight: 400;
   font-size: 50px;
}

.service-details .problem .list .text {
   background-color: #1b2d75;
   color: #fff;
   margin-top: 30px;
   padding: 20px 20px;
   position: relative;
   height: calc(100% - 67px);
   box-sizing: border-box;
}

.service-details .problem .list .text:before {
   content: '';
   border-width: 0 9px 12px 9px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 100%;
   left: calc(50% - 9px);
}

.service-details .problem .list h5 {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 44px;
   line-height: 22px;
   text-align: center;
   padding-bottom: 10px;
   border-bottom: 1px solid #fff;
}

.service-details .problem .list .txt {
   padding-top: 10px;
}

.service-details .solving {
   background-color: #1b2d75;
   padding: 125px 35px 70px;
}

.service-details .solving .item {
   display: grid;
   grid-template-columns: 1fr 323px;
   gap: 30px;
   background-color: #fff;
   margin-top: 40px;
   padding: 25px 35px;
}

.service-details .solving h4 {
   display: grid;
   grid-template-columns: 56px 1fr;
   border-bottom: 1px solid #1b2d75;
   padding-bottom: 10px;
}

.service-details .solving h4 .no {
   font-size: 40px;
}

.service-details .solving .txt {
   line-height: 28px;
   padding-top: 10px;
}

@media screen and (max-width: 1200px) {
   .service-details .problem .list {
      grid-template-columns: 257px;
      justify-content: center;
   }

   .service-details .problem .list .text {
      height: auto;
   }

   .service-details .solving .item {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   .service-details h2 {
      gap: 15px;
      font-size: 25px;
      line-height: 35px;
   }

   .service-details .box {
      flex-direction: column;
      gap: 20px;
   }

   .service-details .box .txt {
      width: 100%;
   }

   .service-details .problem {
      padding: 30px 20px;
   }

   .service-details .problem:before {
      height: 41px;
   }

   .service-details .problem .list {
      grid-template-columns: 1fr;
   }

   .service-details .problem .list h4 span {
      font-size: 40px;
   }

   .service-details .solving {
      padding: 60px 20px 30px;
   }

   .service-details .solving .item {
      gap: 20px;
      margin-top: 30px;
      padding: 20px;
   }

   .service-details .solving h4 {
      grid-template-columns: 1fr;
      gap: 10px;
      text-align: center;
   }
}

/*=============================================
 * 保有設備
 *=============================================*/
#facility {
   height: 100%;
   padding: 35px;
   box-sizing: border-box;
}

#facility .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
}

#facility .box figure {
   padding-top: 66.4%;
   position: relative;
}

#facility .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#facility .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#facility .box .text {
   padding: 15px;
}

#facility .box h3 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 44px;
   line-height: 22px;
   border-bottom: 1px solid #fff;
   padding-bottom: 10px;
}

#facility .box .txt {
   padding-top: 10px;
}

#facility .list-btn {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   padding-top: 55px;
}

#facility .list-btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   border: 1px solid #1b2d75;
   width: 194px;
   height: 60px;
   box-sizing: border-box;
}

#facility .list-btn a:hover {
   background-color: #1b2d75;
   color: #fff;
}

#facility .block {
   padding-top: 40px;
}

#facility .block h3 {
   padding: 20px 25px 19px;
}

#facility .block .table {
   width: 100%;
   overflow: auto hidden;
   padding-top: 25px;
}

#facility .block .table table {
   width: 100%;
   min-width: 800px;
}

#facility .block .table table th,
#facility .block .table table td {
   height: 39px;
   font-weight: 400;
   line-height: 22px;
   border: 1px solid #1b2d75;
   text-align: left;
   vertical-align: middle;
   padding: 5px 15px;
}

#facility .block .table table th:first-child,
#facility .block .table table td:first-child {
   border-left: 0;
}

#facility .block .table table th:last-child,
#facility .block .table table td:last-child {
   border-right: 0;
}

#facility .block .table table th {
   background-color: #e6ebf9;
   font-size: 21px;
}

#facility .block .table table td {
   background-color: #fff;
   font-size: 18px;
}

@media screen and (max-width: 1200px) {
   #facility .box {
      gap: 10px;
   }

   #facility .box .text {
      padding: 10px;
   }

   #facility .list-btn {
      gap: 5px;
   }
}

@media screen and (max-width: 767px) {
   #facility {
      padding: 20px;
   }

   #facility .box {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   #facility .list-btn {
      gap: 10px;
      padding-top: 30px;
   }

   #facility .list-btn li {
      width: calc(50% - 5px);
   }

   #facility .list-btn a {
      width: 100%;
   }

   #facility .block h3 {
      padding: 15px;
   }

   #facility .block .table {
      padding-top: 15px;
   }

   #facility .block .table table th,
   #facility .block .table table td {
      padding: 5px 10px;
   }

   #facility .block .table table th {
      font-size: 18px;
   }

   #facility .block .table table td {
      font-size: 14px;
   }
}

/*=============================================
 * プライバシーポリシー
 *=============================================*/
.privacy h3 {
   font-weight: 700;
   padding-top: 50px;
}

.privacy p {
   padding-top: 20px;
}

/*=============================================
 * サイトマップ
 *=============================================*/
.sitemap a {
   display: block;
   padding: 15px 0;
}

.sitemap ul li {
   border-bottom: 1px solid;
}

.sitemap ul li:first-child a {
   padding-top: 0;
}

/*=============================================
 * Contact
 *=============================================*/
.contact {
   font-size: 18px;
}

.contact__title {
   width: 400px;
   clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
   text-align: center;
   margin: 0 auto;
   padding: 8px 0;
}

.contact .form-in {
   padding: 80px 70px;
}

.contact .form-row {
   display: grid;
   grid-template-columns: 210px 1fr;
   align-items: flex-start;
   position: relative;
   padding-bottom: 45px;
}

.contact .form-row .caption {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 15px 0;
}

.contact .form-row .caption span {
   background-color: #fff;
   color: #1b2d75;
   width: 45px;
   text-align: center;
   line-height: 25px;
}

.contact .form-row .name {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
}

.contact .form-row .note {
   display: block;
   font-size: 13px;
   line-height: 20px;
   padding-top: 10px;
}

.contact .form-row .file {
   background-color: #fff;
   color: #1b2d75;
   padding: 15px;
}

.contact .form-row .file .wpcf7-form-control-wrap {
   display: inline-block;
   min-width: 100px;
   border: 1px solid #1b2d75;
   border-radius: 5px;
   box-sizing: border-box;
   font-size: 16px;
   line-height: 20px;
   cursor: pointer;
}

.contact .form-row .file .wpcf7-form-control-wrap input {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

.contact .form-row .file .filename {
   display: block;
   padding: 4px 3px;
}

.contact .form-pp {
   text-align: center;
   padding-top: 25px;
}

.contact .form-pp .wpcf7-checkbox {
   justify-content: center;
}

.contact .form-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding-top: 70px;
}

.contact .form-btn input {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   cursor: pointer;
}

.contact .form-btn p {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 300px;
   height: 60px;
   background-color: #fff;
   color: #1b2d75;
   border: 1px solid #fff;
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.025em;
   line-height: 24px;
   box-sizing: border-box;
   padding: 0;
   position: relative;
   border-radius: 50px;
   text-align: center;
   transition: all 0.3s;
   cursor: pointer;
}

.contact .form-btn p:after {
   content: '';
   width: 18px;
   height: 18px;
   background: url("../img/common/arrow-circle-right.png") no-repeat center top/cover;
   position: absolute;
   top: calc(50% - 9px);
   right: 15px;
}

.contact .form-btn p:hover {
   background-color: #1b2d75;
   color: #fff;
   opacity: 1;
}

.contact .form-btn .btn-back {
   background-color: #ccc;
   color: #4B4B4B;
}

.contact .form-btn .btn-back:hover {
   opacity: 0.7;
}

.contact .form-btn .wpcf7-spinner {
   display: none;
}

.contact.thanks .txt {
   line-height: 28px;
}

.contact.thanks .txt p+p {
   padding-top: 30px;
}

.contact.thanks .button {
   padding-top: 40px;
}

@media screen and (max-width: 1200px) {
   .contact .form-in {
      padding: 80px 40px;
   }
}

@media screen and (max-width: 767px) {
   .contact {
      font-size: 14px;
   }

   .contact__title {
      width: 90%;
      max-width: 400px;
   }

   .contact .form-in {
      padding: 30px 20px 40px;
   }

   .contact .form-row {
      grid-template-columns: 1fr;
      gap: 15px;
      padding-bottom: 40px;
   }

   .contact .form-row .caption {
      padding: 0;
   }

   .contact .form-pp {
      padding-top: 0;
   }

   .contact .form-btn {
      flex-direction: column;
      padding-top: 30px;
   }

   .contact.thanks .txt {
      font-size: 13px;
      text-align: justify;
   }

   .contact.thanks .txt p+p {
      padding-top: 20px;
   }

   .contact.thanks .button {
      padding-top: 30px;
   }
}

/* =============================================
 * 技術資料ダウンロード
*=============================================*/
.download-selected {
   position: relative;
   padding: 30px 40px 60px;
}

.download-selected:before {
   content: '';
   width: 100%;
   background-color: #f2f2f2;
   position: absolute;
   top: 0;
   bottom: -60px;
   left: 0;
}

.download-selected .list-dl {
   display: grid;
   gap: 30px;
   position: relative;
}

.download-selected .list-dl .item {
   display: grid;
   grid-template-columns: 210px 1fr;
   align-items: center;
   gap: 30px;
   position: relative;
}

.download-selected .list-dl figure {
   background-color: #fff;
   padding-top: 142.8%;
   position: relative;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}

.download-selected .list-dl figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.download-selected .list-dl .col {
   background-color: #fff;
   padding: 20px 30px;
}

.download-selected .list-dl .ttl {
   border-bottom: 1px solid #000;
   padding-bottom: 10px;
}

.download-selected .list-dl .txt {
   font-weight: 400;
   line-height: 28px;
   padding-top: 10px;
}

.download-selected .list-dl .remove {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 30px;
   height: 30px;
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
}

@media screen and (max-width: 767px) {
   .download-selected {
      padding: 30px 20px;
   }

   .download-selected .list-dl .item {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .download-selected .list-dl figure {
      padding-top: 142.8%;
   }

   .download-selected .list-dl .col {
      padding: 20px;
   }

   .download-selected .list-dl .txt {
      font-size: 14px;
      line-height: 24px;
   }
}

/* =============================================
 * Post Type
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding-top: 65px;
}

.wp-pagenavi>span,
.wp-pagenavi>a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 28px;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
   padding-bottom: 2px;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi a:hover {
   background-color: #1b2d75;
   color: #fff;
   opacity: 1;
}

.wp-pagenavi .current {
   pointer-events: none;
   background-color: #1b2d75;
   color: #fff;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
   width: 30px;
   height: 30px;
   position: relative;
   font-size: 0;
}

.wp-pagenavi .previouspostslink:before,
.wp-pagenavi .nextpostslink:before {
   content: '';
   display: block;
   width: 10px;
   height: 10px;
   -webkit-mask-image: url("../img/common/pagenavi.png");
   mask-image: url("../img/common/pagenavi.png");
   mask-size: auto 100%;
   mask-repeat: no-repeat;
   background-color: #1b2d75;
   transition: all 0.3s;
   position: relative;
   top: 1px;
}

.wp-pagenavi .previouspostslink:hover:before,
.wp-pagenavi .nextpostslink:hover:before {
   background-color: #fff;
}

.wp-pagenavi .previouspostslink:before {
   mask-position: center left;
}

.wp-pagenavi .nextpostslink:before {
   mask-position: center right;
}

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      padding-top: 30px;
   }
}

/* -- -- */
.column-list {
   display: grid;
   gap: 30px 0;
}

.column-list .item a {
   display: grid;
   grid-template-columns: 280px 1fr;
   align-items: center;
   gap: 25px;
   background-color: #f2f2f2;
   padding: 25px 80px 25px 30px;
   position: relative;
}

.column-list .item a:before {
   content: '';
   width: 50px;
   background: #1b2d75;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
}

.column-list .item a:after {
   content: '';
   border-width: 7px 0 7px 10px;
   border-color: transparent transparent transparent #fff;
   border-style: solid;
   position: absolute;
   top: calc(50% - 7px);
   right: 20px;
   transition: all 0.3s;
}

.column-list .item a:hover:after {
   transform: translateX(5px);
}

.column-list figure {
   padding-top: 215px;
   position: relative;
}

.column-list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.column-list .cat {
   display: inline-block;
   background-color: #fff;
   min-width: 80px;
   font-size: 14px;
   line-height: 30px;
   border-radius: 50px;
   padding: 0 20px;
   text-align: center;
}

.column-list h3 {
   border-bottom: 1px solid;
   padding: 10px 0;
}

.column-list h3 span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

.column-list .txt {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 10px;
}

@media screen and (max-width: 767px) {
   .column-list .item a {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px 20px 50px;
   }

   .column-list .item a:before {
      width: 100%;
      height: 30px;
      top: auto;
   }

   .column-list .item a:after {
      top: calc(100% - 21px);
      right: auto;
      left: calc(50% - 5px);
   }

   .column-list figure {
      padding-top: 76.7%;
   }
}

/* -- -- */
.list-category .tab-link {
   display: grid;
   grid-template-columns: repeat(4, 170px);
   align-items: center;
   gap: 20px;
   max-width: 830px;
   margin: 0 auto;
}

.list-category .tab-link li:not(:has(a)),
.list-category .tab-link li:has(a) a {
   display: block;
   background-color: #fff;
   color: #1b2d75;
   box-sizing: border-box;
   padding: 14px 0px;
   text-align: center;
   transition: all 0.3s;
   border: 1px solid #1b2d75;
}

.list-category .tab-link li a {
   pointer-events: auto;
}

.list-category .tab-link li:hover,
.list-category .tab-link li.active,
.list-category .tab-link li:has(a) a:hover,
.list-category .tab-link li:has(a).active a {
   background-color: #1b2d75;
   color: #fff;
   opacity: 1;
}

.list-category .tab-content {
   margin-top: -1px;
}

.list-category .tab-content-item {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 30px;
   background-color: #fff;
   border: 1px solid #1b2d75;
   padding: 20px;
}

.list-category .tab-content-item:first-child {
   display: none !important;
}

.list-category .tab-content-item a {
   display: block;
   position: relative;
   padding-left: 15px;
}

.list-category .tab-content-item a:before {
   content: '';
   border-width: 5px 0 5px 6px;
   border-color: transparent transparent transparent #1b2d75;
   border-style: solid;
   position: absolute;
   top: calc(50% - 5px);
   left: 0;
   transition: all 0.3s;
}

.list-category .tab-content-item a:hover {
   opacity: 1;
}

.list-category .tab-content-item a:hover:before {
   left: 5px;
}
@media screen and (max-width: 1200px) {
   .list-category .tab-link {
      grid-template-columns: repeat(4, 1fr);
   }
}
@media screen and (max-width: 767px) {
   .list-category .tab-link{
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   .list-category .tab-link li:not(:has(a)), .list-category .tab-link li:has(a) a {
      padding: 10px;
   }
}

/* -- -- */
.list-tag {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
   max-width: 830px;
   margin: 0 auto;
}

.list-tag a {
   display: block;
   min-width: 170px;
   background-color: #fff;
   box-sizing: border-box;
   padding: 5px 10px;
   text-align: center;
   border-radius: 50px;
}

.list-tag a:hover,
.list-tag a.current {
   background-color: #1b2d75;
   color: #fff;
   opacity: 1;
}

@media screen and (max-width: 767px) {
   .list-tag {
      gap: 10px;
   }

   .list-tag a {
      min-width: 100px;
   }
}

/*=============================================
 * 技術コラム
 *=============================================*/
#column h2 {
   border-bottom: 1px solid;
   padding-bottom: 10px;
}

#column .desc {
   padding-top: 15px;
}

#column .list-category {
   padding-top: 40px;
}

#column .list-category a {
   min-width: 150px;
}

#column .column-list {
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   #column .list-category {
      padding-top: 30px;
   }

   #column .column-list {
      padding-top: 40px;
   }
}

/*=============================================
 * よくある質問
 *=============================================*/
#faq .h-26 {
   padding: 20px 25px 19px;
}

#faq .desc {
   padding-top: 20px;
}

#faq .list-category {
   padding-top: 40px;
}

#faq .block {
   padding-top: 50px;
}

.box-qa {
   padding: 35px 50px;
}

.box-qa .item {
   border-bottom: 1px solid #1b2d75;
   padding-bottom: 35px;
}

.box-qa .item+.item {
   padding-top: 35px;
}

.box-qa .txt-q {
   display: grid;
   grid-template-columns: 20px 1fr 20px;
   align-items: center;
   gap: 10px;
   cursor: pointer;
}

.box-qa .txt-q:before {
   content: 'Q';
   display: block;
}

.box-qa .txt-q i {
   display: block;
   width: 20px;
   height: 20px;
   border: 1px solid #1b2d75;
   border-radius: 50%;
   position: relative;
   box-sizing: border-box;
   transition: all 0.3s;
}

.box-qa .txt-q i:after {
   content: '';
   border-width: 7px 5px 0 5px;
   border-color: #1b2d75 transparent transparent transparent;
   border-style: solid;
   position: absolute;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.box-qa .txt-a {
   display: none;
   background-color: #fff;
   padding: 20px 30px;
   margin: 20px 30px 15px;
   line-height: 28px;
}

.box-qa .is-active .txt-q i {
   transform: rotate(-180deg);
}

@media screen and (max-width: 767px) {
   #faq .h-26 {
      padding: 15px 20px;
   }

   #faq .desc {
      padding-top: 15px;
   }

   #faq .list-category {
      padding-top: 30px;
   }

   #faq .block {
      padding-top: 40px;
   }

   .box-qa {
      padding: 20px;
   }

   .box-qa .item {
      padding-bottom: 20px;
   }

   .box-qa .item+.item {
      padding-top: 20px;
   }

   .box-qa .txt-q {
      gap: 5px;
   }

   .box-qa .txt-a {
      font-size: 14px;
      margin: 15px 0 0 25px;
      padding: 10px 20px;
   }
}

/*=============================================
 * 技術資料ダウンロード
 *=============================================*/
#download {
   display: grid;
   gap: 30px 0;
}

.download-item a {
   display: grid;
   grid-template-columns: 210px 1fr;
   gap: 30px;
   padding: 30px 40px;
}

.download-item .text {
   background-color: #fff;
   padding: 20px 30px;
}

.download-item figure {
   align-self: center;
   padding-top: 300px;
   position: relative;
}

.download-item figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.download-item h3 {
   border-bottom: 1px solid;
   padding-bottom: 10px;
}

.download-item .txt {
   font-size: 18px;
   line-height: 28px;
   padding-top: 10px;
}

@media screen and (max-width: 767px) {
   .download-item a {
      grid-template-columns: 1fr;
      padding: 20px;
   }

   .download-item figure {
      padding-top: 142.8%;
   }

   .download-item .text {
      padding: 20px;
   }

   .download-item .txt {
      font-size: 14px;
   }
}

/*=============================================
 * 技術提案実例
 *=============================================*/
#proposal {
   padding: 30px 35px 65px;
}

#proposal .list-tag {
   padding-top: 20px;
}

#proposal .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px 30px;
   padding-top: 40px;
}

#proposal .box figure {
   position: relative;
}

#proposal .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#proposal .box figure a {
   display: block;
   padding-top: 66%;
   position: relative;
}

#proposal .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#proposal .box .text {
   background-color: #1b2d75;
   color: #fff;
   padding: 15px 20px;
}

#proposal .box h3 {
   border-bottom: 1px solid #fff;
   padding-bottom: 10px;
}

#proposal .box h3 a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#proposal .box .tags {
   padding-top: 10px;
}

#proposal .box .tags li {
   position: relative;
   padding-left: 56px;
}

#proposal .box .tags li span {
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 767px) {
   #proposal {
      padding: 20px 20px 40px;
   }

   #proposal .box {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding-top: 30px;
   }

   #proposal .box .text {
      padding: 10px;
   }

   #proposal .box h3 {
      font-size: 14px;
      padding-bottom: 5px;
   }

   #proposal .box .tags {
      font-size: 12px;
      padding-top: 5px;
   }

   #proposal .box .tags li {
      padding-left: 42px;
   }
}

/*=============================================
 * 事例・実績
 *=============================================*/
#works {
   padding: 30px 35px 65px;
}

#works .list-tag {
   padding-top: 20px;
}

#works .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px 30px;
   padding-top: 40px;
}

#works .box figure {
   position: relative;
}

#works .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

#works .box figure a {
   display: block;
   padding-top: 66%;
   position: relative;
}

#works .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#works .box .text {
   background-color: #1b2d75;
   color: #fff;
   padding: 15px 20px;
}

#works .box h3 {
   border-bottom: 1px solid #fff;
   padding-bottom: 10px;
}

#works .box h3 a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#works .box .tax {
   padding-top: 10px;
}

#works .box .tax li {
   position: relative;
   padding-left: 49px;
}

#works .box .tax li span {
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 767px) {
   #works {
      padding: 20px 20px 40px;
   }

   #works .box {
      grid-template-columns: 1fr;
      gap: 10px;
      padding-top: 30px;
   }

   #works .box .text {
      padding: 10px;
   }

   #works .box h3 {
      font-size: 14px;
      padding-bottom: 5px;
   }

   #works .box .tax {
      font-size: 12px;
      padding-top: 5px;
   }

   #works .box .tax li {
      padding-left: 37px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
.cpt-single-title {
   padding-top: 20px;
}

.cpt-single-content {
   line-height: 26px;
   padding-top: 20px;
}

.cpt-single-content h2 {
   background-color: #1b2d75;
   color: #fff;
   font-weight: 700;
   font-size: 21px;
   line-height: 32px;
   padding: 9px 20px;
   margin: 50px 0 20px;
}

.cpt-single-content h3 {
   font-weight: 700;
   font-size: 20px;
   line-height: 32px;
   border-bottom: 1px solid #1b2d75;
   padding: 0 0 10px;
   margin: 50px 0 20px;
   box-sizing: border-box;
}

.cpt-single-content h4 {
   font-weight: 700;
   font-size: 18px;
   line-height: 30px;
   border-left: 5px solid #1b2d75;
   margin-top: 50px;
   margin-bottom: 20px;
   padding-left: 20px;
}

.cpt-single-content h1:first-child,
.cpt-single-content h2:first-child,
.cpt-single-content h3:first-child,
.cpt-single-content h4:first-child,
.cpt-single-content h5:first-child,
.cpt-single-content h6:first-child {
   margin-top: 0;
}

.cpt-single-content h2+h3,
.cpt-single-content h2+h4,
.cpt-single-content h3+h4 {
   margin-top: 0;
}

.cpt-single-content span[style="background-color: #ffb357;"] {
   color: #333;
}

.cpt-single-content mark {
   background-color: #ffb357;
   color: #333;
}

.cpt-single-content p img {
   display: inline-block;
   vertical-align: top;
   margin-right: 10px;
}

.cpt-single-content p img.aligncenter {
   display: block;
   margin: 0 auto;
}

.cpt-single-content p img.alignright {
   display: block;
   margin-left: auto;
}

.cpt-single-content p img:last-child {
   margin-right: 0;
}

.cpt-single-content .wp-block-media-text:not(:last-child),
.cpt-single-content p:not(:last-child){
	padding-bottom: 20px;
}

.cpt-single-btn {
   padding-top: 50px;
}

@media screen and (max-width: 1023px) {
   .cpt-single-content p img {
      display: block;
      margin: 0 auto 15px;
   }

   .cpt-single-content p img:last-child {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   .cpt-single-title {
      font-size: 24px;
   }

   .cpt-single-content h2 {
      font-size: 20px;
   }

   .cpt-single-content h3 {
      font-size: 18px;
      padding: 0 10px 10px;
   }

   .cpt-single-content h4 {
      font-size: 16px;
   }

   .cpt-single-content p img {
      display: block;
      margin: 0 auto 15px;
   }

   .cpt-single-content p img.alignright {
      margin: 0 auto 15px;
   }

   .cpt-single-content p img:last-child {
      margin: 0 auto;
   }

   .cpt-single-btn {
      padding-top: 40px;
   }
}

.cpt-single-related {
   padding-top: 70px;
}

.cpt-single-related h2 {
   display: flex;
   align-items: center;
   gap: 20px;
}

.cpt-single-related h2:before,
.cpt-single-related h2:after {
   content: "";
   flex: 1 0 0;
   border-top: 1px solid;
}

.cpt-single-related .column-list {
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   .cpt-single-related {
      padding-top: 40px;
   }

   .cpt-single-related h2 {
      gap: 10px;
   }

   .cpt-single-related .column-list {
      padding-top: 20px;
   }
}

/*=============================================
 * 技術提案実例 Detail
 *=============================================*/
.proposal-details h1 {
   border-bottom: 1px solid;
   padding-bottom: 20px;
}

.proposal-details .before,
.proposal-details .after,
.proposal-details .point {
   font-size: 18px;
   line-height: 28px;
   padding-top: 60px;
}

.proposal-details .before h3,
.proposal-details .after h3,
.proposal-details .point h3 {
   padding: 7px 20px;
}

.proposal-details .before .box,
.proposal-details .after .box {
   display: flex;
   gap: 40px;
   padding: 35px 40px;
}

.proposal-details .before .box figure,
.proposal-details .after .box figure {
   flex: 1 0 350px;
   text-align: center;
}

.proposal-details .before .box .txt,
.proposal-details .after .box .txt {
   flex: 1 0 420px;
}

.proposal-details .after {
   padding-top: 120px;
   position: relative;
}

.proposal-details .after:before {
   content: '';
   border-width: 60px 85px 0 85px;
   border-color: #122c7a transparent transparent transparent;
   border-style: solid;
   position: absolute;
   top: 30px;
   left: calc(50% - 85px);
}

.proposal-details .point .txt {
   border: 2px dashed;
   border-top: 0;
   padding: 30px 40px;
}

@media screen and (max-width: 1440px) {

   .proposal-details .before .box figure,
   .proposal-details .after .box figure {
      flex: 1 0 calc(40% - 20px);
   }

   .proposal-details .before .box .txt,
   .proposal-details .after .box .txt {
      flex: 1 0 calc(60% - 20px);
   }
}

@media screen and (max-width: 767px) {

   .proposal-details .before,
   .proposal-details .after,
   .proposal-details .point {
      font-size: 14px;
      padding-top: 40px;
   }

   .proposal-details .before h3,
   .proposal-details .after h3,
   .proposal-details .point h3 {
      padding: 10px 20px;
   }

   .proposal-details .before .box,
   .proposal-details .after .box {
      flex-direction: column;
      gap: 20px;
      padding: 20px;
   }

   .proposal-details .before .box figure,
   .proposal-details .after .box figure {
      flex: 1 0 100%;
   }

   .proposal-details .before .box .txt,
   .proposal-details .after .box .txt {
      flex: 1 0 100%;
   }

   .proposal-details .after {
      padding-top: 60px;
   }

   .proposal-details .after:before {
      border-width: 30px 42px 0 42px;
      top: 15px;
      left: calc(50% - 42px);
   }

   .proposal-details .point .txt {
      padding: 20px;
   }
}

/*=============================================
 * 事例・実績 Detail
 *=============================================*/
.works-details {
   padding-bottom: 50px;
}

.works-details .cpt-single-title {
   background-color: #1b2d75;
   color: #fff;
   padding: 20px 20px 19px;
}

.works-details .gallery {
   display: flex;
   gap: 30px;
   padding-top: 40px;
}

.works-details .gallery .slider-for {
   width: calc(100% - 320px);
}

.works-details .gallery .slider-for .slide figure {
   width: 100%;
   padding-top: 86.2%;
   position: relative;
}

.works-details .gallery .slider-for .slide figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.works-details .gallery .slider-nav {
   width: 290px;
}

.works-details .gallery .slider-nav .slide {
   background-color: #1b2d75;
   border: 0;
}

.works-details .gallery .slider-nav .slide+.slide {
   margin-top: 25px;
}

.works-details .gallery .slider-nav .slide figure {
   width: 100%;
   padding-top: 51.7%;
   position: relative;
   transition: all 0.3s;
   cursor: pointer;
}

.works-details .gallery .slider-nav .slide figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.works-details .gallery .slider-nav .slick-current figure {
   opacity: 0.5;
}

.works-details .table {
   padding-top: 35px;
}

.works-details .table table {
   width: 100%;
}

.works-details .table th,
.works-details .table td {
   height: 40px;
   vertical-align: middle;
   font-size: 18px;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   padding: 5px 20px 4px;
}

.works-details .table th {
   width: 200px;
   background-color: #1b2d75;
   color: #fff;
}

.works-details .table tr:nth-child(odd) td {
   background-color: #e6ebf9;
}

.works-details .explanation {
   padding-top: 50px;
}

.works-details .explanation h3 {
   border-bottom: 1px solid;
   padding-bottom: 10px;
}

.works-details .explanation .box {
   display: flex;
   gap: 35px;
   padding-top: 20px;
}

.works-details .explanation .box .col {
   flex: 1 0 385px;
}

.works-details .explanation .box .txt {
   font-size: 18px;
   line-height: 28px;
   padding-top: 10px;
}

.works-details .explanation .box figure {
   flex: 1 0 480px;
   text-align: center;
}

.works-details .contents1 {
   font-size: 18px;
   line-height: 28px;
   padding-top: 50px;
}

.works-details .contents1 hr {
   border-bottom: 1px solid #1b2d75;
}

.works-details .contents1 h3 {
   font-weight: 700;
   font-size: 21px;
   line-height: 25px;
   margin: 50px 0 20px;
}

.works-details .contents1 h3:first-child {
   margin-top: 0;
}

.works-details .contents1 p strong {
   font-weight: 700;
   font-size: 19px;
}

.works-details .contents1 p a:hover {
   text-decoration: underline;
}

.works-details .button {
   padding-top: 40px;
}

@media screen and (max-width: 1440px) {
   .works-details .gallery .slider-nav .slide figure {
      padding-top: 46%;
   }

   .works-details .explanation .box {
      gap: 5%;
   }

   .works-details .explanation .box .col {
      flex: 1 0 42%;
   }

   .works-details .explanation .box figure {
      flex: 1 0 53%;
   }
}

@media screen and (max-width: 1200px) {
   .works-details .gallery .slider-for {
      width: calc(100% - 230px);
   }

   .works-details .gallery .slider-nav {
      width: 200px;
   }

   .works-details .gallery .slider-nav .slide+.slide {
      margin-top: 15px;
   }

   .works-details .gallery .slider-nav .slide figure {
      padding-top: 57.2%;
   }
}

@media screen and (max-width: 1023px) {
   .works-details .gallery .slider-nav .slide figure {
      padding-top: 66%;
   }
}

@media screen and (max-width: 767px) {
   .works-details .cpt-single-title {
      padding: 10px 20px;
   }

   .works-details .gallery {
      flex-direction: column;
      gap: 10px;
   }

   .works-details .gallery .slider-for {
      width: 100%;
   }

   .works-details .gallery .slider-nav {
      width: 100%;
   }

   .works-details .gallery .slider-nav .slide+.slide {
      margin-top: 0;
      margin-left: 10px;
   }

   .works-details .gallery .slider-nav .slide figure {
      padding-top: 56.25%;
   }

   .works-details .table {
      padding-top: 20px;
   }

   .works-details .table th,
   .works-details .table td {
      height: 30px;
      font-size: 14px;
      padding: 5px 10px 4px;
   }

   .works-details .table th {
      width: 40%;
   }

   .works-details .explanation .box {
      flex-direction: column;
      gap: 30px;
   }

   .works-details .explanation .box .txt {
      font-size: 14px;
   }

   .works-details .contents1 {
      font-size: 14px;
   }

   .works-details .contents1 h3 {
      font-size: 18px;
      margin: 40px 0 10px;
   }

   .works-details .contents1 p strong {
      font-size: 16px;
   }
}

.works-details-related {
   border-top: 1px solid;
   padding-top: 50px;
}

.works-details-related h2 .sub {
   display: block;
   font-weight: 400;
   font-size: 16px;
   line-height: 20px;
}

.works-details-related .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px 25px;
   padding-top: 40px;
}

.works-details-related .box figure {
   position: relative;
}

.works-details-related .box figure:after {
   content: '';
   border-width: 0 12px 15px 12px;
   border-color: transparent transparent #1b2d75 transparent;
   border-style: solid;
   position: absolute;
   bottom: 0;
   left: calc(50% - 12px);
}

.works-details-related .box figure a {
   display: block;
   padding-top: 66%;
   position: relative;
}

.works-details-related .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.works-details-related .box .text {
   background-color: #1b2d75;
   color: #fff;
   padding: 15px 20px;
}

.works-details-related .box h3 {
   text-align: center;
   border-bottom: 1px solid #fff;
   padding-bottom: 10px;
}

.works-details-related .box h3 a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

.works-details-related .box .tax {
   padding-top: 10px;
}

.works-details-related .box .tax li {
   position: relative;
   padding-left: 49px;
}

.works-details-related .box .tax li span {
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1200px) {
   .works-details-related .box {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px 20px;
   }
}

@media screen and (max-width: 767px) {
   .works-details-related {
      padding-top: 40px;
   }

   .works-details-related h2 .sub {
      font-size: 16px;
      padding-top: 5px;
   }

   .works-details-related .box {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      padding-top: 20px;
   }

   .works-details-related .box .text {
      padding: 10px;
   }

   .works-details-related .box h3 {
      font-size: 14px;
      padding-bottom: 5px;
   }

   .works-details-related .box .tax {
      font-size: 12px;
      padding-top: 5px;
   }

   .works-details-related .box .tax li {
      padding-left: 37px;
   }
}