@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
*/
/* --------------------------------------------------------------------------
カラー定義メモ

濃い色1〜4
--wp--preset--color--swl-deep-00
濃い色1 オレンジ（アクセント文字）
濃い色2 グリーン（黒バックの見出し）
濃い色3 レッド（アクセント文字）
濃い色4 淡いブラック

淡い色1〜4
--wp--preset--color--swl-pale-00
淡い色1 ペールシルバー(背景)
淡い色2 ライトグレー
淡い色3 イエロー
淡い色4 ライムグリーン(line)




----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 管理画面用メモ
 * ----------------------------------------------------------------------- */
/* 実際のサイト（フロント）では完全に非表示にする */
.is-admin-only {
    display: none !important;
}

/* --------------------------------------------------------------------------
 * ユーティリティ
 * ----------------------------------------------------------------------- */

 .u-color-yellow{
    color: var(--wp--preset--color--swl-pale-03)!important;
 }
 .u-nowarp{
    white-space: nowrap;
 }
 .u-small{
    font-size: 0.7em;
 }
.mininote {
font-weight: normal;
}
/* --------------------------------------------------------------------------
 * フェードインアニメーション 要素に js-fadein クラスを付与
 * ----------------------------------------------------------------------- */
.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition-property: transform, opacity;
  transition-duration: 0.8s; 
  transition-delay: 0s;
}

.js-fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
 * ヘッダーのカスタマイズ
 * ----------------------------------------------------------------------- */

/* ヘッダーの背景色を透過 */
.l-header {
background-color: #ffffffed;
}

/* ヘッダーのロゴ */
/* 1. PCサイズでの調整（960px以上） */
@media screen and (min-width: 960px) {
    /* サイトタイトル全体のフォントサイズ */
    #header .c-headLogo__link {
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
		font-size: 20px !important; 
        color: #333333;
        transition: opacity 0.3s ease;
    }

    /* ホバー時の不透明度調整で高級感を演出 */
    #header .c-headLogo__link:hover {
        opacity: 0.8;
    }
}

/* 2. スマホサイズでの調整（959px以下） */
@media screen and (max-width: 959px) {
    #header .c-headLogo__link {
        font-size: 18px !important; /* スマホで一行に収まる適切なサイズ */
    }
}


/* グローバルナビのカスタマイズ */
@media screen and (min-width: 960px) {

    /* --- グローバルナビ：親テーマの100%高さをリセット --- */
    #header .c-gnav > .menu-item {
        height: auto !important; /* 72pxの縛りから解放 */
        display: flex;
        align-items: center; /* 垂直中央に配置 */
    }

    /* --- ナビゲーションの「枠線ボタン」スタイル --- */
    #header .c-gnav li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5em 1.2em; /* ボタンの厚みをここで調整 */
        margin-left: 8px;    /* 項目間の余白 */
        border: 1px solid #333333;
        background-color: transparent;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        height: auto;
        line-height: 1.2;
        color: #333333;
        font-weight: bold;
        letter-spacing: 0.15em;
    }

    /* SWELL標準の装飾（下線など）を完全に排除 */
    #header .c-gnav li > a::after {
        content: none !important;
        display: none !important;
    }

    /* Hover & Action */
    #header .c-gnav li > a:hover {
        background-color: #333333 !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px #ffffff;

    }
    
    #header .c-gnav li > a:hover .ttl {
        color: #ffffff !important;
    }

    #header .c-gnav li > a:active {
        transform: translateY(1px);
        opacity: 0.8;
    }
}
/* --------------------------------------------------------------------------
 * フッターの調整
 * ----------------------------------------------------------------------- */
#footer .l-footer__widgetArea a{
    display: block;
    width: 60%;
    max-width: 360px;
}
/* ========================================================= */
/* メインビジュアルの高さ制限（PC表示のみ）                  */
/* ========================================================= */
@media screen and (min-width: 960px) {
  /* 大枠のコンテナの最大高さを制限 */
  #main-visual {
    max-height: 780px; /* サイトの設計に合わせて数値を調整してください */
  }
  
  /* 中の画像やスライダーも高さの制限にしっかり追従させるための処理 */
  .p-mainVisual__inner,
  .p-mainVisual__slide,
  .swiper-container {
    max-height: 780px;
  }
}

/* ========================================================= */
/* 【ブログパーツ】.h1-top をメインビジュアルの上部に配置（モバイルファースト） */
/* ========================================================= */

/* 1. ベースのスタイル（スマホ・タブレット用） */
.h1-top {
  width: 90%;
  margin-inline: auto;
  padding-bottom: 40vw; 
  box-sizing: border-box; 
}

/* 2. PC用のスタイル（960px以上） */
@media screen and (min-width: 960px) {
  .h1-top {
    width: 60%;
    margin-left: 0;
    padding-bottom: 52px;
  }
}
/* ========================================================= */
/* 【ブログパーツ】hero-bottomのスタイル
/* ========================================================= */
/* スマホのときに順番を逆に */
@media screen and (max-width: 599px) {
  .hrro-bottom-wrap > .swell-block-columns__inner {
    flex-direction: column-reverse !important;
  }
}
.hero-bottom-clinic{
    padding-right: 2em!important;
}
.hero-bottom-txt p{
    color: #ffffff;
    font-size: min(2.2vw,23px);
    line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .hero-bottom-clinic{
    padding-right: 0!important;
    padding-bottom: 2em!important;
}
.hero-bottom-txt p{
    font-size: 6.2vw;
} 
.hero-bottom-online{
    position: relative;
} 
.hero-bottom-online figure{
    width: 48%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-30%);
}
}

/* ========================================================= */
/* menuページのhero                  */
/* ========================================================= */


.p-fullWidth.menu-hero-wrap > .p-fullWidth__inner {
    padding-top: 0 !important;
}
.menu-hero{
height: auto;
padding-top: 100%;
position: relative;
}
.menu-hero h1.menu-h1,
.menu-hero .menu-menu{
    position: absolute;
}
.menu-hero h1.menu-h1.aga-h1{
	top:4vw;
    width: 80%;
}
.menu-hero h1.menu-h1.ed-h1{
	top:4vw;
   width: 100%;
}
.menu-hero h1.menu-h1.mounjaro-h1{
	top:4vw;
   width: 100%;
}
.menu-hero .menu-menu{
    width: 50%;
   left: 0;
    bottom: 4vw;
}
@media screen and (min-width: 960px) {
    .menu-hero{
        height: 620px;
		padding-top:0;
    }
.menu-hero h1.menu-h1.aga-h1{
    width: 64%;
    top: 40px;
    left: 0;
}
	.menu-hero h1.menu-h1.ed-h1{
    width: 74%;
    top: 40px;
    left: 0;
}
.menu-hero h1.menu-h1.mounjaro-h1{
    width: 65%;
    top: 40px;
    left: 0;
}
.menu-hero .menu-menu{
    width: 35%;
	left:auto;
    right: 0;
    bottom: 40px;
}
}

/* ========================================================= */
/* 【ブログパーツ】クリニック紹介パート　　　　　　　　              */
/* ========================================================= */
/*見出し*/
.clinic-headline-warp{
    padding-top: 20vw;
    padding-bottom: 20vw;
}
@media screen and (min-width: 600px) {
.clinic-headline-warp{
    padding-top: 80px;
    padding-bottom: 40px;
}
}
.clinic-headline-img{
    width: 30%;
    max-width: 240px;
    margin: 0 auto;
}

h2.clinic-headline-h2{
	padding-top:0.25em;
    padding-bottom: 0.5em;
    font-size: clamp(20px,7vw,60px);
    letter-spacing: 0.075em;
    line-height: 1.3;
}

/* clinic-reason-box */
.clinic-reason-box-wrap{
    padding-bottom: 20vw;
    margin-bottom: 0!important;
    position: relative;
}
@media screen and (min-width: 600px) {
 .clinic-reason-box-wrap{
    padding-bottom: 80px;
}   
}
.clinic-reason-box-wrap::after{
    content: "";
    width: 100vw;
    height: 80%;
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: var(--wp--preset--color--swl-pale-01);
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
    transform: translateX(-50%);
    z-index: 1;
}
.clinic-reason-box{
margin-bottom: 10vw;
position: relative;
z-index: 10;
}
@media screen and (min-width: 600px) {
 .clinic-reason-box{
margin-bottom: 60px;
}   
}
.clinic-reason-box-img{
    width: 100%;
}
@media screen and (min-width: 600px) {
    .clinic-reason-box-img{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; 
    z-index: 10;
}
}
.clinic-reason-box-img img{
    width: 100%;
  height: 100%;
  object-fit: cover; 
}
.clinic-reason-box-txt{
    background-color: #333333;
    padding: 1em 1.5em;
}
@media screen and (min-width: 600px) {
    .clinic-reason-box-txt{
    background-color: #000000c6;
    position: relative;
    width: 50%;
    padding: 1.5em 2em;
    margin-left: auto;
    margin-right: 0;
    z-index: 50;
}
.clinic-reason-box:nth-child(even) .clinic-reason-box-txt{
    margin-left: 0;
    margin-right: auto;
}
}

.clinic-reason-box-txt h3{
    color: var(--wp--preset--color--swl-deep-03);
    font-size: clamp(18px,6vw,48px);
	line-height:1.3;
    position: relative;
    margin: 0 0 0.5em 0!important;
}
.clinic-reason-box-txt p{
    color: #ffffff;
}
.clinic-reason-box-txt_shoulder{
    font-size: 1.2rem;
    font-weight: 500;
}
@media screen and (min-width: 600px) {
    .clinic-reason-box-txt_shoulder{
    letter-spacing: 0.25em;
}
}

/* 代表挨拶 */
.clinic-greeting-ttl{
     width: 80%;
    max-width: 480px;
    margin: 2em auto 4em auto!important;
}
@media screen and (max-width: 599px) {
    h3.clinic-greeting-copy{
    text-align: center!important;
}
.clinic-greeting-ceo{
    padding: 0 10vw!important;
}
}

/* 4つのステップ */
.clinic-step-ttl {
     width: 80%;
    max-width: 480px;
    margin: 1em auto 4em auto!important;
}

.clinic-step-content{
    padding-bottom: 20vw;
    margin-bottom: 0!important;
    position: relative;
}
@media screen and (min-width: 600px) {
.clinic-step-content{
    padding-bottom: 80px;
}   
}
.clinic-step-content::after{
    content: "";
    width: 100vw;
    height: 80%;
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: var(--wp--preset--color--swl-pale-01);
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
    transform: translateX(-50%);
    z-index: 1;
}

.clinic-step-box-wrap{
    max-width: 780px;
    margin: 0 auto 6em auto;
    position: relative;
    z-index: 10;
}
.clinic-step-box{
      border-radius: 38px 38px 10px 10px;
      padding: 1em ;
      margin-bottom: 2em;
      background-color: var(--wp--preset--color--swl-deep-04);
      display: flex;
      flex-direction: column;
      justify-content: center; 
      align-items: center;
      gap: 1em;
}
.clinic-step-no{
    width: 30%;
    max-width: 220px;
}
.clinic-step-txt{
    width: 100%;
    color: #ffffff;
}
.clinic-step-time{
    width: 100%;
    max-width: 280px;
    overflow: hidden;
    border-radius: 10px;
	padding:0!important;
  aspect-ratio:17/6;
}
@media screen and (min-width: 600px) {
.clinic-step-box{
      padding: 1.5em;
     border-radius: 400px 38px 38px 400px;
    flex-direction: row;
     justify-content: space-between;
} 
.clinic-step-no{
    width: 15%;
}
.clinic-step-txt{
    width: 62%;
}
.clinic-step-time{
    width: 15%;
  aspect-ratio:1/1;
}
}

.clinic-step-txt h3{
    font-size: clamp(18px,6vw,32px);
    margin-bottom: 0!important;
    text-align: center;
}
@media screen and (min-width: 600px) {
    .clinic-step-txt h3{
    text-align: left;
}
}
.clinic-step-txt p{
    margin-top: 1em;
}

.clinic-step-btn img{
 transition: transform 0.4s ease , filter 0.6s ease;
}
.clinic-step-btn:hover img{
transform: scale(1.05); 
filter: brightness(120%);
}

/*お支払いについて*/
.clinic-step-pay{
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    border: 1px solid #707070;
    padding: 1em 2em 2em;
    max-width: 780px;
    margin: 0 auto;
}
.clinic-step-pay h3{
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #707070;
}
.clinic-step-pay-box-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4em;
}
@media screen and (min-width: 600px) {
    .clinic-step-pay-box-wrap{
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding-left:1.2em ;
    gap: 2em;
}
.clinic-step-pay-box{
    width: calc(50% - 2.2em);
}
}
.clinic-step-pay-box h4{
    color: #707070;
    margin-bottom: 0.5em!important;
    position: relative;
}
.clinic-step-pay-box h4::before{
    content:"■";
    position: absolute;
    left: -1.2em;
    top: 0;
}
.clinic-step-pay-box p{
    font-size: 1.1;
    font-weight: lighter;
    line-height: 1.2;
    margin-bottom: 1em;
}
.clinic-step-pay-box p:last-of-type{
    margin-bottom: 0;
}

/* ==========================================================================
   【再利用ブロック】pu-bnr-slider Custom Style (Pure HTML + マスク隔離・外側矢印完全対応版)
   ========================================================================== */

/* 1. 外枠（親の幅制限を物理的に無視して画面幅いっぱいに広げる背景レイヤー） */
.pu-bnr-slider-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--wp--preset--color--swl-pale-01);
    padding: 20px 0; /* SPの上下パディング */
}

@media (min-width: 768px) {
    .pu-bnr-slider-wrapper {
        padding: 40px 0; /* PCの上下パディング */
    }
}

/* 2. スライダー本体コンテナ（最大幅1200pxに制限する親フレーム） */
.pu-bnr-slider {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 16px;   /* 基本のSP用余白（1240px以下で活きる） */
    position: relative;
    --swiper-theme-color: #008394;
}

/* 🌟【超重要】新設したバナー専用マスク（左右の余計なバナー残像を1200pxの境界線で確実にシャットアウト） */
.pu-bnr-slider .pu-swiper-mask {
    width: 100%;
    overflow: hidden; /* これにより、外側（左右の空白スペース）に待機中のバナーが侵入できなくなります */
}

/* 3. 各バナースライドのスタイリング */
.pu-bnr-slider .swiper-slide.p-bannerLink {
    height: auto;
    max-width: 100%;
}
@media (min-width: 768px) {
    .pu-bnr-slider .swiper-slide.p-bannerLink {
        max-width: 384px; 
    }
    .pu-bnr-slider .pu-swiper-mask {
        display: flex;
        justify-content: center;
    }
}

.pu-bnr-slider .c-bannerLink {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.pu-bnr-slider .c-bannerLink {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.pu-bnr-slider .c-bannerLink:hover {
    transform: translateY(-4px);
    opacity: 0.9;
}
.pu-bnr-slider .c-bannerLink__figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.pu-bnr-slider .c-bannerLink__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 4. 左右ナビゲーションボタン（背景なし・透過白の二重不等号） */
.pu-bnr-slider .pu-swiper-prev,
.pu-bnr-slider .pu-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent; /* 背景なし */
    width: 40px;
    height: 40px;
    box-shadow: none;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.75;                 /* 初期状態で少し透けさせる */
}

/* ホバー時は不透明度を上げ、左右にほんの少し動く上質なインタラクション */
.pu-bnr-slider .pu-swiper-prev:hover,
.pu-bnr-slider .pu-swiper-next:hover {
    opacity: 1;
    background-color: transparent;
}
.pu-bnr-slider .pu-swiper-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}
.pu-bnr-slider .pu-swiper-next:hover {
    transform: translateY(-50%) translateX(2px);
}

/* 擬似要素（before/after）を重ねて創り出す「<<」と「>>」 */
.pu-bnr-slider .pu-swiper-prev::before,
.pu-bnr-slider .pu-swiper-prev::after,
.pu-bnr-slider .pu-swiper-next::before,
.pu-bnr-slider .pu-swiper-next::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--wp--preset--color--white, #ffffff);
    border-left: 3px solid var(--wp--preset--color--white, #ffffff);
    transition: border-color 0.3s ease;
}

/* 前へ（<<）の形状 */
.pu-bnr-slider .pu-swiper-prev::before { transform: rotate(-45deg); left: 10px; }
.pu-bnr-slider .pu-swiper-prev::after { transform: rotate(-45deg); left: 20px; }

/* 次へ（>>）の形状 */
.pu-bnr-slider .pu-swiper-next::before { transform: rotate(135deg); right: 20px; }
.pu-bnr-slider .pu-swiper-next::after { transform: rotate(135deg); right: 10px; }

/* ==========================================================================
   5. 画面幅に応じた矢印の動的ポジション制御（インセット / アウトセット）
   ========================================================================== */

/* 【PC：1241px以上のハイエンド環境】バナーに絶対被らないよう「外側」に完全配置 */
@media (min-width: 1241px) {
    .pu-bnr-slider {
        padding: 0; /* パディングを0にし、バナー3枚が1200px幅いっぱいに美しく整列 */
    }
    
    /* マスク（hidden）の外側に矢印がいるため、マイナス値で外に押し出しても無傷でクリーンに表示されます */
    .pu-bnr-slider .pu-swiper-prev { left: -50px; }
    .pu-bnr-slider .pu-swiper-next { right: -50px; }
}

/* 【タブレット・PC移行期：1240px以下の環境】バナーの上に重なる（インセット）ように自動シフト */
@media (max-width: 1240px) {
    .pu-bnr-slider {
        padding: 0 16px; 
    }
    
    /* マスク層（z-index）より確実に上に浮かせるために z-index を11に微増 */
    .pu-bnr-slider .pu-swiper-prev { left: 24px; z-index: 11; } 
    .pu-bnr-slider .pu-swiper-next { right: 24px; z-index: 11; }
}

/* 【スマホ閲覧時（767px以下）】タップ領域を担保しつつ、矢印のサイズをコンパクト化 */
@media (max-width: 767px) {
    .pu-bnr-slider .pu-swiper-prev { left: 12px; }
    .pu-bnr-slider .pu-swiper-next { right: 12px; }
    
    .pu-bnr-slider .pu-swiper-prev::before,
    .pu-bnr-slider .pu-swiper-prev::after,
    .pu-bnr-slider .pu-swiper-next::before,
    .pu-bnr-slider .pu-swiper-next::after {
        width: 9px;
        height: 9px;
        border-top-width: 2px;
        border-left-width: 2px;
    }
    .pu-bnr-slider .pu-swiper-prev::after { left: 18px; }
    .pu-bnr-slider .pu-swiper-next::before { right: 18px; }
}


/* ==========================================================================
   menuページのデザイン
   ========================================================================== */

/* ========================================================
   治療メニュー：共感セクション
======================================================== */
h2.menu-empathy-ttl {
  position: relative;
    font-size: clamp(18px,6vw,32px);
  font-weight: 700;
  color: var(--wp--preset--color--swl-deep-04);
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
}

/* ゴールドのアンダーラインで高級感と力強さを演出 */
.menu-empathy-ttl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background-color: var(--wp--preset--color--swl-deep-02);
  border-radius: 2px;
}

.menu-empathy-list {
  max-width: 760px;
  margin: 0 auto 3rem;
  padding: 2.5rem 2rem;
  background-color: var(--wp--preset--color--swl-pale-02); /* 淡い背景色で浮き立たせる */
  border-top: 4px solid var(--wp--preset--color--swl-deep-02); /* ゴールドのアクセントライン */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 軽いシャドウで立体感を */
  list-style: none;
}

.menu-empathy-list li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: 1.5em;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--wp--preset--color--swl-deep-04);
}

.menu-empathy-list li:last-child {
  margin-bottom: 0;
}

/* オレンジのチェックマーク（疑似要素でスマートに） */
.menu-empathy-list li::before {
  content: '';
  position: absolute;
  left: 0.5em;
  top: 0.25em;
  width: 16px;
  height: 8px;
  border-left: 3px solid var(--wp--preset--color--swl-deep-01);
  border-bottom: 3px solid var(--wp--preset--color--swl-deep-01);
  transform: rotate(-45deg);
}

.menu-empathy-bridge {
  position: relative;
  font-weight: 700;
  line-height: 1.8;
  color: var(--wp--preset--color--swl-deep-04);
  padding-bottom: 80px; /* 矢印アニメーションのための余白確保 */
  margin-bottom: 4rem;
}

/* 下へ促すダブルアロー（アニメーション付き） */
.menu-empathy-bridge::before,
.menu-empathy-bridge::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--wp--preset--color--swl-deep-01);
  border-bottom: 3px solid var(--wp--preset--color--swl-deep-01);
  transform: translateX(-50%) rotate(45deg);
  animation: swlBridgeArrow 2s infinite ease-in-out;
}

.menu-empathy-bridge::before {
  bottom: 35px;
  animation-delay: 0s;
}

.menu-empathy-bridge::after {
  bottom: 15px;
  animation-delay: 0.2s; /* 少し遅らせて波及効果を出す */
}

/* 視線誘導のキーフレームアニメーション */
@keyframes swlBridgeArrow {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) rotate(45deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) rotate(45deg);
  }
}

/* ========================================================
   治療メニュー：ヘッダー＆説明文
======================================================== */
/* ショルダーコピー */
.menu-name-shoulder {
  font-size: clamp(0.9rem, 2vw, 1rem)!important;
  letter-spacing: 0.1em;
  opacity: 0.9;
	margin-bottom:0.5em!important;
    font-weight: bold;
}

/* タイトル */
h2.menu-name {
  font-size: clamp(2.5rem, 8vw, 4rem); /* 最大4remまで大幅にサイズアップ！ */
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
	margin-bottom:0.25em!important;
}

/* カテゴリー（枠線・角丸なし） */
.menu-name-cat {
  width: fit-content; /* テキスト幅に合わせる */
  margin: 0.8rem auto 0; /* margin: auto で親要素に対して中央寄せ */
  font-size: 0.85rem;
  border: 1px solid #ffffff;
  padding: 0.4em 1.5em;
  letter-spacing: 0.25em;
}

/* 治療の説明文（可読性重視） */
.manu-explanation {
  max-width: 800px;
  margin: 3rem auto 4rem;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.8;
  text-align: center;
  color: var(--wp--preset--color--swl-deep-04);
  padding: 0 1.5rem;
}

/* ========================================================
   治療メニュー：ご利用者様の声
======================================================== */
/* タイトル装飾 */
.menu-coment-ttl {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--wp--preset--color--swl-deep-04);
  margin-bottom: 2rem;
  position: relative;
}

.menu-coment-ttl::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--wp--preset--color--swl-deep-02);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ラッパー（高さ制限と縦スクロール） */
.menu-coment-wrap {
  max-width: 800px;
  margin: 0 auto 4rem;
  max-height: 500px; /* ここで高さを制限 */
  overflow-y: auto; /* 縦スクロールを有効化 */
  padding-right: 15px; /* スクロールバー用の余白 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
@media screen and (max-width: 599px) {
.menu-coment-wrap {
  max-height: 480px; /* ここで高さを制限 */
}
}
/* スクロールバーのカスタマイズ（Webkit系） */
.menu-coment-wrap::-webkit-scrollbar {
  width: 6px;
}
.menu-coment-wrap::-webkit-scrollbar-track {
  background: var(--wp--preset--color--swl-pale-02);
  border-radius: 4px;
}
.menu-coment-wrap::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--swl-deep-02); /* ゴールドのスクロールバー */
  border-radius: 4px;
}

/* コメントの各ボックス */
.menu-coment-box {
  background-color: #fff;
  border: 1px solid var(--wp--preset--color--swl-pale-02);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  align-items: flex-start !important; /* SWELLのis-rowを上書きして上揃えに */
  flex-wrap: nowrap !important; /* スマホでも横並びを維持する場合（適宜調整） */
}

/* コメントの画像（PC時の余白拡大） */
.menu-coment-img {
  flex: 0 0 80px;
  padding-right: 0.5rem;
}

.menu-coment-img img {
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--swl-pale-02);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* スマホ表示の調整（横並びを維持しつつ、画像を小さく・余白を最適化） */
@media screen and (max-width: 599px) {
  .menu-coment-box {
    padding: 1.2rem 1rem; /* スマホ用にpaddingを少しスッキリと */
  }
  
  .menu-coment-img {
    flex: 0 0 50px; /* スマホでは大きすぎないように50pxまで縮小 */
    padding: 10vw 20vw 5vw 20vw; /* スマホ用の適度な余白 */
  }

/* コメントのテキストエリア */
.menu-coment-txt {
  flex: 1;
}
}
.menu-coment-txt h4 {
  font-size: 1rem;
  color: var(--wp--preset--color--swl-deep-01); /* アクセントのオレンジ */
  margin-bottom: 0.5rem!important;
  font-weight: 700;
  line-height: 1.5;
}

.menu-coment-txt p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wp--preset--color--swl-deep-04);
}

.menu-coment-txt p:last-child {
  text-align: right;
  font-size: 0.8rem;
  color: #777;
  margin-top: 1rem!important;
}

/* スマホ表示の調整（画像とテキストを縦並びにしたい場合はこちらを有効化） */
@media screen and (max-width: 599px) {
  .menu-coment-box {
    flex-direction: column !important;
    align-items: center !important;
  }
  .menu-coment-img {
    margin-right: 0;
    flex: 0 0 100px;
  }
}

/* ========================================================
   治療メニュー：料金表
======================================================== */
.manu-table {
  max-width: 600px;
  margin: 0 auto 3rem;
}

.manu-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 高級感のあるシャドウ */
	margin-bottom:4em!important;
}

.manu-table td {
  padding: 1.2rem;
border-bottom: 1px solid var(--wp--preset--color--swl-pale-02);
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 700;
}


/* 左側のセル（期間）をダークトーンで引き締め */
.manu-table td:first-child {
  background-color: var(--wp--preset--color--swl-deep-04);
  color: #fff;
  width: 40%;
}

/* 右側のセル（料金）を強調 */
.manu-table td:last-child {
  color: var(--wp--preset--color--swl-deep-04);
}

/* ========================================================
   追従フッター（LINE誘導バナー）
======================================================== */
#follow-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9990; /* SWELLのヘッダー等と干渉しないよう高めに設定 */
  background-color: rgba(255, 255, 255, 0.95); /* 少し透過させてリッチに */
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); /* 上部へのシャドウで浮遊感 */
  backdrop-filter: blur(5px); /* すりガラス効果（モダンブラウザ向け） */
  margin-bottom: 0!important;
  /* アニメーションの初期状態（下へ隠しておく） */
  transform: translateY(100%);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0.5s;
}

/* JSで付与するアクティブクラスで表示 */
#follow-btn-wrap.is-active {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

/* 内部の余白調整 */
#follow-btn-wrap .wp-block-group__inner-container {
  padding: 6px 10px;
  max-width: 900px; /* PC閲覧時も広がりすぎないように制限 */
  margin: 0 auto;
}

/* カラム内の要素を垂直中央揃え */
#follow-btn-wrap .swell-block-columns__inner {
  align-items: center;
}

/* 親ラッパーをブロック要素にしてカラム幅いっぱいに広げる */
.follow-btn-btn .swell-block-button {
  display: block !important;
  width: 100% !important;
}

.follow-btn-btn .swell-block-button__link {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box;
font-size: min( 4vw, 20px) !important;
	padding:0.25em 0.5em!important;
}
.follow-btn-btn .swell-block-button .swell-block-button__link span ._small-item{
    font-size: 0.5em!important;
    font-weight: normal!important;
}
  .follow-btn-txt .fllow-btn-txt-01 {
    font-size: min(2vw, 17px) !important;
	  line-height:1;
  }
  .follow-btn-txt .fllow-btn-txt-02 {
    font-size: min(3.3vw, 28px) !important;
  }
/* スマホ表示の最適化 */
@media screen and (max-width: 599px) {
#follow-btn-wrap .wp-block-group__inner-container {
    padding: 10px 15px;
  }
	.follow-btn .swell-block-columns__inner{
		gap:0;
}
  .follow-btn-txt {
    text-align: center;
  }
  .follow-btn-txt {
    display:none;
  }
}

/* ========================================================
   追従フッター表示時のSWELL標準要素の調整
======================================================== */
/* SWELLのTOPへ戻るボタンを滑らかに上に逃がす */
body.is-follow-btn-active .p-fixBtnWrap {
  /* スマホ表示時：バナーの高さ＋αの数値を指定 */
  bottom: 100px !important; 
  transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* PC表示時はバナーの高さが変わるためメディアクエリで調整 */
@media screen and (min-width: 600px) {
body.is-follow-btn-active .p-fixBtnWrap {
    bottom: 120px !important;
  }
}

/* ========================================================
   プライバシーポリシー (.p-privacy-policy)
======================================================== */
.p-privacy-policy {
  color: var(--wp--preset--color--swl-deep-04);
  line-height: 1.8; /* 長文でも読みやすい行間に */
}

/* 第○条 などの大見出し */
.p-privacy-policy h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  padding: 0.8rem 1.2rem;
  background-color: var(--wp--preset--color--swl-pale-02); /* 淡い背景色 */
  border-left: 4px solid var(--wp--preset--color--swl-deep-02); /* ゴールドのアクセントライン */
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

/* その他の小見出し */
.p-privacy-policy h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--wp--preset--color--swl-pale-01); /* 控えめな点線で区切る */
}

/* 段落とリストの余白調整 */
.p-privacy-policy p {
  margin-bottom: 1.5em;
}

.p-privacy-policy ul,
.p-privacy-policy ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5em; /* インデントを揃えて整理された印象に */
}

.p-privacy-policy li {
  margin-bottom: 0.5em;
}

/* ========================================================
   事業者情報 (.p-company)
======================================================== */
.p-company {
  max-width: 800px;
  margin: 0 auto 4rem;
}

.p-company table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--wp--preset--color--swl-pale-02);
}

.p-company th,
.p-company td {
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--wp--preset--color--swl-pale-02);
  vertical-align: middle;
  line-height: 1.6;
}

/* 左側の見出しセル */
.p-company th {
  width: 32%; /* PC表示時の見出し幅を固定して整列 */
  background-color: var(--wp--preset--color--swl-pale-02);
  color: var(--wp--preset--color--swl-deep-04);
  font-weight: 700;
  text-align: left;
  font-size: 0.85rem;
}

/* 右側の内容セル */
.p-company td {
  width: 68%;
  background-color: #fff;
  color: var(--wp--preset--color--swl-deep-04);
}

/* スマホ表示時の最適化（テーブルを縦並びに崩して読みやすく） */
@media screen and (max-width: 599px) {
  .p-company th,
  .p-company td {
    display: block; /* 縦並びに強制 */
    width: 100%;
  }
  
  .p-company th {
    border-bottom: none; /* 下の線を消してtdと一体化させる */
    padding-bottom: 0.5rem;
  }
  
  .p-company td {
    padding-top: 0.5rem;
  }
}