/* ===== DIY DAO ガイドページ共通CSS（トップの index.html と同じ色・部品） ===== */
:root{
  --kinari:#FFFBF2;   /* 生成り：背景 */
  --paper:#FFFFFF;
  --ink:#1D1D1B;      /* 墨黒：文字・線 */
  --ink-soft:#55524C;
  --yellow:#FFD000;   /* 安全イエロー */
  --green:#0A8A4F;    /* 安全グリーン */
  --green-t:#087343;  /* 小さい緑文字用 */
  --blue:#2F7DD1;
  --yl:#FFF3BF;       /* 淡い黄 */
  --gl:#E3F4E8;       /* 淡い緑 */
  --bl:#E1EEFB;       /* 淡い青 */
  --hazard:repeating-linear-gradient(-45deg,var(--yellow) 0 18px,var(--ink) 18px 36px);
  --hazard-s:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,var(--ink) 12px 24px);
  --line:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--kinari);color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif;font-size:17px;line-height:1.9;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1140px,100% - 32px);margin-inline:auto}
.h-font,h1,h2,h3{font-family:"M PLUS 1p",sans-serif;font-weight:900;letter-spacing:.01em;line-height:1.35}
.en{font-family:"Archivo Black",sans-serif;letter-spacing:.04em}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"M PLUS 1p",sans-serif;font-weight:800;font-size:17px;line-height:1.4;
  padding:.85em 1.5em;border:var(--line);border-radius:999px;
  text-decoration:none;box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;background:var(--paper);color:var(--ink);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-main{background:var(--yellow)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--yellow)}

/* ===== ヘッダー ===== */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,251,242,.94);backdrop-filter:blur(6px);
  border-bottom:var(--line);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo .mark{width:44px;height:44px;border-radius:50%;border:var(--line);background:var(--yellow) url(../assets/c1.png) center 30%/78% no-repeat;flex-shrink:0}
.logo .word{font-family:"Archivo Black",sans-serif;font-size:24px;color:var(--ink);letter-spacing:.03em;white-space:nowrap}
.logo .word b{color:var(--green)}
nav.gnav{display:flex;gap:6px;align-items:center}
nav.gnav a.txt{font-weight:700;font-size:15px;text-decoration:none;padding:.4em .8em;border-radius:999px;white-space:nowrap}
nav.gnav a.txt:hover{background:var(--yl)}
nav.gnav .btn{padding:.5em 1.1em;font-size:15px;white-space:nowrap}

/* ===== ページ冒頭 ===== */
.page-head{background:var(--paper);border-bottom:var(--line);position:relative}
.page-head::after{content:"";display:block;height:14px;background:var(--hazard-s);border-top:var(--line)}
.page-head .inner{width:min(760px,100% - 32px);margin-inline:auto;padding:28px 0 40px}
.crumb{font-size:13.5px;font-weight:700;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.2em .5em;align-items:center}
.crumb a{color:var(--green-t);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--ink-soft)}
.page-head .tag{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:"Archivo Black";font-size:13px;letter-spacing:.12em;
  background:var(--ink);color:#fff;padding:.3em .9em;border-radius:6px;
}
.page-head .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.page-head h1{font-size:clamp(27px,5vw,42px);margin-top:12px;text-wrap:balance;overflow-wrap:anywhere}
.learn{
  margin-top:22px;background:var(--yl);border:var(--line);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--shadow);
}
.learn .lb{font-family:"M PLUS 1p";font-weight:900;font-size:15px;display:flex;align-items:center;gap:8px}
.learn .lb::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFD000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.learn ul{list-style:none;margin-top:6px}
.learn li{position:relative;padding-left:1.1em;font-size:15.5px;line-height:1.75;margin-top:4px}
.learn li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ink);border-radius:2px;transform:rotate(45deg)}

/* 目次 */
.toc{margin-top:22px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:16px 22px}
.toc .lb{font-family:"Archivo Black";font-size:13px;letter-spacing:.12em}
.toc ol{list-style:none;counter-reset:t;margin-top:4px;display:grid;gap:2px}
.toc li{counter-increment:t;font-size:15px;font-weight:700;line-height:1.6}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:"Archivo Black";font-size:12px;color:var(--green-t);margin-right:.7em}
.toc a{text-decoration:none;border-bottom:2px solid transparent}
.toc a:hover{border-bottom-color:var(--yellow)}

/* ===== 本文 ===== */
.article{width:min(760px,100% - 32px);margin-inline:auto;padding:48px 0 80px}
.article > * + *{margin-top:18px}
.article h2{
  font-size:clamp(22px,3.6vw,29px);margin-top:64px;padding:12px 0 12px 20px;position:relative;
  border-bottom:var(--line);
}
.article h2::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:9px;background:var(--yellow);border:2px solid var(--ink);border-radius:3px}
.article h2:first-child{margin-top:0}
.article h3{font-size:20px;margin-top:40px;display:flex;gap:10px;align-items:baseline}
.article h3::before{content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--ink);transform:translateY(-1px)}
.article p{overflow-wrap:anywhere}
.article ul.dots{list-style:none;display:grid;gap:6px}
.article ul.dots li{position:relative;padding-left:1.2em}
.article ul.dots li::before{content:"";position:absolute;left:.1em;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.article a:not(.btn):not(.card){color:var(--green-t);font-weight:700;text-underline-offset:3px;overflow-wrap:anywhere}
.mk{background:linear-gradient(transparent 58%,var(--yellow) 58%);font-weight:700}
.small{font-size:14px;color:var(--ink-soft)}
.price{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;background:var(--paper);border:var(--line);border-radius:var(--radius);padding:16px 22px;box-shadow:var(--shadow)}
.price .num{font-family:"Archivo Black";font-size:clamp(30px,6vw,40px);line-height:1.1}
.price .unit{font-family:"M PLUS 1p";font-weight:900;font-size:18px}

/* スクリーンショット */
figure.shot{margin-inline:auto;text-align:center}
figure.shot img{
  margin-inline:auto;background:#fff;
  border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 rgba(29,29,27,.2);
}
figure.shot.tall img{max-width:min(340px,100%)}
figure.shot.mid img{max-width:min(520px,100%)}
figure.shot.tiny img{max-width:300px}
figure.shot figcaption{font-size:13.5px;color:var(--ink-soft);font-weight:700;margin-top:8px}
.shots-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:start}
.shots-row figure.shot.tall img{max-width:100%}

/* 手順カード */
ol.steps{list-style:none;counter-reset:s;display:grid;gap:22px}
ol.steps > li{
  counter-increment:s;position:relative;background:var(--paper);
  border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px 22px 22px;
}
ol.steps > li > .st-head{display:flex;gap:14px;align-items:flex-start}
ol.steps > li > .st-head::before{
  content:counter(s);flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:var(--line);background:var(--yellow);
  font-family:"Archivo Black";font-size:18px;line-height:1;
}
ol.steps .st-title{font-family:"M PLUS 1p";font-weight:900;font-size:18.5px;line-height:1.5;padding-top:8px;overflow-wrap:anywhere}
ol.steps .st-body{margin-top:10px}
ol.steps .st-body > * + *{margin-top:10px}
ol.steps .st-body p{font-size:16px}
ol.steps figure.shot{margin-top:16px}
ol.steps.green > li > .st-head::before{background:var(--gl)}
ol.steps.blue > li > .st-head::before{background:var(--bl)}

/* STEPラベル版（参加までの流れ） */
ol.flow{list-style:none;display:grid;gap:0}
ol.flow > li{position:relative;padding:0 0 26px 76px;min-height:72px}
ol.flow > li .no{
  position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;text-align:center;border:var(--line);background:var(--gl);
  font-family:"Archivo Black";font-size:20px;line-height:1;
}
ol.flow > li .no small{display:block;font-size:9px;letter-spacing:.1em;margin-bottom:2px}
ol.flow > li:not(:last-child)::after{content:"";position:absolute;left:28px;top:62px;bottom:4px;border-left:3px dashed var(--ink)}
ol.flow h3{font-size:20px;padding-top:12px;margin:0}
ol.flow h3::before{display:none}
ol.flow p{font-size:15.5px;color:var(--ink-soft);margin-top:4px}

/* 注意ボックス（黄） */
.note{
  background:var(--yl);border:var(--line);border-radius:var(--radius);
  padding:16px 20px 16px 20px;position:relative;
}
.note .lb{
  display:inline-flex;align-items:center;gap:6px;font-family:"M PLUS 1p";font-weight:900;font-size:14px;
  background:var(--ink);color:var(--yellow);border-radius:6px;padding:.1em .7em;margin-bottom:6px;
}
.note .lb::before{content:"!";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:"Archivo Black";font-size:11px}
.note p{font-size:15.5px}
.note p + p{margin-top:6px}
.note.green{background:var(--gl)}
.note.green .lb{color:#fff;background:var(--green-t)}
.note.green .lb::before{content:"i";background:#fff;color:var(--green-t)}
.note.blue{background:var(--bl)}
.note.blue .lb{background:var(--ink);color:#fff}
.note.blue .lb::before{content:"i";background:#fff;color:var(--ink)}

/* 大事な警告（墨黒×黄のトラ柄ふち） */
.warn{
  background:var(--hazard);border:var(--line);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow);
}
.warn .in{background:var(--paper);border:var(--line);border-radius:8px;padding:18px 20px 20px}
.warn .ttl{
  display:flex;align-items:center;gap:10px;font-family:"M PLUS 1p";font-weight:900;font-size:19px;line-height:1.4;
}
.warn .ttl::before{
  content:"!";flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  background:var(--yellow);color:var(--ink);border:var(--line);border-radius:8px;width:32px;height:32px;
  font-family:"Archivo Black";font-size:18px;
}
.warn ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.warn li{position:relative;padding-left:1.4em;font-size:16px;font-weight:500}
.warn li::before{content:"✕";position:absolute;left:0;top:0;font-weight:900}
.warn li.ok::before{content:"○"}
.warn p{margin-top:8px;font-size:16px}

/* リンクカード */
a.card{
  display:flex;gap:16px;align-items:center;text-decoration:none;background:var(--paper);
  border:var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}
a.card:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
a.card .ic{flex:0 0 auto;width:48px;height:48px;border-radius:12px;border:var(--line);background:var(--gl);display:grid;place-items:center;font-family:"Archivo Black";font-size:18px}
a.card .tx b{display:block;font-family:"M PLUS 1p";font-weight:900;font-size:17px;line-height:1.45}
a.card .tx span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.6;margin-top:2px}
a.card .go{margin-left:auto;font-family:"Archivo Black";font-size:20px;flex:0 0 auto}

/* 表 */
.tbl{border:var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.tbl table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.7}
.tbl th,.tbl td{padding:12px 16px;border-bottom:2px solid var(--ink);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl th{width:34%;background:var(--kinari);font-weight:700;border-right:2px solid var(--ink)}

/* メンバー紹介 */
.member{background:var(--paper);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-top:28px}
.member .mh{display:flex;gap:18px;align-items:center}
.member .mh img{width:96px;height:96px;border-radius:50%;border:var(--line);object-fit:cover;background:#fff;flex:0 0 auto}
.member .mh h2{margin:0;padding:0;border:0;font-size:26px}
.member .mh h2::before{display:none}
.member .mh .did{font-size:13px;font-weight:700;color:var(--green-t)}
.member .bio{margin-top:14px}
.member .bio p{font-size:15.5px}
.member .bio p + p{margin-top:8px}
.member .tbl{margin-top:16px}
.member ul.dots{margin-top:10px;font-size:15px}

/* ステッカー一覧 */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gallery figure.shot img{box-shadow:3px 3px 0 rgba(29,29,27,.2)}

/* ガイド一覧 */
.g-group{margin-top:48px}
.g-group:first-child{margin-top:0}
.g-group h2{margin-top:0}
.g-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.g-cards a.card{align-items:flex-start;height:100%}
.g-cards a.card .ic{background:var(--yl)}
.g-cards a.card.c2 .ic{background:var(--gl)}
.g-cards a.card.c3 .ic{background:var(--bl)}
.g-cards a.card.c4 .ic{background:var(--paper)}

/* 規約 */
.legal{font-size:16px;line-height:1.95}
.legal h2{font-size:clamp(19px,3vw,22px);margin-top:44px}
.legal h2.doc{font-size:clamp(22px,3.6vw,28px);margin-top:0}
.legal p{margin-top:12px}
.legal ol,.legal ul{margin-top:10px;padding-left:1.6em;display:grid;gap:6px}
.legal ol ol,.legal ol ul,.legal ul ul,.legal ul ol{margin-top:8px}
.legal ul{list-style:disc}
.legal ul ul{list-style:circle}
.legal ol{list-style:decimal}
.legal ol ol{list-style:lower-roman}
.legal .end{text-align:right;margin-top:28px}
.legal-box{background:var(--paper);border:var(--line);border-radius:var(--radius);padding:24px 26px 30px}

/* ページ下の案内 */
.next{margin-top:64px;background:var(--gl);border:var(--line);border-radius:var(--radius);padding:24px;text-align:center}
.next b{font-family:"M PLUS 1p";font-weight:900;font-size:19px;display:block}
.next p{font-size:15px;margin-top:6px}
.next .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ===== フッター ===== */
.f-tape{height:22px;background:var(--hazard);border-top:var(--line)}
footer{background:var(--kinari);border-top:var(--line);padding:36px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
footer nav{display:flex;gap:8px 20px;flex-wrap:wrap}
footer nav a{text-decoration:none;font-weight:700}
footer nav a:hover{text-decoration:underline}

/* ===== スマホ ===== */
@media (max-width:640px){
  body{font-size:16px}
  .top .wrap{height:60px;gap:8px}
  .logo{gap:8px}
  .logo .mark{width:38px;height:38px}
  .logo .word{font-size:19px}
  nav.gnav{gap:2px}
  nav.gnav a.txt{font-size:13.5px;padding:.4em .55em}
  nav.gnav .btn{padding:.45em .85em;font-size:13.5px}
  .page-head .inner{padding:20px 0 30px}
  .article{padding:36px 0 64px}
  .article h2{margin-top:52px}
  ol.steps > li{padding:16px 16px 18px}
  ol.steps > li > .st-head{gap:12px}
  ol.steps > li > .st-head::before{width:38px;height:38px;font-size:16px}
  ol.steps .st-title{font-size:17px;padding-top:5px}
  .g-cards{grid-template-columns:1fr}
  .tbl th,.tbl td{display:block;width:auto;border-right:0}
  .tbl th{border-bottom:1px dashed var(--ink);padding-bottom:6px}
  .member{padding:18px}
  .member .mh img{width:76px;height:76px}
  .member .mh h2{font-size:22px}
  .legal-box{padding:18px 16px 24px}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:420px){
  .logo .word{display:none}
}

/* 項目の多い目次は2列（PCのみ） */
@media (min-width:641px){
  .toc.many ol{grid-template-columns:1fr 1fr;column-gap:24px}
}