@charset "UTF-8";
/**
 * 単位を削除して数値のみを返す関数
 * 
 * @usage
 * remove-unit(20px) // 20を返す
 */
/**
 * ブレークポイント管理関数
 */
/**
 * グローバルで使用する関数
 */
/**
 * メディアクエリのmixin
 * 
 * @usage
 * @include min-screen('md') {
 *  ここにスタイルを記述
 * }
 *
 * @include min-screen('768px') {
 *  ここにスタイルを記述
 * }
 */
/**
 * pxをremに変換して出力するmixin
 * 
 * @usage
 * @include font-size(20px);
 */
/**
 * 通常のhoverに加えfocus時もまとめてホバー効果を適用するmixin
 * スマホはデフォルトでホバー効果を適用しない
 * 
 * @usage
 * @include hover() {
 *  ここにスタイルを記述
 * }
 */
/**
 * テキストの行数を指定して3点リーダー
 * 複数行はIE非対応(2行以上)
 * 
 * @usage
 * @include text-clamp(2);
 */
/**
 * ほぼすべてのブラウザに対応する均等横並びのmixin
 * 
 * @usage
 * @include col(3, 40, 20, '親セレクターを指定');
 */
/**
 * タイポグラフィ関連のmixin
 */
/**
 * グローバルで使用するmixin
 * satsuma-hayato-frontを参考にした構造
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.6;
}

html {
  font-size: 16px;
  /* フォールバック */
  font-size: clamp(14px, 4vw, 16px);
  /* レスポンシブ */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333333;
  margin: 0;
  padding: 0;
}

body {
  /* background-image: url("./src/img/top/bg_content.webp") !important; */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: auto 100vh;
}
@media only screen and (min-width: 768px) {
  body {
    background-size: cover;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  body {
    background: none;
  }

  body:before {
    /* background-image: url("./src/img/top/bg_content.webp"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100vh;
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}
.l-content {
  padding: 0;
  max-width: none;
}

#header {
  position: fixed;
  background: none;
}

.l-header__inner {
  min-height: 60px;
}

.c-headLogo {
  height: auto;
}

.l-header__logo {
  padding: 0px 16px;
}

.c-headLogo__img {
  max-width: 87px;
  height: 40px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0;
  line-height: 1.6;
}

a {
  color: #007cba;
  text-decoration: none;
  transition: all 0.3s ease;
}

ul, ol {
  margin: 0;
  padding-left: 0;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-main {
  overflow: hidden;
}

.faq-component .faq-item {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.faq-component .faq-item:last-child {
  margin-bottom: 0;
}
.faq-component .faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 1rem;
  background: #ffffff;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-component .faq-answer {
  max-height: 300px;
  opacity: 1;
  padding: 0px 10px 24px 10px;
  display: block;
}

.widget-faq .faq-item {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.widget-faq .faq-item:last-child {
  margin-bottom: 0;
}
.widget-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.faq-item.active .widget-faq .faq-answer {
  max-height: 200px;
  opacity: 1;
  padding: 0.5rem;
  display: block;
}

.nav__button,
.openbtn8 {
  position: relative;
  background: transparent;
  cursor: pointer;
  width: 60px;
  height: 60px;
  background-color: #B61918;
}
@media only screen and (min-width: 768px) {
  .nav__button,
.openbtn8 {
    display: none;
  }
}

/*ボタン内側*/
.nav__button .openbtn-area,
.openbtn8 .openbtn-area {
  transition: all 0.6s;
  width: 60px;
  height: 60px;
}

.nav__button span,
.openbtn8 span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 18px;
  height: 2.5px;
  background: #fff;
  width: 26px;
}

.nav__button--second span {
  background: #fff;
}

.nav__button span:nth-of-type(1),
.openbtn8 span:nth-of-type(1) {
  top: 20px;
}

.nav__button span:nth-of-type(2),
.openbtn8 span:nth-of-type(2) {
  top: 28px;
}

.nav__button span:nth-of-type(3),
.openbtn8 span:nth-of-type(3) {
  top: 36px;
}

.nav__button.active {
  background-color: #ECEBE8;
}

.nav__button.active .openbtn-area,
.openbtn8.active .openbtn-area {
  transform: rotate(180deg);
}

.nav__button.active span:nth-of-type(1),
.openbtn8.active span:nth-of-type(1) {
  top: 23px;
  left: 19px;
  transform: translateY(6px) rotate(-45deg);
  background: #000000;
  width: 35%;
}

.nav__button.active span:nth-of-type(2),
.openbtn8.active span:nth-of-type(2) {
  opacity: 0;
}

.nav__button.active span:nth-of-type(3),
.openbtn8.active span:nth-of-type(3) {
  top: 35px;
  left: 19px;
  transform: translateY(-6px) rotate(45deg);
  background: #000000;
  width: 35%;
}

/*========= レイアウトのためのCSS ===============*/
body {
  padding: 0px;
}

a {
  text-decoration: none;
}

.header__wrapper {
  position: fixed;
  width: 100%;
  background: #F7F7F7;
  background: transparent;
  padding: 0px 0px 0px 16px;
  box-sizing: border-box;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  z-index: 1000;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
@media only screen and (min-width: 768px) {
  .header__wrapper {
    align-items: flex-start;
    height: auto;
    padding: 0 0 0 40px;
  }
}

.header__wrapper--transparent {
  background: transparent !important;
  box-shadow: none !important;
}

.head_active {
  background: #ECEBE8 !important;
}
.head_active:before {
  position: fixed;
  content: "";
  top: 70px;
  bottom: 0;
  right: 0;
  left: 0;
}

.navList {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: space-between;
  list-style: none;
  position: absolute;
  width: 100%;
  height: 100dvh;
  top: 60px;
  left: 0;
  padding: 32px 16px 100px;
  clear: both;
  background: rgba(55, 55, 55, 0.98);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transform: translateX(100%);
  background-color: #ECEBE8;
  opacity: 0;
  overflow: scroll;
}
@media only screen and (min-width: 768px) {
  .navList {
    display: none;
  }
}

.active ~ .navList {
  transform: translateX(0);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  opacity: 1;
}

.nav__item__wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nav__item {
  margin-top: 8px;
}
.nav__item:first-child {
  margin-top: 0;
}

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

.nav__item__text {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  color: #B61918;
  font-family: "Montserrat", sans-serif;
}

.nav__item__subText {
  display: inline-block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #1A1A1A;
  font-family: "Noto Sans", sans-serif;
}

.nav__arrow__img img {
  width: 24px;
  height: 24px;
}

.nav-copyright {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  color: #A3A3A5;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.header-nav-card__wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header-nav-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px 16px 35px;
  background-color: #B61918;
  border-radius: 16px;
  background-image: url("./src/img/top/card-logo.svg");
  background-size: contain;
  background-position: center bottom -23px;
  background-repeat: no-repeat;
}

.header-nav-card--second {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px 16px 35px;
  background-color: #333333;
  border-radius: 20px;
  background-image: url("./src/img/top/card-logo2.svg");
  background-size: contain;
  background-position: center bottom -23px;
  background-repeat: no-repeat;
}

.header-nav-card__inner {
  width: 100%;
}

.header-nav-card__title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.header-nav-card__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}

.header-nav-card__subTitle {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.nav-card__button {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #1A1A1A;
}
@media only screen and (min-width: 768px) {
  .nav-card__button {
    display: none;
  }
}

.nav-card__button--second {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #B61918;
}
@media only screen and (min-width: 768px) {
  .nav-card__button--second {
    display: none;
  }
}

.header__list__wrapper {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header__list__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
}

.header__list--pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 40px;
}

.header__list--pc__item a {
  font-size: 15px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  color: #FFFFFF;
  transition: all 0.3s ease;
}
.header__list--pc__item a:hover {
  opacity: 0.7;
}

.scroll-active {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px;
}
.scroll-active a {
  color: #1A1A1A;
}

.header__nav__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 28px;
  width: 100%;
  max-width: 182px;
  max-height: 58px;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  color: #0080D9;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid #0080D9;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: rgba(20, 30, 28, 0.2) 0px 2px 4px;
  fill: #0080D9;
}
.header__nav__button::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 50%;
  right: 30px;
  transform: translate(-50%, -50%);
  background: #0080D9;
  mask: url("https://corp.dokoyorimo.net/wizcms/wp-content/themes/dokoyorimo_corp/img/svg/button_icon5.svg") no-repeat center center/contain;
  -webkit-mask: url("https://corp.dokoyorimo.net/wizcms/wp-content/themes/dokoyorimo_corp/img/svg/button_icon5.svg") no-repeat center center/contain;
  z-index: 100;
  pointer-events: none;
}
.header__nav__button:hover {
  color: #fff;
  background: #0080D9;
}
.header__nav__button:hover::before {
  background: #fff;
}

.header__nav__button--sp {
  position: relative;
  margin: 56px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  width: 100%;
  max-width: 182px;
  max-height: 50px;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  color: #0080D9;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid #0080D9;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: rgba(20, 30, 28, 0.2) 0px 2px 4px;
  fill: #F7F7F7;
  background-color: #fff;
  border-color: #0080D9;
}
.header__nav__button--sp::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 50%;
  right: 30px;
  transform: translate(-50%, -50%);
  background: #0080D9;
  mask: url("https://corp.dokoyorimo.net/wizcms/wp-content/themes/dokoyorimo_corp/img/svg/button_icon5.svg") no-repeat center center/contain;
  -webkit-mask: url("https://corp.dokoyorimo.net/wizcms/wp-content/themes/dokoyorimo_corp/img/svg/button_icon5.svg") no-repeat center center/contain;
  z-index: 100;
  pointer-events: none;
}
.header__nav__button--sp:hover {
  color: #fff;
  background: #0080D9;
}
.header__nav__button--sp:hover::before {
  background: #fff;
}

.header__wrapper--underlayer {
  position: fixed;
  width: 100%;
  height: 60px;
  background: #fcfdfd;
  padding: 16px 20px;
  box-sizing: border-box;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  z-index: 1000;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
@media only screen and (min-width: 768px) {
  .header__wrapper--underlayer {
    height: auto;
    padding: 32px 80px;
  }
}
.header__wrapper--underlayer .header__list--pc__item a {
  color: #141E1C;
}
.header__wrapper--underlayer .header__nav__button {
  color: #0080D9;
  border-color: #0080D9;
}
.header__wrapper--underlayer .header__nav__button:hover {
  background-color: #0080D9;
  border-color: #0080D9;
  color: #F7F7F7;
}
.header__wrapper--underlayer .header__nav__button:hover svg path {
  fill: #F7F7F7;
  border-color: #0080D9;
  color: #F7F7F7;
}
.header__wrapper--underlayer .header__nav__button:hover svg path:hover {
  background-color: #0080D9;
  border-color: #0080D9;
  color: #F7F7F7;
}
.header__wrapper--underlayer .header__nav__button:hover svg path {
  fill: #F7F7F7;
}

.header__logo--second {
  display: none;
}

.header__logo {
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .header__logo {
    padding: 7px 0 0;
  }
}
.header__logo img {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 87px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .header__logo img {
    min-width: 108px;
  }
}
.header__logo:hover {
  opacity: 0.7;
}

.nav-active {
  height: 100%;
  overflow: hidden;
}

.header-btn {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #B61918;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff !important;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
  letter-spacing: 0.04em;
}
.header-btn:hover {
  opacity: 0.9;
}
.header-btn:hover img {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .header-btn {
    position: relative;
    display: block;
    padding: 20px 40px;
    width: 100%;
    height: 64px;
    max-width: 265px;
  }
}
.header-btn img {
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .header-btn img {
    right: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

.footer__inner {
  padding: 40px 16px 0px;
  background-color: #333333;
}
@media only screen and (min-width: 768px) {
  .footer__inner {
    padding: 80px 0px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__inner {
    padding: 80px 40px 0px;
  }
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 40px;
}
@media only screen and (min-width: 768px) {
  .footer__bottom {
    margin: 0 auto;
    max-width: 1200px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 192px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__bottom {
    gap: 60px;
    flex-direction: column;
  }
}
@media only screen and (min-width: 1640px) {
  .footer__bottom {
    justify-content: space-between;
  }
}

.footer__logo-wrap {
  margin: 0;
  transition: all 0.3s ease;
}
.footer__logo-wrap:hover {
  opacity: 0.7;
}

.footer__logo {
  width: 100%;
  max-width: 140px;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .footer__logo {
    max-width: 162px;
  }
}

.footer__products {
  display: flex;
  gap: 40px;
  width: 100%;
  text-align: center;
  flex-direction: row;
}
@media only screen and (min-width: 768px) {
  .footer__products {
    flex-direction: row;
    text-align: left;
    gap: 175px;
    width: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__products {
    gap: 110px;
  }
}

.footer__products__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-list-title {
  font-size: 16px;
  font-weight: 700;
  color: #D21F1E;
  font-family: "Montserrat", sans-serif;
  text-align: left;
}

.footer-list-wrap-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .footer-list-wrap-right {
    flex-direction: row;
    gap: 175px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer-list-wrap-right {
    gap: 110px;
  }
}

.footer-list-wrap-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .footer-list-wrap-inner {
    margin-top: 10px;
    min-width: 200px;
    text-align: center;
  }
}

.footer-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.footer-list__item p {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .footer-list__item p {
    font-size: 14px;
  }
}
.footer-list__item a {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: normal;
  transition: all 0.3s ease;
}
.footer-list__item a:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .footer-list__item a {
    font-size: 14px;
  }
}

.footer__copyright {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #A3A3A5;
  text-align: center;
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .footer__copyright {
    margin-top: 40px;
  }
}

.footer__bg {
  margin: 40px calc(50% - 50vw) -6px;
  min-width: 100vw;
}
@media only screen and (min-width: 768px) {
  .footer__bg {
    min-width: auto;
    display: block;
    margin: 80px auto 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__bg {
    min-width: 100vw;
    margin: 40px calc(50% - 50vw) -6px;
  }
}
@media only screen and (min-width: 1640px) {
  .footer__bg {
    max-width: 1730px;
  }
}

.faq-page-wrapper {
  background-color: #fff !important;
}

@media only screen and (min-width: 768px) {
  .faq-header-title-wrap {
    margin: 0 auto;
    max-width: 1140px;
  }
}

.faq-header {
  padding: 100px 16px 40px;
  background-color: #ECEBE8;
  border-radius: 0px 0px 0px 40px;
}
@media only screen and (min-width: 768px) {
  .faq-header {
    margin-left: 5%;
    padding: 140px 150px 63px 70px;
    border-radius: 0px 0px 0px 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .faq-header {
    padding: 140px 40px 63px 20px;
  }
}

.faq-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  color: #B61918;
}
@media only screen and (min-width: 768px) {
  .faq-title {
    font-size: 96px;
  }
}

.faq-subtitle {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  color: #1A1A1A;
}
@media only screen and (min-width: 768px) {
  .faq-subtitle {
    font-size: 20px;
  }
}

.faq-header-category-list {
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 11px;
}
@media only screen and (min-width: 768px) {
  .faq-header-category-list {
    max-width: 1140px;
    margin: 60px auto 0;
    grid-template-columns: repeat(4, 1fr);
    flex-direction: row;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .faq-header-category-list {
    max-width: 780px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.faq-header-category-list-item {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  background: #1A1A1A;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .faq-header-category-list-item {
    max-width: 265px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .faq-header-category-list-item {
    max-width: none;
  }
}

.faq-header-category-list-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0px 16px;
  color: #fff;
  text-decoration: none;
}
.faq-header-category-list-link:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .faq-header-category-list-link {
    gap: 10px;
    padding: 20px 0px 15px;
  }
}

.faq-categories {
  margin-bottom: 2rem;
}

.faq-category-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .faq-category-nav {
    justify-content: flex-start;
  }
}

.faq-category-link {
  padding: 0.5rem 1rem;
  background: #f9f9f9;
  border-radius: 20px;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s ease;
}
.faq-category-link:hover, .faq-category-link.active {
  background: #007cba;
  color: #ffffff;
}

.faq-section-sub-title {
  font-size: 10px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .faq-section-sub-title {
    font-size: 14px;
  }
}

.faq-section-title {
  font-size: 28px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  padding-bottom: 24px;
  border-bottom: 1px solid #DDDDDD;
}
@media only screen and (min-width: 768px) {
  .faq-section-title {
    padding-bottom: 40px;
    font-size: 48px;
  }
}

.faq-section-title--second {
  font-size: 28px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  padding-bottom: 24px;
  border-bottom: 1px solid #DDDDDD;
}
@media only screen and (min-width: 768px) {
  .faq-section-title--second {
    padding-bottom: 40px;
    font-size: 48px;
  }
}

.faq-content {
  margin-top: 60px;
  padding: 0 16px 100px;
}
@media only screen and (min-width: 768px) {
  .faq-content {
    padding: 0 0px 140px;
    margin: 100px auto 0;
    max-width: 1140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .faq-content {
    padding: 0 40px 100px;
  }
}
@media only screen and (min-width: 450px) and (max-width: 767px) {
  .faq-content {
    max-width: 550px;
    margin: 60px auto 0;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
  border-bottom: 1px solid #DDDDDD;
}

.faq-question-text-wrap {
  display: flex;
  align-items: flex-start;
}
@media only screen and (min-width: 768px) {
  .faq-question-text-wrap {
    align-items: center;
  }
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px 12px 10px;
  cursor: pointer;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .faq-question {
    padding: 20px 10px;
  }
}

.faq-q-icon {
  margin-right: 10px;
  width: 21px;
  color: #B61918;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .faq-q-icon {
    line-height: 1.6;
    margin-right: 16px;
  }
}

.faq-q-icon-second {
  margin-right: 10px;
  width: 21px;
  color: #D91E33;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  line-height: 0.8;
}
@media only screen and (min-width: 768px) {
  .faq-q-icon-second {
    margin-right: 16px;
    line-height: 1;
  }
}

.faq-question-text {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  max-width: 250px;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .faq-question-text {
    max-width: 100%;
    font-size: 20px;
  }
}
@media only screen and (min-width: 450px) and (max-width: 768px) {
  .faq-question-text {
    max-width: none;
  }
}

.faq-toggle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #007cba;
  margin-left: 1rem;
}

.faq-answer {
  display: none;
  padding: 0px 10px 24px 10px;
  background: #ffffff;
}
.faq-answer[style*="display: block"] {
  display: flex !important;
}
@media only screen and (min-width: 768px) {
  .faq-answer {
    padding: 0px 10px 30px 10px;
  }
}

.faq-a-icon {
  margin-top: -5px;
  margin-right: 10px;
  width: 21px;
  color: #333333;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  margin-right: 10px;
  font-family: "Montserrat", sans-serif;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .faq-a-icon {
    margin-right: 16px;
  }
}

.faq-answer-text {
  margin-top: 4px;
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: 400;
}
.faq-answer-text a {
  text-decoration: underline;
  color: #006AFF;
}
@media only screen and (min-width: 768px) {
  .faq-answer-text {
    font-size: 16px;
    line-height: 0.9;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .faq-answer-text {
    line-height: 1.5;
  }
}

.faq-no-items {
  text-align: center;
  padding: 3rem;
  color: #666666;
  font-size: 1.125rem;
}

.faq-featured {
  margin-bottom: 3rem;
}

.faq-featured-list .faq-item {
  border-color: #007cba;
}

.faq-category-section {
  margin-bottom: 80px;
}
@media only screen and (min-width: 768px) {
  .faq-category-section {
    margin-bottom: 140px;
  }
}
.faq-category-section:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .faq-category-nav {
    justify-content: flex-start;
  }
}
.faq-arrow, .faq-arrow-icon {
  display: inline-block;
  vertical-align: middle;
  color: #B61918;
  line-height: 1;
  position: relative;
  width: 11px;
  height: 11px;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.faq-arrow::before, .faq-arrow-icon::before, .faq-arrow::after, .faq-arrow-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.faq-arrow::before, .faq-arrow-icon::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.faq-arrow::after, .faq-arrow-icon::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
}

.faq-arrow-icon {
  display: block;
  width: 11px;
  height: 11px;
  transform: rotate(135deg);
  transition: transform 0.3s ease;
}

.contact-catalog-header {
  padding: 100px 50px 0px;
  min-height: 591px;
  background-image: url("./src/img/contact-catalog/kv-sp.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .contact-catalog-header {
    padding: 100px;
    background-image: url("./src/img/contact-catalog/kv.svg");
  }
}

.tag--required {
  display: block;
  padding: 3px 4px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #B61918;
  border-radius: 2px;
  font-family: "Noto Sans JP", sans-serif;
}

.formList__title__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.formList__title {
  font-size: 15px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #1A1A1A;
}
@media only screen and (min-width: 768px) {
  .formList__title {
    font-size: 16px;
  }
}

.formList__subTitle {
  font-size: 10px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #BABABA;
  line-height: 1.5;
}

/* Contact Form 7 チェックボックス対応 */
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: #1A1A1A;
  min-width: 240px;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
    margin-top: 2px;
    font-size: 14px;
  }
}

.wpcf7-form-control.wpcf7-checkbox label {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: #404040;
}

/* チェックボックスのアイコン */
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox] {
  position: relative;
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #FBFBFB;
  border: solid 1px #C5C5C5;
  border-radius: 4px;
  box-shadow: 0 0 0 0 transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox]:hover {
  border-color: #B61918;
  box-shadow: 0 2px 8px rgba(0, 124, 186, 0.15);
}
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox]::before {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox]:checked {
  background-color: #B61918;
  border-color: #B61918;
  box-shadow: 0 4px 12px rgba(0, 124, 186, 0.25);
  transform: scale(1.05);
  /* チェックマーク表示 */
}
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox]:checked::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.wpcf7-form-control.wpcf7-checkbox input[type=checkbox]:checked:hover {
  background-color: #B61918;
  border-color: #B61918;
  box-shadow: 0 6px 16px rgba(0, 124, 186, 0.3);
}

.formList__inputWrapper--checkbox {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}

.contact-catalog-header {
  padding: 100px 50px 0px;
  min-height: 591px;
  background-image: url("./src/img/contact-catalog/kv-sp.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .contact-catalog-header {
    padding: 100px;
    background-image: url("./src/img/contact-catalog/kv.svg");
  }
}

.contact-content-wrapper {
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}
.contact-content-wrapper::-webkit-scrollbar {
  display: none !important;
  /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}
@media only screen and (min-width: 768px) {
  .contact-content-wrapper {
    margin-top: -140px;
    padding-top: 13%;
    padding-bottom: 15%;
    min-width: 625px;
    height: 110vh;
    overflow: scroll;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-content-wrapper {
    padding-top: 3%;
    margin: auto;
    height: auto;
    max-width: none;
    width: 100%;
  }
}
@media only screen and (min-width: 1650px) and (max-width: 1920px) {
  .contact-content-wrapper {
    height: 110vh;
    overflow: scroll;
  }
}
@media only screen and (min-width: 1921px) {
  .contact-content-wrapper {
    height: auto;
    overflow: visible;
    padding-bottom: 8%;
  }
}

.contact-catalog-content {
  margin-top: 40px;
  border-radius: 20px;
  padding: 32px 16px;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .contact-catalog-content {
    position: relative;
    margin: 0;
    padding: 60px 40px;
    max-width: 600px;
    border-radius: 40px;
    z-index: 10000;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-catalog-content {
    max-width: none;
  }
}

.formList__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media only screen and (min-width: 768px) {
  .formList__item {
    gap: 14px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.formList__item:not(:first-child) {
  margin-top: 35px;
}
@media only screen and (min-width: 768px) {
  .formList__item:not(:first-child) {
    margin-top: 34px;
  }
}

.formList__titleWrapper {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
}

.formList__title {
  margin: 0px;
}

.formList__inputWrapper {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .formList__inputWrapper {
    max-width: 700px;
  }
}
.formList__inputWrapper input,
.formList__inputWrapper textarea {
  width: 100%;
  padding: 15px 16px;
  background-color: #FBFBFB;
  border: 1px solid #CACACA;
  border-radius: 4px;
}
@media only screen and (min-width: 768px) {
  .formList__inputWrapper input,
.formList__inputWrapper textarea {
    padding: 15px 16px 17px;
  }
}
.formList__inputWrapper input::-moz-placeholder, .formList__inputWrapper textarea::-moz-placeholder {
  font-weight: 400;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  color: #AEAEAE;
}
.formList__inputWrapper input::placeholder,
.formList__inputWrapper textarea::placeholder {
  font-weight: 400;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  color: #AEAEAE;
}
.formList__inputWrapper textarea {
  resize: none;
  width: 100%;
  height: 170px;
}
@media only screen and (min-width: 768px) {
  .formList__inputWrapper textarea {
    max-width: 520px;
    height: 200px;
  }
}

.formList__checkboxWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .formList__checkboxWrapper {
    max-width: 700px;
    flex-direction: row;
    gap: 10px;
    width: 100%;
  }
}
.formList__checkboxWrapper p {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .formList__checkboxWrapper p {
    flex-direction: row;
    gap: 10px;
  }
}
.formList__checkboxWrapper .wpcf7-checkbox {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .formList__checkboxWrapper .wpcf7-checkbox {
    margin-top: 15px;
  }
}

.formList__selectWrapper {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .formList__selectWrapper {
    max-width: 700px;
    width: 100%;
  }
}
.formList__selectWrapper select {
  --webkit-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  padding: 15px 16px;
  background-color: #FBFBFB;
  border: 1px solid #CACACA;
  border-radius: 4px;
  position: relative;
  color: #AEAEAE;
}
@media only screen and (min-width: 768px) {
  .formList__selectWrapper select {
    max-width: 700px;
    padding: 15px 16px 17px;
  }
}
.formList__selectWrapper select::-ms-expand {
  display: none;
}

.error-message {
  margin-top: 8px;
  font-size: 14px;
  color: #dc3232;
  font-weight: normal;
  display: none;
}

.formList__block {
  max-width: 700px;
  width: 100%;
}
.formList__block .wpcf7-not-valid-tip {
  display: none;
}
.formList__block:has(.wpcf7-not-valid-tip) .error-message {
  display: block;
}

.wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 14px;
}

.wpcf7-response-output {
  display: none;
}

.contact-page-wrapper {
  background-color: #ECEBE8;
}

.contact-page {
  position: relative;
  z-index: 10;
  padding: 105px 16px 200px;
  overflow: hidden;
  background-color: #ECEBE8;
}
@media only screen and (min-width: 768px) {
  .contact-page {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 140px 0px 0px;
    max-width: 1140px;
    margin: 0 auto;
    overflow: initial;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-page {
    flex-direction: column;
    padding: 80px 50px 0px;
    gap: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .contact-page {
    padding: 140px 40px 0px;
  }
}

@media only screen and (min-width: 1320px) {
  .contact-header {
    min-width: 520px;
  }
}

.contact-thanks-page {
  padding: 105px 16px 80px;
  background-color: #ECEBE8;
}
@media only screen and (min-width: 768px) {
  .contact-thanks-page {
    padding: 140px 0px 180px;
    max-width: 1140px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-thanks-page {
    padding: 80px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .contact-thanks-page {
    padding: 140px 40px;
  }
}

.contact-title {
  font-size: 56px;
  font-weight: 700;
  color: #B61918;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .contact-title {
    font-size: 96px;
  }
}

.contact-title {
  font-size: 56px;
  font-weight: 700;
  color: #B61918;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .contact-title {
    font-size: 96px;
  }
}

.contact-subTitle {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .contact-subTitle {
    font-size: 20px;
  }
}

.contact-text {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .contact-text {
    font-size: 20px;
  }
}

.contact-thanks-content {
  margin-top: 40px;
  padding: 32px 16px;
  background-color: #fff;
  border-radius: 20px;
}
@media only screen and (min-width: 768px) {
  .contact-thanks-content {
    margin-top: 100px;
    padding: 80px 40px;
    border-radius: 80px;
  }
}

.contact-thanks-title {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .contact-thanks-title {
    font-size: 36px;
  }
}

.contact-thanks-text {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .contact-thanks-text {
    margin-top: 30px;
    font-size: 20px;
  }
}

.contact-thanks-button {
  margin: 24px auto 0;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .contact-thanks-button {
    margin: 60px auto 0;
  }
}

.back-to-top-btn {
  position: relative;
  margin: 0 auto;
  display: block;
  padding: 20px;
  width: 100%;
  height: 60px;
  max-width: 320px;
  background-color: #B61918;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
}
.back-to-top-btn:hover {
  opacity: 0.9;
}
.back-to-top-btn:hover img {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .back-to-top-btn {
    display: block;
    padding: 20px 40px;
    width: 100%;
    height: 60px;
    min-width: 265px;
  }
}
.back-to-top-btn img {
  transition: all 0.3s ease;
  right: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

[data-class=wpcf7cf_group],
.wpcf7cf_remove, .wpcf7cf_add {
  display: block;
}

.contact-img-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .contact-img-wrapper {
    bottom: -7px;
    left: auto;
  }
}
@media only screen and (min-width: 1920px) {
  .contact-img-wrapper {
    bottom: 42%;
    bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-img-wrapper {
    width: 100vw;
    margin: 0 calc(45% - 50vw);
  }
}

.contact-img-list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  z-index: -1;
}

.contact-img-item img {
  min-width: 180px;
  min-height: 288px;
  max-height: 290px;
  border-radius: 0px !important;
}

.contact-img-item--second {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-img-item--second img {
  min-width: 180px;
  min-height: 140px;
  border-radius: 0px !important;
}

.contact-img-inner {
  width: 100vw;
}

.contact-arrow {
  position: absolute;
  right: 10px;
  top: 48%;
  display: inline-block;
  vertical-align: middle;
  color: #B61918;
  line-height: 1;
  width: 10px;
  height: 10px;
  transform: rotate(135deg) translateY(70%);
  pointer-events: none;
  transition: transform 0.3s ease;
}

.contact-arrow::before, .contact-arrow::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.contact-arrow::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.contact-arrow::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
}

.wpcf7-list-item label {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  color: #404040;
}
@media only screen and (min-width: 768px) {
  .wpcf7-list-item label {
    font-size: 16px;
  }
}

.wpcf7-list-item a {
  font-size: 14px;
  color: #006AFF;
  text-decoration: underline;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .wpcf7-list-item a {
    font-size: 16px;
  }
}

.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.formList__attentionWrapper {
  margin-top: 24px;
  text-align: center;
}
.formList__attentionWrapper p {
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 768px) {
  .formList__attentionWrapper p {
    width: 100%;
  }
}

.wpcf7-list-item input[type=checkbox] {
  position: relative;
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #FBFBFB;
  border: solid 1px #C5C5C5;
  border-radius: 4px;
  box-shadow: 0 0 0 0 transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wpcf7-list-item input[type=checkbox]:hover {
  border-color: #B61918;
  box-shadow: 0 2px 8px rgba(0, 124, 186, 0.15);
}
.wpcf7-list-item input[type=checkbox]::before {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wpcf7-list-item input[type=checkbox]:checked {
  background-color: #B61918;
  border-color: #B61918;
  box-shadow: 0 4px 12px rgba(0, 124, 186, 0.25);
  transform: scale(1.05);
  /* チェックマーク表示 */
}
.wpcf7-list-item input[type=checkbox]:checked::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.wpcf7-list-item input[type=checkbox]:checked:hover {
  background-color: #B61918;
  border-color: #B61918;
  box-shadow: 0 6px 16px rgba(0, 124, 186, 0.3);
}

.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry,
.formList__submitBtn--secondry {
  margin: 30px auto 0;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  display: block;
  height: 60px;
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry input,
.formList__submitBtn--secondry input {
  position: relative;
  display: block;
  padding: 18px;
  width: 100%;
  min-width: 300px;
  max-width: 311px;
  height: 60px;
  background-color: #B61918;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry::after,
.formList__submitBtn--secondry::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  right: 15px;
  z-index: 100;
  background-image: url("./src/img/common/btn_arrow.svg");
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry:hover,
.formList__submitBtn--secondry:hover {
  opacity: 0.9;
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry:hover img,
.formList__submitBtn--secondry:hover img {
  transform: translate(3px, -15px);
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry:hover::after,
.formList__submitBtn--secondry:hover::after {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .wpcf7-form .wpcf7-submit.formList__submitBtn--secondry,
.formList__submitBtn--secondry {
    position: relative;
    display: block;
  }
}
.wpcf7-form .wpcf7-submit.formList__submitBtn--secondry img,
.formList__submitBtn--secondry img {
  transition: all 0.3s ease;
  right: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.wpcf7-spinner {
  display: none;
}

.contact-slider {
  height: 314px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  z-index: -1;
  margin: 0px calc(40% - 50vw) 0px !important;
  width: 110vw !important;
  max-width: none !important;
}
@media only screen and (min-width: 768px) {
  .contact-slider {
    width: 100vw;
    height: 560px !important;
    margin: 60px calc(50% - 50vw) 0px !important;
  }
}

/* スライダーのwrapper - 一定速度にするため */
.contact-slider .swiper-wrapper {
  transition-timing-function: linear;
}

.contact-slider .swiper-slide {
  height: 320px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-right: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .contact-slider .swiper-slide {
    margin-right: 30px;
    max-height: 513px;
    height: 100%;
  }
}

.p-postArea {
  background-color: #fff;
}

.product-body {
  padding: 60px 16px;
  background: #ECEBE8;
  border-radius: 0 0 0 40px;
}
@media only screen and (min-width: 768px) {
  .product-body {
    margin-left: 5%;
    padding: 140px 150px 140px 70px;
    border-radius: 0 0 0 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .product-body {
    padding: 140px 30px 140px 30px;
  }
}

.product-detail-wrap {
  margin-top: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
}
@media only screen and (min-width: 768px) {
  .product-detail-wrap {
    margin-top: 10px;
    gap: 50px;
    flex-direction: row;
  }
}

.product-detail-inner {
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .product-detail-inner {
    position: sticky;
    top: 30px;
  }
}

@media only screen and (min-width: 768px) {
  .product-detail-image-wrap {
    margin-top: 21px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {
  .product-detail-image-wrap {
    max-width: 320px;
  }
}
@media only screen and (min-width: 1181px) and (max-width: 1280px) {
  .product-detail-image-wrap {
    max-width: 440px;
  }
}

@media only screen and (min-width: 768px) {
  .product-detail-content-wrap {
    max-width: 550px;
  }
}

.product-title {
  font-size: 48px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-title {
    font-size: 64px;
  }
}

.product-subtitle {
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-subtitle {
    font-size: 20px;
    font-weight: 600;
  }
}

.product-description {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans Jp", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-description {
    margin-top: 55px;
    font-size: 16px;
  }
}

.product-point,
.product-specifications {
  margin-top: 60px;
}
@media only screen and (min-width: 768px) {
  .product-point,
.product-specifications {
    margin-top: 55px;
  }
}

.product-point-title,
.product-specifications-title {
  font-size: 14px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .product-point-title,
.product-specifications-title {
    font-size: 14px;
  }
}

.product-point-list {
  margin-top: 10px;
  padding-left: 26px;
}
.product-point-list li::marker {
  font-size: 1.2rem;
}

.product-point-text {
  text-indent: -5px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans Jp", sans-serif;
  list-style: disc;
  letter-spacing: 0.6px;
}
@media only screen and (min-width: 768px) {
  .product-point-text {
    font-size: 16px;
  }
}

.specifications-table {
  max-width: 550px;
  width: 100%;
  border-collapse: collapse;
}

.specifications-table tr {
  border-bottom: 1px solid #cccccc;
}

.specifications-table .spec-label {
  color: #333333;
  padding: 12px 0px;
  font-size: 14px;
  font-weight: 500;
  width: 35%;
  font-family: "Noto Sans JP", sans-serif;
  vertical-align: top;
}
@media only screen and (min-width: 768px) {
  .specifications-table .spec-label {
    padding: 28px 0px;
    font-size: 16px;
  }
}

.specifications-table .spec-value {
  padding: 12px 15px;
  font-size: 14px;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .specifications-table .spec-value {
    font-size: 15px;
  }
}

.product-breadcrumb {
  margin-bottom: 10px;
}
.product-breadcrumb a,
.product-breadcrumb p {
  display: inline-block;
  font-size: 12px;
  color: #333333;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-breadcrumb {
    margin-bottom: 0px;
  }
}

.arrow-right-breadcrumb {
  display: inline-block;
  vertical-align: middle;
  color: #B61918;
  line-height: 1;
  position: relative;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.arrow-right-breadcrumb::before, .arrow-right-breadcrumb::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.arrow-right-breadcrumb::before {
  top: 1px;
  left: -2px;
  right: 2px;
  height: 1px;
}

.arrow-right-breadcrumb::after {
  top: 1px;
  right: 2px;
  bottom: -1px;
  width: 1px;
}

.product-features-wrap {
  padding: 80px 16px 60px;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .product-features-wrap {
    padding: 100px 16px 70px;
  }
}

@media only screen and (min-width: 768px) {
  .product-features-body,
.product-lineup-body {
    max-width: 1280px;
    margin: 0 auto;
  }
}

.product-features-subTitle,
.product-lineup-subTitle {
  font-size: 10px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .product-features-subTitle,
.product-lineup-subTitle {
    font-size: 14px;
  }
}

.product-features-title,
.product-lineup-title {
  font-size: 28px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-features-title,
.product-lineup-title {
    font-size: 48px;
  }
}

.product-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media only screen and (min-width: 768px) {
  .product-features {
    margin-top: 60px;
    gap: 100px;
  }
}

.product-feature {
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: calc(var(--item-index) * 0.15s);
  will-change: opacity, transform;
}
.product-feature.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.product-feature:nth-child(2n) .feature-image {
  margin-right: 0;
  margin-left: 5%;
}
.product-feature:nth-child(2n) img {
  border-radius: 20px 0px 0px 20px;
}
@media only screen and (min-width: 768px) {
  .product-feature {
    gap: 50px;
    flex-direction: row;
    align-items: center;
  }
  .product-feature:nth-child(2n) {
    flex-direction: row-reverse;
  }
  .product-feature:nth-child(2n) .feature-image {
    margin-right: 0;
    margin-left: 0;
  }
  .product-feature:nth-child(2n) img {
    border-radius: 40px 0px 0px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-feature {
    padding-right: 40px;
    flex-direction: column;
  }
  .product-feature:nth-child(2n) {
    padding-right: 0;
    padding-left: 40px;
    flex-direction: column;
  }
}
@media only screen and (min-width: 1920px) {
  .product-feature {
    gap: 100px;
  }
  .product-feature:nth-child(2n) .feature-content {
    padding: 88px 0px 88px 40px;
  }
}

.feature-image {
  margin-right: 5%;
}
.feature-image img {
  width: 100%;
  height: auto;
  border-radius: 0px 20px 20px 0px;
}
@media only screen and (min-width: 768px) {
  .feature-image {
    margin: 0;
    max-width: 740px;
    width: 100%;
    height: auto;
  }
  .feature-image img {
    border-radius: 0px 40px 40px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .feature-image {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1600px) {
  .feature-image {
    max-width: 900px;
  }
}
@media only screen and (min-width: 1920px) {
  .feature-image {
    max-width: 1000px;
  }
}

.feature-content {
  padding: 0px 16px;
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .feature-content {
    padding: 88px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .feature-content {
    max-width: 400px;
    padding: 0px;
  }
}
@media only screen and (min-width: 1920px) {
  .feature-content {
    max-width: 800px;
    padding: 88px 40px 88px 0px;
  }
}

.feature-title {
  font-size: 20px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .feature-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .feature-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1920px) {
  .feature-title {
    font-size: 42px;
  }
}

.feature-text {
  margin-top: 30px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .feature-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1920px) {
  .feature-text {
    font-size: 18px;
  }
}

.product-btn-block {
  display: none;
}
@media only screen and (min-width: 768px) {
  .product-btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    gap: 20px;
    margin-top: 55px;
  }
}

.product-btn-block--fixed {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
@media only screen and (min-width: 768px) {
  .product-btn-block--fixed {
    display: none;
  }
}

.product-btn-wrap {
  width: 50%;
}
@media only screen and (min-width: 768px) {
  .product-btn-wrap {
    max-width: 265px;
    width: 100%;
  }
}

.product-btn, .product-btn--second {
  position: relative;
  display: block;
  padding: 13px;
  width: 100%;
  height: 54px;
  background-color: #1A1A1A;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
  letter-spacing: 0.04em;
}
.product-btn p, .product-btn--second p {
  line-height: 1.7;
}
.product-btn:hover, .product-btn--second:hover {
  opacity: 0.9;
}
.product-btn:hover img, .product-btn--second:hover img {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .product-btn, .product-btn--second {
    position: relative;
    display: block;
    padding: 20px 40px;
    width: 100%;
    height: 60px;
  }
  .product-btn p, .product-btn--second p {
    line-height: 1.4;
  }
}
.product-btn img, .product-btn--second img {
  transition: all 0.3s ease;
  right: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.product-btn--second {
  background-color: #B61918;
}

.slider-thumbnail {
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .slider-thumbnail {
    margin-top: 20px;
    max-width: 540px !important;
    width: 100%;
  }
}
.slider-thumbnail .swiper-wrapper {
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .slider-thumbnail .swiper-wrapper {
    gap: 13px;
  }
}
.slider-thumbnail .swiper-slide {
  max-width: 77px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .slider-thumbnail .swiper-slide {
    max-width: 125px;
    width: calc((100% / 4) - 10px) !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .slider-thumbnail .swiper-slide {
    max-width: 80px;
  }
}

.slider-thumbnail .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.5s;
  width: calc(100% / 4);
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide {
  width: 100%;
}

/* レイアウトのためのスタイル */
.swiper {
  margin-left: 0;
  max-width: 345px;
  width: 100%;
}
.swiper img {
  border-radius: 5px;
}
@media only screen and (min-width: 768px) {
  .swiper {
    margin-left: auto;
    max-width: 500px;
  }
  .swiper img {
    border-radius: 10px;
  }
}

.base-slider {
  border-radius: 10px;
}
.base-slider .swiper-slide {
  display: flex;
}
.base-slider .swiper-slide img {
  border-radius: 0px;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

.base-slider {
  margin-top: 32px;
  max-width: 540px;
  max-height: 540px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .base-slider {
    margin-top: 0px;
  }
}

.swiper-modal-btn {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 100;
}
.swiper-modal-btn img {
  width: 24px;
  height: 24px;
}

.product-btn-wrap--feature {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .product-btn-wrap--feature {
    margin-top: 70px;
    flex-direction: row;
  }
}

.product-lineup-wrap {
  padding: 60px 0 60px;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .product-lineup-wrap {
    padding: 90px 0 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .product-lineup-wrap {
    padding: 90px 40px 150px;
  }
}

.product-lineup-body {
  padding: 0 15px;
}
@media only screen and (min-width: 768px) {
  .product-lineup-body {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
  }
}

.product-category-section {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .product-category-section {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .product-category-section.first-category {
    margin-top: 60px;
  }
}

.product-lineup-item {
  padding: 6px 6px 8px;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  border-radius: 10px;
  background-color: #ECEBE8;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .product-lineup-item {
    padding: 10px 10px 11px;
    border-radius: 20px;
  }
}

.product-lineup-content {
  padding: 7px 7px 0px;
}
@media only screen and (min-width: 768px) {
  .product-lineup-content {
    padding: 14px 7px 5px;
  }
}

.product-lineup-image {
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .product-lineup-image {
    margin: auto;
    max-width: 250px;
    max-height: 240px;
  }
}
.product-lineup-image img {
  overflow: hidden;
  transition: transform 0.3s ease;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-lineup-image:hover img {
  transform: scale(1.05);
}

.product-lineup-item-title {
  font-size: 12px;
  font-weight: bold;
  color: #1A1A1A;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .product-lineup-item-title {
    font-size: 16px;
  }
}

.product-category-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px;
}

.product-category-title {
  font-size: 16px;
  color: #1A1A1A;
  margin: 0;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .product-category-title {
    font-size: 20px;
  }
}

.product-category-label {
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  background: #000;
  border-radius: 4px;
}
@media only screen and (min-width: 768px) {
  .product-category-label {
    font-size: 14px;
  }
}

.product-lineup-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
@media only screen and (min-width: 768px) {
  .product-lineup-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1170px) {
  .product-lineup-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active {
  display: flex;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 93vh;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .modal-content {
    width: 60%;
  }
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: background-color 0.3s ease;
}
.modal-close:hover {
  background: white;
}
@media only screen and (min-width: 768px) {
  .modal-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

.modal-close-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #333;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .modal-close-icon {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }
}

.modal-swiper-container {
  position: relative;
  padding: 25px 20px 20px;
}
@media only screen and (min-width: 768px) {
  .modal-swiper-container {
    padding: 40px 40px 40px;
  }
}
@media only screen and (min-width: 768px) {
  .modal-swiper-container img {
    max-width: 620px;
    width: 100%;
    margin: auto;
    display: block;
  }
}
@media only screen and (min-width: 1650px) {
  .modal-swiper-container img {
    max-width: 800px;
    margin: auto;
    display: block;
  }
}

.modal-zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -38%);
  cursor: pointer;
  z-index: 100;
  width: 115px;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.modal-swiper {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .modal-swiper {
    max-width: 1250px;
    width: 90%;
    height: auto;
    margin-bottom: 30px;
  }
}
.modal-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-swiper .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  scale: 1.3;
}
@media only screen and (min-width: 768px) {
  .modal-swiper .swiper-slide img {
    scale: 1.15;
  }
}
.modal-swiper .swiper-button-next,
.modal-swiper .swiper-button-prev {
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.modal-swiper .swiper-button-next:after,
.modal-swiper .swiper-button-prev:after {
  font-size: 20px;
}
.modal-swiper .swiper-button-next:hover,
.modal-swiper .swiper-button-prev:hover {
  background: white;
}

.modal-thumbnail {
  height: 80px;
}
@media only screen and (min-width: 768px) {
  .modal-thumbnail {
    height: 100px;
  }
}
.modal-thumbnail .swiper-slide {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.modal-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.modal-thumbnail .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.swiper-modal-btn {
  background: #B61918;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}
.swiper-modal-btn:hover {
  opacity: 0.8;
}
.swiper-modal-btn img {
  width: 30px;
  height: 30px;
}

.only-sp {
  display: block;
}
@media only screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}

.only-sp-tab {
  display: block;
}
@media only screen and (min-width: 768px) {
  .only-sp-tab {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .only-sp-tab {
    display: block;
  }
}

.only-pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  .only-pc {
    display: block;
  }
}

.site {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.site-contents {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
}

.kv-section {
  position: relative;
  padding-bottom: 130px;
  overflow: hidden;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .kv-section {
    padding-bottom: 160px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1355px) {
  .kv-section {
    padding-bottom: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .kv-section {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .kv-section {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 1920px) {
  .kv-section {
    padding-bottom: 225px;
  }
}

.kv-wrap {
  position: relative;
  margin-left: 5%;
  position: relative;
  width: 100%;
  height: 475px;
  overflow: hidden;
  border-radius: 0 0 0 40px;
  max-height: 475px;
}
@media only screen and (min-width: 768px) {
  .kv-wrap {
    transform: translateY(-25px);
    min-height: 650px;
    max-height: 45vw;
    height: 100vh;
    border-radius: 0 0 0 80px;
  }
}
@media only screen and (min-width: 744px) and (max-width: 767px) {
  .kv-wrap {
    max-height: 660px;
    height: 660px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .kv-wrap {
    min-height: 470px;
    max-height: 45vw;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .kv-wrap {
    min-height: 573px;
    max-height: 44vw;
  }
}
@media only screen and (min-width: 1281px) and (max-width: 1439px) {
  .kv-wrap {
    max-height: 46vw;
  }
}
@media only screen and (min-width: 1650px) {
  .kv-wrap {
    max-height: 58vh;
  }
}
@media only screen and (min-width: 1700px) {
  .kv-wrap {
    min-height: 750px;
  }
}
@media only screen and (min-width: 1920px) {
  .kv-wrap {
    max-height: 66vh;
  }
}

.kv-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0 0 40px;
  border-radius: 0 0 0 40px;
  /* max-height: 465px; */
  max-height: 825px;
  scale: 1;
}
@media only screen and (min-width: 768px) {
  .kv-video {
    border-radius: 0 0 0 80px;
  }
}

.kv-title-content {
  position: absolute;
  top: 50%;
  left: 37%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .kv-title-content {
    left: 19%;
  }
}
@media only screen and (min-width: 744px) and (max-width: 1023px) {
  .kv-title-content {
    left: 5%;
    transform: translate(0%, -50%);
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .kv-title-content {
    left: 22%;
  }
}

.kv-title {
  font-size: 25px;
  color: #fff;
  line-height: 1.5;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
.kv-title span {
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .kv-title {
    font-size: 2.25rem;
  }
}
@media only screen and (min-width: 550px) and (max-width: 743px) {
  .kv-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 744px) and (max-width: 1023px) {
  .kv-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .kv-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1280px) and (max-width: 1439px) {
  .kv-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  .kv-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1920px) {
  .kv-title {
    font-size: 60px;
  }
}

.kv-logo-wrap {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-48%, 0%);
  min-width: 320px;
}
.kv-logo-wrap img {
  width: 100%;
  max-width: 700px;
}
@media only screen and (min-width: 768px) {
  .kv-logo-wrap {
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 40px;
    transform: translate(-10%, -12%);
  }
}
@media only screen and (min-width: 1281px) and (max-width: 1439px) {
  .kv-logo-wrap {
    transform: translate(-3%, -12%);
    gap: 34px;
  }
  .kv-logo-wrap img {
    max-width: 560px;
  }
}
@media only screen and (min-width: 1130px) and (max-width: 1280px) {
  .kv-logo-wrap {
    transform: translate(-10%, -12%);
    gap: 34px;
  }
  .kv-logo-wrap img {
    max-width: 560px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1129px) {
  .kv-logo-wrap {
    transform: translate(-3%, -12%);
    gap: 34px;
  }
  .kv-logo-wrap img {
    max-width: 505px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .kv-logo-wrap {
    transform: translate(-10%, -12%);
  }
  .kv-logo-wrap img {
    max-width: 400px;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .kv-logo-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 20px;
    transform: translate(-10%, -12%);
  }
  .kv-logo-wrap img {
    max-width: 422px;
  }
}
@media only screen and (min-width: 1920px) {
  .kv-logo-wrap img {
    max-width: 933px;
  }
}

.kv-logo-text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.3;
  color: #B61918;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.kv-logo-text span {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .kv-logo-text {
    margin-bottom: 60px;
    font-size: 28px;
    line-height: 1.5;
  }
  .kv-logo-text span {
    display: inline-block;
    margin-right: 2px;
    font-size: 38px;
    font-weight: 600;
  }
}
@media only screen and (min-width: 1130px) and (max-width: 1280px) {
  .kv-logo-text {
    margin-bottom: 43px;
    font-size: 22px;
    letter-spacing: 0.05em;
  }
  .kv-logo-text span {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1130px) {
  .kv-logo-text {
    margin-bottom: 37px;
    font-size: 20px;
    letter-spacing: 0.05em;
  }
  .kv-logo-text span {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .kv-logo-text {
    margin-bottom: 13px;
    font-size: 24px;
  }
  .kv-logo-text span {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 600;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .kv-logo-text {
    margin-bottom: 18px;
    font-size: 18px;
  }
  .kv-logo-text span {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
  }
}
@media only screen and (min-width: 1920px) {
  .kv-logo-text {
    margin-bottom: 70px;
    font-size: 34px;
  }
  .kv-logo-text span {
    font-size: 50px;
  }
}

.section-subTitle, .section-subTitle--secondary {
  font-size: 14px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .section-subTitle, .section-subTitle--secondary {
    font-size: 14px;
  }
}

.section-title, .section-title--secondary {
  font-size: 28px;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .section-title, .section-title--secondary {
    font-size: 48px;
  }
}

.section-subTitle--secondary {
  color: #141E1C;
}

.section-title--secondary {
  color: #141E1C;
}
.section-title--secondary span {
  font-family: "Montserrat", sans-serif;
}

.introduction-section {
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .introduction-section {
    padding-left: 80px;
  }
}

.introduction-section__inner {
  background-color: #ECEBE8;
  border-radius: 20px 0px 0px 20px;
}
@media only screen and (min-width: 768px) {
  .introduction-section__inner {
    padding: 110px 70px 140px;
    border-radius: 80px 0px 0px 80px;
  }
}

.introduction-content__inner {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .introduction-content__inner {
    margin: 0 auto;
  }
}

.introduction-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .introduction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media only screen and (min-width: 768px) {
  .introduction-text-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
  }
}

.introduction-content__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .introduction-content__text {
    font-size: 16px;
  }
}

.introduction-swiper-wrap .swiper-button-prev,
.introduction-swiper-wrap .swiper-button-next {
  color: #EAEAEA80;
}
.introduction-swiper-wrap .swiper-button-prev {
  position: absolute;
  top: 65%;
  left: -80px;
}
.introduction-swiper-wrap .swiper-button-next {
  position: absolute;
  top: 65%;
  right: -80px;
}
@media only screen and (min-width: 768px) {
  .introduction-swiper-wrap {
    margin-top: 70px;
  }
}

@media only screen and (min-width: 768px) {
  .introduction-swiper {
    max-width: 1140px;
  }
}

.introduction-swiper-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  border-radius: 0px !important;
}
.introduction-swiper-item img {
  width: 100%;
  height: 100%;
  max-width: 375px;
}

.introduction-swiper-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: #B61918;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  padding: 4px 10px;
}
@media only screen and (min-width: 768px) {
  .introduction-swiper-tag {
    font-size: 14px;
  }
}

.introduction-swiper-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background-color: #fff;
  padding: 14px 14px 18px;
}
@media only screen and (min-width: 768px) {
  .introduction-swiper-content {
    padding: 20px 20px 30px;
  }
}

.introduction-swiper-content-title {
  font-size: 16px;
  color: #333333;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .introduction-swiper-content-title {
    font-size: 20px;
  }
}

.introduction-swiper-content-text {
  font-size: 12px;
  color: #979797;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .introduction-swiper-content-text {
    font-size: 16px;
  }
}

.experience-section {
  padding: 82px 16px 100px;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .experience-section {
    padding: 110px 0px;
  }
}

.experience-text-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .experience-text-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
  }
}

.experience-content__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #141E1C;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .experience-content__text {
    font-size: 16px;
  }
}

.locations-swiper-item-first img {
  width: 100%;
  height: 100%;
  max-width: 291px;
  max-height: 314px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-first img {
    max-width: 392px;
    max-height: 560px;
  }
}

.locations-swiper-item-second {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-second {
    gap: 12px;
  }
}
.locations-swiper-item-second img {
  width: 100%;
  height: 100%;
  max-width: 236px;
  max-height: 154px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-second img {
    max-width: 422px;
    max-height: 274px;
  }
}

.locations-swiper-item-third {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-third {
    gap: 12px;
  }
}
.locations-swiper-item-third img {
  width: 100%;
  height: 100%;
  max-width: 321px;
  max-height: 209px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-third img {
    max-width: 574px;
    max-height: 372px;
  }
}

.locations-swiper-item-third-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-third-bottom {
    gap: 13px;
  }
}
.locations-swiper-item-third-bottom img {
  width: 100%;
  height: 100%;
  max-width: 157px;
  max-height: 99px;
}
@media only screen and (min-width: 768px) {
  .locations-swiper-item-third-bottom img {
    max-width: 280px;
    max-height: 176px;
  }
}

.swiper-introduction-content {
  margin-left: -13%;
}

/* スライダーのコンテナ */
.infinite-slider, .message-infinite-slider, .infinite-slider--second {
  margin-top: 32px;
  width: 100vw;
  max-width: none;
  height: 320px;
  overflow: hidden;
  margin: 60px calc(50% - 50vw) 0px !important;
}
@media only screen and (min-width: 768px) {
  .infinite-slider, .message-infinite-slider, .infinite-slider--second {
    width: 100vw;
    margin: 60px calc(50% - 50vw) 0px !important;
  }
}

.infinite-slider--second {
  height: 314px;
}
@media only screen and (min-width: 768px) {
  .infinite-slider--second {
    height: 560px !important;
  }
}

/* スライダーのwrapper - 一定速度にするため */
.infinite-slider .swiper-wrapper, .message-infinite-slider .swiper-wrapper,
.infinite-slider--second .swiper-wrapper {
  transition-timing-function: linear;
}

/* 各スライド */
.infinite-slider .swiper-slide, .message-infinite-slider .swiper-slide, .infinite-slider--second .swiper-slide {
  height: 320px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-right: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .infinite-slider .swiper-slide, .message-infinite-slider .swiper-slide, .infinite-slider--second .swiper-slide {
    margin-right: 30px;
    min-width: 360px !important;
  }
}

.infinite-slider--second .swiper-slide {
  height: 320px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-right: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .infinite-slider--second .swiper-slide {
    margin-right: 30px;
    height: 560px !important;
  }
}

/* スライド内のコンテンツ */
.slide-content {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
}

.slide-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.slide-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.slide-description {
  font-size: 14px;
  text-align: center;
  opacity: 0.9;
  max-width: 200px;
  line-height: 1.4;
}

/* アイコン */
.slide-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .infinite-slider .swiper-slide, .message-infinite-slider .swiper-slide, .infinite-slider--second .swiper-slide {
    height: 250px !important;
  }

  .infinite-slider--second .swiper-slide {
    height: auto !important;
    max-height: 314px;
  }

  .slide-number {
    font-size: 36px;
  }

  .slide-title {
    font-size: 20px;
  }
}
.history-content-wrapper {
  background-color: #fff;
}

@media only screen and (min-width: 768px) {
  .history-content__inner {
    border-radius: 80px 80px 0px 0px;
    background: #ECEBE8;
  }
}

.history-content-header {
  padding: 40px 16px 32px;
  border-radius: 20px 20px 0px 0px;
  background: #ECEBE8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .history-content-header {
    margin: 0 auto;
    max-width: 1140px;
    padding: 110px 16px 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-content-header {
    padding: 110px 40px 60px;
  }
}

.history-body-content {
  position: relative;
  width: 100vw;
  height: 100%;
  margin: 0px calc(50% - 50vw) 0px;
  min-height: 460px;
  position: relative;
  background-image: none;
  background: transparent;
}
@media only screen and (min-width: 768px) {
  .history-body-content {
    min-height: 720px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-body-content {
    min-height: 950px;
  }
}

.history-content-image--first img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: 149px;
}
@media only screen and (min-width: 768px) {
  .history-content-image--first img {
    top: 20%;
    max-width: 306px;
  }
}

.history-content-image--second img {
  max-width: 200px;
  position: absolute;
  top: 13%;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .history-content-image--second img {
    max-width: 439px;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.history-content-image--third img {
  max-width: 101px;
  position: absolute;
  top: 43%;
  right: 32%;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .history-content-image--third img {
    max-width: 212px;
    top: 10%;
    right: 20%;
  }
}

.history-content-image--fourth img {
  max-width: 154px;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .history-content-image--fourth img {
    max-width: 380px;
    top: 27%;
    bottom: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-content-image--fourth img {
    max-width: 260px;
  }
}

.history-content-image--message {
  position: relative;
  overflow: hidden;
  z-index: 10;
  position: absolute;
  bottom: -3px;
  width: 100%;
}

.message-infinite-slider .swiper-slide,
.message-infinite-slider img {
  border-radius: 0px;
  max-height: 75px;
}
@media only screen and (min-width: 768px) {
  .message-infinite-slider .swiper-slide,
.message-infinite-slider img {
    max-height: none;
  }
}

.message-infinite-slider {
  margin: 0px calc(50% - 50vw) 0px !important;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .message-infinite-slider {
    width: 100vw;
    margin: 0px calc(50% - 50vw) 0px !important;
  }
}
.message-infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.message-infinite-slider .swiper-slide {
  height: auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.message-infinite-slider .swiper-slide img {
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (min-width: 768px) {
  .message-infinite-slider .swiper-slide {
    margin-right: 40px;
  }
}

.history-content__text {
  margin-top: 30px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}

.consultation-section {
  position: relative;
  padding: 70px 16px 0px;
  background: #ECEBE8;
  border-radius: 0px 0px 20px 20px;
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .consultation-section {
    padding: 100px 0px;
    border-radius: 0px 0px 80px 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .consultation-section {
    padding: 40px;
  }
}
.consultation-section::after {
  top: -200px;
  width: 129vw;
  height: 1074px;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: -40px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 42%;
  background: inherit;
  border-radius: 0px 0px 20px 20px;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .consultation-section::after {
    bottom: -90px;
    border-radius: 0px 0px 80px 80px;
  }
}

@media only screen and (min-width: 768px) {
  .consultation-content__inner {
    max-width: 1140px;
    margin: 0 auto;
  }
}

.consultation-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}
@media only screen and (min-width: 768px) {
  .consultation-content {
    gap: 20px;
  }
}

.consultation-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 550px;
  width: 100%;
  margin: auto;
  padding: 30px 16px 40px;
  background-color: #B61918;
  border-radius: 20px;
  background-image: url("./src/img/top/card-logo.svg");
  background-size: contain;
  background-position: center bottom -23px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .consultation-card {
    min-height: 338px;
    flex-direction: row;
    padding: 95px 80px;
    max-width: 1140px;
    justify-content: space-between;
    background-position: center;
    border-radius: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .consultation-card {
    min-height: 265px;
    padding: 15px 70px;
    background-position: bottom;
  }
}

.consultation-card__inner {
  width: 100%;
}

.consultation-card--second {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 550px;
  width: 100%;
  margin: auto;
  padding: 40px 16px;
  background-color: #333333;
  border-radius: 20px;
  background-image: url("./src/img/top/card-logo2.svg");
  background-size: contain;
  background-position: center bottom -23px;
  background-repeat: no-repeat;
  min-height: 197px;
}
@media only screen and (min-width: 768px) {
  .consultation-card--second {
    min-height: 338px;
    flex-direction: row;
    padding: 95px 80px;
    max-width: 1140px;
    justify-content: space-between;
    background-position: center;
    border-radius: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .consultation-card--second {
    min-height: 265px;
    padding: 15px 70px;
    background-position: bottom;
  }
}

.consultation-card__title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consultation-card__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .consultation-card__title {
    font-size: 48px;
  }
}

.consultation-card__text {
  margin-top: 11px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .consultation-card__text {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.9;
  }
}

.consultation-card__button-sp {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #1A1A1A;
}
@media only screen and (min-width: 768px) {
  .consultation-card__button-sp {
    display: none;
  }
}

.consultation-card__button-sp--second {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #B61918;
}
@media only screen and (min-width: 768px) {
  .consultation-card__button-sp--second {
    display: none;
  }
}

.consultation-card__button, .consultation-card__button--second {
  display: none;
  transition: all 0.3s ease;
  transform: translateY(-10px);
}
.consultation-card__button:hover, .consultation-card__button--second:hover {
  opacity: 0.9;
}
.consultation-card__button:hover img, .consultation-card__button--second:hover img {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .consultation-card__button, .consultation-card__button--second {
    position: relative;
    display: block;
    width: 100%;
    max-width: 265px;
  }
}
.consultation-card__button a, .consultation-card__button--second a {
  display: block;
  background-color: #141E1C;
  padding: 21px 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
}
.consultation-card__button a:hover, .consultation-card__button--second a:hover {
  opacity: 0.9;
}
.consultation-card__button img, .consultation-card__button--second img {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.3s ease;
}

.section-btn {
  display: block;
  padding: 13px;
  width: 48px;
  height: 48px;
  background-color: #1A1A1A;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
}
.section-btn p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .section-btn {
    position: relative;
    display: block;
    padding: 20px 40px;
    width: 100%;
    height: 60px;
    max-width: 265px;
  }
  .section-btn:hover {
    opacity: 0.9;
  }
  .section-btn:hover img {
    transform: translate(3px, -15px);
  }
}
.section-btn img {
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .section-btn img {
    right: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

.consultation-card__button--second a {
  background-color: #B61918;
}

.service-detail-section {
  position: relative;
  display: grid;
  place-items: center;
  padding: 80px 16px 50px;
  background-image: url("./src/img/sauna/bg_content.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .service-detail-section {
    padding: 215px 40px 150px;
    background-image: url("./src/img/sauna/bg_content.png");
  }
}

@media only screen and (min-width: 768px) {
  .service-detail-content__inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
  }
}

.service-detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
}
@media only screen and (min-width: 768px) {
  .service-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.service-detail-text-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-detail-text-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
  }
}

.service-detail {
  min-width: 200px;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .service-detail {
    min-width: 320px;
    height: 100%;
  }
}

.service-detail-title {
  width: 100%;
  max-width: 200px;
}
@media only screen and (min-width: 768px) {
  .service-detail-title {
    max-width: 320px;
  }
}

.service-detail-subTitle {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-detail-subTitle {
    margin-top: 16px;
    font-size: 20px;
  }
}

.service-detail-text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  text-align: left;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-detail-text {
    font-size: 16px;
  }
}

.service-detail-content__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .service-detail-content__title {
    font-size: 40px;
  }
}

.service-detail-content__text {
  margin-top: 30px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}

.history-page {
  background-color: #fff;
  overflow: hidden;
}

.history-header {
  margin-left: 5%;
  overflow: hidden;
  opacity: 0;
  background-size: 130%;
  animation: fadeInScale 1.4s ease-out forwards;
  border-radius: 0 0 0 40px;
}
@media only screen and (min-width: 768px) {
  .history-header {
    border-radius: 0 0 0 80px;
  }
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    background-size: 110%;
  }
}
.history-header__img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease-out, transform 1.8s ease-out;
  display: block;
  width: 100%;
  height: auto;
}
.history-header__img.active {
  opacity: 1;
  transform: scale(1);
}

.history-header__inner {
  padding: 100px 50px 0px;
  min-height: 591px;
  background-size: cover;
  background-position: center left 16px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .history-header__inner {
    background-position: center;
  }
}

.history-content {
  padding: 45px 16px 80px;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .history-content {
    padding: 100px 0px 140px;
    max-width: 1140px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1440px) {
  .history-content {
    padding: 100px 40px 140px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-content {
    max-width: 1360px;
  }
}

.history-content__text {
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-content__text {
    font-size: 20px;
  }
}

.history-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #B61918;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-title {
    font-size: 6rem;
  }
}

.history-subTitle {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-subTitle {
    font-size: 20px;
  }
}

.history-content__title {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-content__title {
    margin-top: 60px;
    font-size: 36px;
  }
}

.history-detail {
  width: 100%;
  margin: 0 auto;
}
.history-detail__list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.history-detail__item {
  display: flex;
  flex-direction: column;
  gap: 0px;
  position: relative;
  padding: 0px 0px 60px 13px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.history-detail__item::before {
  position: absolute;
  top: 9px;
  left: -5px;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #B61918;
  border-radius: 50%;
  z-index: 1;
}
.history-detail__item::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #BABABA;
  transform: translateY(10px);
}
.history-detail__item:last-child::after {
  display: none;
}
.history-detail__item.fade-in {
  opacity: 1;
  transform: translateY(0);
}
@media only screen and (min-width: 768px) {
  .history-detail__item {
    padding: 0px 0px 80px 26px;
    flex-direction: row;
    gap: 114px;
  }
  .history-detail__item::before {
    position: absolute;
    top: 10px;
    left: -10px;
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: #B61918;
    border-radius: 50%;
    z-index: 1;
  }
  .history-detail__item::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #BABABA;
  }
}

.history-feature {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.history-feature.fade-in {
  opacity: 1;
  transform: translateY(0);
}
@media only screen and (min-width: 768px) {
  .history-feature {
    flex-direction: row;
    gap: 114px;
  }
}

.history-detail__item__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #1A1A1A;
  font-family: "Montserrat", sans-serif;
  text-wrap: nowrap;
}
.history-detail__item__title span {
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .history-detail__item__title {
    min-width: 123px;
    font-size: 32px;
  }
}

@media only screen and (min-width: 768px) {
  .history-detail__item__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.history-detail__item__text {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-detail__item__text {
    margin-top: 0px;
    font-size: 18px;
  }
}

.history-detail__inner {
  padding: 40px 16px;
  background: #ECEBE8;
  border-radius: 0px 40px 40px 0px;
}
@media only screen and (min-width: 768px) {
  .history-detail__inner {
    margin-right: 80px;
    padding: 140px 70px 140px 70px;
    border-radius: 0px 80px 80px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-detail__inner {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-detail__inner {
    padding: 140px 70px 140px 12%;
  }
}

.history-detail__item__img {
  margin-top: 10px;
}

.history-detail__logo {
  margin-top: 15px;
  margin-left: auto;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  transform: translateX(8px);
}

.history-feature-section {
  position: relative;
  padding: 120px 16px 80px;
}
@media only screen and (min-width: 768px) {
  .history-feature-section {
    padding: 260px 16px 140px;
  }
}

.history-feature-logo {
  position: absolute;
  top: 15px;
  right: -8px;
  max-width: 242px;
}
@media only screen and (min-width: 768px) {
  .history-feature-logo {
    max-width: 740px;
  }
}

.history-feature-wrap {
  padding: 20px 16px;
  background-color: #EAEAEA;
}
@media only screen and (min-width: 768px) {
  .history-feature-wrap {
    padding: 70px 16px;
  }
}

@media only screen and (min-width: 768px) {
  .history-features-body {
    padding-top: 40px;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1920px) {
  .history-features-body {
    max-width: 1340px;
  }
}

.history-features-subTitle {
  font-size: 10px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .history-features-subTitle {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-features-subTitle {
    font-size: 20px;
  }
}

.history-features-title {
  font-size: 28px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-features-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-features-title {
    font-size: 62px;
  }
}

.history-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media only screen and (min-width: 768px) {
  .history-features {
    margin-top: 70px;
    gap: 100px;
  }
}

.history-feature {
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  padding-right: 16px;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
.history-feature:nth-child(2n) {
  padding-right: 0px;
  padding-left: 16px;
}
.history-feature:nth-child(2n) .history-feature-content {
  padding-left: 0px;
}
@media only screen and (min-width: 768px) {
  .history-feature {
    gap: 50px;
    flex-direction: row;
  }
  .history-feature:nth-child(2n) {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-feature {
    padding-right: 40px;
    flex-direction: column;
  }
  .history-feature:nth-child(2n) {
    padding-right: 0px;
    padding-left: 40px;
    flex-direction: column;
  }
  .history-feature:nth-child(2n) .history-feature-content {
    transform: translateX(-40px);
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature:nth-child(2n) .history-feature-content {
    padding: 88px 0px 88px 40px;
  }
}

@media only screen and (min-width: 768px) {
  .history-feature-image {
    max-width: 740px;
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-feature-image {
    max-width: 990px;
  }
}
@media only screen and (min-width: 1600px) {
  .history-feature-image {
    max-width: 900px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature-image {
    max-width: 1100px;
  }
}

.history-feature-content {
  margin: 0 auto;
  padding: 0px 16px;
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .history-feature-content {
    margin: 0;
    padding: 88px 0px;
    width: 100%;
    max-width: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-feature-content {
    padding: 0px;
    margin: auto;
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature-content {
    margin: 0 auto;
    max-width: 800px;
    padding: 88px 40px 88px 0px;
  }
}

.history-feature-number {
  font-size: 72px;
  font-weight: 700;
  color: #ECEBE8;
  font-family: "Montserrat", sans-serif;
  line-height: 0.9;
}
@media only screen and (min-width: 768px) {
  .history-feature-number {
    font-size: 96px;
  }
}

.history-feature-title {
  font-size: 22px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-feature-title {
    margin-top: 16px;
    font-size: 32px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature-title {
    font-size: 52px;
  }
}

.history-feature-sub-title {
  margin-top: 10px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-feature-sub-title {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature-sub-title {
    font-size: 20px;
  }
}

.history-feature-text {
  margin-top: 20px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .history-feature-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1920px) {
  .history-feature-text {
    font-size: 18px;
  }
}

.sauna360-section {
  background-color: #ECEBE8;
  padding: 60px 16px 8px;
  border-radius: 40px 40px 0px 0px;
}
@media only screen and (min-width: 768px) {
  .sauna360-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-direction: row;
    padding: 100px 80px;
    min-height: 940px;
    max-height: 940px;
    height: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .sauna360-section {
    padding: 100px 40px 40px;
    flex-direction: column;
    max-height: 1140px;
    box-sizing: border-box;
    gap: 0px;
  }
}
@media only screen and (min-width: 1550px) {
  .sauna360-section {
    justify-content: center;
    padding: 100px 150px;
  }
}
@media only screen and (min-width: 1920px) {
  .sauna360-section {
    gap: 100px;
  }
}

@media only screen and (min-width: 768px) {
  .sauna360-content {
    max-width: 460px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .sauna360-content {
    width: 100%;
    max-width: none;
  }
}

.sauna360-subTitle {
  font-size: 11px;
  font-weight: 700;
  color: #B71918;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .sauna360-subTitle {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

.sauna360-logo {
  width: 100%;
  max-width: 400px;
}
@media only screen and (min-width: 768px) {
  .sauna360-logo {
    max-width: 420px;
  }
}

.sauna360-title {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .sauna360-title {
    margin-top: 80px;
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .sauna360-title {
    margin-top: 24px;
  }
}
@media only screen and (min-width: 1920px) {
  .sauna360-title {
    font-size: 40px;
  }
}

.sauna360-text-wrap {
  margin-top: 24px;
}
@media only screen and (min-width: 768px) {
  .sauna360-text-wrap {
    margin-top: 40px;
  }
}

.sauna360-text__item {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .sauna360-text__item {
    white-space: nowrap;
  }
}
@media only screen and (min-width: 1920px) {
  .sauna360-text__item {
    font-size: 18px;
  }
}

/* スライダーのコンテナ */
.history-slider {
  margin-top: 32px;
  width: 100vw;
  max-width: none;
  height: 314px;
  overflow: hidden;
  margin: 60px calc(50% - 50vw) 0px !important;
}
@media only screen and (min-width: 768px) {
  .history-slider {
    width: 100vw;
    height: 560px !important;
    margin: 60px calc(50% - 50vw) 0px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-slider {
    width: 100vw;
    margin: 60px calc(50% - 50vw) 0px !important;
    height: 320px !important;
  }
}

/* スライダーのwrapper - 一定速度にするため */
.history-slider .swiper-wrapper {
  transition-timing-function: linear;
}

.history-slider .swiper-slide {
  height: 320px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-right: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .history-slider .swiper-slide {
    margin-right: 30px;
    max-height: 513px;
    height: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-slider .swiper-slide {
    margin-right: 10px;
  }
}

.swiper-history-content-pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  .swiper-history-content-pc {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 622px;
    width: 100%;
    height: 940px;
    position: relative;
    overflow: hidden;
  }
}
.swiper-history-content-pc .swiper-wrapper {
  transition-timing-function: linear;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .swiper-history-content-pc {
    display: none;
  }
}

.history-slider--column1,
.history-slider--column2 {
  height: 100%;
  width: calc(50% - 10px);
  position: absolute !important;
}

.history-slider--column1 {
  left: 0;
  top: 0;
}

.history-slider--column2 {
  left: calc(50% + 10px);
  top: 0;
}

.history-swiper-item-wrap, .history-swiper-item-wrap--small {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  border-radius: 10px !important;
}
.history-swiper-item-wrap img, .history-swiper-item-wrap--small img {
  width: 100%;
  height: 100%;
  max-width: 375px;
}

@media only screen and (min-width: 768px) {
  .history-swiper-item-wrap--small {
    max-height: 242px;
    height: 100% !important;
  }
}
@media only screen and (min-width: 1600px) {
  .history-swiper-item-wrap--small {
    max-height: 315px;
    height: 100% !important;
  }
}

.history-swiper-item-first img {
  width: 100%;
  height: 100%;
  max-width: 180px;
  max-height: 288px;
  border-radius: 0px;
}
@media only screen and (min-width: 768px) {
  .history-swiper-item-first img {
    max-width: 392px;
    max-height: 560px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-swiper-item-first img {
    max-width: 200px;
  }
}

.history-swiper-item-second {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media only screen and (min-width: 768px) {
  .history-swiper-item-second {
    gap: 12px;
  }
}
.history-swiper-item-second img {
  width: 100%;
  height: 100%;
  max-width: 180px;
  max-height: 140px;
  border-radius: 0px;
}
@media only screen and (min-width: 768px) {
  .history-swiper-item-second img {
    max-width: 422px;
    max-height: 274px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-swiper-item-second img {
    max-width: 200px;
  }
}

.history-swiper-item-third {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media only screen and (min-width: 768px) {
  .history-swiper-item-third {
    gap: 12px;
  }
}
.history-swiper-item-third img {
  width: 100%;
  height: 100%;
  max-width: 321px;
  max-height: 209px;
}
@media only screen and (min-width: 768px) {
  .history-swiper-item-third img {
    max-width: 574px;
    max-height: 372px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .history-swiper-item-third img {
    max-width: 200px;
  }
}

.only-sp {
  display: block !important;
}
@media only screen and (min-width: 768px) {
  .only-sp {
    display: none !important;
  }
}

.only-pc {
  display: none !important;
}
@media only screen and (min-width: 768px) {
  .only-pc {
    display: block !important;
  }
}

.slider-container {
  width: 100%;
  max-width: 309px;
  height: 940px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scroll 40s linear infinite;
}

.slider-wrapper-down {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scroll-down 40s linear infinite;
}

.history-swiper-column, .history-swiper-column--small {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}
.history-swiper-column img, .history-swiper-column--small img {
  height: 100%;
  max-height: 513px;
}

@media only screen and (min-width: 768px) {
  .history-swiper-column--small img {
    height: 100%;
    max-height: 242px;
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scroll-down {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-page {
  background-color: #fff;
  overflow: hidden;
}

.service-header {
  position: relative;
  background-image: url("./src/img/service/kv.webp");
  min-height: 50vh;
  border-radius: 0 0 0 40px;
  background-position: center left;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .service-header {
    min-height: 45vh;
    max-height: 620px;
    margin-left: 5%;
    border-radius: 0 0 0 80px;
  }
}
@media only screen and (min-width: 1650px) {
  .service-header {
    height: 100%;
    max-height: 800px;
  }
}

.service-header {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease-out, transform 1.8s ease-out;
}
.service-header.active {
  opacity: 1;
  transform: scale(1);
}
@media only screen and (min-width: 1220px) {
  .service-header {
    transform: none;
    background-size: 140%;
    animation: fadeInScale 1.4s ease-out forwards;
  }
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    background-size: 120%;
  }
}
.service-header__inner {
  position: relative;
  padding: 100px 50px 0px;
  min-height: 591px;
  background-size: cover;
  background-position: center left 16px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .service-header__inner {
    background-position: center;
  }
}

.service-kv__content {
  padding: 106px 16px 32px;
}
@media only screen and (min-width: 768px) {
  .service-kv__content {
    padding: 160px 40px 106px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
  }
}
@media only screen and (min-width: 1920px) {
  .service-kv__content {
    max-width: 1600px;
    padding: 180px 40px 116px 70px;
  }
}

.service-kv__title {
  max-width: 240px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-kv__title {
    max-width: 420px;
  }
}

.service-kv__text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-kv__text {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 700;
  }
}

.service-kv__img {
  display: none;
}
@media only screen and (min-width: 768px) {
  .service-kv__img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 530px;
  }
}
@media only screen and (min-width: 1650px) {
  .service-kv__img {
    max-width: 760px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .service-kv__img {
    display: none;
  }
}

.service-content {
  padding: 80px 16px 80px;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .service-content {
    padding: 100px 0px 140px;
    max-width: 1140px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1440px) {
  .service-content {
    padding: 100px 40px 140px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-content {
    padding: 100px 0px 140px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-content {
    max-width: 1360px;
  }
}

.service-content__text {
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-content__text {
    font-size: 20px;
  }
}

.service-title {
  margin-top: 5px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-title {
    margin-top: 10px;
    font-size: 3rem;
  }
}

.service-subTitle {
  font-size: 10px;
  font-weight: 700;
  color: #D91E33;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .service-subTitle {
    font-size: 14px;
  }
}

.service-about-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
@media only screen and (min-width: 768px) {
  .service-about-wrap {
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-about-wrap {
    margin-top: 30px;
    flex-direction: column;
  }
}

.service-about {
  margin-top: 24px;
  padding: 20px 12px 16px;
  border-radius: 15px;
  background-color: #ECEBE8;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-about {
    margin-top: 40px;
    padding: 26px 16px 16px;
    max-width: 452px;
    border-radius: 20px;
  }
}

.service-about-logo {
  display: block;
  margin: 0 auto;
  max-width: 176px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-about-logo {
    max-width: 226px;
  }
}

.service-about-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-about-list {
    margin-top: 18px;
    gap: 12px;
  }
}

.service-about-list__item {
  padding: 16px;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #1A1A1A;
  background-color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  border-radius: 8px;
}
@media only screen and (min-width: 768px) {
  .service-about-list__item {
    font-size: 16px;
    border-radius: 10px;
  }
}

@media only screen and (min-width: 768px) {
  .service-about-content {
    max-width: 647px;
  }
}

.service-about-content__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-about-content__title {
    font-size: 32px;
  }
}

.service-about-content__text {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-about-content__text {
    margin-top: 30px;
    font-size: 18px;
  }
}

.service-solution-section {
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .service-content__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
  }
}

.service-solution__inner {
  padding: 40px 16px;
  background: #ECEBE8;
  border-radius: 0px 40px 40px 0px;
}
@media only screen and (min-width: 768px) {
  .service-solution__inner {
    margin-right: 80px;
    padding: 140px 70px 140px 70px;
    border-radius: 0px 80px 80px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-solution__inner {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-solution__inner {
    padding: 140px 70px 140px 12%;
  }
}

.service-solution__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media only screen and (min-width: 768px) {
  .service-solution__list {
    margin-top: 60px;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-solution__list {
    display: flex;
    flex-direction: column;
    margin: 40px auto 0;
    max-width: 540px;
    gap: 40px;
  }
}

.service-solution__item__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .service-solution__item__inner {
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-solution__item__inner {
    flex-direction: column;
  }
}

.service-solution__head {
  position: relative;
  width: 100%;
  padding: 24px 16px;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;
}
@media only screen and (min-width: 768px) {
  .service-solution__head {
    max-width: 520px;
    padding: 44px 40px 46px 40px;
    border-radius: 20px 0px 0px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-solution__head {
    max-width: 550px;
    border-radius: 20px 20px 0px 0px;
  }
}

.service-solution__head-inner, .service-solution__body-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
@media only screen and (min-width: 768px) {
  .service-solution__head-inner, .service-solution__body-inner {
    gap: 12px;
  }
  .service-solution__head-inner img, .service-solution__body-inner img {
    width: 36px;
    height: 36px;
  }
}

.service-solution__head-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-solution__head-title {
    font-size: 28px;
  }
}

.service-solution__head-text {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-solution__head-text {
    margin-top: 16px;
    padding-left: 50px;
    font-size: 20px;
  }
}

.service-solution__body {
  position: relative;
  width: 100%;
  padding: 36px 16px 24px;
  background: linear-gradient(to bottom, #D91E33, #B80015);
  border-radius: 0px 0px 20px 20px;
}
.service-solution__body::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  border-style: solid;
  border-width: 22px 30px 0 30px;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
  z-index: 100;
}
@media only screen and (min-width: 768px) {
  .service-solution__body {
    max-width: 615px;
    padding: 44px 40px 46px 64px;
    border-radius: 0px 20px 20px 0px;
  }
  .service-solution__body::before {
    top: 69px;
    left: 17px;
    border-style: solid;
    border-width: 35px 105px 0 105px;
    translate: -50% 100%;
    transform: translateY(-50%) rotate(-90deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-solution__body {
    border-radius: 0px 0px 20px 20px;
  }
  .service-solution__body::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    border-style: solid;
    border-width: 22px 30px 0 30px;
    border-color: #fff transparent transparent;
    translate: -50% 100%;
    z-index: 100;
    transform: none;
  }
}

.service-solution__body-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-solution__body-title {
    font-size: 28px;
  }
}

.service-solution__body-text {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-solution__body-text {
    margin-top: 16px;
    padding-left: 50px;
    font-size: 20px;
  }
}

.service-feature-section {
  position: relative;
  padding: 120px 16px 80px;
}
@media only screen and (min-width: 768px) {
  .service-feature-section {
    padding: 253px 16px 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-feature-section {
    padding: 120px 40px 80px;
  }
}

.service-feature-wrap {
  padding: 20px 16px;
  background-color: #EAEAEA;
}
@media only screen and (min-width: 768px) {
  .service-feature-wrap {
    padding: 70px 16px;
  }
}

@media only screen and (min-width: 768px) {
  .service-features-body {
    max-width: 1210px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1920px) {
  .service-features-body {
    max-width: 1340px;
  }
}

.service-features-subTitle {
  font-size: 10px;
  color: #B61918;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .service-features-subTitle {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-features-subTitle {
    font-size: 20px;
  }
}

.service-features-title {
  font-size: 28px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-features-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-features-title {
    font-size: 62px;
  }
}

.service-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}
@media only screen and (min-width: 768px) {
  .service-features {
    margin-top: 100px;
    gap: 100px;
  }
}

.service-feature {
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: calc(var(--item-index) * 0.15s);
  will-change: opacity, transform;
}
.service-feature.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.service-feature:nth-child(2n) {
  padding-right: 0px;
  padding-left: 16px;
}
@media only screen and (min-width: 768px) {
  .service-feature {
    gap: 50px;
    flex-direction: row;
    align-items: center;
  }
  .service-feature:nth-child(2n) {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-feature {
    flex-direction: column;
  }
  .service-feature:nth-child(2n) {
    flex-direction: column;
  }
}

@media only screen and (min-width: 768px) {
  .service-feature-image {
    max-width: 740px;
    min-width: 660px;
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-feature-image {
    max-width: 550px;
    min-width: 450px;
  }
}
@media only screen and (min-width: 1600px) {
  .service-feature-image {
    max-width: 900px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-feature-image {
    max-width: 1100px;
  }
}

.service-feature-content {
  margin: 0 auto;
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
  .service-feature-content {
    margin: 0;
    padding: 88px 0px;
    width: 100%;
    max-width: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-feature-content {
    padding: 0px;
  }
}
@media only screen and (min-width: 1900px) {
  .service-feature-content {
    margin: 0 auto;
    max-width: 1000px;
  }
}

.service-feature-number {
  font-size: 72px;
  font-weight: 700;
  color: #ECEBE8;
  font-family: "Montserrat", sans-serif;
  line-height: 0.9;
}
@media only screen and (min-width: 768px) {
  .service-feature-number {
    font-size: 96px;
  }
}

.service-feature-title {
  font-size: 20px;
  color: #1A1A1A;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-feature-title {
    margin-top: 16px;
    font-size: 32px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-feature-title {
    font-size: 52px;
  }
}

.service-feature-sub-title {
  margin-top: 10px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-feature-sub-title {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-feature-sub-title {
    font-size: 20px;
  }
}

.service-feature-text {
  margin-top: 20px;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-feature-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-feature-text {
    font-size: 18px;
  }
}

.service-tv-section {
  margin-top: 115px;
  padding: 0px 16px;
}
@media only screen and (min-width: 768px) {
  .service-tv-section {
    margin-top: 145px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-tv-section {
    padding: 0px 40px;
  }
}

.service-tv-section__inner {
  margin-top: 115px;
  padding: 0px 16px 24px;
  max-height: 365px;
  border-radius: 20px;
  background-image: url("./src/img/service/bg_tv-service-sp.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .service-tv-section__inner {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    max-height: 288px;
    border-radius: 40px;
    background-image: url("./src/img/service/bg_tv-service.webp");
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-tv-section__inner {
    flex-direction: column;
    max-height: 430px;
  }
}

.service-tv-section__img {
  margin: 0 auto;
  max-width: 214px;
  width: 100%;
  transform: translateY(-60px);
}
@media only screen and (min-width: 768px) {
  .service-tv-section__img {
    max-width: 530px;
    transform: translate(-20px, -45px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-tv-section__img {
    max-width: 380px;
  }
}

.service-tv-section__content-wrap {
  transform: translateY(-65px);
}
@media only screen and (min-width: 768px) {
  .service-tv-section__content-wrap {
    padding: 62px 0px 64px;
    transform: translateX(-30px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-tv-section__content-wrap {
    padding: 30px 0px 20px;
    max-width: 600px;
    margin: auto;
    transform: translateY(-65px);
  }
}

.service-tv-section__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .service-tv-section__title {
    font-size: 32px;
    line-height: 1.5;
    text-align: left;
  }
}

.service-tv-section__text {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .service-tv-section__text {
    margin-top: 8px;
    font-size: 18px;
    text-align: left;
  }
}

.service-btn-block {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-btn-block {
    margin-top: 20px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-btn-block {
    justify-content: center;
  }
}

.service-btn-block-second {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-btn-block-second {
    margin-top: 20px;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-btn-block-second {
    justify-content: center;
  }
}

.service-kv-btn-block {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-kv-btn-block {
    margin-top: 40px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
  }
}

.service-btn-wrap {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-btn-wrap {
    max-width: 265px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .service-btn-wrap {
    max-width: 400px;
  }
}

.service-btn, .service-btn--second {
  position: relative;
  display: block;
  padding: 13px;
  max-width: 400px;
  width: 100%;
  height: 60px;
  background-color: #1A1A1A;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-wrap: nowrap;
  transition: all 0.3s ease;
  letter-spacing: 0.04em;
}
.service-btn p, .service-btn--second p {
  line-height: 2.1;
}
.service-btn:hover, .service-btn--second:hover {
  opacity: 0.9;
}
.service-btn:hover img, .service-btn--second:hover img {
  transform: translate(3px, -15px);
}
@media only screen and (min-width: 768px) {
  .service-btn, .service-btn--second {
    position: relative;
    display: block;
    padding: 20px 40px;
    width: 100%;
    height: 60px;
  }
  .service-btn p, .service-btn--second p {
    line-height: 1.4;
  }
}
.service-btn img, .service-btn--second img {
  transition: all 0.3s ease;
  right: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-btn img, .service-btn--second img {
    right: 15px;
  }
}

.service-btn--second {
  background-color: #D91E33;
}

.service-solution-section {
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .service-content__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
  }
}

.service-flow__inner {
  padding: 60px 16px;
  background: #ECEBE8;
  border-radius: 40px 0px 0px 40px;
}
@media only screen and (min-width: 768px) {
  .service-flow__inner {
    margin-left: 5%;
    padding: 100px 70px 100px 70px;
    border-radius: 80px 0px 0px 80px;
  }
}
@media only screen and (min-width: 1920px) {
  .service-flow__inner {
    padding: 100px 12% 100px 70px;
  }
}

.service-flow__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (min-width: 768px) {
  .service-flow__list {
    margin: 60px auto 0;
    gap: 35px;
    flex-direction: row;
    max-width: 1140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-flow__list {
    max-width: 440px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
}

.service-flow__item {
  position: relative;
}
.service-flow__item::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  border-style: solid;
  border-width: 12px 9px 0 9px;
  border-color: #D91E33 transparent transparent;
  translate: -50% 100%;
  z-index: 100;
}
@media only screen and (min-width: 768px) {
  .service-flow__item::after {
    bottom: 50%;
    left: auto;
    right: -41px;
    border-width: 15px 11px 0 11px;
    transform: rotate(-90deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-flow__item::after {
    bottom: -8%;
    left: auto;
    right: 50%;
    border-width: 15px 11px 0 11px;
    transform: none;
    translate: 0% 100%;
  }
}
.service-flow__item:last-child::after {
  display: none;
}

.service-flow__item__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .service-flow__item__inner {
    flex-direction: column;
    padding: 20px 15px 25px;
    min-width: 258px;
    gap: 10px;
    border-radius: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-flow__item__inner {
    flex-direction: row;
  }
}

.service-flow__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-flow__content {
    gap: 12px;
  }
}

.service-flow__title {
  padding: 4px 13px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  background-color: #D91E33;
  border-radius: 15px;
}
.service-flow__title span {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .service-flow__title {
    font-size: 16px;
  }
  .service-flow__title span {
    font-size: 14px;
  }
}

.service-flow__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-flow__text {
    font-size: 20px;
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-flow__text {
    display: block;
  }
}

.service-flow__text--second {
  display: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-flow__text--second {
    display: block;
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .service-flow__text--second {
    display: none;
  }
}

.service-flow__img {
  max-width: 64px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-flow__img {
    max-width: 96px;
  }
}

.service-support-section {
  margin-top: 115px;
  padding: 0px 16px;
}
@media only screen and (min-width: 768px) {
  .service-support-section {
    margin-top: 145px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .service-support-section {
    padding: 0px 40px;
  }
}

.service-support-section__inner {
  margin-top: 80px;
  padding: 32px 16px;
  border-radius: 20px;
  background-image: url("./src/img/service/bg_support.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .service-support-section__inner {
    margin-top: 140px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px 0;
    border-radius: 40px;
    background-image: url("./src/img/service/bg_support.webp");
  }
}

.service-support-section__img {
  margin: 0 auto;
  max-width: 190px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .service-support-section__img {
    max-width: 226px;
  }
}

.service-support-section__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .service-support-section__title {
    font-size: 32px;
    text-align: left;
  }
}

.service-support-section__text {
  margin-top: 21px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .service-support-section__text {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }
}

.service-support__list {
  margin: 21px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-support__list {
    max-width: 550px;
    margin: 32px auto;
    gap: 15px;
  }
}

.service-support__item__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .service-support__item__inner {
    padding: 20px 40px;
    min-width: 258px;
    border-radius: 20px;
  }
}

.service-support__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .service-support__content {
    gap: 12px;
  }
}

.service-support__title {
  padding: 1px 13px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  background-color: #D91E33;
  border-radius: 15px;
  letter-spacing: 0.64px;
}
.service-support__title span {
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .service-support__title {
    font-size: 14px;
  }
  .service-support__title span {
    font-size: 16px;
  }
}

.service-support__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #1A1A1A;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-support__text {
    font-size: 18px;
  }
}

.service-support__subText {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 768px) {
  .service-support__subText {
    font-size: 16px;
  }
}

.not-found-page {
  background-color: #ECEBE8;
}

/*
    Template: swell
    Theme Name: helo-japan
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/*# sourceMappingURL=style.css.map */