/* ======== 基本設定 & リセット ======== */
*, *::before, *::after {
    box-sizing: border-box; /* ★追加：はみ出し防止のため */
}

:root {
    --bg-color-main: #f5f1e9;
    --bg-color-content: #fffcfc;
    --header-bg-color: #5d534a;
    --text-color-main: #3a3a3a;
    --highlight-bg: #ffff66;
    --highlight-text: #db6a6a;
    --ribbon-bg: #ea8991;
    --float-btn-bg: #e6a3ab;
}

html {
  scroll-behavior: smooth;
}


.pcnon{
	display: none;
}

.spnon{
	display: block;
}

.pagetop{
  position: fixed;
  right: 5px;
  bottom: 10px;
  font-size: 50px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  z-index: 10000;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color-main);
    font-size: 16px;
    line-height: 1.8;
	background-image: url(./images/bg01.jpg);
	background-size: 100%;
}

main{
  overflow-x: hidden;
	background-image: url(./images/bg02.png),url(./images/bg03.png),url(./images/bg04.png);
	background-repeat: no-repeat;
	background-position: top 0 left 0,top 700px right 0,top 700px left 0;
	background-size: 400px,400px,700px;
}


img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下の余白対策 */
}

a {
    text-decoration: none;
    color: inherit;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px); /* よりふんわり距離 */
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: 0.5s; /* 少し遅れて始まる */
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


.bot70{
	margin-bottom: 70px;
}

/* ======== 全体のラッパー ======== */
.container {
    margin: 0 auto;
    padding: 60px 0;
	font-family: serif;
}

/* ======== ヘッダー ======== */
header {
    padding: 10px 15px;
    display: flex;
    max-width: 768px;
    margin: 0 auto;
    text-align: left;
}

.mv{
	background-image: url(./images/mv_001.png);
	width: 80%;
	background-position: top right;
	background-repeat: no-repeat;
	margin: 0 0 0 auto;
	min-height: 800px;
	border-radius: 20px;
	background-size: cover;
}

/* ======== メインビジュアル ======== */
.mv img {
    width: 100%;
    display: block;
}

.mv_box{
	position: absolute;
	top: 0;
	margin: 0 auto;
	max-width: 768px;
	left: 0;
	right: 0;
}


.top_logo img{
	width: 150px;
	height: auto;
	padding: 20px 0 0 0;
}

.mv_catch{
	text-align: center;
	margin: 40px 0 60px 0;
}
.mv_catch img{
max-width: 300px;
}

.mv_box h1{
	color: #fff;
	font-family: serif;
	text-align: center;
	font-size: 28px;
	margin-bottom: 120px;
}

.mv02{
	margin-top: 60px;
	margin-bottom: 30px;
}

.mv02 img{
	width: 100%;
	height: auto;
}

.to_coupon{
	text-align: center;
}

.catch01{
	text-align: center;
	line-height: 2;
	font-size: 32px;
	font-weight: normal;
	letter-spacing: 3px;
	margin-bottom: 60px;
}

.bg-wrap {
  background: url('./images/bg05.jpg') repeat;
  padding: 40px;
  position: relative;
}


.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
  font-size: 18px;
  gap: 8px;
}

.check-list i {
  color: #bfa46a; /* ゴールド枠色 */
  font-size: 1.2em;
}
.bg-wrap{
  background: url('./images/bg05.jpg') repeat;
  padding: 40px 60px;
  position: relative;
}

.icon01{
	position: absolute;
    top: -60px;
    left: 0;
}


.check-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-list li{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 10px 0;
  font-size: 20px;
  letter-spacing: 2px;
}


.box{
  width: 28px;
  height: 28px;
  border: 3px solid #bfa46a;       /* 画像のゴールド枠に近い色 */
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
}



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

.woman-img {
  width: 250px; /* 画像サイズ調整 */
  height: auto;
}

.hair-text h2 {
  font-size: 1.6em;
  color: #7b5c28; /* 画像に合わせた茶系 */
  margin: 0 0 1em;
  font-weight: normal;
}

.hair-text p {
  color: #5a4a3a;
  line-height: 2.5;
  margin: 0 0 1em;
  font-size: 18px;
}

.hair-text .highlight {
  color: #7b5c28; /* ゴールド強調 */
  font-weight: bold;
}

.section-heading{ margin:40px 0; }

.heading-rail{
  display:flex;
  align-items:center;
  gap:16px;                 /* 文字左右の余白 */
  width:100vw;              /* 画面いっぱい */
  margin-left:calc(50% - 50vw); /* コンテナ中央基準から全幅に */
}

.heading-rail::before,
.heading-rail::after{
  content:"";
  height:1px;
  background:#bfa46a;       /* 線色 */
  flex:1;                   /* 線を左右に伸ばす */
}

.heading-rail span{
  white-space:nowrap;
  font-size:36px;
  color:#7b5c28;
  letter-spacing:.02em;
}

.menu_li{
	margin: 0 0 40px 0;
	padding: 0;
	display: flex;
}


.menu_li li{
	list-style-type: none;
	margin: 0 1%;
}
.menu_li li img{
	width: 100%;
	height: auto;
    border-radius: 20px;
    border: 1px solid #ddc9a5;
}

  .promise{overflow:visible;}

  .promise-item{
    position:relative;
    padding:32px 0;
    overflow:visible;
	margin-bottom: 60px;
  }

  /* 背景帯（横幅いっぱいにせず、75vwだけ敷く） */
  .promise-item::before{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:75vw;                         /* ここがポイント：帯の横幅 */
    background:url('./images/bg06.png') repeat;
    z-index:-1;                         /* コンテンツの下に敷く */
  }
  /* 1,3段目：左から敷く */
  .promise-item.left::before{
    left:calc(50% - 50vw);              /* ビューポート左端に合わせる */
  }
  /* 2段目：右から敷く */
  .promise-item.right::before{
    right:calc(50% - 50vw);             /* ビューポート右端に合わせる */
  }

  /* 中身は二列グリッド：番号 / 本文 */
  .promise-item .inner{
    display:grid;
    grid-template-columns:64px 1fr;
    column-gap:30px;
    align-items:start;
  }

  /* 番号デザイン（薄い枠の小箱を背面に） */
  .promise-item .num{
    position:relative;
    font-family: "Times New Roman", Georgia, serif;
    font-size:45px;
    line-height:1;
	padding: 10px 20px;
    letter-spacing:.03em;
    color:#222;
    padding-left:6px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
  }


  /* 見出し・本文・画像 */
  .promise-item h3{
    margin:0 0 14px;
    font-weight:500;
    font-size:36px;
    letter-spacing:.04em;
  }
  .promise-item img{
    display:block;
    width:100%;
    height:auto;
    margin:8px 0 25px;
  }
  .promise-item p{
    margin:0;
    color:var(--muted);
    font-size:18px;
  }

  /* レスポンシブ微調整 */
  @media (max-width:480px){
    .promise-item{padding:56px 0}
    .promise-item .inner{grid-template-columns:48px 1fr}
    .promise-item .num::before{width:32px;height:32px;top:-4px}
  }


/* 見出しブロック */
.promise-intro{
  text-align:center;
  color:#4b4b4b;
  margin-bottom: 40px;
}

/* タイトル：中央に短い罫線 */
.promise-intro__ttl{
  margin:0 0 22px;
  font-weight:400;
  font-size:clamp(28px, 5vw, 48px);
  letter-spacing:.18em;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
.promise-intro__ttl > span{
  position:relative;
  display:inline-block;
  padding-bottom:14px;
}
.promise-intro__ttl > span::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:180px;               /* 線の長さ（調整可） */
  height:1px;
  background:#9d865c;        /* 細線の色（やや金寄り） */
  transform:translateX(-50%);
  opacity:.75;
}

/* リード文（3行） */
.promise-intro__lead{
  margin:.25em 0;
  font-size:clamp(18px, 3.2vw, 28px);
  line-height:2.1;
  letter-spacing:.22em;
  color:#626262;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}

.menu_num{
	text-align: center;
	margin: 20px 0 30px 0;
}




:root{
  --page-bg:#fff;
  --ink:#3c3c3c;
  --muted:#666;
  --gold:#c9ac72;
  --gold-deep:#b08d42;
}

/* 既存想定 */
.container{ max-width:768px; margin:0 auto; padding:0 16px; }

/* セクション全体 */
.menu-section{ position:relative; color:var(--ink); }

/* ===== 70%横幅 左寄せのヒーロー画像 ===== */
.menu-hero{
  width:70vw;                           /* 横幅70%を貫通 */
  margin-left:calc(50% - 50vw);         /* ビューポート左端に合わせる */
  margin-top:12px;
  margin-bottom:60px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.menu-hero img{ display:block; width:100%; height:auto; }

/* ===== 左端の縦英字（画像） ===== */
.side-title{
    position: absolute;
    left: calc(50% - 50vw + 16px);
    top: 400px;
    height: 800px;
    pointer-events: none;
    user-select: none;
    opacity: .95;
}

/* ===== クーポンっぽい告知帯 ===== */
.coupon-note{
position: relative;
    line-height: 2;
    display: block;
    font-size: 20px;
    width: 500px;
    margin: 36px auto;
  padding:12px 22px;
  background:
    linear-gradient(#f7eedc,#efe2c6);    /* ほんのり金ベージュ */
  color:#7a6a48;
  border:1px solid #ddc9a5;
  border-radius:10px;
  box-shadow:
    0 10px 20px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
  text-align:center;
  letter-spacing:.12em;
}
.coupon-note::before,
.coupon-note::after{                     /* チケットの“切れ込み”風 */
  content:"";
  position:absolute;
  top:50%;
  width:12px; height:12px;
  background:var(--page-bg);
  border:1px solid #ddc9a5;
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.coupon-note::before{ left:-7px; }
.coupon-note::after{ right:-7px; }
/* 点線のミシン目 */
.coupon-note span{
  position:relative;
  padding-right:0.6em;
}
.coupon-note span::after{
  content:"";
  position:absolute;
  right:-0.4em; top:50%;
  width:38px; height:1px;
  background: repeating-linear-gradient(
    90deg, transparent 0 4px, rgba(0,0,0,.18) 4px 8px
  );
  transform:translateY(-50%);
  opacity:.5;
}

/* ===== サブリード ===== */
.menu-sublead{
  margin:10px 0 50px;
  text-align:center;
  font-weight:500;
  font-size: 24px;
  letter-spacing:.16em;
  color:#746353;
}
.spbr{ display:none; }
@media (max-width:480px){ .spbr{ display:inline; } }

/* ===== リボン付きクーポンカード ===== */
.coupon-card{
  position:relative;
  margin:0 auto 72px;
  padding:56px 24px 28px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  text-align:center;
}
.coupon-card .ribbon{
  height:auto; display:block;
}
.course-title{
    margin: 32px 0 20px;
    font-weight: 500;
    letter-spacing: .18em;
    color: #7b6a58;
    font-size: 24px;
}

/* 芯のある“タグ”風チップ */
.chips{
  display:flex; justify-content:center; gap:8px;
  margin:6px 0 24px; padding:0; list-style:none;
}
.chips li{
  background:#efe7d4;
  border:1px solid #e0d0ad;
  color:#6a5940;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8rem;
  letter-spacing:.12em;
}

/* 写真 */
.thumb{ margin:10px 0 14px; }
.thumb img {
    display: block;
    width: 400px;
    height: auto;
    border-radius: 6px;
    margin: 0 auto 20px auto;
}
/* 価格 */
.price{ margin:6px 0 10px; }
.price .usual{
  color:#707070; font-size:.95rem; margin:0 0 6px;
}
.price .usual span{ text-decoration:line-through; opacity:.7; }
.price .now{
  margin:0; font-size:48px; letter-spacing:.06em;
  color:var(--gold-deep); font-weight:normal;
}

.coupon_price{
	display: block;
	width: 300px;
	padding: 5px 20px;
	text-align: center;
	margin: 0 auto;
	background: #9d8464;
	color: #fff;
	border-radius: 12px;
}


.arrow{
	text-align: center;
	color: gray;
	margin: 0;
	padding: 0;
}

.marker {
    background: linear-gradient(transparent 60%, #f1d88c 60%);
}

.marker2 {
    background: linear-gradient(transparent 60%, #f1d88c 60%);
    padding: 0.1em 0;
}

/* 説明文 */
.desc{ color:var(--muted); line-height:1.9; margin:12px 0 0; }

/* スマホ調整 */
@media (max-width:600px){
  .side-title{ top:180px; height:360px; }
  .coupon-card{ padding:52px 18px 24px; }
  .menu-hero{ border-radius:10px; }
}


.qa-section{
  width:100vw;
  margin-left:calc(50% - 50vw);      /* 画面左端に揃える */
  background:url('./images/bg06.png') repeat;
  padding:64px 0 88px;
  position:relative;
}

.voice{
  width:100vw;
  margin-left:calc(50% - 50vw);      /* 画面左端に揃える */
  background:url('./images/bg06.png') repeat;
  padding:30px;
  position:relative;
}

/* 見出し */
.qa-title{
  text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight:500;
  color:#6f5226;
  font-size:clamp(28px,5vw,48px);
  letter-spacing:.12em;
  margin:0 0 28px;
}

/* アコーディオンカード */
.qa-item{
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  margin:14px 0;
  overflow:hidden;
}
.qa-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px 16px 14px;
  cursor:pointer;
}
.qa-item summary::-webkit-details-marker{ display:none; }

/* Qバッジ */
.q-badge{
  flex:0 0 40px;
  width:40px; height:40px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(#e8d9bd,#d9c19a);
  color:#7a6239;
  font-weight:700; letter-spacing:.02em;
}

/* テキスト */
.q-text{
  color:#444;
  letter-spacing:.06em;
  line-height:1.7;
}

/* 右端の + ボタン（開閉で − に） */
.toggle{
  margin-left:auto;
  position:relative;
  width:18px; height:18px;
}
.toggle::before,
.toggle::after{
  content:"";
  position:absolute;
  background:#c5a363;
  border-radius:1px;
}
.toggle::before{                 /* 横棒 */
  left:0; right:0; top:50%; height:2px;
  transform:translateY(-50%);
}
.toggle::after{                  /* 縦棒 */
  top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-50%);
}
.qa-item[open] .toggle::after{ transform:translateX(-50%) scaleY(0); }

/* 回答 */
.answer{
  padding:0 18px 18px 68px;     /* 左はバッジ分を確保 */
  border-top:1px dashed rgba(0,0,0,.08);
  color:#5a5a5a;
  line-height:1.9;
}
.answer p{ margin:14px 0 0; }

/* スマホ微調整 */
@media (max-width:520px){
  .answer{ padding:0 16px 16px 62px; }
  .q-badge{ width:36px; height:36px; flex-basis:36px; }
}

.flow_image{
	max-width: 400px;
	height: auto;
	display: block;
	margin: 15px auto 30px auto;
	border-radius: 20px;
}

.flow-head{ text-align:center; margin:48px 0 24px; color:#6e5b43;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; }
.flow-head h2{ margin:0 0 8px; font-weight:500; font-size:clamp(32px,5vw,52px); }
.flow-sub{ margin:0; opacity:.7; letter-spacing:.2em; font-size:clamp(12px,2.6vw,14px); }
.flow-lead{ margin:6px 0 0; letter-spacing:.18em; font-size:clamp(18px,3.5vw,22px); }

/* ステップ領域：全幅・白透過0.7 */
.flow-steps{ position:relative; padding:36px 0 64px; }
.flow-steps::before{
  content:""; position:absolute; inset:0 auto 0 50%; transform:translateX(-50%);
  width:100vw; background:rgba(255,255,255,.5); z-index:-1;
}

/* タイムライン（数字列＋本文） */
.flow-list{
  --col-num:64px; --gap:16px;
  list-style:none; margin:0; padding:8px 0; position:relative;
}
/* 数字列の中心を通る実線 */
.flow-list::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--col-num)/2);
  width:2px; background:#e0d5c5;              /* 実線 */
}

.flow-item{
  display:grid; grid-template-columns:var(--col-num) 1fr;
  column-gap:var(--gap); align-items:start; padding:18px 0;
}

/* 数字バッジ（縦線に重ねる） */
.flow-item .num{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; justify-self:center;
  background:linear-gradient(#e7d7bc,#d7c39f); color:#7a5e39; font-weight:700;
  position:relative; z-index:1;                 /* 縦線の上に表示 */
}

/* 本文ブロック */
.flow-item .body{ }
.flow-item .icon{ display:block; width:72px; height:72px; margin:0 auto 8px; }
.flow-item .icon img{ width:100%; height:100%; object-fit:contain; }

.flow-item .title{
  margin:6px 0 6px; font-weight:600; letter-spacing:.12em; color:#6b573d;
  text-align:center;                            /* タイトル中央 */
}
.flow-item .desc{
  margin:0; color:#555; line-height:1.9; font-size:.95rem;
  text-align:left;                              /* 説明だけ左寄せ */
}

/* スマホ微調整 */
@media (max-width:560px){
  .flow-list{ --col-num:52px; }
  .flow-item .num{ width:36px; height:36px; font-size:.95rem; }
  .flow-item .icon{ width:64px; height:64px; }

.flow_image{
	max-width: 240px;
	height: auto;
	display: block;
	margin: 15px auto 30px auto;
	border-radius: 20px;
}

}

.stylists{
  position: relative;
  padding: 56px 0 88px;
  overflow: visible;
  isolation: isolate;   /* ★ 親でスタッキングコンテキスト作成 */
  z-index: 0;
}
/* 中身は線画の上に */
.stylists .container{
  position: relative;
  z-index: 1;
}

/* 左右の線画（必ず見えるように高さを明示） */
.stylists::before,
.stylists::after{
  content: "";
  position: absolute;
  width: min(42vw, 620px);
  height: clamp(240px, 34vw, 520px);  /* ★ 確実に高さを出す */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .8;
  pointer-events: none;
  z-index: 0;                          /* ★ 負のz-indexは使わない */
}

/* 左側の線画 */
.stylists::before{
  background-image: url("./images/line_picture01.png");
  left: calc(50% - 50vw + 16px);       /* 画面左端から */
  top: 10%;
}

/* 右側の線画 */
.stylists::after{
  background-image: url("./images/line_picture02.png");
  right: calc(50% - 50vw + 16px);      /* 画面右端から */
  bottom: 6%;
}

/* 見出し */
.sty-head{ text-align:center; color:#5b452d; }
.sty-head h2{
  margin:0 0 6px; font-weight:600;
  font-size:clamp(32px,5vw,54px); letter-spacing:.04em;
}
.sty-head .jp{
  margin:0 0 22px; letter-spacing:.25em; opacity:.8;
  position:relative; display:inline-block; padding-top:6px;
}
.sty-head .jp::before{
  content:""; position:absolute; left:50%; top:0; width:64px; height:2px;
  background:#bfa46a; transform:translateX(-50%); opacity:.6;
}

/* 写真カード */
.sty-portrait{
  width:min(420px, 92%);
  margin:0 auto 14px; padding:8px;
}
.sty-portrait img{ display:block; width:100%; height:auto; border-radius:4px; }

/* 名前＆経歴 */
.sty-name{
  text-align:center; margin:8px 0 2px;
  letter-spacing:.36em; font-weight:600; color:#2d2a27;
}
.sty-exp{
  text-align:center; margin:0 0 18px; color:#8a8277; letter-spacing:.18em;
}


.sty-msg{
    position: relative;
    margin: 0 auto;
    max-width: 640px;
    background: #fff;
    border-radius: 14px;
    padding: 40px 30px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .08);
    color: #4b4b4b;
    line-height: 2.5;
}
.sty-msg::before{                 /* 上部の小さなドット飾り */
  content:"“";
  position:absolute; left:16px; top:-10px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:56px; line-height:1;
  color:rgba(191,164,106,.45);
}
.sty-msg::after{                  /* 写真側に向けた三角の“吹き出し” */
  content:""; position:absolute; top:-10px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:18px; height:18px; background:#fff;
  box-shadow:-3px -3px 10px rgba(0,0,0,.04);
}
.sty-msg p{ margin:0; }
.sty-msg strong{ color:#7a6034; }

/* モバイル微調整 */
@media (max-width:560px){
  .stylists::before,.stylists::after{ width:46vw; opacity:.15; }
  .sty-name{ letter-spacing:.22em; }
  .sty-msg{ padding:16px 16px 18px; }
}


.voice-title{
  text-align:center; margin:28px 0 18px;
  color:#6b5129; font-weight:600; letter-spacing:.04em;
  font-size:clamp(28px,5vw,56px);
}

/* ラッパーは広めに（幅制限なしでOK） */
.voice-wrap{
  position: relative;
  /* 画面全幅に広げて親の max-width を無視 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 70px;
}

/* 中身（track）は中央寄せ＆上限だけ設定 */
.voice-track{
  max-width: min(1400px, 96vw);
  margin: 0 auto;
}
/* ===== PCは4枚並び ===== */
.voice-track{
  display:grid;
  grid-template-columns:repeat(4, minmax(260px, 1fr));
  gap:28px;
}

/* カード */
.v-card{
  position:relative; background:#fff; border-radius:18px;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  padding-top:40px; /* バッジのための余白 */
}
.v-badge {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
}
.v-badge img{ width:62px; height:62px; object-fit:contain; }
.v-inner{ padding:18px 18px 22px; }
.v-name{ margin:0 0 6px; text-align:center; letter-spacing:.16em; color:#3a332c; font-weight:600; }
.v-inner hr{ border:0; border-top:1px solid rgba(0,0,0,.1); margin:10px 0 14px; }
.v-thumb{ margin:0 auto 12px; width:min(240px,86%); }
.v-thumb img{ display:block; width:100%; height:auto; border-radius:12px; }
.v-text{ margin:0; color:#555; line-height:1.95; font-size:.95rem; }

/* ===== スマホは1枚カルーセル（矢印で1枚送り） ===== */
@media (max-width:720px){
  .voice-track{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:18px; padding:0 44px;
  }
  .v-card{ flex:0 0 86vw; scroll-snap-align:center; }

  .voice-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    border:1px solid #c9ab71; background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
    display:grid; place-items:center; z-index:2;
  }
  .voice-nav.prev{ left:6px; }
  .voice-nav.next{ right:6px; }
  .voice-nav::before, .voice-nav::after{
    content:""; position:absolute; width:12px; height:2px; background:#c9ab71;
  }
  .voice-nav.prev::before{ transform:rotate(-45deg); left:12px; }
  .voice-nav.prev::after { transform:rotate(45deg);  left:12px; }
  .voice-nav.next::before{ transform:rotate(45deg);  right:12px; }
  .voice-nav.next::after { transform:rotate(-45deg); right:12px; }
}
/* PCでは矢印を消す */
@media (min-width:721px){ .voice-nav{ display:none; } }


@media (max-width: 768px) {
.hair-quality {
    display: block;
    align-items: flex-start;
    gap: 20px;
        display: block;
        margin: 0 5%;
        text-align: center;
}
.hair-text h2 {
    font-size: 22px;
}
.hair-text p {
    color: #5a4a3a;
    line-height: 2.5;
    margin: 0 5% 1em;
    font-size: 16px;
    text-align: left;
}



.promise-item h3 {
    margin: 0 0 14px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .04em;
    line-height: 1.5;
}
.promise-item .num {
    position: relative;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 45px;
    width: 65px;
    margin-bottom: 20px;
}
.promise-item p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 2;
}
.container {
    padding: 0;
}
.mv02 {
    margin: 60px 5% 30px 5%;
}
.promise-item .inner {
    display: block;
	margin: 0 10%;
}
.coupon-note {
    position: relative;
    line-height: 2;
    display: block;
    font-size: 16px;
	width: auto;
    margin: 0 5%;
}
.promise-item.left::before {
    left: unset;
}

.promise-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: url(./images/bg06.png) repeat;
    z-index: -1;
}
.menu-hero{
    width: auto;
    margin-left: -20px;
    margin-top: 12px;
    margin-bottom: 60px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}
.course-title {
    margin: 32px 0 20px;
    font-weight: 500;
    letter-spacing: .18em;
    color: #7b6a58;
    font-size: 24px;
}
.course-title {
    margin: 20px 0 20px;
    font-weight: 500;
    letter-spacing: .18em;
    color: #7b6a58;
    font-size: 16px;
}
.chips {
	margin: 0 5% 30px 5%;
}
.chips li{
font-size: 11px;
}
.coupon-card {
        padding: 5px 0 24px !important;
        margin: 0 5% 60px 5%;
    }
.sty-portrait {
    width: auto;
    margin: 0 10% 14px;
    padding: 8px;
}
.sty-portrait {
    width: auto;
    margin: 0 10% 14px;
    padding: 8px;
}
    .sty-msg {
        padding: 26px 26px 18px !important;
        margin: 0 7% 30px 7%;
    }
    .voice-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 28px;
        padding: 44px;
    }
.qa-item {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
    margin: 14px 7%;
    overflow: hidden;
}
.flow-steps {
    position: relative;
    padding: 36px 0 64px;
    margin: 0 5%;
}
.menu-sublead {
    margin: 30px 0 50px;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .16em;
    color: #746353;
}
.stylists {
    position: relative;
    padding: 56px 0 28px;
}
.side-title {
        display: none;
    }
    .mv {
        background-image: url(./images/mv_001.png);
        width: 80%;
        background-position: top center;
        background-repeat: no-repeat;
        margin: 50px auto;
        min-height: 400px;
        border-radius: 20px;
        background-size: cover;
    }
.top_logo img {
    width: 80px;
    height: auto;
    padding: 0;
    margin: 0 20px 0 auto;
    display: block;
}
.mv_catch img{
width: 180px;
}




.coupon_price{
	margin-bottom:15px;
}
.mv_box h1 {
    color: #fff;
    font-family: serif;
    text-align: center;
    font-size: 15px;
    margin-bottom: 40px;
}
.mv_catch {
    text-align: center;
    margin: 70px 0 50px 0;
}
main {
    background-image: url(./images/bg02.png), url(./images/bg03.png), url(./images/bg04.png);
    background-repeat: no-repeat;
    background-position: top 0 left 0, top 400px right 0, top 500px left 0;
    background-size: 100px, 100px, 100px;
}
.to_coupon {
    text-align: center;
    width: 270px;
    margin: 0 auto;
}
.catch01 {
    text-align: center;
    line-height: 2;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 60px;
}
.bg-wrap {
    padding: 30px 20px 20px 20px;
    position: relative;
	margin: 0 5%;
}
.check-list li {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    column-gap: 16px;
    padding: 5px 0;
    font-size: 16px;
    letter-spacing: 2px;
}
.icon01 {
    position: absolute;
    top: -60px;
    left: 0;
    text-align: center;
    right: 0;
}
.icon01 img{
	width: 60px;
	height: auto;
}

.flow-item{
	margin-right: 5%;
}

.price .now {
    margin: 0;
    font-size: 48px;
    letter-spacing: 0;
    color: var(--gold-deep);
    font-weight: normal;
    line-height: 1;
}

}

@media (max-width:720px){
  /* 既存レイアウトはそのまま。中央配置＆前面を確保 */
  .voice-wrap{ position:relative; overflow:visible; }
  .voice-nav{ display:grid; place-items:center; z-index:100; }

  /* 旧スタイルの疑似要素は消す（×や三角を無効化） */
  .voice-nav::before,
  .voice-nav::after{ content:none !important; border:0 !important; }

  /* アイコンの見た目だけ指定（サイズ・色はお好みで） */
  .voice-nav i{
    font-size:20px;
    color:#c9ab71;
    line-height:1;
    pointer-events:none; /* クリックを親ボタンに通す */
  }

  /* 押下時のちょいフィードバック */
  .voice-nav:active { transform:translateY(-50%) scale(.96); }
}

/* ★★★★★ 削除 ★★★★★ */
/* 左矢印を非表示にしていた原因のコードを削除しました
.voice-wrap > .voice-nav.prev:first-of-type{ display:none !important; }
*/
/* ★★★★★★★★★★★★★★ */

@media (max-width: 720px){
  .qa-item summary{ align-items: center; } /* 念のため */

  .toggle{
    margin-left:auto;
    position:relative;
    flex: 0 0 32px;          /* ヒットエリアを少し広げる */
    width:32px; height:32px;
    display:grid; place-items:center;   /* 中央寄せを強制 */
  }
  .toggle::before,
  .toggle::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);     /* 中点を一致させるのがコツ */
    background:#c5a363;
    border-radius:1px;
  }
  .toggle::before{  /* 横棒 */
    width:60%; height:2px;
  }
  .toggle::after{   /* 縦棒 */
    width:2px; height:60%;
  }
  /* 開いているときは縦棒を消す（±切替） */
  .qa-item[open] .toggle::after{ height:0; }
}

.style-title{
  text-align:center; margin:28px 0 12px;
  color:#6b5129; font-weight:600; letter-spacing:.04em;
  font-size:clamp(32px,6vw,72px);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}


.style-title2{
	font-size: 24px;
	text-align: center;
	margin-bottom: 30px;
	font-weight: normal;
}

/* 768px制限を貫通して全幅に */
.style-wrap{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-inline:18px;               /* 画面端の余白 */
}

/* 中央のビューポート（最大幅 1400px、ここが横スクロール） */
.style-viewport{
  --gap:28px;
  --per:3;
  max-width:min(1400px,96vw);
  margin:0 auto;
  overflow-x:auto;
  scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
  touch-action: none; /* pan-x から none に変更 */
  cursor:grab;
}
.style-viewport::-webkit-scrollbar{ display:none; }
.style-viewport.is-dragging{ cursor:grabbing; }

/* 横並びのトラック */
.style-track{
  display:flex; gap:var(--gap);
  padding:8px 0 12px;
  user-select:none;                   /* ドラッグ時の選択防止 */
}

/* カード幅は--per枚でちょうど収まる */
.style-card{
  flex:0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per));
}
.style-img{
  margin:0 0 10px;
  aspect-ratio:3/2;
  border-radius:12px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.style-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.style-cap{
  margin:0; text-align:center; color:#574a3b;
  letter-spacing:.06em; font-size:clamp(12px,2.6vw,16px);
}

/* 矢印（wrap基準に絶対配置。JSで viewport の左右にピタ付け） */
.style-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid #c9ab71; background:#fff; color:#c9ab71;
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.12);
  z-index:10;
}
.style-nav i{ font-size:18px; pointer-events:none; }
.style-nav:disabled{ opacity:.35; pointer-events:none; }

/* ドット */
.style-dots{
  display:flex; justify-content:center; gap:10px;
  margin:10px auto 24px;
}
.style-dots .dot{
  width:10px; height:10px; border-radius:50%;
  background:#bfa78a; opacity:.35; border:0;
}
.style-dots .dot.is-active{ opacity:1; }

/* ブレークポイント */
@media (max-width:1024px){ .style-viewport{ --per:2; } }
@media (max-width:600px){
  .style-viewport{ --per:1; }
  .style-nav{ width:38px; height:38px; }
  .style-nav i{ font-size:16px; }
}

.voice-wrap{
  position: relative;
  overflow: hidden;          /* はみ出しで消えないように、横にもらさない */
  max-width: 100vw;          /* 端末幅を越えない */
  padding: 40px 0;
}

.style-gallery{
	margin-bottom: 50px;
}

.voice-track{
  position: relative;
  z-index: 1;                /* コンテンツ面 */
}

/* モバイル用ナビ（PCでは非表示のままでOK） */
@media (max-width: 720px){
  .voice-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #c9ab71;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    z-index: 10;             /* ← トラックより前面に固定 */
    pointer-events: auto;
  }
  .voice-nav.prev{ left: max(10px, env(safe-area-inset-left)) !important; }
  .voice-nav.next{ right:max(10px, env(safe-area-inset-right)) !important; }

  /* 以前の「::before/::after で作った矢印」が残っていても打ち消す */
  .voice-nav::before,
  .voice-nav::after{ content: none !important; }



}

/* PC では矢印を隠す（既存仕様を維持） */
@media (min-width: 721px){
  .voice-nav{ display: none; }
}

body{
  max-width: 100%;
  overflow-x: hidden;
}

/* はみ出しやすい横スクロール系ラッパーは枠内にクリップ */
.style-wrap{
  position: relative;
  overflow: hidden;      /* ← ここ大事。子の絶対配置で横幅を押し広げない */
  max-width: 100vw;
}

.style-viewport{
  overflow-x: auto;                      /* 横スクロールはこの中だけ */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
touch-action: none;
}

:root{
  --cta-gold: var(--gold, #c9ac72);
  --cta-tip-h: clamp(26px, 4.5vw, 60px);   /* 下の三角の高さ（小さめ） */
}

.cta-gold{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-bottom: var(--cta-tip-h);       /* 三角ぶんの余白 */
  margin-top: 16px;
  margin-bottom: 28px;
  overflow: hidden;                        /* 横スク抑止 */
  box-sizing: border-box;
    margin-bottom: 0;
}

.cta-gold__inner{
  position: relative;
  box-sizing: border-box;
  max-width: 500px;
  margin: 0 auto;
  background: var(--cta-gold);
  color: #fff;
  text-align: center;
  padding: clamp(14px, 3.2vw, 28px) clamp(14px, 3vw, 28px);
  border-radius: 12px 12px 0 0;
  font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP", serif;
  line-height: 2.2;
  letter-spacing: .12em;
  font-size: 20px;
}
.cta-gold__inner p{ margin: .5em 0; }

/* 下の三角。1px重ねて“境目の線”を消す */
.cta-gold__inner::after{
  content: "";
  position: absolute;
  left: 0; right: 0; margin: 0 auto;
  top: 100%;                               /* 下辺にピタッと付ける */
  width: calc(100% + 2px);                 /* 両端を各1pxオーバーラップ */
  height: var(--cta-tip-h);
  background: var(--cta-gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(0px);             /* 境目に1pxかぶせる */
  will-change: transform;
  backface-visibility: hidden;             /* アンチエイリアスの縁消し */
}

.rsv-block{
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* コンテナ制約を解除して全幅へ */
  padding: 12px 0 34px;
  overflow: hidden;                /* 左の縦英字がはみ出てもはみ出しを隠す */
  isolation: isolate;
  margin-top: 70px;
}

/* ヘッダー（中央寄せ） */
.rsv-head{ text-align: center; margin: 4px 0 14px; }
.rsv-head__icon{ display:block; margin:0 auto 12px; }
.rsv-head__lead{ margin:0; font-size:24px; letter-spacing:.1em; color:#3a3a3a; }
.rsv-head__lead.sub{ margin:0 0 40px 0; opacity:.85; }

/* 70vw 右寄せヒーロー（右端ピタッ） */
.rsv-hero{
  width: 80vw;
  margin-left: auto;
  margin-right: calc(50% - 50vw);  /* 右端にピタ付け */
  margin-bottom: 70px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.rsv-hero img{ display:block; width:100%; height:auto; }

/* 左の縦英字（高さ 500px） */
.rsv-vertical{
  position: absolute;
  left: calc(50% - 50vw + 12px);   /* 画面の“左端＋12px” */
top: 0;
  height: 500px;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.rsv-vertical2{
  position: absolute;
  right: calc(50% - 50vw + 12px);   /* 画面の“左端＋12px” */
top: 0;
  height: 500px;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 店舗群ラッパー（中央の幅は大きめ。回り込み対策に grid を強制） */
.rsv-sites{
  max-width: 768px;	
  margin: 0 auto;
  position: relative;
}

.shopbg{
    width: 100vw;
    background: url(./images/bg06.png) repeat;
    padding: 60px 0 30px 0;
    position: relative;
	margin: 80px 0;
}

/* 店舗カード */
.rsv-card{
}

.rsv-card__photo{
  margin-bottom: 30px;
}

.rsv-card__photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  outline: 8px solid rgba(191,164,106,.18);
  outline-offset: -6px;
}
.rsv-card__body{ min-width:0; }
.rsv-card__title{
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: .12em;
 text-align: center;
    color: #6b5129;
	font-weight: normal;
	font-size: 30px;
}

/* 情報テーブル */
.rsv-table{
  width: 100%;
  border-collapse: collapse;
  color: #333;
  font-size: 14px;
}
.rsv-table th{
  width: 92px;
  white-space: nowrap;
  text-align: left;
  color: #6b5a48;
  padding: 20px;
  vertical-align: top;
  font-weight: 600;
}
.rsv-table td{ padding: 20px; }
.rsv-table tr + tr th,
.rsv-table tr + tr td{ border-top: 1px dashed rgba(0,0,0,.12); }

/* ボタン（衝突しないよう rsv- 前置） */
.rsv-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;margin: 30px auto;width: 350px;}
.rsv-btn{
  --shadow: rgba(0,0,0,.08);
  display:inline-flex; align-items:center; gap:.55em;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  font-weight:700; letter-spacing:.06em; box-shadow:0 8px 18px var(--shadow);
  transition: transform .06s ease, box-shadow .2s ease;
}
.rsv-btn:active{ transform: translateY(1px); }
.rsv-btn i{ font-size:1.05em; }

.rsv-btn--salon{ background:#f2a2ad; color:#fff; }
.rsv-btn--salon:hover{ box-shadow: 0 10px 20px rgba(242,162,173,.35); }
.rsv-btn--line{ background:#06c755; color:#fff; }
.rsv-btn--line:hover{ box-shadow: 0 10px 20px rgba(6,199,85,.35); }

/* 反応設計 */
@media (max-width: 1024px){
  .rsv-hero{ width: 76vw; }
}
@media (max-width: 900px){
  .rsv-vertical{ display:none; }             /* モバイルでは縦英字を隠す */
  .rsv-vertical2{ display:none; }             /* モバイルでは縦英字を隠す */
  .rsv-hero{
        width: 100%;
        margin-right: -40px;
        margin-left: auto;
  }
  .rsv-card{
    grid-template-columns: 1fr;              /* 縦並び */
    gap: 16px;
margin: 0 5%
  }
  .rsv-table th{ width: 86px; }

.voice-wrap {
    padding: 0;
}
.voice {
    padding: 20px 0 0;
    position: relative;
}
.voice-title {
    text-align: center;
    margin: 28px 0 0;
}
.cta-gold__inner {
    margin: 0 5%;
    line-height: 1.6;
    font-size: 18px;
}

}

.footer-copyright{
	text-align: center;
	padding: 20px 0;
}


@media (max-width: 768px){
.footer-copyright {
    text-align: center;
    padding: 20px 0 90px 0;
}
.rsv-head__lead {
    margin: 0;
    font-size: 18px;
    letter-spacing: .1em;
    color: #3a3a3a;
    margin: 0 20px !important;
}
.rsv-head__lead_sub {
    margin: 0;
    font-size: 18px;
    letter-spacing: .1em;
    color: #3a3a3a;
    margin: 0 20px !important;
}

.thumb img {
    display: block;
    width: 150px;
}


.menu_li{
	margin: 0 5% 70px 5%;
	padding: 0;
	display: block;
}


.menu_li li{
	list-style-type: none;
	margin: 0 1% 30px 1%;
}
.menu_li li img{
	width: 100%;
	height: auto;
}

.desc {
    color: var(--muted);
    line-height: 1.9;
    margin: 12px 5% 0;
	font-size: 14px;
}


}


#styleViewport{
  touch-action: none !important;
  -webkit-overflow-scrolling: auto; /* 慣性スクロール干渉を防ぐ */
}

.fixed-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
            display: flex;
            justify-content: center;
            gap: 10px;
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
            visibility: hidden;
            opacity: 0;
        }

        .fixed-cta.is-visible {
            transform: translateY(0);
            visibility: visible;
            opacity: 1;
        }

        .fixed-cta__btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 25px;
            border-radius: 5px;
            font-weight: bold;
            text-decoration: none;
            color: #fff;
            gap: 5px;
    border-radius: 999px;
        }

        .fixed-cta__btn--salon {
            background-color: #f2a2ad;
        }

        .fixed-cta__btn--line {
            background-color: #00c300;
        }

        .fixed-cta__btn i {
            font-size: 1.2em;
        }

        .fixed-cta-dropdown {
            position: fixed;
            bottom: 70px;
            left: 0;
            width: 100%;
            background-color: #f9f9f9;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
            z-index: 999;
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
            visibility: hidden;
            opacity: 0;
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .fixed-cta-dropdown.is-visible {
            transform: translateY(0);
            visibility: visible;
            opacity: 1;
        }

        .dropdown-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .dropdown-card__info {
            flex-grow: 1;
        }

        .dropdown-card__title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .dropdown-card__address {
            font-size: 0.85em;
            color: #666;
        }

        .dropdown-card__btn {
            padding: 8px 12px;
            background-color: #f2a2ad;
            color: #fff;
            border-radius: 4px;
            text-decoration: none;
            font-size: 0.9em;
            font-weight: bold;
        }

.quick-reserve{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 60px;
}

.qr-ttl{
  margin: 0 0 18px;
  text-align:center;
  font-weight:600;
  color:#6b5129;
  letter-spacing:.08em;
  font-size:28px;
}

/* グリッド中央寄せ */
.qr-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px)); /* カード幅を制限して中央に */
  justify-content: center;   /* 中央寄せ */
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: min(96vw, 1000px); /* 過度には広がらないように */
}

/* カードデザイン（淡いピンク） */
.qr-card{

    background: linear-gradient(#e7d7bc, #d7c39f);
  border: 1px solid rgba(191,164,106,.25);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  color: #fff !important;
}
.qr-card:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.qr-link{ display:block; padding: 14px 16px; color:#333; text-decoration:none; }
.qr-line{
  display:flex; align-items:center; gap:8px;
  color:#6b5129; font-weight:700; letter-spacing:.04em; line-height:1.3;
}
.qr-name{ flex: 1; }
.qr-open{ opacity:.6; }

.qr-addr{
  margin-top:6px; font-size:12px; color:#555; line-height:1.4;
  display:flex; align-items:flex-start; gap:6px;
}
.qr-addr i{ margin-top: 2px; }

@media (max-width:900px){
  .qr-grid{
    grid-template-columns: 1fr; /* SPは縦1列 */
    max-width: 92vw;
  }
.qr-ttl{
  font-size:20px;
}
}

  .sns-follow{padding:0 0 44px 0;margin-top:24px;text-align:center}
  .sns-follow__title{margin:0 0 10px;font-weight:700;letter-spacing:.02em;font-size:14px;color:#666}


  .sns-ig-icon{
    display:inline-flex;
    width:66px; height:66px;            /* クリック領域を少し広めに確保 */
    align-items:center; justify-content:center;
    text-decoration:none;
    transition:transform .15s ease, opacity .15s ease;
  }
  .sns-ig-icon i{font-size:60px; line-height:1; color:#E4405F;} /* Instagramカラー */
  .sns-ig-icon:hover{transform:scale(1.06); opacity:.9}


.style-viewport,
#styleViewport {
    touch-action: pan-y !important;
}

/* フッターCTAのLINEボタン用スタイル */
.dropdown-card__btn--line {
  background-color: #06C755; /* LINEの緑色 */
  color: #fff;
}
.dropdown-card__btn--line:hover {
  background-color: #05a546; /* ホバー時の少し暗い緑 */
}