@charset "utf-8";
/* 海あそび舎 かぜまち — 世界観E 朝凪と珊瑚。色は3つ(白・深い海の青緑・朝の珊瑚)。珊瑚はボタン・印・細い線だけ */
:root{
  --shiro:#FFFFFF; --umi:#17343C; --sango:#E3775B;
  --col:1140px; --wide:1600px; --pad:72px; --r:12px;
  --umi06:rgba(23,52,60,.06); --umi14:rgba(23,52,60,.14); --umi60:rgba(23,52,60,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--shiro);color:var(--umi);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  font-size:16px;line-height:1.9;letter-spacing:0.05em;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--col);margin:0 auto;padding:0 22px}
section{padding:var(--pad) 0;position:relative}
h1,h2,h3{font-weight:700;line-height:1.4;letter-spacing:0.05em}
h1{font-size:30px}
h2{font-size:22px}
h3{font-size:18px}
.lead{margin-top:20px;max-width:40em}
.note{font-size:14px;color:var(--umi60);line-height:1.8}
.num{font-family:"Outfit",sans-serif;letter-spacing:.02em}
.eyebrow{display:inline-block;font-family:"Outfit",sans-serif;font-size:13px;letter-spacing:.12em;color:var(--sango);margin-bottom:10px}
.ul{border-bottom:1.5px solid var(--sango);padding-bottom:2px}

/* 写真の背後に置く和文の大きな動詞(墨の12%)。見出しではなく飾り */
.ghost{position:absolute;right:4%;top:12px;font-weight:700;line-height:1;letter-spacing:.02em;
  font-size:min(18vw,72px);color:rgba(23,52,60,0.12);pointer-events:none;user-select:none;z-index:0}
section > .wrap{position:relative;z-index:1}

/* ヘッダー */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--umi14)}
.hbar{max-width:var(--wide);margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:700;font-size:16px;letter-spacing:.08em;line-height:1.3}
.logo small{display:block;font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--umi60)}
.menu-btn{background:var(--umi);color:var(--shiro);border:0;border-radius:999px;padding:10px 18px;font:inherit;font-size:13px;letter-spacing:.12em;cursor:pointer}
nav ul{list-style:none}
nav{display:none}
header.open nav{display:block;border-top:1px solid var(--umi14)}
header.open nav ul{max-width:var(--wide);margin:0 auto;padding:6px 22px 18px}
header.open nav li{border-bottom:1px solid var(--umi06)}
header.open nav a{display:block;padding:14px 2px;font-size:15px}

/* ヒーロー(全幅写真) */
.hero{position:relative;height:88svh;min-height:520px;overflow:hidden;padding:0}
.hero img{width:100%;height:100%;object-fit:cover}
.hero-in{position:absolute;inset:auto 0 0 0;padding:0 22px 48px;background:linear-gradient(to top,rgba(23,52,60,.62),rgba(23,52,60,0))}
.hero-in .wrap{padding:0}
.hero h1,.hero p{color:var(--shiro)}
.hero p{margin-top:14px;font-size:14px;letter-spacing:.08em}

/* ボタン: 主=珊瑚の丸ボタン / 電話=白抜き */
.btn-main{display:inline-flex;align-items:center;gap:10px;background:var(--sango);color:var(--shiro);border-radius:999px;
  padding:16px 30px;font-weight:700;font-size:16px;letter-spacing:.08em;transition:transform .25s ease,box-shadow .25s ease}
.btn-main:hover,.btn-main:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(227,119,91,.35)}
.btn-tel{display:inline-block;border:1.5px solid var(--umi);border-radius:999px;padding:13px 26px;font-weight:700;letter-spacing:.06em}
.btn-tel small{display:block;font-weight:400;font-size:12px;color:var(--umi60)}
.hero .btn-tel,.fixbar .btn-tel{border-color:var(--shiro);color:var(--shiro)}
.hero .btn-tel small,.fixbar .btn-tel small{color:rgba(255,255,255,.8)}
.cta-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* 本日の催行・7日帯 */
.today{padding:18px 0;border-bottom:1px solid var(--umi14)}
.today .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.today b{font-size:18px;font-weight:700}
.today .t-ok b{color:var(--sango)}
.today .t-off b{color:var(--umi60)}
.today .n{font-size:14px;color:var(--umi60)}
.week{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:14px 22px;border-bottom:1px solid var(--umi14);-webkit-overflow-scrolling:touch}
.week-label{flex:0 0 auto;font-size:13px;font-weight:700;margin-right:4px;white-space:nowrap}
.wd{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:48px;padding:8px 4px;border-radius:var(--r);background:var(--umi06);line-height:1.3}
.wd b{font-family:"Outfit",sans-serif;font-size:14px;font-weight:500}
.wd small{font-size:11px;color:var(--umi60)}
.wd i{font-style:normal;font-size:17px;margin-top:2px}
.wd-ok i,.wd-few i{color:var(--sango)}
.wd-full,.wd-off{opacity:.45}
.week-more{flex:0 0 auto;font-size:13px;margin-left:6px;white-space:nowrap;border-bottom:1.5px solid var(--sango)}

/* 入口: 円形の写真カード */
.c-cards{display:grid;gap:34px;margin-top:40px}
.c-card{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.c-ph{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px var(--shiro),0 0 0 7px var(--umi14);transition:transform .35s ease}
.c-ph img{width:100%;height:100%;object-fit:cover}
.c-card:hover .c-ph{transform:scale(1.04)}
.c-card strong{display:block;font-size:20px;font-weight:700}
.c-card .c-t{display:block;font-size:14px;color:var(--umi60);margin-top:4px;line-height:1.8}
.c-card .c-p{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--sango)}

/* 全幅写真の帯 */
.wide-ph{max-width:var(--wide);margin:0 auto}
.wide-ph img{width:100%;height:clamp(220px,38vw,560px);object-fit:cover}
.wide-ph figcaption{max-width:var(--col);margin:10px auto 0;padding:0 22px;font-size:13px;color:var(--umi60)}

/* 箱・並び */
.cols{display:grid;gap:22px;margin-top:36px}
.card{background:var(--umi06);border-radius:var(--r);padding:24px 22px}
.card h3{margin-bottom:8px}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.photos img{border-radius:var(--r);width:100%;height:100%;object-fit:cover}
.photos figcaption{font-size:13px;color:var(--umi60);margin-top:6px}

/* 料金・基準の表 */
table.price,table.crit{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
table.price th,table.price td,table.crit th,table.crit td{border-bottom:1px solid var(--umi14);padding:14px 6px;text-align:left;vertical-align:top;font-weight:400}
table.price th,table.crit th{font-weight:700;width:34%}
table.price td.y{text-align:right;white-space:nowrap;font-family:"Outfit",sans-serif;font-size:17px}

/* カレンダー */
input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;display:block}
input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
table.cal{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px;table-layout:fixed}
table.cal th{padding:9px 0;font-weight:400;font-size:12px;color:var(--umi60);border-bottom:1px solid var(--umi14)}
table.cal td{padding:4px 2px;text-align:center;height:58px;vertical-align:top}
.c-day{display:block;font-family:"Outfit",sans-serif;font-size:12px;color:var(--umi60)}
.c-mark{display:block;margin-top:3px;font-size:16px}
.cal-cell{width:100%;height:100%;background:var(--umi06);border:0;border-radius:10px;cursor:pointer;color:inherit;font:inherit;padding:6px 0}
.cal-cell:hover{background:rgba(227,119,91,.14)}
.k-maru,.k-san{color:var(--sango);font-weight:700}
.k-man,.k-kyu{opacity:.35}
.legend{font-size:13px;color:var(--umi60);margin-top:14px;line-height:1.9}

/* フォーム */
.req{background:var(--umi06);border-radius:var(--r);padding:26px 22px;margin-top:30px}
.req h3 small{display:block;font-size:13px;font-weight:400;color:var(--umi60);margin-top:6px}
.f-row{margin-top:18px}
.f-row label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.f-row input,.f-row select,.f-row textarea{width:100%;padding:13px 14px;border:1px solid var(--umi14);border-radius:10px;background:var(--shiro);font:inherit;font-size:16px;color:inherit}
.f-row textarea{min-height:100px;resize:vertical}
.hp{position:absolute;left:-9999px}
button.send{margin-top:24px;width:100%;padding:17px;border:0;border-radius:999px;background:var(--sango);color:var(--shiro);font:inherit;font-weight:700;font-size:16px;letter-spacing:.08em;cursor:pointer}
button.send:disabled{opacity:.5;cursor:default}
.fmsg{margin-top:14px;font-size:15px}
.fmsg.ng{color:#B4452B}

/* お知らせ・流れ・FAQ */
dl.news{margin-top:24px}
dl.news dt{font-family:"Outfit",sans-serif;font-size:13px;color:var(--umi60);margin-top:18px}
dl.news dd{margin-top:4px}
.flow li,.faq li{list-style:none;border-top:1px solid var(--umi14);padding:18px 0}
.flow .t{display:inline-block;font-family:"Outfit",sans-serif;font-size:13px;color:var(--sango);font-weight:500;margin-bottom:4px}
.faq q{display:block;font-weight:700;quotes:none}
.faq p{margin-top:6px}

/* 固定の予約帯(ヒーローが画面から消えてから出す 9/22 教訓) */
.fixbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--umi);color:var(--shiro);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;justify-content:center;align-items:center;
  transform:translateY(110%);transition:transform .3s ease}
.fixbar.show{transform:none}
.fixbar .btn-main{padding:12px 22px;font-size:15px}
.fixbar .btn-tel{padding:11px 18px;font-size:14px;line-height:1.2}
.fixbar .btn-tel small{display:none}

footer{background:var(--umi);color:var(--shiro);padding:56px 0 110px;font-size:14px}
footer .logo small{color:rgba(255,255,255,.7)}
footer .note{color:rgba(255,255,255,.75)}
footer .btn-tel{border-color:var(--shiro)}
footer .btn-tel small{color:rgba(255,255,255,.75)}
footer .fnav{list-style:none;display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:22px;font-size:13px}
footer .cr{margin-top:28px;font-size:12px;color:rgba(255,255,255,.6);line-height:1.9}

@media(min-width:820px){
  :root{--pad:120px}
  h1{font-size:56px}
  h2{font-size:32px}
  .ghost{font-size:120px;right:6%}
  .hero{height:720px}
  .hero-in{padding-bottom:64px}
  .menu-btn{display:none}
  nav{display:block}
  nav ul{display:flex;gap:22px}
  nav a{font-size:14px;font-weight:700}
  nav a:hover{color:var(--sango)}
  .week{justify-content:center}
  .c-cards{grid-template-columns:repeat(3,1fr);gap:28px}
  .c-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .c-ph{width:220px;height:220px}
  .cols{grid-template-columns:repeat(3,1fr)}
  .cols.two{grid-template-columns:1fr 1fr}
  .photos{grid-template-columns:repeat(3,1fr);gap:14px}
  .req{max-width:760px;padding:34px 36px}
  /* PC は画面幅の帯にせず、右下に浮かぶ小さなカプセル(主公目視 9/22: 帯が本文を覆って見にくい) */
  .fixbar{left:auto;right:24px;bottom:24px;border-radius:;padding:8px 8px 8px 22px;gap:16px;
    box-shadow:0 10px 30px rgba(23,52,60,.28);transform:translateY(160%)}
  .fixbar .btn-tel{border:0;padding:0;font-size:14px;font-weight:700}
  .fixbar .btn-tel small{display:inline;font-size:14px;color:var(--shiro);margin-left:6px;font-family:"Outfit",sans-serif}
  .fixbar .btn-main{order:2;padding:11px 22px;font-size:14px}
  footer{padding-bottom:56px}
}

/* ---- 動き v3(3段階・端末設定を尊重・no-js で消えない) ---- */
.js.motion :is(main h2, main .lead, main .card, main .c-card, main .wide-ph, main table.price, main table.cal, main .flow li, main .faq li, main dl.news, main .req, main .legend, main .crit){opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js.motion :is(main h2, main .lead, main .card, main .c-card, main .wide-ph, main table.price, main table.cal, main .flow li, main .faq li, main dl.news, main .req, main .legend, main .crit).in{opacity:1;transform:none}
.js.motion .rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js.motion .rv.in{opacity:1;transform:none}
.js.motion .rv-d1,.js.motion .d1{transition-delay:.09s}
.js.motion .rv-d2,.js.motion .d2{transition-delay:.18s}
.js.motion .rv-d3,.js.motion .d3{transition-delay:.27s}

/* 横に並ぶものは左から順に */
.js.motion .cols > *:nth-child(2),.js.motion .photos > *:nth-child(2){transition-delay:.09s}
.js.motion .cols > *:nth-child(3),.js.motion .photos > *:nth-child(3){transition-delay:.18s}
.js.motion .photos > *:nth-child(4){transition-delay:.06s}
.js.motion .photos > *:nth-child(5){transition-delay:.15s}
.js.motion .photos > *:nth-child(6){transition-delay:.24s}

/* ヒーロー: 読み込み直後に文字が順に立ち上がる(IntersectionObserver に頼らない) */
@keyframes kdrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.motion .hero h1{animation:kdrise .9s .25s both}
.motion .hero-in p{animation:kdrise .9s .45s both}
.motion .hero-in p.cta-row{animation:kdrise .9s .65s both}

/* 写真のゆっくりズーム */
.motion .kb{animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}

/* 写真は指を置くと少し寄る(PCのみ) */
@media (hover:hover){
  .motion .photos figure{overflow:hidden}
  .motion .photos figure img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .motion .photos figure:hover img{transform:scale(1.04)}
}

/* 下線が伸びるリンク */
.ul{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s ease}
.ul:hover,.ul:focus-visible{background-size:100% 1px}
.motion{scroll-behavior:smooth}

/* 控えめ: 距離と時間を半分に、ズームは気づかない程度に */
.js.motion.motion-soft :is(main h2, main .lead, main .card, main .c-card, main .wide-ph, main table.price, main table.cal, main .flow li, main .faq li, main dl.news, main .req, main .legend, main .crit){transform:translateY(8px);transition-duration:.45s,.45s}
.js.motion.motion-soft .rv{transform:translateY(8px);transition-duration:.45s,.45s}
.motion.motion-soft .kb{animation-duration:22s}
@keyframes kb-soft{from{transform:scale(1.04)}to{transform:scale(1)}}
.motion.motion-soft .kb{animation-name:kb-soft}
.motion.motion-soft .hero h1,.motion.motion-soft .hero-in p{animation-duration:.6s}
.motion-soft .ul{transition-duration:.2s}

@media (prefers-reduced-motion: reduce){
  .js.motion:not(.force) :is(main h2, main .lead, main .card, main .c-card, main .wide-ph, main table.price, main table.cal, main .flow li, main .faq li, main dl.news, main .req, main .legend, main .crit){opacity:1;transform:none;transition:none}
  .js.motion:not(.force) .rv{opacity:1;transform:none;transition:none}
  .motion:not(.force) .hero h1,.motion:not(.force) .hero-in p{animation:none}
  .motion:not(.force) .kb{animation:none}
  .motion:not(.force) .photos figure:hover img{transform:none}
  .motion:not(.force) .ul{transition:none}
  .motion:not(.force){scroll-behavior:auto}
}