:root{
  --bg1:#f7f1e6; --bg2:#ecdcc4; --fg:#222; --muted:#555; --max:1000px;
  --card:#ffffff; --line:#00000010;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;color:var(--fg);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  font:16px/1.7 system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
.site{max-width:var(--max);margin:auto;padding:12px 16px}
.logo{ margin:6px 0 0; font-size:26px; font-weight:700; color:#3a2a18; }
.nav{ display:none; }

.container{max-width:var(--max);margin:auto;padding:12px 16px}
.hero{margin:6px 0 10px}
.hero img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 6px 20px #00000014}
.updated{font-size:14px;color:var(--muted);text-align:right;margin:4px 0 10px}

/* 6つの丸アイコン＋下に文字（元レイアウトに寄せるがレスポンシブ） */
.icons{
  display:grid;
  gap:18px 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top:14px;
}
.icon{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:inherit; padding:16px 10px;
  box-shadow:0 2px 6px #0000000a;
}
.icon img{ width:88px; height:auto; display:block; }
.icon .ttl{ margin-top:8px; font-weight:700; }
.icon .sub{ margin:2px 0 0; font-size:13px; color:var(--muted); text-align:center; }

.about-box{
  max-width:760px; margin:28px auto 10px; padding:20px 24px;
  border:2px solid #b4834b; border-radius:14px; background:#fffefb;
  box-shadow:0 4px 14px #00000012; font-size:15px; line-height:1.8; color:#333; text-align:center;
}
footer.site{ display:none; }

@media (max-width:360px){
  .icon img{ width:76px; }
}

/* ===== 微調整セット ===== */

/* 背景のグラデを少し淡く */
body{
  background: linear-gradient(135deg, #f8f3ea, #efe2cd);
}

/* ロゴのバランス調整（モバイルで少し小さめ） */
.logo{ letter-spacing: .02em; }
@media (max-width: 480px){
  .logo{ font-size: 24px; }
}

/* ヒーロー画像の角丸＆影をほんのり */
.hero img{
  border-radius: 14px;
  box-shadow: 0 5px 16px #00000012;
}

/* 更新日の余白を気持ち広く */
.updated{ margin: 6px 0 12px; }

/* アイコン6枚のグリッド間隔・最小幅を調整（折り返しを綺麗に） */
.icons{
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* カード（アイコン箱）の影と余白を少し軽く */
.icon{
  padding: 14px 10px;
  border-radius: 14px;
  box-shadow: 0 2px 8px #0000000a;
}
.icon img{ width: 84px; }
.icon .ttl{ font-size: 17px; }
.icon .sub{ font-size: 13px; color: #666; }

@media (max-width: 360px){
  .icon img{ width: 74px; }
  .icon .ttl{ font-size: 16px; }
  .icon{ padding: 12px 10px; }
}

/* 一番下の説明ボックス：余白＆行間を最適化 */
.about-box{
  margin: 28px auto 18px;
  padding: 18px 20px;
  line-height: 1.9;
  border-radius: 16px;
  border-color: #c0945c;          /* ほんの少しだけ濃く */
  box-shadow: 0 6px 18px #0000000f;
}
@media (max-width: 480px){
  .about-box{ margin: 22px 12px; }
}

/* ---- スマホ寄りの最終微調整 ---- */

/* 更新日の位置を写真の右上に寄せた時の詰め（そのままでOKならスルー） */
.updated{ margin: 4px 0 10px; letter-spacing: .02em; }

/* アイコンカード：高さを少し圧縮＆見出しの字間を整える */
.icon{
  padding: 12px 10px;        /* 14px → 12px */
  border-radius: 12px;       /* 14px → 12px で少しシャープに */
  box-shadow: 0 2px 6px #0000000a;
}
.icon img{ width: 78px; }    /* 84px → 78px（羊や家の主張を少し控えめに） */
.icon .ttl{
  font-size: 16.5px;         /* 17px → 16.5px 微差で収まり改善 */
  letter-spacing: .02em;
}
.icon .sub{
  font-size: 12.5px;         /* 13px → 12.5px */
  color: #696969;
}

/* 画面幅が極小の端末（iPhone SE 等）でさらに詰める */
@media (max-width: 360px){
  .icon img{ width: 72px; }
  .icon{ padding: 10px 9px; }
  .icons{ gap: 14px; }       /* カード間の余白をほんの少しだけ縮小 */
}

/* ヒーロー画像の上下余白を軽くしてファーストビューを上げる */
.hero{ margin: 4px 0 8px; }
.hero img{ border-radius: 12px; box-shadow: 0 4px 14px #00000010; }

/* 説明ボックス：行間を微調整して1スクロールに収めやすく */
.about-box{
  line-height: 1.85;
  margin: 24px auto 16px;
  padding: 16px 18px;
}
@media (max-width: 480px){
  .about-box{ margin: 20px 12px 14px; }
}

/* ① テーマ変数にして切り替えラクに */
:root{
  --bg-img: url("../images/wood_pattern.png"); /* ←BやCに差し替え可 */
  --bg-alpha: .85;   /* 背景の濃さ（0〜1） */
  --grain-size: 480px; /* タイルの大きさ：小さくすると模様が細かく見える */
}

/* ② 背景（画像＋ごく薄いグラデで読みやすさUP） */
body{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.35)),
    var(--bg-img);
  background-size: auto, var(--grain-size);
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, scroll;   /* デスクトップでだけ固定にしたい時は後述 */
  background-color: #fffdf9;               /* 画像読めない時の保険色 */
}

/* ③ カード影と縁を少しだけ整える（既存と二重にならないよう片方だけ） */
.card{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border: 1px solid rgba(120,67,21,.08);
}

/* ④ 下の説明ボックスをちょい読みやすく */
.notice{
  line-height: 1.9;
  letter-spacing: .02em;
}

/* トップページのアイコン配置を3→2→1列に調整 */
.icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* アイコン間の余白 */
}

/* タブレット（幅768px以下）では2列 */
@media (max-width: 768px) {
  .icons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ（幅480px以下）では1列 */
@media (max-width: 480px) {
  .icons {
    grid-template-columns: 1fr;
  }
}