@charset "UTF-8";

/* ===== Global Normalize / Tokens ===== */
:root{
  --c-text:#333;
  --c-muted:#666;
  --c-bg:#f9f9f9;
  --c-white:#fff;

  --c-primary:#005599;
  --c-accent:#f37021;
  --c-line:#06c755;
  --c-warn:#FFEC00;

  --radius-s:6px;
  --radius-m:10px;

  --shadow-s:0 2px 5px rgba(0,0,0,.06);
  --shadow-m:0 4px 10px rgba(0,0,0,.08);

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:40px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif;
  line-height:1.6;
  color:var(--c-text);
  margin:0;
  background:var(--c-bg);
}

img{ max-width:100%; height:auto; display:block; }

.container{
  max-width:1000px;
  margin:0 auto;
  padding:var(--space-5) 20px;
}


/* --- Base --- */
body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    background-color: #f9f9f9;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Header --- */
.header {
    background: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    width: 40%;
}

.tel {
    font-weight: bold;
    font-size: 1.2rem;
    color: #005599;
    margin: 0;
}

.btn-line-header {
    background: #06c755;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
}

/* --- First View (FV) --- */
.fv {
    background-image: url(img/fv-new.png);
    background-size: cover;
    padding: 60px 20px;
    text-align: center;
    min-height: 790px;
}


/* 共通CSS */



.kamei,.katsumura {
  width: 20%;
}

/* すべての「katsumura」要素を右寄せにする */
.katsumura {
  margin-left: auto;
}

/* --- 1. 横並びにする設定（親要素） --- */
/* sec-4（新しく作った囲み）, sec-7上部, sec-10上部 を対象 */
.sec-4--group,
.sec-7--top,
.sec-10--top,
.sec-4--group-utagai {
  display: flex;       /* 横並びにする */
  align-items: center; /* 上下中央揃え */
  gap: 20px;           /* 画像と吹き出しの間隔 */
  margin-bottom: 30px; /* 下の要素との余白 */
}



/* --- 2. 吹き出し本体のデザイン --- */
/* 各セクションの吹き出しクラスをまとめて指定 */
.sec-4--kamei-fukidashi,
.sec-7--kamei-fukidashi,
.sec-10--kamei-fukidashi,
.sec-4--utagai-fukidashi { /* ※HTMLのクラス名(kemei)に合わせています */
  position: relative;          /* しっぽの基準点 */
  background: #0099ff;         /* 背景色（青） */
  color: #fff;                 /* 文字色（白） */
  padding: 10px 30px;          /* 内側の余白 */
  border-radius: 15px;         /* 角丸 */
  font-weight: bold;           /* 文字を太く */
  font-size: 2rem;           /* 文字サイズ調整 */
  line-height: 1.3;            /* 行間 */
}



/* --- 3. しっぽ（三角）を作る --- */
.sec-4--kamei-fukidashi::before,
.sec-7--kamei-fukidashi::before,
.sec-10--kamei-fukidashi::before,
.sec-4--utagai-fukidashi::before {
  content: "";
  position: absolute;
  top: 50%;                    /* 上から50%の位置 */
  left: -15px;                 /* 左に突き出す */
  transform: translateY(-50%); /* 縦方向のズレを補正して完全な中央へ */
  
  /* 三角形を作る記述 */
  border-style: solid;
  border-width: 10px 15px 10px 0; /* 上 右 下 左 の太さ */
  border-color: transparent #0099ff transparent transparent; /* 右の線だけ青くする */
}






/* --- 1. グループ全体の設定（Flexboxで左右反転） --- */


/* sec-5の新しい囲み、sec-7の下部などを対象にします */
.katsumura-group,
.sec-7--bottom {
  display: flex;
  flex-direction: row-reverse; /* ★重要：中身の並び順を左右反転させる */
  align-items: center;         /* 上下中央揃え */
  gap: 20px;                   /* 画像と吹き出しの間隔 */
  margin-top: 30px;
}

/* ★補足：もし画像の margin-left: auto が効いて隙間が開きすぎる場合はリセットする */
.katsumura-group .katsumura,
.sec-7--bottom .katsumura {
  margin-left: 0; 
}


/* --- 2. 勝村用吹き出し本体（青背景・角丸） --- */
/* クラス名はHTMLに合わせて列挙してください */
.sec5--kastumura-fukidashi,
.sec-7--kastumura-fukidashi {
  position: relative;
  background: #0099ff;
  color: #fff;
  padding: 20px 30px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.5;
  width: fit-content;  /* 文字量に合わせる（または max-width 設定） */
}


/* --- 3. 右側のしっぽ（三角）を作る --- */
.sec5--kastumura-fukidashi::before,
.sec-7--kastumura-fukidashi::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* ▼ここが亀井さん（左）と違うポイント▼ */
  right: -15px;  /* 右側に突き出す */
  left: auto;    /* 左指定を打ち消し */
  
  /* 左向きの三角を作る（左のボーダーに色をつける） */
  border-style: solid;
  border-width: 10px 0 10px 15px; /* 上 右 下 左 */
  border-color: transparent transparent transparent #0099ff;
}



/* --- Header 修正（横並び） --- */
.header-info-group {
    display: flex; /* 横並びにする */
    align-items: center; /* 上下中央揃え */
    gap: 15px; /* 電話番号とボタンの間隔 */
}
/* スマホで狭すぎる場合は縦に戻す調整 */
@media (max-width: 480px) {
    .header-info-group {
        flex-direction: column;
        gap: 5px;
        align-items: flex-end;
    }
}

/* --- FV 修正（0円強調レイアウト） --- */
.fv-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap; /* スマホで狭いときは折り返す */
}

/* 左側のテキスト */
.fv-hero-text {
    text-align: left;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.3;
    color: #333;
    text-shadow: 2px 2px 0 #fff;
}

/* 真ん中の0円 */
.fv-hero-price {
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 236, 0, 0.5); /* 光彩 */
    margin-top: 4.5%;
}

.fv-hero-price span {
    font-size: 16rem; /* 超巨大化 */
    background: linear-gradient(to bottom, #fff 0%, #ffeb3b 50%, #fdd835 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 4px 0px rgba(0,0,0,0.1));
}

.fv-hero-price {
    font-size: 3rem; /* "円"のサイズ */
    color: #fdd835;
    display: flex;
    align-items: baseline; /* 数字の下と円の下を揃える */
}


/* スマホ調整 */
@media (max-width: 768px) {
    .fv-hero {
        flex-wrap: nowrap !important;
    }
    .fv-hero-text {
        font-size: 1.5rem;
    }
    .fv-hero-price span {
        font-size: 6rem;
    }


    
}
.fv .fv-hero{
  position: relative;
}

/* ロゴとテキストを“セット”で扱う（位置関係が崩れにくい） */
.fv .fv-hero-head{
  position: absolute;
  top: 22px;    /* ここで全体の上下を調整 */
  left: 240px;   /* ここで全体の左右を調整 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 3;
}

/* ロゴサイズ調整 */
.fv .fv-hero-logo img{
  width: 300px;   /* ここが主調整ポイント */
  height: auto;
  display: block;
  margin-left: -20px;
}

/* テキストとの位置関係（行間/文字サイズもここで整える） */
.fv .fv-hero-text{
  margin: 0;
  line-height: 1.2;
}

/* SPは縮小 */
@media (max-width: 768px){
  .fv .fv-hero-head{
    top: 16px;
    left: 16px;
  }
  .fv .fv-hero-logo img{
    width: 178px;
  }
}

/* fv内で絶対配置できるようにする */
.fv .fv-content{
  position: relative;
}

/* 右上の吹き出し */
.fv .fv-right{
  position: absolute;
  top: 40px;
  right: 220px;
  z-index: 5;
}

.fv .fv-fukidashi{
  display: inline-block;
  background: #0A8DFF;
  color: #fff;
  padding: 18px 22px;
  border-radius: 10px;
  font-size: clamp(20px, 2.2vw, 34px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  position: relative;
  text-shadow:
    0 2px 0 rgba(0,0,0,.08),
    0 0 6px rgba(255,255,255,.25);
     /* 吹き出し本体に下線を追加する */
    border-bottom: 2px solid #fff !important; 
}

.fv .fv-fukidashi::after{
  content: "";
  position: absolute;
  right: -15px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #0A8DFF transparent;
  transform: skewX(-12deg);
}

/* sec-3 */
/* --- 矢印エリアの器 --- */
/* --- 矢印エリアの器 --- */
.comparison-arrows {
  display: flex;
  justify-content: center;
  gap: 300px;               /* 指定：間隔を30pxに */
  margin: 0;  /* 余白調整 */
  height: 100px;           /* 矢印が巨大化したので表示エリアも高さを確保 */
}

/* --- 矢印の共通設定（棒の部分） --- */
.arrow {
  position: relative;
  display: block;
  width: 30px;             /* 指定：棒の太さを30pxに */
  height: 70px;            /* バランスを見て棒を長くしました */
  background-color: #333;
  border-radius: 4px;
}

/* --- 矢印の先端（三角形） --- */
.arrow::after {
  content: "";
  position: absolute;
  /* 三角形の高さ分だけ下にずらす（高さ45px設定なので -40px くらいで被せる） */
  bottom: -40px;           
  left: 50%;
  transform: translateX(-50%);
  
  /* 三角形を描く記述 */
  width: 0;
  height: 0;
  border-style: solid;
  /* 上(高さ)45px, 右30px, 下0, 左30px → これで底辺幅60pxになります */
  border-width: 45px 30px 0 30px; 
  border-color: #333 transparent transparent transparent;
}

/* --- 個別の傾き --- */
.arrow.left {
  transform: rotate(40deg); /* 左へ */
}

.arrow.right {
  transform: rotate(-40deg);  /* 右へ */
}
/* =========================
   Comparison（統一版）
   - 重複定義を排除
   - PCは「タイトル左上 / 説明右上 / 人物右上」で固定
   - SPは自然な縦並び
========================= */

.comparison{
  padding: 60px 20px 60px;
  background-color: #f9f9f9;
  text-align: center;
}

/* containerは「上段の絶対配置の基準」になる */
.comparison .container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 110px 20px; /* 上段（タイトル/説明/人物）の逃げ */
  position: relative;
  box-sizing: border-box;
}

.comparison img{
  max-width: 100%;
  height: auto;
}

/* ---------- 上段：タイトル（左上固定） ---------- */
.comparison .sec-title{
  position: absolute;
  top: 18px;
  left: 0;

  display: inline-block;
  background: #0A8DFF;
  color: #fff;
  padding: 16px 26px;
  border-radius: 12px;
  line-height: 1.2;
  margin: 0;

  z-index: 5;
  text-shadow: 0 2px 0 rgba(0,0,0,.08), 0 0 6px rgba(255,255,255,.25);
}

/* しっぽ */
.comparison .sec-title::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width:0; height:0;
  border-style: solid;
  border-width: 18px 16px 0 16px;
  border-color: #0A8DFF transparent transparent transparent;
}

/* ---------- 上段：説明（右上固定） ---------- */
.comparison .sec-desc{
  display: inline-block;
  background: #FFEC00;
  color: #333;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  z-index: 5;
  box-shadow: 0 4px 0 rgba(0,0,0,.08);
  text-align: left;
  font-size: 1.7rem;
  transform: translate(-35px, -45px);
}

/* ---------- 上段：人物（右上固定） ---------- */
.comparison .kastumura{
  position: absolute;
  top: -125px;
  right: 0;
  z-index: 6;
  margin: 0;           /* 余計なmargin-left等は無効化 */
}

.comparison .kastumura img{
  width: 180px;
  height: auto;
  display: block;
}

/* ---------- 上段：矢印バー ---------- */


/* ---------- 上段：case-top ---------- */
.comparison .case-top-wrapper{
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}

.comparison .case-top{
  text-align: center;
  position: relative;
}

.comparison-middle {
  font-size: 2rem;
  margin: 0;
}


/* 上段の中身横並び */
.comparison .case-top-inner{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}


/* ---------- 下段：A/B 2カラム（※あなたのHTMLが comparison-ab-grid を使っている前提） ---------- */
.comparison .comparison-ab-grid{
  display: grid;
  grid-template-areas: "case-a case-b";
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-bottom: 40px;
}

.comparison .bottom-message {
  background: #FFEC00;
  font-size: 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.sec-4--utagai {
  width: 10%;
}



/* --- Reasons --- */
/* --- Scope: reasons section --- */
.reasons {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    /* 背景：ワイヤーのような薄いグレーのチェック柄をCSSグラデーションで再現 */
    background-color: #fcfcfc;
    background-image:
        linear-gradient(45deg, #f3f3f3 25%, transparent 25%, transparent 75%, #f3f3f3 75%, #f3f3f3),
        linear-gradient(45deg, #f3f3f3 25%, transparent 25%, transparent 75%, #f3f3f3 75%, #f3f3f3);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    padding: 60px 20px;
    box-sizing: border-box;
}

.reasons * {
    box-sizing: border-box;
}

.reasons {
    padding-top: 0; /* 上部の余白を削除してヘッダーを密着させる */
    padding-bottom: 60px;
    overflow-x: hidden; /* 横スクロール発生防止 */
}

.reasons__inner {
    max-width: 900px;
    margin: 0 auto;
}

/* sec-6 */
.sec-6 {
  /* background-color: #F5F1DD; */
}

.c-secTitle {
  text-align: center;
  font-size: 2rem;
  text-align: center;
  background: #FFEC00;
  
  max-width: 500px;
  margin: 2% auto;
}

.sec-6--step {
  font-size:2rem;
  /* background-color: #F5F1DD; */
}


/* --- Scope: point2 section --- */
.point2 {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    padding-bottom: 60px;
    background: #fff;
}

.point2 * {
    box-sizing: border-box;
}

.point2__inner {
    width: 100%;
    /* コンテンツ幅制限（ヘッダー帯以外） */
    max-width: 100%; 
}


/* 丸いバッジ (Point 2) */
.point2__bandLeft {
    flex-shrink: 0;
}

.point2__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #fff;
    color: #008C9E;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    line-height: 1.1;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ヘッダーテキスト */
.point2__bandText {
    text-align: left;
}

.point2__bandTitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    color: #FFEB3B; /* 黄色で強調 */
}

.point2__bandSub {
    font-size: 0.9rem;
    margin: 5px 0 0;
    opacity: 0.9;
}

/* --- Section Title --- */
.point2__title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 auto 40px;
    max-width: 900px;
    padding: 0 20px;
    line-height: 1.5;
}

.point2__titleEm {
    color: #E67E22; /* オレンジ */
    margin-left: 10px;
    display: inline-block;
}

/* --- List Area --- */
.point2__list {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- Cost Row (Card) --- */
.costRow {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden; /* 角丸を効かせる */
    min-height: 80px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 左側のラベル（水色背景） */
.costRow__label {
    background-color: #26C6DA; /* 明るいシアン */
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

.costRow__labelText {
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.3;
}

/* 右側のコンテンツ */
.costRow__content {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.costRow__lead {
    color: #F06292; /* ピンク色 */
    font-weight: bold;
    margin: 0 0 5px 0;
    font-size: 1rem;
}

.costRow__desc {
    font-size: 0.85rem;
    margin: 0;
    color: #555;
}

/* --- Responsive Helpers (Simple) --- */
/* スマホなどでヘッダー帯の文字サイズ調整 */
@media (max-width: 600px) {
    .point2__band {
        flex-direction: row;
        text-align: left;
        padding: 10px;
    }
    .point2__bandTitle {
        font-size: 1.1rem;
    }
    .point2__bandSub {
        font-size: 0.75rem;
    }
    .costRow__lead {
        font-size: 0.95rem;
    }
}



/* --- Scope: yt section --- */
.yt {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 60px 20px;
    background: #f9f9f9;
}

.yt * {
    box-sizing: border-box;
}

.yt__inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Header --- */
.yt__header {
    margin-bottom: 40px;
    /* ワイヤーでは左揃えっぽくも見えますが、全体のバランスを見て中央揃え等の調整がしやすい構成にします */
    text-align: left; 
}

.yt__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1B4D3E; /* 深い緑色 */
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.yt__lead {
    font-size: 0.95rem;
    margin: 0;
    color: #555;
}

/* --- Grid Layout --- */
.yt__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラム固定 */
    gap: 20px;
    margin-bottom: 40px;
}

/* --- Card Style --- */
.ytCard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* サムネイル（16:9） */
.ytCard__thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    
    /* 仮画像：部屋っぽい雰囲気をグラデーションで表現 */
    background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 50%, #dcdcdc 50%, #d0d0d0 100%);
}

/* マウスホバー時の動き */
.ytCard__thumb:hover .ytCard__play {
    background: rgba(0,0,0,0.6);
    transform: translate(-50%, -50%) scale(1.1);
}

/* 再生ボタン（中央） */
.ytCard__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    z-index: 2;
    transition: all 0.3s ease;
}

/* 再生ボタンの三角 */
.ytCard__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%; /* 少し右にずらす */
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
}

/* サムネイル内のテキスト（下部オーバーレイ） */
.ytCard__thumbText {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 10px 10px;
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: 1;
}

/* バッジ（最新情報） */
.ytCard__badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #1B4D3E; /* タイトルと同じ緑 */
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 5px 10px;
    z-index: 3;
    border-bottom-right-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 1.2;
}

/* サムネイル下のタイトル */
.ytCard__title {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #333;
}

/* --- CTA Button --- */
.yt__cta {
    text-align: center;
}

.yt__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #A93226; /* YouTubeっぽい赤茶色 */
    color: #fff;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px; /* 角丸ピル型 */
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: opacity 0.3s;
}

.yt__btn:hover {
    opacity: 0.9;
}

.yt__btnIcon {
    margin-right: 10px;
    font-size: 0.8rem;
    background: #fff;
    color: #A93226;
    width: 24px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px; /* 三角の位置微調整 */
}
/* YouTubeセクション全体の基本設定 */
.yt {
    padding: 60px 20px;
    background-color: #fff;
}

.yt__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* グリッドの設定：ここが6つ並びの肝です */
.yt__grid {
    display: grid;
    gap: 20px; /* カード同士の隙間 */
    /* デフォルト（スマホ）は1列 */
    grid-template-columns: repeat(1, 1fr); 
}

/* タブレットサイズ：2列または3列 */
@media (min-width: 600px) {
    .yt__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PCサイズ：6列（ここで初めて6つ横に並べる） */
@media (min-width: 1024px) {
    .yt__grid {
        grid-template-columns: repeat(3, 1fr); /* まずは3列、2段にするのが見やすいです */
    }
}

/* もし「どうしても横一行に6つ」並べたい場合の設定 */
/* ただし1200px幅に6つだと1枚あたり約180pxになり、文字が読みづらくなるので注意してください */
@media (min-width: 1100px) {
    .yt__grid {
        grid-template-columns: repeat(3, 1fr); /* クライアントの要望が「2段で6つ」ならこれ */
        /* もし「横1列に6つ」なら repeat(6, 1fr) に変更 */
    }
}

/* カード内のタイトルが長くて崩れるのを防ぐ */
.ytCard__title {
    margin-top: 10px;
    font-size: 1.25rem;
    line-height: 1.5;
    /* 3行以上になったら「...」で省略する設定（お好みで） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* --- Scope: staff section --- */
.staff {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 60px 20px;
    background: #fff;
}

.staff * {
    box-sizing: border-box;
}

.staff__inner {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Section Title --- */
.staff__title {
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 40px;
    font-weight: normal; /* ワイヤー通り細め */
}

/* --- Hero Area (Beige Card) --- */
.staffHero {
    background-color: #f7f7f5; /* 薄いベージュ */
    padding: 40px 30px;
    border-radius: 4px; /* 角を少しだけ丸く */
    text-align: center;
    margin-bottom: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.staffHero__lead {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 30px 0;
}

/* --- Hero Profiles (Center 2 people) --- */
.staffHero__profiles {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.staffHeroProfile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.staffHeroProfile__photokatsu {
    width: 100px;
    height: 100px;
    /*background-color: #ddd; /* グレーのプレースホルダー */
    /*border-radius: 50%; /* 丸形 */
    /*margin-bottom: 10px;
    /* 本来はここに background-image が入る */
  background-image: linear-gradient(black, white);
background-image: url("img/katsumuraface.jpg");
  background-size: cover;
}

.staffHeroProfile__photokame {
    width: 100px;
    height: 100px;
    /*background-color: #ddd; /* グレーのプレースホルダー */
    /*border-radius: 50%; /* 丸形 */
    /*margin-bottom: 10px; 
    /* 本来はここに background-image が入る */
    background-image: linear-gradient(black, white);
    background-image: url("img/kameiface.png");
  background-size: cover;
}

.staffHeroProfile__name {
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
}

.staffHero__note {
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* --- Hero Message Box (Green Border) --- */
.staffHeroMessage {
    background: #fff;
    border: 2px solid #1B4D3E; /* 深い緑色 */
    padding: 20px 30px;
    border-radius: 8px;
    margin: 0 auto 30px;
    max-width: 700px;
    text-align: left;
}

.staffHeroMessage__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* --- Signatures --- */
.staffHero__signatures {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 10px;
}

.staffSign__text {
    font-family: serif; /* 署名っぽく */
    font-style: italic;
    font-size: 1.5rem;
    color: #555;
    margin: 0;
}

.staffHero__credit {
    font-size: 0.7rem;
    color: #ccc;
    text-align: right;
    margin: 0;
}

/* --- Staff List (Bottom Balloon Style) --- */
.staffList {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.staffItem {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* 左側：顔写真エリア */
.staffItem__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
}

.staffItem__avatarkatsu {
    width: 60px;
    height: 60px;
    background-color: #ccc;
    border-radius: 4px; /* 少し角丸 */
    margin-bottom: 5px;
  background-image: linear-gradient(black, white);
background-image: url("img/katsumuraface.jpg");
  background-size: cover;
}

.staffItem__avatarkamei {
    width: 60px;
    height: 60px;
    background-color: #ccc;
    border-radius: 4px; /* 少し角丸 */
    margin-bottom: 5px;
  background-image: linear-gradient(black, white);
background-image: url("img/kameiface.png");
  background-size: cover;
}

.staffItem__label {
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}

/* 右側：テキスト吹き出し */
.staffItem__body {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    flex: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* 吹き出しの三角（左向き） */
.staffItem__body::before,
.staffItem__body::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 100%; /* 左外側 */
    border-style: solid;
}

/* 枠線用の三角 */
.staffItem__body::before {
    border-width: 8px;
    border-color: transparent #ddd transparent transparent;
    margin-top: -1px; /* 微調整 */
}

/* 背景色用の三角（枠線の上に重ねて線を消す） */
.staffItem__body::after {
    border-width: 7px;
    border-color: transparent #fff transparent transparent;
    margin-top: 0px;
    margin-right: -1px;
}

.staffItem__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 600px) {
    .staffHero__profiles {
        gap: 20px;
    }
    
    .staffHeroMessage {
        padding: 15px;
    }
    
    .staffItem {
        flex-direction: column; /* スマホでは縦並びにする場合 */
        align-items: center;
        gap: 10px !important;
    }

    .staffItem__head {
      margin-right: auto;
      width: 100px;
    }
    
    .staffItem__body {
        width: 100%;
    }

    /* スマホ時は吹き出しの三角を上向きに変更 */
    .staffItem__body::before,
    .staffItem__body::after {
        top: -16px; /* 上外側 */
        right: auto;
        left: 40px; /* 左から少しずらす */
        border-color: transparent transparent #ddd transparent;
    }
    .staffItem__body::after {
        top: -14px;
        border-color: transparent transparent #fff transparent;
    }
}


.btn-line-float, .btn-mail-float {
    flex: 1;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-line-float { background: #06c755; }
.btn-mail-float { background: #ff8800; }


/* faq only */
.faq {
  /* セクション全体の基盤 */
  width: 100%;
  padding: 80px 20px;
  background-color: #f4f9fb;
  color: #333;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.faq * {
  box-sizing: border-box;
}

/* インナー（中央寄せ・幅制限） */
.faq__inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

/* タイトル */
.faq__title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #005599; /* 信頼感のある青 */
  margin: 0 0 48px;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 15px;
}

.faq__title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background-color: #1aa6c8; /* アクセントカラー */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* FAQリスト */
.faq__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 各アイテム（カード化） */
.faq__item {
  background: #fff;
  border: 1px solid #dfe7ea;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden; /* 角丸からはみ出ないように */
  transition: box-shadow 0.3s ease;
}

.faq__item[open] {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05); /* 開いている時は少し浮かす */
}

/* --------------------------------------------------
   Qエリア (Summary)
   -------------------------------------------------- */
.faq__q {
  list-style: none; /* デフォルトの三角を消す */
  cursor: pointer;
  padding: 24px 60px 24px 80px; /* アイコン分の余白を確保 */
  position: relative;
  font-size: 1.125rem;
  font-weight: 700;
  color: #005599;
  line-height: 1.6;
  background-color: #fff;
  transition: background-color 0.2s;
}

/* Webkit系ブラウザのデフォルトマーカー消去 */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  background-color: #fcfcfc;
}

/* Qバッジ (左) */
.faq__q::before {
  content: "Q";
  position: absolute;
  top: 24px; /* テキストの開始位置に合わせる */
  left: 24px;
  width: 40px;
  height: 40px;
  background-color: #1aa6c8;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(26, 166, 200, 0.3);
}

/* 開閉アイコン (右：プラス/マイナス) */
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aa6c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

/* 開いている時のアイコン変化 (回転) */
.faq__item[open] .faq__q::after {
  transform: translateY(-50%) rotate(45deg); /* プラスを×にする */
}

/* --------------------------------------------------
   Aエリア (Content)
   -------------------------------------------------- */
.faq__a {
  background-color: #f3fbfd; /* 薄い水色背景 */
  padding: 24px 24px 24px 80px; /* Qと左端を合わせる */
  border-top: 1px solid #ebf5f8;
  position: relative;
}

/* Aの装飾バッジ（Qに合わせて配置） */
.faq__a::before {
  content: "A";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #005599;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #1aa6c8;
}

.faq__a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

/* --------------------------------------------------
   レスポンシブ (SP: 768px以下)
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
  .faq {
    padding: 60px 16px;
  }

  .faq__title {
    margin-bottom: 32px;
  }

  .faq__q {
    padding: 20px 48px 20px 60px; /* 余白調整 */
  }

  /* SPではバッジを少し小さく */
  .faq__q::before {
    top: 18px;
    left: 16px;
    width: 32px;
    height: 32px;
  }

  .faq__q::after {
    right: 16px;
    width: 20px;
    height: 20px;
  }

  .faq__a {
    padding: 20px 20px 20px 60px;
  }

  .faq__a::before {
    top: 20px;
    left: 16px;
    width: 32px;
    height: 32px;
  }

  .faq__a p {
    line-height: 1.7;
  }
}


/* --- Scope: contact section --- */
.contact {
    /* ワイヤーフレームの背景色（明るいグレー） */
    background-color: #dcdcdc;
    font-family: system-ui, -apple-system, sans-serif;
    color: #000;
    /* 上部の余白確保 */
    padding-top: 60px;
    width: 100%;
}

.contact * {
    box-sizing: border-box;
}

.contact__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px 60px; /* フッター前の余白 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- Logo Area --- */
.contact__brand {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}


/* --- Address Info --- */
.contact__info {
    width: 100%;
    margin-bottom: 30px;
}

.contact__address {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- Phone Number --- */
.contact__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.contact__telIcon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* アイコンを太く黒く */
.contact__telSvg {
    width: 100%;
    height: 100%;
    color: #000;
    stroke-width: 3px; /* 線を太くして強調 */
}

.contact__telLink {
    text-decoration: none;
    color: #000;
    transition: opacity 0.2s;
}

.contact__telLink:hover {
    opacity: 0.7;
}

/* 電話番号の巨大文字 */
.contact__telNumber {
    font-family: Arial, sans-serif; /* 数字が見やすいフォント */
    font-size: 3.5rem; /* ワイヤー通り非常に大きく */
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* --- Map Placeholder --- */
.contact__map {
    width: 100%;
    max-width: 550px; /* 地図の幅制限 */
}

.contact__mapLink {
    display: block;
    text-decoration: none;
    color: inherit;
}

.contact__mapFrame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0; /* 地図っぽいグレー背景 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 浮き出し効果 */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 地図のグリッド背景（道路っぽさの演出） */
.contact__mapFrame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(#e0e0e0 2px, transparent 2px),
        linear-gradient(90deg, #e0e0e0 2px, transparent 2px);
    background-size: 50px 50px;
    z-index: 0;
}

/* 地図のピン（CSSで描画） */
.contact__mapFrame::after {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #ea4335; /* Google Mapのピンの赤 */
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    margin-bottom: 10px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
}

.contact__mapBadge {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-bottom: 8px;
    color: #333;
}

.contact__mapNote {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: #666;
    margin: 0;
}

/* --- Footer --- */
.contact__footer {
    width: 100%;
    background-color: #333; /* 濃いグレー */
    color: #fff;
    padding: 20px;
    text-align: center;
    margin-top: 0;
}

.contact__copyright {
    margin: 0;
    font-size: 0.85rem;
    font-weight: normal;
}

/* --- Responsive Helpers (Phone number shrinking) --- */
@media (max-width: 600px) {
    .contact__telNumber {
        font-size: 2.5rem; /* スマホでは少し小さく */
    }
    .contact__logoText {
        font-size: 1.5rem;
    }
}


/* =========================================
   LP Common Variables & Base
   ========================================= */
.lp {
    /* Colors */
    --lp-color-primary: #005599;       /* 信頼感のある青 */
    --lp-color-primary-dark: #003366;
    --lp-color-accent: #f39c12;        /* 強調のオレンジ */
    --lp-color-line: #06c755;          /* LINEグリーン */
    --lp-color-text: #333333;          /* 本文黒 */
    --lp-color-text-light: #666666;    /* サブテキスト */
    --lp-color-bg: #f5f7fa;            /* 薄いグレー背景 */
    --lp-color-white: #ffffff;
    --lp-color-border: #e0e0e0;

    /* Sizes & Spacing */
    --lp-width-max: 1000px;            /* コンテンツ最大幅 */
    --lp-space-base: 8px;
    --lp-radius: 8px;                  /* 共通角丸 */
    
    /* Effects */
    --lp-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --lp-transition: all 0.3s ease;

    /* Base Setup */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lp-color-text);
    background-color: var(--lp-color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* Box Sizing Reset for LP scope */
.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}


/* =========================================
   Elements
   ========================================= */
/* Images & Media */
.lp img,
.lp iframe,
.lp video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Slight radius for softness */
}

/* Links (General) */


.lp a:hover {
    opacity: 0.7;
}

/* =========================================
   Utilities
   ========================================= */
/* Alignment */
.lp .u-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Margin Top */
.lp .u-mt-8  { margin-top: 8px; }
.lp .u-mt-16 { margin-top: 16px; }
.lp .u-mt-24 { margin-top: 24px; }
.lp .u-mt-32 { margin-top: 32px; }

/* Margin Bottom */
.lp .u-mb-8  { margin-bottom: 8px; }
.lp .u-mb-16 { margin-bottom: 16px; }
.lp .u-mb-24 { margin-bottom: 24px; }
.lp .u-mb-32 { margin-bottom: 32px; }


/* --- 全ての吹き出しの文字サイズを統一 --- */
.sec-4--kamei-fukidashi,
.sec-7--kamei-fukidashi,
.sec-10--kamei-fukidashi,
.sec-4--utagai-fukidashi,
.sec5--kastumura-fukidashi,
.sec-7--kastumura-fukidashi {
  font-size: 1.7rem;
  line-height: 1.3;  /* 文字が大きいので行間を少し詰めています */
}

/* 念のため、中のpタグやh2タグがサイズを継承するように強制 */
.sec-4--kamei-fukidashi *,
.sec-7--kamei-fukidashi *,
.sec-10--kamei-fukidashi *,
.sec-4--utagai-fukidashi *,
.sec5--kastumura-fukidashi *,
.sec-7--kastumura-fukidashi * {
  font-size: inherit;
  font-weight: inherit;
}


/* =========================================
   プロ補正：レイアウト・横幅の完全統一
   ========================================= */

/* 1. サイト全体の基準幅を「1000px」に強制統一 */
/* すべてのセクションの枠（l-container）を上書きします */
.l-container,
.yt__inner,
.staff__inner,
.point2__inner,
.sec-5__inner,
.sec-6__inner,
.faq__inner,
.contact__inner {
  width: 100% !important;
  max-width: 1000px !important; /* ここがサイトの基準幅になります */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;  /* スマホ・タブレット用の余白 */
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* 2. Sec-3（比較）の「二重コンテナ」による幅狭まりを解消 */
/* 内側にある .container の余白と幅制限を無効化します */
.sec-3 .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sec-3 {
  padding: 0 20px 60px;
  background-color: #DAEDFC;
}

/* 3. Sec-8（スタッフ）の窮屈さを解消 */
/* メッセージ枠（緑の枠）が700pxに制限されていたのを解除し、全体に広げます */
.staffHeroMessage {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4. コンタクト（フッター付近）の幅制限解除 */
/* 600pxに制限されていたのを、他と同じ1000pxまで広げます */
.contact__inner {
  max-width: 1000px !important;
}

/* 5. 画像がコンテナからはみ出すのを防ぐ安全装置 */
.l-container img {
  max-width: 100%;
  height: auto;
}

/* 6. 吹き出し（Sec-4）のセンター揃え強化 */
/* 吹き出しと画像が左に寄ったりしないよう中央軸を整えます */
.sec-4--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sec-4--group,
.sec-4--group-utagai,
.sec-4--mainv {
  width: 100%;
  /* 吹き出しエリアだけは少し狭い方が読みやすいので800px程度に制限（お好みで変更可） */
  max-width: 900px; 
}

.sec-4--group-utagai {
  margin-top: 20px;
}
.sec-4--kamei {
  width: 35%;
}

/* =========================================
   FV（セクション1）だけの特別ルール
   ========================================= */

.sec-1.fv .l-container {
  max-width: 1280px !important; /* 以前のような広めの幅（または none）を設定 */
  padding: 0 20px !important;   /* スマホで見切れさせないための最低限の余白 */
}
.sec-2 {
  margin-bottom: -30px;
  background-color: #DAEDFC;
}
.sec-4 {
  padding-top: 40px;
}

.sec-6 {
  padding-bottom: 35px;
}

.sec-7 {
  padding-bottom: 30px;
  background-color: #DAEDFC;
}

.sec-8 {
  padding-top: 30px;
  background-color: #fbf9ef;
}

.sec-10--kamei-fukidashi {
  margin: 45px 0 25px 0px;
}

/* --- 0円のキラキラ装飾 --- */
.fv-hero-price {
  position: relative; /* キラキラを配置する基準点 */
}

/* 1つ目のキラキラ（左上） */
.fv-hero-price::before {
  content: "✦";
  position: absolute;
  top: 3%;         /* 位置調整：上からの距離 */
  left: -10%;       /* 位置調整：左への突き出し具合 */
  color: #fff;      /* 星の色 */
  font-size: 5rem;  /* 星の大きさ */
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8); /* 光彩 */
  animation: twinkle 2s infinite ease-in-out; /* 点滅アニメーション */
}

/* 2つ目のキラキラ（右下） */
.fv-hero-price::after {
  content: "✦";
  position: absolute;
  bottom: 20%;      /* 位置調整：下からの距離 */
  right: 15%;       /* 位置調整：右（円のあたり）への配置 */
  color: #FFEC00;   /* 星の色（黄色っぽく） */
  font-size: 3rem;  /* 星の大きさ */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: twinkle 3s infinite ease-in-out reverse; /* 逆リズムで点滅 */
}

/* キラキラ光るアニメーション設定 */
@keyframes twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8) rotate(15deg);
  }
}


/* レスポンシブ調整 */

/* FVの背景画像を「中央トップ」基準にする */
.sec-1.fv {
  background-position: center top !important;
}

/* =========================================
   FV：スマホ専用画像の適用とレイアウト調整
   ========================================= */
@media (max-width: 768px) {
  /* 1. まず、さきほどの「縮小ハック」をリセットして正常に戻す */
  html, body { overflow-x: visible !important; }
  .sec-1.fv {
    width: 100% !important;
    /*min-width: 0 !important;
    height: auto !important; /* 高さは中身に合わせる（または100vhなど） */
    /*min-height: 100vh !important; /* 画面いっぱいに広げる */
    padding: 60px 20px !important; /* スマホ用の適度な余白 */
    /*transform: none !important;    /* 縮小解除 */
    margin-bottom: 0 !important;
    
    /* ★ここで画像を切り替え！ */
    /* background-image: url("img/fv-new-responsive.png") !important; */
    
    /* 画像の表示設定 */
    /*background-size: auto!important; /* 画面を埋め尽くす */
    background-position: center center !important; /* 中央合わせ */
  }

  /* 2. 中身のコンテンツ（文字や0円）を縦並びにする */
  .fv-content {
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  /* 3. 各要素の配置調整（上から順に並べる） */
  
  /* 吹き出し */
  .fv-right {
    position: static !important; /* 固定配置を解除 */
    margin-bottom: 20px;
  }
  
  /* ロゴとキャッチコピー */
  .fv-hero-head {
    position: static !important;
    left: auto !important;
    top: auto !important;
    text-align: center;
    align-items: center;
    margin-bottom: 20px;
  }
  
  /* 巨大な0円エリア */
  .fv-hero-price {
    margin: 0 !important;
  }
  
  /* 0円の文字サイズをスマホ用に少し調整（そのままだと大きすぎる場合） */
  .fv-hero-price span {
    font-size: 8rem !important; /* 16remだとデカすぎるので半減 */
  }
}


@media (max-width: 768px) {
  /* リセット系 */
  html, body { overflow-x: visible !important; }
  
  .sec-1.fv {
    width: 100% !important;
    
    /* ★ここがポイント：高さを「画面の高さ(100vh)」に制限します */
    height: 100vh !important;
    min-height: 600px !important; /* 極端に縦が短いスマホ対策 */
    padding: 0 20px !important;   /* 余白調整 */
    margin-bottom: 0 !important;
    transform: none !important;

    /* 画像設定 */
    background-image: url("img/fv-new-responsive.png") !important;
    background-size: cover !important;     /* 隙間なく埋める */
    background-position: center bottom !important; /* ★家（下）を基準に表示！ */
    
    /* フレックスボックスで中身を配置 */
    display: flex !important;
    align-items: center !important; /* 上下中央揃え（文字位置） */
  }

  /* 中身のコンテンツ */
  .fv-content {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から順に並べる */
    padding-top: 15vh; /* ★文字を少し上の方に配置（空エリアに合わせる） */
  }

  /* 以下、文字などの調整は前回と同じ */
  .fv-right {
    position: static !important;
    margin: 0 0 10px 0 !important;
    transform: none !important;
  }
  .fv-hero {
    position: static !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap !important;
  }
  .fv-hero-head {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important;
  }
  .fv-hero-logo img {
    width: 160px !important;
    margin-bottom: 10px;
  }
  .fv-hero-text {
    font-size: 2.2rem !important;
    text-align: center !important;
    text-shadow: 0 0 5px #fff;
    line-height: 1.4;
  }
  .fv-hero-price {
    margin: 5px 0 0 !important;
    position: static !important;
  }
  .fv-hero-price span {
    font-size: 14rem !important; /* 画面内に収まるよう少し控えめに */
  }
  .fv-hero-price {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 768px) {
  /* リセット */
  html, body { overflow-x: visible !important; }

  .sec-1.fv {
    width: 100% !important;
    
    /* ★ここが重要：高さ指定を「自動」と「比率固定」に変えます */
    height: auto !important;      /* 画面の高さ(100vh)強制をやめる */
    
    /* 画像の縦横比（9:16など）に合わせて箱のサイズを固定します */
    /* お手持ちの画像が 1080x1920 なら 9/16 です */
    aspect-ratio: 9 / 16 !important; 
    
    padding: 0 20px !important;
    margin-bottom: 0 !important;
    transform: none !important;

    /* 画像設定：幅を100%にして、高さは自動 */
    background-image: url("img/fv-new-responsive.png") !important;
    background-size: 100% auto !important; /* ★横幅に合わせて表示（coverをやめる） */
    background-position: top center !important; /* 上基準で配置 */
    background-repeat: no-repeat !important;

    /* レイアウト */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 上から詰める */
  }

  /* 中身のコンテンツ */
  .fv-content {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 文字を空の部分（上から15%くらいの位置）に配置 */
    padding-top: 15%; 
  }

  /* --- 以下、文字サイズの微調整 --- */
  .fv-right {
    position: static !important;
    margin: 0 0 10px 0 !important;
    transform: none !important;
  }
  .fv-hero {
    position: static !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .fv-hero-head {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important;
    gap: 0 !important;
  }
  .fv-hero-logo img {
    width: 178px !important;
    margin-bottom: 5px;
  }
  .fv-hero-text {
    font-size: 2.2rem !important;
    text-align: center !important;
    text-shadow: 0 0 5px #fff;
    line-height: 1.4;
  }
  .fv-hero-price {
    margin: 0 !important;
    position: static !important;
    font-size: 2.5rem;
  }
  .fv-hero-price span {
    font-size: 6rem !important; /* 枠に収まるよう調整 */
    line-height: 1;
  }
}

/* =========================================
   スマホ版：全体の文字サイズ一括調整
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. サイト全体の基準サイズを下げる */
  html {
    /* デフォルト(16px)の 85% ≒ 13.6px に設定 */
    /* これにより、rem指定の文字や余白が全てキュッと引き締まります */
    font-size: 60%; 
  }

  /* FAQのQ/Aアイコンサイズ */
  .faq__q::before,
  .faq__a::before {
    width: 30px !important;
    height: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 10px !important;
  }
  
  /* コンタクトの電話番号（かなり大きいので調整） */
  .contact__telNumber {
    font-size: 2.2rem !important; /* スマホ用にさらに小さく */
  }
  
  /* セクションタイトルの調整（必要であれば） */
  .c-secTitle,
  .staff__title,
  .yt__title,
  .faq__title {
    font-size: 1.5rem !important; /* バランスを見て統一 */
  }
}

/* =========================================
   比較セクション：矢印のスマホ調整
   ========================================= */
@media (max-width: 768px) {
  /* 1. 矢印を入れる箱（間隔の調整） */
  .comparison-arrows {
    gap: 90px !important;    /* ご希望の90pxに設定 */
    height: 60px !important; /* 矢印が小さくなる分、箱の高さも少し減らす */
    margin: 0 auto !important; /* 上下の余白バランス調整 */
  }

  /* 2. 矢印の「棒」の部分（サイズ調整） */
  .arrow {
    width: 15px !important;  /* 太さを 30px -> 20px に細く */
    height: 35px !important; /* 長さを 70px -> 50px に短く */
  }

  /* 3. 矢印の「先端（三角）」の部分（サイズ調整） */
  .arrow::after {
    /* 三角形のサイズ変更（左右の数字を棒の太さと合わせるのがコツ） */
    /* 上(高さ30px) 右(20px) 下(0) 左(20px) */
    border-width: 30px 20px 0 20px !important; 
    
    /* 位置合わせ（高さ分だけマイナスにする） */
    bottom: -25px !important; /* 少し被せるので -25px くらいが綺麗 */
  }
}

/* =========================================
   スマホ（横並び維持）のバランス調整
   ========================================= */
@media (max-width: 768px) {

  /* 1. 人物画像のサイズアップ */
  /* 元の20%から 30%〜35% くらいまで広げます */
  .kamei, 
  .katsumura,
  .sec-4--kamei, 
  .sec-4--utagai,
  .sec-7--kamei,
  .sec-10--kamei {
    width: 25% !important; /* ここを増やすと画像が大きくなります */
    min-width: 80px;       /* 極端に小さくならないための保険 */
  }

  .sec-4--utagai {
    width: 11% !important; /* ここを増やすと画像が大きくなります */
    min-width: 40px;       /* 極端に小さくならないための保険 */
  }

  /* 2. 吹き出し内の文字サイズダウン */
  /* PCの1.7remだと入らないので、12px〜14px程度に落とします */
  .sec-4--kamei-fukidashi,
  .sec-7--kamei-fukidashi,
  .sec-10--kamei-fukidashi,
  .sec-4--utagai-fukidashi,
  .sec5--kastumura-fukidashi,
  .sec-7--kastumura-fukidashi {
    font-size: 13px !important;   /* 文字サイズ */
    padding: 10px 15px !important; /* 吹き出し内の余白も少し詰める */
    line-height: 1.4 !important;   /* 行間も少し詰める */
  }
  
  /* しっぽの位置調整（念のため） */
  /* 文字が小さくなると吹き出しの高さが変わるので、しっぽ位置がズレる場合の微調整 */
  .sec-4--kamei-fukidashi::before,
  .sec-7--kamei-fukidashi::before,
  .sec-10--kamei-fukidashi::before,
  .sec-4--utagai-fukidashi::before {
    border-width: 6px 10px 6px 0 !important; /* 三角形も少し小さく */
    left: -9px !important;
  }
  
  .sec5--kastumura-fukidashi::before,
  .sec-7--kastumura-fukidashi::before {
    border-width: 6px 0 6px 10px !important;
    right: -9px !important;
  }
}

/* スマホ時に .sec-desc と .c-secDesc を 1.25rem にする */
@media (max-width: 768px) {
  .sec-desc,
  .c-secDesc {
    font-size: 1.25rem !important;
    transform: translate(0px, 0px) !important;
  }
}

/* スマホ時に吹き出し内の改行タグ<br>を無効化 */
@media (max-width: 768px) {
  .sec-4--kamei-fukidashi br,
  .sec-7--kamei-fukidashi br,
  .sec-10--kamei-fukidashi br,
  .sec-4--utagai-fukidashi br,
  .sec5--kastumura-fukidashi br,
  .sec-7--kastumura-fukidashi br {
    display: none; /* 改行を非表示にする */
  }
}

/* =========================================
   FV（スマホ）最終微調整用
   ========================================= */
@media (max-width: 768px) {

  /* 1. コンテンツ全体を「もっと上へ」or「もっと下へ」 */
  .fv-content {
    /* 現在15%ですが、空の広さに合わせて調整してください */
    /* 数字を大きくすると全体が下がります */
    padding-top: 2% !important; 
  }

  /* 2. 右上の吹き出し（青いフキダシ） */
  .fv .fv-right {
    /* 位置を微調整したい場合（標準はstaticで積み上げ） */
    margin-bottom: 10px !important; /* 下のロゴとの隙間 */
    margin-right: 15px !important; /* 右に少しズラしたい場合（マイナスで右へ） */
  }
  
  .fv .fv-fukidashi {
    font-size: 2rem !important; /* 吹き出し内の文字サイズ */
    padding: 10px 15px !important; /* 吹き出しの大きさ */
  }

  /* 3. ロゴ（左上のロゴ） */
  .fv-hero-logo img {
    width: 178px !important; /* ロゴの大きさ */
    margin-bottom: 5px !important; /* キャッチコピーとの隙間 */
    margin-left: -27px !important;
  }

  /* 4. キャッチコピー（なら、奈良・関西の...） */
  .fv-hero-text {
    font-size: 2.2rem !important; /* 文字の大きさ */
    line-height: 1.4 !important;   /* 行間 */
    margin-bottom: 5px !important; /* 下の0円との隙間 */
  }

  /* 5. 0円（メインの数字） */
  .fv-hero-price span {
    font-size: 14rem !important; /* 「0」の大きさ */
    line-height: 1 !important;
    
    /* 0円の位置を微調整したい場合 */
    position: relative !important;
    top: 0px !important;  /* プラスで下へ、マイナスで上へ */
    left: 0px !important; /* プラスで右へ、マイナスで左へ */
  }
  
  .fv-hero-price {
    /* 「円」の文字サイズ */
    font-size: 2.5rem !important;
  }

}
/* =========================================
   FV：0円周りのキラキラ装飾（スマホ調整）
   ========================================= */
@media (max-width: 768px) {
  
  /* 左上の大きいキラキラ */
  .fv-hero-price::before {
    top: 140px !important;         /* 位置微調整 */
    left: 145px !important;       /* 文字に被らないよう少し外へ */
  }

  /* 右下の小さいキラキラ */
  .fv-hero-price::after {
    bottom: 75px !important;       /* 位置微調整 */
    right: -2px !important;       /* 円の近くに寄せる */
  }
}

/* =========================================
   FV：吹き出しのしっぽ削除＆下線追加
   ========================================= */
@media (max-width: 768px) {
  /* 1. しっぽ（::after）を非表示にする */
  .fv .fv-fukidashi::after {
    display: none !important;
  }
}

/* =========================================
   中途半端な幅（タブレット等）での崩れ防止
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. 全てのコンテンツ幅にリミットをかける */
  .l-container,
  .fv-content,
  .comparison .container,
  .reasons__inner,
  .point2__inner,
  .yt__inner,
  .staff__inner,
  .contact__inner,
  .faq__inner {
    max-width: 450px !important; /* スマホとして綺麗に見える最大幅 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. FV（ファーストビュー）の背景画像だけは画面いっぱいに広げる */
  .sec-1.fv {
    background-size: cover !important;
    width: 100% !important;
    max-width: 100% !important; /* ここはリミットを解除 */
  }
}
/* =========================================
   タブレット・横向きスマホ（500px〜768px）専用
   「中央寄せリミッター」を解除し、全体をズームアップする設定
   ========================================= */
@media (min-width: 501px) and (max-width: 768px) {

  /* 1. 450pxの幅制限を解除して、画面いっぱいに広げる */
  .l-container,
  .fv-content,
  .comparison .container,
  .reasons__inner,
  .point2__inner,
  .yt__inner,
  .staff__inner,
  .contact__inner,
  .faq__inner {
    max-width: 100% !important; /* 制限解除 */
    padding-left: 40px !important; /* 画面端に余裕を持たせる */
    padding-right: 40px !important;
  }

  /* 2. ベースの文字サイズを一気に大きくする */
  /* スマホの60%設定だと小さすぎるので、90%まで引き上げます */
  /* これにより、rem指定の全ての要素（見出し、本文、余白）が1.5倍になります */
  html {
    font-size: 90% !important; 
  }

  /* --- 以下、FV（ファーストビュー）の個別巨大化調整 --- */

  /* FV全体の配置バランス */
  .fv-content {
    padding-top: 8% !important; /* 上の空き具合調整 */
    gap: 25px !important; /* 要素同士の間隔を広げる */
  }

  /* ロゴサイズ */
  .fv-hero-logo img {
    width: 220px !important; /* スマホよりかなり大きく */
    margin-left: 0 !important; /* 中央揃えになるので左ズレ補正をリセット */
    margin-bottom: 10px !important;
  }

  /* キャッチコピー */
  .fv-hero-text {
    font-size: 2rem !important;
    text-align: center !important; /* タブレットなら中央揃えが綺麗です */
  }

  /* 「0円」の数字 */
  .fv-hero-price span {
    font-size: 10rem !important; /* 画面の迫力に合わせて調整 */
    line-height: 1 !important;
  }
  
  /* 「円」の文字 */
  .fv-hero-price {
    font-size: 2.5rem !important;
    justify-content: center !important; /* 中央寄せ */
  }

  /* 0円周りのキラキラ位置修正 */
  .fv-hero-price::before {
    top: -20px !important;
    left: -40px !important;
    font-size: 4rem !important; /* キラキラも大きく */
  }
  .fv-hero-price::after {
    bottom: 10px !important;
    right: -20px !important;
    font-size: 3rem !important;
  }

  /* 右上の吹き出し */
  .fv .fv-right {
    position: static !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
  .fv .fv-fukidashi {
    font-size: 1.8rem !important;
    padding: 15px 30px !important;
  }

  /* 比較矢印（Comparison）のサイズ戻し */
  .comparison-arrows {
    gap: 150px !important; /* 広げる */
  }
}
/* =========================================
   1024px前後（769px〜1200px）専用
   レイアウト配置は変えずに、全体を縮小して画面内に収める
   ========================================= */
@media (min-width: 769px) and (max-width: 1200px) {

  /* 1. 背景画像（人物）を切れずに全表示 */
  .sec-1.fv {
    background-size: 100% auto !important; /* 横幅に合わせて全体表示 */
    background-position: center top !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important; /* 画像の比率を維持 */
    padding: 0 !important; /* 余白リセット */
  }
  
  /* コンテナの基準位置設定 */
  .fv-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important; /* 縦積みを禁止してブロック配置に戻す */
  }

  /* 2. 左上のロゴ・キャッチコピー（位置調整と縮小） */
  .fv-hero-head {
    position: absolute !important;
    /* 人物に被らないよう、%指定で少し内側に配置 */
    top: 5% !important;
    left: 22% !important; 
    
    /* 全体を75%くらいに縮小 */
    transform: scale(0.75) !important; 
    transform-origin: top left !important; /* 左上基準で縮小 */
    
    /* 縦積み解除の念押し */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
  }

  /* 3. 右上の吹き出し（位置調整と縮小） */
  .fv .fv-right {
    position: absolute !important;
    /* 人物に被らないよう、%指定で少し内側に配置 */
    top: 400% !important;
    right: 22% !important; 
    
    transform: scale(0.75) !important;
    transform-origin: top right !important; /* 右上基準で縮小 */
    margin: 0 !important;
  }

  /* 4. 中央の0円（位置調整と縮小） */
  .fv-hero {
    position: absolute !important;
    top: 630% !important; /* 少し下寄りに配置 */
    left: 54% !important;
    transform: translate(-50%, -50%) !important; /* 完全中央配置 */
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 0円のサイズをPCより小さく調整 */
  .fv-hero-price span {
    font-size: 10rem !important; /* PC(16rem) -> 10rem */
    line-height: 1 !important;
  }
  .fv-hero-price {
    font-size: 2rem !important;
    justify-content: center !important;
  }

  /* キラキラ装飾の位置微調整 */
  .fv-hero-price::before {
    font-size: 3rem !important;
    top: -10px !important;
    left: -20px !important;
  }
  .fv-hero-price::after {
    font-size: 2rem !important;
    bottom: 0px !important;
    right: -10px !important;
  }
 
}

.fv-small {
  text-align: center;
  background: #FFEC00;
  font-size: 2rem;
  max-width: 500px;
  margin: 2% auto;
}

/* --- YouTube iframe用レスポンシブ対応 --- */
.ytCard__thumb iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}