html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   outline: none;
   border: 0;
}

h1,h2,h3,h4,h5,h6 {
   color: #393939;
}

ul,
ol {
   list-style: none;
}

a {
   color: inherit;
   text-decoration: none;
   transition: all 0.3s;
}

a:hover {
   color: inherit;
   opacity: 0.7;
}

a[href^="tel:"] {
   pointer-events: none;
   cursor: text;
}

@media screen and (max-width: 767px) {
   a[href^="tel:"] {
      pointer-events: auto;
      cursor: pointer;
   }
}

img {
   width: auto;
   max-width: 100%;
   height: auto;
   vertical-align: middle;
}

.fnt-outfit {
   font-family: "Outfit", sans-serif;
}

.wrap {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   box-sizing: border-box;
   position: relative;
}

@media screen and (max-width: 1240px) {
   .wrap {
      max-width: 960px;
   }

   .home #pgc-413-0-0 {
      padding: 0 15px !important;
   }
}

@media screen and (max-width: 991px) {
   .wrap {
      max-width: 720px;
   }

   .home .panel-grid-cell {
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box;
   }
}

@media screen and (max-width: 767px) {
   .wrap {
      max-width: 100%;
      padding: 0 15px;
   }
}

.sp {
   display: none;
}

@media screen and (max-width: 767px) {
   .sp {
      display: block;
   }

   .pc {
      display: none;
   }
}

/*=============================================
 * body
 *=============================================*/
body {
   background: #fff;
   color: #393939;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 30px;
   letter-spacing: 0.08em;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
   position: relative;
}

/*=============================================
 * header
 *=============================================*/
header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #393939;
   width: 100%;
   height: 80px;
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 0 15px;
   box-sizing: border-box;
}

header .logo {
   width: 165px;
}

.hamburger {
   cursor: pointer;
   position: relative;
   z-index: 2;
   transition: all 0.3s;
   padding-right: 30px;
}

.hamburger p {
   position: relative;
   width: 32px;
   height: 24px;
}

.hamburger span {
   display: block;
   position: absolute;
   top: 0;
   width: 100%;
   height: 0;
   border-top: 1px solid #fff;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
}

.hamburger span:nth-child(1) {
   top: 0;
}

.hamburger span:nth-child(2) {
   top: 12px;
}

.hamburger span:nth-child(3) {
   top: 23px;
}

.hamburger.is-active span:nth-child(1) {
   border-top-color: transparent;
}

.hamburger.is-active span:nth-child(2) {
   top: 8px;
   transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

.hamburger.is-active span:nth-child(3) {
   top: 8px;
   transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
}

#navbar {
   width: 100%;
   height: 100vh;
   background-color: #393939;
   color: #fff;
   position: fixed;
   top: 0;
   left: 0;
   box-sizing: border-box;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s linear;
   z-index: -1;
}

#navbar .navbar__wrap {
   display: grid;
   grid-template-columns: 1fr 483px;
   width: 100%;
   height: 100%;
   max-width: 1320px;
   margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
   position: relative;
}

#navbar .col {
   margin: auto 0;
   padding: 100px 0;
}

#navbar .nav li+li {
   padding-top: 32px;
}

#navbar .nav a {
   display: grid;
   grid-template-columns: 225px 1fr;
   align-items: center;
   font-weight: 700;
   color: #fff;
}

#navbar .nav a img {
   width: auto;
   max-height: 23px;
}

#navbar .tel {
   max-width: 592px;
   padding-top: 105px;
}

#navbar .bnr {
   max-width: 293px;
   padding-top: 45px;
}

#navbar .bnr a img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
}

#navbar .photo {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
}

#navbar .photo figure {
   width: 100%;
   height: 25%;
}

#navbar .photo figure img {
   display: block;
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
}

.navOpen #navbar {
   opacity: 1;
   visibility: visible;
}

@media screen and (max-width: 1440px) {
   #navbar .col {
      margin: auto;
      padding: 100px 50px;
   }
}

@media screen and (max-width: 1100px) {
   #navbar .navbar__wrap {
      grid-template-columns: 610px 1fr;
   }
}

@media screen and (max-width: 767px) {
   header {
      height: 75px;
      padding: 0 20px;
   }

   header .logo {
      width: 136px;
   }

   .hamburger {
      padding-right: 0;
   }

   #navbar .navbar__wrap {
      display: block;
   }

   #navbar .col {
      padding: 90px 30px 30px;
   }

   #navbar .nav a {
      display: flex;
      gap: 15px;
   }

   #navbar .nav a img {
      max-height: 18px;
   }

   #navbar .tel {
      max-width: 310px;
      margin: 0 auto;
      padding-top: 30px;
   }

   #navbar .bnr {
      max-width: 310px;
      margin: 0 auto;
      padding-top: 30px;
   }

   #navbar .photo {
      display: none;
   }
}

/*=============================================
 * footer
 *=============================================*/
footer {
   background-color: #393939;
   color: #fff;
   text-align: center;
   line-height: 26px;
}

footer .wrap {
   padding-top: 60px;
   padding-bottom: 60px;
}

footer .logo {
   width: 165px;
   margin: 0 auto;
}

footer .txt {
   padding-top: 25px;
}

footer address {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 52px;
   background-color: #fff;
   color: #393939;
}

@media screen and (max-width: 767px) {
   footer address {
      height: 40px;
      font-size: 10px;
   }
}

/*=============================================
 * contents
 *=============================================*/
.h-23 {
   font-weight: 700;
   font-size: 23px;
   letter-spacing: 0;
   line-height: 34px;
}

.h-26 {
   font-weight: 600;
   font-size: 26px;
   letter-spacing: 0;
   line-height: 37px;
}

.h-32 {
   font-weight: 700;
   font-size: 32px;
   letter-spacing: 0;
   line-height: 46px;
}

.h-32 .en {
   display: inline-block;
   font-weight: 200;
   font-size: 26px;
   letter-spacing: 0.15em;
   line-height: 32px;
   text-transform: uppercase;
   padding-bottom: 20px;
}

.txt-c {
   text-align: center;
}

.slick-arrow {
   width: 34px;
   height: 34px;
   border: 0;
   font-size: 0;
   position: absolute;
   top: 50%;
   z-index: 1;
   transform: translateY(-50%);
}

.slick-prev {
   background: url("../img/index/slider-prev.png") no-repeat center top/cover;
   left: 32px;
}

.slick-next {
   background: url("../img/index/slider-next.png") no-repeat center top/cover;
   right: 32px;
}

.scrollSet.fadeInUp {
   opacity: 0;
   will-change: filter;
   transform: translateY(2rem);
   transition: all 0.7s ease;
}

.scrollIn.fadeInUp {
   opacity: 1;
   transform: translateY(0);
}

#mv {
   padding: 40px 0 0;
   position: relative;
}

#mv:before {
   content: '';
   width: 100%;
   background: url("../img/index/mv-bg-img.png") no-repeat center bottom/cover;
   position: absolute;
   top: 0;
   bottom: 40px;
   left: 0;
   z-index: -1;
   opacity: 0;
   transition: opacity 0.7s ease;
   transition-delay: 0s;
}

#mv .box {
   padding: 300px 0 160px;
   position: relative;
   opacity: 0;
   transition: opacity 0.7s ease;
   transition-delay: 0.5s;
}

#mv .box figure {
   width: 918px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0;
   transition: opacity 0.7s ease;
   transition-delay: 1s;
}

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

#mv .txt {
   line-height: 24px;
   letter-spacing: 0;
   padding-top: 15px;
}

#mv .tel {
   padding-top: 10px;
}

#mv .tel a {
   display: inline-block;
   max-width: 341px;
}

#mv .bnr {
   padding-top: 15px;
}

#mv .bnr a {
   display: inline-block;
   max-width: 283px;
}

#mv .bnr a img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
}

#mv.is-active:before {
   opacity: 1;
}

#mv.is-active .box {
   opacity: 1;
}

#mv.is-active .box figure {
   opacity: 1;
}

@media screen and (max-width: 991px) {
   #mv {
      padding: 0;
   }

   #mv:before {
      display: none;
   }

   #mv .box {
      padding: 0 0 25px;
   }

   #mv .box figure {
      width: 100%;
      position: static;
      transform: translateX(0);
   }

   #mv .box figure img {
      width: 100%;
      max-width: inherit;
   }

   #mv h2 {
      padding-top: 15px;
   }
}

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

   #mv .bnr a {
      max-width: 230px;
   }

   #mv .tel a {
      max-width: 310px;
   }
}

#trouble .wrap {
   z-index: 1;
}

@media screen and (max-width: 767px) {
   #trouble .wrap {
      padding: 0;
   }
}

#solution {
   background: url("../img/index/solution-bg-bottom.png") no-repeat center bottom/100% auto;
   position: relative;
   padding-bottom: 100px;
}

#solution:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/index/solution-bg.png") no-repeat center top/100% auto;
   position: absolute;
   top: -23vw;
   left: 0;
}

#solution h2 {
   width: 31vw;
   margin: 0 auto;
   padding: 3vw 0 20vw;
}

#solution .box-1 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
}

#solution .box-1 .col {
   background-color: #fff;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   padding: 55px 30px 40px;
   position: relative;
}

#solution .box-1 .no {
   width: 57px;
   position: absolute;
   top: -28px;
   left: 50%;
   transform: translateX(-50%);
}

#solution .box-1 figure {
   max-width: 158px;
   margin: 0 auto;
}

#solution .box-1 h3 {
   padding-top: 20px;
}

#solution .box-1 .txt {
   padding-top: 25px;
}

#solution .box-2 {
   display: grid;
   grid-template-columns: 1fr 50px 1fr;
   align-items: center;
   gap: 25px;
   background-color: #EBEBEB;
   margin-top: 60px;
   padding: 35px 30px;
}

#solution .photo {
   padding-top: 140px;
}

@media screen and (max-width: 1240px) {
   #solution h2 {
      padding-top: 1vw;
   }

   #solution .box-1 {
      gap: 20px;
   }

   #solution .box-1 .col {
      padding: 55px 20px 40px;
   }

   #solution .box-1 h3 {
      font-size: 22px;
   }
}

@media screen and (max-width: 991px) {
   #solution .box-1 {
      grid-template-columns: repeat(2, 1fr);
      gap: 50px 30px;
   }
}

@media screen and (max-width: 767px) {
   #solution {
      background: transparent;
      padding-bottom: 0;
   }

   #solution:before {
      display: none;
   }

   #solution .wrap {
      padding: 0;
   }

   #solution h2 {
      width: 100%;
      margin-top: -30vw;
      padding-bottom: 0;
   }

   #solution .box-1 {
      display: block;
      background: url("../img/index/solution-deco.png") no-repeat center/cover;
      padding-bottom: 30px;
   }

   #solution .box-1 .slick-list {
      padding: 28px 0;
   }

   #solution .box-1 .col {
      width: auto;
      margin: 0 50px;
      padding: 55px 30px 40px;
   }

   #solution .box-1 h3 {
      font-size: 26px;
   }

   #solution .box-2 {
      grid-template-columns: 1fr;
      gap: 25px;
      margin-top: 0;
      padding: 20px 20px 40px;
   }

   #solution .box-2 .arrow {
      width: 50px;
      margin: 0 auto;
   }

   #solution .photo {
      padding-top: 0;
   }
}

#devices {
   background: url("../img/index/applicable-bg.jpg") no-repeat center top/cover;
   position: relative;
   margin-bottom: 140px;
}

#devices:before {
   content: '';
   width: 100%;
   height: 140px;
   background-color: #B9B9B9;
   position: absolute;
   top: 100%;
   left: 0;
}

#devices .wrap {
   padding-top: 110px;
   padding-bottom: 150px;
}

#devices .box {
   display: flex;
   align-items: center;
   gap: 65px;
   background-color: #fff;
   border-radius: 10px;
}

#devices .box figure {
   width: 470px;
}

#devices .box figure img {
   border-radius: 10px 0 0 10px;
}

#devices .box h2 {
   padding-left: 35px;
}

#devices .box ul {
   font-weight: 500;
   font-size: 18px;
   line-height: 38px;
}

#devices .box ul li {
   padding-left: 27px;
   position: relative;
}

#devices .box ul li:before {
   content: '';
   width: 17px;
   height: 17px;
   background: #D32727;
   border-radius: 50%;
   position: absolute;
   top: 12px;
   left: 0;
}

#devices .bnr {
   position: absolute;
   bottom: -75px;
   left: 50%;
   transform: translateX(-50%);
}

#devices .bnr a {
   display: inline-block;
   width: 572px;
}

#devices .bnr a img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
}

#devices .bnr a:hover {
   opacity: 0.7;
}

@media screen and (max-width: 1240px) {
   #devices .box {
      gap: 40px;
   }

   #devices .box h2 {
      padding-left: 0;
   }
}

@media screen and (max-width: 991px) {
   #devices .box {
      flex-direction: column;
      gap: 25px;
      padding-bottom: 62px;
   }

   #devices .box figure {
      width: 100%;
   }

   #devices .box figure img {
      border-radius: 10px 10px 0 0;
   }

   #devices .box ul {
      padding-top: 10px;
   }
}

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

   #devices:before {
      height: 80px;
   }

   #devices .wrap {
      padding-top: 40px;
      padding-bottom: 60px;
   }

   #devices .bnr {
      bottom: -125px;
      z-index: 1;
   }

   #devices .bnr a {
      width: 305px;
   }
}

#service {
   background-color: #393939;
   padding: 140px 0 0;
}

#service .row-1 {
   background: url("../img/index/service-bg-1.jpg") no-repeat center top/cover;
   position: relative;
   padding: 100px 0 120px;
}

#service .row-1:before {
   content: '';
   width: 5px;
   height: 80px;
   background: linear-gradient(to top, #393939 50%, #fff 50%);
   position: absolute;
   top: -40px;
   left: 50%;
   transform: translateX(-50%);
}

#service .row-1 h2 small {
   font-size: 16px;
}

#service .row-1 ul {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 45px;
   padding-top: 75px;
}

#service .row-1 ul li {
   width: 240px;
}

#service .row-1 h3 {
   background-color: #393939;
   color: #fff;
   font-weight: 700;
   margin-top: 50px;
   mix-blend-mode: multiply;
   padding: 10px;
   clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

#service .row-1 .txt {
   padding-top: 40px;
}

#service .row-1 .txt p+p {
   padding-top: 30px;
}

#service .row-2 {
   background: url("../img/index/service-bg-2.jpg") no-repeat center top/cover;
   color: #fff;
   padding: 70px 0 125px;
}

#service .row-2 h3 {
   color: #fff;
}

#service .row-2 ul {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: flex-start;
   gap: 20px;
   padding-top: 45px;
}

#service .row-2 ul li:not(.note) {
   background-color: #fff;
   color: #393939;
   font-weight: 500;
   font-size: 26px;
   line-height: 37px;
   padding: 10px 10px 11px;
   text-align: center;
}

#service .row-2 ul .note {
   text-indent: -16px;
   padding-left: 16px;
}

@media screen and (max-width: 991px) {
   #service .row-2 ul {
      grid-template-columns: repeat(2, 1fr);
   }
}

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

   #service .row-1 {
      padding: 80px 0 50px;
   }

   #service .row-1 ul {
      flex-wrap: wrap;
      gap: 0 20px;
      padding-top: 20px;
   }

   #service .row-1 ul li {
      width: calc(50% - 10px);
   }

   #service .row-1 h3 {
      font-size: 20px;
      line-height: 32px;
   }

   #service .row-1 .txt {
      padding-top: 20px;
   }

   #service .row-1 .txt p+p {
      padding-top: 20px;
   }

   #service .row-2 {
      padding: 40px 0;
   }

   #service .row-2 h3 {
      font-size: 24px;
      line-height: 36px;
   }

   #service .row-2 ul {
      gap: 10px;
      padding-top: 20px;
   }

   #service .row-2 ul li:not(.note) {
      font-size: 18px;
      line-height: 26px;
      padding: 10px;
   }

   #service .row-2 ul .note {
      font-size: 12px;
      line-height: 20px;
   }
}

#one-stop {
   background: url("../img/index/one-stop-bg-img.jpg") no-repeat center/cover;
   padding: 140px 0 105px;
}

#one-stop h2 {
   width: 51px;
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
}

#one-stop .bnr {
   padding-top: 45px;
}

#one-stop .bnr a {
   display: inline-block;
   max-width: 503px;
}

#one-stop .bnr a img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
}

@media screen and (max-width: 767px) {
   #one-stop {
      padding: 40px 0;
   }

   #one-stop h2 {
      width: 40px;
      left: 0;
   }

   #one-stop .bnr {
      padding-top: 20px;
   }
}

.section-group {
   background: url("../img/index/reason-bg-img.jpg") no-repeat center top/cover;
}

#reason {
   padding: 210px 0;
}

#reason .box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 34px;
   padding-top: 165px;
}

#reason .box .col {
   background-color: #fff;
   border: 2px solid #393939;
   position: relative;
   padding: 70px 20px 45px;
}

#reason .box .no {
   width: 149px;
   position: absolute;
   top: 0;
   left: 0;
}

#reason .box figure {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 91px;
}

#reason .box figure img[src*='photo-1'] {
   max-width: 75px;
}

#reason .box figure img[src*='photo-2'] {
   max-width: 70px;
}

#reason .box figure img[src*='photo-3'] {
   max-width: 62px;
}

#reason .box figure img[src*='photo-4'] {
   max-width: 80px;
}

#reason .box h3 {
   color: #D32727;
   padding-top: 15px;
}

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

@media screen and (max-width: 1240px) {
   #reason .box {
      gap: 20px;
   }

   #reason .box h3 {
      font-size: 20px;
   }
}

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

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

   #reason .wrap {
      padding: 0;
   }

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

   #reason .box {
      display: block;
      padding-top: 0;
   }

   #reason .box .col {
      margin: 0 50px;
   }

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

#faq {
   padding: 160px 0 215px;
}

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

#faq .box-qa dl {
   background-color: #fff;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
   margin-top: 30px;
   padding: 0;
}

#faq .box-qa dl dt {
   display: grid;
   grid-template-columns: 70px 1fr 70px;
   align-items: center;
   gap: 20px;
   cursor: pointer;
}

#faq .box-qa dl dt:after {
   content: '';
   width: 20px;
   height: 20px;
   background: url("../img/index/qa-arrow.png") no-repeat center top/cover;
   margin: 0 auto;
   transition: all 0.3s;
}

#faq .box-qa dl dt span {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   min-height: 74px;
   background-color: #393939;
   color: #fff;
   font-weight: 400;
   font-size: 26px;
   letter-spacing: 0.08em;
   line-height: 32px;
   text-align: center;
}

#faq .box-qa dl dd {
   display: none;
   padding: 20px 70px 35px 90px;
}

#faq .box-qa dl.active dt:after {
   transform: rotate(90deg);
}

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

   #faq .box-qa {
      padding-top: 0;
   }

   #faq .box-qa dl {
      margin-top: 20px;
   }

   #faq .box-qa dl dt {
      grid-template-columns: 40px 1fr 40px;
      gap: 10px;
      font-size: 18px;
      line-height: 26px;
   }

   #faq .box-qa dl dt span {
      min-height: 60px;
      font-size: 20px;
   }

   #faq .box-qa dl dd {
      padding: 20px 50px;
   }
}

#cta {
   background: url("../img/index/cta-bg-img.jpg") no-repeat center/cover;
   color: #fff;
   padding: 90px 0 35px;
}

#cta h2 {
   color: #fff;
   position: relative;
   padding-top: 40px;
}

#cta h2 img {
   max-width: 813px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

#cta .txt {
   font-weight: 400;
   line-height: 40px;
   padding-top: 40px;
}

#cta .bnr {
   padding-top: 45px;
}

#cta .bnr a {
   display: inline-block;
   max-width: 503px;
}

#cta .bnr a img {
   filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
}

#cta .tel {
   padding-top: 25px;
}

#cta .tel a {
   display: inline-block;
   max-width: 341px;
}

@media screen and (max-width: 991px) {
   #cta h2 img {
      max-width: 100%;
   }
}

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

   #cta h2 {
      padding-top: 2vw;
   }

   #cta .txt {
      font-size: 18px;
      line-height: 26px;
      padding-top: 15px;
   }
}

#strength {
   background: url('../img/index/strength-bg-img.png') no-repeat center top / cover;
   padding: 90px 0 70px;
   position: relative;
}

#strength .deco {
   max-width: 376px;
   margin: 0 auto 6px;
}

#strength .wrap {
   background-color: #fff;
   border-radius: 10px;
   padding: 65px;
}

#strength h2 {
   width: 776px;
   position: absolute;
   top: -17px;
   left: 50%;
   transform: translateX(-50%);
}

#strength h2 picture {
   display: block;
}

#strength .js-scrollable {
   padding-top: 6px;
}

#strength .js-scrollable figure {
   max-width: 1000px;
   margin: 0 auto;
}

#strength .list-btn {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   max-width: 1000px;
   margin: 0 auto;
   padding-top: 25px;
}

#strength .list-btn .toggle-link {
   display: block;
   background: #393939;
   color: #fff;
   font-weight: 700;
   font-size: 16px;
   line-height: 25px;
   padding: 10px 40px 10px 15px;
   position: relative;
   cursor: pointer;
}

#strength .list-btn .toggle-link:after{
   content: '';
   width: 20px;
   height: 20px;
   background: url("../img/index/arrow-right.png") no-repeat center / 100% auto;
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   transition: all 0.3s;
}

#strength .list-btn .toggle-main {
   display: none;
   border: 2px solid #393939;
   padding: 12px;
}

#strength .list-btn .toggle-main table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
}
#strength .list-btn .toggle-main table th, td {
   font-weight: 700;
   line-height: 36px;
   border: 1px solid #C1C1C1;
   text-align: center;
}
#strength .list-btn .toggle-main table thead th:nth-child(1) {
   background-color: #D32727;
   color: #fff;
}
#strength .list-btn .toggle-main table thead th:nth-child(2) {
   background-color: #D6D6D6;
}
#strength .list-btn .toggle-main table thead th:nth-child(3) {
   background-color: #E6E6E6;
}
#strength .list-btn .toggle-main table tbody td {
   background-color: #fff;
}

#strength .list-btn .toggle.is-active .toggle-link:after {
   transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 991px) {
   #strength h2 {
      width: 665px;
   }
   #strength .list-btn .toggle-main table th, td {
      font-size: 14px;
   }
}

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

   #strength .deco {
      max-width: 230px;
      margin-bottom: 53px;
   }

   #strength .wrap {
      padding: 80px 20px 50px;
   }

   #strength h2 {
      width: 100%;
      max-width: 308px;
      top: -56px;
   }

   #strength h3 {
      font-size: 23px;
      line-height: 34px;
      padding-top: 24px;
   }

   #strength .js-scrollable {
      padding: 24px 20px 30px;
   }

   #strength .js-scrollable figure {
      width: 1000px;
   }

   #strength .list-btn {
      grid-template-columns: 1fr;
      padding-top: 40px;
   }

   #strength .swiper {
      margin: 0 -20px;
      padding: 25px 16vw 30px;
   }

   #strength .swiper-wrapper {
      padding-top: 20vw;
   }

   #strength .swiper-wrapper:before{
      content: '';   
      width: 258vw;
      height: 17vw;
      background: url('../img/index/strength-slider-line.png') no-repeat center top / 100% auto;
      position: absolute;
      top: 0;
      left: -10vw;
   }

   #strength .swiper-scrollbar {
      width: auto;
      height: 5px;
      background: #CECECE;
      border-radius: 5px;
      top: auto;
      right: 20px;
      bottom: 0;
      left: 20px;
      margin: 25px auto 0;
   }

   #strength .swiper-scrollbar-drag {
      background: #D32727;
      border-radius: 5px;
   }

   #strength .swiper-slide {
      width: 60vw;
   }
}

@media screen and (min-width: 768px) {
   #strength .line {
      max-width: 1000px;
      margin: 0 auto;
      padding: 6px 0 10px;
   }

   #strength .swiper {
      max-width: 867px;
   }

   #strength .swiper-slide {
      flex-shrink: 1;
   }

   #strength .swiper-scrollbar {
      display: none;
   }
}

#case-study {
   background: url("../img/index/case-bg-img.jpg") no-repeat center top/cover;
   padding: 90px 0;
   overflow: hidden;
}

#case-study h2 .en {
   padding-bottom: 10px;
}

#case-study .slider {
   width: 100%;
   max-width: 935px;
   margin: 0 auto;
   padding-top: 60px;
}

#case-study .slider .slick-list {
   overflow: visible;
   margin: 0 -63px;
}

#case-study .slider .slick-track {
   display: flex;
}

#case-study .slider .slick-track:before,
#case-study .slider .slick-track:after {
   display: none;
}

#case-study .slider .slide {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   float: none;
   height: auto;
   position: relative;
   box-sizing: border-box;
   margin: 0 63px;
   padding: 16px 0 60px;
}

#case-study .slider .slide .fnt-outfit {
   font-weight: 200;
}

#case-study .slider .slide h3 {
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0.1em;
   line-height: 24px;
   margin-bottom: 40px;
   padding-bottom: 5px;
   position: relative;
   text-align: center;
}

#case-study .slider .slide h3 .en {
   font-weight: 200;
   font-size: 68px;
   letter-spacing: 0.15em;
   line-height: 86px;
   opacity: 0.2;
}

#case-study .slider .slide h3 .ja {
   display: inline-block;
   width: max-content;
   background-color: #000;
   color: #fff;
   padding: 3px 18px 5px;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}

#case-study .slider .slide .photo {
   max-width: 726px;
   position: relative;
   margin: 0 auto;
}

#case-study .slider .slide .photo:after {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
}

#case-study .slider .slide .photo>* {
   float: left;
}

#case-study .slider .slide .photo h4 {
   width: 220px;
   font-weight: 700;
   border-bottom: 2px solid #393939;
   position: absolute;
   bottom: 100%;
   left: -104px;
   padding: 0 0 15px 104px;
}

#case-study .slider .slide .photo .before {
   width: 220px;
   padding-top: 25px;
}

#case-study .slider .slide .photo .after {
   width: 430px;
   float: right;
}

#case-study .slider .slide .photo .arrow {
   width: 46px;
   padding: 110px 15px 0;
}

#case-study .slider .slide .photo figcaption {
   background-color: #000;
   color: #fff;
   font-weight: 200;
   font-size: 20px;
   letter-spacing: 0.15em;
   line-height: 25px;
   text-align: center;
   padding: 10px;
}

#case-study .slider .slide .txt-info {
   max-width: 280px;
   line-height: 24px;
   letter-spacing: 0;
   padding-top: 10px;
}

#case-study .slider .slide .txt-info p>span {
   display: inline-grid;
   grid-template-columns: auto auto;
}

#case-study .slider .slide .txt-info .price {
   font-weight: 700;
   color: #D32727;
}

#case-study .slider .slick-arrow {
   filter: drop-shadow(0 3px 0px rgba(0, 0, 0, 0.16));
   cursor: pointer;
   top: 56%;
   transition: all 0.3s;
}

#case-study .slider .slick-arrow:hover {
   opacity: 0.7;
}

#case-study .slider .slick-next {
   right: -17px;
}

#case-study .slider .slick-prev {
   left: -17px;
}

#case-study .controls {
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 65px;
}

#case-study .controls .arrow-prev,
#case-study .controls .arrow-next {
   background-color: transparent;
   border: 0;
   width: auto;
   height: auto;
   padding: 0;
   cursor: pointer;
   transition: all 0.3s;
}

#case-study .controls .arrow-prev:hover,
#case-study .controls .arrow-next:hover {
   opacity: 0.7;
}

#case-study .controls .arrow-prev {
   order: 1;
}

#case-study .controls .arrow-next {
   order: 3;
}

#case-study .controls .slick-dots {
   display: grid;
   justify-content: center;
   width: 120px;
   order: 2;
}

#case-study .controls .slick-dots li {
   grid-area: 1/1;
}

#case-study .controls .slick-dots button {
   display: block;
   width: 100%;
   height: auto;
   background: transparent;
   border: 0;
   text-align: center;
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.15em;
   line-height: 21px;
   opacity: 0;
   transition: all 0.3s;
}

#case-study .controls .slick-dots .slick-active button {
   opacity: 1;
}

@media screen and (max-width: 1023px) {
   #case-study .slider {
      max-width: 720px;
   }

   #case-study .slider .slide .photo {
      max-width: 690px;
   }

   #case-study .slider .slide .photo .after {
      width: 390px;
   }

   #case-study .slider .slide .photo h4 {
      width: 220px;
      padding-left: 16px;
      left: -16px;
   }

   #case-study .slider .slide .txt-info {
      left: 40px;
   }
}

@media screen and (max-width: 767px) {
   #case-study {
      background-image: url("../img/index/case-bg-img_sp.jpg");
      padding: 55px 20px;
   }

   #case-study h2 .en {
      padding-bottom: 0;
   }

   #case-study .slider {
      padding-top: 35px;
   }

   #case-study .slider .slick-list {
      margin: 0 -20px;
   }

   #case-study .slider .slide {
      margin: 0 20px;
      padding: 30px 0;
   }

   #case-study .slider .slide h3 {
      padding-bottom: 28px;
   }

   #case-study .slider .slide h3 .en {
      font-size: 51px;
      line-height: 64px;
   }

   #case-study .slider .slide .photo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 0 25px;
   }

   #case-study .slider .slide .photo>* {
      float: none;
   }

   #case-study .slider .slide .photo h4 {
      width: auto;
      position: static;
      border-bottom: 0;
      padding: 0;
   }

   #case-study .slider .slide .photo .before img,
   #case-study .slider .slide .photo .after img {
      width: 100%;
      max-width: inherit;
      height: 50vw;
      object-fit: cover;
   }

   #case-study .slider .slide .photo .before {
      width: 100%;
      padding-top: 6px;
   }

   #case-study .slider .slide .photo .after {
      width: 100%;
      float: none;
   }

   #case-study .slider .slide .photo .arrow {
      width: 36px;
      padding: 0;
   }

   #case-study .slider .slide .txt-info {
      max-width: 100%;
      padding-top: 0;
   }

   #case-study .controls {
      padding-top: 35px;
   }
}