/* ==========================================================================
   全体のリセットと基本設定
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 上品な明朝体・セリフ体をベースに設定 */
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", "serif", sans-serif;
  color: #312a2a;
  line-height: 1.6;

  /* 背景画像の設定 */
  background-image: url("images/kabegami3.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ==========================================
   ヘッダー：ロゴとメニューを横並びにする
   ========================================== */
.header-innner {
  max-width: 1470px;
  margin: 0 auto;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 上基準の揃え */
}

/* ロゴの配置とサイズ調整 */
.logo {
  padding-left: 23px;
}

.logo img {
  padding-top: 3px;
  max-height: 198px;
  width: auto;
  display: block;
}

/* ==========================================
   ナビゲーションメニューの横並び
   ========================================== */
.site-nav {
  padding-top: 150px;
  padding-right: 55px;
}

.site-nav ul {
  display: flex;
  gap: 20px;
  /* メニュー間の余白 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: #312a2a;
  font-family: 'Times New Roman', serif;
  font-size: 27px;
  font-weight: 500;
  transition: color 0.3s;
}

.site-nav a:hover {
  color: #a88383;
}

/* ヘッダー全体の基本的な並び替え（必要に応じて調整してください） */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.site-nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

/* ヒーロー画像エリアの設定 */
.hero-section {
  position: relative;
  /* 子要素の配置の基準にする */
  width: 100%;
  height: 400px;
  /* 画像を表示したい高さに変えてください */
  background-image: url('images/hero.jpg');
  /* ヒーロー画像のパスを指定 */
  background-size: cover;
  background-position: center;
}

/* 画像の上に重ねる白いボックス */
.page-title-box {
  position: absolute;
  /* 親要素を基準に絶対配置 */
  right: 10%;
  /* 右端からの距離（デザインに合わせて調整） */
  bottom: 20px;
  /* 下端からの距離（デザインに合わせて調整） */
  background-color: #fff;
  /* 白い背景 */
  border: 1px solid #333;
  /* 枠線 */
  padding: 20px 60px;
  /* ボックス内の余白（上下 左右） */
}

/* テキストのスタイリング */
.page-title {
  margin: 0;
  font-size: 24px;
  font-family: serif;
  /* レイアウトに合わせた明朝・セリフ系フォント */
  color: #333;
  text-align: center;
}

/* ==========================================
   ヒーロー画像：画面横幅いっぱいに広げる
   ========================================== */
.hero.index {
  width: 100%;
  overflow: hidden;
}

.hero.index img {
  width: 100%;
  display: block;
  height: 605px;
  /* ★高さを好みの数値（例: 400px）に固定する */
  object-fit: cover;
  /* ★画像が縦横に潰れるのを防ぎ、綺麗に切り抜く設定 */
  display: block;
}

/* 画像の上に重ねる白いお知らせボックス */
.hero-info {
  position: absolute;
  bottom: -60px;
  right: 5%;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #312a2a;
  padding: 25px 35px;
  width: 420px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.hero-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   製品ページ（Products）専用の調整
   ========================================================================== */

/* 1. このページだけヒーロー画像の高さを縮める */
.products-page .hero.index img,
.consept-page .hero.index img {
  height: 380px;
  /* ★好みの画像高さに調整してください（例: 350px） */
  object-fit: cover;
  /* 画像が潰れるのを防ぐ設定 */
}

/* 2. このページだけ白い四角の位置と大きさを調整する */
.products-page .hero-info,
.consept-page .hero-info {
  bottom: 150px;
  /* ★【位置】マイナスを無くして画像の内側に配置 */
  right: 0%;
  /* ★【位置】右端からの距離 */
  width: 340px;
  /* ★【横幅】Productsの文字に合わせたスッキリしたサイズ */
  padding: 25px 15px;
  /* ★【内側の余白】上下 左右 */
}

.hero-info li {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 8px;
  color: #312a2a;
  white-space: nowrap;
}

.hero-info li span {
  display: inline-block;
  width: 90px;
  font-size: 14px;
  color: #736363;
}

.hero-info h2 {
  font-size: 23px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: normal;
  color: #312a2a;
}

.hero-info h2.page-title {
  font-size: 36px;
  /* ★【文字サイズ】お好みの大きさに指定 */
  margin-bottom: 0;
  /* ★下側のお知らせリストが無いので、余白を0にして中央に寄せます */
}

/* ==========================================================================
   各セクション共通のコンテナ（横幅のバランスを統一）
   ========================================================================== */
/* 変更後 */
.concept-section {
  max-width: 1000px;
  margin: 120px auto;
  padding: 0 20px;
}

.section-container {
  max-width: 1000px;
  margin: 140px auto 120px;
  /* 上の余白を180pxに広げ、下は120px、左右は中央寄せ */
  padding: 0 20px;
}

/* ==========================================================================
   各セクションタイトルの共通設定（下線と余白の調整）
   ========================================================================== */
/* ★ .section-title の後ろに 「, .section-title h2」を追加します */
.section-title,
.section-title h2 {
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", "serif", sans-serif;
  font-size: 42px;
  font-weight: normal;
  color: #312a2a;

  display: inline-block;
  position: relative;

  /* ↓ 文字と下線の距離（隙間）の調整 */
  padding-bottom: 5px;

  /* タイトル周りの余白 */
  margin-top: 80px;
  margin-bottom: 60px;
}


.double-border {
  width: 20%;
  /* 必要に応じて横幅を調整してください */
  height: 9px;
  /* 線の全体の高さ（隙間を含む） */
  border-top: 1.6px dashed #514848;
  /* 上側の破線（色や太さは自由に変更してください） */
  border-bottom: 1.6px solid #514848;
  /* 下側の直線 */
  margin-top: -70px;
  margin-bottom: 30px;
}

.concept-section {
  margin-top: 85px;
  /* 元の 120px から 200px に増やして下に下げます */
}

/* ==========================================
   Concept：左右交互のレイアウト（重なり位置・レイヤー完全調整版）
   ========================================== */
.concept-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 120px;
  /* ブロックごとの間隔 */
  position: relative;
  width: 100%;
}

/* ★1つ目の行（上画像がある行）を、2つ目の行より「上（手前）」に重ねる設定 */
.concept-row:not(.reverse) {
  z-index: 5;
  /* 2つ目の行（z-index: 1）よりも手前に表示させる */
}

/* 2つ目のブロック（左画像 / 右テキスト）の設定 */
.concept-row.reverse {
  flex-direction: row-reverse;
  z-index: 1;
  /* 1つ目の行の下に潜り込ませる */
}

/* テキストエリア：幅を45%に設定し、それぞれの画像の上に重ねる */
.concept-text {
  width: 45%;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 10;
  /* 各ブロック内で、写真よりも上にテキストを重ねる */
}

/* --- コンセプト内の文章（テキスト）のサイズ調整 --- */
.concept-text p {
  font-size: 24.7px;
  /* 元のサイズ（約16px）から20pxに大きくします */
  line-height: 2.0;
  /* 行間を少し広げて、ゆったりと読みやすくします */
  color: #312a2a;
  /* 文字色 */
  letter-spacing: 0.05em;
  /* 文字と文字の間隔をほんの少し広げて上品な印象に */
}


/* 画像エリア：幅を50%に固定 */
.concept-image {
  width: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* テキスト（10）よりは下、親のレイヤー関係を保つ */
}

/* 画像本体 */
.concept-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  /* 高級感のある柔らかな影 */
}

/* --- 1つ目のブロック（左テキスト / 右画像）：画像の【左下】を重ねる --- */
.concept-row:not(.reverse) .concept-text {
  padding-right: 20px;
}

.concept-row:not(.reverse) .concept-image {
  /* margin-leftを「-15%」に広げて、画像を左（テキスト側）へ大きく引き寄せます */
  margin-left: -15%;
  /* translateでさらに左（-40px）下（30px）に微調整して重ね合わせます */
  transform: translate(-10px, 80px);
}

/* --- 2つ目のブロック（左画像 / 右テキスト）：画像の【右上】を重ねる --- */
.concept-row.reverse .concept-text {
  padding-left: 118px;
  transform: translateY(-40px);
  /* ★文章のみを上に40px引き上げます */
}

.concept-row.reverse .concept-image {
  /* margin-rightを「-15%」に広げて、画像を右（テキスト側）へ大きく引き寄せます */
  margin-right: -15%;
  /* translateでさらに右（40px）上（-30px）に微調整して重ね合わせます */
  transform: translate(10px, -50px);
}

/* 画像自体のトリミングと影の装飾 */
.concept-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
  /* 境界が綺麗に見える柔らかな影 */
}

/* =====================================
   Service セクション
===================================== */
.service-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.service-item {
  flex: 1;
  text-align: center;
}

.service-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.service-item p {
  font-size: 18px;
  margin-top: 15px;
  color: #312a2a;
}

/* =====================================
   New Posts セクション
===================================== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  row-gap: 40px;
}

.post-item {
  display: flex;
  flex-direction: column;
}

.post-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.post-date {
  font-size: 13px;
  color: #736363;
  margin-bottom: 6px;
}

.post-item-title {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  color: #312a2a;
}

/* Moreボタン */
.more-btn-container {
  text-align: right;
  margin-top: 40px;
}

.more-btn {
  display: inline-block;
  background-color: #576e66;
  color: #fff;
  text-decoration: none;
  font-family: "Didot", serif;
  font-size: 16px;
  padding: 12px 35px;
  border-radius: 40px;
  transition: background-color 0.3s;

  /* ↓ これを追記（上側から内側に向けて薄い黒の影を落とす） */
  box-shadow: inset 0 0 10px rgba(50, 57, 54, 0.3);
}

.more-btn:hover {
  background-color: #41584e;
}

/* ==========================================================================
   商品一覧セクション（追加分）
   ========================================================================== */

/* カテゴリーごとのセクションの隙間 */
.product-category {
  margin-bottom: 135px;
}

/* カテゴリー見出し（中央揃え、上品な明朝体系） */
.category-title {
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", serif;
  font-size: 30px;
  font-weight: normal;
  text-align: center;
  color: #312a2a;
  margin-bottom: 40px;
}

/* 4カラムの横並びを作るグラッドレイアウト */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  /* 商品どうしの隙間 */
}

.product-item {
  text-align: center;
}

/* 商品画像の枠（比率を綺麗に保つ枠線） */
.product-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* 横長レイアウト枠の比率 */
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像が潰れずに収まる設定 */
  display: block;
}

/* 商品名テキスト */
.product-name {
  font-size: 18px;
  color: #312a2a;
  margin: 0;
}

/* クリック可能な画像にカーソルを合わせたら指マークにする */
.zoom-trigger {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.zoom-trigger:hover {
  opacity: 0.85;
  /* ホバー時に少し透明にする演出 */
}

/* モーダル背景（初期状態は非表示） */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  /* 他の要素より手前に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* 黒の半透明背景 */
  justify-content: center;
  align-items: center;
}

/* 拡大して表示される画像本体 */
.modal-content {
  max-width: 85%;
  max-height: 85%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
}

/* 閉じるボタン（右上） */
.modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

/* ポップアップ時のふんわり拡大アニメーション */
@keyframes zoomIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================
   商品ページ（Products）専用の二重線調整
   ========================================== */
.products-border {
  /* ① 商品ページだけは、下線を上に引き上げる必要がない（または弱める）ため、
     トップページの「margin-top: -45px;」を打ち消して「-10px」程度にリセットします */
  margin-top: -47px;

  /* ② 写真（商品グリッド）との間にちょうどいい隙間を作ります */
  margin-bottom: 60px;

  /* ③ 線の横幅を少し広げたい場合は、ここで上書き調整できます（お好みで） */
  width: 65%;

  /* ④ 線を中央寄せにする場合 */
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   お問い合わせボタン（下部エリア）
   ========================================== */
.contact-btn-wrap {
  text-align: center;
  margin: 128px 0 30px;
}

.contact-btn {
  display: inline-block;
  background-color: #576e66;
  color: #fff;
  text-decoration: none;
  padding: 18px 60px;
  font-size: 16px;
  border-radius: 40px;
  transition: all 0.3s;
  box-shadow: inset 0 0 10px rgba(50, 57, 54, 0.3);
}

.contact-btn:hover {
  background-color: #41584e;
  color: #fff;
}

/* ==========================================================================
   お問い合わせフォームエリア（テーブル）の装飾
   ========================================================================== */
/* 入力テーブル全体を白い四角で囲む設定 */
form table {
  width: 100%;
  max-width: 900px;
  /* プライバシーポリシーの横幅と統一 */
  margin: 40px auto;
  /* 上下に余白を作り、中央に配置 */
  border-collapse: collapse;
  /* 枠線の重なりを解消 */
  background-color: #ffffff;
  /* 背景色を白に設定 */
  border: 1px solid #dcd6d6;
  /* 外枠の線を薄いグレーに設定 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  /* ほんのり浮き上がる影を追加 */
}

/* 各セルの基本設定 */
form th,
form td {
  padding: 15px 20px;
  /* セル内の余白 */
  border: 1px solid #dcd6d6;
  /* セル同士の区切り線 */
}

/* 左側の見出し（th）にデモサイトのような色を付ける設定 */
form th {
  background-color: #576e66;
  /* デモサイトを意識した深みのあるグリーン */
  color: #ffffff;
  /* 文字を白にして読みやすくする */
  font-weight: normal;
  text-align: center;
  width: 25%;
  /* 左側見出しの横幅を固定（お好みで調整してください） */
  font-family: "Noto Serif JP", "serif";
  box-shadow: inset 0 0 15px rgba(50, 57, 54, 0.3);
}

/* 入力欄（input, textarea）の細かなデザイン調整 */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: sans-serif;
}

/* ==========================================================================
   お問い合わせページ：プライバシーポリシーエリアの装飾
   ========================================================================== */
.privacy-policy {
  background-color: #ffffff;
  /* 背景色を白に設定 */
  border: 1px solid #dcd6d6;
  /* 主張しすぎない薄いグレーの枠線 */

  padding: 40px;
  /* 四角の内側に十分な余白を設定 */
  margin: 50px auto;
  /* 上下の隙間を作り、中央に配置 */
  max-width: 900px;
  /* 横幅が広がりすぎないように制限 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  /* ほんのり浮き上がるような薄い影 */
  border-radius: 4px;
}

/* 四角の中の見出し（h3）の調整 */
.privacy-policy h3 {
  font-family: "Noto Serif JP", "serif";
  font-size: 18px;
  color: #312a2a;
  margin-top: 25px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #e0d9d9;
  /* 見出しの下に控えめな点線を追加 */
  padding-bottom: 8px;
}

/* 最初の見出しだけ上部の余白をなしにする */
.privacy-policy h3:first-of-type {
  margin-top: 0;
}

/* 四角の中の本文（p）の調整 */
.privacy-policy p {
  font-size: 14px;
  line-height: 1.8;
  color: #312a2a;

  margin-bottom: 25px;
}

/* 最後の本文だけ下部の余白をなしにする */
.privacy-policy p:last-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   お問い合わせページ：テキスト・フォーム全体
   ========================================================================== */
/* お問い合わせフォームがあるメインエリア（またはフォーム全体）を中央に寄せる */
form {
  max-width: 900px;
  /* テーブルやプライバシーポリシーの幅と統一 */
  margin: 0 auto 100px;
  /* 左右を中央寄せ（auto）にし、下部に余白を確保 */
  text-align: center;
  /* テキストやボタン、チェックボックスを中央寄せ */
}

/* フォーム上部にある見出しと説明文の中央寄せ・余白調整 */
body.products-page>h1,
body.products-page>p {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

body.products-page>h1 {
  margin-top: 60px;
  margin-bottom: 20px;
  font-family: "Noto Serif JP", "serif";
  font-size: 27px;
  color: #312a2a;
}

/* フォーム上部の説明文と注意書きのみを左寄せにする設定 */
body.products-page>p {
  text-align: left;
  /* 文字を左寄せにする */
  max-width: 900px;
  /* テーブルやプライバシーポリシーの幅（900px）と統一 */
  margin: 0 auto 20px;
  /* 左右中央にボックスを配置（auto）し、下部に余白を作る */
  font-size: 18px;
  line-height: 1.8;
  color: #312a2a;
}

/* 注意書き（※メールアドレス…）の調整 */
body.products-page>p small {
  font-size: 18px;
  color: #312a2a;
  display: block;
  /* ブロック要素にして、綺麗に改行が効くようにする */
  margin-top: 15px;
  /* 説明文との間に少し隙間を空ける */
}

/* ==========================================================================
   お問い合わせページ：注意文の赤色波線装飾
   ========================================================================= */

/* 修正したHTMLのspanタグ（※以降の文章）に対する指定 */
body.products-page>p small span {
  /* 下線を引く設定 */
  text-decoration: underline;

  /* 線の種類を「波線」にする設定 */
  text-decoration-style: wavy;

  /* 線の色を「赤色」にする設定 */
  text-decoration-color: #ad4a49;
  /* 目立ちすぎない上品な赤（カーマイン） */

  /* (補足) 文字色も少し赤みに寄せたい場合は以下を追記してください */
  color: #ad4a49;
}

/* --------------------------------------------------
   テーブルとプライバシーポリシー内の文字配置を左揃えに戻す
   （フォーム全体を中央寄せにした影響をリセットする）
   -------------------------------------------------- */
/* 入力欄があるセルのテキストは左揃えのままにする */
form td {
  text-align: left;
}

/* プライバシーポリシー内のテキストも左揃えのままにする */
.privacy-policy {
  text-align: left;
}

/* --------------------------------------------------
   送信エリア（同意チェック・ボタン）の調整
   -------------------------------------------------- */
.submit-area {
  margin-top: 40px;
  text-align: center;
}

/* 同意するチェックボックスの文字サイズ */
.submit-area label {
  font-size: 18px;
  color: #312a2a;
  cursor: pointer;
}

/* 送信ボタンの装飾（サイト内の他ボタンとトンマナを統一） */
.submit-area input[type="submit"] {
  background-color: #576e66;
  color: #ffffff;
  border: none;
  padding: 15px 80px;
  font-size: 16px;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: inset 0 0 10px rgba(50, 57, 54, 0.3);
  font-family: "Noto Serif JP", "serif";
}

.submit-area input[type="submit"]:hover {
  background-color: #41584e;
}

.contact-border {
  margin-top: -22px;
  margin-bottom: 20px;

  /* ② 写真（商品グリッド）との間にちょうどいい隙間を作ります */
  margin-bottom: 60px;

  /* ③ 線の横幅を少し広げたい場合は、ここで上書き調整できます（お好みで） */
  width: 30%;

  /* ④ 線を中央寄せにする場合 */
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   お問い合わせページの余白調整（隙間の確保）
   ========================================================================== */

/* 1. 見出しとお知らせ・注意事項の間の隙間 */
body.products-page>h1 {
  margin-top: 60px;
  margin-bottom: 20px;
  /* 元の 20px から 40px に増やして隙間を作ります */
}

/* 2. 赤字の注意事項と、その下にあるお問い合わせ欄（テーブル）の間の隙間 */
body.products-page>p {
  margin: 0 auto 50px;
  /* 下部マージンを 20px から 60px に広げてテーブルとの間に隙間を作ります */
}

/* 3. お問い合わせ欄（テーブル）とプライバシーポリシーの間の隙間 */
form table {
  margin-top: 40px;
  margin-bottom: 80px;
  /* テーブル下側の余白をしっかり広げ、プライバシーポリシーとの間に十分な隙間を作ります */
}

/* プライバシーポリシー自体の上の隙間を微調整（必要に応じて） */
.privacy-policy {
  margin-top: 80px;
  /* テーブルの下マージンと合わせて最適な位置に配置します */
  margin-bottom: 70px;
}

/* プライバシーポリシー冒頭の太字文章の下に隙間を作る */
.privacy-policy .privacy-lead {
  font-size: 18px;
  margin-bottom: 20px;
  /* ★ここでお好みの空き具合（20px〜40pxなど）に調整できます */
}

/* プライバシーポリシーの枠内タイトルの見た目 */
.privacy-policy h2 {
  font-family: "Noto Serif JP", "serif";
  font-size: 22px;
  text-align: center;
  /* 中央寄せにする */
  color: #312a2a;
  margin-bottom: 25px;
  /* 下の文章との間に余白を作る */
  padding-bottom: 10px;
  border-bottom: 1px solid #576e66;
  /* ブランドカラーの整えた線を入れるとおしゃれです */
}

/* ==========================================================================
   フッター（修正版）
   ========================================================================== */
.site-footer {
  display: flex;
  justify-content: space-between;
  /* 左右に振り分ける */
  align-items: center;
  /* 上下中央揃え（好みに応じて flex-start にしてもOK） */
  padding: 40px 10%;
  /* 左右に適度な余白を確保 */
  background-color: #546762;
  box-shadow: inset 0 0 15px rgba(50, 57, 54, 0.3);
  color: #fff;
}

/* 左側のテキストエリア */
.footer-info {
  width: 45%;
  text-align: left;
  /* テキストを左揃えにする */
}

.footer-info .footer-logo {
  font-family: "Didot", serif;
  font-size: 30px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.footer-info p {
  font-size: 18px;
  line-height: 1.8;
  margin-top: -23px;
  margin-bottom: 22px;
}

.footer-info .copyright {
  margin-top: 32px;
  margin-bottom: 0;
  font-size: 18px;
  opacity: 0.8;
}

/* 右側の地図を囲むコンテナ */
.map-container {
  position: relative;
  width: 45%;
  /* 横幅を全体の45%に（テキスト側とバランスを取る） */
  padding-top: 30%;
  /* ★縦幅をさらに縮小（高さを引き締める） */
  overflow: hidden;
}

/* iframeの設定 */
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   パララックス（3つのこだわり）セクションの設定（他ページへの干渉防止版）
   ========================================================================== */

/* --- パララックスセクションの基本設定（.concept-section から分離） --- */
.parallax-concept-section {
  width: 100%;
  /* 画面幅いっぱいに広げる */
  height: 500px;
  /* PCでのセクションの高さ（画像をしっかり見せるために固定） */
  display: flex;
  align-items: center;
  /* 縦方向の中央揃え */
  padding: 0 10%;
  /* 左右に余白を設けて端に寄りすぎないようにする */
  box-sizing: border-box;
  margin-top: 0;
  /* 隙間なく並べるために余白をゼロにする */
  margin-bottom: 0;

  /* 背景画像の設定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  /* ★背景画像をスクロール時に固定する */
}

/* --- 各セクションの背景画像 --- */
.bg-concept1 {
  background-image: url('images/suraido1.png');
  /* 01. 自然素材の背景画像 */
}

.bg-concept2 {
  background-image: url('images/suraido2.png');
  /* 02. 五感の背景画像 */
}

.bg-concept3 {
  background-image: url('images/suraido3.png');
  /* 03. 日常の背景画像 */
}

/* --- テキストボックスの左右配置の切り替え --- */
.left-align {
  justify-content: flex-start;
  /* 左寄せ */
}

.right-align {
  justify-content: flex-end;
  /* 右寄せ */
}

/* --- 白いテキストボックスの装飾 --- */
.text-box {
  background-color: rgba(255, 255, 255, 0.9);
  /* 少し後ろを透けさせる（不透明度90%） */
  padding: 40px;
  max-width: 500px;
  /* ボックスの最大横幅 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* 軽い影をつけて浮かび上がらせる */
  border-radius: 4px;
}

.text-box h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #312a2a;
  font-weight: bold;
}

.text-box p {
  font-size: 15px;
  line-height: 1.8;
  color: #312a2a;
  margin: 0;
}

/* ==========================================================================
   追加した導入＆結びメッセージの共通スタイル（白い四角ボックスの装飾）
   ========================================================================== */
.intro-concept,
.outro-concept {
  text-align: center;
  max-width: 850px;
  /* 読みやすいように文章の横幅を制限 */
  margin: 100px auto;
  /* 上下にゆったりとした余白を持たせ、中央配置にする */
  padding: 50px 40px;
  /* ★白いボックスの内側に余白を作る */

  /* ★白い半透明のボックスデザインを追加 */
  background-color: rgba(255, 255, 255, 0.85);
  /* パララックスと同じ90%の不透明度の白 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* ほんのりと浮かび上がる軽い影 */
  border-radius: 4px;
  /* 四隅をほんの少しだけ丸くして柔らかい印象に */
}

.intro-concept h2,
.outro-concept h2 {
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: normal;
  color: #312a2a;
  margin-top: 0;
  /* ★ボックス上部との間隔を綺麗に保つため上マージンをリセット */
  margin-bottom: 35px;
  letter-spacing: 0.1em;
}

.intro-text,
.outro-text {
  font-size: 18px;
  line-height: 2.2;
  /* 行間を広めに取って、ゆったりとした印象にする */
  color: #312a2a;
}

/* ==========================================================================
   「3つのこだわり」セクションタイトルの調整（中央揃え）
   ========================================================================== */
.parallax-section-title {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  background-color: transparent;
  /* 背景色を透明にする */
  margin: 0 auto;
}

.parallax-section-title h2 {
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: normal;
  color: #312a2a;
  display: inline-block;
  letter-spacing: 0.1em;
  position: relative;
  /* 左右の葉っぱの基準位置にします */
}

/* --- 左側の双葉（🌿） --- */
.parallax-section-title h2::before {
  content: "🌿";
  margin-right: 15px;
  /* 文字との隙間 */
  font-size: 0.85em;
  /* 文字より少し控えめなサイズに調整 */
  vertical-align: middle;
}

/* --- 右側の双葉（🌿） --- */
.parallax-section-title h2::after {
  content: "🌿";
  margin-left: 15px;
  /* 文字との隙間 */
  font-size: 0.9em;
  /* 文字より少し控えめなサイズに調整 */
  vertical-align: middle;
}

.parallax-section-title h2 {
  font-family: "Didot", "Bodoni MT", 'Times New Roman', "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: normal;
  color: #312a2a;
  display: inline-block;
  letter-spacing: 0.1em;
  position: relative;

  /* ↓ 上下の細い線の設定 */
  border-top: 1.7px solid #8ca07b;
  /* 上の線（くすみグリーン） */
  border-bottom: 1.7px solid #8ca07b;
  /* 下の線 */
  padding: 15px 30px;
  /* 線と文字の間の余白 */
}

/* ==========================================================================
   コンセプトページ専用：「3つのこだわり」タイトルの二重線調整（★非表示化）
   ========================================================================== */
.parallax-section-title .double-border {
  display: none;
  /* 二重線を画面から消します */
}

/* ==========================================================================
   コンセプトページ専用：結びエリアの二重線の調整
   ========================================================================== */
.consept-border {
  /* ① 重なってしまっている位置を修正し、見出しの下に余白を作ります */
  margin-top: -40.5px;
  /* 見出しとの隙間 */
  margin-bottom: 40px;
  /* 下の本文との隙間 */

  /* ② 線の横幅（長さ）を調整（30%に設定） */
  width: 71%;

  /* ③ 左右の余白を「auto」にして中央寄せにします */
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   コンセプトページ専用：「3つのこだわり」タイトルの二重線調整
   ========================================================================== */
.parallax-section-title .double-border {
  /* ① 文字の上に重なるのを防ぐため、引っ張り上げる設定を調整します */
  margin-top: 10px;
  /* 文字の下に適度な隙間（15px）を作ります */
  margin-bottom: 20px;
  /* 下の画像やセクションとの隙間 */

  /* ② 他の箇所の二重線と同じ「横幅30%」にそろえます */
  width: 40%;

  /* ③ 中央に配置します */
  margin-left: auto;
  margin-right: auto;
}

/*Topに戻る*/
/* Topに戻るボタン */
#page_top {
  position: fixed;
  bottom: 30px;
  /* 位置の調整 */
  right: 20px;
  /* 位置の調整 */
  z-index: 999;
  /* ★ここを追加！他のどの要素よりも最前面に表示させます */
}

#page_top a {
  display: inline-block;
  /* 余白や角丸を正しく適用させるため追加 */
  border-radius: 5px;
  /* ★お好みの丸み（例: 8px, 10px, 15pxなど）を指定 */
  color: #fff;
  font-size: 25px;
  background-color: #576e66;
  text-align: center;
  text-decoration: none;
  padding: 15px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   スクロールで浮き上がるアニメーション（fade-up）
   ========================================== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面内に入ったら発動するクラス */
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}


/* --- スマートフォン対応（タブレット以下） --- */
/* ==========================================
   ハンバーガーメニューの基本スタイル（PCでは非表示）
   ========================================== */
.hamburger {
  display: none;
  /* デフォルト（PC）では隠す */
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: fixed;
  top: 25px;
  right: 20px;
  z-index: 1000;
  /* 最前面に表示 */
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #312a2a;
  position: absolute;
  transition: all 0.4s;
}

/* 3本の線の位置定義 */
.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
}

.hamburger span:nth-child(3) {
  top: 20px;
}

/* メニューが開いているとき（.active付与時）の「×」印アニメーション */
.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background-color: #fff;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background-color: #fff;
}


/* ==========================================
   スマホ表示用スタイル (画面幅 768px 以下)
   ========================================== */
@media screen and (max-width: 768px) {

  /* ハンバーガーボタンを表示 */
  .hamburger {
    display: block;
  }

  /* ナビゲーションを全画面オーバーレイメニューに変更 */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(74, 93, 88, 0.95);
    /* 深いグリーンの背景 */
    padding-top: 100px;
    padding-right: 0;
    z-index: 999;

    /* 初期状態は非表示（透明＆クリック不可） */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }

  /* メニューが開いた時（.active付与時） */
  .site-nav.active {
    opacity: 1;
    visibility: visible;
  }

  .site-nav ul {
    flex-direction: column;
    /* 縦並びにする */
    align-items: center;
    gap: 30px;
  }

  .site-nav a {
    color: #ffffff;
    /* 文字色を白に変更 */
    font-size: 22px;
  }
}

@media screen and (max-width: 768px) {

  /* --- スマホ用ロゴサイズの調整 --- */
  .logo {
    padding-left: 15px;
    /* 左側の位置調整（必要に応じて調整してください） */
  }

  .logo img {
    max-height: 100px;
    /* ★好みの高さに変更してください（例: 70px〜100px） */
    width: auto;
    /* 縦横比を維持 */
    padding-top: 0;
    /* PC用の余白をリセット */
  }

}

@media (max-width: 768px) {

  /* ヒーロー画像のスマホでの縦幅調整 */
  .hero.index img {
    height: 300px !important;
    /* ★希望の高さに調整してください（例: 250px〜350px） */
    object-fit: cover;
    /* 画像の比率を保って切り抜く指定 */
  }

}

@media (max-width: 768px) {

  /* --- ここから追加 --- */
  .hero-info {
    position: relative;
    /* 絶対配置から相対配置に変更して枠外に押し出す */
    bottom: auto;
    /* PC用の bottom の指定を解除 */
    right: auto;
    /* PC用の right の指定を解除 */
    width: 78%;
    /* スマホ画面に合わせて横幅を広げる */
    margin: -160px auto 40px;
    /* 上の画像と少し重ねつつ中央寄せ（数値はお好みで調整） */
    /* ↓ 1番目の数値（上下の余白）を小さくすると縦幅が縮み、大きくすると広 researchがります */
    padding: 0.1px 35px;
    /* （例: 25px → 15px にすると縦幅がスッキリします） */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* お知らせ内のテキストが溢れないように調整 */
  .hero-info li {
    line-height: 1.7;
    /* 行間（標準は1.8） */
    margin-bottom: 7px;
    /* 各お知らせの間の下余白（標準は8px） */
  }


  /* スマホでの「ーお知らせー」の文字位置調整 */
  .hero-info h2 {
    margin-top: 11px !important;
    /* ★上の枠線からの距離（大きくすると下に下がります） */
    margin-bottom: 5px !important;
    /* ★下のお知らせ一覧との間隔 */
    font-size: 20px;
  }

}

/* --- ここまで追加 --- */
@media (max-width: 768px) {

  /* --- スマホ用の二重線（.double-border）の調整 --- */
  .double-border {
    width: 45%;
    /* 二重線の長さ（画面幅に対する割合） */
    margin-top: -72px;
    /* タイトル文字との上下位置の微調整 */
    margin-bottom: 47px;
    /* 下の要素（テキストやコンテンツ）との余白 */
  }

}


@media screen and (max-width: 768px) {
  .parallax-concept-section {
    height: auto;
    /* スマホでは文章がはみ出さないように高さを可変にする */
    padding: 60px 20px;
    /* 上下に余白を取る */
    background-attachment: scroll;
    /* スマホ（iOS）でのバグ防止のため固定を解除 */
  }

  .left-align,
  .right-align {
    justify-content: center;
    /* スマホでは中央寄せに統一 */
  }

  .text-box {
    max-width: 100%;
    padding: 25px;
  }
}

/* ==========================================================================
   レスポンシブ対応 (スマホ表示の調整)
   ========================================================================== */
@media (max-width: 768px) {
  .header-inner {
    gap: 15px;
  }

  .site-nav {
    padding-top: 20px;
    padding-right: 0;
    width: 100%;
    text-align: center;
  }

  .site-nav ul {
    justify-content: center;
  }


  @media (max-width: 768px) {

    /* --- コンセプト文章の横幅調整 --- */
    .concept-text {
      width: 100% !important;
      /* 横幅を画面いっぱいに広げる */
      padding: 0 10px !important;
      /* 左右の余白を最小限にして文章エリアを確保 */
      text-align: center;
      /* 中央寄せ */
    }

    /* スマホでの文字サイズと行間の微調整 */
    .concept-text p {
      font-size: 20px;
      /* 文字サイズを少し小さくして収まりを良くする（お好みで調整） */
      line-height: 1.8;
      /* 行間を整える */
    }

    /* 2つ目のブロック（reverse）の余白や引き上げ位置のリセット */
    .concept-row.reverse .concept-text {
      padding-left: 0 !important;
      transform: none !important;
      /* PC用の translateY(-40px) を解除 */
    }

  }

  @media (max-width: 768px) {

    /* --- コンセプトセクション全体の位置調整 --- */
    @media (max-width: 768px) {

      .concept-row,
      .concept-row.reverse {
        flex-direction: column;
        gap: 60px;
        /* ★画像と文字の間の隙間（お好みの数値に調整してください） */
        margin-bottom: 60px;
        /* セクション同士の間隔 */
      }
    }

    /* 画像を包むコンテナの幅と余白のリセット */
    .concept-image {
      width: 100% !important;
      /* 幅を100%に広げる */
      margin-left: 0 !important;
      /* PC用の -15% をリセット */
      margin-right: 0 !important;
      /* PC用の -15% をリセット */
      transform: none !important;
      /* PC用の位置のズレ（translate）をリセット */
      padding: 0 10px;
      /* 左右に適度な余白を作る */
    }

    /* 画像本体の表示設定 */
    .concept-image img {
      width: 100%;
      height: auto;
      /* 縦横比を維持して全体を表示 */
      display: block;
    }

    /* 2つ目のブロック（reverse）の画像調整 */
    .concept-row.reverse .concept-image {
      margin-right: 0 !important;
      transform: none !important;
    }

  }

  .service-grid {
    flex-direction: column;
    gap: 30px;
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    /* スマホは横2列 */
    column-gap: 15px;
    row-gap: 25px;
  }

  .more-btn-container {
    text-align: center;
    margin-top: 40px !important;
  }
}

@media (max-width: 768px) {

  /* スマホでのServiceテキストの文字サイズを大きく */
  .service-item p {
    font-size: 20px !important;
    /* ★元が18pxのため、20px〜22px程度に拡大 */
  }

}

@media screen and (max-width: 768px) {

  /* スマホ用 Concept 画像の位置とサイズを正しく中央寄せ */
  .concept-image,
  .concept-row.reverse .concept-image {
    width: 100% !important;
    max-width: 80% !important;
    /* 大きさを変えたい場合はこの数値を変更 */
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

}

@media (max-width: 768px) {

  /* スマホ用 Service 画像の横幅調整 */
  .service-item img {
    max-width: 76% !important;
    /* ★好みの大きさに変更（例: 75%〜90%） */
    margin: 0 auto;
    /* 中央寄せ */
  }

}

/* ==========================================
   レスポンシブ対応（スマホで2列にする）
   ========================================== */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 画面が狭いときは横2列にする */
    gap: 15px;
  }

  .category-title {
    font-size: 24px;
  }

  @media screen and (max-width: 768px) {

    /* --- スマホ用 お問い合わせボタンの幅と左右の余白調整 --- */
    .contact-btn {
      display: inline-block;
      width: auto !important;
      /* ★画面幅100%になる指定を解除 */
      max-width: 80%;
      /* 画面からはみ出さない上限サイズ */
      padding: 15px 40px !important;
      /* ★ボタン内の左右の余白（40pxを小さくするとボタンがさらに縮みます） */
      font-size: 15px;
      /* スマホ用の文字サイズ */
    }

    .contact-btn-wrap {
      text-align: center;
      /* 中央寄せを維持 */
      margin: 80px 0 30px;
      /* ボタン上下の隙間調整 */
    }

  }
}

@media screen and (max-width: 768px) {

  /* 💡 コンセプトページのヒーロー画像と四角の位置調整 */
  .consept-page .hero.index {
    position: relative;
    /* 子要素の位置の基準にする */
  }

  .consept-page .hero.index img {
    height: 200px !important;
    /* スマホでの画像の高さ（お好みに合わせて変更可） */
  }

  .consept-page .hero-info {
    position: absolute;
    /* 画像の上に重ねて配置 */
    top: 80%;
    /* 縦の中央 */
    left: 50%;
    /* 横の中央 */
    transform: translate(-5%, -80%);
    /* 正確に上下左右中央寄せ */

    bottom: auto;
    /* PC用の bottom を打ち消し */
    right: auto;
    /* PC用の right を打ち消し */

    width: 80%;
    /* スマホでの横幅（80%〜90%程度がおすすめ） */
    max-width: 300px;
    /* 大きくなりすぎない上限サイズ */
    padding: 8px 10px;
    /* 内側の余白（上下 左右） */
    margin: 0;
    /* 外側マージンをリセット */
  }

  .consept-page .hero-info h2.page-title {
    font-size: 26px;
    /* スマホ用の文字サイズ */
  }

  @media screen and (max-width: 768px) {

    /* --- 導入・結びセクションのスマホ調整 --- */

    /* 1. 見出し（h2）を1行に収める調整 */
    .intro-concept h2,
    .outro-concept h2 {
      font-size: 20px !important;
      /* ★画面幅に合わせて小さく調整（収まらない場合は16px〜17pxに） */
      letter-spacing: 0.02em;
      /* 文字間を詰めて長さを抑える */
      white-space: nowrap;
      /* ★強制的に途中で改行させない指定 */
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    /* 2. 白いボックスの内側余白を調整（画面端で潰れないように） */
    .intro-concept,
    .outro-concept {
      padding: 35px 15px !important;
      /* 左右の余白を少し詰めて文字領域を確保 */
      margin: 50px auto;
    }

    /* 3. 本文（p）の文字サイズと行間調整 */
    .intro-text,
    .outro-text {
      font-size: 14px !important;
      /* 本文もスマホで見やすいサイズに調整 */
      line-height: 1.8;
    }

  }

  @media screen and (max-width: 768px) {

    /* 💡 コンセプトページ専用 二重線（.consept-border）の長さ・位置調整 */
    .consept-border {
      width: 90% !important;
      /* ★二重線の長さ（例: 40%〜60%でお好み調整） */
      height: 8px;
      /* 二重線の高さ（隙間） */
      margin-top: 3px !important;
      /* 見出し（h2）との距離（隙間を作る） */
      margin-bottom: 25px !important;
      /* 下の文章（p）との距離 */
      margin-left: auto !important;
      /* 中央寄せ */
      margin-right: auto !important;
      /* 中央寄せ */
    }

  }

  @media (max-width: 768px) {

    /* スマホでの「3つのこだわり」タイトルの調整 */
    .parallax-section-title h2 {
      font-size: 21px !important;
      /* ★希望の文字サイズに変更（例: 18px〜22px） */
      padding: 10px 18px !important;
      /* 文字上下・左右の線との隙間もスマホ用に調整 */
      margin-bottom: -8px !important;
    }

  }

  .products-page .hero.index {
    position: relative;
    /* 子要素の位置の基準にする */
  }

  .products-page .hero.index img {
    height: 200px !important;
    /* スマホでの画像の高さ（お好みに合わせて変更可） */
  }

  .products-page .hero-info {
    position: absolute;
    /* 画像の上に重ねて配置 */
    top: 80%;
    /* 縦の中央 */
    left: 50%;
    /* 横の中央 */
    transform: translate(-5%, -80%);
    /* 正確に上下左右中央寄せ */

    bottom: auto;
    /* PC用の bottom を打ち消し */
    right: auto;
    /* PC用の right を打ち消し */

    width: 80%;
    /* スマホでの横幅（80%〜90%程度がおすすめ） */
    max-width: 300px;
    /* 大きくなりすぎない上限サイズ */
    padding: 8px 10px;
    /* 内側の余白（上下 左右） */
    margin: 0;
    /* 外側マージンをリセット */
  }

  .products-page .hero-info h2.page-title {
    font-size: 26px;
    /* スマホ用の文字サイズ */
  }

  .products-border {
    width: 88% !important;
    /* ★二重線の長さ（例: 40%〜60%でお好み調整） */
    height: 8px;
    /* 二重線の高さ（隙間） */
    margin-top: -24px !important;
    /* 見出し（h2）との距離（隙間を作る） */
    margin-bottom: 30px !important;
    /* 下の文章（p）との距離 */
    margin-left: auto !important;
    /* 中央寄せ */
    margin-right: auto !important;
    /* 中央寄せ */
  }

  @media screen and (max-width: 768px) {

    /* --- スマホ用 カテゴリータイトルのサイズ・位置調整 --- */
    .category-title {
      font-size: 18px !important;
      /* ★文字サイズ（お好みで 16px〜20px に調整） */
      margin-bottom: 25px;
      /* 下の二重線との隙間を調整 */
      letter-spacing: 0.02em;
      /* 文字間を少し詰めて収まりを良くする */
      text-align: center;
      /* 中央寄せ */
    }

  }

  @media screen and (max-width: 768px) {

    /* --- スマホ用 Topに戻るボタンのサイズ調整 --- */
    #page_top {
      bottom: 20px;
      /* 画面下からの位置（少し下げる） */
      right: 15px;
      /* 画面右からの位置（少し右に寄せる） */
    }

    #page_top a {
      font-size: 18px !important;
      /* ★文字サイズ（PC用 25px から 16px へ変更） */
      padding: 10px 14px !important;
      /* ★ボタン内の余白（PC用 15px 20px から縮小） */
      border-radius: 6px;
      /* 角丸の具合（お好みで 4px〜8px） */
    }

  }

  /* ==========================================================================
   お問い合わせページ（contact.html）スマホ用レスポンシブ調整
   ========================================================================== */
  @media screen and (max-width: 768px) {

    /* --------------------------------------------------
     1. 二重線の位置と長さの調整
     -------------------------------------------------- */
    .contact-border {
      width: 70% !important;
      /* スマホ画面に合わせた横幅（お好みで40%〜80%で調整） */
      margin-top: -10px !important;
      /* 見出し（h1）との間隔調整 */
      margin-bottom: 30px !important;
      /* 下のテキスト（p）との余白 */
      margin-left: auto !important;
      /* 中央寄せ */
      margin-right: auto !important;
      /* 中央寄せ */
    }

    /* --------------------------------------------------
     2. 文字（フォント）サイズの調整
     -------------------------------------------------- */
    /* 「お問い合わせはこちらから」見出し */
    body.products-page>h1 {
      font-size: 20px !important;
      margin-top: 40px !important;
      margin-bottom: 15px !important;
    }

    /* 上部説明文 */
    body.products-page>p {
      font-size: 14px !important;
      padding: 0 15px;
      /* 画面端に密着しないように左右に余白を設定 */
      margin-bottom: 30px !important;
    }

    /* 注意書き（※メールアドレスをご記入の際…） */
    body.products-page>p small,
    body.products-page>p small span {
      font-size: 13px !important;
    }

    /* お問い合わせフォーム（テーブル内部） */
    form {
      padding: 0 10px;
      /* フォーム外枠の左右余白 */
    }

    form th,
    form td {
      font-size: 13px !important;
      padding: 10px 8px !important;
    }

    form th {
      width: 30% !important;
      /* テーブル左列（見出し）の幅調整 */
    }

    /* ラジオボタンのラベル */
    form td label {
      display: block;
      /* スマホで押しやすいように縦に並べる場合 */
      margin-bottom: 6px;
      font-size: 13px !important;
    }

    /* プライバシーポリシーエリア */
    .privacy-policy h2 {
      font-size: 20px !important;
    }

    .privacy-policy {
      padding: 20px 15px !important;
      margin: 40px 10px !important;
    }

    .privacy-policy h3 {
      font-size: 15px !important;
    }

    .privacy-policy p {
      font-size: 13px !important;
      line-height: 1.6 !important;
    }

    /* チェックボックス & 送信ボタン */
    .submit-area label {
      font-size: 14px !important;
    }

    .submit-area input[type="submit"] {
      font-size: 15px !important;
      padding: 12px 50px !important;
    }

    /* フッターテキスト */
    .site-footer {
      flex-direction: column;
      /* スマホでは縦並びに切り替え */
      gap: 30px;
      padding: 30px 20px !important;
    }

    .footer-info,
    .map-container {
      width: 100% !important;
      /* 横幅いっぱいに広げる */
    }

    .footer-info .footer-logo {
      font-size: 24px !important;
      margin-bottom: 20px !important;
    }

    .footer-info p,
    .footer-info .copyright {
      font-size: 13px !important;
      line-height: 2.8 !important;
      /* 1.6〜2.0 程度でゆったり表示になります */
    }
  }
/* ==========================================
   スマホでの横スクロール・右側余白の緊急修正
   ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. ページ全体のはみ出し防止 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  /* 2. コンセプトエリアの移動・はみ出しを完全リセット */
  .concept-row,
  .concept-row.reverse {
    flex-direction: column !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .concept-text,
  .concept-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important; /* PC用の位置ズレ(translate)を完全にクリア */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 3. ヒーローお知らせボックスのはみ出し防止 */
 /* 3. ヒーローお知らせボックスの調整（トップページ専用：:notで他ページを除外） */
  body:not(.consept-page):not(.products-page) .hero-info {
    width: 90% !important;        /* ボックス自体の横幅を少し広げてスペースを確保 */
    max-width: 72% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important; /* 中央寄せ */
    padding: 15px 11px !important;  /* 内側の左右余白を詰めて文字領域を拡大 */
    box-sizing: border-box !important;
  }

  /* お知らせ1行全体の文字サイズ・行間調整（トップページ専用） */
  body:not(.consept-page):not(.products-page) .hero-info li {
    font-size: 11px !important;    
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important; /* 改行しない指定を維持 */
  }

  /* 日付（span）の横幅を縮めて間隔をギュッと詰める（トップページ専用） */
  body:not(.consept-page):not(.products-page) .hero-info li span {
    width: 68px !important;        
    font-size: 11px !important;    
    margin-right: 5px !important;  
  }

  /* 「―お知らせ―」タイトルのスマホ用微調整（トップページ専用） */
  body:not(.consept-page):not(.products-page) .hero-info h2 {
    font-size: 18px !important;     
    margin-top: 5px !important;      
    margin-bottom: 12px !important;  
    text-align: center !important;   
    transform: translateX(3px) !important; /* 左へずらす */
    letter-spacing: 0.05em;          
  }
  /* 4. 地図・iframeのはみ出し防止 */
  .map-container,
  iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ==========================================
   スマホ表示：コンセプト画像のサイズ統一
   ========================================== */
@media screen and (max-width: 768px) {
  /* 1つ目と2つ目の行のスタイルを統一 */
  .concept-row,
  .concept-row.reverse {
    flex-direction: column !important;
    gap: 30px !important;
    margin-bottom: 60px !important;
  }

  /* コンセプト画像の親要素サイズと位置を統一 */
  .concept-section .concept-image,
  .concept-section .concept-row.reverse .concept-image {
    width: 100% !important;
    max-width: 80% !important; /* お好みの大きさに合わせて％を変更してください */
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    padding: 0 !important;
  }

  /* 画像自体の幅を100%にフィットさせる */
  .concept-section .concept-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
/* スマホ表示（768px以下）での商品名文字サイズ調整 */
@media screen and (max-width: 768px) {
  .product-name {
    font-size: 14px !important; /* お好みの大きさに調整してください（例: 13px〜16px） */
  }
}
/* スマホ表示（768px以下）での「Concept」「Servise」「New Posts」文字サイズ調整 */
@media screen and (max-width: 768px) {
  .section-title,
  .section-title h2 {
    font-size: 30px !important; /* お好みの大きさに調整してください（例: 22px〜28px） */
  }
}
/* スマホ表示（768px以下）での New Posts 記事タイトルの文字サイズ調整 */
@media screen and (max-width: 768px) {
  .post-item-title {
    font-size: 14px !important; /* お好みの大きさに調整してください（例: 13px〜15px） */
    line-height: 1.4 !important; /* 必要に応じて行間も少しギュッと詰める場合 */
  }
}
/* ==========================================
   スマホ表示（768px以下）：該当見出しの文字サイズ縮小
   ========================================== */
@media screen and (max-width: 768px) {
  /* 1. 「忙しい毎日に、彩りとくつろぎを。」と「あなたのお気に入りを見つけに。」 */
  .intro-concept h2,
  .outro-concept h2 {
    font-size: 18px !important; /* 好みの大きさに変更可（例: 15px〜18px） */
    letter-spacing: 0.05em !important;
  }

  /* 2. 「3つのこだわり」 */
  .parallax-section-title h2 {
    font-size: 18px !important; /* 好みの大きさに変更可（例: 16px〜20px） */
    padding: 8px 15px !important; /* 線と文字の間の余白もスマホ用にコンパクト化 */
  }

}
}