/* ==========================================================
   お問い合わせ：港の一日
   朝の港 → 波（波止場） → 灯（灯台の夜） → 図（海図）
   ========================================================== */

/* ---------- 朝の港（キービジュアル） ---------- */
.cn-kv { background: linear-gradient(180deg, #9fd3f2 0%, #cdeafa 45%, #eaf7fd 100%); }
.cn-kv .uv-kv__bg { inset: 0; }
.cn-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cn-l { translate: 0 80px; opacity: 0; transition: translate 1.5s cubic-bezier(.2, 1.15, .35, 1), opacity 1.1s var(--ease); }
.is-loaded .cn-l { translate: 0 0; opacity: 1; }
.cn-sun { transition-delay: 0s; transform: translateY(calc(var(--kv) * 200px)); }
.cn-cloud { transition-delay: .1s; transform: translateX(calc(var(--kv) * -160px)); }
.cn-far { transition-delay: .15s; transform: translateY(calc(var(--kv) * 160px)); }
.cn-town { transition-delay: .3s; transform: translateY(calc(var(--kv) * 90px)); }
.cn-sea { transition-delay: .45s; transform: translateY(calc(var(--kv) * 40px)); }
.cn-kv h1 { letter-spacing: .2em; padding-left: .2em; }
.cn-gull svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
/* 海：さざ波が揺れ、手前の波が流れ、船が行き来する */
.cn-ripples path { animation: cn-ripple 3.4s ease-in-out infinite alternate; }
.cn-ripples path:nth-child(even) { animation-delay: -1.7s; }
@keyframes cn-ripple { from { translate: -12px 0; } to { translate: 12px 0; } }
.cn-waves { animation: cn-wave 6s linear infinite; }
@keyframes cn-wave { to { transform: translateX(240px); } }
.cn-boat--a { animation: cn-sail-a 26s linear infinite; }
.cn-boat--b { animation: cn-sail-b 38s linear infinite; animation-delay: -14s; }
@keyframes cn-sail-a { from { transform: translate(-160px, 700px); } to { transform: translate(1100px, 700px); } }
@keyframes cn-sail-b { from { transform: translate(1500px, 770px) scaleX(-1); } to { transform: translate(-200px, 770px) scaleX(-1); } }
.cn-bob { animation: bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }

/* ---------- 各ゾーンの色 ---------- */
.cn-wharf { background: #0e4f73; padding: 60px 0 120px; }
.cn-lighthouse { background: #14284a; padding: 60px 0 140px; }
.cn-chart { background: #f4ecdc; color: var(--ink); padding: 60px 0 0; }
.cn-chart .uv-eyebrow { color: #d8902a; }
.cn-chart .uv-eyebrow small, .cn-chart .uv-text { color: var(--ink-soft); }
.cn-block { padding: clamp(60px, 9vw, 110px) 0 0; }
.cn-block .uv-title { margin-bottom: 18px; }

/* ---------- 波：フォーム ---------- */
.cn-call { margin-top: 26px; }
.cn-call a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 34px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); transition: background .3s; }
.cn-call a:hover { background: rgba(255, 255, 255, .2); }
.cn-call span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.cn-call b { font-family: var(--font-mont); font-weight: 800; font-size: clamp(24px, 3vw, 32px); letter-spacing: .03em; }
.cn-formcard { max-width: 820px; margin: 44px auto 0; background: #fff; color: var(--ink); border-radius: 28px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.cn-formcard .form { margin-top: 0; }
.cn-formcard .form input:focus, .cn-formcard .form select:focus, .cn-formcard .form textarea:focus { border-color: #2a7fb8; box-shadow: 0 0 0 4px rgba(42, 127, 184, .16); }
.cn-send { border: 0; cursor: pointer; font: inherit; background: #0e4f73; color: #fff; padding: 16px 20px 16px 34px; }
.cn-send .ico { background: #fff; color: #0e4f73; }

/* ---------- 灯：住所・電話番号（灯台の光が回る） ---------- */
.cn-beacon { position: absolute; left: clamp(-20px, 3vw, 60px); bottom: 0; width: clamp(70px, 8vw, 110px); }
.cn-beacon svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.cn-beacon__beam { position: absolute; left: 50%; top: 22%; width: 160vw; height: 220px; margin-top: -110px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 236, 150, .32), rgba(255, 236, 150, 0) 70%); clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); animation: cn-beam 9s linear infinite; }
@keyframes cn-beam { 0% { transform: rotate(-40deg); opacity: .9; } 50% { transform: rotate(10deg); opacity: .4; } 100% { transform: rotate(-40deg); opacity: .9; } }
.cn-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.cn-office { position: relative; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; padding: 24px 24px 26px; transition: background .3s, transform .4s var(--ease); }
.cn-office:hover { background: rgba(255, 255, 255, .12); transform: translateY(-4px); }
.cn-office__icon { position: absolute; right: 20px; top: 20px; width: 24px; height: 24px; color: rgba(255, 236, 150, .7); }
.cn-office__dept { font-size: 12px; font-weight: 700; color: #ffe27a; letter-spacing: .08em; }
.cn-office h3 { font-family: var(--font-round); font-size: 22px; margin: 4px 0 10px; }
.cn-office address { font-style: normal; font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .75); }
.cn-office__tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mont); font-weight: 800; font-size: 22px; letter-spacing: .02em; }
.cn-office__tel::before { content: "TEL"; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.cn-office__tel:hover { color: #ffe27a; }
@media (max-width: 960px) { .cn-offices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cn-offices { grid-template-columns: 1fr; } .cn-beacon { opacity: .5; } }

/* ---------- 図：本社アクセス（海図） ---------- */
.cn-chart__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cn-compass { width: clamp(90px, 10vw, 130px); flex: 0 0 auto; }
.cn-compass__needle { transform-box: view-box; transform-origin: 60px 60px; transform: rotate(calc(var(--t, 0) * 720deg)); }
.cn-map { margin-top: 30px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 7; background: #e9e0cc; border: 6px solid #fff; box-shadow: 0 0 0 2px #d8902a, 0 20px 50px rgba(120, 80, 20, .18); }
.cn-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cn-shore { position: relative; margin-top: clamp(60px, 8vw, 100px); }
.cn-shore svg { width: 100%; height: clamp(80px, 10vw, 140px); display: block; }
.cn-shore .uv-gotop { bottom: clamp(20px, 3vw, 36px); }
@media (max-width: 640px) { .cn-map { aspect-ratio: 4 / 3; } .cn-chart__head { align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .cn-l { translate: none; opacity: 1; transform: none !important; }
  .cn-ripples path, .cn-waves, .cn-boat--a, .cn-boat--b, .cn-bob, .cn-beacon__beam { animation: none !important; }
  .cn-boat--a { transform: translate(300px, 700px); } .cn-boat--b { transform: translate(900px, 770px) scaleX(-1); }
}

/* フォーム内の個人情報保護方針：枠の中でスクロールさせず、全文を表示 */
.cn-formcard .policy-box { max-height: none; overflow: visible; }

/* LINE 公式アカウント（お問い合わせフォームの上） */
.cn-line { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 22px auto 0; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); text-align: left; }
.cn-line__qr { width: 112px; height: 112px; flex: none; border-radius: 12px; background: #fff; padding: 6px; image-rendering: pixelated; }
.cn-line__text { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.cn-line__text b { display: block; font-size: 16px; color: #fff; }
.cn-line__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: #06c755; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.cn-line__btn:hover { background: #05b34c; }
@media (max-width: 600px) {
  .cn-line { gap: 14px; }
  .cn-line__qr { display: none; }  /* スマホでは読み取れないので、ボタンだけ */
  .cn-line__btn { width: 100%; justify-content: center; }
}