/* ▼ 横スクロール完全防止＆画像の基本挙動 */
html, body { 
  overflow-x: hidden; 
}
img, iframe { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}


/* ヘッダー */
.site-header {
  position: absolute;
  top: 10px; left: 0; width: 100%;
  z-index: 20;
}
.nav-inner{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:16px 16px;
}
.brand img{ 
  height:28px; 
  display:block; /* ロゴの高さはお好みで */
  height: clamp(26px, 3.2vw, 36px);       /* だいたい三本線の高さと釣り合う値 */
  width: auto;
  display:block;
  margin-left: 7px;
  margin-top: 0px;
  width: 170px;
} 

.main-nav a{
  color:#fff; 
  text-decoration:none; 
  margin-left:16px; 
  font-size:20px;
}

/* HERO全体 */
.hero{
  position:relative; 
  height:70vh; 
  overflow:hidden;
  margin-bottom: 0;
}

/* スライド画像（重ねてフェード） */
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 2s ease;  /* ふんわり */
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
}

/* 黒の不透明（半透明）オーバーレイ */
.hero-dim{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.35); /* 黒の35%：強めたければ 0.45 など */
  z-index: 5;
}

/* 文字下の白パネル（薄め）＋白文字 */
.hero-panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);

  /* パネルの見た目 */
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
  color:#fff;
  border-radius: 0;               /* 角は四角 */

  /* サイズ調整：横は70%、高さは中身に合わせる */
  width: 80%;
  max-width: 900px;
  height: auto;                   /* ← ここが重要 */
  padding: 24px 20px;             /* 余白はpxで控えめに */

  /* 中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  gap: 14px;                      /* 要素間のスキマを統一 */
  text-align: center;
  z-index: 10;
  box-sizing: border-box;         /* padding込みで幅計算 */
}

/* 見出しと本文の不要な外側余白をリセットして高さを抑える */

.hero-panel h1{
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(22px, 4vw, 32px);
  margin:0 0 12px;
  letter-spacing: .03em;
}
.hero-panel .subtitle{
  font-size: clamp(12px, 3.6vw, 16px);
  /* margin: 20px 0; */
  opacity:.95;
  line-height: 1.9;
  margin: 12px 0 20px;
  text-wrap: balance;   /* 行の折れ方を整える（対応ブラウザで有効） */
}

/* 画像ボタン */
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* ボタンの間隔 */
  margin-top: 55px; 
}
.buttons{ gap: 16px; }
 /* テキストは白 */

.btn-img img {
  height: 40px;      /* ボタン画像の高さ */
  width: auto;
  transition: all 0.3s ease;
}

.btn-img:hover img {
  opacity: 0.85;     /* ふんわりホバー */
  transform: scale(1.03);
}


/* スマホ少し詰める */
@media (max-width: 600px){
  .nav-inner{ padding:16px 16px; }
  .hero-panel{ padding:32px 20px; width:min(92%, 680px); }
}

.lead-phrase { line-height: 1.9; }
.em-ch{
  font-weight: 700;
  font-size: 1.12em;     /* 少しだけ大きく */
}
body {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.9;
  color: #333;
}
/* 写真をふんわり出す */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease;
  text-align: left;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.concept-text p {
  line-height: 2;
  letter-spacing: 0.03em; /* 少し文字間も広げる */
  color: #333;
}

/* ===========================
   SP：トップページ HEROを画面いっぱいに
   =========================== */
@media (max-width: 767px) {
  .hero {
    height: 90vh;        /* サービスページと同じくらい */
    min-height: 520px;   /* 端末が小さくてもある程度の高さを確保 */
  }
}

/* =========================
   コンセプトセクション
   ========================= */
.section-concept {
  background-color: #DFF3F6;  /* 背景の淡い水色 */
  padding-top: 40px;         /* 上にゆとり */
  padding-bottom: 80px;       /* 下にもゆとり */
  margin-top: 0;              /* HEROとの隙間をなくす */
}

/* セクション全体の幅と中央寄せ */
.container {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;             /* 中央に配置 */
}

/* 見出し画像（CONCEPT） */
.section-concept .heading-img {
  text-align: left;         
  margin-top: 80px;           /* 見出し上に余白 */
  margin-bottom: 80px;        /* 見出し下に余白 */
  height: auto;
}
.section-concept .heading-img img { 
  display: block;      /* 左端にピタッと合わせる */
  margin-left: 0;
}

/* コンセプトの本文 */
/* .concept-text p {
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 2;
  margin-bottom: 1.5em;
  color: #333;
  letter-spacing: 0.03em;
} */
/* コンセプトの本文（SP最小調整） */
.concept-text p{
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(14px, 3.7vw, 15.5px);  /* 少し小さめ＆可変 */
  line-height: 1.9;                       /* 広すぎを抑える */
  letter-spacing: 0.02em;                  /* 字間は控えめ */
  margin: 0 0 1.1em;                       /* 段落間に呼吸 */
  color: #333;
  text-wrap: pretty;                        /* 変な折返しを緩和（対応ブラウザ） */
}
/* 列幅は親に（ここが大事） */
.section-concept .concept-text{
  max-width: 32em;
  margin: 0 auto 0 0;   /* 左寄せ */
  padding-right: 8px;   /* 句読点が落ちにくい */
}

/* 折返しの質は段落で調整（追加OK） */
.section-concept .concept-text p{
  text-wrap: pretty;     /* 対応ブラウザで折返しが上品に */
  line-break: strict;    /* 句読点の禁則を厳しめに */
  /* 既に設定している font-size/line-height/letter-spacing はそのまま */
}

/* 写真とテキスト */
.concept-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}
.concept-block .concept-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  position: static !important; /* relative指定を解除 */
  top: auto !important;
  margin: 0 auto;
}

/* コンセプト 1：外観写真 */
.concept-block--1 .concept-image img {
  width: 90%;
  position: relative;
  top: -120px;   /* ← 上に上げる。数値調整OK */
  margin: 0 auto;
}

/* コンセプト 2：藁の写真 */
.concept-block--2 .concept-image img {
  width: 95%;
  position: relative;
  top: 80px;    /* 少しだけ上げる */
  margin: 0 auto;
}

/* コンセプト 3：デフォルトサイズ */
.concept-block--3 .concept-image img {
  width: 120%;
  position: relative;
  top: -60px;    /* 少しだけ上げる */
  margin: 0 auto;
}

/* 余白調整（上に上げた分だけ余白も確保） */
.concept-block--1 { margin-bottom: 100px; }
.concept-block--2 { margin-bottom: 100px; }
.concept-block--3 { margin-bottom: 0px; }


/* スマホではリセット */
@media (max-width: 767px) {
  .concept-block--1 .concept-image img {
    width: 100%;
    top: 0;
  }
}
@media (max-width: 767px) {
  .concept-block--2 .concept-image img,
  .concept-block--3 .concept-image img {
    width: 105%;
    top: 0;
  }
}

/* SP：concept写真を少し大きく（はみ出しOK版） */
@media (max-width: 767px){
  .concept-image img{
    width: 110%;
    max-width: none;     /* ← ここ大事（103%の頭打ち回避） */
    margin-left: -5%;    /* 左右均等にはみ出させる */
  }
}



/* PCでは横並び */
@media (min-width: 768px) {
  .concept-block {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
 .concept-block.reverse{
    flex-direction: row-reverse;  /* 写真｜テキスト */
  }
}
/* 小見出し画像の余白を整える */
.subheading-img{
   margin:0 0 40px; 
  text-align:center; 
}
.subheading-img img{ 
  display:block; 
  height:auto; 
  max-width: 65%; 
}


/* ーーーーーーABOUTセクションーーーーーーーーー */
.section-about {
  background-color: #F1EFEC;  /* アイボリー系（雰囲気に合わせて調整OK） */
  padding: 72px 0 50px;     /* 120/160 → SPでは軽めに */
}

/* 中央寄せ */
.section-about .container {
  width:min(96%, 900px);
  margin: 0 auto;
  text-align: center;
}

/* 段落 */
.about-text p {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;        /* 追加：少しだけ小さく */
  line-height: 1.9;
  letter-spacing: .02em;  /* 0.03 → 0.02 に */
  color: #333;
  margin: 0 0 1.1em;      /* 1.5em → 下だけ1.1em に */
  text-wrap: pretty;      /* 追加：折返しを上品に */
  line-break: strict;     /* 追加：禁則を少し厳しめに */
}

.about-text .lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;         /* Bold */
  font-size: 20px;          /* フォントサイズ */
  letter-spacing: .02em;      /* 文字間隔0% */
  line-height: 1.7;         /* 行間（自動っぽい自然さ） */
  color: #1F4D3A;           /* 深緑など落ち着いた色にしたければここで調整 */
  margin: 20px 0 12px;      /* 上下にゆとり（好みで調整OK） */
  text-align: center;       /* センター寄せにするならこの1行を追加 */
}
/* 本文の箱を中央配置、文字は左揃えで読みやすく */
.section-about .about-text{
  max-width: 36em;    /* 読み幅を最適化 */
  margin: 0 auto;     /* 箱は中央 */
  text-align: center;   /* テキストは左揃え */
  padding: 0 8px;     /* 句読点落ち対策の逃がし */
}



/* 店主紹介ブロック */
.about-owner {
  margin-top: 100px;
}

.about-photo img {
  width: 70%;
  height: auto;
  border-radius: 0; /* 角を丸めない */
  margin: 70px auto 70px;
  display: block;
}

/* 店主：本文ラッパーを細い中央コラムに */
.about-profile1{
  max-width: 34em;      /* Storyと同じ細い列幅 */
  margin: 0 auto;       /* ブロック中央配置 */
  text-align: center;   /* 折返しも中央開始 */
  line-height: 1.9;       /* 既存値を維持（Storyと同じ雰囲気） */
  color: #333;
  padding: 0 8px;       /* 句読点落ち対策の逃がし */
}
/* 店主：段落の文字組み（Storyと同等） */
.about-profile1 p{
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .02em;
  margin: 0 0 1.4em;
}


/* ABOUTセクションタイトルimg中央寄せ */
.section-about .heading-img{
  text-align: center;
  margin: 0 auto 0px;
}
/* 画像自体も中央へ */
.section-about .heading-img img{
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 420px; /* 必要ならサイズ調整 */
}
.section-about .subheading-img {
  text-align: center;
  margin: 30% auto 80px;
}
.section-about .subheading-img img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 400px;
}
.taisetu-list li{
 font-size: 14px;

}

/* ーーーーーー経歴・資格など（右揃え＆読みやすい整列） */
/* ーーーーーープロフィール表だけは左寄せに戻す */
.about-profile2,
.about-profile2 p,
.about-profile2 .text{
  text-align: left;
}
.about-profile2{
  max-width: 900px;
  margin: 40px auto 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  line-height: 1.9;
  color: #333;
}

.about-profile2 p{
  display: grid;
  grid-template-columns: 11.5em 1fr; /* 左：年/項目 幅、右：本文 */
  column-gap: 2.6em;                  /* 年と本文の間隔 */
  align-items: start;
  margin: 0 0 .7em;
}

.about-profile2 .year{
  justify-self: end;                 /* 右端でピタッと揃える */
  white-space: nowrap;               /* 折り返さない */
  font-weight: 500;
  font-variant-numeric: tabular-nums;/* 数字幅を揃えてズレ防止 */
}

.about-profile2 .text{
  white-space: pre-line;             /* 改行をそのまま反映 */
  text-indent: 0;
}

/* スマホで少し詰める */
@media (max-width: 600px){
  .about-profile2 p{
    grid-template-columns: 9.5em 1fr;
    column-gap: .6em;
  }
}
/* =========================
   About プロフィール2（画像＋年表）
   カンプ寄せ：左に大きめ写真、右に年表2カラム
   ========================= */

/* まずは縦→横の基本レイアウト */
.about-block{
  display:flex;
  flex-direction:column;   /* SPは縦積み */
  gap:28px;
}

/* PCで横並び（左：写真 / 右：テキスト） */
@media (min-width: 900px){
  .about-block{
    flex-direction: row;    /* row-reverseにしていたら row に変更 */
    align-items: flex-start;
    gap: 64px;              /* カラム間の余白（カンプ広め） */
  }
}
/* === 経歴：SPは 年→本文 の縦積み === */
@media (max-width: 768px){
  .about-profile2{
    max-width: 36em;        /* 読み幅を絞る */
    margin: 24px auto 0;
    padding: 0 8px;         /* 句読点落ち対策の逃がし */
  }
  .about-profile2 p{
    display: block;         /* gridを解除して縦積み */
    margin: 0 0 1.1em;      /* 項目間の呼吸 */
  }
  .about-profile2 .year{
    display: block;         /* 1行上に出す */
    font-weight: 700;
    font-size: 14px;
    line-height: 1.8;
    white-space: normal;    /* 長い年号でも折返し可 */
    text-align: left;       /* 読みやすく左寄せ */
    margin: 0 0 .25em;
    justify-self: auto;     /* 右寄せ指定を打ち消し */
  }
  .about-profile2 .text{
    display: block;         /* 本文は次の行 */
    line-height: 1.9;
    white-space: pre-line;  /* 改行は活かす */
  }
}


/* ========= SERVICEセクション ========= */
/* SERVICE セクション全体をブルーに */
#service {
  background-color: #e6f3f4;      /* コンセプトと同じブルー */
  padding: clamp(36px, 5vw, 72px) 16px; /* 上下の余白はpaddingで管理 */
  margin-top: 0;                   /* 上の余白をゼロに */
  border-top: 0;                   /* 1pxの縁消し保険 */
}

/* 直前のAboutが余白をmarginで持っている場合はゼロにする（任意） */
.section-about:last-of-type { margin-bottom: 0; }  /* About側にこのクラスがあれば有効 */

/* 見出し画像の余白調整（青背景上に乗せる） */
.heading-img { 
  margin: 0 0 clamp(16px, 3vw, 28px); 
  text-align: center; 
}
.heading-img img { 
  width: min(780px, 65%); 
  height: auto; 
  display: inline-block; }

/* ── SERVICE グリッド統一：崩れない列切替 ── */
/* SP：常に2列 */
.service-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;               /* お好みで 6〜12px */
}

/* セクション左右の余白も少しだけ詰める（3列を入れやすく） */
#service{ padding-inline: 8px; }


  /* ===== Service Card ===== */
.service-card {
  width: 100%;
  background: #fff;
  border-radius: 8px; /* ←ほんの少しだけ角丸 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* ←影控えめ */
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  display: flex;   
  flex-direction: column;          
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
}

/* 画像部分 */
.service-card .card-img img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}

/* 本文 */
.service-card .card-body {
  padding: 12px 14px;
  gap: 6px;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.service-card .card-title {
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  line-height: 1.3;      /* 行間をやや詰めて塊感を出す */
  letter-spacing: .02em;  /* ほんの少しだけ字間 */
  text-wrap: balance;     /* 折れ方を整える（対応ブラウザ） */
  color: #2F4F3C; /* 深緑 */
  margin-bottom: 10px;
  margin-top: 5px;
}

.service-card .card-text {
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
  margin-top: 0px;
}

/* ボタン */
.service-card .card-btn {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;                    /* 小さめ */
  line-height: 1;                     /* 縦の無駄をなくす */
  white-space: nowrap;                /* 1行固定（折返し禁止） */
  background-color: #E0B478; /* 既存サイトのボタン色 */
  background-color: rgba(224,180,120,0.72); /* ← #E0B478 を透過に */
  color: #fff;
  border-radius: 999px; /* ピル型 */
  text-decoration: none;
  font-weight: normal;
  transition: transform 0.25s ease, filter 0.25s ease; /* ← filterに変更 */
  /* transition: background-color 0.3s ease, transform 0.2s ease; */
  margin-top: auto;             /* ← これで下に張り付く */
  align-self: center;
  filter: brightness(1); /* ← 追加（通常明るさ） */
}

.service-card .card-btn:hover {
  filter: brightness(1.1); /* ← 明るく変化（暗くならない） */
  transform: scale(1.05);  /* ← 少し拡大して柔らかく */
  /* background-color: #c19a58;
  transform: translateY(-1px); */
}

/* ===== オープン予定 見出し：わたしがこの場所を作った理由 と同じ字体 ===== */

.section-cafe {
  background-color: #F1EFEC;  /* アイボリー系（雰囲気に合わせて調整OK） */
  padding: 72px 0 50px;     /* 120/160 → SPでは軽めに */
}

/* 中央寄せ */
.section-cafe .container {
  width:min(92%, 900px);
  margin: 0 auto;
  text-align: center;
}


.cafe-heading {
  font-family: "Shippori Mincho", serif;  /* 同じフォント */
  font-weight: 700;                       /* 太めで力強く */
  color: #325c52;                         /* 深緑を統一 */
  font-size:  18px;    /* 大きめでゆとり */
  letter-spacing: 0.06em;                 /* 少し広め */
  line-height: 1.4;
  margin-bottom: 20px;
  margin-top: 30px;
  display: inline-block;
  border-bottom: 2px solid #325c52;       /* 下線で締める（同系色） */
  padding-bottom: 6px;
  text-align: center;
}

/* 「只今、建設開業準備中！！」 */
.cafe-text .lead {
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 22px);
  color: #325c52; /* 「私がここを作った理由」と同系の深緑 */
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

/* 「健康笑御飯」 */
.cafe-text p:nth-of-type(2) {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 20px;
  color: #2a3f37;
}

/* CAFE（SP最小オーバーライド：配置だけ整える） */
.section-cafe .cafe-text{
  max-width: 34em; 
  margin: 0 auto; 
  text-align: center; 
  padding: 0 8px;
}
.section-cafe .cafe-text p{ 
  font-size: 14px; 
  line-height: 1.9; 
  margin: 0 0 1.1em; 
}
.section-cafe .cafe-photo img{ 
  width: 100%; 
  height: auto; 
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
 }

/* ===== NEWS（Instagram & Blog）PC ===== */

/* 背景と全体余白 */
.section-news{
  background:#e6f3f4;                     /* SERVICEと同系の淡いブルー */
  padding: 48px 12px;
  text-align:center;
}
.section-news .container{
  width:min(90%,900px);
  margin:0 auto;
}

/* セクション内のパネル（共通） */
.news-panel{
  background:rgba(255,255,255,.65);
  border-radius:10px;
  padding: 24px 30px;
  margin: 24px auto;
  box-shadow:0 6px 30px rgba(0,0,0,.06);
}


/* 「もっと見る」ボタン（画像） */
.news-more{ 
  margin-top: 30px; 
}
.news-more img{
  display:inline-block;
  width: 240px;        /* 目立ちすぎない控えめサイズ */
  height:auto;
  max-width:100%;
}
/* NEWS：もっと見るボタン hover */
.news-more img {
  transition: transform .4s ease, filter .4s ease;
}

.news-more a:hover img {
  transform: scale(1.05);       /* ふわっと拡大 */
  filter: brightness(1.15);     /* 少し明るく */
}

/* 視覚的に隠す（スクリーンリーダーには読ませる） */
.subheading, .sr-only{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =======================
   ACCESS / CONTACT  PC
   ======================= */
/* ========== ACCESS / CONTACT : SP ========== */
.section-access{
  background-color:#F1EFEC;
  padding:32px 0 40px;
}
.section-access .container{
  width:min(92%, 680px);
  margin:0 auto;
  text-align:center;
}

/* 見出し下の地図画像 */
.section-access .access-map{ text-align:center; }
.section-access .access-map img{
  display:block;
  width:100%;
  height:auto;
  max-width:700px;
  margin:40px auto 24px;
}

/* 左ブロックの横幅と寄せ */
.section-access .access-info,
.section-access .parking-text,
.section-access .access-note{
  max-width:34em;
  margin:40px auto 20px;
  text-align:left;
  padding:0 8px;
  font-size:14px;
  line-height:1.2;
}
.section-access .access-note{
  max-width:34em;
  margin:40px auto 20px;
  text-align:left;
  padding:0 8px;
  font-size:11px;
  line-height:1.2;
}


/* 住所/TEL/FAX/MAIL：dl を2列グリッド化 */
.section-access .contact-list{
  display:grid;
  grid-template-columns: 4.5em 1fr;   /* ラベル / 本文 */
  row-gap:.5rem;
  column-gap:.25rem;
  margin:0;
  text-align:left;
}
.section-access .contact-list dt,
.section-access .contact-list dd{
  margin:0;
  padding:0;
  font-size:14px;
  line-height:1.7;
}
.section-access .contact-list dt{
  font-weight: 400;              /* ラベルを少し強調 */
  color:#223;                   /* 読みやすい濃色 */
  align-self:start;
}
.section-access .contact-list dd a[href^="tel"],
.section-access .contact-list dd a[href^="mailto"]{
  color:inherit;
  text-decoration:none;
  overflow-wrap: anywhere;
}

/* フッターメモ */
.section-access .access-note{
  text-align:center;
  color:#2F4F3C;
}


a[href^="tel"],
a[href^="mailto"] {
  color: inherit;
  text-decoration: none;
}

/* 駐車場 Googleマップリンク（ボタン風） */
.parking-map-link {
  margin-top: 14px;
}

.parking-map-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 22px;
  border-radius: 999px;

  background: rgba(224, 180, 120, 0.25);
  color: #2f4f3c;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 15px;
  text-decoration: none;

  transition: all 0.3s ease;

  /* ★ これが重要（SPで押せなくなる事故防止） */
  position: relative;
  z-index: 10;
}

.parking-map-link a:hover {
  background: rgba(224, 180, 120, 0.45);
  transform: translateY(-2px);
}


/* =======================
   FOOTER（共通）
   ======================= */
.site-footer {
  background: #8a898a99;      /* ← 好みで変更OK：例 #9A9999 or #A6A5A5 */
  color: #fff;              /* 文字色を白に */
  text-align: center;
  padding: 48px 0; /* 上下余白 */
}
/* FOOTER：ナビを横並び＋区切りバー */
.site-footer .footer-nav ul{
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
  gap: 16px;     /* 文字間の余白 */
  padding:0;
  margin: 0 0 28px;/* 下のアイコンとの間 */
  flex-wrap: wrap;
}
.site-footer .footer-nav a{
  font-family: "Shippori Mincho", "しっぽり明朝", serif;
  font-weight: 400;
  color:#fff;                      /* 白文字 */
  text-decoration:none;            /* 下線消す */
  font-size: 11px;
  letter-spacing:.05em;
}

/* | 区切り（自動で挿入） */
.site-footer .footer-nav li+li::before{
  content:"|";
  color: rgba(255,255,255,.8);
  margin-right: 12px;
}
/* FOOTER：SNSアイコン */
.site-footer .footer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px; /* アイコンの間隔 */
  margin-bottom: 36px;
}
.site-footer .footer-sns img {
  width: 28px;
  height: auto;
  transition: opacity 0.3s;
}

.site-footer .footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1px;
  background:#fff;
  transition:width .3s ease;
}

.site-footer .footer-nav a:hover::after{
  width:100%;
}



.site-footer .footer-sns a:hover img {
  opacity: 0.7;
}

/* FOOTER：コピーライト */
.site-footer .copyright{
  display:block;
  margin-top: 28px;
  font-family: "Shippori Mincho", "しっぽり明朝", serif;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,.8);
}


/* =======見出し/concept/about/service/news/ */
/* =======CONCEPT タイトル（SP専用） */
#title1{
  margin: 24px 0 70px;       /* 余白だけ調整 */
}
#title1 img{
  width: 150px;    /* 220px上限、狭い画面で自動縮小 */
  height: auto;
}

/* ABOUT タイトル */
#title2{
  text-align: center;        /* 中央寄せ */
  margin: 0 0 16px;     /* 余白だけ管理 */
}
#title2 img{
  width: 110px;  /* 端末幅に応じて可変／はみ出し防止 */
  height: auto;
  text-align: center;
}

#title3{
  text-align: center;        /* 中央寄せ */
  margin: 20px 0 50px;     /* 余白だけ管理 */
}
#title3 img{
  width: 120px;  /* 端末幅に応じて可変／はみ出し防止 */
  height: auto;
  text-align: center;
}

#title4{
  text-align: center;        /* 中央寄せ */
  margin: 0 0 50px;     /* 余白だけ管理 */
}
#title4 img{
  width: 180px;  /* 端末幅に応じて可変／はみ出し防止 */
  height: auto;
  text-align: center;
}

#title5{
  text-align: center;        /* 中央寄せ */
  margin: 45px 0 50px;     /* 余白だけ管理 */
}
#title5 img{
  width: 220px;  /* 端末幅に応じて可変／はみ出し防止 */
  height: auto;
  text-align: center;
}


/* 小見出し/オレンジ下線 */
/* ヘルスケアステーションゆるりがもり */
#subtitle1{
  margin: 14px 0 35px;        /* 上下の余白（下は下線との距離） */
}
#subtitle1 img{
  width: 200px;  /* 端末に応じて180〜240pxで可変 */
  height: auto;
}

/* 名前の由来 */
#subtitle2{
  text-align: left;      /* 左寄せに統一 */
  margin: 20px 0 35px;   /* 上下の余白だけ整える */
}
#subtitle2 img{
  display: block;        /* 左端にピタッと */
  width: 160px;  /* 端末幅に応じて可変（上限やや+α） */
  height: auto;
  margin-left: 0;
  /* 微調整したい場合だけ有効化（左右） */
  /* transform: translateX(0); */
}
/* 大切にしていること */
#subtitle3{
  text-align: left;        /* 左寄せに統一 */
  margin: 20px 0 35px;     /* 見出しの上下余白 */
}
#subtitle3 img{
  display: block;          /* 左端にピタッと */
  width: 200px; /* 可変：小さすぎ/大きすぎ防止 */
  height: auto;
  margin-left: 0;
}
/* story */
#subtitle4{
  text-align: center;         /* 中央 */
  margin: 60px 0 16px;        /* 上下の余白だけ整える */
}
#subtitle4 img{
  display: inline-block;      /* 親のtext-align:centerを効かせる */
  width: 100px; /* 端末に応じて可変。元の180pxを基準に前後で余裕 */
  height: auto;
  margin: 0;                  /* 余計なズレを防止 */
}
/* 店主 */
#subtitle5{ 
  text-align: center;
  margin: 60px 0 30px;        /* 上下の余白だけ整える */
 }
#subtitle5 img{ 
  display: inline-block; 
  width: 180px; 
  height: auto; 
  margin: 0; 
}

/* ゆるりがもりカフェ */
#subtitle6 {
  text-align: center;
  margin: 60px 0 30px;        /* 上下の余白だけ整える */
 }
#subtitle6 img{ 
  display: inline-block; 
  width: 230px; 
  height: auto; 
  margin: 0; 
}

/* Instagram */
#subtitle7 {
  text-align: center;
  margin: 20px 0 25px;        /* 上下の余白だけ整える */
 }
#subtitle7 img{ 
  display: inline-block; 
  width: 120px; 
  height: auto; 
  margin: 0; 
}

/* blog */
#subtitle8 {
  text-align: center;
  margin: 15px 0 20px;        /* 上下の余白だけ整える */
 }
#subtitle8 img{ 
  display: inline-block; 
  width: 75px; 
  height: auto; 
  margin: 0; 
}

/* ゆるりがもり住所 */
#subtitle9 img{
  width: 120px;
  display:block; 
  margin-left:0 
}
#subtitle9 {
  display: block;
  text-align: left;       /* 左寄せにしたい場合 */
  margin: 0 0 50px 0;     /* 下の余白だけ適度に（例：24px） */
  margin-left: 0;
}

/* 駐車場住所 */
#subtitle10 img{
  width: 125px;
  display:block;
  margin-left: 0;
  margin-top: 50px; 
}
#subtitle10{
  display:block;
  text-align:left;
  margin: 0 0 35px 0;     /* 下の余白だけ適度に（例：24px） */
  margin-left: 0; 
}


/* ===== Hamburger（SP最終版｜右スライド）===== */
@media (max-width: 768px){

  /* トグル（右上の三本線） */
  #nav-toggle{
    position: fixed;
    top: 25px;
    right: 24px;
    width: 45px;
    height: 20px;
    z-index: 1000;
    cursor: pointer;
  }
  /* Safari(iPhone)用安全領域補正 */
  @supports (padding: max(0px)) {
    #nav-toggle {
      right: calc(24px + env(safe-area-inset-right, 0px));
    }
  }

  #nav-toggle > div{
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%;
  }
  /* 三本線：太さ・右揃え・中央基点 */
  #nav-toggle span{
    position: absolute;
    right: 0; left: auto;
    width: 100%;
    height: 1.5px;
    background: #2F4F3C;
    transition: all .3s ease;
    transform-origin: center;
  }
  #nav-toggle span:nth-child(1){ top: 0; width: 100%; }
  #nav-toggle span:nth-child(2){ top: 50%; width: 72%; transform: translateY(-50%); }
  #nav-toggle span:nth-child(3){ bottom: 0; top: auto; width: 48%; }

  /* メニュー本体（右からスライド） */
  .main-nav{
    position: fixed;
    top: 0; 
    right: 0;
    height: 100dvh;
    width: 100%;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 990;
    box-sizing: border-box;
    background: #E6F3F4;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    /* 縦中央は使わない */
    padding: 70px 28px 365px;

  }
  .main-nav::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 160px;
  aspect-ratio: 1 / 1;
  background: url("../assets/images/common/kimono.rogo.png") no-repeat center / contain;
  opacity: .50;     /* 透かし具合：.10〜.20で調整 */
  z-index: 0;
  pointer-events: none;
}


  .main-nav ul{
    list-style: none !important;
    margin: 0; 
    padding: 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 23px;

    /* 文字を前面へ（背景ロゴより上に） */
    position: relative;
    z-index: 1;
  }

  .main-nav li{ list-style: none !important; }

  .main-nav a{
    color: #2F4F3C; 
    text-decoration: none;
    font-size: clamp(18px, 5.5vw, 26px);
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.9;     
  }

  /* 開いた状態（body.openを既存JSで切替） */
  body.open{ overflow: hidden; }
  body.open .main-nav{ transform: translateX(0); }

  /* 三本線 → X 変形 */
  body.open #nav-toggle span{
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  body.open #nav-toggle span:nth-child(1){ width: 100%; transform: translateY(-50%) rotate(35deg); }
  body.open #nav-toggle span:nth-child(2){ opacity: 0; }
  body.open #nav-toggle span:nth-child(3){ width: 100%; transform: translateY(-50%) rotate(-35deg); }
} /* ← ここで @media (max-width:768px) を閉じる */


/* --- ここから下はグローバル設定（SP/PC共通） --- */

/* ★ 不要だった全域指定は削除：.main-nav{ position: fixed; } は置かない */

/* ★ ::before は使わない（位置ズレ原因）: 完全無効化（保険） */
.main-nav::before{ content:none !important; display:none !important; }

/* ナビ下部のSNS/ブログリンク */
.nav-social{
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 0 20px;
}

.nav-social a{
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: #2F4F3C;
  text-decoration: none;
  padding: 8px 6px;
  opacity: .85;
}
.nav-social a:hover{ 
  opacity: 1; 
  text-decoration: underline;
}
.nav-social .sep{ color: rgba(47,79,60,.35); }

/* ==========ナビの中のインスタ・ブログテキスト設定＝＝＝ */
.nav-social .sep{ display:none; }

.nav-social{
  display:flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.nav-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.nav-social a::before{
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(47,79,60,.35);
}

/* ハンバーガー線の影 */
#nav-toggle span{
  filter: drop-shadow(0 0 2px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(0,0,0,.25));
}
body.open #nav-toggle span{ filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }

/* ── ミニマル版：色だけ自動切替 ── */
body:not(.open) #nav-toggle::before{ content:none !important; }
#nav-toggle span{ filter:none !important; }
#nav-toggle{ color:#2F4F3C; }
#nav-toggle span{ background: currentColor; height: 1.8px; }
body.on-hero #nav-toggle{ color:#fff; }
body.open #nav-toggle{ color:#2F4F3C !important; }
body.open #nav-toggle span{ filter:none !important; mix-blend-mode: normal !important; }

/* PCでは非表示にする場合（必要なら） */
@media (min-width: 769px){
  .main-nav { display: none !important; }
  .nav-social .nav-social{ display: none; }
}

/* PC幅では通常表示に戻す（別ブロック） */
@media (min-width: 769px){
  #nav-toggle{ display: none !important; }
  .main-nav{
    position: static;
    transform: none;
    height: auto;
    padding: 0;
    background: transparent; /* ← モバイルの背景ロゴは適用外になるが念のため透明に */
  }
  /* 念のため：PCでは疑似要素も出さない */
  .main-nav::before{ content: none !important; }
}

/* ==============================
   SP：NEWS／noteフィード
   ============================== */
@media screen and (max-width: 767px) {
  .note-feed {
    list-style: none;
    margin: 12px auto 35px;
    padding: 0;
    width: 100%;
    max-width: 90%;        /* 画面の9割くらいの幅に */
    text-align: left;      /* 文字は左寄せ */
    display: block;        /* PCのinline-blockを上書き */
  }

  .note-feed-item + .note-feed-item {
    margin-top: 8px;
  }

  .note-feed-link {
    display: block;        /* 縦並びにする（SP用） */
    text-decoration: none;
    color: inherit;
  }

  .note-feed-meta {
    font-size: 13px;
    color: #777;
    margin: 0;
  }

  .note-feed-title {
    font-size: 14px;
    line-height: 1.6;
    margin: 2px 0 0;       /* 日付の下に少しだけ余白 */
  }
}

/* SP：Instagram 説明テキスト */
@media screen and (max-width: 767px) {
  .news-insta-text {
    font-size: 14px;
    line-height: 2;
    text-align: center;
  }
}