/* @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap'); */

.l-content {
   padding-top: 0 !important;
   margin-bottom: 0;
}

/* text */
.open-sans {
   font-family: var(--font-josefin-sans);
}

.font-bold {
   font-weight: 700;
}

.font-xl {
   font-size: 1.5em;
}

.text-yellow-2 {
   color: var(--yellow-2) !important;
}

.text-yellow-3 {
   color: var(--yellow-3);
}

.text-grey {
   color: var(--grey);
}

.text-left {
   text-align: left !important;
}

.font-sm {
   font-size: 0.8em;
}

.text-red {
   color: var(--red);
}

/* layout */
.sec-container {
   padding: 100px 5%;
}

@media screen and (max-width:768px) {
   .sec-container {
      padding: 70px 7%;
   }
}

/* title */
.sec-title {
   font-weight: 500;
   margin-bottom: 4rem !important;
}

.sec-title h2 {
   font-family: var(--font-josefin-sans);
   font-size: 3rem;
   letter-spacing: .05em;
   padding-bottom: .4em;
   margin-bottom: .4em !important;
   position: relative !important;
   z-index: inherit;
}

.sec-title h2::after {
   content: "";
   display: inline-block;
   width: 1em;
   height: 4px;
   background: var(--yellow);
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
}

.sec-title p {
   color: var(--grey);
   font-size: 1.2rem;
}

.sec-title.color2 h2::after {
   background: var(--yellow-4);
}

.sec-title.color2 p {
   color: var(--grey-3);
}

.title-type2 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.6em;
}

.title-type2::before,
.title-type2::after {
   content: "";
   display: inline-block;
   height: 3px;
   width: 1.5em;
   background: var(--yellow-2);
   flex-shrink: 0;
   position: static !important;
}

.title-type2.grey::before,
.title-type2.grey::after {
   background: var(--grey-3);
}

@media screen and (max-width:768px) {
   .sec-title {
      margin-bottom: 3rem !important;
   }

   .sec-title h2 {
      font-size: 2.2rem;
      padding-bottom: .3em;
   }

   .sec-title p {
      font-size: 1rem;
   }
}

/* mv */
.main-visual {
   position: relative;
   overflow: hidden;
   margin-bottom: 0;
}

.main-visual__link {
   display: block;
   background: #eee;
}

.main-visual__link:hover .main-visual__img {
   opacity: .9;
}

.main-visual__img {
   display: block;
   width: 100%;
   transition: .2s;
   margin-bottom: 0;
}


.main-banner {
   display: none;
   background: transparent;
   width: 100%;
   /* aspect-ratio: 15/1; */
   overflow: hidden;
   position: relative;
   margin-bottom: 0;
}

.main-banner__inner {
   width: calc(100% / 3 + 25px);
   height: 100%;
   object-fit: cover;
   position: absolute;
   bottom: 0;


   &:nth-child(1) {
      left: 0;
      clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
      z-index: 3;

   }

   &:nth-child(2) {
      clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
   }

   &:nth-child(3) {
      right: 0;
      clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
      z-index: 1;
   }

   a {
      display: block;
      height: 100%;

      &:hover {
         opacity: .9;
      }
   }

   img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   picture {
      display: block;
      height: 100%;
   }
}


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

   .main-banner {
      aspect-ratio: initial;
      aspect-ratio: 261/92;
   }

   .main-banner__inner {
      height: auto;
      width: calc(50% + 8%);

      &:nth-child(3) {
         display: none;
      }

      &:nth-child(1) {
         clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
         transform: translateX(0);
         aspect-ratio: 217/132;
         /* margin-left: -5px; */
      }

      &:nth-child(2) {
         clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
         left: auto;
         right: 0;
         transform: translateX(0);
         aspect-ratio: 447/274;
         /* margin-right: -5px; */
      }

      a {
         &:hover {
            opacity: 1;
         }
      }
   }
}

/* footer banner */
.footer-banner {
   background: #000;
   width: 100%;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 200;
   overflow: hidden;
   transform: translateY(100%);
   transition: .2s;
   padding: 8px 0;
   padding-right: 0;

   &.hide {
      transform: translateY(100%);
   }

   &.show {
      transform: translateY(0);
   }
}

.footer-banner__pc {
   display: grid;
   align-items: center;
   grid-template-columns: repeat(3, 1fr);

}

.footer-banner__sp {
   position: relative;
   z-index: 1;
   display: none;
}

.footer-banner__inner {

   &:nth-child(2) {
      clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
      transform: translateX(5%);
   }

   &:nth-child(3) {
      clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
   }

   a {
      display: block;

      &:hover {
         opacity: .9;
      }
   }

   img {
      object-fit: cover;
   }
}

@media screen and (max-width:600px) {
   .footer-banner {

      padding: 0;
   }

   .footer-banner__sp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
   }

   .footer-banner__pc {
      display: none;
   }


   .footer-banner__inner {

      &:nth-child(1) {
         width: 100%;
      }

      &:nth-child(2) {
         width: 58%;
         clip-path: polygon(0% 0, 100% 0, 96% 100%, 0 100%);
      }

      &:nth-child(3) {
         width: 38%;
      }
   }
}

/* banner01 */
.banner-full .wp-block-group__inner-container {
   max-width: 100%;
}

/* こんな人におすすめ */
.problem-box {
   background: no-repeat center/cover;
   background-image: url("https://humbol-personalgym.com/wp-content/uploads/2024/09/problem01_new.jpg"), url("https://humbol-personalgym.com/wp-content/uploads/2024/09/problem02_new.jpg");
   background-position: left, right;
   background-size: 35%;
}

.problem-box .wp-block-list {
   list-style: none;
   width: 70%;
   margin: 0 auto;
   background: #fff;
   clip-path: polygon(10% -1%, 100% -1%, 90% 101%, 0% 101%);
   padding: 2em 0 2em 10%;
}

ul.wp-block-list li {
   line-height: 2;
   padding-left: 22px;
   text-indent: -22px;
}

ul.wp-block-list li::marker {
   content: "";
}

ul.wp-block-list li::before {
   content: "";
   display: inline-block;
   width: 10px;
   aspect-ratio: 1/1;
   border-bottom: 2px solid var(--grey-3);
   border-right: 2px solid var(--grey-3);
   transform: rotate(-45deg);
   margin-right: 1em;
}

@media screen and (max-width:1000px) {
   .problem-box {
      padding-bottom: 40%;
      background-size: 50% auto;
      background-position: left bottom, right bottom;
   }

   .problem-box .wp-block-list {
      font-size: 14px;
      width: 100%;
      clip-path: initial;
      padding: 2em 5%;
   }
}

/* garally */
.garally-wrapper .wp-block-group__inner-container {
   max-width: 100%;
}

.wp-block-gallery.wp-block-gallery-1 {
   gap: 0 !important;
}

.swiper-garally {
   margin-bottom: 0;
}

.swiper-garally .swiper-wrapper {
   transition-timing-function: linear;
}

.swiper-garally img {
   aspect-ratio: 3/2;
   object-fit: cover;
}



/* features */
.sec-features {
   background: url("http://humbol-personalgym.com/wp-content/uploads/2024/08/top-bg.png") no-repeat bottom/cover;
}

.features-item {
   background: #fff;
   border-radius: 10px;
   box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
   background-blend-mode: multiply;
   counter-increment: features;
   position: relative;
   padding: 1.5rem;
   margin-top: 4rem;
}

.features-item::before {
   content: counter(features, decimal-leading-zero);
   display: inline-block;
   font-family: var(--font-josefin-sans);
   color: var(--yellow-3);
   text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
   font-size: 100px;
   font-weight: 700;
   line-height: 0;
   position: absolute;
   top: 5%;
}

.features-item:nth-child(odd) {
   margin-left: 50px;
}

.features-item:nth-child(odd)::before {
   left: 0;
   transform: translateX(-50%);
}

.features-item:nth-child(even) {
   margin-right: 50px;
}

.features-item:nth-child(even)::before {
   right: 0;
   transform: translateX(50%);
}

.features-item h3 {
   line-height: 1.8;
}

.features-banner {
   transform: translateY(20%);
}

@media screen and (max-width:768px) {
   .features-item::before {
      font-size: 70px;
      top: .1em;
   }

   .features-item .wp-block-heading {
      margin-bottom: 1em;
   }
}

/* campaign */
#campaign {
   width: 100%;
   max-width: 750px !important;
   margin: 0 auto;
   left: auto;
   overflow: visible;
}

.campaign-ttl {
   font-size: 20px;
   margin-bottom: 15px !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.campaign-ttl__inner {
   display: flex;
   align-items: center;
   font-weight: bold;
   font-family: var(--font-josefin-sans);
   position: relative;
   padding: 3px;
   margin-right: 1em;
}

.campaign-ttl__inner::before,
.campaign-ttl__inner span::before {
   content: "";
   display: inline-block;
   background: #c5a20a;
   transform: skew(-12deg);
   position: absolute;
   inset: 0;
   z-index: -1;
}

.campaign-ttl__inner span {
   color: #c5a20a;
   position: relative;
   display: inline-block;
   line-height: 1;
   padding: 5px 10px;
}

.campaign-ttl__inner span:nth-child(2) {
   color: #fff;
}

.campaign-ttl__inner span:nth-child(1)::before {
   background: #fff;
}

.campaign-item ol {
   list-style: none;
   padding-left: 0;
}

.campaign-item ol li {
   line-height: 1.15;
   counter-increment: list;
   display: flex;
   align-items: center;
   gap: 1em;
}

.campaign-item ol span {
   vertical-align: baseline;
}

.campaign-item ol li:not(:first-child) {
   margin-top: 1.5em;
   margin-bottom: 0;
}

.campaign-item ol li::before {
   content: counter(list);
   display: inline-block;
   width: 24px;
   line-height: 24px;
   text-align: center;
   border-radius: 50%;
   color: #fff;
   background: #c5a20a;
   flex-shrink: 0;
}


@media screen and (max-width:768px) {
   .campaign-ttl {
      flex-wrap: wrap;
      text-align: center;
      row-gap: 8px;
   }

   .campaign-ttl__ttl {
      width: 100%;
   }

   .campaign-item img {
      max-width: 200px;
   }

}

/* before-after */
.before-after {
   display: none;
   opacity: 0;
   transition: opacity .2s;
}

.before-after.visible {
   display: block;
   opacity: 1;
}

.before-after__head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--grey-3);
   margin-bottom: 20px;
}

.before-after__txt {
   margin-bottom: 20px;
}


.before-after__head h3 {
   margin: 0;
}

.before-after__head .font-xl {
   display: inline-block;
   margin: 0 5px;
}

.before-after__head p {
   color: #fff;
   background: var(--yellow);
   clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
   padding: 0 2em 5px;
   white-space: nowrap;
}

.before-after__inner {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

.before-after__table {
   grid-column: span 2;
   background: #fff;
}

.before-after__table tr {
   border-bottom: 1px solid var(--grey-3);
}

.before-after__tabl tr>:first-child:not(.-no1) {
   max-width: var(--swl-cell1-width, auto);
   min-width: var(--swl-cell1-width, var(--swl-minwidth-cell, 0)) !important;
   width: var(--swl-cell1-width, auto);
}

.before-after__table th,
.before-after__table td {
   font-weight: 700;
   padding: 0.8rem;
   text-align: center;
   border: none;
   background: #fff;
}

.before-after__table .text-weight:first-of-type,
.before-after__table .text-bodyFat:first-of-type,
.before-after__table .text-waist:first-of-type {
   font-size: 20px;
}

.before-after__table .text-weight:last-of-type,
.before-after__table .text-bodyFat:last-of-type,
.before-after__table .text-waist:last-of-type {
   font-size: 24px;
}

.before-after__ttl {
   font-family: var(--font-josefin-sans);
   font-weight: 700;
   font-size: 1.5em;
}

.before-after__ttl th:nth-child(1) {
   color: var(--grey-3);
}

.before-after__change {
   background: url("https://humbol-personalgym.com/wp-content/uploads/2024/08/arrow.png") no-repeat center/contain !important;
   font-family: var(--font-josefin-sans);
   color: var(--yellow);
   font-weight: 700;
   font-size: 2em;
}

.before-after__before,
.before-after__after {
   font-weight: 700;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   font-family: var(--font-josefin-sans);
   text-align: center;
   font-weight: 700;
}

.before-after__before {
   font-size: 24px;
   color: var(--grey-3);
   position: relative;
}

.before-after__before::after {
   content: "";
   display: inline-block;
   border-left: 16px solid var(--yellow);
   border-bottom: 16px solid transparent;
   border-top: 16px solid transparent;
   position: absolute;
   right: -8px;
   top: 50%;
   transform: translateY(-50%);
}

.before-after__after {
   font-size: 32px;
   grid-row: span 2;
}

.before-after__after img {
   height: 100%;
   object-fit: contain;
   vertical-align: center;
}

.before-after__comment {
   grid-column: span 3;
   display: flex;
   align-items: center;
   gap: 20px;
   margin-top: 1em;
}

.before-after__comment img {
   width: 160px;
   aspect-ratio: 173/214;
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
}

.before-after__comment h4 {
   color: var(--grey-3);
   font-size: 1.2rem;
   margin-bottom: 5px;
}

.comment__txt {
   border: 1px solid #000;
   padding: 1em;
   position: relative;
}

.comment__txt::before {
   content: "";
   display: inline-block;
   width: 12px;
   aspect-ratio: 1/1;
   background: #fff;
   border-top: 1px solid #000;
   border-left: 1px solid #000;
   transform: rotate(-45deg);
   position: absolute;
   top: 10%;
   left: -7px;
}

#show-more {}

@media screen and (max-width: 960px) {
   .before-after {
      background: #f2f2f2;
      padding: 1.5em;
   }

   .before-after__head h3 {
      font-size: 14px;
   }

   .before-after__head p {
      font-size: 12px;
   }

   .before-after__before,
   .before-after__after {
      flex-direction: column-reverse;
      grid-column: span 2;
   }

   .before-after__before img,
   .before-after__after img {
      height: 200px;
      width: 100%;
      object-fit: contain;
      object-position: center;
   }

   .before-after__before {

      order: 1;
   }

   .before-after__before::after {
      border-width: 12px;
      right: -6px;
   }

   .before-after__after {
      order: 2;
      grid-row: span 1;
   }

   .before-after__table {
      order: 3;
      grid-column: span 4;
   }

   .before-after__table tr {
      border: none;

   }

   .before-after__table th {
      display: none;
   }

   .before-after__table td {
      background: #f2f2f2;
      border-bottom: 1px solid var(--grey-3);
      position: relative;
      padding-top: 2em;
   }

   td.before-after__change {
      background: url("https://humbol-personalgym.com/wp-content/uploads/2024/08/arrow-wh.png") #f2f2f2 no-repeat bottom/contain !important;
      font-size: 1.5rem;
      border: none;
   }

   .text-waist::before,
   .text-bodyFat::before,
   .text-weight::before {
      color: var(--grey-2);
      font-size: 14px;
      position: absolute;
      top: 1em;
      left: 0;
   }

   .text-waist::before {
      content: "ウェスト";
   }

   .text-bodyFat::before {
      content: "体脂肪率";
   }

   .text-weight::before {
      content: "体重";
   }

   .before-after__comment {
      order: 4;
      grid-column: span 4;
   }

   .comment {
      margin-top: 1em;
   }

   .comment__txt {
      overflow: hidden;
      background: #fff;
   }

   .comment__txt::before {
      display: none;
   }

   .comment__txt .space {
      /* display: inline-block;
      float: right;
      height: 8em; */
   }

   .comment__txt img {
      width: 120px;
      float: right;
      clear: both;
      margin: 10px;
   }

   .clear-after {
      display: none;
      /* 交差を検出するため最初はfloat解除しない */
      clear: both;
      height: 0;
   }

   .clear {
      clear: both;
      /* 後続要素のレイアウト崩れを防止する */
   }
}



/* pricing */
.wp-block-table table {
   border: none !important;
}

/* .pricing {
   width: 100%;
} */

.wp-block-table th,
.wp-block-table td {
   padding: 0.8em;
   text-align: center;
   border: 5px solid var(--main);
}

.wp-block-table td .swl-inline-color {
   display: inline-block;
   text-align: left;
}


/* .pricing th {
   color: #fff;
}

.pricing :not(.pricing__head) th {
   background: var(--yellow-2);
   width: 10em;
}

.pricing__head th {
   background: var(--grey-2);
}

.pricing th.empty {
   background: var(--main);
}

.pricing td {
   color: var(--main);
   background: #fff;
   font-weight: bold;
} */

.wp-block-table .swl-cell-bg {
   position: absolute;
   width: 100%;
   inset: 0;
   z-index: -1;
}

.campaign {
   font-weight: 700;
   display: flex;
   align-items: end;
   justify-content: center;
   gap: 10px;
}

.campaign__txt {
   color: var(--red);
   display: flex;
   align-items: end;
}

.campaign__zero {
   font-size: 2em;
   margin: 0 5px;
   display: inline-block;
   line-height: 1;
}

.campaign__arrow {
   display: inline-block;
   border-left: 8px solid var(--red);
   border-bottom: 8px solid transparent;
   border-top: 8px solid transparent;
   transform: translateY(-4px);

}

@media screen and (max-width: 768px) {
   /* .scroll-x {
      overflow-x: scroll;
   }

   .pricing {
      max-width: 700px !important;
      width: 700px !important;
      margin: 0 auto;
   } */

   .wp-block-table th,
   .wp-block-table td {
      font-size: 14px;
      padding: .8em;
   }
}

/* voice */
.sec-voice {
   background: url("https://humbol-personalgym.com/wp-content/uploads/2024/09/voice-bg.jpg") no-repeat center/cover;
   background-color: var(--main);
   background-blend-mode: multiply;
   padding-bottom: 150px;
}

.strong-view.wpmtst-unstyled .wpmtst-testimonial-inner {
   text-align: center;
   background: #fff;
   padding: 1.5em;
   display: flex !important;
   flex-direction: column;
   gap: 10px;
}

.wpmtst-testimonial-heading {
   font-size: 16px !important;
   margin-bottom: 0 !important;
}

.wpmtst-testimonial-image {
   margin-bottom: 10px;
}

/* swiper */
.swiper-button-prev,
.swiper-button-next {
   color: #333;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   transition: .2s;
   border: 1px solid transparent;
}

.swiper-button-prev {
   left: -5%;
}

.swiper-button-next {
   right: -5%;
}



.swiper-button-prev::after,
.swiper-button-next::after {
   border-width: 5px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
   background: rgba(255, 255, 255, .8);
   border: 1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
   .swiper-slide {
      width: 70%;
      /* Adjusted to show 1.5 slides */
   }

   .swiper-button-prev,
   .swiper-button-next {
      padding: 0;
   }

   .swiper-button-prev {
      left: -7%;
   }

   .swiper-button-next {
      right: -7%;
   }

   .swiper-button-prev::after {
      right: 0 !important;
   }
}

/* banner */
.sec-banner {
   height: 120px;
}

.sec-banner figure {
   transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
   .sec-banner {
      height: auto;
   }

   .sec-banner figure {
      transform: translateY(0);
   }
}

/* trainers */
.swiper-trainers {
   position: relative;
}

.trainer-item {
   color: #fff;
}

.swiper-trainers .swiper-button-prev,
.swiper-trainers .swiper-button-next {
   color: #fff;
}

.trainer-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.trainer-head__img {
   width: 35%;
   aspect-ratio: 1/1;
   object-fit: cover;
}

.trainer-head__info {
   width: 60%;
}

.trainer-head__name {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-bottom: 1em !important;
}

.trainer-head__rome {
   color: var(--yellow-3);
   font-size: 0.6em;
}

.trainer-head__sns {
   display: inline-block;
   width: 32px;
}

.trainer-head__sns:hover {
   opacity: .8;
}

.trainer-thumb {
   display: flex;
   gap: 10px;
   margin-top: 4rem;
}

.trainer-thumb__img {
   width: 100px;
   aspect-ratio: 1/1;
   background: no-repeat center/cover;
   cursor: pointer;
}

.trainer-thumb__img:hover {
   filter: brightness(.9);
}

.trainer-body {
   margin-top: 4rem;
}

.trainer-body a {
   color: var(--yellow-3) !important;
}

.trainer-body h4,
#more-content h4 {
   margin-bottom: 0.5em;
   margin-top: 1.5em !important;
}

#toggle-button {
   color: #fff;
   margin: 3em auto 0;
   background: transparent;
   border: none;
   align-items: center;
   position: relative;
}

#toggle-button::after {
   content: "";
   display: inline-block;
   width: 10px;
   aspect-ratio: 1/1;
   border-left: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(-45deg);
   transition: .2;
   position: absolute;
   left: calc(50% - 5%);
   bottom: -10px;
}

#toggle-button:hover {
   opacity: .9;
}

#toggle-button.close::after {
   transform: rotate(135deg);
}

.post_content h2 {
   position: inherit;
}

@media screen and (max-width: 768px) {
   .trainer-head {
      flex-direction: column-reverse;
      gap: 15px;

      margin: 0 auto;

   }

   .trainer-head__img,
   .trainer-head__info {
      width: 100%;
   }

   .trainer-head__info {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 15px;
   }

   .trainer-thumb {
      order: 1;
      margin-top: 0;
   }

   .post_content h3.trainer-head__name {
      margin: 0 auto !important;
      font-size: 24px;
   }

   .trainer-item {
      justify-content: center;
      gap: 10px;
      width: 85%;
      max-width: 500px;
   }

   .trainer-item__img {
      width: 100% !important;
      max-width: 350px;
   }

   .trainer-item__txt {
      width: 100% !important;
   }

   .trainer-body {
      margin-top: 2rem;
      font-size: 14px;
   }
}

/* shop infomation */
#shop-infomation iframe {
   width: 100%;
   height: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
}

/* store */


.store-imgs__zoom {
   width: 800px;
   display: block;
   object-fit: cover;
   margin: 0 auto;
}

.store-imgs__list {
   cursor: grab;
   margin-top: 30px;
}

.store-imgs__item {
   object-fit: cover;
   aspect-ratio: 4/3;
}

.store-imgs__item:hover {
   filter: brightness(.9);
   cursor: pointer;
}

/* .store-imgs__list:active {
   cursor: grabbing;
} */

/* blog */
.swiper-postList .p-postList {
   flex-wrap: nowrap;
}

.swiper-postList .swiper-slide {
   margin: 0;
   height: 100%;
   padding: 1em;
   height: auto;
   text-align: left;
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



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

   .swiper-button-prev,
   .swiper-button-next {
      width: inherit;
      height: inherit;
   }
}

/* faq */
.swell-block-faq {
   margin-bottom: 0 !important;
}

.faq_q,
.faq_a {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1em 0 !important;

}

.faq_q::before,
.faq_a::before {
   font-family: var(--font-josefin-sans) !important;
   box-shadow: none !important;
   font-weight: 500;
   font-size: 2rem;
   width: auto !important;
   line-height: 1 !important;
   position: static !important;
}

.faq_q::before {
   color: var(--yellow);
}

.faq_a::before {
   color: var(--grey-4);
}

.faq_q::after {
   content: "\2b";
   font: var(--fa-font-brands);
   font-weight: 400;
   font-size: 28px;
   color: #666;
   margin-left: auto;
   flex-shrink: 0;
   align-self: center;
}

.faq_q {
   cursor: pointer;
}

.faq_q:hover {
   opacity: .85;
}

.faq_a {
   display: none;
}

.swell-block-faq__item.open .faq_q::after {
   content: "";
   width: 15px;
   margin-right: 4px;
   height: 2px;
   background: #666;
}

.swell-block-faq__item.open .faq_a {
   display: flex;
}

/* contact */
.swell-block-button.type-hotpepper a {
   background: #e36b8b !important;
}

.swell-block-button.type-line a {
   background: #1bbb1f !important;
}

.swell-block-button.type-tel a {
   background: #1d71bc !important;
}

form {
   max-width: 800px;
   margin: 0 auto;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
   width: 100%;
   background: #fff;
   border-radius: 4px;
   padding: 0.8em;
}

input[type="date"] {
   background: #fff;
   border-radius: 4px;
   padding: 0.8em;
   margin-bottom: 10px;
   cursor: pointer;
}

select {
   cursor: pointer;
}

.form-row:not(:first-child) {
   margin-top: 2.5rem;
}

.form-row p {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   column-gap: 2em;
   row-gap: 8px;
}

.required,
.any {
   width: 15em;
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
}

.required::after,
.any::after {
   display: inline-block;
   font-size: 10px;
   line-height: 1;
   padding: 4px 8px;
   border-radius: 3px;
   color: #fff;
}

.required::after {
   content: "必須";
   background: var(--red);
}

.any::after {
   content: "任意";
   background: var(--grey);
}

.wpcf7-form-control-wrap,
.form-row__time {
   width: calc(100% - 17em);
}

.form-row__time select {
   margin-top: 3px;
}

.wpcf7-not-valid-tip {
   color: var(--yellow-3);
   margin-bottom: 5px;
}

.wpcf7-response-output {
   border-color: var(--yellow-4) !important;
   padding: 1em !important;
   margin: 0 auto !important;
}

.form-submit {
   text-align: center;
   margin-top: 3rem;
}

input[type="submit"] {
   display: block;
   width: 100%;
   max-width: 325px;
   margin: 0 auto;
   padding: .8em;
   color: #fff;
   background: linear-gradient(to right, #b4870f 0%, #dcb92d 50%, #b4870f 100%);
   clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
   transition: .2s;
}

input[type="submit"]:hover {
   filter: brightness(.9);
}

/* 確認画面 */
.confirm-row {
   padding: 20px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.confirm-row p {
   display: flex;
   align-items: center;
   column-gap: 30px;
   row-gap: 12px;
   flex-wrap: wrap;

}

.confirm-row span:nth-child(1) {
   width: 15em;
   flex-shrink: 0;
   font-weight: 700;
}

.confirm-submit {
   margin-top: 40px;
}

.confirm-submit p {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.wpcf7-previous {
   display: block;
   width: 100%;
   max-width: 325px;
   margin: 0 auto;
   padding: .8em;
   color: #fff;
   background: var(--main);
   clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
   transition: .2s;
}

.wpcf7-previous:hover {
   opacity: .8;
}


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

   .wpcf7-form-control-wrap,
   .form-row__time {
      width: 100%;
   }

   .confirm-row span {
      display: block;
      width: 100%;
   }
}