/* assets/css/board.css */
:root{
  --bg:#f7f6f5; --ink:#322525; --muted:#6f5f5f; --rose:#a86266; --rose-2:#b87a7e; --rose-3:#c79a9d;
  --paper:#fff; --grid:#e9e4e2; --pill:#efe4e7; --shadow:0 10px 28px rgba(50,37,37,.08);
  --radius:18px; --max:1100px;
  --nav-pill-w:150px; --nav-pill-h:36px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--rose); text-decoration:none}
a:hover{opacity:.9}

/* Topbar（header-top.php 再利用用） */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--grid);
}
.topbar__inner{
  max-width:var(--max); margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:28px; height:18px; border-radius:999px; flex:0 0 auto;
  background:radial-gradient(45% 80% at 60% 50%,#fff 0%,#fff 30%,#e9ccd1 31%,#c28b91 100%);
  box-shadow:0 2px 8px rgba(168,98,102,.25) inset;
}
.brand__name{font-weight:700; letter-spacing:.02em}

.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--grid); background:#fff; color:var(--rose);
  border-radius:999px; padding:6px 14px; font-weight:700; font-size:.95rem; line-height:1.2;
  white-space:nowrap; cursor:pointer; transition:box-shadow .2s ease, background-color .2s ease;
}
.btn-pill:hover{ box-shadow: var(--shadow); }

.wrap{max-width:var(--max); margin:0 auto; padding:88px 12px 72px}

/* ハンバーガー */
.hambtn{
  width:40px; height:40px; border:1px solid var(--grid); background:#fff; color:var(--rose);
  border-radius:10px; display:inline-grid; place-items:center; cursor:pointer;
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
}
.hambtn .bars{width:18px; height:12px; position:relative; top:-1px;}
.hambtn .bars::before,.hambtn .bars::after,.hambtn .bars span{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
}
.hambtn .bars::before{top:0}
.hambtn .bars span{top:5px}
.hambtn .bars::after{bottom:0}

.nav-panel{
  position:absolute; right:12px; top:56px; width:240px; background:#fff;
  border:1px solid var(--grid); border-radius:16px; box-shadow:var(--shadow);
  padding:10px; display:none; z-index:60;
}
.nav-panel.open{display:block}
.nav-panel a, .nav-panel button{
  display:flex; align-items:center; justify-content:center;
  width:100%; border:1px solid var(--grid); background:#fff; color:var(--rose);
  border-radius:999px; padding:10px 14px; font-weight:700; margin:6px 0; cursor:pointer; text-decoration:none;
}
.nav-panel a:hover, .nav-panel button:hover{box-shadow:var(--shadow)}

/* Hero */
.hero{
  background:var(--paper); border:1px solid var(--grid); border-radius:22px; box-shadow:var(--shadow); overflow:hidden
}
.hero__inner{padding:60px 7vw 40px; text-align:center}
.hero__title{
  font-family:'Playfair Display',serif; font-weight:600; color:var(--rose);
  font-size:clamp(48px, 7.6vw, 96px); line-height:1.02; margin:0 0 6px
}
.hero__subtitle{
  font-family:'Playfair Display',serif; color:var(--rose);
  font-size:clamp(28px, 5.5vw, 64px); line-height:1.08; margin:0
}
.hero__caption{color:var(--muted); font-size:.95rem; margin-top:16px}
.info-pill{
  display:inline-block; margin-top:14px; padding:10px 14px; border-radius:999px;
  background:#faf7f8; border:1px solid var(--grid); color:#5b4a4a
}

/* Panels & Boards */
.panel{
  background:#fff; border:1px solid var(--grid); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; margin-top:22px
}
.panel h2{
  margin:0 0 12px; font-family:'Playfair Display',serif; color:#2b1f1f; font-size:1.5rem; text-align:center
}

.rules{grid-template-columns:repeat(4,1fr)}
.steps{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){
  .rules,.steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .rules,.steps{grid-template-columns:1fr}
}

.num{
  width:26px; height:26px; border-radius:50%; background:var(--rose); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.9rem; margin:0 auto 8px
}

.boards{margin-top:22px}
.grid-boards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,1fr); /* PC：4列 */
}
@media (max-width:980px){
  .grid-boards{
    grid-template-columns:repeat(3,1fr); /* タブレット：3列 */
  }
}
@media (max-width:720px){
  .grid-boards{
    grid-template-columns:repeat(2,1fr); /* モバイル：2列 */
  }
}
@media (max-width:520px){
  .grid-boards{
    grid-template-columns:repeat(2,1fr); /* 小さいスマホでも2列のまま */
  }
  .card__title{font-size:.88rem}
  .card__body{padding:10px}
  .card__head{padding:10px}
}

.card{
  background:#fff; border:1px solid var(--grid); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:.2s transform
}
a.card{display:block; color:inherit; text-decoration:none; cursor:pointer}
.card:hover{transform:translateY(-2px)}
.card__head{
  padding:16px; background:linear-gradient(180deg,#f7eff1 0%, #fefefe 100%);
  border-bottom:1px solid var(--grid); text-align:center
}
.card__icon{font-size:1.8rem; margin-bottom:4px}
.card__title{
  font-family:'Playfair Display',serif; color:#a86266; font-size:1.05rem; margin:0
}
.card__body{padding:16px; text-align:left}
.card__desc{color:#574b4b; margin:0 0 6px; font-size:.95rem}
.badge{
  display:inline-block; border-radius:999px; background:var(--pill); color:#5b3d3f; border:1px solid var(--grid);
  padding:6px 10px; font-weight:700; font-size:.88rem
}

/* footer のテキスト色など */
.muted{color:var(--muted);}

/* 利用手順だけPCでも2×2固定 */
.steps.steps--2x2{
  grid-template-columns: repeat(2, 1fr);
}

/* 添付画像2寄せ（利用ルール/利用手順共通カード） */
.rule,.step{
  /* 点線：グレーではなくrose系に */
  border: 2px dashed rgba(168, 98, 102, .32);

  /* 左の強調：太め + rose-3 */
  border-left: 12px solid var(--rose-3);

  /* 塗り：薄ピンク（紙っぽさを残す） */
  background: rgba(184, 122, 126, .12);

  /* 角丸：大きめ */
  border-radius: 18px;

  /* 余白：少しゆったり */
  padding: 18px 16px;

  text-align: center;
}