/* 下層ページ（私たちについて・サービス・ご相談）共通 */
:root{
  --sky:#183c55; --sky-deep:#12314a; --sea-1:#4dbfd9; --sea-2:#11a9cc;
  --w:#ffffff; --paper:#f2f2f2; --ink:#1a1a1a; --ink-soft:#555;
  --blue:#1c91c0; --blue-soft:#94d8e8;
  --or:#f0932b; --rd:#e05a4e; --yl:#f6c344; --gr:#7fba48; --pu:#8e5aa8; --nv:#275b7d;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Open Sans","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}

/* ヘッダー（トップと同じ） */
.top{position:fixed; inset:0 0 auto; z-index:80; display:flex; justify-content:space-between; padding:20px 22px; transition:background .3s}
.top.solid{background:rgba(18,49,74,.94); box-shadow:0 2px 10px rgba(0,0,0,.15)}
.burger{width:38px; height:38px; border:2px solid var(--w); background:none; cursor:pointer; padding:7px; display:grid; gap:5px}
.burger span{display:block; height:2px; background:var(--w)}
.cta{border:2px solid var(--w); color:var(--w); background:none; font:600 .85rem/1 "Open Sans","Zen Kaku Gothic New",sans-serif;
  letter-spacing:.04em; padding:0 1.2em; height:38px; display:inline-flex; align-items:center; text-decoration:none}
.cta:hover,.burger:hover{background:rgba(255,255,255,.12)}
.burger:focus-visible,.cta:focus-visible{outline:2px solid var(--blue-soft); outline-offset:2px}
.menu{position:fixed; inset:0; z-index:85; background:rgba(18,49,74,.96); display:none; align-items:center; justify-content:center; text-align:center}
.menu.open{display:flex}
.menu a{display:block; color:var(--w); text-decoration:none; font:600 1.25rem/1.6 "Open Sans",sans-serif; margin:1rem 0; letter-spacing:.24em}
.menu a:hover,.menu a[aria-current]{color:var(--blue-soft)}
.menu .x{position:absolute; top:20px; left:22px; width:38px; height:38px; border:2px solid var(--w); background:none; color:var(--w); font-size:1.1rem; cursor:pointer}

/* ページ上部の帯：トップの港町を切り取った小さな風景（夜空・山・海・そのページの島・船） */
.band{position:relative; height:clamp(320px,36vw,400px); background:linear-gradient(180deg,#143550 0%,var(--sky) 55%,#1e4a68 100%); overflow:hidden}
.band .star{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.5; animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.8}}
.band .sun{position:absolute; left:max(18px,calc((100% - 62rem)/2)); top:78px; width:56px; z-index:1}
.band .sun .rays{transform-origin:60px 60px; animation:turn 60s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.band .cloud{position:absolute; height:22px; border-radius:100vmax; z-index:1; animation:drift linear infinite}
.band .cloud::before{content:""; position:absolute; top:-12px; left:22%; width:45%; height:22px; border-radius:100vmax; background:inherit}
@keyframes drift{from{transform:translateX(-20vw)}to{transform:translateX(120vw)}}
.band .mtns{position:absolute; left:0; right:0; bottom:28%; height:30%; z-index:1}
.band .mtns i{position:absolute; bottom:0; width:0; height:0; border-style:solid; border-color:transparent}
.band .sea{position:absolute; left:0; right:0; bottom:0; height:28%; background:var(--sea-1); z-index:2}
.band .sea::after{content:""; position:absolute; left:0; right:0; bottom:0; height:43%; background:var(--sea-2); z-index:1}
.band .crest{position:absolute; left:0; bottom:calc(28% - 7px); width:200%; height:14px; z-index:2; animation:crest 18s linear infinite}
@keyframes crest{to{transform:translateX(-50%)}}
.band .isle{position:absolute; right:max(10px,calc((100% - 62rem)/2)); bottom:calc(28% - 12px); z-index:3; animation:bob 6s ease-in-out infinite alternate}
.band .isle svg{display:block; width:clamp(170px,22vw,270px); height:auto; filter:drop-shadow(0 8px 0 rgba(17,169,204,.35))}
@keyframes bob{from{translate:0 0}to{translate:0 -6px}}
.band .beam{transform-box:view-box; transform-origin:146px 40px; animation:beam 5s ease-in-out infinite alternate}
@keyframes beam{0%{transform:rotate(-18deg); opacity:.32}50%{opacity:.6}100%{transform:rotate(14deg); opacity:.36}}
.band .sign-m{display:none}
.band .ship{position:absolute; left:0; z-index:4; animation:sail linear infinite}
.band .ship.s1{bottom:12%; animation-duration:60s; animation-delay:-20s}
.band .ship.s2{bottom:2%; animation-duration:95s; animation-delay:-55s}
@keyframes sail{from{transform:translateX(-140px)}to{transform:translateX(105vw)}}
.band .ship svg{display:block; animation:rock 2.6s ease-in-out infinite alternate; transform-origin:50% 100%}
@keyframes rock{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.band .bird{position:absolute; right:0; top:30%; z-index:2; animation:fly 30s linear infinite; animation-delay:-8s}
@keyframes fly{0%{transform:translate(60px,0)}70%,100%{transform:translate(calc(-100vw - 60px),-18px)}}
.band .bird path{animation:flap 1s ease-in-out infinite alternate; transform-origin:13px 9px}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
.band .ttl{position:absolute; left:max(22px,calc((100% - 62rem)/2)); top:clamp(132px,15vw,150px); z-index:5}
.band .crumb{font:600 .66rem/1 "Open Sans",sans-serif; letter-spacing:.24em; color:rgba(148,216,232,.75); margin-bottom:.9rem}
.band .crumb a{color:inherit; text-decoration:none}
.band .crumb a:hover{color:#fff}
.band .crumb b{color:#fff; font-weight:600}
.band .en{display:block; font:600 .72rem/1 "Open Sans",sans-serif; letter-spacing:.3em; color:var(--blue-soft); margin-bottom:.55rem}
.band h1{margin:0; font:500 clamp(1.15rem,2.6vw,1.6rem)/1 "Zen Kaku Gothic New",sans-serif}
.band .plate{display:inline-flex; gap:4px; padding:6px; background:#0b1a25; border-radius:6px; box-shadow:0 3px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(148,216,232,.2)}
.band .c{position:relative; width:1.36em; height:1.66em; display:flex; align-items:center; justify-content:center; background:#1d3a4d; color:#fff; border-radius:3px; overflow:hidden}
.band .c::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(11,26,37,.4)}
.band .c.f{animation:flip .055s linear}
@keyframes flip{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.band.dest .c{color:var(--or)}
.band.dest .en{color:#f7b768}
.band .post{display:flex; gap:44px; padding-left:22px}
.band .post i{display:block; width:5px; height:26px; background:#5e7383}
@media (prefers-reduced-motion:reduce){.band *,.band *::before{animation:none!important}.band .bird{display:none}html{scroll-behavior:auto}}
@media(max-width:720px){
  .band{height:350px}
  .band .ttl{top:108px}
  .band .sun{top:68px; left:auto; right:18px; width:42px}
  .band .isle{right:6px}
  .band .isle svg{width:36vw}
  .band .mtns .hs{display:none}
  .band .plate{gap:2px; padding:4px}
  .band .c{width:1.18em}
  .band.long h1{font-size:1rem}
  .band.long .isle svg{width:30vw}  /* 長いページ名は少し小さく（島と重ならないように） */
  .band .sign-d{display:none}.band .sign-m{display:inline}
}

/* 本文 */
main,footer{word-break:keep-all; overflow-wrap:anywhere}  /* 文節（<wbr>の位置）で改行し、言葉の途中で切らない */
.frm input,.frm textarea{word-break:normal}
.nw{white-space:nowrap}
@media(max-width:720px){
  /* スマホの本文は行の端まで詰めて流す（文節で折ると行末がガタガタになるため）。見出し・短い文・ご相談の帯は文節のまま */
  .view p:not(.lead):not(.lead-sub), .view li, .view dd{word-break:normal; overflow-wrap:anywhere; line-break:strict}
}
.view{background:var(--paper); padding:clamp(3rem,7vw,5rem) 1.4rem; scroll-margin-top:64px}
.view.alt{background:#fff}
.view .in{max-width:46rem; margin:0 auto}
.view h2{font:300 clamp(1.5rem,3.4vw,2rem)/1.4 "M PLUS 1p","Zen Kaku Gothic New",sans-serif; color:var(--blue); margin:0 0 .4em; letter-spacing:.14em}
.view span.sub{color:#7a8891; font:300 .8rem/1 "Open Sans",sans-serif; letter-spacing:.24em; display:block; margin-bottom:1.4rem}
.view p{color:var(--ink-soft); margin:.9rem 0}
.lead{font-size:1.15rem; color:var(--ink) !important; font-weight:700}
.lead.kv{font-size:clamp(1.25rem,2.6vw,1.5rem); letter-spacing:.04em; line-height:1.5; margin-bottom:.2rem !important}
.lead-sub{font-size:clamp(1rem,1.9vw,1.1rem); color:var(--ink) !important; font-weight:300; letter-spacing:.08em; margin:0 0 1.6rem !important}
.lead-note{font-size:.9rem; color:#6a7780 !important}
.rep{margin:1.8rem 0 0; padding:1.2rem 1.3rem; background:#fff; border-left:4px solid var(--blue)}
.view.alt .rep{background:var(--paper)}
.rep h3{margin:0 0 .4rem; font-size:1rem; color:var(--ink)}
.rep p{margin:0}
.facts{margin:1.2rem 0 0; display:grid; grid-template-columns:7.5em 1fr; gap:.5rem 1rem; font-size:.92rem}
.facts dt{color:#7a8891}
.facts dd{margin:0; color:var(--ink-soft)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin-top:1.8rem}
.cards article{background:#fff; border-top:4px solid var(--blue); padding:1.3rem 1.2rem; box-shadow:0 2px 6px rgba(24,60,85,.08)}
.view.alt .cards article{background:var(--paper)}
@media(min-width:760px){.cards.three{grid-template-columns:repeat(3,1fr)}}  /* サービス：トップの道しるべと同じ3分類 */
.cards h3 small{display:block; font-weight:400; font-size:.78rem; color:var(--blue); letter-spacing:.08em; margin-top:.25rem}
.cards article.wide{grid-column:1/-1; border-top-color:var(--or)}
.cards article.wide h3 small{color:var(--or)}
.cards article.wide ul{columns:2 16rem; column-gap:2rem}
.cards h3{margin:0 0 .5rem; font-size:1rem; color:var(--ink)}
.cards ul{margin:0; padding:0; list-style:none}
.cards li{font-size:.85rem; color:var(--ink-soft); padding:.24rem 0 .24rem 1rem; position:relative; line-height:1.7}
.cards li::before{content:""; position:absolute; left:0; top:.8em; width:6px; height:6px; background:var(--sea-2)}
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.chips span{background:#fff; border:1px solid #dce3e8; color:var(--ink-soft); font-size:.88rem; padding:.5em 1.1em; border-radius:100vmax}
.view.alt .chips span{background:var(--paper)}
details{background:#fff; border-left:4px solid var(--sea-2); margin:.7rem 0; padding:.8rem 1.1rem}
.view.alt details{background:var(--paper)}
details summary{cursor:pointer; font-weight:700; font-size:.95rem; color:var(--ink)}
details p{font-size:.9rem}

/* 規約ページ */
.legal h2{font:700 1.02rem/1.6 "Zen Kaku Gothic New",sans-serif; color:var(--ink); letter-spacing:0; margin:2.2rem 0 .4rem}
.legal ul{padding-left:1.3rem; margin:.6rem 0}
.legal li{color:var(--ink-soft); margin:.2rem 0}
.legal a{color:var(--blue)}
.legal .meta{margin-top:2.6rem; font-size:.88rem; color:#7a8891}

/* 本文：海図の紙（方眼・羅針盤・緯度の目盛り） */
.view{position:relative; background-color:#f4f8fa; background-image:linear-gradient(rgba(28,145,192,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(28,145,192,.07) 1px,transparent 1px); background-size:44px 44px; overflow:hidden}
.view.alt{background-color:#fff; background-image:none}
main>.view:first-child::before{content:""; position:absolute; right:-50px; top:30px; width:270px; height:270px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23183c55'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23183c55' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='70' fill='none' stroke='%23183c55' stroke-dasharray='2 4'/%3E%3Cpath d='M100 4 L112 100 L100 196 L88 100 Z'/%3E%3Cpath d='M4 100 L100 88 L196 100 L100 112 Z'/%3E%3Cpath d='M32 32 L104 96 L168 168 L96 104 Z' opacity='.5'/%3E%3Cpath d='M168 32 L104 104 L32 168 L96 96 Z' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; opacity:.12; pointer-events:none}
main>.view:first-child::after{content:"34°14′N　132°34′E"; position:absolute; left:8px; top:3rem; writing-mode:vertical-rl; font:600 .58rem/1 "Open Sans",sans-serif; letter-spacing:.2em; color:rgba(28,145,192,.45)}
.view .in{position:relative}
.rule,.view span.sub{display:flex; align-items:center; gap:.7rem; margin:2.6rem 0 1.2rem; font:600 .68rem/1 "Open Sans",sans-serif; letter-spacing:.26em; color:var(--blue)}
.view span.sub{margin:0 0 1rem}
.rule::before,.view span.sub::before{content:""; flex:none; width:12px; height:12px; border:2px solid var(--blue); transform:rotate(45deg)}
.rule::after,.view span.sub::after{content:""; flex:1; border-top:1px dashed rgba(28,145,192,.4)}
.lead.kv{font:300 clamp(1.5rem,3.6vw,2.1rem)/1.5 "M PLUS 1p","Zen Kaku Gothic New",sans-serif !important; color:var(--sky) !important; letter-spacing:.06em}
.lead-sub{color:var(--blue) !important; font-weight:400 !important}
.rep{margin:0; padding:1.4rem 1.4rem 1.4rem 5.2rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cpath d='M30 10 L60 2 L60 18 Z' fill='%23f6c344' opacity='.6'/%3E%3Cpath d='M20 88 L24 30 L36 30 L40 88 Z' fill='%23183c55'/%3E%3Cpath d='M22.6 56 L23.3 46 L36.7 46 L37.4 56 Z' fill='%23e05a4e'/%3E%3Crect x='22' y='22' width='16' height='8' fill='%23183c55'/%3E%3Crect x='25' y='23.5' width='10' height='5' fill='%23f6c344'/%3E%3Cpath d='M21 22 L30 14 L39 22 Z' fill='%23e05a4e'/%3E%3C/svg%3E") 1.4rem 1.3rem/42px auto no-repeat; border-left:0; border-radius:4px; box-shadow:0 10px 30px -18px rgba(24,60,85,.35)}
.facts{margin:0; grid-template-columns:auto 1fr; gap:0}
.facts dt,.facts dd{padding:.7rem 0; border-bottom:1px dashed rgba(28,145,192,.3)}
.facts dt{padding-right:1.6rem; color:var(--blue); font-weight:500}
.facts .geo{display:block; font:600 .62rem/1.6 "Open Sans",sans-serif; letter-spacing:.18em; color:#7a96a6}
@media(max-width:720px){
  .rep{padding:4.4rem 1.2rem 1.2rem; background-position:1.2rem 1.1rem; background-size:34px auto}
  .facts{grid-template-columns:1fr}
  .lead.kv{font-size:1.32rem !important; letter-spacing:.02em}  /* 「情報の非対称性への挑戦」を1行に */
  .facts dt{padding:.7rem 0 0; border-bottom:0}
  main>.view:first-child::before{width:200px; height:200px; right:-60px}
}

/* フォーム */
.frm{display:grid; gap:1rem; margin-top:1.6rem; max-width:30rem}
.frm label{font-size:.8rem; color:var(--ink-soft); display:grid; gap:.35rem}
.frm .lb{display:flex; align-items:center; gap:.2rem}
.frm .req{color:#c0392b; font-size:.75rem; margin-left:.3em}
.frm .opt{color:#7a8891; font-size:.75rem; margin-left:.3em}
.frm input,.frm textarea{font:inherit; font-size:.95rem; padding:.7em .9em; border:1px solid #cfd8de; background:#fff; width:100%}
.frm input:focus,.frm textarea:focus{outline:2px solid var(--blue)}
.cf-turnstile{min-height:65px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.agree{font-size:.8rem; color:#6a7780 !important}
.agree a{color:var(--blue)}
/* 送信ボタン：ご相談ボタンと同じ乗船券（押すと半券に「受付済」の印が押される） */
button.ticket{border:0; padding:0; background:none; font:inherit; cursor:pointer; justify-self:start}
.send .main small{white-space:nowrap}
.send .stamp{position:absolute; left:50%; top:50%; translate:-50% -50%; width:46px; height:46px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; font:700 .62rem/1.1 "Zen Kaku Gothic New",sans-serif; text-align:center; color:#fff; opacity:0; transform:scale(2) rotate(-18deg)}
.send .to{transition:opacity .15s}
.send.go .to{opacity:0}
.send.go .stamp{animation:stamp .35s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{to{opacity:1; transform:scale(1) rotate(-12deg)}}
.send:disabled{cursor:default}
.send:disabled:hover{transform:none}
@media (prefers-reduced-motion:reduce){.send.go .stamp{animation:none; opacity:1; transform:rotate(-12deg)}}
.contact-ways{margin-top:1.6rem; display:grid; gap:.3rem; font-size:.9rem; color:var(--ink-soft)}
.contact-ways a{color:var(--blue)}
.tel{font-size:1.05rem; font-weight:700; color:var(--ink) !important; text-decoration:none}

/* ボタン（送信完了・404） */
.btns{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.btn{display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-weight:700; letter-spacing:.08em; padding:.9em 2em}
.btn:hover{background:#177aa3}
.btn.sub{background:#fff; color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue)}
.btn.sub:hover{background:#eaf5fa}

/* ご相談への帯：波の縁と乗船券のボタン */
.to-contact{position:relative; background:var(--sky); color:#fff; text-align:center; padding:clamp(3.4rem,7vw,4.6rem) 1.4rem clamp(4rem,8vw,5.2rem); overflow:hidden}
.to-contact p{margin:0 auto 1.6rem; max-width:30rem; color:var(--blue-soft)}
br.sp{display:none}  /* スマホだけの改行 */
.to-contact .wv{position:absolute; left:0; bottom:0; width:200%; height:26px; animation:crest 22s linear infinite}
.ticket{display:inline-flex; align-items:stretch; text-decoration:none; color:#fff; filter:drop-shadow(0 6px 0 rgba(0,0,0,.18)); transition:transform .2s, filter .2s}
.ticket:hover{transform:translateY(-3px) rotate(-1deg); filter:drop-shadow(0 9px 0 rgba(0,0,0,.18))}
.ticket:focus-visible{outline:2px solid var(--blue-soft); outline-offset:4px}
.ticket .main,.ticket .stub{background:var(--or); position:relative}
.ticket .main{padding:1rem 1.6rem 1rem 1.5rem; text-align:left; border-radius:8px 0 0 8px;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat, radial-gradient(circle at 100% 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 100% 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat, radial-gradient(circle at 100% 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.ticket .stub{padding:1rem 1.1rem; display:grid; place-items:center; border-radius:0 8px 8px 0; background:#e27f17;
  -webkit-mask:radial-gradient(circle at 0 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat, radial-gradient(circle at 0 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat, radial-gradient(circle at 0 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.ticket .stub::before{content:""; position:absolute; left:-1px; top:12px; bottom:12px; border-left:2px dashed rgba(255,255,255,.55)}
.ticket small{display:block; font:600 .6rem/1 "Open Sans",sans-serif; letter-spacing:.26em; opacity:.85; margin-bottom:.45rem}
.ticket strong{display:block; font:700 1.08rem/1.3 "Zen Kaku Gothic New",sans-serif; letter-spacing:.08em}
.ticket .stub span{font:700 .78rem/1.4 "Zen Kaku Gothic New",sans-serif; letter-spacing:.06em; text-align:center}
.ticket .stub b{display:block; font-size:1.4rem; line-height:1; margin-top:.2rem; transition:transform .2s}
.ticket:hover .stub b{transform:translateX(4px)}
@media(max-width:720px){.ticket .main{padding:.9rem 1.1rem}
  .to-contact{padding-left:1rem; padding-right:1rem}
  br.sp{display:inline}  /* スマホだけの改行（ご相談の帯・対応業界の説明など） */
}
@media (prefers-reduced-motion:reduce){.to-contact .wv{animation:none}.ticket,.ticket .stub b{transition:none}}

footer{background:var(--sky-deep); color:#8FA9BC; padding:2.4rem 1.4rem; font-size:.8rem; line-height:2.1}
footer .in{max-width:46rem; margin:0 auto; display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between}
footer a{color:#c8d6e0; text-decoration:none}
footer a:hover{text-decoration:underline}
footer nav{display:flex; gap:1.2rem; flex-wrap:wrap}