@charset "UTF-8";

/* =============================================
* HOME
* ============================================= */
#mv {
   position: relative;
}

#mv:after {
   content: '';
   width: 70px;
   background-color: #2D2D2D;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
}

#mv .swiper {
   pointer-events: none;
}

#mv .swiper-pagination {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   width: 70px;
   height: 80%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}

#mv .swiper-pagination .swiper-pagination-bullet {
   display: block;
   width: 12px;
   height: 12px;
   background-color: #6E6E6E;
   opacity: 1;
   margin: 0;
}

#mv .swiper-pagination .swiper-pagination-bullet-active {
   background-color: #fff;
}

#mv .scroll-down {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   width: 70px;
   color: #fff;
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0.2em;
   line-height: 24px;
   text-align: center;
   position: absolute;
   bottom: 40px;
   left: 0;
   z-index: 2;
   cursor: pointer;
}

#mv .scroll-down span {
   display: block;
   cursor: pointer;
}

#mv .scroll-down .line {
   width: 1px;
   height: 165px;
   background-color: #fff;
}

@media screen and (max-width: 1200px) {
   #mv .swiper-pagination {
      height: 37%;
   }
}

@media screen and (max-width: 1023px) {
   #mv .swiper-slide {
      height: 60vw;
   }

   #mv .swiper-slide img {
      object-position: -15vw center;
   }
}

@media screen and (max-width: 767px) {
   #mv:after {
      width: 30px;
   }

   #mv .swiper-pagination {
      gap: 10px;
      width: 30px;
      height: 34%;
   }

   #mv .scroll-down {
      width: 30px;
      bottom: 10px;
      font-size: 12px;
   }

   #mv .scroll-down .line {
      height: 80px;
   }
}

/* -- -- */
#top__message {
   margin-bottom: -1px;
   padding: 32px 0 1.5%;
   background: url("../img/top/message-bg-bottom.png") no-repeat center bottom/100% auto;
   position: relative;
}

#top__message:after {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/top/point-bg-top.png") no-repeat center bottom/100% auto;
   position: absolute;
   top: 0;
   left: 0;
}

#top__message hr {
   width: 100%;
   border: 0;
   border-top: 4px dashed #2D2D2D;
   position: absolute;
   top: 15px;
   left: 0;
}

#top__message .wrap {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

#top__message figure {
   width: 479px;
}

#top__message .col {
   width: 622px;
}

#top__message .txt {
   padding-top: 35px;
}

#top__message .name {
   width: 167px;
   padding-top: 35px;
}

@media screen and (max-width: 1023px) {
   #top__message {
      padding-bottom: 0;
   }

   #top__message .wrap {
      flex-direction: column-reverse;
      align-items: center;
   }

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

@media screen and (max-width: 767px) {
   #top__message figure {
      width: 100%;
      max-width: 479px;
   }

   #top__message .txt,
   #top__message .name {
      padding-top: 20px;
   }
}

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

#top__point h2 {
   padding: 0 0 56px 34px;
}

#top__point h2 .h-32 {
   line-height: inherit;
}

#top__point .deco {
   width: 138px;
   position: absolute;
   top: -120px;
   left: 375px;
}

#top__point .slick-dots {
   gap: 30px;
   position: absolute;
   top: 0;
   right: 130px;
}

#top__point .slick-dots li {
   width: 59px;
   height: 50px;
}

#top__point .slick-dots li button {
   background: url("../img/top/top-point-dot-bg.png") no-repeat center top/cover;
   color: #0279C3;
   font-weight: 700;
   font-size: 18px;
   padding-bottom: 10px;
}

#top__point .slick-dots li button:before {
   content: '0';
}

#top__point .slick-dots li.slick-active button,
#top__point .slick-dots li:hover button {
   opacity: 0.7;
}

#top__point .arrows:not(.circle) {
   display: flex;
   justify-content: space-between;
   width: 55px;
   position: absolute;
   top: 15px;
   right: 34px;
}

#top__point .arrows:not(.circle) .slick-arrow {
   color: #fff;
}

#top__point .arrows.circle {
   display: flex;
   justify-content: space-between;
   position: absolute;
   top: 50%;
   right: -24px;
   left: -24px;
   transform: translateY(-50%);
   z-index: 1;
}

#top__point .slider-wrap {
   position: relative;
   overflow: hidden;
}

#top__point .slider-wrap .slider {
   padding: 0 34px;
}

#top__point .slider-wrap .slick-list {
   overflow: visible;
   margin: 0 -37px;
}

#top__point .slider-wrap .slick-track {
   display: flex;
}

#top__point .slider-wrap .slick-track:before,
#top__point .slider-wrap .slick-track:after {
   display: none;
}

#top__point .slider-wrap .slide-item {
   height: auto;
   float: none;
   margin: 0 37px;
   padding: 40px 65px;
}

#top__point .slider-wrap .slide-item h3 {
   display: grid;
   grid-template-columns: 82px 1fr;
   align-items: center;
   gap: 20px;
   padding-bottom: 20px;
}

#top__point .slider-wrap .slide-item h3 img {
   padding-bottom: 10px;
}

#top__point .slider-wrap .slide-item dl {
   display: flex;
   align-items: center;
   gap: 60px;
   background-color: #fff;
   color: #000;
   padding: 30px;
}

#top__point .slider-wrap .slide-item dl dt {
   width: 460px;
}

#top__point .slider-wrap .slide-item dl dd {
   width: 405px;
}

@media screen and (max-width: 1023px) {
   #top__point .deco {
      width: 90px;
      top: -100px;
      left: 215px;
   }

   #top__point .slider-wrap .slide-item dl {
      flex-direction: column;
      align-items: center;
   }

   #top__point .slider-wrap .slide-item dl dt {
      width: 100%;
   }
}

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

   #top__point h2 {
      padding: 0 0 30px;
   }

   #top__point .deco {
      width: 70px;
      top: -50px;
      right: 20px;
      left: auto;
   }

   #top__point .controls {
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      gap: 20px;
      padding-bottom: 30px;
   }

   #top__point .slick-dots {
      gap: 20px;
      position: static;
   }

   #top__point .arrows:not(.circle) {
      position: static;
   }

   #top__point .arrows.circle {
      right: 10px;
      left: 10px;
   }

   #top__point .arrows.circle button {
      border: 1px solid #01A0E9;
   }

   #top__point .slider-wrap .slider {
      padding: 0 20px;
   }

   #top__point .slider-wrap .slick-list {
      margin: 0 -10px;
   }

   #top__point .slider-wrap .slide-item {
      margin: 0 10px;
      padding: 10px;
   }

   #top__point .slider-wrap .slide-item h3 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
   }

   #top__point .slider-wrap .slide-item h3 img {
      width: 60px;
   }

   #top__point .slider-wrap .slide-item dl {
      gap: 10px;
      padding: 10px;
   }

   #top__point .slider-wrap .slide-item dl dd {
      width: 100%;
   }
}

/* -- -- */
#top__solution {
   padding: 125px 0 95px;
   position: relative;
}

#top__solution:before {
   content: '';
   width: 100%;
   height: 42%;
   background-color: #C9AF2D;
   position: absolute;
   bottom: 0;
   left: 0;
}

#top__solution h2 {
   background: url("../img/top/solution-bg.png") no-repeat center/cover;
   width: 668px;
   margin: 0 auto;
   padding: 80px 0 103px;
}

#top__solution h2 .en {
   background: url("../img/top/solution-border.png") no-repeat center top 3px/167px auto;
   padding-bottom: 30px;
}

#top__solution .deco {
   width: 337px;
   position: absolute;
   top: 125px;
   left: 65%;
}

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

#top__solution .box .col {
   background-color: #0279C3;
   color: #fff;
   border-radius: 20px 20px 0 0;
}

#top__solution .box figure {
   border: 1px solid #2D2D2D;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
}

#top__solution .box .text {
   padding: 40px 40px;
}

#top__solution .box h3 {
   text-align: center;
   line-height: 45px;
}

#top__solution .box .txt {
   padding-top: 40px;
}

#top__solution .button {
   padding-top: 65px;
}

@media screen and (max-width: 1023px) {
   #top__solution .deco {
      width: 250px;
      top: 205px;
      right: 0;
      left: auto;
   }

   #top__solution .box {
      grid-template-columns: 380px;
      justify-content: center;
   }
}

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

   #top__solution h2 {
      background-size: auto 100%;
      width: 100%;
      padding: 7vw 0;
   }

   #top__solution h2 .en {
      padding-bottom: 15px;
   }

   #top__solution .deco {
      width: 150px;
      top: 34vw;
   }

   #top__solution .box {
      grid-template-columns: 100%;
   }

   #top__solution .box .text {
      padding: 30px 20px;
   }

   #top__solution .box h3 {
      line-height: 32px;
   }

   #top__solution .box .txt {
      padding-top: 20px;
   }

   #top__solution .button {
      padding-top: 40px;
   }
}

/* -- -- */
#top__service {
   padding: 130px 0;
}

#top__service .bnr {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 100px;
   padding-top: 75px;
}

#top__service .bnr a {
   display: block;
   position: relative;
   color: #fff;
   padding: 80px 0 42px 40%;
}

#top__service .bnr a:after {
   content: '';
   width: 64.5%;
   height: 100%;
   background-color: #0279C3;
   position: absolute;
   top: 0;
   right: 0;
   mix-blend-mode: multiply;
   z-index: -1;
}

#top__service .bnr a img {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}

#top__service .bnr a .en {
   padding-bottom: 30px;
}

#top__service .bnr a i {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 60px;
   height: 60px;
   background-color: #C9AF2D;
   position: absolute;
   bottom: 0;
   right: 0;
}

@media screen and (max-width: 1200px) {
   #top__service .bnr {
      gap: 50px;
   }

   #top__service .bnr a {
      padding-left: 30%;
   }

   #top__service .bnr a:after {
      width: 75%;
   }
}

@media screen and (max-width: 1023px) {
   #top__service .bnr {
      grid-template-columns: 550px;
      justify-content: center;
   }
}

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

   #top__service .bnr {
      grid-template-columns: 100%;
      gap: 20px;
      padding-top: 20px;
   }

   #top__service .bnr a {
      text-align: left;
      padding: 40px 0 40px 30%;
   }

   #top__service .bnr a .en {
      padding-bottom: 10px;
   }

   #top__service .bnr a i {
      width: 50px;
      height: 50px;
   }
}

/* -- -- */
#top__works {
   color: #fff;
   padding: 100px 0 80px;
   position: relative;
}

#top__works:before {
   content: '';
   width: calc(50% + 600px);
   height: 100%;
   background-color: #0279C3;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}

#top__works .wrap,
#top__works .wrap_l {
   padding-right: 115px;
}

#top__works h2 {
   padding-bottom: 30px;
}

#top__works .slick-arrow {
   color: #fff;
}

#top__works .controls {
   display: flex;
   align-items: center;
   gap: 40px;
   position: absolute;
   top: 48px;
   right: 115px;
}

#top__works .controls .slick-dots {
   order: 1;
}

#top__works .controls .slick-dots li button {
   background-color: #fff;
}

#top__works .controls .slick-dots li.slick-active button,
#top__works .controls .slick-dots li:hover button {
   background-color: #000;
}

#top__works .controls .slick-prev {
   order: 2;
}

#top__works .controls .slick-next {
   order: 3;
}

#top__works .slider .slide-item {
   width: 336px;
   text-align: left;
   margin-left: 40px;
}

#top__works .slider .slide-item figure a {
   display: block;
   padding-top: 76.7%;
   position: relative;
}

#top__works .slider .slide-item figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__works .slider .slide-item .cat {
   padding-top: 15px;
}

#top__works .slider .slide-item .cat a {
   display: inline-block;
   width: 133px;
   border: 1px solid #fff;
   border-radius: 1px;
   line-height: 28px;
   text-align: center;
}

#top__works .slider .slide-item .ttl {
   padding-top: 15px;
}

#top__works .slider .slide-item .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#top__works .slider .slide-item .price {
   font-weight: 600;
   padding-top: 10px;
}

#top__works .slider .slide-item .price dd {
   display: flex;
   flex-direction: row-reverse;
   align-items: baseline;
}

#top__works .slider .slide-item .price dd small {
   display: block;
   background-color: #fff;
   color: #0279C3;
   width: 36px;
   font-size: 12px;
   line-height: 20px;
   margin-left: 20px;
   text-align: center;
}

#top__works .slider .slide-item .more {
   text-align: center;
   padding-top: 15px;
}

#top__works .slider .slide-item .more a {
   display: block;
   width: 100%;
   background-color: #2D2D2D;
   color: #fff;
   font-weight: 600;
   font-size: 20px;
   line-height: 30px;
   border-radius: 25px;
   padding: 10px 0;
}

#top__works .slider .slide-item .more a:hover {
   background-color: #fff;
   color: #2D2D2D;
   opacity: 1;
}

@media screen and (max-width: 1440px) {
   #top__works:before {
      width: calc(50% + 570px);
   }
}

@media screen and (max-width: 1200px) {
   #top__works:before {
      width: calc(50% + 480px);
   }
}

@media screen and (max-width: 1023px) {
   #top__works:before {
      width: calc(50% + 360px);
   }

   #top__works .wrap,
   #top__works .wrap_l {
      padding-right: 50px;
   }

   #top__works .controls {
      right: 50px;
   }
}

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

   #top__works:before {
      width: 100%;
   }

   #top__works .controls {
      justify-content: center;
      position: static;
      padding-bottom: 30px;
   }

   #top__works .wrap_l {
      padding-right: 20px;
   }

   #top__works .slider .slick-list {
      margin: 0 -10px;
   }

   #top__works .slider .slide-item {
      margin: 0 10px;
   }

   #top__works .slider .slide-item .price .h-26 {
      font-size: 26px;
   }
}

/* -- -- */
#top__price {
   padding: 150px 0 80px;
   position: relative;
}

#top__price:before {
   content: '';
   width: 100%;
   height: 172px;
   background-color: #0079C3;
   position: absolute;
   bottom: 0;
   left: 0;
}

#top__price .deco {
   width: 101px;
   margin: 0 auto;
   padding: 0 0 45px 50px;
}

#top__price .box-1 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
   padding-top: 35px;
}

#top__price .box-1 .col {
   padding: 0 50px 45px;
   position: relative;
   z-index: 1;
}

#top__price .box-1 .col:before {
   content: '';
   width: 0;
   height: 0;
   border-width: 0px 290px 150px 290px;
   border-style: solid;
   border-color: transparent transparent #fff transparent;
   position: absolute;
   top: -100px;
   left: 0;
}

#top__price .box-1 .col:after {
   content: '';
   width: 100%;
   background-color: #fff;
   position: absolute;
   top: 50px;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#top__price .box-1 h3 {
   color: #fff;
   letter-spacing: 0.15em;
   border-radius: 50px;
   position: relative;
   padding: 20px 0;
   text-align: center;
}

#top__price .box-1 h3:after {
   content: '';
   width: 0;
   height: 0;
   border-width: 12px 9px 0 9px;
   border-style: solid;
   border-color: transparent;
   position: absolute;
   top: 100%;
   left: calc(50% - 9px);
}

#top__price .box-1 dl {
   display: grid;
   grid-template-columns: 40% 60%;
   align-items: center;
   background-color: #F2F2F2;
   margin-top: 75px;
}

#top__price .box-1 dl+dl {
   margin-top: 35px;
}

#top__price .box-1 dl dd {
   padding: 10px 30px;
}

#top__price .box-1 dl dd .price {
   padding-top: 6px;
}

#top__price .box-1 .col.yellow h3 {
   background-color: #C9AF2D;
}

#top__price .box-1 .col.yellow h3:after {
   border-top-color: #C9AF2D;
}

#top__price .box-1 .col.blue h3 {
   background-color: #0279C3;
}

#top__price .box-1 .col.blue h3:after {
   border-top-color: #0279C3;
}

#top__price .box-2 {
   padding-top: 135px;
}

#top__price .box-2 h3 {
   background: url("../img/top/top-price-deco2.png") no-repeat top left/auto 85px, url("../img/top/top-price-deco3.png") no-repeat top right/auto 85px;
   width: 612px;
   font-weight: 600;
   line-height: 50px;
   margin: 0 auto;
}

#top__price .box-2 .photo {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 19px;
   text-align: center;
   padding-top: 65px;
}

#top__price .box-2 .photo dd {
   color: #fff;
   font-weight: 700;
   line-height: 25px;
   padding-top: 8px;
}

@media screen and (max-width: 1440px) {
   #top__price .box-1 .col:before {
      border-width: 0px 275px 150px 275px;
   }
}

@media screen and (max-width: 1200px) {
   #top__price .box-1 {
      gap: 20px;
   }

   #top__price .box-1 .col {
      padding: 0 20px 45px;
   }

   #top__price .box-1 .col:before {
      border-width: 0px 235px 150px 235px;
   }

   #top__price .box-1 dl dd {
      padding: 10px 15px;
   }
}

@media screen and (max-width: 1023px) {
   #top__price:before {
      height: 380px;
   }

   #top__price .box-1 .col:before {
      border-width: 0px 175px 150px 175px;
   }

   #top__price .box-1 dl {
      grid-template-columns: 20% 80%;
      min-height: 146px;
   }

   #top__price .box-1 dl dt {
      height: 100%;
   }

   #top__price .box-1 dl dd {
      padding: 10px;
   }

   #top__price .box-2 .photo {
      grid-template-columns: repeat(4, 1fr);
   }
}

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

   #top__price:before {
      height: 200vw;
   }

   #top__price .deco {
      width: 50px;
      padding-bottom: 15px;
   }

   #top__price .box-1 {
      grid-template-columns: 100%;
      gap: 30px;
   }

   #top__price .box-1 .col {
      margin-top: 60px;
   }

   #top__price .box-1 .col:before {
      border-width: 0px calc(50vw - 20px) 80px calc(50vw - 20px);
      top: -60px;
   }

   #top__price .box-1 .col:after {
      top: 20px;
   }

   #top__price .box-1 h3 {
      padding: 15px 0;
   }

   #top__price .box-1 dl {
      grid-template-columns: 30% 70%;
      margin-top: 30px;
   }

   #top__price .box-1 dl+dl {
      margin-top: 15px;
   }

   #top__price .box-2 {
      padding-top: 50px;
   }

   #top__price .box-2 h3 {
      width: 100%;
      background-size: auto 50px, auto 50px;
      font-size: 20px;
      line-height: 40px;
   }

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

/* -- -- */
#top__column {
   padding: 110px 0 120px;
   overflow: hidden;
}

#top__column .controls {
   display: flex;
   align-items: center;
   gap: 40px;
   position: absolute;
   top: 0;
   right: 0;
}

#top__column .controls .slick-dots {
   order: 1;
}

#top__column .controls .slick-prev {
   order: 2;
}

#top__column .controls .slick-next {
   order: 3;
}

#top__column .slider {
   padding-top: 45px;
}

#top__column .slider .slick-list {
   margin: 0 -30px;
   overflow: visible;
}

#top__column .slider .slide-item {
   margin: 0 30px;
   opacity: 0.4;
   transition: opacity 0.3s;
}

#top__column .slider .slide-item figure a {
   display: block;
   padding-top: 70.8%;
   position: relative;
}

#top__column .slider .slide-item figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__column .slider .slide-item .ttl {
   padding-top: 20px;
}

#top__column .slider .slide-item .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#top__column .slider .slide-item time {
   display: block;
   color: #B2B2B2;
   line-height: 20px;
   padding-top: 10px;
}

#top__column .slider .slide-item .txt {
   line-height: 25px;
   padding-top: 20px;
}

#top__column .slider .slide-item .txt span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   display: -webkit-box;
   overflow: hidden;
}

#top__column .slider .slide-item.slick-active {
   opacity: 1;
}

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

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

   #top__column .controls {
      justify-content: center;
      position: static;
      padding-top: 30px;
   }

   #top__column .button {
      text-align: center;
      padding-top: 40px;
   }
}

/* -- -- */
.section__cta {
   background: url("../img/top/cta-bg-img.jpg") no-repeat center top/cover;
   color: #fff;
   padding: 140px 0 80px;
}

.section__cta .photo {
   width: 206px;
   position: absolute;
   bottom: 0;
   right: 0;
}

.section__cta h2 {
   display: flex;
   align-items: flex-end;
   gap: 30px;
   padding-right: 20px;
}

.section__cta h2:after {
   content: '';
   border-top: 1px solid #fff;
   flex: 1 0 0;
   margin-bottom: 10px;
}

.section__cta h2 img {
   max-width: 432px;
}

.section__cta .box {
   display: flex;
   gap: 40px;
   padding: 35px 0 70px;
}

.section__cta .txt-price {
   width: 510px;
}

.section__cta .btn {
   width: 440px;
}

.section__cta .btn .tel {
   width: 432px;
}

.section__cta .btn .tel time {
   display: block;
   font-weight: 500;
   letter-spacing: 0.1em;
   line-height: 24px;
   padding-bottom: 16px;
}

.section__cta .btn .inq {
   padding-top: 25px;
}

.section__cta .btn .inq a {
   display: flex;
   align-items: center;
   gap: 10px;
   background-color: #fff;
   color: #19212D;
   border-radius: 50px;
   letter-spacing: 0.06em;
   padding: 22px 50px;
}

.section__cta .btn .inq a:before {
   content: '';
   display: block;
   width: 45px;
   height: 43px;
   background: url("../img/top/icon-mail-circle.png") no-repeat center top/cover;
}

.section__cta .btn .inq a:hover {
   opacity: 1;
   background-color: #0279C3;
   color: #fff;
}

@media screen and (max-width: 1440px) {
   .section__cta .btn .tel {
      width: 400px;
   }
}

@media screen and (max-width: 1200px) {
   .section__cta .txt-price {
      width: 350px;
   }

   .section__cta .btn {
      width: 380px;
   }

   .section__cta .btn .tel {
      width: 100%;
   }

   .section__cta .btn .inq a {
      padding: 22px 20px;
   }
}

@media screen and (max-width: 1023px) {
   .section__cta h2 {
      padding-right: 0;
   }

   .section__cta .box {
      flex-direction: column;
      padding-bottom: 0;
   }

   .section__cta .txt-price {
      width: 480px;
   }

   .section__cta .btn {
      width: 440px;
   }

   .section__cta .btn .inq a {
      justify-content: center;
   }
}

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

   .section__cta h2 {
      gap: 10px;
   }

   .section__cta h2 img {
      max-width: 80%;
   }

   .section__cta .txt-price {
      width: 100%;
   }

   .section__cta .btn {
      width: 100%;
   }

   .section__cta .btn .inq a {
      padding: 11px 10px;
   }

   .section__cta .photo {
      width: 130px;
      position: static;
      padding-top: 30px;
      margin: 0 auto;
   }
}

/*=============================================*
* 個人情報保護方針
*=============================================*/
#privacy {
   padding: 150px 0;
}

#privacy p+p {
   padding-top: 40px;
}

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

   #privacy p+p {
      padding-top: 20px;
   }
}

/*=============================================*
* ゴミ屋敷コラム
*=============================================*/
#service__lead {
   background: url("../img/service/bg_01.jpg") no-repeat center top/100% auto;
   padding: 135px 0 0;
   position: relative;
}

#service__lead:before {
   content: '';
   width: 100%;
   height: 80px;
   background-color: #0279C3;
   position: absolute;
   bottom: 0;
   left: 0;
}

#service__lead h2 {
   padding-bottom: 110px;
}

#service__lead .box-1 {
   padding: 30px 70px 40px;
}

#service__lead .box-1 h3 .ja {
   display: flex;
   align-items: center;
   gap: 20px;
}

#service__lead .box-1 h3 .ja:before,
#service__lead .box-1 h3 .ja:after {
   content: '';
   border-top: 2px solid;
   flex: 1 0 0;
}

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

#service__lead .box-2 {
   padding-top: 70px;
}

#service__lead .box-2 h3 {
   background: url("../img/top/top-price-deco2.png") no-repeat top left/auto 85px, url("../img/top/top-price-deco3.png") no-repeat top right/auto 85px;
   width: 612px;
   font-weight: 600;
   line-height: 50px;
   margin: 0 auto;
}

#service__lead .box-2 .photo {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 19px;
   text-align: center;
   padding-top: 65px;
}

#service__lead .box-2 .photo dd {
   color: #fff;
   font-weight: 700;
   line-height: 25px;
   padding-top: 8px;
}

@media screen and (max-width: 1023px) {
   #service__lead:before {
      height: 320px;
   }

   #service__lead .box-1 {
      padding: 30px;
   }

   #service__lead .box-1 .photo {
      gap: 25px;
   }

   #service__lead .box-2 .photo {
      grid-template-columns: repeat(4, 1fr);
   }
}

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

   #service__lead:before {
      height: 190vw;
   }

   #service__lead h2 {
      padding-bottom: 30px;
   }

   #service__lead .box-1 {
      padding: 20px;
   }

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

   #service__lead .box-2 {
      padding-top: 50px;
   }

   #service__lead .box-2 h3 {
      width: 100%;
      background-size: auto 50px, auto 50px;
      font-size: 20px;
      line-height: 40px;
   }

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

/* -- -- */
.flow {
   padding: 50px 100px 120px;
}

.flow .box {
   padding-top: 10px;
}

.flow .box .item {
   display: grid;
   grid-template-columns: auto 174px;
   align-items: flex-end;
   gap: 20px;
   position: relative;
   margin-left: 100px;
}

.flow .box .item+.item {
   margin-top: 40px;
   padding-top: 30px;
   border-top: 3px dotted #0279C3;
}

.flow .box .item+.item:before {
   content: '';
   border-left: 2px solid #0279C3;
   position: absolute;
   top: -45px;
   bottom: 0;
   left: -60px;
}

.flow .box .no {
   display: flex;
   justify-content: center;
   align-items: center;
   background: url("../img/service/flow-deco.png") no-repeat center top/cover;
   width: 83px;
   height: 70px;
   color: #0279C3;
   font-weight: 700;
   font-size: 24px;
   padding-bottom: 10px;
   box-sizing: border-box;
   position: absolute;
   bottom: 0;
   left: -100px;
}

.flow .box .txt {
   font-weight: 600;
   padding-top: 5px;
}

@media screen and (max-width: 1200px) {
   .flow {
      padding: 50px 50px 120px;
   }
}

@media screen and (max-width: 767px) {
   .flow {
      padding: 30px 10px;
   }

   .flow .box {
      padding-top: 20px;
   }

   .flow .box .item {
      grid-template-columns: 100%;
      margin-left: 70px;
   }

   .flow .box .item:before {
      content: '';
      border-left: 2px solid #0279C3;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -40px;
   }

   .flow .box .item+.item:before {
      left: -40px;
   }

   .flow .box .item+.item .no {
      top: 30px;
   }

   .flow .box .item:last-child:before {
      height: 80px;
      top: -45px;
      bottom: auto;
   }

   .flow .box .no {
      width: 60px;
      height: 51px;
      top: 0;
      left: -70px;
      bottom: auto;
      font-size: 20px;
   }
}

/* -- -- */
#service-01 {
   padding: 100px 0 160px;
}

#service-01 .block {
   padding: 50px 70px 100px;
}

#service-01 .block .desc {
   max-width: 850px;
   margin: 0 auto;
   padding-top: 30px;
}

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

#service-01 .block .box .col {
   background-color: #F2F2F2;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
}

#service-01 .block .box h3 {
   font-weight: 700;
   padding: 15px 0 16px;
}

#service-01 .block .box .price {
   font-weight: 600;
   line-height: 20px;
   padding: 15px 20px;
}

#service-01 .block .box .note {
   font-weight: 400;
   font-size: 14px;
}

#service-01 .flow {
   margin-top: 100px;
}

@media screen and (max-width: 1200px) {
   #service-01 .block {
      padding: 50px 30px 100px;
   }
}

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

   #service-01 .block {
      padding: 30px 20px;
   }

   #service-01 .block .desc {
      text-align: justify;
      padding-top: 20px;
   }

   #service-01 .block .box {
      grid-template-columns: 100%;
      padding-top: 30px;
   }

   #service-01 .flow {
      margin-top: 50px;
   }
}

/* -- -- */
#service-02 {
   padding: 120px 0 200px;
}

#service-02 .desc {
   max-width: 990px;
   margin: 0 auto;
   padding-top: 60px;
}

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

#service-02 .box-1 .col {
   border-radius: 20px 20px 0 0;
   overflow: hidden;
}

#service-02 .box-1 h3 {
   line-height: 45px;
   padding: 32px 0;
}

#service-02 .box-2 {
   border: 1px solid #0279C3;
   margin-top: 115px;
   padding: 50px 70px 100px;
}

#service-02 .box-2 h3 .en {
   color: inherit;
}

#service-02 .box-2 h3 .ja {
   display: flex;
   align-items: center;
   gap: 20px;
}

#service-02 .box-2 h3 .ja:before,
#service-02 .box-2 h3 .ja:after {
   content: '';
   border-top: 2px solid;
   flex: 1 0 0;
}

#service-02 .box-2 .photo {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 50px;
   padding-top: 40px;
}

#service-02 .flow {
   margin-top: 130px;
}

@media screen and (max-width: 1023px) {
   #service-02 .box-2 {
      padding: 30px;
   }

   #service-02 .box-2 .photo {
      gap: 25px;
   }
}

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

   #service-02 .desc {
      text-align: justify;
      padding-top: 20px;
   }

   #service-02 .box-1 {
      grid-template-columns: 100%;
      padding-top: 50px;
   }

   #service-02 .box-1 h3 {
      line-height: 32px;
      padding: 20px 0;
   }

   #service-02 .box-2 {
      margin-top: 50px;
      padding: 20px;
   }

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

   #service-02 .flow {
      margin-top: 50px;
   }
}

/*=============================================*
* 会社概要
*=============================================*/
#greeting {
   padding: 140px 0 0;
}

#greeting .box {
   padding: 60px 70px;
   position: relative;
}

#greeting .box figure {
   width: 318px;
   position: absolute;
   bottom: 0;
   left: 70px;
}

#greeting .box .col {
   background-color: #fff;
   width: 805px;
   padding: 55px 80px 45px 100px;
   box-sizing: border-box;
   margin-left: auto;
}

#greeting .box .txt {
   font-size: 14px;
   line-height: 25px;
}

#greeting .box .txt p+p {
   padding-top: 30px;
}

#greeting .box .name {
   font-weight: 600;
   text-align: right;
   padding-top: 30px;
}

#greeting .box .name small {
   font-size: 16px;
}

#greeting .box .deco {
   width: 203px;
   position: absolute;
   bottom: 40px;
   right: 0;
}

@media screen and (max-width: 1440px) {
   #greeting .box figure {
      left: 40px;
   }
}

@media screen and (max-width: 1200px) {
   #greeting .box {
      padding: 60px 0;
   }

   #greeting .box figure {
      left: 0;
   }

   #greeting .box .col {
      width: 720px;
      padding: 40px 40px 40px 100px;
   }
}

@media screen and (max-width: 1023px) {
   #greeting .box {
      padding-bottom: 0;
   }

   #greeting .box .col {
      padding: 40px;
      position: relative;
   }

   #greeting .box .deco {
      bottom: -30px;
   }

   #greeting .box figure {
      position: static;
      margin: 0 auto;
   }
}

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

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

   #greeting .box .col {
      width: 100%;
      padding: 20px 20px 30px;
   }

   #greeting .box .txt p+p {
      padding-top: 20px;
   }

   #greeting .box .name {
      padding-top: 20px;
   }

   #greeting .box .deco {
      width: 120px;
      bottom: -20px;
      right: -10px;
   }

   #greeting .box figure {
      width: 50%;
      max-width: 318px;
   }
}

/* -- -- */
#outline {
   color: #000;
   padding: 120px 0;
   overflow: hidden;
}

#outline .wrap {
   z-index: 1;
   padding: 160px 100px 150px 0;
}

#outline .wrap:before {
   content: '';
   width: 100000px;
   height: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   z-index: -1;
}

#outline h2 {
   position: absolute;
   top: 160px;
   left: 570px;
}

#outline .box {
   display: flex;
   align-items: flex-end;
   gap: 70px;
}

#outline .box figure {
   width: 500px;
}

#outline .box .tb-style {
   width: 530px;
}

@media screen and (max-width: 1440px) {
   #outline h2 {
      left: 540px;
   }
}

@media screen and (max-width: 1200px) {
   #outline .wrap {
      padding-right: 30px;
   }

   #outline h2 {
      left: 465px;
   }

   #outline .box {
      gap: 30px;
   }
}

@media screen and (max-width: 1023px) {
   #outline .wrap {
      padding-right: 0;
   }

   #outline h2 {
      position: static;
      text-align: center;
      padding-bottom: 30px;
   }

   #outline .box {
      flex-direction: column;
      align-items: center;
   }
}

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

   #outline .wrap {
      padding: 30px 20px;
   }

   #outline .wrap:before {
      width: 100%;
   }

   #outline .box figure,
   #outline .box .tb-style {
      width: 100%;
   }
}

/* -- -- */
#gmap {
   height: 586px;
}

#gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

@media screen and (max-width: 767px) {
   #gmap {
      height: 50vw;
   }
}

/*=============================================*
* お問い合わせ
*=============================================*/
.wpcf7 {
   position: relative;
}

.wpcf7 .select {
   position: relative;
}

.wpcf7 .select {
   display: flex;
   align-items: flex-start;
   width: 100%;
   position: relative;
}

.wpcf7 .select .wpcf7-form-control-wrap {
   display: block;
   flex: 1;
   position: relative;
}

.wpcf7 .select .wpcf7-form-control-wrap::after {
   content: '▼';
   font-size: 12px;
   line-height: 1;
   color: #606060;
   position: absolute;
   top: 13px;
   right: 20px;
}

.wpcf7 .select select {
   display: block;
   width: 100%;
   height: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   outline: 0;
   box-shadow: none;
   background: #fff;
   border: 1px solid #434343;
   line-height: 34px;
   border-radius: 0px !important;
   padding: 0 50px 0 15px;
   cursor: pointer;
}

.wpcf7 .select select::-ms-expand {
   display: none;
}

.wpcf7 input:not([type="checkbox"], [type="radio"]),
.wpcf7 textarea {
   display: block;
   width: 100%;
   background-color: #fff;
   border: 1px solid #434343;
   font-weight: 400;
   line-height: 34px;
   border-radius: 0px !important;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
   padding: 0 15px;
}

.wpcf7 textarea {
   height: 140px;
   resize: vertical;
}

.wpcf7 .wpcf7-checkbox {
   display: inline-grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   line-height: 20px;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
   margin-left: 0;
}

.wpcf7 .wpcf7-checkbox span,
.wpcf7 .wpcf7-checkbox lable {
   display: block;
   cursor: pointer;
}

.wpcf7 .wpcf7-checkbox input {
   display: none;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label {
   display: inline-grid;
   grid-template-columns: 25px auto;
   align-items: center;
   position: relative;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label:before {
   content: '';
   width: 14px;
   height: 14px;
   border: 1px solid #707070;
   border-radius: 2px;
   box-sizing: border-box;
   grid-area: 1/1;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label:after {
   content: '✓';
   width: 14px;
   height: 14px;
   grid-area: 1/1;
   opacity: 0;
   font-size: 12px;
   line-height: 14px;
   text-align: center;
}

.wpcf7 .wpcf7-checkbox input:checked~.wpcf7-list-item-label:after {
   opacity: 1;
}

@media screen and (max-width: 1023px) {
   .wpcf7 .wpcf7-checkbox {
      grid-template-columns: 100%;
   }
}

#mailform {
   color: #434343;
   padding: 120px 0 200px;
}

#mailform .desc {
   color: #3B4043;
   line-height: 30px;
   padding-bottom: 40px;
}

#mailform .tel {
   padding-bottom: 70px;
}

#mailform .tel a {
   display: inline-block;
   max-width: 325px;
}

#mailform .form-wrap {
   background-color: #fff;
   border: 1px solid #707070;
   border-top: 18px solid #0279C3;
   padding: 90px 100px 100px;
}

#mailform .form-row {
   display: grid;
   grid-template-columns: 350px 1fr;
   justify-content: center;
   align-items: flex-start;
   gap: 0px;
   padding-bottom: 50px;
}

#mailform .form-row .caption {
   display: flex;
   align-items: center;
   gap: 40px;
   padding: 8px 0;
}

#mailform .form-row .caption .required {
   display: inline-block;
   width: 40px;
   background-color: #2F97CE;
   color: #fff;
   font-weight: 700;
   font-size: 12px;
   line-height: 20px;
   border-radius: 0px;
   text-align: center;
}

#mailform .form-row .caption .required._non {
   background-color: #767676;
}

#mailform .form-row .input ::-webkit-input-placeholder {
   color: #D0D0D0;
   font-weight: 300;
}

#mailform .form-row .input ::-moz-placeholder {
   color: #D0D0D0;
   font-weight: 300;
}

#mailform .form-row .input :-ms-input-placeholder {
   color: #D0D0D0;
   font-weight: 300;
}

#mailform .form-row .input :-moz-placeholder {
   color: #D0D0D0;
   font-weight: 300;
}

#mailform .form-pp p:first-child {
   padding-left: 25px;
}

#mailform .result_txt {
   display: block;
   word-break: break-all;
   white-space: pre-wrap;
}

#mailform .wpcf7-not-valid-tip {
   font-size: 12px;
   line-height: 24px;
}

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

#mailform .form-btn p {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 240px;
   height: 42px;
   background-color: #0279C3;
   color: #fff;
   border: 1px solid #0279C3;
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0;
   text-align: center;
   position: relative;
   transition: all 0.3s;
   box-sizing: border-box;
   border-radius: 50px;
}

#mailform .form-btn p:hover {
   background-color: #fff;
   color: #0279C3;
}

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

#mailform .form-btn .btn-prev {
   background-color: #ccc;
   border-color: #ccc;
   color: #000;
}

#mailform .wpcf7-spinner {
   display: none;
}

.page-id-103 #mailform .form-row .caption {
   padding: 0;
}

@media screen and (max-width: 1200px) {
   #mailform .form-wrap {
      padding: 90px 50px 100px;
   }
}

@media screen and (max-width: 1023px) {
   #mailform .form-row {
      grid-template-columns: 250px 1fr;
   }

   #mailform .form-row .caption {
      gap: 20px;
   }
}

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

   #mailform .desc {
      padding-bottom: 30px;
   }

   #mailform .tel {
      padding-bottom: 30px;
   }

   #mailform .form-wrap {
      border-top-width: 10px;
      padding: 30px 20px;
   }

   #mailform .form-row {
      grid-template-columns: 1fr;
      gap: 10px;
      padding-bottom: 30px;
   }

   #mailform .form-row .caption {
      justify-content: flex-start;
      gap: 10px;
   }

   #mailform .form-row .caption .required {
      font-size: 13px;
   }

   #mailform .form-btn {
      padding-top: 30px;
   }
}

/* -- -- */
.thanks .txt {
   padding-bottom: 30px;
}

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

.thanks .button {
   padding-top: 10px;
}

@media screen and (max-width: 767px) {
   .thanks .txt {
      text-align: left;
   }
}

/*=============================================*
* ゴミ屋敷コラム
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   padding-top: 200px;
}

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

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   color: #2D2D2D;
   text-align: center;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   letter-spacing: 0;
   box-sizing: border-box;
}

.wp-pagenavi span i,
.wp-pagenavi a i {
   color: #0279C3;
   transition: all 0.3s;
}

.wp-pagenavi a:hover {
   color: #0279C3;
   opacity: 1;
}

.wp-pagenavi a:hover i {
   color: #000;
}

.wp-pagenavi .current {
   color: #0279C3;
   pointer-events: none;
}

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

/* -- -- */
.article__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 120px 96px;
}

.article__list figure a {
   display: block;
   width: 100%;
   padding-top: 76.8%;
   position: relative;
}

.article__list figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

.article__list .cat {
   line-height: 20px;
   padding-top: 15px;
}

.article__list .cat a {
   display: inline-block;
   min-width: 100px;
   padding: 4px 14px;
   border: 1px solid;
   text-align: center;
}

.article__list .cat a:hover {
   background-color: #0279C3;
   color: #fff;
   opacity: 1;
}

.article__list .h-26 {
   font-weight: 600;
}

.article__list .ttl {
   padding-top: 10px;
}

.article__list .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.article__list .price {
   font-weight: 600;
   padding-top: 10px;
}

.article__list .price dd small {
   display: inline-block;
   background-color: #0279C3;
   color: #fff;
   width: 37px;
   font-size: 12px;
   line-height: 20px;
   text-align: center;
   margin-left: 30px;
}

@media screen and (max-width: 1200px) {
   .article__list {
      gap: 120px 50px;
   }
}

@media screen and (max-width: 767px) {
   .article__list {
      grid-template-columns: 100%;
      gap: 50px;
   }
}

/* -- -- */
.sidebar {
   background-color: #fff;
   padding: 140px 0 95px;
}

.sidebar ul {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px;
   line-height: 20px;
   padding-top: 45px;
}

.sidebar ul li a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-width: 100px;
   border: 1px solid;
   padding: 4px 14px;
   text-align: center;
}

.sidebar ul li a:hover,
.sidebar ul li a.current {
   background-color: #0279C3;
   color: #fff;
   opacity: 1;
}

.sidebar ul li a.current {
   pointer-events: none;
}

@media screen and (max-width: 1023px) {
   .sidebar {
      padding: 50px 0;
   }

   .sidebar ul {
      gap: 10px;
      padding-top: 20px;
   }
}

/* -- -- */
.cpt-template {
   padding-bottom: 200px;
}

.cpt-template .row {
   position: relative;
}

.cpt-template .row:before {
   content: '';
   width: 100%;
   height: 80px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 767px) {
   .cpt-template {
      padding-bottom: 50px;
   }
}

/* =============================================
 * Post Detail
 *=============================================*/
#cpt-detail {
   overflow: hidden;
   padding-top: 105px;
   position: relative;
}

#cpt-detail:before {
   content: '';
   width: 100%;
   height: 450px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
}

#cpt-detail>.wrap {
   max-width: 835px;
}

#cpt-detail .gallery-photo {
   padding-top: 65px;
}

#cpt-detail .gallery-slider {
   overflow: visible;
}

#cpt-detail .gallery-slider .swiper-slide {
   margin: 0 22px 0 23px;
}

#cpt-detail .gallery-slider .swiper-slide p {
   width: 100%;
   padding-top: 54.2%;
   position: relative;
   opacity: 0.37;
   transition: opacity 0.3s;
}

#cpt-detail .gallery-slider .swiper-slide p img {
   max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.72);
   transition: transform 0.3s;
}

#cpt-detail .gallery-slider .swiper-slide-prev p img {
   transform-origin: center right;
}

#cpt-detail .gallery-slider .swiper-slide-next p img {
   transform-origin: center left;
}

#cpt-detail .gallery-slider .swiper-slide-active p {
   opacity: 1;
}

#cpt-detail .gallery-slider .swiper-slide-active p img {
   transform: translate(-50%, -50%) scale(1);
   transform-origin: center center;
}

#cpt-detail .gallery-slider .swiper-button-prev,
#cpt-detail .gallery-slider .swiper-button-next {
   width: 21px;
   height: 21px;
   font-size: 21px;
   background-color: transparent;
   color: #2F97CE;
   top: 50%;
   margin-top: -10px;
}

#cpt-detail .gallery-slider .swiper-button-prev {
   left: -33px;
}

#cpt-detail .gallery-slider .swiper-button-prev:before {
   content: "\f137";
}

#cpt-detail .gallery-slider .swiper-button-next {
   right: -33px;
}

#cpt-detail .gallery-slider .swiper-button-next:before {
   content: "\f138";
}

#cpt-detail .cat {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   line-height: 20px;
}

#cpt-detail .cat a {
   display: inline-block;
   min-width: 100px;
   padding: 5px 15px;
   background-color: #0279C3;
   color: #fff;
   text-align: center;
}

#cpt-detail .cat a:hover {
   background-color: #000;
   opacity: 1;
}

#cpt-detail .the_title {
   padding-top: 30px;
}

#cpt-detail .the_content {
   padding-top: 50px;
}

#cpt-detail .the_content h2 {
   background-color: #EEEEEE;
   font-weight: 600;
   font-size: 24px;
   line-height: 36px;
   padding: 12px 20px 12px 22px;
   margin-top: 50px;
   margin-bottom: 20px;
   border-left: 8px solid #0279C3;
}

#cpt-detail .the_content h2:first-child {
   margin-top: 0;
}

#cpt-detail .the_content h3 {
   font-weight: 600;
   font-size: 20px;
   line-height: 30px;
   border-bottom: 2px solid #0279C3;
   border-left: 5px solid #0279C3;
   margin: 50px 0 20px;
   padding: 0 15px 8px;
   box-sizing: border-box;
}

#cpt-detail .the_content h3:first-child {
   margin-top: 0;
}

#cpt-detail .the_content h4 {
   font-weight: 600;
   font-size: 18px;
   line-height: 26px;
   margin: 50px 0 20px;
   border-left: 5px solid #0279C3;
   padding-left: 15px;
}

#cpt-detail .the_content h4:first-child {
   margin-top: 0;
}

#cpt-detail .the_content h2+h3,
#cpt-detail .the_content h2+h4,
#cpt-detail .the_content h3+h4 {
   margin-top: 0;
}

#cpt-detail .the_content p img {
   display: inline-block;
   vertical-align: top;
   margin-right: 10px;
}

#cpt-detail .the_content p img.aligncenter {
   display: block;
   margin: 0 auto;
}

#cpt-detail .the_content p img.alignright {
   display: block;
   margin-left: auto;
}

#cpt-detail .the_content p img:last-child {
   margin-right: 0;
}

#cpt-detail .btn-back {
   position: absolute;
   top: 0;
   right: 0;
}

#cpt-detail .btn-back a {
   display: inline-block;
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.12em;
   line-height: 20px;
   border-bottom: 1px solid;
}

#cpt-detail .btn-back a:hover {
   border-bottom-color: #002B3D;
}

#cpt-detail .post-btn {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   color: #fff;
   font-weight: 400;
   font-size: 15px;
   line-height: 28px;
   padding-top: 60px;
}

#cpt-detail .post-btn a {
   display: block;
   background-color: #333;
   border: 1px solid #333;
   padding: 0 10px;
}

#cpt-detail .post-btn a:hover {
   background-color: #fff;
   color: #333;
}

#cpt-detail .price {
   background-color: #0279C3;
   color: #fff;
   line-height: 30px;
   margin-top: 50px;
   padding: 23px 0 22px;
}

#cpt-detail .price dl {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

#cpt-detail .price dl dt {
   width: 110px;
   background-color: #fff;
   text-align: center;
   border-radius: 30px;
   font-weight: 400;
   line-height: inherit;
}

#cpt-detail .price dl dd small {
   display: inline-block;
   background-color: #fff;
   color: #0B79C3;
   width: 37px;
   font-size: 12px;
   line-height: 20px;
   text-align: center;
   margin-left: 30px;
}

@media screen and (max-width: 1023px) {
   #cpt-detail>.wrap {
      max-width: 640px;
   }
}

@media screen and (max-width: 767px) {
   #cpt-detail {
      padding-top: 50px;
   }

   #cpt-detail:before {
      height: 230px;
   }

   #cpt-detail .cat a {
      min-width: 80px;
      padding-right: 10px;
      padding-left: 10px;
   }

   #cpt-detail .the_title {
      padding-top: 20px;
   }

   #cpt-detail .gallery-photo {
      padding: 30px 20px 0;
   }

   #cpt-detail .gallery-photo .swiper-slide {
      margin: 0 15px;
   }

   #cpt-detail .gallery-photo .swiper-button-prev {
      left: -25px;
   }

   #cpt-detail .gallery-photo .swiper-button-next {
      right: -25px;
   }

   #cpt-detail .the_content h2 {
      font-size: 18px;
      padding: 10px 15px;
   }

   #cpt-detail .the_content h3 {
      font-size: 16px;
      margin: 20px 10px;
   }

   #cpt-detail .the_content h4 {
      font-size: 16px;
   }

   #cpt-detail .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img.alignright {
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img:last-child {
      margin: 0 auto !important;
   }

   #cpt-detail .post-btn {
      padding-top: 40px;
   }
}

/* -- -- */
#cpt-detail .related-article {
   color: #fff;
   margin-top: 155px;
   padding: 110px 0 80px;
   position: relative;
   z-index: 1;
}

#cpt-detail .related-article:before {
   content: '';
   width: calc(50% + 600px);
   height: 100%;
   background-color: #0279C3;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}

#cpt-detail .related-article .wrap,
#cpt-detail .related-article .wrap_l {
   padding-right: 115px;
}

#cpt-detail .related-article .h2 {
   padding-bottom: 30px;
}

#cpt-detail .related-article .slick-arrow {
   color: #fff;
}

#cpt-detail .related-article .controls {
   display: flex;
   align-items: center;
   gap: 40px;
   position: absolute;
   top: 48px;
   right: 115px;
}

#cpt-detail .related-article .controls .slick-dots {
   order: 1;
}

#cpt-detail .related-article .controls .slick-dots li button {
   background-color: #fff;
}

#cpt-detail .related-article .controls .slick-dots li.slick-active button,
#cpt-detail .related-article .controls .slick-dots li:hover button {
   background-color: #000;
}

#cpt-detail .related-article .controls .slick-prev {
   order: 2;
}

#cpt-detail .related-article .controls .slick-next {
   order: 3;
}

#cpt-detail .related-article .slider .slide-item {
   width: 336px;
   text-align: left;
   margin-left: 40px;
}

#cpt-detail .related-article .slider .slide-item figure a {
   display: block;
   padding-top: 76.7%;
   position: relative;
}

#cpt-detail .related-article .slider .slide-item figure a img {
   position: absolute;
   top: 0;
   left: 0;
}

#cpt-detail .related-article .slider .slide-item .cat-1 {
   padding-top: 15px;
}

#cpt-detail .related-article .slider .slide-item .cat-1 a {
   display: inline-block;
   width: 133px;
   border: 1px solid #fff;
   border-radius: 1px;
   line-height: 28px;
   text-align: center;
}

#cpt-detail .related-article .slider .slide-item .ttl {
   padding-top: 15px;
}

#cpt-detail .related-article .slider .slide-item .ttl a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#cpt-detail .related-article .slider .slide-item .price-1 {
   font-weight: 600;
   padding-top: 10px;
}

#cpt-detail .related-article .slider .slide-item .price-1 dd {
   display: flex;
   flex-direction: row-reverse;
   align-items: baseline;
}

#cpt-detail .related-article .slider .slide-item .price-1 dd small {
   display: block;
   background-color: #fff;
   color: #0279C3;
   width: 36px;
   font-size: 12px;
   line-height: 20px;
   margin-left: 20px;
   text-align: center;
}

#cpt-detail .related-article .slider .slide-item .more {
   text-align: center;
   padding-top: 15px;
}

#cpt-detail .related-article .slider .slide-item .more a {
   display: block;
   width: 100%;
   background-color: #2D2D2D;
   color: #fff;
   font-weight: 600;
   font-size: 20px;
   line-height: 30px;
   border-radius: 25px;
   padding: 10px 0;
}

#cpt-detail .related-article .slider .slide-item .more a:hover {
   background-color: #fff;
   color: #2D2D2D;
   opacity: 1;
}

@media screen and (max-width: 1440px) {
   #cpt-detail .related-article:before {
      width: calc(50% + 570px);
   }
}

@media screen and (max-width: 1200px) {
   #cpt-detail .related-article:before {
      width: calc(50% + 480px);
   }
}

@media screen and (max-width: 1023px) {
   #cpt-detail .related-article:before {
      width: calc(50% + 360px);
   }

   #cpt-detail .related-article .wrap,
   #cpt-detail .related-article .wrap_l {
      padding-right: 50px;
   }

   #cpt-detail .related-article .controls {
      right: 50px;
   }
}

@media screen and (max-width: 767px) {
   #cpt-detail .related-article {
      margin-top: 50px;
      padding: 50px 0;
   }

   #cpt-detail .related-article:before {
      width: 100%;
   }

   #cpt-detail .related-article .controls {
      justify-content: center;
      position: static;
      padding-bottom: 30px;
   }

   #cpt-detail .related-article .wrap,
   #cpt-detail .related-article .wrap_l {
      padding-right: 20px;
   }

   #cpt-detail .related-article .slider .slick-list {
      margin: 0 -10px;
   }

   #cpt-detail .related-article .slider .slide-item {
      margin: 0 10px;
   }

   #cpt-detail .related-article .slider .slide-item .price-1 .h-26 {
      font-size: 26px;
   }
}