/* ---- CSS変数 ---- */
:root{
  --c-bg: #ffffff;
  --c-text: #243039;
  --c-muted: #6b7a86;
  --c-key: #62c1c7;      /* ティール */
  --c-accent: #f39b4a;   /* オレンジ */
  --c-soft: #f3f5f7;     /* セクション薄グレー（カード塗り） */
  --c-line: #e6eef2;     /* 罫線 */
  --radius: 16px;
  --shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* ---- Reset / Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN","Noto Sans JP", sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--c-key); text-decoration:none}
a:hover{opacity:.9}

/* ---- Utility ---- */
.container{max-width:1080px; margin-inline:auto; padding:0}
.lead{color:#000; font-size:1.00rem}
.eyebrow{color:#fff; opacity:.9; letter-spacing:.08em; margin:0 0 6px; font-weight:700}
.section{padding:64px 0}
.sectionBt{padding:64px 0 0px 0}
.section__title{ text-align:center; font-size:1.5rem; margin:0 0 28px; letter-spacing:.02em; }

.grid{display:grid; gap:20px}
.grid--3{grid-template-columns:1fr;}
.grid--2{grid-template-columns:1fr;}
.grid--4{grid-template-columns:1fr 1fr;}
.skiplink{position:absolute; left:-9999px; top:auto}
.skiplink:focus{left:16px; top:16px; background:#000; color:#fff; padding:8px 12px; border-radius:8px}



/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px; font-weight:700;
  border:2px solid transparent; transition:.2s ease; cursor:pointer;
}
.btn--primary{background:#fff; color:#247781; border-color:#fff}
.btn--primary:hover{transform:translateY(-1px)}

/* ---- Hero ---- */
.hero{position:relative; padding:0; color:#fff; overflow:hidden;}
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: none;   /* ← コンテナの制限を解除 */
  width: 100%;       /* 画面幅いっぱい */
}
.hero__inner img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__title{font-size:2rem; line-height:1.25; margin:.2em 0 .25em}
.hero__subtitle{display:block; font-size:1rem; font-weight:400; opacity:.9}
.hero__cards{display:flex; gap:16px; justify-content:center; align-items:flex-end; margin:18px 0 8px}
.hero__card--small{transform:translateY(10px)}
.hero__badges{list-style:none; padding:0; margin:8px 0 18px; display:flex; gap:10px; justify-content:center}
.badge{background:rgba(255,255,255,.95); color:#246; border-radius:999px; padding:8px 14px; font-weight:700; box-shadow:var(--shadow)}
.hero__stars{
  position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.9) 2px, transparent 3px),
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.9) 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, rgba(255,255,255,.9) 2px, transparent 3px),
    radial-gradient(circle at 60% 15%, rgba(255,255,255,.9) 2px, transparent 3px);
  background-size:100% 100%;
  opacity:.6;
}

.hero h1{
  margin:0px;
}


.snsMd {
text-align:center;
  font-family:
    "Zen Maru Gothic",
    "M PLUS Rounded 1c",     /* Google Fonts配信 */
    "Kosugi Maru",           /* Google Fonts配信（代替） */
    "Hiragino Maru Gothic ProN", /* macOS標準 */
    "Hiragino Maru Gothic",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-weight: 700;     /* 中太字で画像の雰囲気に近づける */
  letter-spacing: 0.02em;
  line-height: 1.2;
font-size:2.2em;
color:#0b76a0;
}

/* ---- 見出しのウェブフォント指定 ---- */
.mds1 {
  font-family:
    "Zen Maru Gothic",
    "M PLUS Rounded 1c",     /* Google Fonts配信 */
    "Kosugi Maru",           /* Google Fonts配信（代替） */
    "Hiragino Maru Gothic ProN", /* macOS標準 */
    "Hiragino Maru Gothic",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-weight: 700;     /* 中太字で画像の雰囲気に近づける */
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* スマホ時のみ文字を小さくする（改行対策） */
@media (max-width: 767px) {
  .mds-sp {
    font-size:1.3em;
  }
}




.fnt1{
  font-family:
    "Zen Maru Gothic",
    "M PLUS Rounded 1c",     /* Google Fonts配信 */
    "Kosugi Maru",           /* Google Fonts配信（代替） */
    "Hiragino Maru Gothic ProN", /* macOS標準 */
    "Hiragino Maru Gothic",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-weight: 500;     /* 中太字で画像の雰囲気に近づける */
  letter-spacing: 0.04em;
  line-height: 1.85;
}

.fnt2{
  font-family:
    "Zen Maru Gothic", sans-serif;
  font-weight: lighter!important;
  letter-spacing: 0.04em;
  line-height: 1.85;
  font-size:0.9em;
}



/* About：背景画像 + 透明マスク（モバイルでだけ白ベールを濃く） */
.section--about {
  position: relative;
  --about-mask: rgba(255,255,255,0);

  background-image:
    linear-gradient(var(--about-mask), var(--about-mask)),
    url('img/img_hd_sub_01.jpg');
  background-repeat: no-repeat, no-repeat;

  /* PCは左寄せ */
  background-position: left center, left center;

  /* coverだとトリミングされるので調整可 */
  background-size: auto 100%, auto 100%;

  background-color: #f5f5f5;
}

/* スマホ時のみ白ベールを強める */
@media (max-width: 767px) {
  .section--about {
    --about-mask: rgba(255,255,255,.75);
  }
}


.section--about .lead {
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}


/* ---- Reasons ---- */
.section--reasons{background:#fff}
.reason-card{
position: relative; /* 基準位置を作る */
  background:#f5f5f5; border-radius:2px; box-shadow:var(--shadow); overflow:hidden; 
}
.reason-card__head {
  display: flex;
  flex-direction: column;   /* 縦並びに */
  align-items: center;      /* 中央寄せ */
  padding: 14px 16px 0;
}

.reason-card__num {
  font-weight: 300;
  font-size: 3rem;
  color: #b7d9e2;
  font-style: italic;
  margin-bottom: 6px;       /* 数字とタイトルの間隔 */
}

.reason-card__title {
  margin: 0;
  font-size: 1.1rem;
  text-align: center;       /* タイトルも中央寄せ */
}
.reason-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.reason-card__text{padding:12px 16px 18px;color:var(--c-muted)}

.reason-card::after {
  content: "";
  position: absolute;
  bottom: 0;               /* 親要素の下端に固定 */
  left: 0;
  width: 100%;             /* 横幅いっぱい */
  height: 4px;             /* 線の太さ */
  background: linear-gradient(
    90deg,
    var(--c-key),
    #9ee0e4
  );
}

/* .reason-card::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--c-key),#9ee0e4)} */


/* ---- Scenes ---- */
.section--scenes{background:#fff}
.scenes{display:grid; grid-template-columns:1fr; gap:26px; justify-items:center; padding:0; list-style:none}
.scene img{
width:140px; height:140px; border-radius:50%; object-fit:cover; 
 display: block;       /* 画像をブロック要素化 */
  margin: 0 auto;       /* 左右の余白を自動で均等にして中央寄せ */
}


.scene p{text-align:center; margin:.6em 0 0; color:#000;}

/* ---- Lineup ---- */
.section--lineup{background:#f5f5f5}
.lineup{align-items:stretch}
.lineup-card{
  background:#fff; border:1px solid #7fc0a2; border-radius:2px; padding:22px; box-shadow:var(--shadow)
}
.lineup-card--accent{border-color:#f4caa5}
.lineup-card__title{margin:0 0 10px; text-align:center}
.price{font-weight:900; color:#000}
.lineup-card--accent .price{color:#000}
.lineup-card__media{display:flex; justify-content:center; margin:8px 0 18px 25px}
.shops__title{font-weight:700; margin:0 0 8px;text-align:center;}

/* 取扱いショップ：2カラムのボタングリッド */
.chips{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  padding:0;
  list-style:none;
}


/* ピル型ボタン（白地＋枠線＋右側アイコン） */
.chip{
  --chip-color: #80bfa2;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 36px 12px 20px;  /* 右アイコン分の余白 */
  border:1px solid #80bfa2;
  border-radius:999px;
  background:#fff;
  color:#2a4b4f;
  font-weight:700;
  line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease;
}


.chipB{
  border:1px solid #ef944e;
}

/* スマホ幅（例: 767px以下）のとき文字サイズを小さめに */
@media (max-width: 767px) {
  .chip {
    font-size: 13px;   /* デフォルトより少し小さく */
    padding-block: 10px;  /* 高さバランスを微調整 */
    padding-inline: 16px 30px; /* 右アイコン分を確保しつつ縮める */
  }
}




/* 右側の丸いアイコン背景（背面） */
.chip::after{
  content:"";
  position:absolute;
  right:8px; top:50%;
  width:16px; height:16px;   /* ← コンパクトサイズ */
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--chip-color);
  z-index:1;
  pointer-events:none;
}

/* 白い三角（前面） */
.chip::before{
  content:"";
  position:absolute;
  right:13px; top:50%;       /* ← 丸が小さいので内側へ調整 */
  transform:translateY(-50%);
  width:0; height:0;
  border-left:5px solid #fff;        /* ← 矢印小型化 */
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  z-index:2;
  pointer-events:none;
}

/* ホバー／フォーカス */
.chip:hover,
.chip:focus-visible{
  background:color-mix(in oklab, var(--chip-color) 8%, #fff);
  outline:none;
  transform:translateY(-1px);
}

/* オレンジ版 */
.chip--accent{ --chip-color: var(--c-accent); color:#7c4b15; }
.lineup-card--accent .chip{ --chip-color: var(--c-accent); color:#7c4b15; }

/* ---- Voices（ご利用いただいた皆様の声）---- */
/* セクションは白背景／カードは淡グレー */
.section--voices{ background:#fff; }

.voices{
  display:grid;
  grid-template-columns:1fr;   /* モバイル1列 */
  gap:24px;
}

/* カード：淡グレー塗り、内部は2カラム（左アバター・右見出し） */
.voice{
  background:var(--c-soft);
  border:none;
  box-shadow:none;
  border-radius:2px;
  padding:25px;
  display:grid;
  grid-template-columns:72px 1fr;
  column-gap:16px;
  align-items:start;
}
.avatar{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  background:#fff; padding:0px; box-shadow:inset 0 0 0 1px #e3e7ea; margin:0;
}
.voice__role{
  margin:auto 0; font-size:1.125rem; font-weight:700; line-height:1.35;}
/* 本文は下段で2列ぶち抜き */
.voice__text{
  grid-column:1 / -1;
  margin:14px 0 0;
  color:#000; opacity:.9; letter-spacing:.01em;
  text-align: justify;
}

.tmpvc1{
text-align:center;
font-size:0.9em;
padding-bottom:40px;
}

/* ---- How To ---- */
/* ★ スマホで2列×2行（STEP.2で折り返し） */
.section--howto{background:#fff}
.steps{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  padding:0;
  list-style:none;
}
.step{
  background:#e9e9e9; border:1px solid var(--c-line); border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
.step__head{display:flex; justify-content:center;border-bottom:2px solid #f69717;}
.step__num{font-weight:300; color:#f69717; letter-spacing:.06em;font-size:1.4em;}
.step__num strong{font-weight:900;font-size:1.1em;}

.step__media{display:flex; justify-content:center; margin:10px 0;}
.step__title{margin:.2em 0 .4em;text-align:center}
.step__text{margin:0; color:#000;}
.step__textS{margin:0; color:var(--c-muted);font-size:0.8em;}
.url-text {
  word-wrap: break-word;     /* 古いプロパティだが広く対応 */
  overflow-wrap: break-word; /* 推奨。単語の途中でも折り返す */
  word-break: break-all;     /* URLなど長すぎる文字列を強制的に折り返し */
  line-break: anywhere;      /* モダンブラウザで自然に改行 */
}

.url-text a {
  color: #f69717;
  font-size:0.85em;
  text-decoration: none; /* 下線を消す場合 */
}

/* ---- Footer ---- */
.footer{background:#fff; border-top:1px solid var(--c-line); padding:28px 0; color:#7f8c96; text-align:center;margin-top: 10px;}

/* ---- セクション間の小ドット装飾 ---- */
.section + .section .container::before{
  content:"• • •"; display:block; text-align:center; color:#78d0e4; letter-spacing:.1em; margin:8px 0 24px; font-weight:900;font-size:2em;
}

/* ---- TOP下の小ドット装飾 ---- */
.separator {
  display: block;
  text-align: center;
  color: #78d0e4;
  letter-spacing: .1em;
  margin: 0px 0 12px;
  font-weight: 900;
  font-size: 2em;
}


/* スマホでの改行 デフォルトは非表示 */
.br-sm {
  display: none;
}

/* スマホ時のみ有効 */
@media (max-width: 767px) {
  .br-sm {
    display: inline;
  }
}



/* PCだけ改行したい <br> → スマホでは改行させない */
.br--pc {
  display: none;
}

/* スマホだけ改行したい <br> → スマホでは改行させる */
.br--sp {
  display: inline;
}

/* PC向け（例: 768px以上をPC扱い） */
@media (min-width: 768px) {
  /* PCだけ改行するものを表示 */
  .br--pc {
    display: inline;
  }

  /* スマホだけ改行するものを隠す */
  .br--sp {
    display: none;
  }
}


/* 固定バナー */
.fixed-link {
  position: sticky;
  bottom: 16px;   /* 画面下からの位置 */
  display: block;
  width: max-content;
  margin-left: auto; /* 右寄せ */
  margin-right: 10px;
  z-index: 10;       /* 必要なら調整 */
}

/* 中の画像はそのまま */
.fixed-icon {
  width: 15vw;
  min-width: 150px;
  height: auto;
}

/* スマホ時 */
@media (max-width: 480px) {
  .fixed-icon {
    width: 150px;   /* 幅を固定縮小 */
    right: 8px;     /* 余白も少し調整 */
    bottom: 8px;
  }
}




/* 奥多摩部分 */

.oktBox {
  display: flex;               
  align-items: center;         
  justify-content: center;     
  gap: 0.5em;                  
  text-align: center;          
  font-family:
    "Zen Maru Gothic",
    "M PLUS Rounded 1c",
    "Kosugi Maru",
    "Hiragino Maru Gothic ProN",
    "Hiragino Maru Gothic",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-size: 2.2em;   /* PC基準の文字サイズ */
  color: #0b76a0;
  margin-bottom: 20px;
}

.oktBox a span {
    text-decoration: underline;
}

.oktBox__icon {
  flex-shrink: 0;       
  width: 70px;          
  height: auto;
  display: block;
}

.oktBox__text {
  display: inline-block;
}

/* --- スマホ用（画面幅480px以下） --- */
@media (max-width: 480px) {
  .oktBox {
    font-size: 1.4em;   /* スマホでは文字を小さく */
    gap: 0.4em;         /* 余白も少し狭くする */
  }

  .oktBox__icon {
    width: 50px;        /* アイコンも少し小さくする */
  }
}

/* =========================
   Responsive
   ========================= */
@media (min-width:576px){
  .hero__title{font-size:2.2rem}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .scene img{width:250px; height:250px}
  .voices{ grid-template-columns:repeat(2, 1fr); }   /* 576px〜で2列 */
}
@media (min-width:768px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .scenes{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)} /* タブレット以上で4列 */
  .hero{padding:0}
  .hero__title{font-size:2.6rem}
  .hero__cards{gap:22px}
}
@media (min-width:992px){
  .voices{ grid-template-columns:repeat(4, 1fr); }   /* PCで4列 */
}
@media (min-width:1024px){
  .hero__title{font-size:3rem}
}


/* =========================
   コンテナ余白設定
   ========================= */
.container {
  padding-inline: 16px;    /* 全体の基本ガター */
}

/* Heroは常にフルブリード */
.hero > .container,
.hero .container {
  padding-inline: 0;
}