/* japanesecolors.com — 共通スタイル
   共通ルール: 背景は純白 / 色面にボーダー・影を付けない */
:root{
  --paper:#FFFFFF; --ink:#26231E; --ink-2:#6E6A61; --hairline:#DAD5CB;
  --ai:#165E83; --shu:#EB6101;
  --serif:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"IBM Plex Sans","Hiragino Sans",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:var(--ai)}
main{max-width:1080px;margin:0 auto;padding:34px 24px 80px}

/* header / footer */
header.site{max-width:1080px;margin:0 auto;padding:28px 24px 22px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--hairline)}
header.site .mark{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
header.site .mark .jp{font-size:12px;color:var(--ink-2);display:block;letter-spacing:.3em}
header.site nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
@media (max-width:760px){header.site nav{margin-left:0;justify-content:flex-start}}
header.site nav a{font-size:13px;text-decoration:none;color:var(--ink-2)}
header.site nav a:hover{color:var(--ai)}
header.site nav a:first-child{color:var(--ai);font-weight:600}
footer.site{max-width:1080px;margin:0 auto;padding:26px 24px 48px;border-top:1px solid var(--hairline)}
footer.site p{font-size:12px;color:var(--ink-2);max-width:72ch;line-height:1.7}
footer.site .copyright{margin-top:14px;font-size:11.5px}

/* type */
.pageTitle{font-family:var(--serif);font-weight:700;font-size:34px;margin:18px 0 10px}
.pageTitle .jp{font-size:.6em;color:var(--ink-2);margin-left:.5em;font-weight:400}
.h2{font-family:var(--serif);font-weight:700;font-size:23px;margin:44px 0 16px}
.intro{font-size:16px;line-height:1.75;max-width:62ch;color:var(--ink)}
.countline{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:18px 0 10px;letter-spacing:.06em}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.crumb a{text-decoration:none}

/* 短冊 */
.rail{display:flex;gap:20px;align-items:flex-start;margin:26px 0 8px}
.rail.wrap{flex-wrap:wrap;row-gap:30px}
.card{text-decoration:none;color:var(--ink);display:block}
.strip{display:block;position:relative;transition:transform .25s ease;background-color:var(--c);
  background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
.card:hover .strip{transform:translateY(5px)}
.card:focus-visible{outline:2px solid var(--ai);outline-offset:4px}
.strip .kanji{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.28em}
.foot{margin-top:9px;text-align:center;display:block}
.foot .romaji{font-size:12.5px;font-weight:600;display:block}
.foot .hex{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:block;margin-top:1px}

/* 個別色ページ */
.hero{display:grid;grid-template-columns:180px 1fr;gap:44px;margin-top:26px}
.bolt{height:430px;position:relative;background-color:var(--c);
  background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px))}
.bolt .kanji{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:38px;letter-spacing:.3em}
.names h1{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1.12}
.names h1 .tag{font-size:.5em;color:var(--ink-2);font-weight:400}
.names .reading{font-size:15px;color:var(--ink-2);margin-top:10px}
.names .reading b{color:var(--ink);font-weight:600}
.lede{font-size:16px;line-height:1.75;max-width:56ch;margin-top:16px}
.ledger{margin-top:24px;border-top:1px solid var(--hairline);max-width:640px}
.ledger .row{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.ledger .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.ledger .v{line-height:1.7}
.ledger .v a{text-decoration:none;color:var(--ink)}
.ledger .v a:hover{color:var(--ai)}
.ledger .v code{font-family:var(--mono);font-size:12.5px;background:#F2F0EB;padding:1px 6px}
.chip{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:6px}

/* トップ */
.heroTop{margin:30px 0 8px}
.heroTop h1{font-family:var(--serif);font-weight:700;font-size:42px;line-height:1.2;max-width:20ch}
.heroTop .intro{margin-top:14px}
.hubGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 26px;margin-top:22px}
.tile{display:block;text-decoration:none;color:var(--ink)}
.tile:hover .t{color:var(--ai)}
.spectrum{display:flex;height:56px}
.spectrum span{flex:1}
.tbody{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px}
.t{font-family:var(--serif);font-weight:700;font-size:20px}
.t .jp{font-size:.72em;color:var(--ink-2);margin-left:.5em;font-weight:400}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

@media (max-width:640px){
  .hero{grid-template-columns:1fr}
  .bolt{height:150px}
  .bolt .kanji{writing-mode:horizontal-tb;top:50%;transform:translate(-50%,-50%);font-size:30px;letter-spacing:.4em}
  .heroTop h1{font-size:30px}
  .rail{flex-wrap:wrap;gap:14px}
  main{padding:22px 16px 60px}
  .pageTitle{font-size:26px}
  header.site{padding:18px 16px 14px;gap:10px}
  header.site nav{gap:10px 12px}
  header.site nav a{font-size:12.5px}
  .hubPhoto img{height:170px}
  .homePhoto img{height:210px}
  .photos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .photos img{height:120px}
  .ledger .row{grid-template-columns:86px 1fr;gap:10px}
}
@media (prefers-reduced-motion: reduce){.strip,.card:hover .strip{transition:none;transform:none}}

/* ---- v2追加: ボタン・値・スケール・写真・襲・パレット・静的ページ ---- */
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.say{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  color:var(--ai);vertical-align:-6px;border-radius:50%}
.say:hover{background:#EDF2F5}
.copy{font-family:var(--mono);font-size:12.5px;background:#F2F0EB;padding:2px 8px}
.copy:hover{background:#E9E5DC}
.dim{font-size:11px;color:var(--ink-2)}
.dim2{font-size:13px;color:var(--ink-2);max-width:62ch;line-height:1.7}
.ctr{display:inline-block;padding:2px 9px;font-family:var(--mono);font-size:11.5px;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(38,35,30,.14)}
.dl{font-size:13px;color:var(--ai);text-decoration:underline;text-underline-offset:3px}
section{margin-top:8px}
.story p{font-size:16px;line-height:1.85;max-width:66ch}
.scale{display:flex;max-width:640px;height:64px;margin-top:14px}
.scale .cell{flex:1;position:relative}
.scale .cell span{display:none;position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;color:var(--ink-2)}
.scale .cell:hover span{display:block}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:14px;max-width:860px}
.photos img{width:100%;height:170px;object-fit:cover;display:block}
.photos figcaption{font-size:11px;color:var(--ink-2);margin-top:5px}
.photos a{color:var(--ink-2)}
.hubPhoto{margin:22px 0 4px;max-width:860px}
.hubPhoto img{width:100%;height:220px;object-fit:cover;display:block}
.hubPhoto figcaption{font-size:11px;color:var(--ink-2);margin-top:5px}
.hubPhoto a{color:var(--ink-2)}
/* 襲の色目 */
.kasaneGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 28px;margin-top:30px}
.kasane .kLayers{display:flex;flex-direction:column}
.kasane .kL{display:block;height:64px;text-align:left;position:relative}
.kasane a.kL:hover{opacity:.9}
.kActions{display:flex;gap:16px;align-items:center}
.copyHexes{font-size:12px;color:var(--ai);margin-top:6px}
.copyHexes:hover{text-decoration:underline;text-underline-offset:3px}
.kasane .kL:first-child{height:84px}
.kasane .kL span{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:10.5px;opacity:0;transition:opacity .15s}
.kasane .kL:hover span{opacity:1}
.kasane h2{font-family:var(--serif);font-weight:700;font-size:19px;margin-top:12px}
.kasane h2 .jp{font-size:.85em;color:var(--ink-2);font-weight:400;margin-left:.4em}
.kasane h2 .season{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);font-weight:400;margin-left:.7em;letter-spacing:.08em;text-transform:uppercase}
.kasane p{font-size:13px;color:var(--ink-2);line-height:1.7;margin-top:4px}
/* パレットメーカー */
.palCtrl{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin:26px 0 8px}
.palCtrl label{font-size:12px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.palCtrl input,.palCtrl select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--hairline);background:#fff;min-width:230px}
.palCtrl select{min-width:70px}
.btn{background:var(--ai);color:#fff;padding:9px 18px;font-size:14px;font-weight:600}
.btn:hover{background:#124C6A}
.btn.ghost{background:none;color:var(--ai);text-decoration:underline;text-underline-offset:3px}
.palStrip{width:100%;display:block}
/* トップ 追加導線 */
.duoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:20px;max-width:760px}
.duo{display:block;text-decoration:none;color:var(--ink)}
.duo:hover .t{color:var(--ai)}
.duo .duoSw{display:flex;gap:8px}
.duo .duoSw>span{display:flex;flex:1;height:52px}
.duo .duoSw i{flex:1}
.duo .t{display:block;font-family:var(--serif);font-weight:700;font-size:17px;margin-top:10px}
.duo .dim2{display:block;margin-top:2px}
/* 静的ページ */
.prose{max-width:66ch;margin-top:16px}
.prose p,.prose li{font-size:15px;line-height:1.8}
.prose ul{padding-left:22px;margin:10px 0}
.prose .h2{margin-top:30px}
footer.site nav{margin-top:10px;display:flex;gap:14px}
footer.site nav a{font-size:12px}
/* トースト */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:#fff;font-size:13px;padding:8px 16px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:50}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- v3追加: 統一動作・近白例外・Favorites ---- */
.card .stripLink{display:block}
.card .stripLink:focus-visible{outline:2px solid var(--ai);outline-offset:4px}
.foot a.romaji{text-decoration:none;color:var(--ink)}
.foot a.romaji:hover{color:var(--ai)}
.foot button.hex{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:block;margin:1px auto 0}
.foot button.hex:hover{color:var(--ai)}
/* 近白例外: ヘアライン1周（clip形状に沿う二層方式）。ユーザー承認済みの唯一の縁 */
.strip{--paleShape:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
.strip .kanji{z-index:1}
.strip.pale{background-color:var(--hairline);background-image:none}
.strip.pale::before{content:"";position:absolute;inset:1px;background-color:var(--c);
  background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  clip-path:var(--paleShape)}
.bolt .kanji{z-index:1}
.bolt.pale{background-color:var(--hairline);background-image:none}
.bolt.pale::before{content:"";position:absolute;inset:1px;background-color:var(--c);
  background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px))}
.pale2{box-shadow:inset 0 0 0 1px var(--hairline)}
.homePhoto{margin:26px 0 8px}
.homePhoto img{height:300px}
.hubLink{text-decoration:none;color:var(--ink)}
.hubLink:hover{color:var(--ai)}
/* Favorites */
.favBtn{font-size:13px;color:var(--ai)}
.favBtn:hover{text-decoration:underline;text-underline-offset:3px}
.favBtn.small{font-size:12px;margin-top:6px}
.fRow{display:grid;grid-template-columns:auto 96px 1fr auto;gap:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--hairline)}
.fCtl{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.fCtl button{font-size:11px;color:var(--ink-2);width:22px;height:22px}
.fCtl button:hover{color:var(--ai)}
.fSw{display:block;width:96px;height:64px}
.fSw.multi{display:flex}
.fSw.multi i{flex:1}
.fType{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:block}
.fName{font-family:var(--serif);font-weight:700;font-size:17px;border:0;background:none;width:100%;padding:2px 0}
.fName:not(.fixed):focus{outline:none;border-bottom:1px solid var(--ai)}
.fName.fixed{display:block}
.fHex{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:block;margin-top:2px}
.fNote{font:inherit;font-size:13px;width:100%;max-width:480px;border:0;border-bottom:1px dashed var(--hairline);
  background:none;margin-top:8px;resize:none;overflow-y:hidden;color:var(--ink)}
.fNote:focus{outline:none;border-bottom-color:var(--ai)}
.fDel{color:var(--ink-2);font-size:14px;padding:4px}
.fDel:hover{color:#A4343A}
@media (max-width:640px){.fRow{grid-template-columns:auto 64px 1fr auto}.fSw{width:64px}}
.srcline{font-size:11px;color:var(--ink-2);margin-top:10px}
.srcline a{color:var(--ink-2)}
.srcline a:hover{color:var(--ai)}
.srcwrap{margin-top:14px}
/* お問い合わせフォーム */
.contactForm{max-width:480px;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.contactForm label{font-size:13px;color:var(--ink-2)}
.contactForm input,.contactForm textarea{font:inherit;font-size:14px;width:100%;padding:8px 10px;border:1px solid var(--hairline);background:#fff;color:var(--ink);margin-top:4px}
.contactForm input:focus,.contactForm textarea:focus{outline:none;border-color:var(--ai)}
.contactForm .btn{align-self:flex-start;border:0;cursor:pointer}
.contactForm .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.formNote{font-size:13.5px;padding:9px 12px;max-width:480px}
.formNote.ok{background:#EAF3EC;color:#1E5631}
.formNote.err{background:#F7E9E7;color:#8A2E22}

/* ---- v4: ボタン近傍トースト & hover不透明度 ---- */
.tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;
  font-size:12px;padding:5px 10px;opacity:0;transition:opacity .15s;pointer-events:none;
  z-index:60;white-space:nowrap}
.tip.on{opacity:1}
a.tip{text-decoration:none}
a.tip.on{pointer-events:auto}
a:hover{opacity:.9}
.card .stripLink:hover,.tile:hover,.duo:hover{opacity:.9}
/* LW Simple Forms */
.lwsfWrap h2{font-size:15px;margin:18px 0 4px;font-family:var(--sans)}
.lwsfWrap .must{color:#B13546;margin-left:4px}
.lwsfWrap .inpt input,.lwsfWrap .inpt textarea{font:inherit;font-size:14px;width:100%;max-width:480px;padding:8px 10px;border:1px solid var(--hairline);background:#fff;color:var(--ink)}
.lwsfWrap .inpt input:focus,.lwsfWrap .inpt textarea:focus{outline:none;border-color:var(--ai)}
.lwsfWrap .sbmt,.lwsfWrap .lwsf-confirm-buttons{margin-top:20px;display:flex;gap:12px}
.lwsfWrap button,.lwsfWrap input[type=submit]{font:inherit;font-size:14px;font-weight:600;background:var(--ai);color:#fff;padding:9px 18px;border:0;cursor:pointer}
.lwsfWrap button:hover,.lwsfWrap input[type=submit]:hover{background:#124C6A}
.lwsfWrap .lwsf-error{color:#8A2E22;font-size:12.5px;margin:4px 0 0}
.lwsfWrap .home_btn{margin-top:22px}
.say.saying{background:#EDF2F5;color:#124C6A}
/* 延喜式レシピ層 */
.engishiki{margin-top:8px}
.ezEntry{margin-top:26px;max-width:640px}
.ezName{font-family:var(--serif);font-weight:700;font-size:19px}
.ezReading{font-size:12px;color:var(--ink-2);font-weight:400;margin-left:6px}
.ezTitle{font-size:13px;color:var(--ink-2);font-weight:400;margin-left:8px;font-family:var(--sans)}
.ezTable{margin-top:10px;border-top:1px solid var(--hairline)}
.ezFabric{font-size:13px;font-weight:600;padding:8px 0 6px}
.ezFabric .ezNote{font-weight:400;color:var(--ink-2)}
.ezRow{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:6px 0;border-top:1px dashed var(--hairline);font-size:13.5px}
.ezRow .ezJa{font-family:var(--serif);letter-spacing:.04em}
.ezRow .ezEn{color:var(--ink)}
.ezOthers{font-size:12.5px;color:var(--ink-2);margin-top:8px;max-width:62ch;line-height:1.7}
.ezSource{margin-top:20px;max-width:640px}
.ezSource summary{font-size:13px;color:var(--ai);cursor:pointer}
.ezKanbun{font-family:var(--serif);font-size:14px;line-height:2.1;margin-top:10px;color:var(--ink);
  border-left:2px solid var(--hairline);padding-left:16px;letter-spacing:.03em}
.ezCite{font-size:11.5px;color:var(--ink-2);margin-top:12px}
@media (max-width:640px){.ezRow{grid-template-columns:110px 1fr;gap:10px}}
/* Translate your color */
.trCtrl{align-items:center}
.trCtrl input[type=color]{width:44px;height:40px;padding:2px;border:1px solid var(--hairline);background:#fff;cursor:pointer}
.trSwatch{display:inline-block;width:40px;height:40px;background:#4A90D9}
.trOut{margin-top:26px;max-width:720px}
.trRow{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.trSw{display:block;height:96px;position:relative;background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05))}
.trKanji{position:absolute;top:8px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;
  font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.2em}
.trName{font-size:15px;font-weight:600;text-decoration:none}
.trMeta{display:block;margin-top:3px}
.trDe{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-left:8px}
.trLede{font-size:13px;color:var(--ink-2);line-height:1.7;margin-top:6px;max-width:58ch}
@media (max-width:640px){.trRow{grid-template-columns:72px 1fr;gap:12px}.trSw{height:72px}}
/* 今日の色 */
.cotdCard{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;max-width:640px;
  margin:26px 0 4px;text-decoration:none;color:var(--ink)}
.cotdCard:hover .cotdName{color:var(--ai)}
.cotdSw{display:block;height:96px;position:relative;background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.05))}
.cotdKanji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.2em;white-space:nowrap}
.cotdLabel{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cotdName{display:block;font-family:var(--serif);font-weight:700;font-size:21px;margin-top:4px}
.cotdHex{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:400;margin-left:8px}
.cotdLede{display:block;font-size:13px;color:var(--ink-2);line-height:1.7;margin-top:5px;max-width:56ch}
@media (max-width:640px){.cotdCard{grid-template-columns:88px 1fr;gap:14px}.cotdSw{height:76px}}
/* 写真→パレット */
.phDrop{max-width:640px;border:1px dashed var(--hairline);padding:34px 20px;text-align:center;
  font-size:14px;color:var(--ink-2);cursor:pointer;margin-top:18px}
.phDrop.over,.phDrop:hover{border-color:var(--ai);color:var(--ai)}
.phDrop:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.phWrap{display:flex;gap:26px;align-items:flex-start;margin-top:20px;flex-wrap:wrap}
#phCanvas{border:1px solid var(--hairline)}
.phOut{flex:1;min-width:280px}
.phDe{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-2);margin-top:1px}
/* 季節ページ */
.seasonNav{font-size:14px;margin-top:18px}
.seasonNav a{text-decoration:none;font-weight:600}
.seasonSec{margin-top:18px}
.seasonCard{display:block}
.seasonCard .why{display:block;text-align:center;font-size:10.5px;color:var(--ink-2);margin-top:3px;max-width:104px;line-height:1.5}