/* * 沖縄ビーチヨガ — 共通デザインシステム * トップページ(Claude Design)由来。全ページ共通。フォントは layout の で読み込む。 * ページ固有の背景画像などはビュー側のインライン style で指定する。 */ /* --- リセット / キーフレーム --- */ .by-page *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{background:#eef4f3;margin:0;} .by-page img{display:block;max-width:100%;} .by-page a{color:inherit;text-decoration:none;} .by-page button{font-family:inherit;cursor:pointer;border:none;background:none;} .by-page ::selection{background:#c9743f;color:#fff;} @keyframes byKen{0%{transform:scale(1.02)}100%{transform:scale(1.12)}} @keyframes byFloat{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}} @keyframes byChevron{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(4px,4px);opacity:1}} /* --- スクロール出現(JS未使用時も表示されるよう transition のみ既定) --- */ .by-page .reveal{transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1);} /* --- ホバー(設計の style-hover 相当) --- */ .by-hov-fade{transition:opacity .3s ease}.by-hov-fade:hover{opacity:.6} .by-hov-bright{transition:filter .3s ease}.by-hov-bright:hover{filter:brightness(1.08)} .by-hov-bright14{transition:filter .3s ease}.by-hov-bright14:hover{filter:brightness(1.14)} .by-hov-tint-l{transition:background .3s ease}.by-hov-tint-l:hover{background:rgba(247,242,233,.12)} .by-hov-tint-d{transition:background .3s ease}.by-hov-tint-d:hover{background:rgba(241,233,218,.12)} .by-hov-invert{transition:background .3s ease,color .3s ease}.by-hov-invert:hover{background:#16323a;color:#eef4f3} .by-hov-op94{transition:opacity .5s ease}.by-hov-op94:hover{opacity:.94} .by-hov-op92{transition:opacity .3s ease}.by-hov-op92:hover{opacity:.92} .by-hov-white{transition:color .3s ease}.by-hov-white:hover{color:#ffffff} /* --- 開催ビーチ: セグメント型タブ --- */ .by-tabs{display:inline-flex;border:1px solid rgba(22,50,58,.2);border-radius:4px;overflow:hidden;background:#fff;} .by-tab{background:none;border:none;cursor:pointer;padding:11px 24px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#6c7b78;transition:background .25s ease,color .25s ease;border-right:1px solid rgba(22,50,58,.14);} .by-tab:last-child{border-right:none;} .by-tab.is-active{background:var(--ac,#c9743f);color:#fff;} /* 日本語を単語途中で折らない: 見出し・アイキャッチ限定(本文は自然折返し) */ .by-page h1,.by-page h2,.by-page h3{word-break:keep-all;} .by-page [style*="align-items:center;gap:14px"]{flex-wrap:wrap;} .by-page [style*="align-items:center;gap:14px"] span{word-break:keep-all;} .by-hero-copy-sp{display:none;} .by-scroll-sp{display:none;} /* ヒーロー副導線「体験を見る ⌄」: 1行はアニメと相性が悪い(矢印だけ/文字が動くと不自然)ため静止 */ [data-desktop-nav] a{white-space:nowrap;} /* エンブレムの絵柄が枠内で上寄りなので下へ微調整し、ワードマークと光学的に中央を揃える */ header a svg{position:relative;top:6px;} [data-mobile-menu] svg{position:relative;top:5px;} /* ===== モバイル(~600px) ===== */ @media (max-width:600px){ .by-wordmark-en{font-size:.84rem !important;letter-spacing:.13em !important;white-space:nowrap;} .by-wordmark-jp{font-size:.58rem !important;letter-spacing:.28em !important;white-space:nowrap;} .by-hero-eyebrow{display:none !important;} .by-hero-copy-pc{display:none !important;} .by-hero-copy-sp{display:block !important;} .by-hero-content{justify-content:space-between !important;padding-top:150px !important;padding-bottom:16px !important;} /* 「体験を見る」を ボタン↔画面下端 の余白の上下中央に(上のgapと下のpadding-bottomを等値) */ .by-hero-cta{gap:16px !important;} .by-hero-cta > a:first-child{width:100%;justify-content:center;} [data-mobile-menu] nav a{font-size:1.4rem !important;} [data-mobile-menu] nav{gap:20px !important;} .by-page h2{font-size:1.5rem !important;} .by-stats{grid-template-columns:1fr 1fr !important;border-top:none !important;} .by-stat{border-right:none !important;border-top:1px solid rgba(22,50,58,.12) !important;padding:22px 8px !important;} .by-portrait-offset{transform:none !important;} .by-tabs{display:flex;width:100%;} .by-tab{flex:1;padding:11px 8px;} } /* ========================================================================= 下層ページ共通コンポーネント(トップのデザイン言語を再利用) ========================================================================= */ /* コンテナ / セクション */ .by-container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,46px);} .by-container--wide{max-width:1240px;} .by-container--narrow{max-width:900px;} .by-section{padding:clamp(64px,9vw,120px) 0;} .by-section--tight{padding:clamp(44px,6vw,80px) 0;} .by-bg-light{background:#eef4f3;} .by-bg-mist{background:#d3e5e2;} .by-bg-deep{background:#13343b;color:#f1e9da;} .by-bg-white{background:#fff;} /* アイキャッチ(英語ラベル + 罫線 + 和名) */ .by-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;} .by-eyebrow .ln{width:34px;height:1px;background:var(--ac,#c9743f);display:block;flex:none;} .by-eyebrow .en{font-family:'Cormorant Garamond',serif;font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ac,#c9743f);font-weight:600;} .by-eyebrow .jp{font-size:.72rem;letter-spacing:.2em;color:#8a9794;} .by-bg-deep .by-eyebrow .en{color:var(--ac-light,#84cdd9);} .by-bg-deep .by-eyebrow .jp{color:rgba(241,233,218,.55);} /* 見出し / 本文(明朝の上品な階層) */ .by-h1{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.5;letter-spacing:.02em;color:#16323a;} .by-h2{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.55;letter-spacing:.02em;color:#16323a;} .by-h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.6;color:#16323a;} .by-lead{color:#41565a;font-size:1rem;line-height:2.15;letter-spacing:.03em;} .by-prose{color:#41565a;font-size:.98rem;line-height:2.05;letter-spacing:.02em;} .by-prose p + p{margin-top:1.2em;} .by-bg-deep .by-h2,.by-bg-deep .by-h3{color:#fff;} .by-bg-deep .by-lead,.by-bg-deep .by-prose{color:rgba(241,233,218,.78);} /* ボタン */ .by-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;font-size:.86rem;letter-spacing:.14em;border-radius:1px;transition:filter .3s ease,background .3s ease,color .3s ease;} .by-btn--primary{background:var(--ac,#c9743f);color:#fff;} .by-btn--primary:hover{filter:brightness(1.08);} .by-btn--outline{border:1px solid #16323a;color:#16323a;} .by-btn--outline:hover{background:#16323a;color:#eef4f3;} .by-btn--ghost{border:1px solid rgba(247,242,233,.55);color:#eef4f3;} .by-btn--ghost:hover{background:rgba(247,242,233,.12);} /* 下層ページ用のページヘッダー(フルヒーローの代わりの帯) */ .by-pagehero{position:relative;padding-top:calc(clamp(64px,8vw,86px) + clamp(48px,7vw,90px));padding-bottom:clamp(40px,6vw,72px);overflow:hidden;background:#0c2a30;color:#eef4f3;} .by-pagehero__bg{position:absolute;inset:0;background-size:cover;background-position:center;} .by-pagehero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,32,38,.5),rgba(10,32,38,.7));} .by-pagehero__inner{position:relative;z-index:2;} .by-pagehero .by-eyebrow .ln{background:var(--ac-light,#bfe6ec);} .by-pagehero .by-eyebrow .en{color:var(--ac-light,#bfe6ec);} .by-pagehero .by-eyebrow .jp{color:rgba(255,253,248,.72);} .by-pagehero h1{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.9rem,4vw,3rem);line-height:1.5;color:#fff;text-shadow:0 2px 24px rgba(8,26,30,.3);} .by-pagehero p{margin-top:18px;max-width:640px;color:rgba(255,253,248,.9);font-size:clamp(.92rem,1.1vw,1rem);line-height:2;text-shadow:0 1px 14px rgba(8,26,30,.3);} /* パンくず */ .by-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.74rem;letter-spacing:.08em;color:#8a9794;margin-bottom:22px;} .by-crumbs a{color:#8a9794;} .by-crumbs a:hover{color:var(--ac,#c9743f);} .by-crumbs .sep{opacity:.5;} .by-pagehero .by-crumbs,.by-pagehero .by-crumbs a{color:rgba(255,253,248,.7);} /* カード(一覧用) */ .by-card{display:block;background:#fff;border-radius:1px;overflow:hidden;box-shadow:0 14px 40px rgba(22,50,58,.08);transition:transform .4s ease,box-shadow .4s ease;} .by-card:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(22,50,58,.14);} .by-card__media{aspect-ratio:4/3;overflow:hidden;background:#13343b;} .by-card__media img{width:100%;height:100%;object-fit:cover;} .by-card__body{padding:clamp(20px,2.4vw,28px);} /* レスポンシブ・グリッド */ .by-grid{display:grid;gap:clamp(16px,2vw,26px);} .by-grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} .by-grid--4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));} .by-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));} /* アイキャッチ 中央寄せ */ .by-eyebrow--center{justify-content:center;} /* 定義リスト(情報テーブル) — ビーチ詳細/会社概要/特商法で共通 */ .by-deflist{background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 14px 40px rgba(22,50,58,.07);} .by-deflist dl{margin:0;} .by-deflist > dl > div{display:grid;grid-template-columns:var(--label-w,minmax(96px,150px)) 1fr;gap:14px;padding:16px clamp(18px,2.4vw,28px);} .by-deflist > dl > div + div{border-top:1px solid rgba(22,50,58,.08);} .by-deflist dt{font-family:'Shippori Mincho',serif;font-size:.9rem;color:#16323a;line-height:1.7;} .by-deflist dd{margin:0;font-size:.92rem;line-height:1.9;color:#46595c;} /* 料金カード — /about・/program で共通(shared/_price_cards) */ .by-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,3vw,32px);} .by-price{background:#fff;border-radius:2px;padding:clamp(30px,4vw,44px);box-shadow:0 14px 40px rgba(22,50,58,.07);} .by-price--dark{background:#13343b;color:#fff;box-shadow:0 18px 50px rgba(19,52,59,.22);} .by-price__label{font-family:'Cormorant Garamond',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ac,#c9743f);} .by-price--dark .by-price__label{color:var(--ac-light,#84cdd9);} .by-price__name{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.4rem;color:#16323a;margin-top:8px;} .by-price--dark .by-price__name{color:#fff;} .by-price__amount{margin-top:20px;display:flex;align-items:baseline;gap:4px;font-family:'Cormorant Garamond',serif;color:#16323a;} .by-price--dark .by-price__amount{color:#fff;} .by-price__amount b{font-weight:500;font-size:clamp(2.6rem,4vw,3.2rem);line-height:1;} .by-price__amount .unit{font-family:'Zen Kaku Gothic New',sans-serif;font-size:.8rem;color:#73827f;margin-left:6px;} .by-price--dark .by-price__amount .unit{color:rgba(241,233,218,.66);} .by-price__feat{margin-top:22px;display:grid;gap:12px;} .by-price__feat div{display:flex;gap:10px;font-size:.9rem;color:#46595c;} .by-price__feat div::before{content:"—";color:var(--ac,#c9743f);} .by-price--dark .by-price__feat div{color:rgba(241,233,218,.86);} .by-price--dark .by-price__feat div::before{color:var(--ac-light,#84cdd9);} .by-price-note{margin-top:26px;text-align:center;font-size:.82rem;color:#73827f;line-height:1.9;} /* FAQ アコーディオン — /about・/faq で共通(shared/_faq_list) */ .by-faq{display:grid;gap:14px;} .by-faq details{background:#fff;border-radius:2px;box-shadow:0 10px 30px rgba(22,50,58,.06);overflow:hidden;} .by-faq summary{list-style:none;cursor:pointer;padding:20px clamp(18px,2.4vw,28px);font-family:'Shippori Mincho',serif;font-size:1.02rem;color:#16323a;display:flex;gap:12px;align-items:baseline;} .by-faq summary::-webkit-details-marker{display:none;} .by-faq summary::before{content:"Q";color:var(--ac,#c9743f);font-family:'Cormorant Garamond',serif;flex:none;} .by-faq .a{padding:0 clamp(18px,2.4vw,28px) 22px;color:#46595c;font-size:.92rem;line-height:2;} /* ダーク中央CTA */ .by-cta{text-align:center;padding:clamp(56px,7vw,88px) 0;} /* フォーム — 予約/変更・キャンセル/問い合わせで共通 */ .by-formcard{background:#fff;border-radius:2px;box-shadow:0 16px 44px rgba(22,50,58,.08);padding:clamp(24px,4vw,44px);} .by-form{display:grid;gap:20px;} .by-field label{display:block;font-family:'Shippori Mincho',serif;font-size:.92rem;color:#16323a;margin-bottom:8px;} .by-field .req{color:var(--ac,#c9743f);font-size:.72rem;margin-left:8px;letter-spacing:.04em;} .by-form input[type=text],.by-form input[type=email],.by-form input[type=tel],.by-form input[type=number],.by-form input[type=search],.by-form select,.by-form textarea{ width:100%;font-family:inherit;font-size:1rem;color:#16323a;background:#fff;border:1px solid rgba(22,50,58,.22);border-radius:2px;padding:13px 15px;transition:border-color .2s ease,box-shadow .2s ease; } .by-form input:focus,.by-form select:focus,.by-form textarea:focus{outline:none;border-color:var(--ac,#c9743f);box-shadow:0 0 0 3px rgba(201,116,63,.12);} .by-form textarea{min-height:130px;resize:vertical;line-height:1.8;} .by-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316323a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;} .by-hint{font-size:.8rem;color:#8a9794;margin-top:7px;line-height:1.7;} .by-errors{background:#f6e6dd;border:1px solid rgba(201,116,63,.3);border-radius:2px;padding:14px 18px;color:#8a3b1a;font-size:.88rem;line-height:1.9;} .by-errors ul{margin:0;padding-left:1.2em;} .by-btn--block{width:100%;justify-content:center;} .by-form .by-btn{border:none;cursor:pointer;font-family:inherit;} /* 予約フォーム: 開催日カレンダー */ .by-datetime{display:flex;flex-direction:column;gap:16px;} .by-calendar{display:flex;justify-content:flex-start;} /* flatpickr は inline でも .by-calendar の「外」(.by-datetime 直下)に描画されるため .by-datetime にスコープ */ .by-datetime .flatpickr-calendar.inline{width:fit-content;max-width:100%;margin:0;padding:14px 16px 16px;box-shadow:none;border:1px solid rgba(22,50,58,.14);border-radius:2px;} .by-datetime .flatpickr-months{padding-bottom:4px;} .by-datetime .flatpickr-months .flatpickr-prev-month{top:14px;left:6px;} .by-datetime .flatpickr-months .flatpickr-next-month{top:14px;right:6px;} /* 行の高さ=○の高さで上下がくっつくため、日付セルに縦マージンを足して行間を空ける(横の間隔に合わせる) */ .by-datetime .flatpickr-day{margin-top:3px;margin-bottom:3px;} .by-datetime .flatpickr-day.selected,.by-datetime .flatpickr-day.selected:hover,.by-datetime .flatpickr-day.selected:focus{background:var(--ac,#c9743f);border-color:var(--ac,#c9743f);} .by-datetime .flatpickr-day.today{border-color:var(--ac,#c9743f);} .by-datetime .flatpickr-day.today:hover{background:var(--ac-light,#f0d8c9);color:#16323a;} .by-datetime .flatpickr-day:hover{background:var(--ac-light,#f0d8c9);} /* flatpickr のヘッダー入力に by-form のグローバル input/select スタイルを当てない */ .by-form .flatpickr-calendar input,.by-form .flatpickr-calendar select{width:auto;border:none;border-radius:0;padding:0;background:transparent;background-image:none;box-shadow:none;font-size:inherit;} .by-form .flatpickr-calendar input:focus,.by-form .flatpickr-calendar select:focus{border:none;box-shadow:none;} /* 予約フォーム: 開催枠(朝ヨガ/サンセット)ボタン */ .by-slots__label{font-family:'Shippori Mincho',serif;font-size:.88rem;color:#16323a;margin-bottom:10px;} .by-slots__list{display:flex;flex-wrap:wrap;gap:12px;} /* .by-page button{border:none;background:none} リセットに勝つよう .by-form で詳細度を上げる */ .by-form .by-slot{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start;padding:12px 24px;border:1px solid rgba(22,50,58,.32);border-radius:2px;background:#fff;color:#16323a;cursor:pointer;font-family:inherit;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;} .by-form .by-slot:hover{border-color:var(--ac,#c9743f);box-shadow:0 4px 14px rgba(22,50,58,.1);} .by-form .by-slot.is-active{border-color:var(--ac,#c9743f);background:var(--ac,#c9743f);color:#fff;} .by-slot__type{font-size:.8rem;letter-spacing:.04em;} .by-slot__time{font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1;letter-spacing:.06em;} /* 予約フォーム: ビーチの地図 */ .by-map{width:100%;height:360px;margin-bottom:12px;border:1px solid rgba(22,50,58,.16);border-radius:2px;overflow:hidden;} .by-map__notice{color:#8a3b1a;}