/* ===================================================================
aohasky スマートフォン用
=================================================================== */
/* CSS変数）の定義 */
:root {
  --cream: #f4f1de;
  --cream-2: #eae6cf;
  --cream-3: #e2dcbd;
  --olive: #55611f;
  --olive-dark: #454e1a;
  --ink: #2f3320;
  --muted: #6f7358;
  --muted-2: #8a8c73;
  --line: #d8d2b4;
  --white: #ffffff;
  --gold: #b89b5e;
/* 明朝体（セリフ）』と『ゴシック体（サンセリフ）』のフォントセット登録 */
  --serif: "Shippori Mincho", "Noto Serif JP", Georgia, serif;
  --sans: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
/* 要素の『角の丸み（半径）』と『影（シャドウ）』の数値登録 */
  --radius: 14px;
  --shadow: 0 18px 40px -24px rgba(47, 51, 32, 0.4);
}
/* Webページ上のすべての要素について、ブラウザが元々持っている余白をゼロに一律にして扱いやすくする */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Webページ全体の背景色指定。スクロールをなめらかに。スマホ画面で文字サイズが勝手に変わるのを防ぐ */
html {
  background: var(--cream);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;/* 元のサイズ（100%）のままキープ */
}
/* Webページ全体の基本の文字（種類・色・大きさ・行間）を整え、下部にナビゲーション用の余白、画面が横にブレなし
（実際に画面に見える中身全体」の基本スタイル） */
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 15px;
  padding-bottom: 72px; /* space for bottom nav */
  overflow-x: hidden;
}
/* Webページ内の画像が自動で綺麗に収まるようにする */
img {
  display: block;
  max-width: 100%;
}
/* ページ内のリンク（<a>タグ）に最初から付いている、青い文字色や下線をすべて消し、周りの文字と同じ見た目に */
a {
  color: inherit;/* 親要素の色継承 */
  text-decoration: none;
}
/* 明朝体に統一し、文字の折り返しを綺麗に整えて読みやすく */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
/* HTMLの中で部分的にフォント（明朝体やゴシック体）を切り替えるための、便利な使い回し用のクラス（ユーティリティクラス） */
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }

/* ---------- layout shell （下部ボタンナビ以外）---------- */
.wrap {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  /* ▼ 修正・追加 */
  height: 100vh;           /* min-height から height に変更し、高さを画面ぴったりに固定 */
  display: flex;           /* 縦並びのレイアウトをコントロール */
  flex-direction: column;  /* 上から下へ要素を並べる */
  overflow: hidden;        /* wrap自体からはみ出たスクロールを隠す */
  background: var(--cream);
  /* position: relative;透過のため削除 */
}
.main-content {
  flex: 1;                 /* 余った縦幅をすべてこのエリアに割り当てる */
  overflow-y: auto;        /* このエリアの中だけで縦スクロールをさせる */
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
  padding-top: 102px;
}

.section {
  padding: 40px 22px;
}
/* 各パーツ見出し */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;/* 自動的にすべて「大文字」に変換 */
  color: var(--muted);
  font-weight: 600;
}
/* shopページの最初の文字を控えめな色へ */
.muted { color: var(--muted); }

/* ---------- top header ---------- */
.topbar {
  /* ▼ position: sticky から fixed に変更し、画面幅いっぱいに固定 */
  position: fixed;/* 画面の特定の位置に要素を完全に固定 */
  top: 0;
  left: 0;
  width: 100%;
  /* ▼ PC表示（画面幅768px以上）のときも中央に収まるように制御 */
  max-width: 768px;/* 横幅の最大値を768pxに制限する（広がりすぎ防止） */
  left: 50%;/* 要素の左端を、画面の真ん中（50%）の位置に*/
  transform: translateX(-50%);/* 要素自身の幅の半分（50%）だけ左に引き戻し、中央配置 */
  z-index: 40;/* 重なり順を「40」と高くし、他のコンテンツの下に隠れないように */
  display: flex; /* 中身の要素（ロゴやボタンなど）を横並びに */
  align-items: center;/* 横並びにした中身の要素を、上下の「中央」で整列 */
  justify-content: space-between;/* 中身の要素を「両端」に分けて配置する（左にロゴ、右にメニューなど） */
  padding: 18px 22px;
  /* ▼ headerを透けさる */
  background: rgba(244, 241, 222, 0.85);/* 背景を少し透明なクリーム色（不透明度85%） */
  backdrop-filter: blur(8px);/* 背景のすりガラス効果（後ろに隠れたコンテンツを8px分ぼかす） */
  -webkit-backdrop-filter: blur(8px); /* Safari（iPhone）用 保善策*/
  border-bottom: 1px solid var(--line); /* 下側に1ピクセルの直線を引き、あらかじめ登録された線色（--line）を塗る */
}
/* header footer内の文字調整 */
.brand {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--ink);
  line-height: 1.1;
}
/* header内アイコン調整 */
.top-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}
/* header内ボタン調整 */
.icon-btn {
  background: none;/* ボタン特有の背景色を消して透明 */
  border: none;/* ボタン特有の枠線を消す */
  cursor: pointer;/* マウスを乗せたときに、矢印から「手袋の形（クリックできる合図）」に */
  color: var(--ink);/* アイコンの色を、あらかじめ登録されたインク色（優しい黒・濃いグレー）に */
  display: inline-flex;/* ボタンを文字のように横並び可能にしつつ、中のアイコンの位置調整をしやすく */
  padding: 2px;
}
/* ハンバーガーメニュー（メニュー開閉ボタン）」のアイコンを表すSVG画像コードの調整 */
.icon-btn svg { width: 22px; height: 22px; }
/* ロゴの位置調整 */
#rogo{
  float: left;
  margin-right: 10px;
}

/* ---------- buttons ---------- */
/* 一部のボタン調整 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  padding: 14px 26px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
/* 一部のボタン色調整 */
.btn-primary {
  background: var(--olive);
  color: var(--cream);
}
.btn-primary:hover { background: var(--olive-dark); }
/* 一部（index内）のボタン色調整 */
.btn-ghost {
  background: rgba(47, 51, 32, 0.72);
  color: var(--cream);
  padding: 11px 20px;
  font-size: 11px;
}
/* 一部（gallery atelier内）のボタン色調整 */
.btn-block { width: 100%; }

/* ---------- hero （indexのheader～footerの間)---------- */
.hero {
  position: relative;/* 中の文字やグラデーション（絶対配置）を配置するための基準の枠 */
  height: 380px;
  overflow: hidden;/* 万が一、中の画像などがこの枠からはみ出しても非表示に */
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;/* 縦横比を崩さず、トリミングしながら枠いっぱいに隙間なく詰める */
}
.hero-overlay {
  position: absolute;/* 親要素（.hero）を基準にして、完全に重ね合わせて配置 */
  inset: 0;/* 上下左右すべての端から「0マス」の位置に広げ、全体を覆う（top/bottom/left/right:0を一括指定） */
  /* ▼ 下から上に向かって暗くなる黒・カーキ系のグラデーションをかけ、上に乗る白文字を見やすくする */
  background: linear-gradient(to top, rgba(30, 33, 20, 0.55) 12%, rgba(30, 33, 20, 0.05) 55%);
}
.hero-content {
  position: absolute; /* 親要素（.hero）を基準にして、上に浮かせて配置する */
  left: 22px;
  bottom: 26px;
  right: 22px;
  color: var(--cream);/* 中の文字色を、あらかじめ登録されたクリーム色に */
}
.hero-content .eyebrow {
  color: rgba(244, 241, 222, 0.85); /*中の飾り文字だけ、少し透明度85%のクリーム色に*/
}
.hero-content h1 {
  color: var(--cream);/* 見出しの文字色をクリーム色に*/
  font-size: 30px;
  margin: 10px 0 18px;/* 文字の周りの余白を設定 */
}

/* ---------- hero slideshow （indexスライドショー)---------- */
.hero-slides {
  position: absolute;/* 親要素（.hero）を基準にして、完全に重ね合わせて配置 */
  inset: 0;/* 上下左右すべての端から「0マス」の位置に広げ、全体を覆う */
  width: 100%;
  height: 100%;
  z-index: 1;/* 重なり順を「1」にし、上に乗る文字やグラデーション（z-index: 40など）より一番背面に配置 */
}
.hero-slides .slide {
  position: absolute;/* 親要素（.hero-slides）を基準にして、すべてのスライド画像を同じ場所に重ねる */
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;/* 透明度を0（完全に透明）にして、通常時は画面から見えなくする */
  transition: opacity 3.0s ease-in-out;/* 透明度（opacity）が変わる際、3.0秒かけて始まりと終わりを滑らかに変化させる（フェード効果） */
}

/* activeクラスがついた画像だけを表に浮かび上がらせる */
.hero-slides .slide.active {
  opacity: 1; /* 透明度を1（不透明）にして、画面にしっかりと表示させる */
  z-index: 2; /* 重なり順を「2」に引き上げ、他の透明なスライド画像（z-index: 1）よりも上に重ねて手前に表示する */
}

/* テキストやオーバーレイがスライド画像の上に重なるように制御 */
.hero-overlay {
  z-index: 3;
}
.hero-content {
  z-index: 4;
}

/* ---------- page heading (index gallery atelier　内の一部文字調整）---------- */
.page-head {
  text-align: center;
  padding: 34px 22px 10px;
}
.page-head h1 {
  font-size: 34px;
}
.page-head p {
  color: var(--muted);
  margin-top: 14px;
  font-size: 14px;
}

/* ---------- feature icons（index内の庭園の思想　季節のコレクションのアイコン含め調整） ---------- */
.feature {
  text-align: center;
  padding: 26px 8px;
}
.feature .ico {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  color: var(--olive);
}
.feature h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.feature p {
  color: var(--muted);
  font-size: 14px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;/* 両端に広げて並べる */
  margin-bottom: 22px;
}
.section-head h2 { font-size: 26px; }
.link-more {
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

/* ---------- product cards 作品紹介article内調整---------- */
.product {
  position: relative;/* 中に配置するアイコン（絶対配置）の基準の枠 */
  margin-bottom: 28px;
}
.product .thumb {
  position: relative;/* 中の画像などを配置するための基準の枠*/
  border-radius: var(--radius);/* 前に登録した変数（14px）を呼び出し、画像の角をまるく */
  overflow: hidden;/* 画像の角が四角いままはみ出さないように、丸枠の外側をカット*/
  background: var(--cream-2); /* 画像が読み込まれる前の隙間や透明な画像の後ろを、少し濃いめのクリーム色に */
}
.product .thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;/* 画像の縦横比を「1対1（完全な正方形）」に強制的に固定 */
  object-fit: cover;/* 縦長や横長の写真でも、歪ませずに正方形に美しくトリミング*/
}
.tag-pill {
  position: absolute;/* 親要素（.product や .thumb）を基準にして、上に浮かせて自由な位置に配置*/
  top: 12px;
  left: 12px;
  background: rgba(244, 241, 222, 0.92); /* タグの背景色を、少し透明なクリーム色（不透明度92%）に */
  color: var(--ink);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}
/* 「お気に入り追加」や「カートに挿入」するためのボタン（浮かび上がるボタン）を作るコード 現時点不要*/
/* .add-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  color: var(--olive);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.add-btn svg { width: 18px; height: 18px; } */

/* 商品名が長すぎてもレイアウトが崩れないように自動で『…』と省略し、価格と一緒に綺麗に中央揃えする */
.product h3.p-name {
  font-family: var(--serif);
  text-align: center;
  margin-top: 14px;
  font-size: 15px;
  /* 共通のh3から引き継がれてしまう太字と行間、折り返しを元に戻す */
  font-weight: normal;
  line-height: 1.5;
  text-wrap: auto; /* balance による意図しない改行を防ぐ */
  overflow: hidden;/* 2行からはみ出た分の文字を非表示に*/
  display: -webkit-box;/* 文字の行数を制限する特殊な配置モード（Flexboxの古い仕様ベース）を適用 */
  -webkit-box-orient: vertical;/* ボックス内の文字が上から下（垂直方向）に並べる */
  /* VS Codeのエラー対策＋最新ブラウザ用 */
  line-clamp: 2;/* 文字数を最大「2行」に制限する */
  -webkit-line-clamp: 2; /* 古いブラウザへの後方互換性のために残す */
  /* 高さ固定の計算（以前の通り） */
  line-height: 1.5;
  height: calc(1.5em * 2); /* 高さを「1.5倍 × 2行分」に固定し、1行の商品があっても枠の高さが変わらないように */
}
.product .p-price {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

/* ---------- newsletter(現時点不要）---------- */
/* .newsletter {
  background: var(--cream-3);
  border-radius: var(--radius);
  padding: 34px 24px;
  text-align: center;
  margin: 8px 0;
}
.newsletter .ico {
  width: 34px; height: 34px; margin: 0 auto 12px; color: var(--olive);
}
.newsletter h2 { font-size: 24px; }
.newsletter p { color: var(--muted); font-size: 14px; margin: 12px 0 20px; }
.newsletter input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 12px;
}
.newsletter input:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
.newsletter .fine { font-size: 11px; color: var(--muted-2); margin-top: 12px; } */

/* ---------- footer ---------- */
.site-footer {
  background: var(--cream-2);
  padding: 42px 22px 34px;
}
.site-footer .brand {
  margin-bottom: 14px;
  display: block; /* インライン要素をブロック化し、上下余白や横幅が効くように */
}
.site-footer p.desc {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 26px;
}
.foot-cols {
  display: grid;/* グリッドレイアウトを使い、中身を格子状に整列 */
  grid-template-columns: 1fr 1fr;/* 【重要】横幅を「1対1」の等幅で完全に2等分（2列） */
  gap: 10px 20px;/* リンク同士の隙間を設定（上下に10px、左右に20pxのスペース） */
  margin-bottom: 26px;/* リンクエリアの下側に26ピクセルの隙間を空け、コピーライトと離す */
}
.foot-cols a {
  color: var(--ink);
  font-size: 14px;
  padding: 4px 0;
  display: block;/* リンクをブロック化し、横並びにならず1項目ずつ縦に綺麗に積み重なるように */
}
.foot-cols a:hover {
  color: var(--olive);
}
.copyright {
  border-top: 1px solid var(--line); /* コピーライトの上側に1ピクセルの直線を引き、フッター内の区切り線（--line）に */
  padding-top: 20px;
  font-size: 11px;
  color: var(--muted-2);
  text-align: center;/* コピーライトのテキストを中央揃え */
}

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed;/* 画面の最下部に要素を完全に固定す*/
  bottom: 0;/* 画面の最下部（下端から0マス）に配置 */
  left: 50%; /* 要素の左端を、画面の真ん中（50%）の位置に*/
  transform: translateX(-50%);/* 要素自身の幅の半分（50%）だけ左に引き戻し、完全に中央配置に */
  width: 100%;
  max-width: 768px;/* 横幅の最大値を768pxに制限する（PC画面での広がりすぎ防止 */
  z-index: 50;/* 重なり順を「50」と高くし、すべてのコンテンツの最前面に表示*/
  display: flex;/* 中のメニュー（リンク）を均等に横並びに*/
  background: rgba(244, 241, 222, 0.96);/* 背景をほぼ不透明（96%）なクリーム色にし、背後の文字が透けて読めなくなるのを防ぐ*/
  backdrop-filter: blur(8px);/* 背景のすりガラス効果（後ろを通るコンテンツを8px分ぼかす） */
  border-top: 1px solid var(--line);/* 上側に1ピクセルの直線を引き、コンテンツとの境界線に */
  padding: 8px 0 10px;
}
.bottom-nav a {
  flex: 1;/* 【重要】すべてのボタンの横幅を「完全に均等」に引き伸ばす */
  display: flex;/* ボタンの中身（アイコンと文字）の位置を調整しやすく */
  flex-direction: column;/* 中身（アイコンと文字）を横並びではなく「縦並び」に */
  align-items: center;/* 縦並びにした中身を、左右の「中央」に整列 */
  gap: 4px;/* 上のアイコンと下の文字の間に4ピクセルの隙間を */
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--olive); }

/* ---------- slide-out menu ---------- */
.menu-overlay {
  position: fixed;/* 画面に完全に固定し、スクロールしてもズレないように*/
  inset: 0;/* 上下左右すべての端から「0マス」の位置に広げ、画面全体を覆う */
  z-index: 60;/* 重なり順を「60」と高くし、最前面（トップバーやボトムナビより上）に表示 */
  background: var(--cream);
  transform: translateX(100%);/* 【重要】メニュー全体を画面の右側（100%分）へ追い出し、初期状態では隠しておく */
  transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1); /* 0.35秒かけて、滑らかにスライドさせる */
  display: flex;/* 中身の要素を整列しやすく */
  flex-direction: column;/* 中身の要素を上から下へ「縦並び」に配置*/
  padding: 22px;
  max-width: 768px;/* メニューの横幅の最大値を768pxに制限（PC画面での広がりすぎ防止） */
  left: 50%; /* PC表示のとき、メニューの左端を画面中央（50%）に合わせる */
  margin-left: -230px;/* 【特殊調整】手動で位置を左にずらし、デザイン上の最適な位置に配置する */
}
/* スマホ画面（画面幅768px以下）のときの特別ルール（念のため残し必要な場合は復活を） */
/* 0P画面中央寄せをリセットし、画面の左端（0マス）から配置 */
/* PC用の手動位置調整マージンをリセットして0に */
/* @media (max-width: 768px) { .menu-overlay { left: 0; margin-left: 0; } } */

/* メメニューが開いた状態（JavaScriptで .open クラスがついたとき） */
.menu-overlay.open {
  transform: translateX(0);/* 画面の右側に追い出していたメニューを元の位置（0）に引き戻して画面に表示 */
}
/* メニュー内の最上部（ロゴや「×」閉じるボタンを置くエリア） */
.menu-top {
  display: flex;/* 中身の要素（ロゴや閉じるボタンなど）を横並びに */
  align-items: center;/* 横並びにした中身の上下位置を「中央」で綺麗に整列 */
  justify-content: space-between;/* 中身を「両端」に分けて配置する（左にロゴ、右に閉じるボタンなど）*/
  padding: 16px;
}
/* ナビゲーションリンクを囲むエリア */
.menu-links {
  display: flex;/* リンク全体を囲むボックスの配置モードを有効化（位置調整をしやすくする） */
  flex-direction: column;/* 中身のリストなどを上から下へ「縦並び」に*/
  align-items: center;/* 中身のリストを左右の「中央」に整列*/
}
.menu-links ul{
  display: flex;/* リスト項目（li）の位置調整をしやすく */
  flex-direction: column;/* メニューの項目（「ホーム」「ショップ」など）を上から下へ「縦並び」に */
  align-items: center;/* 各メニュー項目を左右の「中央」に整列 */
  gap: 26px;/* メニュー項目同士の間に隙間*/
  margin: 60px 0 auto;
}
.menu-links a {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
}
.menu-links a:hover {
  color: var(--olive);
}
.menu-social {
  display: flex;/* 内包するアイコンを横並びにする */
  justify-content: center;/* アイコン全体を「中央寄せ」に*/
  gap: 26px;/* アイコンとアイコンの間に隙間を空ける */
  padding: 30px 0;
  color: var(--muted);
}
.menu-social svg {
  width: 22px;
  height: 22px;
}

/* ---------- gallery masonry ---------- */
.filter-row {
  display: flex;/* 中のフィルターボタンを横並びにする */
  flex-wrap: wrap;/* 横一列ではなく、入り切らない分は自動で折り返す */
  justify-content: center; /* 320pxなどの狭い画面でも中央にきれいに配置する */
  gap: 12px 16px;        /* ボタン同士の間隔（縦の隙間 12px / 横の隙間 16px）を狭めて詰める */
  padding: 10px 14px 22px; /* 左右の余白を少し削ってボタンのスペースを広げる */
}
.filter-row::-webkit-scrollbar {
  display: none;/* スクロールバーを見えなくする */
}
.filter-btn {
  background: none;/* ボタン特有の背景色を消して透明に */
  border: none;/* ボタン特有の枠線を消す */
  font-family: var(--sans); /* ボタンの文字を、あらかじめ登録ゴシック体に*/
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;/* マウスを乗せたときに、矢印から「手袋の形（クリックできる合図）」に変える */
  white-space: nowrap;/* ボタン内の文字が途中で勝手に改形されるのを防ぐ */
  padding-bottom: 6px;/* 下側に6ピクセルの余白を作り、アクティブ時の下線を表示するスペースを確保 */
  position: relative;/* アクティブ時に表示する下線（擬似要素）の基準の枠に*/
}
.filter-btn.active {
  color: var(--olive);
  font-weight: 600;
}
/* 選択されたボタンの下に表示する「下線」*/
.filter-btn.active::after {
  content: "";/* 画面に中身のない空っぽの飾りボックス（線）を作り出す */
  position: absolute;/* ボタン（.filter-btn）の下端を基準にして浮かせて配置*/
  left: 0; right: 0; bottom: 0; /* ボタンの左端から右端まで（横幅いっぱい）の、一番下（下端から0マス）に配置 */
  height: 2px;
  background: var(--olive);
}

/* 【重要】iPhone 16 Safariバグ回避のため、Gridレイアウトに刷新 */
.masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは綺麗な2列に固定 */
  gap: 22px 14px; /* 縦の隙間 22px / 横の隙間 14px */
  align-items: start; /* 中身の高さが違っても上揃えにする */
  opacity: 1;/* 通常時は透明度1（完全に不透明）でしっかり見せる */
  transition: opacity 0.4s ease; /* 透明度（opacity）が変わる際、0.4秒かけて滑らかに変化 */
}
/* タップした瞬間に一瞬透明にするためのクラス */
.masonry.fade-out {
  opacity: 0;/* 透明度を0（完全に透明）にし、画面からフワッと消す */
}
.masonry .g-item {
  width: 100%;
  margin-bottom: 0; /* Gridのgapで制御するため、下マージンは0に */
}
.g-item .thumb {
  border-radius: var(--radius);/* 変数（14px）を呼び出し、画像の角をまあるく可愛く切り取る */
  overflow: hidden;/* 画像の角が四角いままはみ出さないように、丸枠の外側をカット*/
  background: var(--cream-2);
}
.g-item .thumb img {
  width: 100%;/* 画像の横幅を、ギャラリーの枠（2列の幅）いっぱいに広げる */
  display: block;/* 画像特有の下側の謎の隙間を消し、縦に綺麗に並ぶようにする */
}
.g-item h2 {
  font-size: 16px;
  /* font-size:clamp(4px, 1.2vw + 8px, 16px);文字検討中 （画面幅に合わせて自動で文字サイズを伸縮させるプロ用の記述案） */
  text-align: center;/* タイトルの文字を中央揃え（センター寄せ）にする */
  margin-top: 12px;
}
.g-item .sub {
  text-align: center;/* 補足説明の文字を中央揃え（センター寄せ）にする */
  color: var(--muted);
  font-size: 12px;/* 一回り小さい12ピクセルにする */
  margin-top: 3px;
}
.g-item.hidden {
  display: none;/* 要素を画面から消し去り、スペースも詰めさせる */
}
/* 下のフィルター行（上下のすき間調整） */
.filter-bottom {
  margin-top: 20px;
  margin-bottom: 30px;
}
.gallery-height{
  display: -webkit-box;/* 文字の行数を制限する特殊な配置モード（Flexboxの古い仕様ベース）を適用 */
  /* VS Codeのエラー対策＋最新ブラウザ用 */
  line-clamp: 2;/* 【最新ブラウザ用】文字数を最大「2行」に制限*/
  -webkit-line-clamp: 2;/* 【古いブラウザ用】2行を超える場合は三点リーダー(...)で自動的に省略*/
  -webkit-box-orient: vertical;/* ボックス内の文字が上から下（垂直方向）に流れるように並べる */
  overflow: hidden;/* 2行からはみ出た分の文字を完全に非表示（カット）*/

  /* 高さを2行分に固定する計算式 */
  line-height: 1.5;/* 行間（行の高さ）を文字サイズの1.5倍に */
  height: calc(1.5em * 2);/* 高さを「1.5倍 × 2行分（3.0em）」に固定し、1行のテキストでも全体の高さをキープ*/
}

/* ---------- cta card （shop一部　微調整）---------- */
.cta-card {
  background: var(--cream-3);
  border-radius: var(--radius);
  padding: 40px 26px;
  text-align: center;
  margin-top: 10px;
}
.cta-card h2 {
  font-size: 24px;
}
.cta-card p {
  color: var(--muted);
  margin: 16px 0 24px;
  font-size: 14px;
}

/* ---------- marketplace cards (shop一部　微調整) ---------- */
.market {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream-2);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.market:hover {
  background: var(--cream-3);
}
.market .mk-ico {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.market .mk-ico svg { width: 24px; height: 24px; }
.mk-mint { background: #cdd7a7; }
.mk-butter { background: #f0dd9d; }
.market .mk-body { flex: 1; }
.market .mk-body h2 { font-size: 19px; }
.market .mk-body p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.market .mk-arrow { color: var(--muted); }

/* horizontal product scroll（Shop注目の作品　スクロール） */
.hscroll {
  display: flex;/* 中の商品（.product）を横一列に並べる */
  gap: 16px;/* 商品と商品の間に16ピクセルの隙間 */
  overflow-x: auto;/* 横方向にはみ出た商品カードを、横スクロールで動かせるようにする */
  padding-bottom: 12px;/* スクロール時にカードの下部（シャドウなど）が隠れないように、下に12pxの余白を作る */
  scrollbar-width: none; /* 【Firefox用】スクロールバーを完全に非表示にする */
  scroll-snap-type: x mandatory; /* 【重要】横スクロールしたとき、中途半端な位置で止まらず「ピタッ」と綺麗に止まるようにする */
}
.hscroll::-webkit-scrollbar {
  display: none;/* スクロールバーを見えなくして、アプリのようなすっきりした見た目にする */
}
.hscroll .product {
  flex: 0 0 76%;/* 【重要】商品カードを縮ませず、横幅を常に画面の「76%」の大きさで均一に固定する */
  scroll-snap-align: start;/* 横スクロールが止まる位置を、各商品カードの「左端（スタート）」にぴったり合わせる */
  margin-bottom: 0;/* 通常の商品カード（縦並び用）についていた下マージン（28px）を、は0にして打ち消す */
}
.hscroll .product .p-name,
.hscroll .product .p-price {
  text-align: left; /* 通常は中央揃え（center）だった商品名と価格を、横スクロール用に「左揃え」に変更する */
}
.hscroll .product a{
  text-align: center;
}

/* ---------- reveal animation (only when JS is active) ---------- */
/* 初期状態：JavaScriptが有効な環境（.js）で、アニメーション対象の要素（.reveal） */
.js .reveal {
  opacity: 0;/* 最初は透明にして画面から隠しておく */
  transform: translateY(18px);/* 本来の位置よりも18ピクセル下にずらしてスタンバイ*/
  transition: opacity 0.7s ease, transform 0.7s ease; /* 透明度と位置が変化する際、0.7秒かけて滑らかに（最初は早く、後半はゆっくり）動かす */
}

/* 画面内に入った状態（JavaScriptで .in クラスがついたとき） */
.js .reveal.in {
  opacity: 1;/* 透明度を1（不透明）にして画面に表示*/
  transform: none;/* 下にずらしていた18pxをリセットし、本来の正しい位置に引き上げる（下から上への移動） */
}

/* 【超重要】視覚過敏やアニメーションが苦手なユーザー（アクセシビリティ）への配慮 */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;/* アニメーションを完全に無効化し、最初から表示する */
    transform: none;/* 最初から本来の位置に配置する */
    transition: none;/* 変化の時間（0.7秒）を無くし、一瞬で切り替える */
  }
}

/* ---------- story sections (atelier内微調整) ---------- */
.story { padding: 16px 22px; }
.story .num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}
.story h2 { font-size: 26px; display: inline-block; margin-left: 10px; }
.story .title-row { margin-bottom: 16px; }
.story.right .title-row { text-align: right; }
.story p { color: var(--ink); font-size: 14.5px; }
.story .caption {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
  padding: 10px;
  background: var(--cream-2);
  border-radius: 10px 10px 0 0;
}
.story .story-img {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 20px;
}
.story .story-img img {
  width: 100%;
}
.tags { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.tag {
  font-size: 12px;
  color: var(--olive);
  background: var(--cream-2);
  padding: 6px 14px;
  border-radius: 20px;
}

/* ---------- minne Creema リンク設定 ---------- */
/* 追加 gallery ショップリンク*/
.masonry a:link p{
  color: blue;
}
.masonry a:visited p{
  color: purple;
}
.masonry a:hover p{
  color: red;
}
/* 追加 Shop　ショップリンク*/
.hscroll a:link p{
  color: blue;
}
.hscroll a:visited p{
  color: purple;
}
.hscroll a:hover p{
  color: red;
}

/* ===================================================================
aohasky パソコン用
=================================================================== */
@media screen and (min-width: 768px) {
  /* --- 1. 全体のレイアウトシェル構造の拡張 --- */
  .wrap {
    width: 100%;
    max-width: 100%;   /* 画面幅制限を10%まで拡張 */
    height: auto;        /* 縦幅の固定を解除し、自然なスクロールに */
    overflow: visible;   /* スクロールの制限を解除 */
  }
  .main-content {
    overflow-y: visible; /* 内部スクロールではなくページ全体でスクロール */
    padding-top: 80px;   /* PC用ヘッダーの高さに合わせた余白 */
  }
  /* --- 2. 固定パーツ（ヘッダー・ナビ）の幅調整 --- */
  .topbar {
    width: 100%;
    max-width: 100%;   /* ヘッダーの最大幅を拡張 */
    padding: 24px 40px;  /* 左右の余白を広げてゆったりと */
    display: flex;
    align-items: center;
    justify-content: space-between; /* ロゴ・メニュー・アイコンを綺麗に3分割 */
  }
  .bottom-nav {
    display: none ; /* PC画面ではスマホ用の下部ナビを非表示にする */
  }
  /* --- 3. ヒーローエリア（Home 1段目） --- */
  .hero {
    padding-top: 30px;
    height: 560px;       /* PCの大画面に合わせて高さに */
  }
  .hero-content {
    left: 60px;
    bottom: 60px;
  }
  .hero-content h1 {
    font-size: 46px;     /* キャッチコピーを大きく強調 */
  }
  /* --- 4. セクション共通の余白調整 --- */
  .section {
    padding: 80px 40px;  /* 上下の余白 */
  }
  /* home キャッチ一部横並びに */
  .section-row{
    padding: 0px 30px 0px 30px;
    display: flex;
  }
  .section-row .feature{
    margin: 30px 30px 0px 30px;
  }

  /*4-1. Home秋のコレクション調整 */
  /* 各articleを横並びのフレックスボックスにする */
  .thumb-pc {
    display: flex; /* スマホ用スタイルの競合を防ぐ */
    align-items: center;
    gap: 60px;
    margin-bottom: 60px; /* 商品ごとの下の隙間 */
    width: 100%;
  }
  /* 画像エリアの横幅を45%に制限 */
  .thumb-pc .thumb {
    flex: 0 0 40%;
    width: 100%;
  }
  /* グループ化したテキストエリアを文字数に合わせて広げる */
  .thumb-pc .product-body {
    flex: 1;
  }
  /* テキストの配置をPCでは左寄せにして見やすくする */
  .thumb-pc h3.p-name,
  .thumb-pc .p-price {
    text-align: left;
    font-size: 24px;
  }
  /*【自動交互並び替えの設定】articleタグの順番を基準に、偶数番目(even)だけ左右反転*/
  /* 1個目、3個目のarticle（奇数）：左画像 / 右テキスト (標準) */
  .thumb-pc:nth-of-type(odd) {
    flex-direction: row;
  }
  /* 2個目のarticle（偶数）：右画像 / 左テキストに反転 */
  .thumb-pc:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  .page-head p,.feature p {
  font-size: 18px;
}

  /* --- 5. 2カラム・3カラムのレイアウト調整（Atelierなど） --- */
  /* スマホで縦並びだった要素を、PCでは横並びに一括制御します */
  /* 職人の手仕事・持続可能な素材選び（Home・Atelierの紹介） */
  .foot-cols {
    grid-template-columns: repeat(3, 1fr) ; /* 3列横並びに変更 */
    gap: 40px;
  }
  /* --- 5. 2カラム・3カラムのレイアウト調整（Atelierなど） --- */
  /* アトリエのストーリー（画像とテキストの横並び・サイズ適正化） */
  .story {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 40px;
  }

  /* 画像エリア：PCで大きくなりすぎないよう横幅を適度な大きさに制限 */
  .story .story-img {
    flex: 0 0 45%;    /* 画面の45%の幅に固定し、画像が広がりすぎるのを防ぐ */
    max-width: 80%;       /* 最大幅も45%に制限して固定 */
    margin-top: 0;    /* スマホ用の上の隙間をリセット */
    display: block;   /* 画像が確実に表示されるように明示 */
  }
  .story .story-img img {
    width: 100%;
    height: auto;
    object-fit: cover;    /* 万が一画像の比率が違っても綺麗に収める */
    display: block;
  }

  /* テキストエリア */
  .story .story-body {
    flex: 1;
    text-align: left; /* PCでは読みやすいよう一括で左寄せに */
  }

  /*
    【自動交互並び替え】
    HTML側に .right クラスがついていなくても、CSS側で自動的に
    1番目(odd)＝左画像、2番目(even)＝右画像、3番目(odd)＝左画像 と並び替えます。
  */
  .story:nth-of-type(odd) {
    flex-direction: row;         /* 1番目、3番目：左画像 / 右文字 */
  }
  .story:nth-of-type(even) {
    flex-direction: row-reverse; /* 2番目：右画像 / 左文字 */
  }

  /* 元々あった .story.right の記述（必要に応じて残す、または上記が自動適用されるため削除でも可） */
  .story.right {
    flex-direction: row-reverse;
  }
  .story.right .title-row {
    text-align: left; /* 反転時も文字の塊自体は左寄せにして読みやすくします */
  }

  /* --- 6. 商品リスト（Shopページ・コレクション） --- */
  /* スマホ用の「横スクロール」を解除し、PCでは「横に4つ並び」の綺麗なグリッドにします */
  .hscroll {
    display: grid ;
    grid-template-columns: repeat(4, 1fr) ;
    gap: 30px;
    overflow-x: visible ;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .hscroll .product {
    flex: none ;
    width: 100% ;
  }

  .hscroll .product .p-name,
  .hscroll .product .p-price {
    text-align: center; /* PCでは商品名と価格を中央寄せ */
  }

  /* --- 7. ギャラリー（Galleryページ） --- */
  /* 石や花の美しい写真をPCでは「3列の美しい段組み（多段カラム）」で表示します */
  .masonry {
    grid-template-columns: repeat(3, 1fr); /* スマホの2列から、PCでは3列に変更 */
    gap: 24px;   /* 写真同士の間隔を広げる */
  }

  .masonry .g-item {
    margin-bottom: 24px;
  }

  .filter-row {
    justify-content: center; /* フィルターボタン（ALL / NECKLACES等）を中央寄席に */
    gap: 40px;
    padding-bottom: 40px;
  }

  /* --- 8. フッターエリア --- */
  .cta-card {
    max-width: 680px;    /* PCでは横に広がりすぎないよう幅を絞る */
    margin: 40px auto 0; /* 中央寄せ */
    padding: 60px 40px;
  }

  .site-footer {
    padding: 60px 40px 40px;
  }
  /* --- [追加] PC用のメニュー表示と横並びの設定 --- */
  /* スマホ用の隠れるメニュー（.menu-overlay）の制限を解除し、ヘッダーに埋め込み */
  .menu-overlay {
    position: static ;    /* 画面全体に広がる固定を解除 */
    transform: none ;     /* スライドのアニメーションを無効化 */
    background: transparent ; /* 背景のクリーム色を透明に */
    padding: 0 ;
    display: flex ;       /* 常に表示する */
    margin: 0 ;
    max-width: none ;
  }
  /* メニューの <ul> を横並び（Row）にする */
  .menu-links ul {
    display: flex ;
    flex-direction: row ; /* 縦並びから横並びに変更 */
    gap: 32px ;           /* メニュー文字同士の間隔 */
    margin: 0 ;
  }

  /* メニューなどの文字デザイン調整 */
  .menu-links a {
    font-size: 20px ;    /* PCに合わせたサイズ */
    letter-spacing: 0.15em;        /* 文字の間隔を少し空けて */
    font-weight: 500;
    transition: color 0.3s ease;
  }
  .menu-links a:hover {
    color: var(--gold);
    text-decoration: underline; /* 下線を表示 */
  }
  /* --- [追加] スマホ専用パーツ（ボタンなど）の非表示制御 --- */
  /* PCでは不要になる「メニューを開くボタン」「閉じるボタン」「SNSアイコン」を消す */
  [data-menu-open],
  [data-menu-close],
  .menu-top,
  .menu-social {
    display: none ;
  }
  /* 右側のアイコン（カートやログイン等）がある場合の余白調整 */
  .top-icons {
    gap: 24px;
  }

  /* --- 9. マーケットプレイス（ボタン）のPC用横並び・中央寄せ調整 --- */
  /* スマホ用の縦並びを解除し、PCでは中央に大きめの横並びで配置 */
  .marlet-bottom {
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
    align-items: stretch;    /* 左右のボタンの高さを揃える */
    gap: 70px;               /* ボタン同士のすき間（余白） */
    max-width: 960px;        /* 広がりすぎないように最大幅を制限 */
    margin: 40px auto 0;     /* 全体を中央に寄せる */
    width: 100%;
  }

  /* 2つのボタンを均等な幅にし、大きめのサイズ感に調整 */
  .marlet-bottom .market {
    flex: 1;                 /* 2つのボタンの横幅を同じにする */
    margin-bottom: 0;        /* スマホ用についていた下の隙間をリセット */
    padding: 24px 40px;      /* 内側の余白を広げて大きめのボタンにする */
    justify-content: center; /* ボタン内部の要素を中央に寄せる */
    /* ▼ 背景色・位置・影が変化する際、それぞれ指定した時間（0.2〜0.3秒）をかけて滑らかに動かすアニメーションの準備 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* ホバー時に少し浮き上がる上品なエフェクトを追加 */
  .marlet-bottom .market:hover {
    background: var(--cream-3);   /* マウスを乗せたときに、ボタンの背景色を一段濃いクリーム色*/
    transform: translateY(-2px);  /* ボタンの位置を上に2ピクセルだけフワッと持ち上げる*/
    box-shadow: var(--shadow);    /* 前に登録した立体的な影（--shadow）の変数を呼び出し、浮き上がった分の影を下に落とす */
  }
}