@charset "UTF-8";

:root {
  /* --- テキスト・アクセントカラー --- */
  --color-black: #5c544d;       /* 基本の文字色（優しい茶色） */
  --color-white: #ffffff;      /* 白文字 */
  --color-orange: #E65C00;    /* メインの強調オレンジ */
  --color-green: #93bd43;     /* スタッフ紹介などの緑 */
  --color-red: #d32f2f;       /* 価格の強調赤 */
  --color-yellow-marker: #FFF57F; /* マーカーの黄色 */
  
  /* --- 背景色（セクション・カード） --- */
  --bg-orange-light: #fff7ed; /* 薄いオレンジ（カード、すこやか列など） */
  --bg-green-light: #edfde4;  /* 薄い緑（Point3、Profile） */
  --bg-yellow-light: #fcf6d2; /* 薄い黄色（Point3カード） */
  --bg-gray-light: #f3f4f6;   /* 薄いグレー（悩みカード、グレー箱） */
  --bg-yellow-vivid: #fece01; /* 濃い黄色（Reason7背景） */
  --bg-beige-vivid: #faf6f3; /* 濃いピンク */

}

/* 全体の共通設定 */
html {
  font-size: 62.5%; /* 1rem = 10px*/
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif; 
  color: var(--color-black); 
  font-size: 1.8rem; /* 標準の文字サイズを18pxにする */
  line-height: 1.7;
  text-align: center;
  font-weight: 500;
}

img {
  width: 100%; 
  height: auto;
  vertical-align: bottom;
}

/* =========================================================
   ファーストビュー(FV)
   ========================================================= */

.fv__img {
  width: 100%;
  line-height: 0;
}
.fv-img img {
  width: 100%;
  height: auto; 
  display: block; /* 隙間対策 */
}
.fv-inner {
  position: relative; /* 基準点 */
  width: 100%;
}

/* --- ロゴの設定 --- */
.fv-logo {
  position: absolute;
  top: 1.2rem;    /* 上から12px */
  right: 0.8rem;  /* 右から8px */
  z-index: 10;  /* 画像より手前に表示させる（数字が大きいほうが上） */
  width: 20vw; /* スマホの画面幅に合わせて伸縮させる設定（vw） */
}
.fv-logo img {
  width: 100%;   /* 箱（.fv__logo）の幅いっぱいに広げる */
  height: auto;  /* 高さは自動調整（比率を崩さない） */
  display: block;
}
/* btn */
/* --- アニメーションの定義（縦に跳ねるだけに変更） --- */
@keyframes bounce {
  0% { transform: translateY(0); }
  5% { transform: translateY(-12px); } /* 跳ねる */
  10% { transform: translateY(0); }    /* 着地 */
  15% { transform: translateY(-6px); }  /* 小さく跳ねる */
  20% { transform: translateY(0); }    /* 着地 */
  100% { transform: translateY(0); }   /* 休憩 */
}

/* --- ボタンの設定 --- */
.fv-btn {
  width: 90%;     
  max-width: 600px; 
  height: auto;      
  animation: bounce 2s infinite; /* 2秒サイクルで繰り返す */
  position: absolute; /* 浮いた状態で配置 */
  bottom: 1rem;       /* 下から10px */
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
.fv-btn img {
  width: 100%;
  height: auto;
  display: block;    /* 隙間対策 */
  transition: opacity 0.3s; /* ホバー時にふわっとさせる準備 */
}
.fv-btn:hover img {
  opacity: 0.8;      /* マウスを乗せたときに少し薄くする演出 */
}


/* =========================================================
   【共通パーツ】テキストの装飾
   ========================================================= */

/* --- マーカー（蛍光ペン風） --- */
.marker-yellow {
  background: linear-gradient(transparent 60%, var(--color-yellow-marker) 60%);
  font-weight: 700;
}

/* 上下余白多め */
.txt-margin-2rem{
  margin: 2rem;
}
/* 1.6rem使う */
.txt-small{
  font-size: 1.6rem;
}

/*タイトル系装飾 */
.section-ttl {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 4rem;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}
.txt-orange {
  color: var(--color-orange);
}
.txt-green {
  color: var(--color-green);
}
.txt-num {
  font-size: 3.2rem;
}
.txt-bold{
  font-weight: 700;
}
.txt-large {
  font-size: 2.4rem;
  line-height: 1.8;
}
.txt-note {
  font-size: 1.4rem; /* 10px〜12px相当 */
  margin-top: 0.8rem;
}

/* --- タイトル装飾（上下ライン※線の色変える） --- */
.ttl-wrap{
  display: inline-block; /* 文字幅に合わせる */
  padding: 1rem 1rem;
  margin-bottom: 3rem;
  min-width: 220px; /* 線の長さをある程度確保 */  
  border-top: 3px solid #000;    /* 上の線 */
  border-bottom: 3px solid #000; /* 下の線 */
}
.ttl-wrap-green {
  border-color: var(--color-green);
}
.ttl-wrap-yellow{
  border-color: var(--bg-yellow-vivid);
}

/* 白抜き（※背景色変えて使う）*/
.highlight{
  background-color: #000; 
  color: var(--color-white); 
  padding: 0.2rem 1rem;  /* 文字周りの余白 */
  display: inline-block;  /* パディングを効かせるため */
  margin: 0.5rem 0;  /* 上下の間隔 */
  border-radius: 2px;
}
.highlight-orange{
   background-color: var(--color-orange); /* オレンジ背景 */
}
.highlight-green{
   background-color: var(--color-green); /* オレンジ背景 */
}


/* =========================================================
   レイアウト
   ========================================================= */

.section-inner{
  width: 100%;
  max-width: 1000px; /* PCでの広がりすぎ防止 */
  margin: 0 auto;    /* 中央寄せ */
  padding: 2rem 2rem; /* 共通の余白 */
}

/* 斜線背景 */
.bg-stripe{
  background-color: #000;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.5), /* 半透明の白線 */
    rgba(255, 255, 255, 0.5) 2px,
    transparent 2px,
    transparent 10px
  );
}

/*  白背景  */
.bg-white-box {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--color-white);
  padding: 2rem 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ドロップシャドウを追加 */
}

/*  カードの基本形  */
.card-base {
  max-width: 440px; /* PCでも広がりすぎないように制限 */
  margin: 0 auto;   /* 中央寄せ */
  border-radius: 20px;       /* 角丸 */
  background: var(--color-white); /* 基本は白背景 */
  overflow: hidden; /* 中身が角丸からはみ出ないように */
  padding: 2rem 3rem;
}
/*  カードの枠線  */
.card-border-orange {
  border: 1px solid var(--color-orange);
}
.card-shadow{
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* カード内のテキスト */
.card-ttl {
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
}
.card-txt {
  margin-bottom: 2rem;
  text-align: justify;       /* 文章の左右をピシッと揃える */
  text-justify: inter-ideograph; /* 日本語に合わせて文字間隔を調整 */
  line-break: strict;        /* 句読点や小さい「っ」が行頭に来ないようにする */
  overflow-wrap: break-word; /* スマホで文字がはみ出さないようにする */
  max-width: 400px;
}
/* カード内の画像 */
.card-img {
  width: 100%;
  text-align: center;
}
.card-img img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
}

/* チェックリスト */
.check-list{
  display: inline-block;
  text-align: left;
}
.check-list li {
  position: relative;
  padding-left: 3rem; /* アイコン用のスペース */
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.check-list li::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 1.8rem;
  height: 1.8rem;
  -webkit-mask: url("../images/checkmark.svg") no-repeat center center;
  mask: url("../images/checkmark.svg") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* チェックリストのアイコンの色変更 */
.check-icon-orange li::before{
  background-color: var(--color-orange);
}
.check-icon-green li::before {
  background-color: var(--color-green); 
}

/* チェックリストの箱 */
.check-box{
  padding: 1.5rem 2rem 0 2rem;
  border-radius: 10px;
  margin: 2rem auto;
  max-width: 500px;
}

/* 吹き出し */
.speech-yellow {
  display: inline-block;
  border: 2px solid var(--bg-yellow-vivid);
  border-radius: 5px;
  padding: 0.5rem 1rem;
  background: var(--color-white);
  position: relative;
  margin-bottom: 1rem;
}
/* 吹き出しのしっぽ（三角）*/
.speech-yellow::after,
.speech-yellow::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: solid transparent;
}
  /* 外枠の黄色い三角 */
.speech-yellow::before {
  top: 100%;
  border-top-color: var(--bg-yellow-vivid);
  border-width: 10px;
}
.speech-yellow::after {
  /* 中の白い三角（枠線分だけ少し上にずらして重ねる） */
  top: calc(100% - 2px); 
  border-top-color: var(--color-white);
  border-width: 9px;
}

/* ボタンエリア */
.cta-block {
  width: 100%;
  margin: 20px auto;
}
.btn-unit {
  display: block; 
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 500px;
  animation: bounce 2s infinite;
}
.btn-unit img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}
.btn-unit:hover img {
  opacity: 0.8;
}

/* セクション画像 */
.section-img-box img {
  display: block; 
  width: 100%;    /* 親の箱に合わせてピッタリの幅になる */
  height: auto;   
  max-width: 500px;  
  margin: 3rem auto;
}
.image-reverse-x{
  /* X軸（横方向）に -1倍 することで左右が反転します */
  transform: scaleX(-1);
}

/* =========================================================
   【各セクションの調整】場所ごとの余白などはここに書く
   ========================================================= */

/*--フレイルとは（about-frail)-- */
.about-frail {
  background-color: #f4ede9;
}
.card-about-frail {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-about-frail-ttl {
  margin-bottom: 1rem;
  /* カード内の余白と干渉しないように調整 */
  margin-top: 0; 
}


/* --選ばれる３つの理由前半（point3)-- */
.point3 {
  background-color: var(--bg-green-light);
}
.point3-list {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 4rem; 
}
.card-point3 {
  background: var(--bg-yellow-light);
  padding: 3rem 2rem 2rem;
  position: relative;
  overflow: visible; /* 王冠のはみ出し */
}
.card-crown {
  width: 6rem;
  position: absolute;
  top: -1.5rem;
  left: -1rem;
  z-index: 10;
}
.card-crown img {
  width: 100%;
  height: auto;
}
.card-point3-txt {
  margin-bottom: 2rem;
}

/* --- 選ばれる３つの理由後半（point3-bottom) --- */
.point3-bottom {
  margin-top: 2rem; /* 上のカードとの間隔 */
}
.gray-box{
  background-color:var(--bg-gray-light);
}
.gray-box-txt{
  margin: 2rem;
  line-height: 1.8;
}



/* ---悩みエリア（trouble)--- */
.trouble {
  background-color: var(--bg-gray-light);
  color: #676059;
}
.trouble-ttl,.price-ttl {
  margin-bottom: 0; /* section-ttlの余白をリセット */
  line-height: 1.4;
}
.trouble-card {
  display: flex; /* 横並びにする */
  align-items: center; /* 上下の中心を揃える */
  justify-content: center; /* 中身全体も中央に寄せる */
  background-color: var(--bg-gray-light); /* 薄いグレーの背景 */
  padding: 1rem;
  margin-bottom: 2rem;
  max-width: 500px; /* カードの幅制限 */
  margin-left: auto;  /* 中央寄せ */
  margin-right: auto; /* 中央寄せ */
  gap: 1.5rem; 
}
.trouble-card-img {
  width: 50%; /* 画像の幅 */
  flex-shrink: 0; /* 画像が縮まないようにする */
}

.trouble-card-img img {
  border-radius: 8px; /* 画像の角丸 */
  width: 100%;
  height: auto;
  display: block;
}
.trouble-card-txt {
  flex: 1;
  text-align: center; 
  line-height: 1.6;
  margin: 0; /* 余計な余白を消す */
}
.trouble-card:nth-of-type(even) {/* 偶数番目のカードだけ左右反転 */
  flex-direction: row-reverse;
}
.trouble-check-box {
  background-color: var(--bg-gray-light); /* 薄いグレーの背景 */
}

/* ---悩みエリア（trouble-bottom)--- */
.trouble-bottom{
  background-color: var(--bg-orange-light);
}

/* 動画紹介エリア */
.movie-area {
  margin: 4rem 0 4rem 0;
  text-align: center;
  width: 100%; 
  padding-bottom: 4rem;
}
.movie-ttl{
  margin-bottom: 0;
}
.movie-area-txt{
  margin-top: 2rem;
  line-height: 2;
}
.youtube-wrap {
  position: relative;
  width: 100%;
  max-width: 600px; /* PCで大きくなりすぎないように */
  margin: 2rem auto 0;
  aspect-ratio: 16 / 9; 
}
.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- 選ばれる7つの理由（reason7） --- */
.reason7 {
  background-color: var(--bg-yellow-vivid);
}
.reason7-ttl{
  padding: 1rem;
  border-radius: 5px;
}
.reason7-card-list {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 3rem; /* カード同士の間隔 */
  margin-top: 3rem;
}
.card-reason7 {
  background-color: var(--bg-orange-light); 
}
.reason-num {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  text-align: left; /* 左上に配置 */
}
.reason7-img {
  margin: 2rem 0;
}


/* --- スタッフ紹介（profile）--- */
.profile {
  background-color: var(--bg-green-light);
}
.profile-ttl{
  font-size: 3.2rem;
}
.profile-position{
  font-size: 2rem;
}
.profile-card-list {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 3rem; /* カード同士の間隔 */
  margin-top: 3rem;
}
.card-profile {
  background-color: var(--bg-beige-vivid);
}
.profile-img img {/* 画像を丸くする */
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  margin: 1.5rem auto;
  display: block;
}
.profile-name {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  line-height: 1.3;
}
.profile-name span {
  font-size: 1.4rem;
  font-weight: 400;
}
.profile-data {
  margin-bottom: 1.5rem;
}
.profile-txt {
  text-align: left;
}
.profile-txt a {
  color: #06c;
  text-decoration: underline;
}


/* ---理想像（benefit)--- */
.benefit{
  background-color: var(--bg-beige-vivid);
}
.benefit-card-ttl{
  margin-bottom:  2rem;
}
.check-list .marker-yellow{
  font-weight: 500;
}
.check-list li{
  font-weight: 500;
}


/* =========================================================
   【ここから追加】料金詳細・特典（Price）
   ========================================================= */
.price {
  background-color: var(--bg-green-light);
}

/* 料金プランのテキスト */
.price-plan-area {
  margin-bottom: 4rem;
  line-height: 2.0;
  font-weight: bold;
}

/* プレゼントエリア */
.price-present-area {
  margin-bottom: 3rem;
}

.present-lead {
  font-weight: bold;
  margin-bottom: 2rem;
}

.present-impact {
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.price-img-box {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 2rem;
}
.price-img-box img {
  width: 80%;
  height: auto;
  transform: rotate(-2deg); ;
}

.present-desc {
  line-height: 1.8;
  margin-bottom: 4rem;
}

/* 実質価格のボックス（オレンジ枠） */
.price-box {
  border: 2px solid var(--color-orange);
  padding: 3rem 2rem;
  position: relative; /* 三角形の位置基準 */
  margin-bottom: 4rem;
  overflow: visible; /* 三角形がはみ出ても見えるように */
}

/* 上の逆三角形（吹き出しのしっぽ） */
.price-box-triangle {
  position: absolute;
  top: -8px; /* 箱の上に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 15px; /* 上0, 左右15, 下15の三角 */
  border-color: transparent transparent var(--bg-yellow-vivid) transparent; /* 下だけオレンジ */
  /* 下向きの三角にするために反転させるか、borderの向きを変える */
  /* 今回は上向き三角（▲）ではなく、下向き（▼）にしたいので上から突き刺す形に */
  transform: translateX(-50%) rotate(180deg);
}

.price-box-txt {
  font-weight: bold;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* 最後のメッセージ */
.price-footer-msg {
  margin-top: 4rem;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* =========================================================
   【ここから追加】比較表（comparison）
   ========================================================= */
.comparison {
  background-color: #fff;
}

.comparison-container {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center; /* ★ここをleftからcenterに変更しました */
  /* 横スクロール設定 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem; /* スクロールバーが見えやすいように少し余白 */
  position: relative; /* ガイドの基準点 */
}

/* スクロールガイド（オーバーレイ） */
.scroll-guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none; /* 下の表を操作できるようにする */
  opacity: 0; /* ★初期状態は見えないようにする */
}

/* ★このクラスがついたらアニメーション開始 */
.scroll-guide.is-active {
  animation: fadeOutHint 3.5s ease-in-out forwards;
}

.scroll-guide p {
  background: rgba(0, 0, 0, 0.7); /* 黒い半透明の背景 */
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1.4rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

@keyframes fadeOutHint {
  0% { opacity: 0; transform: translateY(10px); } /* 少し下からふわっと */
  10% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- テーブル構造 --- */
.cmp-table {
  display: flex;
  flex-direction: column;
  min-width: 600px; /* ★重要：スマホ画面より大きくしてスクロールさせる */
  border-top: 1px solid #ddd;
}

.cmp-row {
  display: flex;
  /* flex-wrap: wrap; を削除して横一列を維持 */
  border-bottom: 1px solid #ddd;
  align-items: stretch; /* 高さを揃える */
}

/* ヘッダー行 */
.cmp-header {
  border-bottom: none;
  align-items: flex-end;
}

/* セル共通設定 */
.cmp-cell {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ①項目名 */
.cmp-item, .cmp-head-item {
  width: 20%;
  font-weight: bold;
  background-color: #f4f4f4;
  text-align: center;
  border-right: 1px solid #ddd;
}
.cmp-head-item {
  background-color: transparent;
  border: none;
}

/* ②すこやかジム（強調エリア） */
.cmp-sukoyaka, .cmp-head-sukoyaka {
  width: 40%;
  background-color: var(--bg-orange-light);
  border-left: 2px solid var(--color-orange);
  border-right: 2px solid var(--color-orange);
  position: relative;
  z-index: 2;
}

/* すこやかヘッダー */
.cmp-head-sukoyaka {
  border-top: 2px solid var(--color-orange);
  border-radius: 10px 10px 0 0;
  text-align: center;
  padding-top: 1.5rem;
  box-shadow: 0 -4px 10px rgba(230, 92, 0, 0.1);
}

/* すこやかボディ */
.cmp-sukoyaka {
  border-bottom: none;
}

/* 最後の行のすこやかセル */
.cmp-row:last-child .cmp-sukoyaka {
  border-bottom: 2px solid var(--color-orange);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 10px rgba(230, 92, 0, 0.1);
}

/* ③他社ジム */
.cmp-other, .cmp-head-other {
  width: 40%;
  background-color: #fff;
  color: #666;
  padding: 1rem; /* ★パディングをセル共通と同じように調整 */
}

.cmp-head-other {
  text-align: center;
  background-color: #eee;
  border-radius: 5px 5px 0 0;
  color: #333;
  margin-top: auto;
  padding-top: 1rem;
  height: fit-content;
}

/* --- テキスト装飾クラス --- */


.cmp-price-main {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.cmp-price-sub {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.cmp-highlight-box {
  background-color: #fff;
  border: 2px solid var(--color-orange);
  border-radius: 5px;
  padding: 0.5rem;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(230, 92, 0, 0.2);
}
.txt-red-bold {
  color: var(--color-red);
  font-weight: bold;
  font-size: 1.2em;
}


/* --- PC画面（幅768px以上）のときの調整 --- */
@media (min-width: 768px) {
  /* PCではスクロール不要なのでリセット */
  .comparison-container {
    overflow-x: visible;
  }
  .cmp-table {
    min-width: auto; /* 幅制限解除 */
  }
  
  /* PCでは案内テキストを隠す */
  .scroll-guide {
    display: none;
  }

  /* 他社カラムの背景調整 */
  .cmp-other, .cmp-head-other {
    width: 40%;
    border-bottom: 1px solid #ddd;
    padding: 1rem; /* ★ここも調整 */
    background-color: #f9f9f9; 
  }
  .cmp-head-other {
    background-color: #eee;
    border-bottom: none;
  }
  
  /* すこやか列の強調（PCでは影を大きく） */
  .cmp-head-sukoyaka {
    transform: scaleY(1.05) translateY(-5px);
    z-index: 10;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
  }
  .cmp-sukoyaka {
    box-shadow: 10px 0 10px -10px rgba(0,0,0,0.05), -10px 0 10px -10px rgba(0,0,0,0.05);
  }
  .cmp-row:last-child .cmp-sukoyaka {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    transform: scaleY(1.05) translateY(5px);
  }
}

/* =========================================================
   ----ここまで比較表（comparison）
   ========================================================= */


/* 推薦者の声（recommend） */
.recommend{
  background-color: var(--bg-orange-light);
}
.recommend-card-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
}
.card-recommend{
  background-color: var(--bg-beige-vivid);
}
.recommend-txt{
  margin-top: 2rem;
  line-height: 1.8;
}



/* 利用者の声（usersvoice) */
.usersvoice{
  background-color: var(--bg-yellow-vivid);
}
.card-usersvoice{
  background-color: var(--bg-orange-light);
}
.usersvoice-card-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
}



/* =========================================================
   【ここから追加】よくある質問（FAQ）
   ========================================================= */
.faq {
  background-color: #f9fafb;
}
.faq-card-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}
.card-faq {
  text-align: left; /* 左揃え */
  padding: 3rem;
}
.card-faq-question {
  margin-bottom: 1.5rem;
  line-height: 1.5;
  border-bottom: 2px dashed #ddd; /* 点線で区切る */
  padding-bottom: 1rem;
}
.card-faq-answer {
  line-height: 1.8;
}
.faq-msg{
  line-height: 1.8;;
}


/* =========================================================
   【ここから追加】アクセス（Access）
   ========================================================= */
.access {
  background-color: #f9fafb;
}

.access-ttl {
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

/* マップエリア */
.map-wrap {
  width: 100%;
  max-width: 800px; /* PCで見やすくなるように広げる */
  margin: 0 auto 3rem;
  aspect-ratio: 16 / 9; /* 比率を固定 */
  background-color: #ccc;
  position: relative;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.map-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #666;
}

/* Instagramボタン */
.insta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 4rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.5rem;
  font-weight: bold;
  color: var(--color-black);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: opacity 0.3s;
  font-size: 1.8rem;
}
.insta-btn:hover {
  opacity: 0.8;
  box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
.insta-icon {
  width: 30px;
  height: 30px;
  margin-right: 1rem;
}
/* アイコン画像の調整（仮） */
.insta-icon img {
  width: 100%;
  height: auto;
}

/* 店舗情報 */
.access-info {
  max-width: 600px;
  margin: 0 auto 4rem;
  text-align: left;
  display: inline-block; /* 中央寄せしつつ中身は左揃えにする技 */
}

.access-info dl {
  display: flex;
  margin-bottom: 1.5rem;
  line-height: 1.8;
  font-feature-settings: "palt";
}
.access-info dt {
  font-weight: bold;
  width: 6em; /* 項目名の幅を揃える */
  flex-shrink: 0;
}
.access-info dd {
  font-weight: 500;
}

/* ロゴ */
.access-logo img {
  width: 20%;
  min-width: 200px;
  height: auto;
  margin: 0 auto;
}

/* =========================================================
   フッター
   ========================================================= */
.footer {
  background-color: #594e46; /* 濃い茶色 */
  color: #fff;
  padding: 2rem 2rem 10rem 2rem;
  text-align: center;
}

.footer-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  font-size: 1.2rem;
}

.footer-link a {
  color: #fff;
  text-decoration: none;
}
.footer-link a:hover {
  text-decoration: underline;
}

/* --- PC画面（幅768px以上）のときの調整 --- */
@media (min-width: 768px) {
  /* アクセス情報の文字サイズ調整 */
  .access-info {
    font-size: 1.8rem;
  }
  
  .access-ttl {
    font-size: 2.4rem;
  }
}

/* =========================================================
   【ここから追加】追従フッター（Sticky Footer）
   ========================================================= */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* 少し透過した白 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  padding: 0.8rem 1rem; /* 上下のパディングを少し狭く */
  
  /* 初期状態は隠しておく */
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
}

/* 表示クラスがついた時 */
.sticky-footer.is-visible {
  transform: translateY(0);
}

.sticky-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content:center ; /* 両端と中央に配置 */
  align-items: center;
  gap: 0.5rem; /* 要素間の隙間 */
}

/* ★追加：中間サイズ（少し画面が広いスマホ〜タブレット）の調整 */
@media (min-width: 450px) {
  .sticky-inner {
    gap: 2rem; /* 間隔を程よく空ける */
  }
}

/* ロゴ */
.sticky-logo {
  width: 100px; /* ロゴ・名前入り画像に合わせて幅を調整 */
  flex-shrink: 0; /* 縮まないようにする */
}
.sticky-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* LINEボタン */
.sticky-line {
  width: 120px; /* スマホで押しやすいサイズ */
  flex-shrink: 0;
  transition: opacity 0.3s;
}
.sticky-line img {
  width: 100%;
  height: auto;
  display: block;
}
.sticky-line:hover {
  opacity: 0.8;
}

/* 電話ボタン */
.sticky-tel {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* 電話アイコン（ここを修正して巨大化を防ぐ） */
.tel-icon {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tel-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 枠内に綺麗に収める */
}

/* 電話テキスト */
.tel-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.tel-num {
  font-weight: bold;
  font-size: 1.3rem;
  color: #191718;
  white-space: nowrap; /* 改行させない */
}
.tel-time {
  font-size: 1rem;
  color: #666;
  white-space: nowrap;
}

/* --- PC画面（幅768px以上）のときの調整 --- */
@media (min-width: 768px) {
  .sticky-footer {
    padding: 1.5rem 2rem;
  }
  
  .sticky-inner {
    justify-content: center; /* PCなら中央寄せで見やすく */
    gap: 4rem; /* 間隔を広げる */
  }
  
  .sticky-logo {
    width: 140px; 
  }
  
  .sticky-line {
    width: 180px; 
  }
  
  .tel-icon {
    width: 40px;
    height: 40px;
  }
  
  .tel-num {
    font-size: 1.8rem;
  }
  
  .tel-time {
    font-size: 1.2rem;
  }







/* =========================================================
   PC画面（幅768px以上）のときのカード類の調整
   ========================================================= */
@media (min-width: 768px) {
  
   .pc-none {
     display: none;
   }

  .fv-logo {
    top: 2rem;     /* PCなら上20px空ける */
    right: 2rem;   /* PCなら右20px空ける */
    /* PCでは大きくなりすぎないように固定サイズにする */
    width: 120px;  /* 12rem相当。お好みで100px〜150pxに変更してください */
  }
  .fv-btn {
    /* ＝＝＝画像をはみ出させるためにマイナス値を指定 ＝＝＝ */
    bottom: -8px; 
  }
 

  .card-about-frail { /* PCでは幅を広げる */
    width: 100%;
    max-width: 900px; /* 広すぎないように制限 */
    margin: 4rem auto; /* 中央寄せ */
  }
  .card-about-frail .card-txt {/* テキストの幅制限を解除 */
    max-width: none;
  }
  .about-frail-content {/* 横並びレイアウト（左：文字、右：画像） */
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between;
    gap: 3rem; /* 文字と画像の間隔 */
  }
  .about-frail-info {/* 文字エリア */
    flex: 1; /* 残りのスペースを使う */
    text-align: left; /* 左揃え */
  }
  .about-frail-img {/* 画像エリア */
    width: 45%; /* 画像の幅 */
    flex-shrink: 0; /* 画像が縮まないようにする */
  }
  .about-frail-img img { /* 画像の余白調整 */
    margin: 0; /* 中央寄せを解除 */
  }
  .card-about-frail .card-body { /* カード内のパディング調整（PCでは少し広めに） */
    padding: 0; /* フレックス内のパディングは不要になる場合があるため調整 */
    padding-top: 1rem;
  }


  .point3-list {
    flex-direction: row; /* PCは横並び */
    justify-content: space-between;
  }
  .card-point3 {
    width: 32%; /* 3つ並べる */
    margin-bottom: 0;
  }




  .reason7-card-list,
  .profile-card-list,
  .recommend-card-list,
  .usersvoice-card-list,
  .benefit-list {
    flex-direction: row; /* 横並びにする */
    flex-wrap: wrap;     /* 折り返しを許可 */
    justify-content: center; /* 中央寄せ */
  }

  .reason7-card-list,
  .usersvoice-card-list,
  .benefit-list {
    gap: 3rem 2%; /* 縦3rem, 横2%の間隔 */
  }
   .profile-card-list {
    align-items: flex-start; /* 上揃え */
    gap: 3rem 4%;
  }
  .recommend-card-list {
    align-items: stretch; /* 高さを揃える */
    gap: 3rem 4%;
  }
  .usersvoice-card-list {
    align-items: stretch; /* 高さを揃える */
    gap: 3rem 2%;
  }

  .card-reason7 ,
  .card-profile, 
  .card-recommend, 
  .card-usersvoice{
    margin: 0; /* マージンリセット */
    width: 48%; /* 2つ並べる */
  }
  .card-reason7 , 
  .card-recommend ,
  .card-usersvoice{
    max-width: none; /* card-baseの制限を解除して並びやすくする */
  }

  .benefit-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 2行目の2つを中央寄せにする */
    gap: 3rem 2%; /* 縦の間隔3rem、横の間隔2% */
  }
  
  .benefit-list .check-box {
    width: 32%; /* 3列にする */
    margin: 0; /* 元のmargin: 2rem autoをリセット */
    box-sizing: border-box;
  }

  .card-faq {
    width: 100%;
    max-width: 900px; /* 広すぎないように制限 */
    margin: 0 auto; /* 中央寄せ */
  }
  /* ★追加：FAQカード内のテキストだけは、幅制限（400px）を解除して広げる */
  .card-faq .card-txt {
    max-width: none;
  }

}





/* =========================================================
   下層ページ共通（プライバシーポリシー・特商法など）
   ========================================================= */

/* ページ上部のロゴ（トップページに戻るリンク用） */
.page-header-logo,
.privacy-header-logo {
    padding: 2rem 0;
    width: 120px;
    margin: 0 auto;
}

/* =========================================================
   プライバシーポリシー用スタイル
   ========================================================= */

/* 本文のpタグ調整（両端揃え・行間広め） */
.privacy-text {
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* シンプルな小見出し（装飾をリセットして黒文字に） */
.privacy-content h2,
.text-content h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    text-align: left;
    color: var(--color-black);
    background: none; 
    padding: 0;
    display: block;
}

/* シンプルなリスト（黒丸） */
.privacy-list {
    list-style: disc;
    padding-left: 2rem;
    margin-bottom: 2rem;
    text-align: left;
}
.privacy-list li {
    margin-bottom: 0.5rem;
}

/* 署名部分（右寄せなどではなく、左寄せブロック） */
.privacy-signature {
    margin-top: 5rem;
    text-align: left;
    display: inline-block;
}
.privacy-signature dl {
    display: flex;
    margin-bottom: 0.5rem;
}
.privacy-signature dt {
    font-weight: bold;
    width: 5em;
}


/* =========================================================
   特定商取引法に基づく表記用スタイル
   ========================================================= */

/* 特商法リスト（線で区切るリスト） */
.tokushou-list {
    text-align: left;
    border-top: 1px solid #ddd;
}
.tokushou-list dl {
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    border-bottom: 1px solid #ddd;
    padding: 1.5rem 0;
}
.tokushou-list dt {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--color-black);
}
.tokushou-list dd {
    line-height: 1.8;
    margin-left: 0;
}

/* PCでの横並び調整 */
@media (min-width: 768px) {
    .tokushou-list dl {
        flex-direction: row;
        align-items: baseline;
        padding: 2rem 1rem;
    }
    .tokushou-list dt {
        width: 25%; /* 項目名の幅 */
        flex-shrink: 0;
        margin-bottom: 0;
        padding-right: 2rem;
    }
    .tokushou-list dd {
        width: 75%;
    }
}

/* テキストリンク（下線付き） */
.text-link {
    color: var(--color-black);
    text-decoration: underline;
}
.text-link:hover {
    opacity: 0.7;
    text-decoration: none;
}