@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    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
*/

/* ヘッダーバーのLINEボタン */
.line-btn-header {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #00BA00;
  padding: 0px 4px;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(6,199,85,0.15);
  transition: background 0.2s;
  width: 230px;
  height: 30px;
  margin: 8px 6px 0px;
}
.line-btn-header img {
  height: 20px;
  margin: 0 4px 0 6px;
}
.line-btn-header:hover {
  color: #fff;
  background: #13e067;
}
span.header-msg {
  display: inline-block;
  height: 24px;
  line-height: 18px;
  vertical-align: middle;
  margin-right: 1em;
}
.l-header__bar .c-catchphrase {
  width: 100%;
}

/* ヘッダーバー */
.l-header__bar .c-catchphrase {
  font-size: 110%;
  font-weight: 600;
  margin: .2em 0;
  line-height: 2.4;
}

/* グローバルナビ文字サイズ */
@media (min-width: 1280px) {
  .c-gnav>.menu-item>a .ttl {
    font-size: 1.2rem;
  }
}
@media (max-width: 1279px) {
  .c-gnav>.menu-item>a .ttl {
    font-size: 1.0rem;
  }
}

/* ボタン内の右矢印 */
.is-style-btn_normal a {
  position: relative;
  padding-right: 48px;
  line-height: 1.8;
}
.is-style-btn_normal a::after {
  content: "";
  position: absolute;
  top: 52%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  background-image: url('./img/arrow-r.png');
  background-size: 36px 36px;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 背景色を左1:右5 */
@media screen and (min-width: 960px) {
  .bg-right-5 {
    background: linear-gradient(to right, white 0%, white 16.6667%, #F2F2F2 16.6667%, #F2F2F2 100%);
  }
}

/* 電話テキストボタン */
.button-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin:0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 60px;
  background-color: #F8931F;
  color: #fff;
  font-size: 1.2em;
}
/*
.button-2:hover {
    background-color: #ed4a21;
}
*/

.w-frontTop {
  margin-bottom: 0;
}


/* タブの左右上の丸み */
.c-tabList__button {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border: 2px solid #F8931F;
}
/* タブ下のテキストエリア */
.tab-bottom-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 99%;
  margin:0 auto;
  padding: .9em 2em;
  border: none;
  background-color: #F8931F;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 3rem;
}
/* タブ調整 */
.c-tabList .c-tabList__item {
  margin: 0;
}
.is-style-balloon>.c-tabList .c-tabList__item {
  padding: 0 4.2px;
}
.is-style-balloon>.c-tabList .c-tabList__button {
    background: hsl(0deg 0% 100% / 15%);
}
@media (max-width: 959px) {
 .is-style-balloon>.c-tabList .c-tabList__item {
    padding: 0 4px;
　} 
}
@media (max-width: 600px) {
 .is-style-balloon>.c-tabList .c-tabList__item {
    padding: 0 1.6px;
　} 
}

/* フルワイドなテキスト */
.full-w-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin:0 auto;
  padding: .9em 2em;
  background-color: #F8931F;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;

}

/* 見出しh3 */
@media (min-width: 600px) {
  .post_content h3 {
    font-size: 1.6rem;
  }
}

/* タブ内の左右調整 */
.p-lr-3 {
  padding: 0 3em;
}
@media (max-width: 959px) {
  .p-lr-3 {
    padding: 0 1rem;
  }
}

/* 下線の破線 */
.text-with-background-underline {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-bottom: 32px;
  background-image: url('img/bg-underline.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 14px;
}
.left-image {
  display: inline-block;
  width: 195px;
  margin-right: 1em;
  vertical-align: middle;
}
.parent {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center;     /* 縦方向中央寄せ */
  height: 20vh;            /* 例：画面全体の高さ */
}
.text-title {
  text-align: center;
  font-size: clamp(16px, 2vw, 30px);
}

/* リストの下線 */
.-list-under-dashed>li, .border_bottom>li {
  border-bottom: 2px dashed #FFFD04;
}

/* カラム背景 */
.bg-trainer {
  background: #FCE2D1;
}

/* お客様の声 */
/*Flickityで使うカルーセル周りのCSS追加*/
.flickity-carousel {
  width: 96%;
  /*height: 285px !important;*/
}
@media (max-width: 959px) {
  .flickity-carousel {
    height: 180px !important;
  }
}
.flickity-carousel .wp-block-image {
  width: 100%;
  height: 100%;
}
.flickity-carousel .flickity-prev-next-button {
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.flickity-page-dots {
    padding-left: 0 !important;
}
.flickity-carousel .flickity-prev-next-button.next {
  right: 2px;
}
.flickity-carousel .flickity-prev-next-button.previous {
  left: 2px;
}
/* ギャラリーの高さを強制指定 */
.wp-block-gallery.flickity-parent-gallery {
  height: 222px !important;
}
/* 横の位置調整 */
.flickity-carousel.flickity-enabled {
  margin-left: 2em !important;
}
/* タブレット以下 */
@media (max-width: 959px) {
  .wp-block-gallery.flickity-parent-gallery {
    height: 234px !important;
  }
  .flickity-carousel.flickity-enabled {
    /*height: 234px !important;*/
    /*margin-left: 1em !important;*/
  }
}

/* メッセージボード */
/* 上段の画像はボックスの上部中央 */
.top-image {
  display: block;
  margin: 0 auto 12px auto; /* 上下マージン、横中央配置 */
  max-width: 100%;
  height: auto;
}

/* box-withは没 */
.box-with-1 {
  position: relative;
  background-color: #fff;
  border-bottom: 2px solid #e6603d;
  padding: 16px;
  margin: 0 auto;
  box-sizing: border-box;

  border-radius: 0 0 12px 12px; 
  overflow: hidden;
}
/* 左右の線 */
.box-with-1::before,
.box-with-1::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e6603d;
  /* 疑似要素にも角を丸く */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
/* 左右の線は左右端 */
.box-with-1::before {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 12px;
}
.box-with-1::after {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 12px;
}

.box-with-2 {
  position: relative;
  background-color: #fff;
  border-bottom: 2px solid #FBB03B;
  padding: 16px;
  margin: 0 auto;
  box-sizing: border-box;

  border-radius: 0 0 12px 12px; 
  overflow: hidden;
}
/* 左右の線 */
.box-with-2::before,
.box-with-2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #FBB03B;
  /* 疑似要素にも角を丸く */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
/* 左右の線は左右端 */
.box-with-2::before {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 12px;
}
.box-with-2::after {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 12px;
}

.box-with-3 {
  position: relative;
  background-color: #fff;
  border-bottom: 2px solid #F8931F;
  padding: 16px;
  margin: 0 auto;
  box-sizing: border-box;

  border-radius: 0 0 12px 12px; 
  overflow: hidden;
}
/* 左右の線 */
.box-with-3::before,
.box-with-3::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #F8931F;
  /* 疑似要素にも角を丸く */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
/* 左右の線は左右端 */
.box-with-3::before {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 12px;
}
.box-with-3::after {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 12px;
}

/*
 * グローバルナビのフルワイド表示
 */
/* l-header__inner と l-container クラスを持つ要素を画面フル幅にする */
/* 通常時 */
.l-header__inner.l-container {
    width: 100vw; /* ビューポートの幅いっぱいに広げる */
    max-width: none; /* 最大幅の制限を解除 */
    margin-left: calc(50% - 50vw); /* 要素を画面の左端に揃える */
    margin-right: calc(50% - 50vw); /* 要素を画面の右端に揃える */
    padding-left: 0; /* 元々パディングがある場合はリセット */
    padding-right: 0; /* 元々パディングがある場合はリセット */
}

/* 固定ヘッダー時もフルワイド */
#fix_header {
  position: fixed;      /* 固定表示が必要なら */
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;         /* ビューポート幅いっぱい */
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1em;       /* お好みで余白調整 */
  margin: 0 auto;
  z-index: 9999;        /* 重なり順調整 */
  background-color: #fff; /* 背景色設定で透過防止 */
}

.l-fixHeader__inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0;
  margin: 0;
}


/*
 * メインビジュアルSNSボタン
 */
/* ========================================================= */
/* カスタム画像リンクボタンの配置とスタイル (右下) */
/* ========================================================= */
.custom-mainvisual-btn-wrap {
    position: absolute;
    bottom: -40px; /* ★メインビジュアルの下端からはみ出す量（調整してください） */
    right: 60px;  /* ★メインビジュアルの右端から30px内側（調整してください） */
    z-index: 10000;
    width: auto; /* ★ボタン全体の幅（画像サイズに合わせて調整） */
    max-width: 90%;
}
.custom-mainvisual-btn-img-link img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}
.custom-mainvisual-btn-img-link:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ========================================================= */
/* カスタム画像リンクボタンの配置とスタイル (左下)                      */
/* ========================================================= */
.custom-mainvisual-btn-wrap-left {
    position: absolute;
    bottom: 50px; /* ★メインビジュアルの下端からはみ出す量（右下と同じでOK） */
    left: 60px;  /* ★メインビジュアルの左端から30px内側（右下の 'right' を 'left' に変更） */
    z-index: 10000; /* 右下と同じz-indexでOK */
    width: auto; /* ★ボタン全体の幅（画像サイズに合わせて調整） */
    max-width: 90%;
}
.custom-mainvisual-btn-img-link-left img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}
.custom-mainvisual-btn-img-link-left:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}
/* ========================================================= */
/* カスタム画像リンクボタンの配置とスタイル (Before->After事例)         */
/* ========================================================= */
.custom-mainvisual-btn-wrap-diet {
    position: absolute;
    bottom: 17vw; /* ★メインビジュアルの下端からはみ出す量（右下と同じでOK） */
    left: 80px;  /* ★メインビジュアルの左端から30px内側（右下の 'right' を 'left' に変更） */
    z-index: 10000; /* 右下と同じz-indexでOK */
    width: auto; /* ★ボタン全体の幅（画像サイズに合わせて調整） */
    max-width: 100%;
}
@media (min-width: 1480px) {
  .custom-mainvisual-btn-wrap-diet {
    bottom: 20vw;
  }
}
.custom-mainvisual-btn-img-link-diet img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}
.custom-mainvisual-btn-img-link-diet:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}
/*
 * is-hiddenクラスがある時だけ非表示にする
 */
.custom-mainvisual-btn-wrap-diet.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

/* ========================================================= */
/* メインビジュアルの overflow: visible; を解除してはみ出しを許可 */
/* ========================================================= */
.p-mainVisual {
    overflow: visible !important;
    position: relative; /* これがボタンの基準点になります */
}
/* ========================================================= */
/* メインビジュアル直後のコンテンツエリアがボタンを覆い隠さないようにz-indexを調整 */
/* ========================================================= */
.p-top__contents {
    position: relative;
    z-index: 1; /* 画像ボタン (z-index:10000) より低い値に設定 */
}
/* ========================================================= */
/* スマートフォンでの表示調整 (右下) */
/* ========================================================= */
@media screen and (max-width: 767px) {
    .custom-mainvisual-btn-wrap {
        bottom: -15px;
        right: 15px;
        width: 180px;
    }
}
/* ========================================================= */
/* スマートフォンでの表示調整 (左下) ★★★ここから追加★★★ */
/* ========================================================= */
@media screen and (max-width: 767px) {
    .custom-mainvisual-btn-wrap-left {
        bottom: -15px; /* モバイルでのはみ出し量 */
        left: 15px;  /* モバイルでの左端からの距離 */
        width: 180px; /* モバイルでのボタン幅 */
    }
}

/* 横並びリスト */
.yoko-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* リスト項目も中央に */
  gap: 16px; /* 横並び間隔 */
  max-width: 100%;
}
.yoko-list li {
  /* 必要ならinline-blockやflex用の調整も追加可 */
}

/* 右サイドSNSボタン */
/* PCのみ表示 */
.fixed-icons {
  display: none;
}
@media screen and (min-width: 960px) {

.fixed-icons {
  position: fixed;
  top: 30%;
  right: 20px;

  /* 全体の背景色 */
  /*background-color: #44210D;*/
  background-color: #fd5b354a;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
   padding: 8px 12px;

  display: flex;
  flex-direction: column;
  gap: 0; /* ボタン間の隙間なしで境目をなくす */

  z-index: 999;
  /*box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);*/
  opacity: 0;              /* 初期は透明で非表示 */
  pointer-events: none;    /* 非表示時はクリック無効化 */
  transition: opacity 0.3s ease;
  }
.fixed-icons.show {
  opacity: 1;
  pointer-events: auto;
  }
.icon-btn {
  display: block;
  padding: 6px 0; /* 上下に少し余白を入れて押しやすく */
  background: transparent; /* ボタン自体は透明で境目なし */
  border: none;
  text-align: center; /* アイコン中央揃え */

  /* 境目を消すためにボーダーなし */
  border-bottom: none;
  margin: 0;

  transition: background-color 0.3s;
  }
/*.icon-btn:hover {
  background-color: rgba(255,255,255,0.1);
}*/
.icon-img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
  }
.icon-img-line {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
  }
/* 縦書きLINE */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding-right: 8px;
  padding-bottom: 12px;
  color: #fff;
  }

}

/* フッターのSNSアイコン */
.icon-row {
  display: flex;
  gap: 0 16px;
  justify-content: center;
}
.icon-row img {
  display: block;
}

/* 背景画像テキスト */
.overlay-text-01 {
  font-size: clamp(16px, 2.1vw, 30px);
  }
.overlay-text-02 {
  font-size: clamp(18px, 1.9vw, 36px);
}
@media screen and (min-width: 960px) {
.bg-image-01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1135 / 87;
  background: url('./img/bg-img-01.jpg') no-repeat center center / cover;
  }
.overlay-text-01 {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #000;
  /*font-size: 2vw;*/
  font-weight: 600;
  /*background: rgba(0,0,0,0.5);*/ /* 文字の後ろに半透明の背景 */
  padding: 16px 32px;
  border-radius: 8px;
  }

.bg-image-02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1901 / 81;
  background: url('./img/bg-img-02.jpg') no-repeat center center / cover;
  }
.overlay-text-02 {
  position: absolute;
  top: 50%;
  left: 71%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
  /*font-size: 1.6rem;*/
  font-weight: 600;
  /*background: rgba(0,0,0,0.5);*/ /* 文字の後ろに半透明の背景 */
  padding: 16px 32px;
  border-radius: 8px;
  }

}

/* メイン電話番号 */
.main-tel {
  display: flex;
  align-items: center;
}
.image-left {
  width: 84px;
  height: auto;
  margin-right: 16px;
}

/* お客さんの声 */
.voice-title {
  display: flex;
  align-items: center; /* 画像とテキストを縦中央揃え */
}
.image-left-voice {
  width: 84px;
  height: auto;
  margin-right: 16px;
  display: block;
}
.voice-title-bg {
  display: inline-block; /* テキスト幅に合わせて下線を引くため */
  color: #FD5B35;
  font-size: 2rem;
  font-weight: 600;
  padding-bottom: 6px; /* 下線とテキストの間隔 */
  border-bottom: 2px dashed #FD5B35; /* 破線の下線を追加 */
}


/* フッター電話番号 */
.footer-tel {
  color: #E8690A;
  font-size: 2rem;
  font-weight: 600;
}

/* テキストの左右余白 */
.pd-lr-1 {
  padding-left: 1em;
  padding-right: 1em;
}
.pd-l-3 {
  padding-left: 3em;
}

/* 見出しスタイル調整 */
.post_content h2 {
  margin: 0;
}
.post_content h3 {
  margin: 0 0 1em;
}
.h2-1 {
  margin: 0 1em 2em 0;
  text-align: center;
}

/* SP背景 */
.bg-sp-01 {
  background-color: #F8931F;
  padding: 1em;  
}
.bg-sp-02 {
  background-color: #000;
  padding: 1em;  
}

/* フッター余白を詰める */
.l-content {
  margin: 0 auto 0.25em;
}

/* タブテキストの色 */
.c-tabList__button {
  color: #F8931F;
}

/* お客様の声 背景画像 */
.bg-voice-01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1107 / 511;
  background: url('./img/d-bg-voice-01.png') no-repeat center center / cover;
}

/* スマホフッターのSNSアイコン */
/* LINE */
/*
#fix_bottom_menu ul.menu_list li.menu-item a[href*="http://line.me/ti/p/%40rlq7549s"] {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('img/icons8-line.png');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
  margin-top: 0.6em;
}*/
#fix_bottom_menu ul.menu_list li.menu-item a[href*='http://line.me/ti/p/%40rlq7549s'] {
  display: flex;                  /* 横並びで配置 */
  align-items: center;            /* 垂直中央揃え */
  width: auto;                    /* 必要に応じて自動調整 */
  height: 48px;                   /* アイコンの高さ指定 */
  padding-left: 46px;             /* アイコン用スペース */
  background-image: url('img/icons8-line.png');
  background-size: 48px 48px;     /* アイコンサイズ明示 */
  background-repeat: no-repeat;
  text-indent: 0;                 /* テキスト非表示を解除 */
  margin-top: 0.2em;
  color: inherit;                 /* テキスト色継承 */
  text-decoration: none;          /* 下線などを除去 */
}
#fix_bottom_menu span {
  font-size: 12px;
  color: #fff;
}
/* Instagram */
#fix_bottom_menu ul.menu_list li.menu-item a[href*="https://www.instagram.com/body.one.pt"] {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url('img/icons8-instagram.png');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px; /* 文字を隠す */
  margin-top: 0.2em;
}
/* Facebook */
#fix_bottom_menu ul.menu_list li.menu-item a[href*="https://m.facebook.com/FitnessStageKIMU/"] {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url('img/icons8-facebook.png');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px; /* 文字を隠す */
  margin-top: 0.2em;
}

/* スマホ固定フッターの背景色 */
#fix_bottom_menu {
  background-color: #fd5b35;
}
#fix_bottom_menu::before {
  background-color: #fd5b35;
}

/* h3の右に画像を入れる */
.h3-img-r1 {
  position: relative;
  padding-right: 40px; /* 画像のスペース */
}
.h3-img-r1::after {
  content: "";
  position: absolute;
  top: 95%;
  right: -10px;
  transform: translateY(-50%);
  width: 200px;
  aspect-ratio: 208 / 210;
  background-image: url('img/course-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 959px) {
.h3-img-r1::after {
  top: 40%;
  width: 80px;
  }
}

.h3-img-r2 {
  position: relative;
  padding-right: 40px; /* 画像のスペース */
}
.h3-img-r2::after {
  content: "";
  position: absolute;
  top: 97%;
  right: -10px;
  transform: translateY(-50%);
  width: 200px;
  aspect-ratio: 208 / 210;
  background-image: url('img/course-2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
@media (max-width: 959px) {
.h3-img-r2::after {
  top: 40%;
  width: 80px;
  }
}

/* タイトル装飾 */
.rounded-box {
  border: 3px solid #FD5A31;
  border-radius: 40px;
  padding: 4px 48px;
  display: inline-block;
  color: #FD5A31;
  font-weight: 600;
  background-color: #fff;
}
.otoku {
  background-color: #FFFF01;
  padding: 8px 48px;
  display: inline-block;
  color: #FC5B2D;
  align-items: center;
  font-weight: 600;
}
.text-center {
  text-align: center;
}

/* バナーテキスト */
.banner-text {
  text-shadow: 2px 2px 3px #333;
}

/* 画像の縮小停止 */
.no-scale-img {
  width: auto !important;
  max-width: none !important;
}

/* 画像の位置をヘッダーバーと隣接 */
.header-nav {
  position: relative;
}
.header-nav .right-image {
  position: absolute;
  top: 0;       /* ヘッダーバーの高さと揃える */
  right: 0;     /* ナビ右端に固定 */
  height: 40px; /* ヘッダーバーの高さに合わせる */
  object-fit: contain;
}

/* 見出しh1 */
.c-pageTitle {
  text-align: center;
  font-size: 1.8em;
}
@media (min-width: 600px) {
  .c-pageTitle {
      font-size: 2.5em;
  }
}

/* メインコンテンツ下の余白詰める */
@media (min-width: 600px) {
    .l-content {
        padding-top: 0em;
    }
}
.l-container {
  margin-top: 0;
}
.l-mainContent__inner>.post_content {
  margin: 0 0 4em;
}
.w-pageTop, .w-singleBottom, .w-singleTop {
  margin: 0 0 2em;
}

/* お客様の声、アコーディオン */
.swell-block-accordion.is-style-main .swell-block-accordion__body {
  border: 3px solid var(--color_main);
}
.cap_box_content {
  border: 3px solid var(--capbox-color);
}

/* PCロゴ位置調整 */
@media (min-width: 960px) {
    .-series .l-header__logo {
        margin-right: 0px;
        margin-left: 12px;
    }
}

/* フッターメニュー（PCのみ） */
.f-menu {
  display: flex;               /* 横並び（フレックスボックス）に */
  justify-content: center;     /* 横方向中央揃え */
  padding-left: 0;             /* デフォルトのリスト左余白を除去（必要に応じて） */
  list-style: none;            /* デフォルトのリストマーカーを消す（必要に応じて） */
  margin: 0;                   /* 余白リセット（必要に応じて） */
}

/* SPヘッダーにSNSアイコンリンク */
.custom-header-icons-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.custom-header-icons {
  display: flex;
  gap: 2px;
  align-items: center;
}
.custom-header-icons a img {
  width: 38px;
  height: 38px;
  display: block;
}
.icons-description {
  margin-top: 1px;
  font-size: 11px;
  color: #333;
  text-align: center;
}
.l-header__customBtn, .l-header__menuBtn {
    /*height: 100px;
    width: 100px;*/
    padding-top: 8px;
}

/* SPフッターSNSアイコン */
#fix_bottom_menu .menu_list {
  padding: 2px 0 0;
}

/***************************/
/* 選ばれる理由 スマホ・タブレット */
/***************************/
/* スマホ専用（767pxまで） */
@media (max-width: 767px) {
  .only-mobile { display: block; }
  .only-tablet, .only-pc { display: none; }

  /* 背景ずらす */
  .bg-p-02 {
    background-image: linear-gradient(to bottom, transparent 2%, #fde9d2 2%);
    padding-bottom: 2em;
  }
  .bg-p-04 {
    background-image: linear-gradient(to bottom, transparent 4%, #fde9d2 4%);
    padding-bottom: 2em;
  }

  .point-text {
    font-size: 18px;
    margin: 0 1em 2em;
  }

}
/* タブレット専用（768〜959pxまで） */
@media (min-width: 768px) and (max-width: 959px) {
  .only-tablet { display: block; }
  .only-mobile, .only-pc { display: none; }

  /* 背景ずらす */
  .bg-p-02 {
    background-image: linear-gradient(to bottom, transparent 5%, #fde9d2 5%);
    padding-bottom: 2em;
  }
  .bg-p-04 {
    background-image: linear-gradient(to bottom, transparent 7%, #fde9d2 7%);
    padding-bottom: 2em;
  }

  .point-text {
    font-size: 24px;
    margin: 0 2.5em 2em;
  }

}

/* プラスアルファ背景 */
.bg-p-plus {
  background-image: linear-gradient(to bottom, transparent 0%, #f7931e 0%);
  padding: 1em 0 2em;
  border-radius: 40px;
  width: 100%;
  margin: 0 auto;
}

/* Point タイトル */
.bg-strength-01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1234 / 290;
  background: url('./img/point-01-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
}
.bg-strength-02 {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 320;
  background: url('./img/point-02-sp.png') no-repeat center center / cover;
}
.bg-strength-03 {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 320;
  background: url('./img/point-03-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
  margin-top: -3em;
}
.bg-strength-04 {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 340;
  background: url('./img/point-04-sp.png') no-repeat center center / cover;
}
.bg-strength-05 {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 380;
  background: url('./img/point-05-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
  margin-top: -4em;
}
.plus-container {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 子要素を垂直方向に中央揃えにする */
  margin-bottom: 0.5em;
}
.bg-plus {
  position: relative;
  width: 18%;
  aspect-ratio: 246 / 246;
  background: url('./img/point_plus.png') no-repeat center center / cover;
  margin-left: 1em;
}
.bg-plus-b {
  position: relative;
  width: 18%;
  aspect-ratio: 246 / 264;
  background: url('./img/image_010.png') no-repeat center center / cover;
  
}

/* 吹き出し */
.overlay-str {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 28px;
  padding: 0 0 8px 48px;
}
@media (max-width: 767px) {
  .overlay-str {
    font-size: 21px;
    padding: 0 0 8px 36px;
  }
}
.overlay-str-03 {
  position: absolute;
  top: 72%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 28px;
  padding: 0 0 8px 48px;
}
@media (max-width: 767px) {
  .overlay-str-03 {
    font-size: 21px;
    padding: 0 0 8px 36px;
  }
}
.overlay-str-04 {
  position: absolute;
  top: 72%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 28px;
  padding: 0 0 8px 48px;
}
@media (max-width: 767px) {
  .overlay-str-04 {
    font-size: 20px;
    padding: 0 0 24px 36px;
  }
}
.overlay-plus {
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  font-size: 28px;
  margin-left: 1em;
}
.overlay-plus-b {
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  font-size: 28px;
  margin-left: 5em;
}
@media (max-width: 767px) {
  .overlay-plus {
    font-size: 20px;
    padding: 12px 0 12px 12px;
    margin-left: 0;
  }
  .overlay-plus-b {
    font-size: 20px;
    padding: 12px 0 12px 16px;
    margin-left: 1em;
  }
}

.v01-1 {
  position: relative;
  width: 80%;
  aspect-ratio: 600 / 325;
  background: url('./img/p01-1.png') no-repeat center center / cover;
  margin-left: 32px;
}
.overlay-v01-1 {
  position: absolute;
  top: 45%;
  left: 72%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.v01-2 {
  position: relative;
  width: 80%;
  aspect-ratio: 600 / 267;
  background: url('./img/p01-2.png') no-repeat center center / cover;
  margin-left: 48px;
}
.overlay-v01-2 {
  position: absolute;
  top: 50%;
  left: 73%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.v01-3 {
  position: relative;
  width: 70%;
  aspect-ratio: 600 / 433;
  background: url('./img/p01-3.png') no-repeat center center / cover;
  margin-left: 64px;
}
.v01-3-tab {
  width: 55%;
  margin-left: 180px;
}

.overlay-v01-3 {
  position: absolute;
  top: 40%;
  left: 70%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.overlay-v01-3-tab {
  left: 75%;
}
.overlay-v01-4 {
  position: absolute;
  top: 40%;
  left: 75%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.overlay-v01-4-tab {
  left: 80%;
}

.overlay-text {
  color: #764d26;
  line-height: 1.4;
  font-size: 18px;
}

.v01-1w {
  position: relative;
  width: 65%;
  aspect-ratio: 600 / 325;
  background: url('./img/p01-1-w.png') no-repeat center center / cover;
  margin-left: 32px;
}
.v01-2w {
  position: relative;
  width: 75%;
  aspect-ratio: 600 / 267;
  background: url('./img/p01-2-w.png') no-repeat center center / cover;
  margin-left: 48px;
}
.v01-3w {
  position: relative;
  width: 70%;
  aspect-ratio: 600 / 433;
  background: url('./img/p01-3-w.png') no-repeat center center / cover;
  margin-left: 64px;
}
.v01-3w-tab {
  width: 55%;
  margin-left: 180px;
}
.v01-1pw {
  position: relative;
  width: 80%;
  aspect-ratio: 600 / 325;
  background: url('./img/p01-1-w.png') no-repeat center center / cover;
  margin-left: 32px;
}
.v01-2pw {
  position: relative;
  width: 80%;
  aspect-ratio: 600 / 267;
  background: url('./img/p01-2-w.png') no-repeat center center / cover;
  margin-left: 48px;
}
.plus-1w-sp {
  position: relative;
  width: 65%;
  aspect-ratio: 600 / 325;
  background: url(./img/plus-1.png) no-repeat center center / cover;
  margin-left: 32px;
  }
.plus-2w-sp {
  position: relative;
  width: 75%;
  aspect-ratio: 600 / 267;
  background: url(./img/plus-2.png) no-repeat center center / cover;
  margin-left: 48px;
  }
/* 下線の破線 */
.dashed-underline {
  text-decoration: none; /* デフォルトの下線を消す */
  border-bottom: 2px dotted #fcdc09; /* 下に破線のボーダーを引く */
  /*padding-bottom: 1px;*/ /* 任意：テキストと下線の間に少し隙間を空ける */
  width: 86%;
  margin: 0 auto;
}

.plus-main {
  width: 96%;
  margin: 0 auto;
}

/* ========================================================= */
/* カスタム画像リンクボタンの配置とスタイル (Before->After事例)         */
/* ========================================================= */
.custom-mainvisual-btn-wrap-diet {
    position: absolute;
    bottom: 17vw;
    left: 80px;
    z-index: 10000;
    width: auto;
    max-width: 100%;
}
@media (min-width: 1480px) {
  .custom-mainvisual-btn-wrap-diet {
    bottom: 20vw;
  }
}
@media (max-width: 959px) {
  .custom-mainvisual-btn-wrap-diet {
    bottom: 24vw;
  }
}
@media (max-width: 600px) {
  .custom-mainvisual-btn-wrap-diet {
    bottom: 22vw;
    left: 30px;
    max-width: 46%;
  }
}
.custom-mainvisual-btn-img-link-diet img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}
.custom-mainvisual-btn-img-link-diet:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}
/*
 * is-hiddenクラスがある時だけ非表示にする
 */
.custom-mainvisual-btn-wrap-diet.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

/* ホバーしたときに下線を表示 */
.underline-on-hover {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
}
.underline-on-hover:hover {
  border-bottom: 1px solid #1176d4;
}

/*****************/
/* 選ばれる理由 PC */
/*****************/
@media (min-width: 960px) {
/* 背景 */  
.bg-p-pc {
  background-image: linear-gradient(to bottom, transparent 7%, #fde9d2 7%);
  padding-bottom: 2em;
  }

.bg-strength-01-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 226;
  background: url('./img/point-01-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
}
.bg-strength-02-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 226;
  background: url('./img/point-02-pc.png') no-repeat center center / cover;
  margin-bottom: 0;
}
.bg-strength-03-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 340;
  background: url('./img/point-03-pc.png') no-repeat center center / cover;
  margin-bottom: 0;
  margin-top: -3em;
}
.bg-strength-04-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 340;
  background: url('./img/point-04-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
}
.bg-strength-05-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 380;
  background: url('./img/point-05-sp.png') no-repeat center center / cover;
  margin-bottom: 0;
  margin-top: -4em;
}

.overlay-str-pc {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 26px;
  padding: 0 0 8px 48px;
}
.overlay-str-03-pc {
  position: absolute;
  top: 72%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 24px;
  padding: 0 0 8px 48px;
}
.overlay-str-04-pc {
  position: absolute;
  top: 72%;
  left: 64%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fc5a31;
  font-weight: 600;
  line-height: 1.4;
  font-size: 24px;
  padding: 0 0 8px 48px;
}

.point-text-pc {
  font-size: 21px;
  margin: 0 2.5em 2em;
  line-height: 1.4;
}

.v01-1-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 325;
  background: url('./img/p01-1.png') no-repeat center center / cover;
  margin-left: 18px;
  }
.overlay-v01-1-pc {
  position: absolute;
  top: 45%;
  left: 68%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.v01-2-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 267;
  background: url('./img/p01-2.png') no-repeat center center / cover;
  margin-left: 12px;
  }
.overlay-v01-2-pc {
  position: absolute;
  top: 50%;
  left: 73%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.v01-3-pc {
  position: relative;
  width: 90%;
  aspect-ratio: 600 / 433;
  background: url('./img/p01-3.png') no-repeat center center / cover;
  margin-left: 120px;
  }
.overlay-v01-3-pc {
  position: absolute;
  top: 40%;
  left: 66%;
  width: 100%;
  transform: translate(-50%, -50%);
  }

.v01-1w-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 325;
  background: url('./img/p01-1-w.png') no-repeat center center / cover;
  margin-left: 18px;
  }
.overlay-v01-1w-pc {
  position: absolute;
  top: 45%;
  left: 67%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.v01-2w-pc {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 267;
  background: url('./img/p01-2-w.png') no-repeat center center / cover;
  margin-left: 12px;
  }
.overlay-v01-2w-pc {
  position: absolute;
  top: 50%;
  left: 73%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.v01-3w-pc {
  position: relative;
  width: 90%;
  aspect-ratio: 600 / 433;
  background: url('./img/p01-3-w.png') no-repeat center center / cover;
  margin-left: 120px;
  }
.overlay-v01-3w-pc {
  position: absolute;
  top: 40%;
  left: 74%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.overlay-v05-2-pc {
  left: 66%;
  }

.overlay-plus-b {
    font-size: 26px;
    margin-left: 4em;
  }

.plus-1w-pc {
  position: relative;
  width: 80%;
  aspect-ratio: 600 / 325;
  background: url(./img/plus-1.png) no-repeat center center / cover;
  margin-left: 64px;
  }
.plus-2w-pc {
  position: relative;
  width: 90%;
  aspect-ratio: 600 / 267;
  background: url(./img/plus-2.png) no-repeat center center / cover;
  margin-left: 0px;
  }


}
/* 960px以上ここまで */

/* 960～1024px まで */
@media (min-width: 960px) and (max-width: 1099px) {
  .point-text-pc {
    font-size: 18px;    
  }
  .overlay-text {
    font-size: 16px;
  }
}

/* ヘッダーロゴ追従サイズ拡大 */
@media (min-width: 960px) {
  .l-fixHeader .c-headLogo {
    height: 64px;
  }
  .l-fixHeader__logo {
    margin-right: 4px;
   }
}