/* yooi.jp 下層ページ共通の型（トップ試作v3.9の見た目を引き継ぐ） */
:root{ --yellow:#F4CA51; --paper:#FFFDF7; --ink:#26242A; --sub:#625E62; --cream:#FBF4E2; }
*{box-sizing:border-box; margin:0; padding:0;}
/* 本文書体の決着（2026-10-29）: PC=Zen Kaku Gothic New／スマホ(800px以下)=M PLUS 1p */
body{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif; color:var(--ink); background:var(--paper); line-height:2; font-size:15.5px; overflow-x:hidden;}
@media(max-width:800px){ body{font-family:"M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;} }
img{max-width:100%; height:auto;}
a{color:inherit;}
strong{font-weight:700;}

header{display:flex; align-items:center; gap:26px; padding:14px 24px; background:var(--paper);}
header img{height:38px; display:block;}
header nav{display:flex; gap:20px; font-size:13.5px; margin-left:auto;}
header nav a{text-decoration:none; font-weight:500;}
@media(max-width:800px){ header nav{display:none;} header .navc{display:block; margin-left:auto; font-size:13.5px; font-weight:700;} }
header .navc{display:none; text-decoration:none;}

/* 頭の帯: 黄の大地＋巨大な輪郭英字＋墨の帯の見出し＋白フチの写真/絵（参考=ニュービレッジ/グッドパッチの下層の型・2026-10-29） */
.band{background:var(--yellow); padding:84px 24px 76px; position:relative; overflow:hidden;}
.band .eng{position:absolute; top:-18px; left:-10px; font-weight:900; font-size:clamp(110px,17vw,230px); line-height:.9; letter-spacing:.04em; color:transparent; -webkit-text-stroke:2px rgba(255,253,247,.6); white-space:nowrap; pointer-events:none; user-select:none;}
.band .eng.b{top:auto; bottom:-30px; left:auto; right:-14px; font-size:clamp(70px,10vw,140px); -webkit-text-stroke:1.5px rgba(255,253,247,.35);}
.band .in{max-width:1000px; margin:0 auto; position:relative;}
.band .in.hasv{display:grid; grid-template-columns:1.2fr .85fr; gap:48px; align-items:center;}
.band .kicker{font-size:13px; font-weight:700; letter-spacing:.14em; margin-bottom:20px;}
.band h1{font-size:clamp(28px,3.7vw,46px); line-height:1.6; font-weight:900;}
.band h1 .bk{display:inline-block; background:var(--ink); color:var(--paper); padding:.1em .4em .14em; margin:0 0 10px; line-height:1.5;}
/* 箱なしの見出し（h1style:plain）: 指定した切れ目以外で折らない。長い行が入るので字は少し控えめ（2026-10-29） */
.band h1.plain{font-size:clamp(22px,3vw,40px);}
.band h1.plain .ln{white-space:nowrap;}
.band .lead{font-size:clamp(15px,1.4vw,17px); font-weight:700; margin-top:20px; max-width:34em; line-height:2;}
.band .visual{position:relative;}
.band .vcard{background:#fff; padding:12px 12px 34px; box-shadow:0 16px 38px rgba(38,36,42,.22); transform:rotate(2deg);}
.band .vcard.noc{padding-bottom:12px;}
.band .vcard .cap{font-size:12px; color:#5a5340; margin-top:8px;}
.band .vcard .frame{aspect-ratio:4/3; background:#F8F1DC; position:relative; overflow:hidden;}
.band .vcard .frame svg{display:block; width:100%; height:100%;}
.vchars{display:flex; align-items:flex-end; justify-content:center; gap:26px; padding-top:30px;}
.vchars img.c1{width:clamp(110px,16vw,150px);}
.vchars img.c2{width:clamp(82px,12vw,112px);}
/* ＼〜／のセリフ（トップの合格場面と同じ型・黄の面の上で使う） */
.sayline{position:relative; font-family:'Yusei Magic',"Zen Kaku Gothic New","M PLUS 1p",sans-serif; font-size:16px; letter-spacing:.05em; white-space:nowrap; line-height:1;
  text-shadow:-2px -2px 0 var(--yellow),2px -2px 0 var(--yellow),-2px 2px 0 var(--yellow),2px 2px 0 var(--yellow),0 -2px 0 var(--yellow),0 2px 0 var(--yellow),-2px 0 0 var(--yellow),2px 0 0 var(--yellow);}
.sayline::before,.sayline::after{content:''; position:absolute; bottom:-2px; width:2.5px; height:14px; background:currentColor; border-radius:2px;}
.sayline::before{left:-14px; transform:rotate(-32deg);}
.sayline::after{right:-14px; transform:rotate(32deg);}
.says{display:flex; justify-content:center; gap:34px; margin-bottom:14px;}

main{padding:0 24px;}
main .in{max-width:860px; margin:0 auto; padding:64px 0 90px;}
main.article .in{max-width:760px;}
main h2{font-size:clamp(20px,2.2vw,26px); line-height:1.8; margin:56px 0 18px; font-weight:800;}
/* 見出しに黄のマーカー（書影の帯の型・2026-10-29「黄色と黒の色味が強すぎる」→薄く） */
main h2 .mk{background:linear-gradient(transparent 58%, rgba(244,202,81,.42) 58%, rgba(244,202,81,.42) 94%, transparent 94%); padding:0 2px;}
main .in > h2:first-child{margin-top:0;}
main h3{font-size:17px; margin:34px 0 12px; font-weight:700;}
main p{margin:0 0 18px; max-width:42em;}
main ul{margin:0 0 18px 1.4em;}
main li{margin-bottom:8px;}
main blockquote{border-left:4px solid var(--yellow); padding:4px 0 4px 18px; margin:0 0 18px; font-weight:500;}
.date{font-size:13px; color:var(--sub); margin-bottom:28px;}
.crumb{font-size:12.5px; color:var(--sub); margin-bottom:22px;}
.crumb a{color:var(--sub);}

.go{margin:26px 0;}
.go a{display:inline-block; font-weight:700; font-size:15px; border-bottom:2px solid var(--ink); padding:2px 4px; text-decoration:none;}
.go a::after{content:"→"; margin-left:10px; display:inline-block; transition:transform .25s;}
.go a:hover::after{transform:translateX(6px);}

/* 実話の数字 */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:30px 0;}
.figures .fig{background:var(--yellow); padding:20px 14px 16px; text-align:center;}
.figures .n{font-size:clamp(30px,3.4vw,42px); font-weight:900; line-height:1.2;}
.figures .n small{font-size:14px; font-weight:700; margin-left:2px;}
.figures .l{font-size:12.5px; font-weight:700; margin-top:4px; line-height:1.6;}
@media(max-width:620px){ .figures{grid-template-columns:1fr 1fr;} }

/* 白フチ写真 */
.shot{background:#fff; padding:12px 12px 34px; box-shadow:0 12px 30px rgba(38,36,42,.15); max-width:520px; margin:30px 0;}
.shot.r1{transform:rotate(-1.5deg);}
.shot.r2{transform:rotate(1.5deg);}
.shot.wide{max-width:100%; padding:14px; transform:none;}
.shot .cap{font-size:12px; color:#5a5340; margin-top:8px;}

/* 会社概要の表 */
.facts{width:100%; border-collapse:collapse; margin:10px 0 30px;}
.facts th,.facts td{border-top:1px solid #ddd2ba; padding:14px 8px; text-align:left; vertical-align:top; font-size:15px;}
.facts th{width:9em; font-weight:700; white-space:nowrap;}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:1px solid #ddd2ba;}

/* 読みものの一覧カード */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:30px 0;}
.cards a{display:block; background:#fff; box-shadow:0 10px 26px rgba(38,36,42,.08); text-decoration:none; padding:0 0 16px;}
.cards .thumb{background:var(--yellow); min-height:110px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15.5px; padding:16px 18px; text-align:center; line-height:1.7;}
.cards .t{font-size:14.5px; font-weight:700; line-height:1.8; padding:12px 18px 0;}
@media(max-width:620px){ .cards{grid-template-columns:1fr;} }

/* パーパスの言葉・大きな売りの言葉 */
.word{background:var(--cream); padding:34px 30px; margin:26px 0; font-weight:800; font-size:clamp(17px,1.9vw,21px); line-height:2;}
.word small{display:block; font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--sub); margin-bottom:10px;}
.word.big{font-size:clamp(19px,2.4vw,27px); line-height:1.9; margin:46px 0 22px; padding:36px 32px; border-left:8px solid var(--yellow);}

/* フォーム */
form .row{margin-bottom:22px;}
form label{display:block; font-weight:700; font-size:14.5px; margin-bottom:6px;}
form label .req{color:#C0392B; font-size:12px; margin-left:8px;}
form input[type=text],form input[type=email],form input[type=tel],form textarea{width:100%; max-width:560px; border:2px solid var(--ink); background:#fff; padding:10px 12px; font:inherit; font-size:15px;}
form textarea{min-height:170px; max-width:680px;}
form .chk{display:block; font-weight:500; margin-bottom:8px; font-size:15px;}
form .chk input{margin-right:8px;}
form button{display:inline-block; background:var(--ink); color:var(--paper); font:inherit; font-weight:700; font-size:16px; border:0; padding:14px 46px; cursor:pointer;}
form button:disabled{opacity:.45; cursor:default;}
#formMsg{font-weight:700; margin-top:16px;}

/* 問い合わせの帯（モコとタネが待っている=トップの合格場面の再現・2026-10-29） */
.ctaband{background:var(--yellow); padding:84px 24px;}
.ctaband .in{max-width:1040px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:end;}
.ctaband .cchars{padding-bottom:6px;}
.ctaband .cchars .vchars{padding-top:6px;}
.ctaband .cchars .vchars img.c1{width:120px;}
.ctaband .cchars .vchars img.c2{width:90px;}
@media(max-width:800px){ .ctaband .in{grid-template-columns:1fr;} .ctaband .cchars{margin-top:26px;} }
.ctaband h2{font-size:clamp(20px,2.2vw,30px); line-height:1.9; margin-bottom:34px; font-weight:800;}
/* 見出しの途中で折らない（キャラの分だけ幅が狭まっても崩れない=2026-10-29指摘） */
@media(min-width:801px){ .ctaband h2{white-space:nowrap;} }
.ctaband .exit{display:flex; justify-content:space-between; align-items:center; border-top:2px solid var(--ink); padding:16px 2px; font-weight:700; font-size:16px; text-decoration:none;}
.ctaband .exit::after{content:"→"; font-size:19px; transition:transform .25s;}
.ctaband .exit:hover::after{transform:translateX(8px);}

footer{background:var(--ink); color:#fff; padding:60px 24px 42px;}
footer .in{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:32px;}
footer .brand img{height:42px;}
footer .brand p{font-weight:700; margin-top:12px;}
footer ul{list-style:none; font-size:13.5px; display:grid; gap:11px; align-content:start;}
footer li a{opacity:.92; text-decoration:none;}
footer .muted{opacity:.6;}
footer .copy{grid-column:1/-1; font-size:12px; opacity:.75; margin-top:24px;}
@media(max-width:800px){ footer .in{grid-template-columns:1fr 1fr;} }

@media(max-width:800px){
  .band .in.hasv{grid-template-columns:1fr; gap:34px;}
  .band .visual{max-width:380px;}
}
@media(max-width:480px){
  .band{padding:60px 24px 52px;}
  .band h1{font-size:26px;}
  main .in{padding:48px 0 70px;}
  .ctaband{padding:64px 24px;}
}