@charset "UTF-8";

/*=============================================
 * HOME
*=============================================*/
#mv {
   display: grid;
   grid-template-columns: calc(50% + 120px) calc(50% - 180px);
   align-items: center;
   gap: 60px;
   background: url("../img/index/mv-bg.jpg") no-repeat center/cover;
   padding: 40px 30px;
}

.mv__slider .slick-list {
   margin: 0 -10px;
}

.mv__slider .slick-slide {
   margin: 0 10px;
}

.mv__slider .slick-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   margin-top: -12px;
   z-index: 1;
}

.mv__slider .slick-prev {
   left: -20px;
}

.mv__slider .slick-next {
   right: -20px;
}

.mv__slider .slick-dots {
   padding-top: 10px;
}

#mv .bnr figure+figure {
   margin-top: 30px;
}

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

   #mv .bnr {
      width: 80%;
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   #mv {
      gap: 14px;
      padding: 15px 10px 30px;
   }

   .mv__slider {
      padding: 0 20px;
   }

   .mv__slider .slick-prev {
      left: 0;
   }

   .mv__slider .slick-next {
      right: 0;
   }

   #mv .bnr figure+figure {
      margin-top: 10px;
   }
}

@media screen and (min-width: 1500px) {
   #mv {
      padding: 40px 80px;
   }
}

/* -- --*/
#feed {
   padding: 17px 20px;
   border-top: 3px solid #EB5407;
   border-bottom: 3px solid #EB5407;
   box-sizing: border-box;
   font-weight: 500;
}

#feed .wrap {
   display: grid;
   grid-template-columns: 40px 90px 90px 1fr;
   align-items: center;
   gap: 5px;
   max-width: 845px;
}

#feed h2 {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
}

#feed time,
#feed .cat {
   font-size: 13px;
}

#feed .ttl {
   position: relative;
   padding-right: 45px;
}

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

#feed .ttl i {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
   transition: all 0.3s;
}

#feed .ttl:hover i {
   transform: translate(5px, -50%);
}

@media screen and (max-width: 767px) {
   #feed {
      padding: 8px 15px;
   }

   #feed .wrap {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 6px;
   }

   #feed time,
   #feed .cat {
      font-size: 12px;
   }

   #feed .ttl {
      padding-right: 25px;
   }
}

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

#top__brand .wrap {
   display: grid;
   grid-template-columns: 170px 1fr;
   align-items: center;
   gap: 20px;
}

#top__brand h2 {
   font-weight: 900;
   line-height: 47px;
}

#top__brand h2 span {
   font-size: 48px;
}

#top__brand .list-brand {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

#top__brand .list-brand li {
   background-color: #fff;
   border: 2px solid #ccc;
   border-radius: 6px;
   overflow: hidden;
   text-align: center;
}

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

@media screen and (max-width: 767px) {
   #top__brand {
      padding: 18px 45px;
   }

   #top__brand .wrap {
      grid-template-columns: 100px 1fr;
      gap: 10px;
   }

   #top__brand h2 {
      font-size: 14px;
      line-height: 1.2;
   }

   #top__brand h2 span {
      font-size: 28px;
   }

   #top__brand .list-brand {
      gap: 5px;
   }
}

@media screen and (min-width: 1441px) {
   #top__brand .wrap {
      max-width: 1390px;
   }
}

/* -- --*/
#top__campaign {
   padding: 50px 0;
}

#top__campaign .wrap {
   max-width: 100%;
}

#top__campaign .box {
   margin: 0 auto;
}

#top__campaign .box .slick-list {
   overflow: visible;
   margin: 0 -10px;
}

#top__campaign .box .col {
   width: 600px;
   margin: 0 10px;
   padding-top: 40px;
}

#top__campaign .box .col a {
   display: block;
   border: 2px solid #00A83B;
   border-radius: 0 10px 10px 10px;
   padding: 25px 30px;
   position: relative;
}

#top__campaign .box .col a:hover {
   opacity: 1;
   background-color: #FCF3EC;
}

#top__campaign .box .offer {
   display: inline-block;
   background-color: #00A83B;
   color: #fff;
   font-weight: 500;
   line-height: 30px;
   border-radius: 10px 10px 0 0;
   padding: 2px 8px;
   position: absolute;
   bottom: 100%;
   left: -2px;
}

#top__campaign .box .offer span {
   font-weight: inherit;
}

#top__campaign .box .info {
   display: grid;
   grid-template-columns: 1fr 360px;
   gap: 20px;
   position: relative;
}

#top__campaign .box .info h3 span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#top__campaign .box .info .sub {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
   padding-top: 5px;
}

#top__campaign .box .info .price-1 {
   max-width: max-content;
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
   margin-top: 18px;
   position: relative;
}

#top__campaign .box .info .price-1:before {
   content: '';
   width: 100%;
   border-top: 2px solid #000;
   position: absolute;
   top: 50%;
   left: 0;
}

#top__campaign .box .info .price-1 span {
   font-size: 20px;
}

#top__campaign .box .info .price-2 {
   font-weight: 600;
   font-size: 16px;
}

#top__campaign .box .info .price-2 .price_number {
   padding: 0 5px;
}

#top__campaign .box .info .price-2 .unit {
   display: inline-block;
   line-height: 1;
   text-align: center;
}

#top__campaign .box .info .price-2 .unit small {
   font-size: 12px;
}

#top__campaign .box .info .percent {
   background: linear-gradient(to bottom, #4E63D2, #8C40B8, #AE35AD, #B233AC, #E32E67, #FA822A, #FECE6C);
   width: 90px;
   height: 90px;
   border-radius: 50%;
   text-align: center;
   color: #fff;
   line-height: 1.2;
   box-sizing: border-box;
   padding-top: 14px;
   position: absolute;
   bottom: 0;
   right: 0;
}

#top__campaign .box .info .percent span {
   line-height: inherit;
}

#top__campaign .box .price-3 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   background-color: #00782A;
   color: #fff;
   border-radius: 6px;
   font-weight: 600;
   margin-top: 10px;
   padding: 6px 15px;
}

#top__campaign .box .price-3 dt {
   font-weight: 700;
   padding-right: 10px;
}

#top__campaign .box .price-3 dd {
   border-left: 1px solid #fff;
   padding-left: 10px;
}

#top__campaign .box .price-3 dd .actual {
   font-weight: 600;
   font-size: 16px;
}

#top__campaign .box .price-3 dd .actual .price_number {
   line-height: 40px;
   padding: 0 5px;
}

#top__campaign .box .price-3 dd .actual .unit {
   display: inline-block;
   line-height: 1;
   text-align: center;
}

#top__campaign .box .price-3 dd .actual .unit small {
   font-size: 12px;
}

#top__campaign .box .note {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   font-weight: 600;
   padding-top: 5px;
}

#top__campaign .banner {
   display: grid;
   grid-template-columns: repeat(2, 480px);
   gap: 40px;
   max-width: max-content;
   margin: 0 auto;
   padding-top: 40px;
}

@media screen and (max-width: 1023px) {
   #top__campaign .banner {
      grid-template-columns: repeat(2, 1fr);
      padding: 40px 20px 0;
   }
}

@media screen and (max-width: 767px) {
   #top__campaign {
      padding: 15px 0 30px;
   }

   #top__campaign .wrap {
      padding: 0;
   }

   #top__campaign .box {
      width: auto;
      margin: 0 30px;
      box-sizing: border-box;
   }

   #top__campaign .box .slick-list {
      overflow: hidden;
   }

   #top__campaign .box .slick-arrow {
      background-color: #333;
      color: #fff;
      position: absolute;
      top: 55%;
      transform: translateY(-50%);
      z-index: 1;
   }

   #top__campaign .box .slick-prev {
      left: -20px;
   }

   #top__campaign .box .slick-next {
      right: -20px;
   }

   #top__campaign .box .col a {
      padding: 10px 10px;
   }

   #top__campaign .box .offer {
      font-size: 12px;
      line-height: 18px;
      padding: 0 8px 2px;
   }

   #top__campaign .box .info {
      grid-template-columns: 88px 1fr;
      gap: 10px;
   }

   #top__campaign .box .info h3 {
      font-size: 12px;
      line-height: 16px;
   }

   #top__campaign .box .info .sub {
      font-size: 12px;
      line-height: 16px;
   }

   #top__campaign .box .info .price-1 {
      font-size: 10px;
      line-height: 16px;
      margin-top: 10px;
   }

   #top__campaign .box .info .price-1 span {
      font-size: 14px;
      line-height: inherit;
   }

   #top__campaign .box .info .price-2 {
      font-size: 12px;
      line-height: 16px;
   }

   #top__campaign .box .info .price-2 span {
      line-height: inherit;
   }

   #top__campaign .box .info .price-2 .price_number {
      font-size: 18px;
      padding: 0;
   }

   #top__campaign .box .info .price-2 .unit {
      font-size: 10px;
   }

   #top__campaign .box .info .price-2 .unit small {
      font-size: 8px;
   }

   #top__campaign .box .info .percent {
      width: 50px;
      height: 50px;
      font-size: 12px;
      padding-top: 5px;
   }

   #top__campaign .box .info .percent span {
      font-size: 20px;
   }

   #top__campaign .box .price-3 {
      padding: 10px;
   }

   #top__campaign .box .price-3 dt {
      font-size: 10px;
      line-height: 15px;
   }

   #top__campaign .box .price-3 dd {
      font-size: 10px;
      line-height: 20px;
   }

   #top__campaign .box .price-3 dd .actual {
      font-size: 10px;
      line-height: 20px;
   }

   #top__campaign .box .price-3 dd .actual span {
      line-height: inherit;
   }

   #top__campaign .box .price-3 dd .actual .price_number {
      font-size: 20px;
      line-height: inherit;
      padding: 0;
   }

   #top__campaign .box .price-3 dd .actual .unit {
      font-size: 10px;
   }

   #top__campaign .box .price-3 dd .actual .unit small {
      font-size: 8px;
   }

   #top__campaign .box .note {
      font-size: 10px;
      line-height: 15px;
   }

   #top__campaign .banner {
      gap: 10px;
      padding: 20px 20px 0;
   }
}

/* -- --*/
#top__business {
   padding: 60px 0;
}

#top__business .wrap {
   display: grid;
   grid-template-columns: 380px 1fr;
   align-items: center;
   gap: 35px;
}

#top__business .txt {
   font-size: 16px;
   line-height: 24px;
   padding-top: 20px;
}

#top__business .col-r {
   border-left: 2px solid #EB5407;
   padding-left: 35px;
}

#top__business .col-r h3 span {
   display: inline-block;
   vertical-align: sub;
   padding-right: 10px;
}

#top__business .col-r ul {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   padding-top: 16px;
}

#top__business .col-r ul a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   height: 200px;
   border-radius: 20px;
   background-color: #fff;
   border: 4px solid #F3BA74;
   text-align: center;
}

#top__business .col-r ul a img {
   max-width: 110px;
}

#top__business .col-r ul a:hover {
   background-color: #FCF3EC;
   opacity: 1;
}

@media screen and (max-width: 1440px) {
   #top__business .col-r ul {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media screen and (max-width: 1200px) {
   #top__business .col-r ul {
      font-size: 20px;
   }
}

@media screen and (max-width: 1023px) {
   #top__business .wrap {
      grid-template-columns: 1fr;
   }

   #top__business .col-r {
      border-top: 2px solid #EB5407;
      border-left: 0;
      padding: 35px 0 0;
   }
}

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

   #top__business .wrap {
      gap: 20px;
   }

   #top__business h2 {
      font-size: 17px;
      line-height: 25px;
   }

   #top__business .txt {
      font-size: 13px;
      line-height: 20px;
      padding-top: 20px;
   }

   #top__business .col-r {
      padding-top: 20px;
   }

   #top__business .col-r h3 {
      text-align: center;
      font-size: 14px;
      line-height: 28px;
   }

   #top__business .col-r h3 span {
      font-size: 24px;
      vertical-align: baseline;
   }

   #top__business .col-r ul {
      gap: 5px;
      font-size: 13px;
      line-height: 20px;
   }

   #top__business .col-r ul a {
      gap: 5px;
      height: 90px;
   }

   #top__business .col-r ul a img {
      max-width: 50px;
   }
}

@media screen and (min-width: 1441px) {
   #top__business .wrap {
      max-width: 1400px;
   }
}

@media screen and (min-width: 1600px) {
   #top__business .wrap {
      max-width: 1590px;
   }
}

/* -- --*/
#top__reason {
   padding: 60px 0;
}

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

#top__reason .box .col {
   display: grid;
   grid-template-columns: 160px 1fr;
   align-items: flex-start;
}

#top__reason .box .col dt {
   position: relative;
   z-index: 1;
}

#top__reason .box .col dd {
   font-weight: 700;
   padding: 10px 0 28px 20px;
   position: relative;
}

#top__reason .box .col dd:before {
   content: '';
   height: 8px;
   background-size: 14px 14px;
   background-image: linear-gradient(to right, #EB5407 8px, transparent 8px);
   position: absolute;
   right: 0;
   bottom: 0;
   left: -40px;
}

#top__reason .box .col dd span {
   display: block;
   padding-bottom: 10px;
}

#top__reason .button {
   position: absolute;
   top: 28px;
   right: 0;
}

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

   #top__reason .box dd {
      font-size: 20px;
   }
}

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

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

   #top__reason .box {
      gap: 15px;
      padding-top: 20px;
   }

   #top__reason .box .col {
      grid-template-columns: 100px 1fr;
   }

   #top__reason .box .col dd {
      font-size: 15px;
      line-height: 18px;
      padding: 12px 0 12px 5px;
   }

   #top__reason .box .col dd:before {
      height: 4px;
   }

   #top__reason .box .col dd span {
      padding-bottom: 5px;
   }

   #top__reason .button {
      text-align: center;
      position: static;
      padding-top: 20px;
   }
}

/* -- --*/
#top__regions {
   background: url("../img/index/regions-bg.jpg") no-repeat center/cover;
   padding: 60px 0;
}

#top__regions h2 span {
   display: block;
   font-weight: 700;
}

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

#top__regions .box figure {
   position: relative;
}

#top__regions .box figure img {
   border-radius: 0 30px 0 0;
}

#top__regions .box figure figcaption {
   background-color: #EB5407;
   color: #fff;
   font-weight: 700;
   line-height: 40px;
   border-radius: 0 0 26px 0;
   position: absolute;
   top: 0;
   left: 0;
   padding: 0 25px 0 10px;
}

#top__regions .box figure figcaption span {
   font-weight: 600;
   font-size: 30px;
   padding-left: 4px;
}

#top__regions .box h3 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100px;
   background-color: #FFFCF5;
   padding: 10px;
   box-sizing: border-box;
   font-weight: 700;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#top__regions .button {
   display: flex;
   justify-content: center;
   gap: 30px;
   padding-top: 30px;
}

@media screen and (max-width: 1200px) {
   #top__regions .box h3.h-20 {
      font-size: 16px;
   }

   #top__regions .box h3.h-28 {
      font-size: 24px;
   }

   #top__regions .box h3.h-25 {
      font-size: 22px;
   }
}

@media screen and (max-width: 1023px) {
   #top__regions .box {
      grid-template-columns: 380px;
      justify-content: center;
   }
}

@media screen and (max-width: 767px) {
   #top__regions {
      background-image: url("../img/index/regions-bg_sp.jpg");
      padding: 40px 10px;
   }

   #top__regions h2 .h-22 {
      font-size: 16px;
      line-height: 24px;
   }

   #top__regions h2 .h-46 {
      font-size: 33px;
      line-height: 48px;
   }

   #top__regions h2 .h-40 {
      font-size: 28px;
      line-height: 40px;
   }

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

   #top__regions .box figure figcaption {
      line-height: 35px;
   }

   #top__regions .box figure figcaption span {
      font-size: 26px;
   }

   #top__regions .box h3 {
      height: 78px;
   }

   #top__regions .box h3.h-20 {
      font-size: 17px;
      line-height: 25px;
   }

   #top__regions .box h3.h-28 {
      font-size: 22px;
      line-height: 32px;
   }

   #top__regions .box h3.h-25 {
      font-size: 20px;
      line-height: 30px;
   }

   #top__regions .button {
      flex-direction: column;
      gap: 15px;
      padding-top: 20px;
   }
}

/* -- --*/
#top__works {
   padding: 100px 0;
}

#top__works .wrap {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 80px;
}

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

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

@media screen and (max-width: 1023px) {
   #top__works .wrap {
      grid-template-columns: 1fr;
      gap: 0px;
   }

   #top__works h2 {
      text-align: center;
   }

   #top__works h2:after {
      margin: 20px auto 0;
   }

   #top__works .button {
      text-align: center;
   }

   #top__works .button.pc {
      display: none;
   }

   #top__works .button.sp {
      display: block;
   }
}

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

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

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

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

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

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

#top__product h2 {
   font-weight: 700;
   font-size: 34px;
   letter-spacing: 0.05em;
   line-height: 50px;
   position: relative;
}

#top__product h2:after {
   content: '';
   display: block;
   width: 55px;
   height: 5px;
   background-image: linear-gradient(to right, #CF6D91 0 10px, transparent 0 15px, #70AE52 0 25px, transparent 0 30px, #569AD6 0 40px, transparent 0 45px, #D98C38 0 55px);
   margin-top: 20px;
}

#top__product h2 span {
   display: block;
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
}

#top__product hr {
   border: 0;
   border-top: 2px solid #EB5407;
   margin-top: 30px;
}

#top__product .box-1 {
   display: flex;
   gap: 35px;
   padding-top: 30px;
}

#top__product .box-1 .col {
   width: 50%;
}

#top__product .box-1 .hr {
   border-left: 2px dashed #EB5407;
}

#top__product .box-1 h3 {
   background: url("../img/common/icon-search.png") no-repeat center left/36px auto;
   padding-left: 45px;
   font-weight: 500;
}

#top__product .box-1 ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding-top: 20px;
}

#top__product .box-1 ul a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 60px;
   background-color: #fff;
   border: 2px solid #ccc;
   border-radius: 6px;
   font-weight: 500;
   line-height: 20px;
   box-sizing: border-box;
   overflow: hidden;
}

#top__product .box-1 ul a span {
   font-size: 14px;
   color: #ccc;
}

#top__product .box-1 ul a img {
   height: 100%;
   mix-blend-mode: multiply;
}

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

#top__product .box-2 h3 {
   background: url("../img/common/icon-crown.png") no-repeat center left/36px auto;
   padding-left: 45px;
   font-weight: 500;
}

#top__product .box-2 .list-ranking {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   padding-top: 20px;
}

#top__product .box-2 .list-ranking .col a {
   display: block;
   background-color: #fff;
   border: 2px solid #ccc;
   padding: 10px 15px;
   border-radius: 6px;
}

#top__product .box-2 .list-ranking .no {
   width: 41px;
   height: 41px;
}

#top__product .box-2 .list-ranking figure {
   width: 100%;
   margin-top: 6px;
   padding-top: 58.8%;
   position: relative;
}

#top__product .box-2 .list-ranking figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__product .box-2 .list-ranking .ttl {
   font-weight: 700;
   line-height: 20px;
   padding-top: 6px;
}

#top__product .box-2 .list-ranking .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#top__product .box-2 .list-ranking .price-1 {
   color: #00812D;
   font-weight: 500;
   font-size: 13px;
   line-height: 20px;
   padding-top: 6px;
}

#top__product .box-2 .list-ranking .price-label {
   background: url("../img/common/icon-construction.png") no-repeat center left/20px auto;
   font-weight: 500;
   margin-top: 5px;
   padding-left: 24px;
}

#top__product .box-2 .list-ranking .price-2 {
   font-weight: 500;
   font-size: 13px;
   padding-top: 5px;
}

#top__product .box-2 .list-ranking .price-2 span {
   font-weight: 700;
}

#top__product .box-2 .list-ranking .col:nth-child(1) .no {
   background: url("../img/index/ranking-no-1.png") no-repeat center top/cover;
}

#top__product .box-2 .list-ranking .col:nth-child(2) .no {
   background: url("../img/index/ranking-no-2.png") no-repeat center top/cover;
}

#top__product .box-2 .list-ranking .col:nth-child(3) .no {
   background: url("../img/index/ranking-no-3.png") no-repeat center top/cover;
}

#top__product .box-2 .list-ranking .col:nth-child(4) .no {
   background: url("../img/index/ranking-no-4.png") no-repeat center top/cover;
}

@media screen and (max-width: 1023px) {
   #top__product .box-1 {
      flex-direction: column;
   }

   #top__product .box-1 .hr {
      border-top: 2px dashed #EB5407;
      border-left: 0;
   }

   #top__product .box-1 .col {
      width: 100%;
   }

   #top__product .box-2 .list-ranking {
      grid-template-columns: repeat(2, 1fr);
   }
}

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

   #top__product h2 {
      text-align: center;
      font-size: 24px;
      line-height: 35px;
   }

   #top__product h2:after {
      margin: 20px auto 0;
   }

   #top__product h2 span {
      font-size: 16px;
      line-height: 20px;
   }

   #top__product hr {
      margin-top: 20px;
   }

   #top__product .box-1 {
      flex-direction: column;
      gap: 20px;
      padding-top: 20px;
   }

   #top__product .box-1 .hr {
      border-top: 2px dashed #EB5407;
      border-left: 0;
   }

   #top__product .box-1 .col {
      width: 100%;
   }

   #top__product .box-1 h3 {
      background-size: 20px auto;
      font-size: 16px;
      line-height: 24px;
      padding-left: 25px;
   }

   #top__product .box-1 ul {
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      padding-top: 7px;
   }

   #top__product .box-1 ul li a {
      height: 40px;
      font-size: 13px;
      line-height: 15px;
   }

   #top__product .box-1 ul li a span {
      font-size: 10px;
   }

   #top__product .box-2 h3 {
      background-size: 20px auto;
      font-size: 15px;
      line-height: 20px;
      padding-left: 25px;
   }

   #top__product .box-2 .list-ranking {
      gap: 10px;
      padding-top: 20px;
   }

   #top__product .box-2 .list-ranking .col a {
      padding: 10px 5px;
   }

   #top__product .box-2 .list-ranking .col .no {
      width: 30px;
      height: 30px;
   }

   #top__product .box-2 .list-ranking .col .price-1 {
      font-size: 9px;
      line-height: 15px;
   }

   #top__product .box-2 .list-ranking .col .price-label {
      background-size: 15px auto;
      font-size: 12px;
      line-height: 16px;
      padding-left: 20px;
   }

   #top__product .box-2 .list-ranking .col .price-2 {
      font-size: 10px;
   }

   #top__product .box-2 .list-ranking .col .price-2 .h-26 {
      font-size: 16px;
   }
}

/* -- --*/
#top__flow {
   padding: 60px 0;
}

#top__flow h2 {
   font-weight: 700;
   font-size: 45px;
   line-height: 80px;
}

#top__flow h2 span {
   font-weight: 700;
   font-size: 56px;
}

#top__flow .ttl-1 {
   background-color: #EB5407;
   color: #fff;
   text-align: center;
   padding: 11px 10px;
}

#top__flow .box-1 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
   padding-top: 20px;
}

#top__flow .box-1 .col {
   color: #fff;
   position: relative;
}

#top__flow .box-1 figure {
   height: 220px;
   position: relative;
}

#top__flow .box-1 figure figcaption {
   font-weight: 700;
   font-style: italic;
   font-size: 46px;
   line-height: 35px;
   position: absolute;
   top: 0;
   left: 20px;
}

#top__flow .box-1 figure figcaption small {
   font-size: 18px;
}

#top__flow .box-1 h4 {
   background-image: linear-gradient(to top, rgba(17, 12, 2, 0.65), transparent);
   padding: 21px 20px 15px;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   border-radius: 0 0 10px 10px;
   text-align: center;
}

#top__flow .box-1 .txt {
   font-size: 14px;
   line-height: 28px;
   padding-top: 10px;
}

#top__flow hr {
   border-top: 2px solid #EB5407;
   margin-top: 60px;
}

#top__flow .box-2 {
   padding-top: 60px;
}

#top__flow .box-2 .list {
   font-weight: 500;
   margin: 0 auto;
   padding-top: 25px;
}

#top__flow .box-2 .list ul {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0 20px;
}

#top__flow .box-2 .list ul li {
   background: url("../img/common/icon-checked.png") no-repeat top 20px left 10px/27px auto;
   border-bottom: 1px solid #533B0C;
   padding: 15px 0 15px 40px;
}

@media screen and (max-width: 1200px) {
   #top__flow .ttl-1 {
      font-size: 32px;
   }

   #top__flow .box-1 h4 {
      font-size: 20px;
   }
}

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

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

   #top__flow h2 {
      font-size: 20px;
      line-height: 30px;
   }

   #top__flow h2 span {
      font-size: 27px;
   }

   #top__flow .ttl-1 {
      font-size: 16px;
      line-height: 24px;
      margin-top: 10px;
      padding: 8px 5px;
   }

   #top__flow .box-1 {
      gap: 4px;
      padding-top: 15px;
   }

   #top__flow .box-1 figure {
      height: 95px;
   }

   #top__flow .box-1 figure figcaption {
      font-size: 25px;
      line-height: 1;
      left: 10px;
   }

   #top__flow .box-1 figure figcaption small {
      font-size: 12px;
   }

   #top__flow .box-1 h4 {
      font-size: 11px;
      line-height: 16px;
      padding: 5px;
   }

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

   #top__flow .box-2 h3 {
      font-size: 20px;
      line-height: 30px;
   }

   #top__flow .box-2 .list {
      font-size: 13px;
      line-height: 20px;
      padding-top: 4px;
   }

   #top__flow .box-2 .list ul {
      grid-template-columns: repeat(3, 1fr);
      gap: 0 5px;
   }

   #top__flow .box-2 .list ul li {
      background-size: 14px auto;
      background-position: top 11px left;
      padding: 6px 0 6px 18px;
   }

   #top__flow hr {
      margin-top: 30px;
   }
}

/* -- --*/
#top__company {
   background: url("../img/index/company-bg.jpg") no-repeat center/cover;
   padding: 80px 0;
}

#top__company .box {
   display: grid;
   grid-template-columns: 240px 390px 1fr;
   gap: 25px;
   padding-top: 30px;
}

#top__company .box h3 {
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-start;
   gap: 15px;
}

#top__company .box h3 span {
   display: block;
   width: 36px;
   background-color: #FFE6D5;
   font-weight: 200;
   line-height: 36px;
   padding: 10px 2px 10px 10px;
}

#top__company .box .logo {
   padding-top: 25px;
}

#top__company .box .col-r {
   padding: 20px 0 20px 35px;
}

#top__company .box .position {
   font-weight: 500;
   font-size: 13px;
   line-height: 20px;
}

#top__company .box .name {
   font-size: 13px;
   border-left: 5px solid #EB5407;
   margin-top: 5px;
   padding-left: 5px;
}

#top__company .box .name span {
   font-weight: 500;
}

#top__company .box .txt,
#top__company .box .button {
   padding-top: 30px;
}

#top__company .box .txt dt {
   display: inline-block;
   background-color: #D90912;
   color: #fff;
   font-weight: 500;
   line-height: 28px;
   border-radius: 30px;
   padding: 0 20px;
}

#top__company .box .txt dd {
   line-height: 36px;
   padding-top: 8px;
}

@media screen and (max-width: 1200px) {
   #top__company .box {
      grid-template-columns: 200px 360px 1fr;
   }

   #top__company .box .col-r {
      padding-left: 0;
   }
}

@media screen and (max-width: 1023px) {
   #top__company .box {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 30px;
   }

   #top__company .box .col-l {
      width: 240px;
   }

   #top__company .box figure {
      width: 390px;
   }

   #top__company .box .col-r {
      width: 100%;
      padding: 0;
   }

   #top__company .box .button {
      text-align: center;
   }
}

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

   #top__company .box {
      gap: 10px 16px;
      padding-top: 20px;
   }

   #top__company .box .col-l {
      width: 105px;
   }

   #top__company .box h3 {
      gap: 6px;
   }

   #top__company .box h3 span {
      width: 18px;
      line-height: 20px;
      padding: 5px 1px 5px 2px;
   }

   #top__company .box .logo {
      padding-top: 10px;
   }

   #top__company .box figure {
      width: 172px;
   }

   #top__company .box .position {
      font-size: 12px;
   }

   #top__company .box .name {
      font-size: 12px;
   }

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

   #top__company .box .txt dt {
      font-size: 13px;
      line-height: 25px;
   }

   #top__company .box .txt dd {
      font-size: 13px;
      line-height: 20px;
      padding-top: 10px;
   }

   #top__company .box .button {
      padding-top: 20px;
   }
}

@media screen and (min-width: 1441px) {
   #top__company .wrap {
      max-width: 1280px;
   }
}

/* -- --*/
#top__faq {
   padding: 60px 0;
}

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

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

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

/* -- --*/
#top__news {
   position: relative;
   padding-bottom: 60px;
}

#top__news hr {
   border-top: 2px solid #EB5407;
   margin-bottom: 60px;
}

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

#top__news .button {
   position: absolute;
   top: 88px;
   right: 0;
}

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

   #top__news hr {
      margin-bottom: 40px;
   }

   #top__news .box,
   #top__news .button {
      padding-top: 20px;
   }

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

   #top__news .button {
      text-align: center;
      position: static;
   }
}

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

#top__ecocute h2 {
   font-weight: 700;
   font-size: 45px;
   letter-spacing: 0;
   line-height: 65px;
}

#top__ecocute h2 span {
   font-size: 56px;
}

#top__ecocute .tabs-switch {
   padding-top: 30px;
}

#top__ecocute .tab-link {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   text-align: center;
}

#top__ecocute .tab-link li {
   background-color: #fff;
   border-radius: 10px 10px 0 0;
   padding: 10px 10px;
   transition: all 0.3s;
}

#top__ecocute .tab-link li:hover,
#top__ecocute .tab-link li.active {
   background-color: #FFCC00;
}

#top__ecocute .tab-content {
   background-color: #fff;
   border: 3px solid #FFCC00;
   padding: 30px 50px;
}

#top__ecocute .tab-content figure {
   margin: 0 auto;
   padding-top: 30px;
}

#top__ecocute .tab-content-item-1 figure {
   max-width: 800px;
}

#top__ecocute .tab-content-item-2 figure {
   max-width: 491px;
}

@media screen and (max-width: 1023px) {
   #top__ecocute .tab-link li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
}

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

   #top__ecocute h2 {
      font-size: 22px;
      line-height: 44px;
   }

   #top__ecocute h2 span {
      font-size: 30px;
   }

   #top__ecocute .tabs-switch {
      padding-top: 10px;
   }

   #top__ecocute .tab-link {
      gap: 5px;
      font-size: 15px;
      line-height: 20px;
   }

   #top__ecocute .tab-link li {
      height: 42px;
      padding: 4px 0;
   }

   #top__ecocute .tab-content {
      font-size: 40px;
      line-height: 20px;
      padding: 20px 20px;
   }

   #top__ecocute .tab-content figure {
      padding-top: 20px;
   }
}

/* -- --*/
.section__cta {
   background: url("../img/common/cta-bg.jpg") no-repeat center top/cover;
   padding-top: 20px;
}

.section__cta .wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 60px;
}

.section__cta h2 {
   line-height: 48px;
}

.section__cta h2 span {
   font-size: 34px;
}

.section__cta .tel a {
   display: block;
   background: url("../img/common/icon-tel.png") no-repeat center left/54px auto;
   font-weight: 900;
   font-style: italic;
   font-size: 57px;
   line-height: 67px;
   padding-left: 65px;
}

.section__cta .tel time {
   display: inline-block;
   background-color: #EB5407;
   color: #fff;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   border-radius: 4px;
   margin-left: 65px;
   padding: 6px 20px;
}

.section__cta figure {
   width: 270px;
}

@media screen and (max-width: 1023px) {
   .section__cta {
      padding-top: 30px;
   }

   .section__cta .wrap {
      align-items: flex-end;
      gap: 20px;
   }

   .section__cta .col {
      padding-bottom: 24px;
   }

   .section__cta figure {
      width: 180px;
   }
}

@media screen and (max-width: 767px) {
   .section__cta {
      background-image: url("../img/common/cta-bg_sp.jpg");
   }

   .section__cta .wrap {
      gap: 5px;
      padding: 0 10px;
   }

   .section__cta h2 {
      text-align: center;
      font-size: 14px;
      line-height: 20px;
   }

   .section__cta h2 span {
      font-size: 16px;
   }

   .section__cta .tel a {
      background-size: 35px auto;
      font-size: 26px;
      line-height: 31px;
      padding-left: 43px;
   }

   .section__cta .tel time {
      font-size: 11px;
      line-height: 16px;
      margin-left: 0;
      padding: 2px 8px 3px;
   }

   .section__cta figure {
      width: 100px;
   }
}

/*=============================================
 * Contact
 *=============================================*/
#cta__other {
   padding-bottom: 70px;
}

#cta__other .box {
   max-width: 950px;
   margin: 0 auto;
}

#cta__other .box+.box {
   padding-top: 70px;
}

#cta__other .box h3 {
   font-weight: 700;
   letter-spacing: 0.05em;
   border-left: 5px solid #C16C26;
   padding-left: 10px;
}

#cta__other .box .text {
   padding: 30px 0 0 50px;
}

#cta__other .box .text p+p {
   padding-top: 30px;
}

#cta__other .box .tel {
   width: 430px;
   text-align: center;
}

#cta__other .box .tel span {
   display: inline-block;
   font-weight: 700;
   border-bottom: 1px solid;
   padding: 0 5px 10px;
}

#cta__other .box .tel a {
   display: block;
   font-weight: 500;
   font-size: 52px;
   line-height: 62px;
   text-align: left;
   margin-top: 4px;
   padding-left: 75px;
   position: relative;
}

#cta__other .box .tel a:before {
   content: '';
   width: 70px;
   height: 48px;
   background-color: #333;
   -webkit-mask: url("../img/common/icon-tel.png") no-repeat center/100% auto;
   mask: url("../img/common/icon-tel.png") no-repeat center/100% auto;
   position: absolute;
   top: 7px;
   left: 0;
}

#cta__other .box time {
   display: block;
   width: 430px;
   font-weight: 500;
   font-size: 18px;
   line-height: 32px;
   text-align: center;
}

#cta__other .box time span {
   font-size: 22px;
}

#cta__other .button a {
   background-color: #00B900;
   box-shadow: 0 5px #098109;
   color: #fff;
}

#cta__other .button a:after {
   color: #fff;
}

#cta__other .button a:hover {
   box-shadow: none;
}

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

   #cta__other .box+.box {
      padding-top: 40px;
   }

   #cta__other .box .text {
      padding: 20px 0 0 15px;
   }

   #cta__other .box .text p+p {
      padding-top: 20px;
   }

   #cta__other .box .tel {
      width: 100%;
   }

   #cta__other .box .tel span {
      font-size: 14px;
      line-height: 20px;
      padding: 0 5px 5px;
      margin-bottom: 8px;
   }

   #cta__other .box .tel a {
      font-size: 36px;
      line-height: 40px;
      padding-left: 55px;
   }

   #cta__other .box .tel a:before {
      width: 50px;
      height: 36px;
      top: 0;
   }

   #cta__other .box time {
      width: 100%;
      font-size: 12px;
   }

   #cta__other .box time span {
      font-size: 18px;
   }
}

/* -- -- */
#mailform {
   padding-bottom: 80px;
}

#mailform .wrap {
   width: calc(100% - 40px);
   max-width: 950px;
}

#mailform h2 {
   font-weight: 700;
   letter-spacing: 0.05em;
   border-left: 5px solid #C16C26;
   padding-left: 10px;
   margin-bottom: 30px;
}

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

#mailform .form-row {
   background-color: #EEEDEA;
   line-height: 24px;
   border-radius: 10px;
   margin-bottom: 10px;
   padding: 20px 30px;
}

#mailform .form-row .caption {
   display: flex;
   align-items: center;
   gap: 6px;
}

#mailform .form-row .required {
   display: block;
   width: 46px;
   background-color: #E1344C;
   color: #fff;
   font-size: 12px;
   text-align: center;
   border-radius: 30px;
}

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

#mailform .form-row .input {
   padding-top: 10px;
}

#mailform .form-privacy {
   margin: 40px auto 0;
   background-color: #fff;
   border: 1px solid #D9D9D9;
   padding: 15px 0;
}

#mailform .form-privacy .privacy-content {
   height: 350px;
   overflow-y: auto;
   padding: 0 40px;
}

#mailform .form-privacy .privacy-content .item+.item {
   padding-top: 30px;
}

#mailform .form-privacy-check {
   padding-top: 30px;
   text-align: center;
}

#mailform .form-privacy-check .wpcf7-checkbox {
   align-items: center;
}

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

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

#mailform .form-btn p {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 60px;
   background: #fff;
   border: 2px solid #C16C26;
   color: #333;
   font-weight: 500;
   font-size: 15px;
   letter-spacing: 0;
   line-height: 26px;
   text-align: center;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: 1;
   transition: all 0.3s;
   border-radius: 50px;
}

#mailform .form-btn p:after {
   content: '\f105';
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 15px;
   line-height: 1;
   letter-spacing: 0;
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
}

#mailform .form-btn p:hover {
   background-color: #F6F2E1;
}

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

#mailform .form-btn .btn-prev {
   background: #ccc;
   color: #4d4d4d;
}

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

#mailform.confirm .form-row .input {
   padding: 7px 20px;
}

@media screen and (max-width: 767px) {
   #mailform .wrap {
      width: 100%;
   }

   #mailform .form-row {
      padding: 20px 10px;
   }

   #mailform .form-privacy {
      padding: 20px 0;
   }

   #mailform .form-privacy .privacy-content {
      padding: 0 20px;
   }

   #mailform .form-privacy-check {
      padding-top: 20px;
   }

   #mailform .form-btn {
      flex-direction: column;
      gap: 20px;
      padding-top: 40px;
   }

   #mailform .form-btn p {
      width: 100%;
   }

   #mailform.confirm .form-row .input {
      padding: 7px 10px;
   }
}

/* -- -- */
#thanks {
   text-align: center;
   position: relative;
   padding: 20px 0 80px;
}

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

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

@media screen and (max-width: 767px) {
   #thanks {
      text-align: left;
      padding-bottom: 50px;
   }

   #thanks h2 {
      text-align: center;
   }

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

   #thanks .button {
      padding: 30px 0 0;
   }
}

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

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

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   width: 30px;
   height: 30px;
   background-color: #fff;
   color: #333;
   border: 1px solid #333;
   text-align: center;
   font-family: "Montserrat", sans-serif;
   font-weight: 500;
   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0;
   box-sizing: border-box;
   border-radius: 50%;
}

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

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

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      gap: 5px;
   }
}

/* -- -- */
.article__list01 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px 20px;
}

.article__list01 figure a {
   display: block;
   width: 100%;
   padding-top: 77.2%;
   border-radius: 10px;
   position: relative;
}

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

.article__list01 .text {
   padding: 8px 5px 0;
}

.article__list01 .cat a {
   display: inline-block;
   background-color: #533B0C;
   color: #fff;
   border-radius: 20px;
   font-size: 12px;
   line-height: 17px;
   padding: 3px 15px;
}

.article__list01 .ttl {
   font-size: 15px;
   line-height: 21px;
   padding-top: 5px;
}

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

.article__list01 time {
   display: block;
   font-size: 13px;
   line-height: 20px;
   padding-top: 8px;
}

@media screen and (max-width: 767px) {
   .article__list01 {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 10px;
   }

   .article__list01 figure a {
      padding-top: 100%;
   }

   .article__list01 .text {
      padding: 5px 0 0;
   }

   .article__list01 .cat a {
      font-size: 10px;
      padding: 2px 15px;
   }

   .article__list01 .ttl {
      font-size: 12px;
      line-height: 17px;
   }

   .article__list01 .ttl a {
      max-height: 51px;
      -webkit-line-clamp: 3;
   }
}

/* -- -- */
.product__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px 20px;
}

.product__list .col a {
   display: block;
   height: 100%;
   border: 3px solid #ccc;
   padding: 20px;
   box-sizing: border-box;
}

.product__list .col a:hover .more {
   transform: translateX(5px);
}

.product__list .maker_logo {
   width: 130px;
   height: 40px;
   padding-bottom: 5px;
}

.product__list .maker_logo img {
   height: 100%;
   object-fit: cover;
}

.product__list .cat {
   display: inline-block;
   background-color: #533B0C;
   color: #fff;
   border-radius: 20px;
   font-size: 12px;
   line-height: 17px;
   padding: 3px 15px;
}

.product__list .ttl {
   font-size: 16px;
   line-height: 24px;
   border-bottom: 2px solid #ccc;
   padding: 10px 0 6px;
}

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

.product__list .txt {
   font-size: 13px;
   line-height: 20px;
   padding-top: 6px;
}

.product__list .txt span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.product__list .price {
   font-size: 13px;
   line-height: 20px;
   text-align: right;
   padding-top: 6px;
}

.product__list .price span {
   font-size: 20px;
}

.product__list .more {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   line-height: 20px;
   padding-top: 10px;
   transition: all 0.3s;
}

.product__list .more i {
   font-size: 18px;
   color: #C16C26;
}

.product__list figure {
   width: 100%;
   padding-top: 73.3%;
   position: relative;
}

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

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

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

   .product__list .col a {
      padding: 10px;
   }

   .product__list .ttl {
      font-size: 14px;
      line-height: 20px;
   }

   .product__list .txt {
      font-size: 12px;
   }

   .product__list .price {
      font-size: 12px;
   }

   .product__list .price span {
      font-size: 18px;
   }

   .product__list .more {
      font-size: 12px;
   }

   .product__list .more i {
      font-size: 15px;
   }
}

/* -- -- */
.sidebar {
   border: 2px solid #EB5407;
   border-radius: 6px;
   padding: 18px;
   box-sizing: border-box;
}

.sidebar h3 {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   border-bottom: 2px solid #EB5407;
   padding-bottom: 10px;
}

.sidebar h3 span {
   font-size: 12px;
}

.sidebar ul {
   line-height: 20px;
}

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

.sidebar ul li a {
   display: grid;
   grid-template-columns: 6px 1fr;
   gap: 10px;
}

.sidebar ul li a:before {
   content: '-';
}

.sidebar ul li a:hover,
.sidebar ul li a.current {
   color: #EB5407;
   opacity: 1;
}

/* -- -- */
.cpt-template {
   position: relative;
   padding-bottom: 80px;
}

.cpt-template .wrap {
   display: grid;
   grid-template-columns: 1fr 250px;
   align-items: flex-start;
   gap: 50px;
}

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

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

   .cpt-template .wrap {
      display: block;
   }

   .cpt-template .sidebar {
      margin-top: 50px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
#cpt-detail {
   position: relative;
   padding-bottom: 80px;
}

#cpt-detail .block {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 0 50px;
}

#cpt-detail .contents {
   width: calc(100% - 300px);
   order: 1;
}

#cpt-detail .sidebar {
   width: 250px;
   order: 2;
}

#cpt-detail .featured_img {
   text-align: center;
   padding-bottom: 12px;
}

#cpt-detail time {
   display: block;
   color: #333;
   font-weight: 500;
   font-size: 13px;
   line-height: 20px;
   border-bottom: 2px dotted #533B0C;
   padding: 10px 0;
}

#cpt-detail .cate {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 12px;
   line-height: 17px;
}

#cpt-detail .cate a {
   display: inline-block;
   background-color: #533B0C;
   color: #fff;
   border-radius: 30px;
   padding: 3px 15px 2px;
}

#cpt-detail .the_title {
   font-weight: 500;
   padding-top: 5px;
}

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

#cpt-detail .the_content>*:not(h2, h3) {
   margin: 0 50px;
}

#cpt-detail .the_content h2 {
   background-color: #EEE6DF;
   font-weight: 500;
   font-size: 24px;
   line-height: 36px;
   padding: 12px 20px 12px 22px;
   margin-top: 40px;
   margin-bottom: 20px;
   border-left: 8px solid #EB5407;
}

#cpt-detail .the_content h3 {
   font-weight: 500;
   font-size: 20px;
   line-height: 30px;
   border-bottom: 2px solid #EB5407;
   border-left: 5px solid #EB5407;
   padding: 0 10px 6px;
   margin: 20px 25px;
   box-sizing: border-box;
}

#cpt-detail .the_content h4 {
   font-weight: 500;
   font-size: 18px;
   letter-spacing: 0.1em;
   line-height: 26px;
   margin: 20px 0;
   border-left: 5px solid #EB5407;
}

#cpt-detail .the_content mark {
   background-color: #FFF6A8;
}

#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: center;
   gap: 10px;
   color: #fff;
   font-weight: 400;
   font-size: 15px;
   line-height: 28px;
   padding-top: 80px;
}

#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 .box-cta {
   width: 100%;
   max-width: 1150px;
   background-color: #F3F0EE;
   border: 4px solid #C16C26;
   padding: 36px;
   margin: 60px auto 0;
   box-sizing: border-box;
   order: 3;
}

#cpt-detail .box-cta h3 {
   max-width: 606px;
   background-color: #FFCC00;
   color: #533B0C;
   font-weight: 800;
   font-size: 38px;
   letter-spacing: 0.1em;
   line-height: 55px;
   border-radius: 10px;
   text-align: center;
   margin: 0 auto;
   padding: 5px 0 4px;
}

#cpt-detail .box-cta h3 small {
   font-size: 32px;
}

#cpt-detail .box-cta h4 {
   color: #2D1F03;
   padding-top: 20px;
}

#cpt-detail .box-cta ul {
   display: flex;
   gap: 10px;
   padding-top: 15px;
}

#cpt-detail .button {
   width: 100%;
   padding-top: 60px;
   order: 4;
}

#cpt-detail #ez-toc-container {
   background-color: #fff;
   padding: 0;
   margin-top: 30px;
}

#cpt-detail #ez-toc-container .ez-toc-title-container {
   display: flex;
   align-items: baseline;
   background-color: #EB5407;
   border: 1px solid #EB5407;
   color: #fff;
   padding: 13px 20px;
   box-sizing: border-box;
}

#cpt-detail #ez-toc-container .ez-toc-title-container .ez-toc-title {
   color: #fff;
   font-family: "Rubik", sans-serif;
   font-weight: 500;
   font-size: 20px;
   line-height: 30px;
   background: url("../img/common/toc-title-deco.png") no-repeat center left/20px auto;
   padding-left: 30px;
   float: none;
}

#cpt-detail #ez-toc-container .ez-toc-title-container a.ez-toc-toggle {
   color: #fff;
   margin: 0;
   padding: 0;
   float: none !important;
}

#cpt-detail #ez-toc-container .ez-toc-title-container a.ez-toc-toggle:hover {
   text-decoration: none;
}

#cpt-detail #ez-toc-container .ez-toc-title-container .ez-toc-js-icon-con {
   width: auto;
   height: auto;
   color: #fff;
   font-weight: 500;
   font-size: 13px;
   letter-spacing: 0.1em;
   line-height: 20px;
   border: 0;
   float: none;
   left: 0;
}

#cpt-detail #ez-toc-container .ez-toc-title-container .ez-toc-js-icon-con:before {
   content: '【非表示にする】';
}

#cpt-detail #ez-toc-container .ez-toc-title-container .ez-toc-js-icon-con span {
   display: none;
}

#cpt-detail #ez-toc-container nav {
   background-color: #F9F9F9;
   border: 2px solid #EB5407;
   padding: 16px 30px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list a {
   font-size: inherit;
}

#cpt-detail #ez-toc-container ul.ez-toc-list a:before {
   font-size: 15px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list>li {
   padding-bottom: 10px;
   padding-left: 15px;
   position: relative;
}

#cpt-detail #ez-toc-container ul.ez-toc-list>li:before {
   content: '\f0da';
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 16px;
   line-height: 1;
   position: absolute;
   top: 5px;
   left: 0;
   color: #000;
}

#cpt-detail #ez-toc-container ul.ez-toc-list>li+li {
   border-top: 1px dashed #EB5407;
   padding-top: 10px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list>li+li:before {
   top: 15px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list li {
   font-size: inherit;
}

#cpt-detail #ez-toc-container ul.ez-toc-list li a {
   color: #333;
}

#cpt-detail #ez-toc-container ul.ez-toc-list li a:before {
   color: #9A9696;
   margin-right: 5px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list ul {
   margin-left: 10px;
}

#cpt-detail #ez-toc-container ul.ez-toc-list ul li {
   padding-top: 5px;
}

@media screen and (max-width: 1023px) {
   #cpt-detail .block {
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
   }

   #cpt-detail .contents {
      width: 100%;
   }

   #cpt-detail .sidebar {
      order: 4;
      margin-top: 50px;
   }

   #cpt-detail .button {
      order: 3;
   }

   #cpt-detail .box-cta {
      order: 2;
   }

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

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

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

   #cpt-detail .sidebar {
      width: 100%;
   }

   #cpt-detail .cate {
      font-size: 10px;
      line-height: 13px;
   }

   #cpt-detail .cate a {
      padding: 3px 10px;
   }

   #cpt-detail .the_content>*:not(h2, h3) {
      margin: 0 20px;
   }

   #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 .box-cta {
      margin-top: 50px;
      padding: 16px;
   }

   #cpt-detail .box-cta h3 {
      font-size: 26px;
      line-height: 32px;
   }

   #cpt-detail .box-cta h3 small {
      font-size: 20px;
   }

   #cpt-detail .box-cta ul {
      flex-direction: column;
   }

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

   #cpt-detail #ez-toc-container nav {
      padding: 16px;
   }

   #cpt-detail #ez-toc-container ul.ez-toc-list {
      font-size: 14px;
      line-height: 20px;
   }

   #cpt-detail #ez-toc-container ul.ez-toc-list>li:before {
      top: 4px;
   }

   #cpt-detail #ez-toc-container ul.ez-toc-list>li+li:before {
      top: 14px;
   }
}

/* -- -- */
#cpt-detail .gallery-photo {
   padding: 30px 50px 0;
}

#cpt-detail .gallery-photo .gallery-slider .swiper-slide p {
   width: 100%;
   padding-top: 56.25%;
   position: relative;
}

#cpt-detail .gallery-photo .gallery-slider .swiper-slide p span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#cpt-detail .gallery-photo .gallery-slider .swiper-slide p span.img_short {
   background-size: cover !important;
}

#cpt-detail .gallery-photo .gallery-slider .swiper-slide p span.img_long {
   background-size: auto 100% !important;
}

#cpt-detail .gallery-photo .gallery-slider .swiper-slide p img {
   display: block;
   width: auto;
   height: auto;
   max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#cpt-detail .gallery-photo .gallery-thumbs {
   margin: 30px 0 0;
   padding: 0 45px;
   position: relative;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-slide {
   width: 25%;
   box-sizing: border-box;
   padding: 0 5px;
   cursor: pointer;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-slide p {
   width: 100%;
   padding-top: 56.25%;
   position: relative;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-slide p:after {
   content: '';
   width: 100%;
   height: 100%;
   background-color: rgba(51, 51, 51, 0.7);
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-slide.swiper-slide-thumb-active p:after {
   opacity: 0;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-slide p span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button {
   width: 30px;
   height: 100%;
   border: 0;
   overflow: hidden;
   text-indent: -999px;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button:before {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button.swiper-prev {
   left: 0;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button.swiper-prev:before {
   background: #333 url("../img/common/slider-prev.svg") no-repeat center left/100% auto;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button.swiper-next {
   right: 0;
}

#cpt-detail .gallery-photo .gallery-thumbs .swiper-button.swiper-next:before {
   background: #333 url("../img/common/slider-next.svg") no-repeat center right/100% auto;
}

@media screen and (max-width: 767px) {
   #cpt-detail .gallery-photo {
      padding: 20px 10px 0;
   }

   #cpt-detail .gallery-photo .gallery-thumbs {
      margin: 10px 0 0;
      padding: 0 25px;
   }

   #cpt-detail .gallery-photo .gallery-thumbs .swiper-slide {
      width: 50%;
   }

   #cpt-detail .gallery-photo .gallery-thumbs .swiper-button {
      width: 20px;
      height: 60px;
   }
}

/*=============================================
 * 選ばれる理由
*=============================================*/
#reasons {
   padding-bottom: 80px;
}

#reasons .box {
   display: grid;
   grid-template-columns: 400px 1fr;
   align-items: center;
   gap: 100px;
}

#reasons .box h3 span {
   display: block;
   padding-bottom: 5px;
}

#reasons .box .txt {
   font-size: 16px;
   line-height: 32px;
   padding-top: 30px;
}

#reasons .box.img-r {
   grid-template-columns: 1fr 400px;
}

#reasons .box.img-r figure {
   grid-area: 1/2;
}

#reasons .box.img-r .col {
   grid-area: 1/1;
}

#reasons hr {
   border-top: 2px solid #EB5407;
   margin: 50px 0;
}

@media screen and (max-width: 1023px) {
   #reasons .box {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   #reasons .box figure {
      max-width: 400px;
      margin: 0 auto;
   }

   #reasons .box.img-r {
      grid-template-columns: 1fr;
   }

   #reasons .box.img-r figure {
      grid-area: 1/1;
   }

   #reasons .box.img-r .col {
      grid-area: 2/1;
   }
}

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

   #reasons .box {
      gap: 20px;
   }

   #reasons .box .txt {
      font-size: 14px;
      line-height: 24px;
      padding-top: 20px;
   }

   #reasons hr {
      margin: 40px 0;
   }
}

/*=============================================
 * サービスの流れ
*=============================================*/
#flow {
   padding-bottom: 100px;
}

#flow .box {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 30px 60px;
   max-width: 1200px;
   margin: 0 auto;
}

#flow .box figure {
   width: 430px;
}

#flow .box .col {
   width: calc(100% - 490px);
}

#flow .box .sub {
   border-left: 5px solid;
   padding-left: 5px;
}

#flow .box .col h3 {
   margin-top: 5px;
   padding-left: 65px;
   position: relative;
}

#flow .box .col h3 span {
   font-weight: 700;
   font-size: 40px;
   letter-spacing: 0;
   line-height: 47px;
   position: absolute;
   top: 0;
   left: 0;
}

#flow .box .txt,
#flow .box .button {
   padding-top: 20px;
}

#flow .box .button a {
   background-color: #E6D6C4;
   box-shadow: 0px 5px #AF9B84;
   color: #533B0C;
}

#flow .box .button a:after {
   color: #533B0C;
}

#flow .box .button a:hover {
   box-shadow: none;
}

#flow .box dl {
   background-color: #FCF3EC;
   border-radius: 10px;
   padding: 20px 30px;
   margin-top: 20px;
}

#flow .box dl dt {
   font-weight: 700;
   color: #2D1F03;
}

#flow .box dl dd {
   line-height: 21px;
   padding-top: 15px;
}

#flow .box-cta {
   width: 100%;
   max-width: 1160px;
   background-color: #FBE4C2;
   padding: 30px 45px;
   margin: 30px auto 0;
   box-sizing: border-box;
}

#flow .box-cta h3 {
   color: #2D1F03;
}

#flow .box-cta ul {
   display: flex;
   gap: 10px;
   padding-top: 15px;
}

#flow hr {
   border-top: 2px solid #EB5407;
   margin: 30px 0 70px;
}

#flow hr:last-child {
   margin-bottom: 0;
}

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

   #flow .box .col,
   #flow .box figure {
      width: 100%;
   }

   #flow .box .col {
      padding-top: 0;
   }
}

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

   #flow .box .col h3 {
      padding-left: 45px;
   }

   #flow .box .col h3 span {
      font-size: 30px;
      line-height: 35px;
   }

   #flow .box-cta {
      padding: 20px;
   }

   #flow .box-cta ul {
      flex-direction: column;
      padding-top: 10px;
   }

   #flow .box dl {
      padding: 20px;
   }

   #flow hr {
      margin: 30px -10px 50px;
   }
}

/*=============================================
 * よくあるご質問
*=============================================*/
#faq {
   padding-bottom: 80px;
}

#faq h3 {
   border-left: 5px solid #EB5407;
   padding-left: 10px;
}

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

#faq hr {
   border-top: 2px solid #EB5407;
   margin: 40px 0;
}

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

/*=============================================
 * 会社案内
*=============================================*/
#staff__list .block {
   padding: 40px 0 60px;
}

#staff__list .block+.block {
   padding-top: 60px;
}

#staff__list .block .wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 30px 80px;
}

#staff__list .block figure {
   width: calc(100% - 580px);
   padding-top: 500px;
   position: relative;
}

#staff__list .block figure span {
   display: block;
   width: 100%;
   height: 100%;
   border: 4px solid #FFCC00;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   position: absolute;
   top: 0;
   left: 0;
   box-sizing: border-box;
	font-size: 0px;
}

#staff__list .block .databox {
   width: 500px;
}

#staff__list .block .name {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 5px;
   line-height: 32px;
   border-left: 5px solid #C16C26;
   padding-left: 5px;
}

#staff__list .block .name dd {
   font-weight: 500;
   font-size: 13px;
   line-height: 20px;
}

#staff__list .block .info {
   display: flex;
   flex-direction: column;
   gap: 15px;
   padding-top: 30px;
}

#staff__list .block .info dl {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   line-height: 20px;
}

#staff__list .block .info dl dt {
   width: 110px;
   color: #C16C26;
}

#staff__list .block .info dl dd {
   width: calc(100% - 120px);
}

#staff__list .block .message {
   padding-top: 15px;
}

#staff__list .block .message h4 {
   display: inline-block;
   border-radius: 50px;
   background-color: #C16C26;
   color: #fff;
   font-weight: 500;
   line-height: 20px;
   padding: 4px 20px;
}

#staff__list .block .message .textbox {
   padding-top: 8px;
}

#staff__list .block:nth-child(odd) {
   background-color: #FCF3EC;
}

#staff__list .block:nth-child(odd) .wrap {
   flex-direction: row-reverse;
}

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

   #staff__list .block figure,
   #staff__list .block .databox {
      width: 100%;
   }

   #staff__list .block figure {
      padding-top: 80.6%;
   }
}

@media screen and (max-width: 767px) {
   #staff__list .block {
      padding: 40px 0;
   }

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

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

   #staff__list .block .info dl dt {
      width: 90px;
   }

   #staff__list .block .info dl dd {
      width: calc(100% - 100px);
   }
}

/* -- --*/
#outline {
   font-size: 16px;
   line-height: 24px;
}

#outline .tb-style {
   padding-top: 30px;
}

#outline .gmap {
   height: 500px;
   border-radius: 20px;
   overflow: hidden;
   margin-top: 40px;
}

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

#outline .bnr-home {
   max-width: 330px;
   margin: 0 auto;
   padding-top: 40px;
}

#outline .bnr-home figcaption {
   font-weight: 700;
   padding-top: 10px;
}

#outline .bnr-home figcaption a {
   display: inline-flex;
   background: url("../img/common/nav-icon-1.png") no-repeat center left/22px auto;
   padding-left: 30px;
}

@media screen and (max-width: 767px) {
   #outline {
      font-size: 13px;
   }

   #outline .gmap {
      height: 300px;
   }
}

/*=============================================
 * 工事のこだわり
*=============================================*/
#commitment__sec1 {
   padding-bottom: 60px;
}

#commitment__sec1 .txt {
   font-weight: 500;
   padding-top: 30px;
}

#commitment__sec1 .box {
   background-color: #fff;
   border: 2px solid #EB5407;
   border-radius: 20px;
   margin-top: 30px;
   padding: 38px 48px;
}

#commitment__sec1 .box p {
   padding: 10px 0 15px;
}

#commitment__sec1 .box ul {
   border-top: 1px dashed #EB5407;
   padding-top: 15px;
}

@media screen and (max-width: 767px) {
   #commitment__sec1 .txt {
      padding-top: 20px;
   }

   #commitment__sec1 .box {
      padding: 18px;
   }
}

/* -- -- */
#commitment__sec2 .desc {
   font-weight: 500;
   padding: 30px 0;
}

#commitment__sec2 .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
}

#commitment__sec2 .box .col {
   padding-left: 60px;
}

#commitment__sec2 .box .txt {
   font-weight: 500;
   padding-top: 30px;
}

#commitment__sec2 .box.img-r figure {
   grid-area: 1/2;
}

#commitment__sec2 .box.img-r .col {
   grid-area: 1/1;
   padding-right: 60px;
   padding-left: 0;
}

#commitment__sec2 hr {
   border-top: 2px solid #EB5407;
   margin: 50px 0;
}

@media screen and (max-width: 1023px) {
   #commitment__sec2 .box {
      grid-template-columns: 1fr;
      gap: 50px;
   }

   #commitment__sec2 .box .col {
      padding-left: 0;
   }

   #commitment__sec2 .box.img-r figure {
      grid-area: 1/1;
   }

   #commitment__sec2 .box.img-r .col {
      grid-area: 2/1;
      padding-right: 0;
   }
}

@media screen and (max-width: 767px) {
   #commitment__sec2 h2 .h-22 {
      font-size: 16px;
      line-height: 24px;
   }

   #commitment__sec2 h2 .h-46 {
      font-size: 33px;
      line-height: 48px;
   }

   #commitment__sec2 h2 .h-40 {
      font-size: 28px;
      line-height: 40px;
   }

   #commitment__sec2 .desc {
      text-align: justify;
   }

   #commitment__sec2 .box {
      gap: 30px;
   }

   #commitment__sec2 .box .txt {
      font-size: 14px;
      line-height: 24px;
      padding-top: 15px;
   }

   #commitment__sec2 hr {
      margin: 30px 0;
   }
}

/* -- -- */
#commitment__sec3 .block-1 .box {
   display: grid;
   grid-template-columns: 1fr 400px;
   align-items: center;
   gap: 100px;
}

#commitment__sec3 .block-1 h3 span {
   display: block;
}

#commitment__sec3 .block-1 .txt {
   font-size: 16px;
   line-height: 32px;
   padding-top: 30px;
}

#commitment__sec3 .block-1 hr {
   border-top: 2px solid #EB5407;
   margin: 50px 0;
}

#commitment__sec3 .block-1 hr:last-child {
   margin-bottom: 0;
}

#commitment__sec3 .block-2 {
   padding-top: 60px;
}

#commitment__sec3 .block-2 .txt {
   font-weight: 500;
   padding-top: 30px;
}

#commitment__sec3 .block-2 .box {
   background-color: #fff;
   border: 2px solid #EB5407;
   border-radius: 20px;
   margin-top: 30px;
   padding: 38px 48px;
}

#commitment__sec3 .block-2 .box h4 {
   padding-bottom: 10px;
}

#commitment__sec3 .block-2 .box ul {
   border-top: 1px dashed #EB5407;
   padding-top: 10px;
}

@media screen and (max-width: 1023px) {
   #commitment__sec3 .block-1 .box {
      grid-template-columns: 1fr 250px;
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   #commitment__sec3 .block-1 .box {
      grid-template-columns: 1fr;
   }

   #commitment__sec3 .block-1 .box figure {
      max-width: 400px;
      margin: 0 auto;
   }

   #commitment__sec3 .block-1 .box .txt {
      font-size: 14px;
      line-height: 24px;
      padding-top: 15px;
   }

   #commitment__sec3 .block-1 hr {
      margin: 30px 0;
   }

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

   #commitment__sec3 .block-2 h3 {
      font-size: 30px;
      line-height: 42px;
   }

   #commitment__sec3 .block-2 .txt {
      padding-top: 20px;
   }

   #commitment__sec3 .block-2 .box {
      padding: 18px;
   }
}

/*=============================================
 * エコキュート保証
*=============================================*/
#warranty .txt {
   font-weight: 500;
   padding: 30px 0 60px;
}

#warranty .row h3 {
   border-left: 5px solid #EB5407;
   margin-bottom: 30px;
   padding-left: 10px;
}

#warranty .row .box {
   display: grid;
   grid-template-columns: 285px 1fr;
   align-items: center;
   gap: 25px;
}

#warranty .row .box figure {
   border: 2px solid #ccc;
   border-radius: 6px;
   overflow: hidden;
}

#warranty .row hr {
   border-top: 2px dashed #ccc;
   margin: 30px 0;
}

@media screen and (max-width: 767px) {
   #warranty h2 {
      font-size: 30px;
      line-height: 42px;
   }

   #warranty .txt {
      padding: 20px 0 40px;
   }

   #warranty .row .box {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   #warranty .row .box figure {
      max-width: 285px;
      margin: 0 auto;
   }
}

/*=============================================
 * 商品一覧
*=============================================*/
#product .wrap {
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 60px;
}

#product .sidebar-product {
   width: 240px;
}

#product .sidebar-product .box {
   padding-bottom: 30px;
}

#product .sidebar-product h3 {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   padding-left: 27px;
   position: relative;
}

#product .sidebar-product h3:before {
   content: '';
   width: 22px;
   height: 22px;
   background: #533B0C;
   -webkit-mask: url("../img/common/icon-search.png") no-repeat center/100% auto;
   mask: url("../img/common/icon-search.png") no-repeat center/100% auto;
   position: absolute;
   top: 0;
   left: 0;
}

#product .sidebar-product ul li {
   padding-top: 10px;
}

#product .sidebar-product ul a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 60px;
   border: 2px solid #ccc;
   box-sizing: border-box;
   border-radius: 6px;
   text-align: center;
   font-weight: 500;
   font-size: 18px;
   line-height: 23px;
}

#product .sidebar-product ul a span {
   font-size: 14px;
   color: #aaa;
}

#product .sidebar-product ul a img {
   max-height: 100%;
   mix-blend-mode: multiply;
}

#product .sidebar-product ul a.current,
#product .sidebar-product ul a:hover {
   background-color: #FCF3EC;
   opacity: 1;
}

#product .contents {
   width: calc(100% - 300px);
}

@media screen and (max-width: 767px) {
   #product .wrap {
      flex-direction: column;
      align-items: center;
      gap: 50px;
   }

   #product .contents {
      width: 100%;
   }
}

/* -- -- */
#product__details .product-info {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 50px;
}

#product__details .product-info .gallery-photo {
   width: 50%;
   position: relative;
}

#product__details .product-info .col-r {
   flex: 1 0 calc(50% - 50px);
   padding: 10px 0 0;
}

#product__details .product-info .txt {
   font-size: 16px;
   line-height: 24px;
   padding-top: 20px;
}

#product__details .product-info .list {
   background-color: #FEF1DF;
   border: 2px solid #DC8153;
   margin-top: 20px;
   padding: 22px 48px;
}

#product__details .product-info .list ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding-top: 10px;
}

#product__details .gallery-slider .swiper-slide p {
   width: 100%;
   padding-top: 73.3%;
   position: relative;
}

#product__details .gallery-slider .swiper-slide p img {
   max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#product__details .gallery-thumbs {
   padding-top: 20px;
}

#product__details .gallery-thumbs .swiper-wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   width: 100%;
   transform: translate3d(0px, 0px, 0px) !important;
}

#product__details .gallery-thumbs .swiper-slide {
   cursor: pointer;
}

#product__details .gallery-thumbs .swiper-slide p {
   width: 100%;
   padding-top: 72.9%;
   position: relative;
}

#product__details .gallery-thumbs .swiper-slide p:after {
   content: '';
   width: 100%;
   height: 100%;
   background-color: rgba(235, 84, 7, 0.4);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   transition: all 0.3s;
}

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

#product__details .gallery-thumbs .swiper-slide-thumb-active p:after,
#product__details .gallery-thumbs .swiper-slide:hover p:after {
   opacity: 1;
}

#product__details .cate {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 12px;
   line-height: 16px;
}

#product__details .cate a {
   display: inline-block;
   background-color: #533B0C;
   color: #fff;
   border-radius: 30px;
   padding: 3px 15px;
}

#product__details .maker_logo {
   width: 130px;
   height: 40px;
   padding: 5px 0;
}

#product__details .maker_logo img {
   max-height: 100%;
}

#product__details .the_title {
   font-weight: 500;
}

#product__details .product-info .sub {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
   padding-top: 10px;
}

#product__details .product-info .price-group {
   display: flex;
   align-items: center;
   gap: 20px;
}

#product__details .product-info .price-1 {
   max-width: max-content;
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
   margin-top: 18px;
   position: relative;
}

#product__details .product-info .price-1:before {
   content: '';
   width: 100%;
   border-top: 2px solid #000;
   position: absolute;
   top: 50%;
   left: 0;
}

#product__details .product-info .price-1 span {
   font-size: 20px;
}

#product__details .product-info .price-2 {
   font-weight: 600;
   font-size: 16px;
}

#product__details .product-info .price-2 .price_number {
   padding: 0 5px;
}

#product__details .product-info .price-2 .unit {
   display: inline-block;
   line-height: 1;
   text-align: center;
}

#product__details .product-info .price-2 .unit small {
   font-size: 12px;
}

#product__details .product-info .percent {
   background: linear-gradient(to bottom, #4E63D2, #8C40B8, #AE35AD, #B233AC, #E32E67, #FA822A, #FECE6C);
   width: 90px;
   height: 90px;
   border-radius: 50%;
   text-align: center;
   color: #fff;
   line-height: 1.2;
   box-sizing: border-box;
   padding-top: 14px;
}

#product__details .product-info .percent span {
   line-height: inherit;
}

#product__details .replacement-cost {
   max-width: 1100px;
   margin: 0 auto;
   padding-top: 60px;
}

#product__details .replacement-cost h2 {
   background-color: #EBE9E1;
   border-radius: 6px;
   font-weight: 500;
   letter-spacing: 0.05em;
   padding: 13px 50px 12px;
}

#product__details .replacement-cost .box {
   max-width: 1000px;
   margin: 0 auto;
   border-bottom: 1px dashed #DCDBD5;
   padding: 30px 0 20px;
}

#product__details .replacement-cost .box h3 {
   font-weight: 500;
   position: relative;
   padding-left: 20px;
}

#product__details .replacement-cost .box h3:before {
   content: '';
   width: 0;
   height: 0;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent #DE6F1A;
   border-style: solid;
   position: absolute;
   top: 5px;
   left: 0;
}

#product__details .replacement-cost .box .txt {
   font-size: 14px;
   line-height: 28px;
   padding-top: 20px;
}

#product__details .replacement-cost .box .price {
   padding-top: 20px;
}

#product__details .box-cta {
   width: 100%;
   max-width: 1150px;
   background-color: #F3F0EE;
   border: 4px solid #C16C26;
   padding: 36px;
   margin: 60px auto 0;
   box-sizing: border-box;
}

#product__details .box-cta h3 {
   max-width: 606px;
   background-color: #FFCC00;
   color: #533B0C;
   font-weight: 800;
   font-size: 38px;
   letter-spacing: 0.1em;
   line-height: 55px;
   border-radius: 10px;
   text-align: center;
   margin: 0 auto;
   padding: 5px 0 4px;
}

#product__details .box-cta h3 small {
   font-size: 32px;
}

#product__details .box-cta h4 {
   color: #2D1F03;
   padding-top: 20px;
}

#product__details .box-cta ul {
   display: flex;
   gap: 10px;
   padding-top: 15px;
}

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

@media screen and (max-width: 1023px) {
   #product__details .product-info {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 30px;
   }

   #product__details .product-info .gallery-photo {
      width: 100%;
   }

   #product__details .product-info .col-r {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #product__details .product-info .sub {
      font-size: 14px;
   }

   #product__details .product-info .txt {
      font-size: 14px;
   }

   #product__details .product-info .list {
      padding: 17px;
   }

   #product__details .product-info .list h3 .h-28 {
      font-size: 22px;
   }

   #product__details .product-info .list ul {
      grid-template-columns: repeat(2, 1fr);
   }

   #product__details .product-info .percent {
      width: 75px;
      height: 75px;
   }

   #product__details .replacement-cost {
      padding-top: 40px;
   }

   #product__details .replacement-cost .box h3:before {
      top: 0;
   }

   #product__details .replacement-cost .box .txt {
      font-size: 13px;
      line-height: 24px;
   }

   #product__details .box-cta {
      margin-top: 40px;
      padding: 16px;
   }

   #product__details .box-cta h3 {
      font-size: 26px;
      line-height: 32px;
   }

   #product__details .box-cta h3 small {
      font-size: 20px;
   }

   #product__details .box-cta ul {
      flex-direction: column;
   }

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