:root{
--ground:#FCFBF8;
--paper:#FFFFFF;
--sunk:#F4F1EB;
--line:#E3DED3;
--line-2:#EFEBE3;
--ink:#1A1815;
--ink-2:#4E4940;
--muted:#847C6E;
--accent:#2C5A4B;
--accent-2:#E6EFEA;
--blue:#3D6FA8;
--blue-2:#325C8C;
--mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--wrap:min(1000px, 100% - 2.5rem);
--narrow:min(720px, 100% - 2.5rem);
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0; padding:0; background:var(--ground); color:var(--ink); font-family:var(--gothic); font-size:16px; line-height:1.95; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--mincho); font-weight:600; line-height:1.5; text-wrap:balance}
p{margin:0}
/* ---- shell nav ---- */
.shell{
position:sticky; top:0; z-index:50;
background:rgba(252,251,248,.94); backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.shell-in{
width:var(--wrap); margin-inline:auto; display:flex; align-items:center;
gap:1.2rem 2rem; min-height:62px; flex-wrap:wrap; padding:.5rem 0;
}
.logo{font-family:var(--mincho); font-weight:700; font-size:1.1rem; letter-spacing:.04em; white-space:nowrap}
.nav{display:flex; gap:.2rem 1.5rem; margin-left:auto; flex-wrap:wrap}
.nav a{
font-size:.87rem; color:var(--ink-2); text-decoration:none;
padding:.35rem 0; white-space:nowrap; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(max-width:640px){
.shell-in{gap:.6rem 1.2rem}
.nav{margin-left:0; width:100%; gap:.2rem 1.1rem}
.nav a{font-size:.82rem}
}
/* ---- blue image placeholders ---- */
.img{
background:var(--blue); aspect-ratio:var(--ar,16/9);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
color:#fff; text-align:center; padding:1rem;
}
.img b{font-family:var(--mono); font-size:.9rem; letter-spacing:.06em}
.img span{font-size:.78rem; opacity:.82; line-height:1.5; max-width:30ch}
.img.sq{--ar:1/1}
.img.four{--ar:4/3}
.img.wide{--ar:21/9}
.img.strip{--ar:3/1}
img.img{display:block; width:100%; object-fit:cover; padding:0; background:none}
/* ---- sections ---- */
.page{display:none}
.page.on{display:block}
section{padding:4.5rem 0; scroll-margin-top:70px}
section + section{border-top:1px solid var(--line-2)}
.wrap{width:var(--wrap); margin-inline:auto}
.narrow{width:var(--narrow); margin-inline:auto}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; color:var(--accent); margin-bottom:.9rem}
h2.head{font-size:clamp(1.35rem,3.2vw,1.75rem); margin-bottom:1.6rem}
.lead{color:var(--ink-2); font-size:1rem; line-height:2.1}
.lead + .lead{margin-top:1.1rem}
/* ---- hero ---- */
.hero{padding:3.5rem 0 4rem}
.hero h1{font-size:clamp(1.7rem,5vw,2.7rem); line-height:1.6; letter-spacing:.01em}
.hero .sub{margin-top:1.2rem; font-size:1.05rem; color:var(--ink-2); line-height:2}
.hero .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem}
/* ---- hero over image ---- */
.hero-img{
position:relative; background:var(--blue) var(--hero-img, none) center/cover;
min-height:min(560px, 62vw);
display:flex; align-items:center;
padding:4.5rem 0; overflow:hidden;
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-img::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,14,20,.62) 0%, rgba(10,14,20,.42) 55%, rgba(10,14,20,.28) 100%)}
.hero-img .wrap{position:relative; z-index:2}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-img h1{color:#fff; font-size:clamp(1.55rem,4.4vw,2.5rem); line-height:1.65; text-shadow:0 1px 24px rgba(0,0,0,.35)}
.hero-img .sub{color:rgba(255,255,255,.94); margin-top:1.3rem; font-size:clamp(.9rem,1.6vw,1.02rem); line-height:2.1; max-width:46rem; text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-img .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem}
.hero-img .btn.ghost{border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08)}
.imgtag{
position:absolute; right:1.1rem; bottom:.9rem; z-index:2;
font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.72); letter-spacing:.06em;
}
.btn{
display:inline-block; padding:.85rem 1.7rem; border-radius:2px;
font-weight:700; font-size:.92rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer;
font-family:var(--gothic);
}
.btn.line{background:#06C755; color:#fff}
.btn.ghost{border-color:var(--line); color:var(--ink); background:var(--paper)}
/* ---- compare ---- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.8rem}
@media(max-width:700px){.compare{grid-template-columns:1fr}}
.compare .c-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.5rem}
table.cmp{width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:.9rem}
table.cmp th, table.cmp td{padding:.75rem .9rem; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top}
table.cmp thead th{font-size:.8rem; color:var(--muted); font-weight:500; border-bottom:1px solid var(--line)}
table.cmp thead th:last-child{color:var(--accent); font-weight:700}
table.cmp td:first-child{color:var(--muted); font-size:.82rem; white-space:nowrap; width:7rem}
table.cmp td:last-child{font-weight:700; color:var(--accent)}
.tw{overflow-x:auto}
/* ---- genre grid ---- */
.genres{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.genres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.genres{grid-template-columns:1fr}}
.genre h3{font-family:var(--gothic); font-size:.98rem; font-weight:700; margin-top:.8rem; min-height:3em}
.genre p{font-size:.84rem; color:var(--muted); line-height:1.8; margin-top:.2rem; min-height:3.6em}
/* ---- points ---- */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.points{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.points{grid-template-columns:1fr}}
.point .n{font-family:var(--mono); font-size:.68rem; color:var(--accent); letter-spacing:.1em; margin-top:.85rem; display:block}
.point h3{font-family:var(--gothic); font-size:1.05rem; font-weight:700; margin-top:.15rem; min-height:1.6em}
.point p{font-size:.86rem; color:var(--ink-2); line-height:1.9; margin-top:.45rem; min-height:3.8em}
.grouphead{
font-family:var(--gothic); font-size:1rem; font-weight:700; color:var(--ink);
margin-top:2.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.grouphead:first-of-type{margin-top:1.4rem}
.uses + .grouphead{margin-top:3rem}
/* ---- about over image ---- */
.about-img{
position:relative; background:var(--blue) var(--about-img, none) center/cover;
min-height:min(420px, 46vw);
display:flex; align-items:center; overflow:hidden;
padding:4.5rem 0; border-top:0;
}
.about-img::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,14,20,.66) 0%, rgba(10,14,20,.46) 60%, rgba(10,14,20,.3) 100%)}
.about-img .wrap{position:relative; z-index:2}
.about-img h2{color:#fff; font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.6; text-shadow:0 1px 24px rgba(0,0,0,.35)}
.about-img p{color:rgba(255,255,255,.94); margin-top:1.1rem; font-size:clamp(.88rem,1.5vw,1rem); line-height:2.1; text-shadow:0 1px 16px rgba(0,0,0,.4)}
/* ---- who ---- */
.who{margin-top:1.6rem; display:grid; gap:.1rem}
.who li{list-style:none; padding:.75rem 0 .75rem 1.6rem; border-bottom:1px solid var(--line-2); position:relative; font-size:.95rem}
.who li::before{content:""; position:absolute; left:.3rem; top:1.5rem; width:5px; height:5px; background:var(--accent); border-radius:50%}
.who li:last-child{font-weight:700}
ul.who{padding:0; margin:1.6rem 0 0}
/* ---- flow ---- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem}
@media(max-width:820px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.flow{grid-template-columns:1fr}}
.step{background:var(--paper); border:1px solid var(--line); padding:1.2rem 1.1rem}
.step .n{font-family:var(--mono); font-size:.66rem; color:var(--accent); letter-spacing:.1em}
.step h3{font-family:var(--gothic); font-size:.95rem; font-weight:700; margin-top:.3rem}
.step p{font-size:.8rem; color:var(--muted); line-height:1.8; margin-top:.4rem; min-height:5.4em}
/* ---- faq ---- */
.faq{margin-top:1.8rem; border-top:1px solid var(--line)}
.qa{padding:1.3rem 0; border-bottom:1px solid var(--line-2)}
.qa .q{display:flex; gap:.85rem; align-items:flex-start; font-weight:700; font-size:.98rem; line-height:1.7}
.qa .a{display:flex; gap:.85rem; align-items:flex-start; color:var(--ink-2); font-size:.93rem; line-height:1.9; margin-top:.6rem}
.qm,.am{
flex:none; width:1.7rem; height:1.7rem; border-radius:2px;
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:.85rem; font-weight:600; line-height:1; margin-top:.1rem;
}
.qm{background:var(--accent); color:#fff}
.am{background:var(--accent-2); color:var(--accent); border:1px solid var(--accent)}
/* ---- cta band ---- */
.band{background:var(--sunk); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* 下部の LINE 欄と申込欄は、見出しから本文・ボタンまで中央にそろえる。
#calc と同じ扱い。上のヒーローは左寄せのままにしておく。 */
body.sea .lineband .wrap{text-align:center}
body.sea .lineband .head::after{margin-inline:auto}
.lineband .cta{display:flex; justify-content:center}
/* 友だち追加QR。スマホは指で押せるので出さない（ボタンの真下に重複させない） */
.qrbox{display:none}
@media (min-width:761px){
.qrbox{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; margin-top:1.4rem}
.qrbox img{width:120px; height:120px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:6px}
.qrbox p{margin:0; text-align:center; font-size:.92rem; color:var(--muted); line-height:1.7}
}
body.sea #contact > .narrow > .eyebrow,
body.sea #contact > .narrow > .head,
body.sea #contact > .narrow > .formhead{text-align:center}
body.sea #contact > .narrow > .head::after{margin-inline:auto}
body.sea #contact > .narrow > .formhead{border-left:0; border-top:3px solid var(--accent)}
.band .box{background:var(--paper); border:1px solid var(--line); padding:2rem 2rem 2.2rem; margin-top:1.8rem}
.band .price{font-size:.95rem; color:var(--ink-2); line-height:2.1}
.band .strong{font-weight:700; color:var(--ink); margin-top:1rem; font-size:1rem}
.ways{display:grid; gap:.6rem; margin-top:1.6rem}
.way{display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; border:1px solid var(--line-2); background:var(--paper)}
.way.pri{border-color:#06C755; background:#F2FCF6}
.way .k{font-weight:700; font-size:.92rem; flex:none; width:5.5rem}
.way .v{font-size:.85rem; color:var(--ink-2)}
@media(max-width:560px){.way{flex-wrap:wrap; gap:.2rem} .way .k{width:auto}}
/* ---- company table ---- */
table.co{width:100%; border-collapse:collapse; margin-top:1.6rem; font-size:.93rem}
table.co th{width:9.5rem; text-align:left; font-weight:500; color:var(--muted); font-size:.86rem; padding:.95rem .8rem .95rem 0; border-bottom:1px solid var(--line-2); vertical-align:top; white-space:nowrap}
table.co td{padding:.95rem 0; border-bottom:1px solid var(--line-2); vertical-align:top}
@media(max-width:560px){
table.co th{width:auto; display:block; border:0; padding-bottom:0}
table.co td{display:block; padding-top:.2rem}
}
.biz{margin-top:1.4rem; display:grid; gap:1.6rem}
.biz h3{font-family:var(--gothic); font-size:1rem; font-weight:700; padding-left:.8rem; border-left:3px solid var(--accent)}
.biz p{font-size:.92rem; color:var(--ink-2); line-height:2; margin-top:.5rem}
.photos{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem}
@media(max-width:700px){.photos{grid-template-columns:1fr}}
/* ---- uses ---- */
.uses{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.uses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.uses{grid-template-columns:1fr}}
.use h3{font-family:var(--gothic); font-size:1rem; font-weight:700; margin-top:.85rem; min-height:1.6em}
.use p{font-size:.85rem; color:var(--ink-2); line-height:1.9; margin-top:.3rem; min-height:3.8em}
/* ---- form ---- */
.form{background:var(--paper); border:1px solid var(--line); padding:2rem; margin-top:1.8rem}
.field{display:grid; gap:.4rem; margin-bottom:1.3rem}
.field label{font-size:.86rem; font-weight:700}
.field label .req{color:#B3402A; font-size:.72rem; font-weight:500; margin-left:.4rem}
.field label .opt{color:var(--muted); font-size:.72rem; font-weight:400; margin-left:.4rem}
.field input, .field textarea{
font-family:var(--gothic); font-size:.95rem; padding:.7rem .8rem;
border:1px solid var(--line); border-radius:2px; background:var(--ground); color:var(--ink); width:100%;
}
.field textarea{min-height:8rem; resize:vertical; line-height:1.9}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media(max-width:600px){.form .row{grid-template-columns:1fr} .form{padding:1.4rem}}
.form .submit{background:var(--accent); color:#fff; border:0; padding:.95rem 2.4rem; font-weight:700; font-size:.95rem; border-radius:2px; cursor:pointer; font-family:var(--gothic)}
.formmsg{margin-top:1rem; padding:.9rem 1.1rem; font-size:.9rem; border-radius:2px}
.formmsg.ok{background:var(--accent-2); color:var(--accent); border-left:3px solid var(--accent)}
.formmsg.ng{background:#FBEDE9; color:#8A2E1C; border-left:3px solid #B3402A}
.form .privacy{font-size:.8rem; color:var(--muted); margin-top:1rem; line-height:1.8}
.photos2{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem}
@media(max-width:700px){.photos2{grid-template-columns:1fr}}
.subhead{font-family:var(--gothic); font-size:1.05rem; font-weight:700; margin-top:3rem; padding-bottom:.7rem; border-bottom:2px solid var(--ink)}
.pagehead{padding:3.2rem 0 1rem}
.pagehead h1{font-size:clamp(1.6rem,4vw,2.2rem)}
.draft{background:var(--accent-2); color:var(--accent); font-size:.84rem; padding:.8rem 1.1rem; margin-bottom:2rem; border-left:3px solid var(--accent)}
.legal h3{font-family:var(--gothic); font-size:1rem; font-weight:700; margin-top:2rem}
.legal h3:first-child{margin-top:0}
.legal p{font-size:.9rem; color:var(--ink-2); line-height:2.1; margin-top:.5rem}
.legal p.pre{margin-bottom:2rem}
.legal p.post{margin-top:2.5rem; color:var(--muted); font-size:.85rem}
/* ---- footer ---- */
footer{background:var(--ink); color:#CFC9BE; padding:2.6rem 0; font-size:.82rem; line-height:2}
footer .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
footer b{color:#fff; font-family:var(--mincho); font-size:1rem; display:block; margin-bottom:.4rem}
footer a{color:#CFC9BE}
.flinks{display:flex; flex-direction:column; gap:.15rem; align-items:flex-start}
.flinks .copy{opacity:.6; margin-top:.7rem; font-size:.76rem}
@media(max-width:700px){.flinks{margin-top:1.2rem}}
/* ---- note bar ---- */
/* ================= fablee 追加 ================= */
.logo .brand{font-family:var(--mono); font-weight:700; letter-spacing:.02em; font-size:1.25rem}
.logo .by{font-family:var(--gothic); font-weight:400; font-size:.72rem; color:var(--muted); margin-left:.6rem}
.logo a{color:inherit; text-decoration:none}
.hero-img.fab::before{background:linear-gradient(90deg, rgba(20,40,60,.78) 0%, rgba(20,40,60,.55) 55%, rgba(20,40,60,.35) 100%)}
.hero-img .tag{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); padding:.3rem .7rem; margin-bottom:1.1rem}
/* 3つのしなくていい */
.nots{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media(max-width:700px){.nots{grid-template-columns:1fr}}
.not{background:var(--paper); border:1px solid var(--line); padding:1.6rem 1.4rem; position:relative}
.not .x{font-family:var(--mono); font-size:2rem; color:var(--accent); line-height:1}
.not h3{font-family:var(--gothic); font-size:1.08rem; font-weight:700; margin-top:.6rem}
.not p{font-size:.86rem; color:var(--ink-2); line-height:1.9; margin-top:.4rem; min-height:3.8em}
/* 仕組み図 */
.scheme{margin-top:2rem; background:var(--paper); border:1px solid var(--line); padding:1.6rem}
.scheme .row3{display:grid; grid-template-columns:1fr auto 1.3fr auto 1fr; gap:.8rem; align-items:center}
@media(max-width:700px){.scheme .row3{grid-template-columns:1fr} .scheme .arrow{transform:rotate(90deg)}}
.scheme .box{border:1px solid var(--line); padding:1rem; text-align:center; background:var(--ground)}
.scheme .box.main{border-color:var(--accent); background:var(--accent-2)}
.scheme .box b{display:block; font-family:var(--gothic); font-size:1rem}
.scheme .box span{display:block; font-size:.78rem; color:var(--ink-2); line-height:1.7; margin-top:.3rem}
.scheme .arrow{font-family:var(--mono); color:var(--accent); font-size:1.2rem; text-align:center}
.scheme .note2{font-size:.82rem; color:var(--muted); margin-top:1rem; line-height:1.8}
/* アイテム */
.items{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem .9rem; margin-top:1.4rem}
@media(max-width:900px){.items{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.items{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.items{grid-template-columns:repeat(2,1fr)}}
.items.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.items.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.items.g4{grid-template-columns:repeat(2,1fr)}}
.item h3{font-family:var(--gothic); font-size:.86rem; font-weight:700; margin-top:.5rem; line-height:1.5}
.item p{font-size:.74rem; color:var(--muted); line-height:1.6; margin-top:.1rem}
.item .img{padding:.5rem}
.item .img b{font-size:.7rem}
.item .img span{font-size:.7rem}
/* 料金 */
.price-box{background:var(--paper); border:2px solid var(--accent); padding:2rem; margin-top:2rem; display:grid; grid-template-columns:1.1fr 1fr; gap:2rem}
@media(max-width:700px){.price-box{grid-template-columns:1fr; padding:1.4rem}}
.price-box .big{font-family:var(--mincho); font-size:clamp(2rem,5vw,2.8rem); font-weight:700; line-height:1.2}
.price-box .big small{font-size:1rem; font-weight:400; color:var(--ink-2); margin-left:.3rem}
.price-box .plan{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--accent)}
.price-box .free{margin-top:1rem; padding:.7rem 1rem; background:var(--accent-2); color:var(--accent); font-weight:700; font-size:.92rem; border-left:3px solid var(--accent)}
.price-box .yr{margin-top:.8rem; font-size:.86rem; color:var(--ink-2)}
.price-box ul{margin:0; padding:0; list-style:none}
.price-box li{padding:.45rem 0 .45rem 1.5rem; position:relative; font-size:.9rem; border-bottom:1px solid var(--line-2)}
.price-box li::before{content:"✓"; position:absolute; left:.1rem; color:var(--accent); font-weight:700}
.price-box .h{font-family:var(--gothic); font-weight:700; font-size:.9rem; margin-bottom:.4rem}
/* 実質無料の計算 */
table.calc{width:100%; max-width:34rem; border-collapse:collapse; margin-top:1.6rem; font-size:.95rem; background:var(--paper); border:1px solid var(--line)}
table.calc td{padding:.75rem 1rem; border-bottom:1px solid var(--line-2)}
table.calc td:last-child{text-align:right; font-family:var(--mono); white-space:nowrap}
table.calc tr.sum td{font-weight:700; color:var(--accent); background:var(--accent-2); border-bottom:0}
/* 業種カード */
.inds{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media(max-width:700px){.inds{grid-template-columns:1fr}}
.ind{display:block; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--line); padding:1.4rem}
.ind:hover{border-color:var(--accent)}
.ind .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--accent)}
.ind h3{font-family:var(--gothic); font-size:1.05rem; font-weight:700; margin-top:.3rem}
.ind p{font-size:.84rem; color:var(--ink-2); line-height:1.8; margin-top:.4rem; min-height:3.6em}
.ind .go{font-size:.82rem; color:var(--accent); font-weight:700; margin-top:.6rem; display:block}
.ind.soon{opacity:.6}
/* ================= 写真を使わない表現(2026-09-15) =================
実写が用意できるまでの本番用。後から写真に差し替えられるよう、
マークアップの構造は写真版と同じにしてある。 */
/* 写真なしヒーロー: 海のグラデーション + 波線 */
.hero-plain{
position:relative; overflow:hidden;
display:flex; align-items:center;
min-height:min(540px, 60vw); padding:5rem 0;
background:
radial-gradient(900px 420px at 78% 115%, rgba(44,90,75,.50), transparent 68%),
linear-gradient(158deg, #132C3A 0%, #1B3F51 46%, #23596C 100%);
}
.hero-plain .wrap{position:relative; z-index:2}
.hero-plain .waves{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:1; pointer-events:none}
.hero-plain h1{color:#fff; font-size:clamp(1.55rem,4.4vw,2.5rem); line-height:1.65}
.hero-plain .sub{color:rgba(255,255,255,.93); margin-top:1.3rem; font-size:clamp(.9rem,1.6vw,1.02rem); line-height:2.1; max-width:46rem}
.hero-plain .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem}
.hero-plain .btn.ghost{border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.08)}
.hero-plain .tag{
display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38);
padding:.3rem .7rem; margin-bottom:1.1rem;
}
/* アイコンタイル(青い四角の置き換え) */
.ic-tile{
display:flex; align-items:center; justify-content:center;
aspect-ratio:var(--ar,4/3);
background:var(--paper); border:1px solid var(--line); color:var(--accent);
}
.ic-tile svg{width:100%; height:100%; max-width:6.6rem; max-height:6.6rem; padding:.6rem}
.ic-tile.sq{--ar:1/1}
.use .ic-tile{background:linear-gradient(180deg, var(--paper) 0%, var(--sunk) 100%)}
.item .ic-tile{--ar:1/1}
.item .ic-tile svg{max-width:4.6rem; max-height:4.6rem}
@media(max-width:460px){.item .ic-tile svg{max-width:3.8rem; max-height:3.8rem}}
/* ---- 無料プラン + オプション(2026-09-15) ---- */
.price-box.free-plan{border-color:var(--accent)}
.price-box .zero{font-family:var(--mincho); font-size:clamp(2.6rem,7vw,4rem); font-weight:700; line-height:1.1; color:var(--accent)}
.price-box .zero small{font-size:1.05rem; font-weight:400; color:var(--ink-2); margin-left:.4rem; font-family:var(--gothic)}
.price-box .zerosub{margin-top:.6rem; font-size:.95rem; color:var(--ink-2); line-height:2}
.why{margin-top:2rem; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--accent); padding:1.6rem 1.8rem}
.why h3{font-family:var(--gothic); font-size:1.02rem; font-weight:700}
.why p{font-size:.92rem; color:var(--ink-2); line-height:2.05; margin-top:.6rem}
/* ※ オプションカード用の .opts/.opt は削除(2026-09-16)。
フォームの「任意」バッジ .field label .opt と名前が衝突し、バッジに枠が付いていた。
プレミアムを作るときは .plan-card など別名にすること。 */
.note{font-size:.84rem; color:var(--muted); line-height:1.9; margin-top:1.2rem}
/* ---- 申込みフォーム(2026-09-16) ---- */
.formhead{background:var(--accent-2); border-left:3px solid var(--accent); padding:1rem 1.2rem; margin-bottom:1.8rem}
.formhead b{color:var(--accent); font-size:.95rem}
.formhead p{font-size:.86rem; color:var(--ink-2); line-height:1.9; margin-top:.3rem}
.field input[type=file]{
font-family:var(--gothic); font-size:.88rem; padding:.65rem .7rem;
border:1px dashed var(--line); border-radius:2px; background:var(--ground); width:100%; cursor:pointer;
}
.field input[type=file]::file-selector-button{
font-family:var(--gothic); font-size:.84rem; font-weight:700;
border:1px solid var(--line); background:var(--paper); color:var(--ink);
padding:.4rem .9rem; border-radius:2px; margin-right:.8rem; cursor:pointer;
}
.field .hint{font-size:.78rem; color:var(--muted); line-height:1.75}
.filelist{font-size:.8rem; color:var(--accent); line-height:1.8; margin-top:.4rem}
.consent{display:flex; gap:.7rem; align-items:flex-start; margin:.4rem 0 1.4rem; font-size:.86rem; line-height:1.9}
.consent input{flex:none; width:1.1rem; height:1.1rem; margin-top:.45rem; accent-color:var(--accent)}
.consent a{color:var(--accent)}
/* ---- ショップイメージ(2026-09-16) ---- */
.shopmock{margin-top:2rem; background:var(--paper); border:1px solid var(--line); padding:1.4rem}
.shopmock .mock-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.1rem}
.shopmock .mock-name{font-family:var(--mincho); font-size:clamp(1.1rem,2.6vw,1.45rem); font-weight:700; line-height:1.4}
.shopmock .mock-url{font-family:var(--mono); font-size:.74rem; color:var(--muted); letter-spacing:.04em}
.shopmock .mock-nav{display:flex; gap:1.2rem; font-size:.82rem; color:var(--muted); margin-top:.7rem; padding-bottom:.7rem; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.shopmock .goods{margin-top:1.4rem}
.shopmock .good .pr{font-size:.98rem}
/* お店ページ */
.shop-hero{background:var(--sunk); border-bottom:1px solid var(--line); padding:3rem 0}
.shop-hero h1{font-size:clamp(1.6rem,4.5vw,2.4rem)}
.shop-hero .sub{margin-top:.8rem; color:var(--ink-2); font-size:.98rem; line-height:2}
.shop-hero .meta{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em; margin-top:1rem}
.goods{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.goods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.goods{grid-template-columns:1fr}}
.good{background:var(--paper); border:1px solid var(--line); padding:0 0 1.1rem}
.good .body{padding:.9rem 1rem 0}
.good h3{font-family:var(--gothic); font-size:.98rem; font-weight:700}
.good .desc{font-size:.82rem; color:var(--muted); line-height:1.7; margin-top:.25rem; min-height:2.8em}
.good .pr{font-family:var(--mono); font-size:1.05rem; margin-top:.6rem}
.good .pr small{font-size:.72rem; color:var(--muted); font-family:var(--gothic); margin-left:.3rem}
.good .opts{font-size:.76rem; color:var(--muted); margin-top:.2rem}
.order{background:var(--paper); border:1px solid var(--line); padding:1.6rem; margin-top:1.8rem}
.order ol{margin:.6rem 0 0; padding-left:1.3rem; font-size:.92rem; line-height:2}
.powered{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em}
.powered a{color:var(--muted)}
/* ================= 海の雰囲気（body.sea のページだけ） 2026-09-17 =================
釣り船ページを「船長が申し込みたくなる」空気にするための上書きレイヤー。
★ body に class="sea" が付いたページにしか効かない。
/tsurimasa/ と /tokusho/ は従来のまま。
★ 元に戻したいときは index.html の から sea を外すだけ。
------------------------------------------------------------------ */
body.sea{
--ground:#F5F9FB;
--paper:#FFFFFF;
--sunk:#E7F1F7;
--line:#CBDFEA;
--line-2:#DFECF3;
--ink:#0E2431;
--ink-2:#3A5261;
--muted:#6A8492;
--accent:#0E5A7D; /* 海の青 */
--accent-2:#E1EFF7;
--sun:#DC7B33; /* 浮き・救命具の橙。ここぞという所だけ */
--deep:#0A3145; /* 深い海 */
font-size:17px;
}
/* ---- セクションの潮の満ち引き（白 → 浅瀬 → 白）---- */
body.sea section{padding:5.2rem 0}
body.sea section + section{border-top:0}
body.sea #nots,
body.sea #how,
body.sea #shopimage,
body.sea #contact{background:var(--sunk)}
body.sea #novelty{background:#FBF1E8; border-color:#EBD6C2}
/* ---- 見出しを大きく、波の下線を添える ---- */
body.sea .head{font-size:clamp(1.45rem,3.6vw,2.1rem); line-height:1.55}
body.sea .head::after{
content:""; display:block; width:5.5rem; height:9px; margin-top:.85rem;
background:repeat-x left center/22px 9px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9'%3E%3Cpath d='M0 6q2.75-5 5.5 0T11 6t5.5 0T22 6' fill='none' stroke='%230E5A7D' stroke-width='1.8'/%3E%3C/svg%3E");
opacity:.65;
}
body.sea .eyebrow{font-size:.7rem; letter-spacing:.2em}
body.sea .lead{font-size:1.02rem; line-height:2.05}
/* ---- 読みやすさ：本文を一段大きく ---- */
body.sea .not p, body.sea .use p{font-size:.92rem; line-height:1.95}
body.sea .not h3, body.sea .use h3{font-size:1.1rem}
body.sea .item h3{font-size:.92rem}
body.sea .item p{font-size:.78rem}
body.sea .step p{font-size:.86rem}
body.sea .qa .q{font-size:1.02rem}
body.sea .qa .a{font-size:.96rem}
/* ---- カード：細い罫線をやめて、浮かせる ---- */
body.sea .not,
body.sea .step,
body.sea .scheme,
body.sea .good,
body.sea .shopmock,
body.sea table.calc{
border:0; border-radius:12px;
box-shadow:0 1px 2px rgba(14,90,125,.07), 0 8px 24px -12px rgba(14,90,125,.28);
overflow:hidden;
}
body.sea .not{padding:1.8rem 1.5rem}
body.sea .not .x{color:var(--sun); font-size:2.2rem}
body.sea .step{padding:1.4rem 1.2rem}
body.sea .step .n{color:var(--sun); font-weight:700}
/* ---- アイコン：海の色を敷いて、線を太く見せる ---- */
body.sea .ic-tile{
border:0; border-radius:12px;
background:linear-gradient(170deg,#F2F8FC 0%, #DCEAF3 100%);
color:var(--accent);
}
body.sea .use .ic-tile{background:linear-gradient(170deg,#F2F8FC 0%, #DCEAF3 100%)}
body.sea .ic-tile svg{max-width:7.2rem; max-height:7.2rem}
body.sea .item .ic-tile svg{max-width:5rem; max-height:5rem}
/* ---- 仕組み図 ---- */
body.sea .scheme{padding:1.9rem}
body.sea .scheme .box{border:0; border-radius:10px; background:var(--sunk)}
body.sea .scheme .box.main{background:var(--accent); color:#fff}
body.sea .scheme .box.main span{color:rgba(255,255,255,.92)}
body.sea .scheme .arrow{color:var(--sun); font-size:1.5rem}
body.sea .scheme .note2{font-size:.9rem; color:var(--ink-2)}
body.sea .scheme .note2 b{color:var(--accent)}
/* ---- 料金：0円をページ最大の見せ場にする ---- */
body.sea #price{
background:linear-gradient(180deg,var(--deep) 0%, #0E4560 100%);
color:rgba(255,255,255,.93); position:relative;
}
body.sea #price::before{
content:""; position:absolute; left:0; right:0; top:0; height:26px;
background:repeat-x left top/120px 26px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26'%3E%3Cpath d='M0 0h120v10q-15 12-30 0T60 10 30 10 0 10z' fill='%23F5F9FB'/%3E%3C/svg%3E");
}
body.sea #price .head{color:#fff}
body.sea #price .head::after{filter:brightness(0) invert(1); opacity:.5}
body.sea #price .eyebrow{color:#8FCBE6}
body.sea #price .lead,
body.sea #price .note{color:rgba(255,255,255,.82)}
body.sea #price .note b{color:#fff}
body.sea #price .grouphead{color:#fff; border-color:rgba(255,255,255,.35)}
body.sea .price-box{
border:0; border-radius:16px; padding:2.4rem;
background:rgba(255,255,255,.07); backdrop-filter:blur(2px);
box-shadow:0 20px 50px -24px rgba(0,0,0,.6);
}
body.sea .price-box .plan{color:#8FCBE6; letter-spacing:.2em}
body.sea .price-box .zero{
font-size:clamp(4rem,13vw,7rem); line-height:1; color:#fff;
text-shadow:0 6px 30px rgba(0,0,0,.35);
}
/* 基本CSS の .zero small は color:var(--ink-2)。暗い背景では読めないので上書き */
body.sea .price-box .zero small{
font-size:.26em; font-weight:600; font-family:var(--gothic);
color:rgba(255,255,255,.8); margin-left:.14em; vertical-align:.62em;
}
body.sea .price-box .zerosub{color:rgba(255,255,255,.86); font-size:.95rem; margin-top:.8rem}
body.sea .price-box .free{
background:rgba(220,123,51,.18); color:#FFD9BB; border-left:4px solid var(--sun);
font-size:.95rem; border-radius:0 8px 8px 0;
}
body.sea .price-box .h{color:#fff; font-size:.95rem}
body.sea .price-box li{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.16); font-size:.95rem}
body.sea .price-box li::before{color:#7FD6A8}
body.sea .why{
background:rgba(255,255,255,.07); border-radius:12px; padding:1.6rem 1.7rem;
border:0; border-left:4px solid var(--sun);
}
body.sea .why h3{color:#fff}
body.sea .why p{color:rgba(255,255,255,.86)}
body.sea .why b{color:#FFD9BB}
/* ---- 取り分の表 ---- */
body.sea table.calc{font-size:1rem}
body.sea table.calc td{padding:.95rem 1.2rem}
body.sea table.calc tr.sum td{background:var(--accent); color:#fff; font-size:1.08rem}
/* ---- ショップ見本 ---- */
body.sea .shopmock{background:var(--paper); padding-bottom:1.4rem}
body.sea .good{box-shadow:0 1px 2px rgba(14,90,125,.06)}
body.sea .good .pr{color:var(--accent); font-weight:700}
/* ---- FAQ ---- */
body.sea .qa{border-bottom-color:var(--line-2)}
/* .qm は背景が accent なので文字は白のまま。ここを accent にすると文字が消える */
body.sea .qa .qm{background:var(--accent); color:#fff}
body.sea .qa .am{background:#FBEEE3; color:var(--sun); border-color:var(--sun)}
/* ---- ボタン：指で押しやすく ---- */
body.sea .btn{
border-radius:999px; padding:1rem 1.9rem; font-size:1rem; font-weight:700;
box-shadow:0 8px 20px -10px rgba(0,0,0,.45);
}
body.sea .btn.line{background:#06C755}
/* 申込ボタン。LINE を使わない人の受け皿としてヒーローにも並べる */
body.sea .btn.sun{background:var(--sun); color:#fff; border:0}
body.sea .form .submit{
border-radius:999px; padding:1.1rem 2.8rem; font-size:1.02rem;
background:var(--sun); box-shadow:0 10px 24px -12px rgba(220,123,51,.9);
}
/* ---- スマホ：画面下に常時ボタンを出す ---- */
.mobcta{display:none}
@media(max-width:760px){
body.sea .mobcta{
display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:60;
padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
border-top:1px solid var(--line);
}
body.sea .mobcta .btn{flex:1; text-align:center; padding:.9rem .6rem; font-size:.95rem}
body.sea .mobcta .btn.sun{background:var(--sun); color:#fff; border:0}
body.sea{padding-bottom:5rem}
}
/* ---- いまだけの2大特典（2026-09-17）---- */
body.sea .giftband{
background:linear-gradient(180deg,#FDF4EB 0%, #FBEDE0 100%);
border-top:1px solid #F0DCC8; border-bottom:1px solid #F0DCC8;
}
body.sea .giftband .eyebrow{color:var(--sun)}
body.sea .giftband .head::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9'%3E%3Cpath d='M0 6q2.75-5 5.5 0T11 6t5.5 0T22 6' fill='none' stroke='%23DC7B33' stroke-width='1.8'/%3E%3C/svg%3E");
}
.gifts{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.8rem}
@media(max-width:700px){.gifts{grid-template-columns:1fr}}
body.sea .giftcard{
background:#fff; border-radius:12px; padding:1.6rem 1.5rem;
border-top:4px solid var(--sun);
box-shadow:0 1px 2px rgba(180,110,50,.08), 0 10px 26px -14px rgba(180,110,50,.45);
}
body.sea .giftcard .gn{
display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
color:#fff; background:var(--sun); padding:.22rem .7rem; border-radius:999px;
}
body.sea .giftcard h3{font-family:var(--gothic); font-size:1.12rem; font-weight:700; margin-top:.7rem}
body.sea .giftcard p{font-size:.9rem; color:var(--ink-2); line-height:1.95; margin-top:.5rem}
body.sea .giftband .note{margin-top:1.2rem; font-size:.85rem; color:var(--ink-2)}
/* 料金カードの「※ロゴのご依頼も可能です」 */
body.sea .price-box .freesub{display:inline-block; font-weight:400; font-size:.85rem; opacity:.85; margin-top:.25rem}
/* ---- フッターを横1列に（2026-09-17）---- */
body.sea footer .wrap{display:block; text-align:center}
body.sea .flinks.one{
flex-direction:row; flex-wrap:wrap; justify-content:center;
align-items:center; gap:.4rem 1.4rem;
}
body.sea .flinks.one b{margin-bottom:0}
body.sea footer .copy{opacity:.55; font-size:.76rem; margin-top:1rem}
/* ---- ヒーロー背景動画（2026-09-17）----
.hero-plain の海グラデーションはそのまま残してある。
動画が読み込まれるまで／再生できない環境では、それが背景になる。 */
.hero-movie .hero-video{z-index:0}
.hero-movie::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(90deg, rgba(8,26,38,.78) 0%, rgba(8,26,38,.58) 52%, rgba(8,26,38,.34) 100%),
linear-gradient(180deg, rgba(8,26,38,.35) 0%, rgba(8,26,38,0) 42%);
}
.hero-movie .wrap{z-index:3}
.hero-movie .waves{z-index:2}
body.sea .hero-movie{min-height:min(600px, 66vw)}
/* ---- ヒーローの「ロゴ→グッズ」実例（2026-09-17）----
暗い動画の上に置くので、青いプレースホルダではなく半透明のタイルにしている。
実画像が入ったら .hstile の中身を ![]()
に差し替える。 */
body.sea .heroshow{margin-top:2.4rem}
body.sea .hslabel{
display:block; font-size:.78rem; letter-spacing:.04em;
color:rgba(255,255,255,.72); margin-bottom:.7rem;
}
body.sea .hsrow{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
body.sea .hstile{
width:84px; aspect-ratio:1/1; flex:none;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
border-radius:10px; text-align:center; padding:.4rem;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(3px);
}
body.sea .hstile.logo{
width:104px; background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92);
}
body.sea .hstile b{font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; color:#fff}
body.sea .hstile span{font-size:.62rem; line-height:1.4; color:rgba(255,255,255,.8)}
body.sea .hstile.logo b{color:#0A3145}
body.sea .hstile.logo span{color:#3A5261}
body.sea .hsarrow{color:rgba(255,255,255,.6); font-size:1.1rem; flex:none}
@media(max-width:560px){
body.sea .hstile{width:66px}
body.sea .hstile.logo{width:82px}
body.sea .hstile.sp-hide{display:none}
body.sea .hsarrow{display:none}
}
/* ヒーロー実例タイルに実画像が入ったとき（2026-09-17） */
body.sea .hstile{position:relative; overflow:hidden; padding:0}
body.sea .hstile img{width:100%; height:100%; object-fit:cover; display:block}
body.sea .hstile .hsfall{display:none}
body.sea .hstile.noimg{padding:.4rem}
body.sea .hstile.noimg .hsfall{
display:block; font-size:.62rem; line-height:1.4; color:rgba(255,255,255,.8); text-align:center;
}
body.sea .hstile.logo.noimg .hsfall{color:#3A5261}
/* 白抜きロゴを置くタイルは背景を濃色にする */
body.sea .hstile.logo.dark{background:#111; border-color:rgba(255,255,255,.35)}
/* ---- ヒーロー実例：ロゴを上、グッズ4点を下（2026-09-17 変更）----
横並びにすると1つ85pxまで縮むため、文章の下に置いてタイルを大きく取る。 */
body.sea .hslogo{
width:132px; aspect-ratio:1/1; margin-bottom:.9rem; border-radius:12px;
overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.3);
}
body.sea .hslogo img{width:100%; height:100%; object-fit:cover; display:block}
body.sea .hsrow{gap:.8rem}
body.sea .hstile{width:132px}
body.sea .hstile.logo{display:none} /* 旧レイアウトの名残があっても出さない */
@media(max-width:560px){
body.sea .hslogo{width:104px}
body.sea .hstile{width:calc((100% - 2.4rem) / 4); min-width:0}
body.sea .hstile.sp-hide{display:block} /* 4点とも出す */
body.sea .heroshow{margin-top:1.8rem}
}
/* ロゴ画像は不要になった（2026-09-17）。グッズ4点だけにして、その分タイルを大きくする */
body.sea .hslogo{display:none}
body.sea .hstile{width:150px}
@media(max-width:560px){ body.sea .hstile{width:calc((100% - 2.4rem) / 4)} }
/* ---- ショップ見本に実画像を入れる（2026-09-17）---- */
body.sea .mock-banner{
aspect-ratio:16/5; background:#0E0E0E; border-radius:10px; overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
/* ロゴが黒地に濃いグレーで沈んでいたので、少し起こして使う */
body.sea .mock-banner img{
height:118%; width:auto; object-fit:contain; display:block;
filter:brightness(1.45) contrast(1.2);
}
body.sea .goods.g4{grid-template-columns:repeat(4,1fr); gap:1.1rem}
@media(max-width:900px){ body.sea .goods.g4{grid-template-columns:repeat(2,1fr)} }
body.sea .good{border-radius:12px; overflow:hidden}
body.sea .good .gimg{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
body.sea .good .desc{min-height:0}
/* ---- ショップ見本のバナー：船の写真にロゴを重ねる（2026-09-17）----
banner.png が未アップでも、黒地にロゴだけ出て崩れない。 */
body.sea .mock-banner{position:relative; aspect-ratio:16/5}
body.sea .mock-banner .bnbg{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center 62%; filter:none;
}
body.sea .mock-banner::after{ /* ロゴを読ませるための覆い */
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(6,20,30,.72) 0%, rgba(6,20,30,.42) 46%, rgba(6,20,30,.12) 100%);
}
body.sea .mock-banner .bnmark{
position:relative; z-index:2; height:auto; width:auto;
max-height:74%; max-width:38%; margin-left:4%;
filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
@media(max-width:700px){
body.sea .mock-banner{aspect-ratio:16/7}
body.sea .mock-banner .bnmark{max-width:52%; max-height:72%}
}
/* バナーはロゴ合成済みの1枚を使う（2026-09-17）。
写真が入ったら、重ね用のロゴと覆いは消す。
banner.png が無いときは JS が .bnbg に noimg を付け、従来どおり黒地＋ロゴになる。 */
body.sea .mock-banner:not(.noimg)::after{content:none}
body.sea .mock-banner:not(.noimg) .bnmark{display:none}
body.sea .mock-banner .bnbg{object-position:center center}
/* バナー画像は 16:9。枠を合わせて切り落とさない（2026-09-17） */
body.sea .mock-banner{aspect-ratio:16/9}
@media(max-width:700px){ body.sea .mock-banner{aspect-ratio:16/9} }
/* ヒーローの海を明るく（2026-09-17）。
文字が乗る左側だけは暗さを残し、右の海側は大きく明るくしている。 */
body.sea .hero-movie::after{
background:
linear-gradient(90deg, rgba(8,26,38,.60) 0%, rgba(8,26,38,.36) 50%, rgba(8,26,38,.10) 100%),
linear-gradient(180deg, rgba(8,26,38,.22) 0%, rgba(8,26,38,0) 40%);
}
body.sea .hero-movie .hero-video{filter:brightness(1.10) saturate(1.06)}
/* 「売れた分が、そのまま収入になります」を中央寄せ（2026-09-17）。
表の中身だけは左右に振り分けたままにする（品目は左、金額は右）。 */
body.sea #calc .wrap{text-align:center}
body.sea #calc .head::after{margin-inline:auto}
body.sea #calc table.calc{margin-inline:auto}
body.sea #calc table.calc td{text-align:left}
body.sea #calc table.calc td:last-child{text-align:right}
/* バナーは画像全体を見せる（切り落とさない）2026-09-17 */
body.sea .mock-banner{background:#0E0E0E}
body.sea .mock-banner .bnbg{object-fit:contain; object-position:center center}
/* ---- 2大特典カードの写真（2026-09-18）----
カード上部に 4:3 の写真を敷く。padding の外側まで広げたいので
カード側の padding を 0 にして、文字側だけ内側に余白を持たせている。
画像が読めなかったときは .gpic ごと fablee.js が外し、
これまでの文字だけのカードに戻る（レイアウトは崩れない）。 */
body.sea .giftcard{padding:0; overflow:hidden}
body.sea .giftcard .gpic{
aspect-ratio:4/3; background:#EAF0F4; margin:0;
}
body.sea .giftcard .gpic img{
width:100%; height:100%; object-fit:cover; display:block;
}
body.sea .giftcard .gn{margin:1.3rem 1.5rem 0}
body.sea .giftcard h3{margin:.7rem 1.5rem 0}
body.sea .giftcard p{margin:.5rem 1.5rem 1.6rem}
/* ---- 「特別な作業は一切ありません」3カードの写真（2026-09-18）----
横に3枚並ぶので 16:9。4:3 にすると縦に伸びて1画面に収まらない。
2大特典と同じく、カードの padding を外して写真を縁まで届かせる。 */
body.sea .not{padding:0; overflow:hidden}
body.sea .not .npic{aspect-ratio:16/9; background:#EAF0F4}
body.sea .not .npic img{width:100%; height:100%; object-fit:cover; display:block}
body.sea .not .x{margin:1.4rem 1.5rem 0}
body.sea .not h3{margin:.6rem 1.5rem 0}
body.sea .not p{margin:.4rem 1.5rem 1.8rem}
/* ---- 使いどころカードの写真（2026-09-19）----
線画アイコンの .ic-tile と同じ 4:3。写真のカードとアイコンのカードが
混在しても、グリッドの高さが揃うようにするため比率を合わせている。
6枚すべてが写真になったら、この比率を変えてもよい。 */
body.sea .use .upic{
aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#EAF0F4;
}
body.sea .use .upic img{width:100%; height:100%; object-fit:cover; display:block}
/* =========================================================================
文字を大きく（2026-09-19）
営業先が釣り船の船長で、年齢層が高い。一般的なサイトの標準〜やや大きめに寄せる。
考え方：
1) まず基準を上げる（17px → PC 19px / スマホ 18px）。本文は rem 指定なので
ここを上げるだけで全体が比例して大きくなる。
2) それでも 15px を下回る「情報として読ませたい文字」だけ、個別に底上げする。
eyebrow(CAMPAIGN 等)や mono のラベルは装飾なので小さいままでよい。
3) 逆に大きくなりすぎる巨大数字とヒーローは上限を締める。
★ 元に戻したいときは、このブロックを丸ごと消せば以前の見た目に戻る。
========================================================================= */
body.sea{font-size:19px}
@media(max-width:760px){ body.sea{font-size:18px} }
/* --- 本文まわり：読ませる文章はすべて 0.92rem 以上（= 17px 以上）に --- */
body.sea .use p,
body.sea .not p,
body.sea .point p,
body.sea .step p,
body.sea .giftband .note,
body.sea .formhead p,
body.sea .scheme .note2{font-size:.94rem}
body.sea .giftcard p{font-size:.96rem}
body.sea .scheme .box span{font-size:.88rem}
body.sea .note{font-size:.88rem}
/* --- 表：特商法とお届け・お支払い。ここは細かく読まれるので大きめに --- */
body.sea table.co th{font-size:.92rem}
body.sea table.co td{font-size:.95rem}
/* --- フォーム：入力欄が 16px 未満だと iOS が勝手にズームするので余裕を持たせる --- */
body.sea .field input,
body.sea .field textarea,
body.sea .field select{font-size:1rem}
body.sea .field label{font-size:.94rem}
body.sea .field label .req,
body.sea .field label .opt{font-size:.8rem}
body.sea .field .hint{font-size:.86rem}
body.sea .filelist{font-size:.86rem}
body.sea .form .privacy{font-size:.86rem}
body.sea .consent{font-size:.92rem} /* 規約同意。小さいままだと不親切 */
body.sea .submit{font-size:.96rem}
/* --- ショップ見本：買う人が見る値段とサイズ表記 --- */
body.sea .good .desc{font-size:.86rem}
body.sea .good .opts{font-size:.84rem}
body.sea .good .pr small{font-size:.8rem}
body.sea .shopmock .mock-nav{font-size:.86rem}
/* --- フッター・ナビ --- */
body.sea footer{font-size:.88rem}
body.sea footer .copy{font-size:.8rem}
body.sea .nav a{font-size:.84rem} /* 項目が7つあるので、ここだけは控えめ */
@media(max-width:640px){ body.sea .nav a{font-size:.84rem} }
/* --- 大きくなりすぎるものを締める --- */
body.sea .price-box .zero{font-size:clamp(3.4rem,12vw,5.6rem)}
/* ヒーローの最小値だけ px で固定する。rem にすると基準を上げたぶん下限も上がり、
「販売サイトを作りませんか？」の13文字がスマホ幅からはみ出すため。 */
body.sea .hero-plain h1{font-size:clamp(26px,6.2vw,3.3rem)}
body.sea .head{font-size:clamp(1.4rem,3.8vw,2.1rem)}
/* 料金ボックスのオレンジ枠（2026-09-19 に中身を差し替え）。
2行になったので行間を広げ、上の巨大な 0円 との間隔も少し開けた。 */
/* 料金のオレンジ枠（2026-09-19）。左カラムの中に置く。
左カラムの内側は約415px。最長の行を1行に収められるのは 22px 前後が上限だが、
それでは小さいので、HTML 側で読点のところに
を入れて4行に割り、
そのぶん文字を 1.5rem（28.5px）まで上げている。
★ 文言を変えるときは
の位置も見直すこと。最長の行が12文字を超えると
折り返して行数が増える。 */
body.sea .price-box .free{
margin-top:1.4rem;
padding:1.2rem 1.4rem;
font-size:1.5rem;
line-height:1.75;
}
/* 料金カードの右カラムを下端で揃える（2026-09-19）。
左カラム（BASIC / 0円 / オレンジ枠）のほうが背が高く、右のリストの下に
隙間が空いていた。右カラムを下寄せにして、リストの下端をオレンジ枠の
下端に合わせる。
★ スマホ（700px以下）では1カラムになるので、この指定は効かない。 */
body.sea .price-box > div:nth-child(2){align-self:end}
/* ---- 取り分のイラスト（2026-09-19）----
「販売価格 − 原価 ＝ 収益」を3枚のカードと演算子で見せる。
表だと読ませる形になるが、カードにすると視線が左から右へ流れて
計算の意味が一目で伝わる。
カードは高さが違うので align-items:center で縦中央に揃える。 */
body.sea .calcviz{
display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
gap:.9rem; align-items:center; margin-top:2.2rem; text-align:center;
}
body.sea .calcviz .cv{
background:#fff; border:1px solid var(--line); border-radius:14px;
padding:1.6rem 1rem;
box-shadow:0 1px 2px rgba(14,90,125,.06), 0 12px 28px -18px rgba(14,90,125,.4);
}
body.sea .calcviz .cv.sum{
background:var(--accent); border-color:var(--accent);
box-shadow:0 14px 34px -16px rgba(14,90,125,.65);
}
body.sea .calcviz .cv-ic{color:var(--accent); line-height:0}
body.sea .calcviz .cv-ic svg{width:5.4rem; height:5.4rem}
body.sea .calcviz .cv-ex{
font-size:.86rem; color:var(--muted); margin-top:.4rem;
}
body.sea .calcviz .cv-k{font-size:.94rem; color:var(--ink-2); margin-top:.9rem}
body.sea .calcviz .cv.sum .cv-k{color:rgba(255,255,255,.88)}
body.sea .calcviz .cv-v{
font-family:var(--mincho); font-weight:700; line-height:1.15; margin-top:.25rem;
font-size:clamp(1.7rem,3.8vw,2.5rem); color:var(--accent);
}
body.sea .calcviz .cv.sum .cv-v{color:#fff}
body.sea .calcviz .cv-v small{
font-family:var(--gothic); font-weight:500; font-size:.42em; margin-left:.15em;
}
body.sea .calcviz .cv-op{
font-family:var(--mono); font-weight:700; color:var(--sun);
font-size:2rem; line-height:1;
}
/* 3枚を完全に同じ大きさの枠にする。
grid を stretch にして一番背の高いカードに全部そろえ、
カードの中身は flex で縦中央に置く。演算子だけは中央に固定する。 */
body.sea .calcviz{align-items:stretch}
body.sea .calcviz .cv{
display:flex; flex-direction:column; justify-content:flex-start;
}
body.sea .calcviz .cv-op{align-self:center}
/* 収益カードは背景が濃いので、アイコンとラベルを白にする */
body.sea .calcviz .cv.sum .cv-ic{color:#fff}
body.sea .calcviz .cv.sum .cv-ex{color:rgba(255,255,255,.7)}
@media(max-width:760px){
/* 縦に積むと横並びでなくなるので、そろえるための空行は消す */
body.sea .calcviz .cv-ref[aria-hidden]{display:none}
body.sea .calcviz{grid-template-columns:1fr; gap:.4rem}
body.sea .calcviz .cv-op{font-size:1.6rem; padding:.2rem 0}
body.sea .calcviz .cv-ic svg{width:4.4rem; height:4.4rem}
}
/* ---- 仕組み：専用アドレスとQR（2026-09-19）----
お店がやることは「アドレスを足す」「QRを貼る」だけ、というのを
見本のアドレスと実物のQRで見せる。左にアドレス、右にQRの2カラム。 */
body.sea .shoplink{
display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
background:#fff; border:1px solid var(--line); border-radius:14px;
padding:1.8rem 2rem; margin-top:1.6rem;
box-shadow:0 1px 2px rgba(14,90,125,.06), 0 12px 28px -18px rgba(14,90,125,.4);
}
body.sea .shoplink .sl-k{
display:block; font-size:.86rem; color:var(--muted); letter-spacing:.02em;
}
body.sea .shoplink .sl-v{
display:block; margin-top:.5rem;
font-family:var(--mono); font-weight:700; color:var(--accent);
font-size:clamp(1.15rem,2.6vw,1.9rem); line-height:1.35;
letter-spacing:.01em; word-break:break-all;
}
body.sea .shoplink .sl-v em{font-style:normal; color:var(--sun)} /* 屋号の部分だけ色を変える */
body.sea .shoplink .sl-note{
display:block; margin-top:.8rem; font-size:.86rem; color:var(--muted); line-height:1.8;
}
body.sea .shoplink .sl-qr{text-align:center}
body.sea .shoplink .sl-qr img{
width:148px; height:148px; display:block; margin:0 auto .6rem;
border:1px solid var(--line-2); border-radius:8px; padding:6px; background:#fff;
}
@media(max-width:700px){
body.sea .shoplink{grid-template-columns:1fr; gap:1.4rem; text-align:center; padding:1.5rem 1.2rem}
body.sea .shoplink .sl-qr img{width:132px; height:132px}
}
/* セクションの中の小見出し（「ご相談から集計までの流れ」） */
body.sea .subhead{
font-family:var(--gothic); font-weight:700;
font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--ink);
margin-top:3rem; padding-left:.8rem; border-left:4px solid var(--sun);
}
body.sea .subhead + .flow{margin-top:1.2rem}
/* スマホだけで改行させたいところ */
.brsp{display:none}
@media(max-width:700px){.brsp{display:inline}}
/* ---- 作れるもの15点：写真タイル（2026-09-19）----
線画アイコンの .item .ic-tile と同じ 1:1。写真とアイコンが混在しても
タイルの大きさが揃う。15点すべてが写真になっても比率は変えなくてよい。 */
body.sea .item .ipic{
aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#F2F2F2;
}
body.sea .item .ipic img{width:100%; height:100%; object-fit:cover; display:block}
/* 取り分イラスト：Tシャツの上の「参考イメージ」（2026-09-19）。
3枚のカードは grid の stretch で同じ高さに揃えているので、
左だけ1行増えてもカードの大きさは崩れない。 */
body.sea .calcviz .cv-ref{
font-size:.82rem; color:var(--muted); letter-spacing:.06em; margin-bottom:.5rem;
}
/* 真ん中と右のカードにも同じ高さの空行を置いてある（index.html の
aria-hidden な .cv-ref）。これで3枚の価格の行が横一列にそろう。 */
/* ヒーローの3行目（2026-09-20）。
見出し2行＋この1行で「3行の太字」にしたいので、
max-width の 46rem を外して折り返さないようにし、太字にしている。
★ 文言を伸ばすと2行に割れる。46文字までが目安（幅1000px・約20.5px）。 */
body.sea .hero-plain .sub{
max-width:none;
font-size:clamp(1rem,1.9vw,1.08rem);
font-weight:700;
line-height:1.95;
color:#fff;
}
/* ---- 見本ショップ（/tsurimasa/）の写真（2026-09-20）----
青いプレースホルダを実物の写真に置き換えた。
このページは body に sea クラスが付いていないので、body.sea を付けずに書く。 */
.shophero-pic{border-radius:12px; overflow:hidden; background:#EAF0F4; aspect-ratio:16/9}
.shophero-pic img{width:100%; height:100%; object-fit:cover; display:block}
.good .gpicw{aspect-ratio:1/1; background:#F2F2F2; overflow:hidden}
.good .gpicw img{width:100%; height:100%; object-fit:cover; display:block}
/* ------------------------------------------------------------------
申込フォーム：作りたいアイテムのチェックリスト（2026-09-20）
初期状態は全部チェック済み。要らないものだけ外してもらう作り。
1項目の当たり判定を広く取ってある（スマホで指で押すため）。
------------------------------------------------------------------ */
.itemchecks{
display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.4rem;
border:1px solid var(--line); padding:1rem 1.2rem; border-radius:2px; background:#fff;
}
@media(max-width:760px){ .itemchecks{grid-template-columns:1fr; gap:1.1rem} }
.icgroup{display:grid; gap:.1rem; align-content:start}
.icttl{
font-size:.74rem; font-weight:700; color:var(--muted);
letter-spacing:.06em; padding-bottom:.35rem; margin-bottom:.25rem;
border-bottom:1px solid var(--line);
}
.itemchecks label{
display:flex; gap:.6rem; align-items:center;
font-size:.86rem; font-weight:400; line-height:1.5;
padding:.42rem .2rem; cursor:pointer; border-radius:2px;
}
.itemchecks label:hover{background:#F4F7F9}
.itemchecks input{flex:none; width:1.05rem; height:1.05rem; margin:0; accent-color:var(--accent)}
.itemchecks label span{user-select:none}
.ictoggle{
background:none; border:0; padding:0; cursor:pointer;
color:var(--accent); font-family:var(--gothic); font-size:.78rem;
text-decoration:underline; text-underline-offset:2px;
}
.ictoggle:hover{opacity:.75}
#icCount{color:var(--muted); font-size:.78rem; margin-left:.7rem}
/* 高齢の読み手向けに、本文と同じ比率で大きくする */
body.sea .itemchecks label{font-size:.95rem; padding:.5rem .2rem}
body.sea .icttl{font-size:.8rem}
body.sea .itemchecks input{width:1.15rem; height:1.15rem}
/* ------------------------------------------------------------------
申込フォーム：送信ボタンを「申し込む」「質問する」の2本に分けた（2026-09-20）
申し込み前に聞きたい人と、聞かずに申し込む人を分けるため。
------------------------------------------------------------------ */
.btnrow{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center}
.form .submit-alt{
background:#fff; color:var(--accent); border:2px solid var(--accent);
padding:.85rem 1.9rem; font-weight:700; font-size:.92rem; border-radius:2px;
cursor:pointer; font-family:var(--gothic);
}
.form .submit-alt:hover{background:var(--accent-2)}
.btnnote{font-size:.8rem; color:var(--muted); line-height:1.8; margin-top:.9rem}
@media(max-width:600px){
.btnrow{flex-direction:column; align-items:stretch}
.form .submit, .form .submit-alt{width:100%}
}
/* 高齢の読み手向けに大きく。申し込み側を主役に見せる */
body.sea .form .submit-alt{
border-radius:999px; padding:1rem 2.2rem; font-size:.98rem; border-width:2px;
}
body.sea .btnnote{font-size:.88rem}
/* ------------------------------------------------------------------
申し込みと問い合わせを別々のフォームに分けた（2026-09-20）
・申し込み … 送信後に自動返信メールが届き、本登録（/entry/）へ進む
・問い合わせ … 人がメールで返信する。屋号は任意
------------------------------------------------------------------ */
.fcard{margin-bottom:2.4rem}
.fttl{
display:flex; align-items:center; gap:.7rem;
font-size:1.18rem; font-weight:700; margin-bottom:.35rem;
}
.fno{
flex:none; width:1.9rem; height:1.9rem; border-radius:999px;
background:var(--accent); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:.95rem; font-weight:700; font-family:var(--gothic);
}
.fno.alt{background:var(--sea, #0E5A7D)}
.fsub{font-size:.88rem; color:var(--ink-2); line-height:1.9; margin-bottom:1.1rem}
/* 問い合わせ側は控えめに。申し込みを主役に見せる */
.fcard-ask .form{background:#F7FAFB; border:1px solid var(--line)}
.form .submit-alt{
background:#fff; color:var(--accent); border:2px solid var(--accent);
padding:.85rem 2rem; font-weight:700; font-size:.92rem; border-radius:2px;
cursor:pointer; font-family:var(--gothic);
}
.form .submit-alt:hover{background:var(--accent-2)}
@media(max-width:600px){ .form .submit, .form .submit-alt{width:100%} }
body.sea .fttl{font-size:1.32rem}
body.sea .fsub{font-size:.98rem}
body.sea .fno{width:2.1rem; height:2.1rem; font-size:1.02rem}
body.sea .form .submit-alt{border-radius:999px; padding:1rem 2.4rem; font-size:.98rem}
/* 本登録ページ（/entry/）用の小物（2026-09-20） */
#reg .fttl{margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line)}
#reg .fttl:first-of-type{margin-top:1rem; padding-top:0; border-top:0}
.urlrow{display:flex; align-items:center; gap:.2rem; flex-wrap:wrap}
.urlrow input{flex:1 1 9rem; min-width:8rem}
.urlpre, .urlpost{font-size:.88rem; color:var(--muted); white-space:nowrap; font-family:var(--mono, monospace)}
.field select{
width:100%; padding:.8rem .9rem; border:1px solid var(--line); border-radius:2px;
font-family:var(--gothic); font-size:.95rem; background:#fff; color:var(--ink);
}
.field select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
body.sea .urlpre, body.sea .urlpost{font-size:.95rem}
/* ------------------------------------------------------------------
申し込みは別ページへ送る（2026-09-21）
価格を決めてもらう必要があるので、LP では完了させない。
------------------------------------------------------------------ */
.entrycta{text-align:center; margin:0 0 3rem}
.ec-btn{
display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
padding:.95rem 2.4rem; border-radius:2px; font-weight:700; font-size:.95rem;
font-family:var(--gothic);
}
.ec-btn:hover{opacity:.9}
.ec-note{font-size:.82rem; color:var(--muted); margin-top:1.1rem; line-height:1.9}
/* 海の面ではオレンジの丸ボタン。申込フォームの送信ボタンと同じ見た目に揃える */
body.sea .ec-btn{
border-radius:999px; padding:1.1rem 2.8rem; font-size:1.02rem;
background:var(--sun); box-shadow:0 10px 24px -12px rgba(220,123,51,.9);
}
body.sea .ec-note{font-size:.9rem}
@media(max-width:600px){ .ec-btn{display:block} }
/* ---- 本登録ページの価格表 ---- */
.pricetbl{border:1px solid var(--line); border-radius:2px; background:#fff; overflow:hidden}
.pr-head, .pr-row{
display:grid; grid-template-columns:1fr 7rem 8.6rem 7rem;
gap:.6rem; align-items:center; padding:.6rem .9rem;
}
.pr-head{
background:var(--sea, #0E5A7D); color:#fff; font-size:.76rem; font-weight:700;
text-align:center; letter-spacing:.03em;
}
.pr-head div:first-child{text-align:left}
.pr-row{border-top:1px solid var(--line); font-size:.88rem}
.pr-row:nth-child(even){background:#F9FBFC}
.pr-row.off{opacity:.42}
.pr-chk{display:flex; gap:.6rem; align-items:center; cursor:pointer; margin:0}
.pr-chk input{flex:none; width:1.05rem; height:1.05rem; margin:0; accent-color:var(--accent)}
.pr-nm{line-height:1.45}
.pr-c{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pr-lb{display:none; color:var(--muted); font-size:.74rem; margin-right:.4rem}
.pr-ue{
width:100%; text-align:right; padding:.45rem .55rem; font-size:.9rem;
border:1px solid var(--line); border-radius:2px; background:#FFFDF5;
font-family:var(--gothic); font-variant-numeric:tabular-nums;
}
.pr-ue:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.pr-mg{color:var(--accent)}
.pr-mg.neg{color:#B3402A}
@media(max-width:760px){
.pr-head{display:none}
.pr-row{grid-template-columns:1fr 1fr; gap:.45rem .8rem; padding:.85rem .9rem}
.pr-chk{grid-column:1 / -1}
.pr-lb{display:inline}
.pr-c{text-align:left}
.pr-ue{max-width:7rem; text-align:right}
}
body.sea .pr-row{font-size:.95rem}
body.sea .pr-ue{font-size:.95rem}
.pr-head .pr-req{
display:inline-block; margin-left:.35rem; padding:.05rem .3rem;
background:#B3402A; color:#fff; border-radius:2px; font-size:.64rem; font-weight:700;
}
/* ---- ロゴ案の希望（/entry/）。AIへの指定から逆算した項目 ---- */
.logobox{
background:#F7FAFB; border:1px solid var(--line); border-radius:2px;
padding:1.4rem 1.5rem .4rem; margin-bottom:1.3rem;
}
.lb-lead{font-size:.88rem; line-height:1.95; margin-bottom:1.3rem}
/* 選択肢のボタンは、文字数が違っても同じ大きさに見えるように等幅で並べる。
3択ぞろえなので3列。狭い画面では横に3つ入らないので1列にする。 */
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem}
.chip{
display:flex; align-items:center; justify-content:center; gap:.45rem; margin:0;
padding:.5rem .85rem; border:1px solid var(--line); border-radius:999px;
background:#fff; font-size:.85rem; font-weight:400; cursor:pointer; line-height:1.3;
text-align:center;
}
@media (max-width:560px){ .chips{grid-template-columns:1fr} }
.chip:hover{border-color:var(--accent)}
.chip input{flex:none; width:.95rem; height:.95rem; margin:0; accent-color:var(--accent)}
.chip:has(input:checked){border-color:var(--accent); background:var(--accent-2); font-weight:700}
body.sea .logobox{background:#F2F8FB}
body.sea .lb-lead{font-size:.95rem}
body.sea .chip{font-size:.92rem; padding:.55rem .95rem}
/* ヒーローの申込ボタン2つは同じ大きさにそろえる（2026-09-23）。
オレンジは「入力フォームから／申し込む」の2行、LINE は1行。
高さも幅も固定して、1行の方は上下中央に置く。 */
body.sea .hero-plain .cta .btn,
body.sea .lineband .cta .btn{
display:inline-flex; align-items:center; justify-content:center;
width:14rem; min-height:4.8rem; padding:.6rem 1rem;
text-align:center; line-height:1.4;
}
/* 申し込みの入口（#entry）。LINE 欄と ENTRY 欄を1つにまとめた（2026-09-23） */
body.sea .lineband .cta{gap:.7rem; flex-wrap:wrap}
body.sea .lineband .formhead{
max-width:34rem; margin:1.4rem auto 0; text-align:center;
border-left:0; border-top:3px solid var(--accent);
}
/* 送信完了のポップアップ（2026-09-23）。
別ファイルを読み込まず、完了したときにだけこの箱を出す。ページは重くならない。 */
.donepop{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
padding:16px; background:rgba(14,36,49,.55)}
.donepop[hidden]{display:none}
.dp-box{width:100%; max-width:26rem; background:#fff; border-radius:14px; padding:2rem 1.6rem 1.6rem;
text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dp-ic{width:3.2rem; height:3.2rem; margin:0 auto 1rem; border-radius:50%; display:flex; align-items:center;
justify-content:center; background:#06C755; color:#fff; font-size:1.6rem; font-weight:700}
.dp-msg{margin:0 0 1.4rem; font-size:.98rem; line-height:1.9; color:var(--ink)}
.dp-close{font:inherit; font-weight:700; padding:.7rem 2.4rem; border:0; border-radius:999px;
background:var(--sun, #E07B39); color:#fff; cursor:pointer}