@charset "UTF-8"; /*------------------------------------------------------------------------- 実装メモ -------------------------------------------------------------------------*/ /* ■概要 ~350px：すべてのサイズを可変 ~390px：見出しやテキストが2行になる箇所があるため、フォントサイズや余白を縮小（「～のレスポンシブ対策」を参照） 768px~1079px：すべてのサイズを可変 1080px~：PCデザイン 1440px~：すべてのサイズを可変 ■共通パーツで使うクラス名 has-wave-bg-layer：波の背景レイヤーを使うページの に付与（レイアウト基準） wave-bg-layer：波の背景レイヤー本体（
、JS で位置を計算） wave-bg-start：背景レイヤーの開始位置を示す目印（背景を始めたい要素に付与） wave-bg：要素いっぱいに波の背景画像を敷く汎用クラス（ドロワー等の局所背景に使用） section-padding：セクション内の余白 heading：ページ見出し heading--section：ページ見出しの位置調整など heading-font--ja：日本語フォント heading-font--en：英語フォント heading-sub：サブタイトル heading-sub-font--ja：サブタイトル日本語フォント button：ボタン button-text：ボタンテキスト button-icon：ボタンの矢印アイコン（ラッパー要素） icon-arrow：ボタンの矢印アイコン（白色） icon-arrow--secondary：ボタンの矢印アイコン（黒色） button-member：会員ページボタン button-member-text：会員ページボタンテキスト button-member-icon：会員ページボタンアイコン button--round：会員ページボタン（角丸） button-member-text--small：会員ページボタン（角丸）テキスト button-member-icon：会員ページボタン（角丸）アイコン feature-card-list：カード型デザイン（PHILOSOPHY、SUPPORT） feature-card-item：カード型デザイン（PHILOSOPHY、SUPPORT）のカード feature-card-icon：カード型デザイン（PHILOSOPHY、SUPPORT）のアイコン feature-card-title：カード型デザイン（PHILOSOPHY、SUPPORT）のタイトル feature-card-subtitle：カード型デザイン（PHILOSOPHY、SUPPORT）のサブタイトル feature-block-list：ブロック型デザイン（CORE SOLUTION、ADVANTAGE） feature-block-item：ブロック型デザイン（CORE SOLUTION、ADVANTAGE）のカード feature-block-icon：ブロック型デザイン（CORE SOLUTION、ADVANTAGE）のアイコン feature-block-title：ブロック型デザイン（CORE SOLUTION、ADVANTAGE）のタイトル feature-block-subtitle：ブロック型デザイン（CORE SOLUTION、ADVANTAGE）のサブタイトル text-link：テキストリンク subpage-title-section：下層ページのページタイトルセクション legal-:利用規約、プライバシーポリシーページの接頭語 ■命名ルール ページタイトル：heading- セクションタイトル：-title 画像：-img アイコン：icon- ラッパー要素：-wrap ブロックの主内容（本文側）：-main ブロックの固まり：-content セクションの内側：-inner ■その他 hoverアクションは「@media (any-hover: hover) { }」で記述 has-wave-bg-layerとwave-bg-layerは背景画像の範囲指定のために使用 */ /*------------------------------------------------------------------------- アクセシビリティ用ユーティリティ -------------------------------------------------------------------------*/ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /*------------------------------------------------------------------------- 共通css -------------------------------------------------------------------------*/ :root { /* カラーコード */ --color-main: #04518d; --color-accent: #66b7eb; --color-base: #00070c; --color-text-main: #c1c1c1; --color-border: #464646; --color-hover: #012f53; --color-text-highlight01: #c12762; --color-text-highlight02: #2b6e9a; /* ドロワーメニューのアニメーションエフェクト */ --drawer-ease: cubic-bezier(0.215, 0.61, 0.355, 1); } html { font-size: 10px; } /* 350px 以下：ルートを可変 → rem 指定がすべて連動 */ @media (max-width: 350px) { html { /* 350px=10px を基準に、350px 未満でも連続的に縮小 */ font-size: calc(100vw / 35); } } /* 768px 以上：ルートを可変 → rem 指定がすべて連動 */ @media (min-width: 768px) and (max-width: 1079px) { html { /* 768px=10px → 1080px=12px に線形でスケール（上下限を固定） */ font-size: clamp(10px, calc(10px + (100vw - 768px) * 0.00641), 12px); } } @media (min-width: 1440px) and (max-width: 1919px) { html { /* 1440px=10px → 1920px=12px に線形でスケール（上下限を固定） */ font-size: clamp(10px, calc(10px + (100vw - 1440px) * 0.00417), 12px); } } @media (min-width: 1920px) { html { /* 1920px=12px を通過後も同じ傾きで vw に連動して拡大 */ font-size: calc(10px + (100vw - 1440px) * 0.00417); } } body { font-family: "Noto Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; min-height: 100vh; /* 10px × 1.6rem = 16px */ font-size: 1.5rem; font-weight: 400; line-height: 1.4; letter-spacing: 0em; background-color: var(--color-base); color: var(--color-text-main); overflow-wrap: anywhere; } @media (min-width: 1080px) { body { font-size: 1.6rem; } } img { max-width: 100%; vertical-align: bottom; } a { cursor: pointer; } /* 電話番号の自動リンク無効化（Chrome対策） */ a[href^="tel"] { text-decoration: none; color: inherit; pointer-events: none; cursor: default; } button { all: unset; display: inline-block; cursor: pointer; } input, textarea, select, button { margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; } input[type="checkbox"], input[type="radio"] { appearance: none; width: 2rem; height: 2rem; background-color: #fff; cursor: pointer; flex-shrink: 0; } select { appearance: none; background: none; border: none; padding: 0; } /*------------------------------------------------------------------------- 共通パーツ -------------------------------------------------------------------------*/ /* テキストリンク */ .text-link { transition: color 0.5s ease; } .text-link--underline { position: relative; color: var(--color-accent); } .text-link--underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } /* ボタン（背景白） */ .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; max-width: 23rem; width: 100%; height: 6rem; overflow: hidden; background-color: #ffffff; box-shadow: 0 0 0 0 rgba(1, 112, 199, 0); transition: color 0.2s ease, box-shadow 0.8s ease; } .button-text { position: relative; z-index: 1; color: #010f18; transition: color 0.25s ease; } .icon-arrow--secondary { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.25s ease; } /* ボタン（背景青） */ .button-wrap { display: flex; justify-content: center; } .button-member, .button-submit { background-color: var(--color-main); box-shadow: 0 0 0 0 rgba(1, 112, 199, 0); transition: color 0.2s ease, box-shadow 0.8s ease; } .button::before { content: ""; position: absolute; inset: 0; background-color: #04518d; transform: scaleX(0); transform-origin: right; transition: transform 0.25s ease; z-index: 0; } .button-member::before, .button-submit::before { background-color: var(--color-hover); } .button-member-text, .button-submit-text { position: relative; z-index: 1; color: #ffffff; } .button-icon { position: relative; z-index: 1; } .icon-arrow { display: block; width: 100%; height: 100%; object-fit: cover; } /* ヘッダーの会員ページボタン用 */ .button--round { gap: 1.5rem; width: 17rem; height: 5rem; border-radius: 5rem; } .button-member-text--small { position: relative; z-index: 1; color: #ffffff; font-size: 1.4rem; } .button-member-icon { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; } /* タブ切り替えボタン（ホバーは背景レイヤーで表現し、テキストを前面に保つ） */ .tab-button { position: relative; overflow: hidden; background-color: #000509; background-image: linear-gradient(var(--color-hover), var(--color-hover)); background-repeat: no-repeat; background-size: 0% 100%; background-position: left center; border: 1px solid var(--color-border); display: grid; place-items: center; font-size: 1.3rem; color: #ffffff; transition: color 0.2s ease, border-color 0.2s ease, background-size 0.25s ease; cursor: pointer; } @media (min-width: 1080px) { .tab-button { font-size: 1.6rem; } } /* ページネーション */ /* 中間ページのみ 769px+/768px で別