/* ヘッダー */
.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 28px;
}
.brand img{ height:36px; display:block; } /* ロゴの高さはお好みで */
.main-nav a{
  color:#fff; text-decoration:none; margin-left:16px; font-size:20px;
}
/* ホバー時の下線アニメーション */
.main-nav a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding-bottom: 4px; /* 下線との間隔 */
  font-family: "Shippori Mincho", serif;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s ease;
}

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


/* HERO全体 */
.hero{
  position:relative; 
  height:100vh; 
  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: 70%;                   /* ← ここが重要 */
  padding: 24px 28px;             /* 余白は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{
  margin: 0;
  font-size: clamp(24px, 4vw, 42px);
  letter-spacing: .03em;
  font-weight: 700;
}
.hero-panel .subtitle{
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  opacity: .95;
}
.buttons{ gap: 16px; }
 /* テキストは白 */

.hero-panel h1{
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(30px, 4vw, 50px);
  margin:0 0 20px;
  letter-spacing: .03em;
}
.hero-panel .subtitle{
  font-size: clamp(14px, 2vw, 20px);
  margin:30px 0 28px;
  opacity:.95;
}

/* 画像ボタン */
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* ボタンの間隔 */
  margin-top: 80px; 
}

.btn-img img {
  height: 60px;      /* ボタン画像の高さ */
  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:12px 16px; }
  .brand img{ height:24px; }
  .hero-panel{ padding:32px 20px; width:min(92%, 680px); }
}

.lead-phrase { line-height: 1.9; }
.em-ch{
  font-weight: 700;
  font-size: 1.3em;     /* 少しだけ大きく */
}
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(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.concept-text p {
  line-height: 2;
  letter-spacing: 0.03em; /* 少し文字間も広げる */
  color: #333;
}

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

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

/* 見出し画像（CONCEPT） */
.heading-img {
  text-align: left;         
  margin-top: 80px;           /* 見出し上に余白 */
  margin-bottom: 80px;        /* 見出し下に余白 */
  width: 220px;
  height: auto;
}

/* コンセプトの本文 */
.concept-text p {
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 35px;
  margin-bottom: 1.5em;
  color: #333;
  letter-spacing: 0.03em;
}

/* 写真とテキスト */
.concept-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}
.concept-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* コンセプト 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: 100%;
  position: relative;
  top: 50px;    /* 少しだけ上げる */
  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: 200px; }
.concept-block--3 { margin-bottom: 100px; }

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

/* 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: 320px; }
 */

/* ABOUTセクション */
.section-about {
  background-color: #F1EFEC;  /* アイボリー系（雰囲気に合わせて調整OK） */
  padding-top: 120px;
  padding-bottom: 160px; /* ← 広めにとる！ */
  position: relative;    /* 念のため重なり防止 */
  z-index: 2;
}

/* 中央寄せ */
.section-about .container {
  /* width:min(92%, 900px); */
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background: transparent; /* 念のためリセット */
}

/* 段落 */
.about-text p {
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 2;
  color: #333;
  margin-bottom: 1.5em;
}

.about-text .lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;         /* Bold */
  font-size: 28px;          /* フォントサイズ */
  letter-spacing: 0em;      /* 文字間隔0% */
  line-height: 1.6;         /* 行間（自動っぽい自然さ） */
  color: #1F4D3A;           /* 深緑など落ち着いた色にしたければここで調整 */
  margin: 40px 0 20px;      /* 上下にゆとり（好みで調整OK） */
  text-align: center;       /* センター寄せにするならこの1行を追加 */
}

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

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

.about-profile {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.9;
  color: #333;
  text-align: left;
}

/* 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: 20% auto 80px;
}
.section-about .subheading-img img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 400px;
}

/* 経歴・資格など（右揃え＆読みやすい整列） */
/* プロフィール表だけは左寄せに戻す */
.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: 16px;
  line-height: 1.9;
  color: #333;
  margin-left: 30%;
}
.about-photo {
  margin-right: 40%;

}

.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;              /* カラム間の余白（カンプ広め） */
  }
}

/* ========= 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{ 
  text-align: center; 
  margin: clamp(80px, 8vw, 120px) auto clamp(90px, 6vw, 120px); 
}
.heading-img img { 
  width: min(720px, 90%); 
  height: auto; 
  display: inline-block; 
}

/* ===== Service Card ===== */
.service-card {
  width: clamp(260px, 28vw, 320px);
  background: #fff;
  border-radius: 8px; /* ←ほんの少しだけ角丸 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* ←影控えめ */
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.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: 180px;
  object-fit: cover;
}

/* 本文 */
.service-card .card-body {
  padding: 20px 16px 24px;
  text-align: center;
}

.service-card .card-title {
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  color: #2F4F3C; /* 深緑 */
  margin-bottom: 0px;
  margin-top: 0px;
}

.service-card .card-text {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
}

/* 本文ブロックも縦Flex：余白はここで消化 */
.service-card .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* タイトルと本文の間隔 */
  padding: 20px 16px 24px;      /* 既存値でOK（上書き可） */
}

/* ボタン */
.service-card .card-btn {
  display: inline-block;
  padding: 2px 28px;
  background-color: #E0B478; /* 既存サイトのボタン色 */
  background-color: rgba(224,180,120,0.72); /* ← #E0B478 を透過に */
  color: #fff;
  border-radius: 999px; /* ピル型 */
  text-decoration: none;
  font-weight: 600;
  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); */
}


/* 親：3列グリッドを強制＆中央に収める */
.section-service .container{
  width: min(1080px, 92%);
  margin: 0 auto;
}
/* カードを横並び・均等配置に */
.service-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 3列固定 */
  gap: clamp(24px, 2vw, 36px);
  row-gap: clamp(32px, 3vw, 56px);  /* ← これを追加：縦の間隔 */
  row-gap: 60px !important; 
  justify-items: center;   /* 各カードを列の中心に */
  align-items: stretch;    /* 高さを揃えられる土台 */
}

/* カードの幅指定をリセットしてグリッド幅に追従させる */
.service-card{
  width: auto;           /* ← 既存の width:clamp(...) を上書き */
  max-width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 画像の比率を固定して崩れを防ぐ（好みで調整可） */
.service-card .card-img{
  aspect-ratio: 16 / 10;   /* 例：横長 */
  overflow: hidden;
}
.service-card .card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 念のためテキストは横書きに固定（縦書き化の影響を遮断） */
.service-card .card-title,
.service-card .card-text{
  writing-mode: horizontal-tb;
}

#service { padding-bottom: 180px; }
 
/* ===== SERVICE: 最終ミニマム ===== */

/* 1) グリッド定義を1本に統合（PC3列）＋縦の間隔を広めに */
.service-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: clamp(24px, 2vw, 36px);
  row-gap: clamp(32px, 3vw, 56px);
  justify-items: center;
  align-items: start;
}

/* 2) カードの実サイズ上限（あなたの指定：400px） */
.service-card{
  width: auto;
  max-width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3) セクション下に余白（ふんわりの逃げ場） */
#service{ padding-bottom: clamp(120px, 10vw, 200px); }

/* 4) カードだけ“ふんわり” */
.service-card.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.service-card.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* === SERVICE：769〜979pxは常に3列（最小）=== */
@media (min-width: 769px) and (max-width: 979px){
  #service{ padding-inline: 8px; }  /* 3列が入りやすい余白 */
  .service-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* はみ出し保険（固定幅をもたせない） */
  .service-card{ width: 100%; max-width: 100%; }
  .service-card *{ min-width: 0; } /* 長い語でのはみ出し抑止 */
}

/* ===== オープン予定セクション（PC） ===== */

.section-cafe {
  background-color: #F1EFEC; /* 背景グレージュ */
  padding-top: 120px;
  padding-bottom: 100px;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* コンテナ幅：ABOUTと同じ */
.section-cafe .container {
  width: min(92%, 900px);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
}
/* ===== オープン予定セクション 見出し画像 ===== */
.section-cafe .heading-img {
  text-align: center;
  margin: 0 auto 0px;
}

/* ===== オープン予定 見出し：わたしがこの場所を作った理由 と同じ字体 ===== */
.cafe-heading {
  font-family: "Shippori Mincho", serif;  /* 同じフォント */
  font-weight: 700;                       /* 太めで力強く */
  color: #325c52;                         /* 深緑を統一 */
  font-size: clamp(32px, 3.5vw, 44px);    /* 大きめでゆとり */
  letter-spacing: 0.06em;                 /* 少し広め */
  line-height: 1.4;
  margin-bottom: clamp(20px, 6vw, 0px);
  margin-top: 25px;
  display: inline-block;
  border-bottom: 2px solid #325c52;       /* 下線で締める（同系色） */
  padding-bottom: 6px;
}

/* サブ見出し（ゆるりがもりカフェ） */
.section-cafe .subheading-img {
  text-align: center;
  margin: 15% 80px;
}
.section-cafe .subheading-img img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 400px; /* ABOUTと同じ幅 */
}

/* テキスト部分 */
.cafe-text {
  max-width: 680px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  font-size: 1rem;
  line-height: 2;
  color: #333;
}
.cafe-text .lead {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
/* 「只今、建設開業準備中！！」 */
.cafe-text .lead {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  color: #325c52; /* 「私がここを作った理由」と同系の深緑 */
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

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

/* 写真部分 */
.cafe-photo img {
  margin-top: clamp(60px, 8vw, 100px); /* ← 上にゆとりを追加 */
  margin-bottom: clamp(60px, 8vw, 100px); /* ← 下にゆとりを追加 */

  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}



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

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

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

/* ── 見出し ───────────────────────────── */
/* SEO用テキスト見出しを視覚的に隠す（読み上げOK） */
.subheading{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
}

/* デザイン用サブ見出し画像（小さめ） */
.subheading-img{
  margin:0 auto clamp(28px,4vw,48px);
}
.subheading-img img{
  display:inline-block;
  width: clamp(200px,18vw,320px);
  height:auto;
  max-width:100%;
}

/* メイン見出しロゴ（NEWS / お知らせ） */
.section-news .heading-img{
  text-align:center;
  margin:0 auto clamp(30px,4px,80px);
}
.section-news .heading-img img{
  display:inline-block;
  width: clamp(320px,28vw,560px);
  height:auto;
  max-width:100%;
}


/* Blog/Note 埋め込み領域 */
.blog-wrapper{
  width:min(900px,92%);
  margin:0 auto;
}

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

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

.news-insta-text {
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}


/* =======================
   ACCESS / CONTACT  PC
   ======================= */

.section-access .container {
  width: min(92%, 1080px);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) 0;
}
.access-map img{
  width: 500px;
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}
/* ACCESS：駐車場写真を中央配置＆横幅にフィット */
.section-access .access-map{
  text-align: center;              /* ラッパー中央寄せ */
}
.section-access .access-map img{
  display: block;
  margin: 60px auto;               /* 左右オートで中央 */
  max-width: min(92%, 700px);      /* はみ出し防止 */
  height: auto;
}

/* 住所/TEL/FAX/MAILの行も左寄せ */
.section-access .contact-list,
.section-access .contact-list dt,
.section-access .contact-list dd{
  text-align: left;
}
.section-access .contact-list{
  display: grid;
  grid-template-columns: 80px 1fr; /* 左:ラベル 右:内容 */
  align-items: start;
  column-gap: 16px;
  margin-bottom: 8px;
}
.section-access .contact-list dt{
  font-weight: 600;
}
.section-access .contact-list dd{
  margin: 0;
  line-height: 1.8;
}
/* ACCESS：左側ブロックの内側余白（全体を少し右へ） */
.section-access .access-info{
  width: clamp(420px, 50%, 600px); /* 横幅を固定〜中間くらい */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* 駐車場の住所を、右側の“本文列”にそろえる */
.section-access .parking-text{
  width: clamp(420px, 50%, 600px); /* 横幅を固定〜中間くらい */
  /* margin-left: auto; */
  margin-right: auto;
  text-align: left;
}
.section-access .access-note {
  color: #2F4F3C; /* ゆるりがもりの深緑に合わせる */
  text-align: center;
  line-height: 1.7;
  font-size: clamp(20px, 1.6vw, 26px); /* ←ここ追加 */
}

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

.parking-map-link a{
  display:inline-block;
  position:relative;
  z-index:10;
  text-decoration:underline;
}
/* 駐車場 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;
}

.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: clamp(60px, 8vw, 100px) 0; /* 上下余白 */
}
/* FOOTER：ナビを横並び＋区切りバー */
.site-footer .footer-nav ul{
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
  gap: clamp(24px, 4vw, 48px);     /* 文字間の余白 */
  padding:0;
  margin: 0 0 clamp(28px,5vw,56px);/* 下のアイコンとの間 */
}
.site-footer .footer-nav a{
  font-family: "Shippori Mincho", "しっぽり明朝", serif;
  font-weight: 400;
  color:#fff;                      /* 白文字 */
  text-decoration:none;            /* 下線消す */
  font-size: clamp(18px, 1.8vw, 28px);
  letter-spacing:.05em;
}

/* | 区切り（自動で挿入） */
.site-footer .footer-nav li+li::before{
  content:"|";
  color: rgba(255,255,255,.8);
  margin-right: clamp(16px,2.5vw,24px);
}
/* FOOTER：SNSアイコン */
.site-footer .footer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 40px); /* アイコンの間隔 */
  margin-bottom: clamp(40px, 6vw, 72px);
}
/* FOOTER：ナビ hover */
.site-footer .footer-nav a{
  position: relative;
  color:#fff;
  text-decoration:none;
  font-family: "Shippori Mincho", serif;
  letter-spacing:.05em;
  font-size: clamp(18px, 1.8vw, 28px);
}

.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 img {
  width: clamp(42px, 4vw, 64px);
  height: auto;
  transition: opacity 0.3s;
}

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

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



/* 見出し/concept/about/service/news/ */
#title1{
  width: 220px;
  margin-left: 0;
  margin-bottom: 160px;
}
#title2{
  width: 200px;
}
#title3{
  width: 220px;
  margin-bottom: 170px;
}
#title4{
  width: 290px;
  margin-top: 40px;
  margin-bottom: 175px;

}
#title5{
  width: 400px;
  margin-top: 70px;
  margin-bottom: 150px;

}

/* 小見出し/オレンジ下線 */
/* ヘルスケアステーションゆるりがもり */
#subtitle1 img{
  width: 280px;
  margin-left: 0;
}
/* 名前の由来 */
#subtitle2 img{
  width: 200px;
  margin-bottom: 20px;
}
/* 大切にしていること */
#subtitle3 img{
  width: 250px;
}
/* story */
#subtitle4 img{
  width: 180px;
}
/* 店主 */
#subtitle5 img{
  width: 240px;
}
/* ゆるりがもりカフェ */
#subtitle6 img{
  width: 400px;
}
/* Instagram */
#subtitle7 img{
  width: 170px;
  margin-top: -80px;
}
/* blog */
#subtitle8 img{
  width: 100px;
  margin-top: -80px;
}
/* ゆるりがもり住所 */
#subtitle9 img{
  width: 150px;
  display:block; 
  margin-left:0 
}
#subtitle9 {
  display: block;
  text-align: left;       /* 左寄せにしたい場合 */
  margin: 0 0 50px 0;     /* 下の余白だけ適度に（例：24px） */
  margin-left: 0;
}

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


/*----------- ヘッダー&ハンバーガー---------- */
/* PC：ハンバーガートグルは隠す */
#nav-toggle { display: none; }

/* ナビを横並び・均等余白に */
.main-nav ul{
  display: flex;
  align-items: center;
  gap: 36px;           /* メニュー間隔：お好みで */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 余白の重複を避ける（a に margin を持たせない） */
.main-nav a{
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  margin: 0;           /* ← ここを0に */
}

/* ヘッダー内の左右パディングはこのままでOK（お好みで微調整可） */
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
}

/* ロゴ高さは現状維持。必要なら微調整可 */
/* .brand img{ height: 28px; display: block; } */

/* ===== ADD: PC Guard for Section Backgrounds (769px〜) ===== */
@media (min-width: 769px){
  .section-cafe{
    background: #F1EFEC !important;  /* オープン予定 */
    position: relative; z-index: 0;   /* stacking contextを明示 */
  }
  .section-access{
    background: #F1EFEC !important;      /* ACCESS */
    position: relative; z-index: 0;
  }

  /* 念のため、HEROはPCでセクション外に影響を出さない */
  .hero{
    position: relative; z-index: 0;
  }
  .hero-dim, .hero-panel{
    z-index: 5;            /* HERO内だけで完結 */
  }
}

/* PCではSNSリンクを非表示 */
@media (min-width:769px){ 
  .nav-social{ display:none !important; }}

  /* ==============================
   NEWS：noteフィード
   ============================== */

/* ==============================
   NEWS：noteフィード
   ============================== */

.note-feed {
  list-style: none;
  margin: 10px auto 30px;
  padding: 0;
  text-align: left; 
  display: inline-block; /* ★ 中身の幅だけの「細い箱」にする */
}

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

.note-feed-link {
  display: inline-flex;          /* ★ 日付＋タイトルを横並びにする */
  justify-content: center;      /* ★ 真ん中寄せ（左寄せなら flex-start） */
  align-items: baseline;
  gap: 12px;                    /* 日付とタイトルの間 */
  text-decoration: none;
  color: inherit;
}

.note-feed-meta {
  font-size: 13px;
  color: #777;
  margin: 0;                    /* 下の余白を消す */
  white-space: nowrap;          /* 日付が折れないように */
}

.note-feed-title {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}