@charset "UTF-8"; /* Foundation */ /* ======================================== Variables カラー・フォント・デザイン基準幅などの共通変数 ======================================== */ /* ======================================== Design Width vw計算に使用するデザインカンプの基準幅 ======================================== */ /* ======================================== Breakpoint レスポンシブ切り替え幅 ======================================== */ /* ======================================== Color ======================================== */ :root { --color-primary: #3a63ff; --color-text: #383838; --color-accent: #fd5e01; --color-accent-sub: #fd6202; --color-white: #ffffff; /* ======================================== Font ======================================== */ --font-base: "Noto Sans JP", sans-serif; /* ======================================== Font Weight ======================================== */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* 400px：58px → 1400px：70px → それ以上も比率で拡大 */ --header-height: max(58px, calc(53.2px + 1.2vw)); } /* Foundation */ /* ======================================== Function vw・clampの計算関数 ======================================== */ /* ======================================== PC vw 1400pxデザイン基準 ======================================== */ /* ======================================== Tablet vw 1024pxデザイン基準 ======================================== */ /* ======================================== SP vw 400pxデザイン基準 ======================================== */ /* ======================================== vw + clamp ======================================== */ /* Foundation */ /* ======================================== Mixin メディアクエリなどの共通処理 ======================================== */ /* ======================================== Breakpoint レスポンシブの切り替え幅 ======================================== */ /* ======================================== Media Query @include mq(sp) のように使用 ======================================== */ /* ======================================== Font フォントの読み込み・管理 ======================================== */ /* Google Fonts は HTML の で読み込む */ /* ======================================== Base サイト全体の基本スタイル ======================================== */ /* ======================================== HTML ページ全体の共通設定 ======================================== */ html { scroll-behavior: smooth; } /* ======================================== Body 全ページ共通の文字・フォント設定 ======================================== */ body { color: var(--color-text); font-family: var(--font-base); font-size: 16px; font-weight: var(--fw-regular); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== Heading 見出しのデフォルト余白をリセット ======================================== */ h1, h2, h3, q h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; } /* ======================================== Text 段落のデフォルト余白をリセット ======================================== */ p { margin: 0; } /* ======================================== Link リンクの共通設定 ======================================== */ a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; } /* ======================================== List リストのデフォルトスタイルをリセット ======================================== */ ul, ol { margin: 0; padding: 0; list-style: none; } /* ======================================== Image 画像の余白防止・レスポンシブ対応 ======================================== */ img { display: block; max-width: 100%; height: auto; } /* ======================================== Form フォーム部品のフォントを統一 ======================================== */ button, input, textarea, select { color: inherit; font: inherit; } /* ======================================== Button ボタンのデフォルトスタイルをリセット ======================================== */ button { padding: 0; border: none; background: transparent; cursor: pointer; } /* ======================================== Table テーブルの罫線を統一 ======================================== */ table { border-collapse: collapse; border-spacing: 0; } .br-sp { display: none; } @media screen and (max-width: 767px) { .br-sp { display: block; } } .br-pc { display: block; } @media screen and (max-width: 767px) { .br-pc { display: none; } } /* Layout */ /* ======================================== Inner コンテンツ幅・左右余白を管理 ======================================== */ /* ======================================== Default PCでは最大1200pxで中央配置 画面幅が狭くなった場合は左右余白を確保 ======================================== */ .l-inner { width: min(100% - 14.2857142857vw, 1200px); margin-inline: auto; /* ======================================== Tablet PCより左右余白を狭くして調整 ======================================== */ } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-inner { width: calc(100% - 64px); } } .l-inner { /* ======================================== Smartphone 400pxカンプに対して左右20pxの余白 ======================================== */ } @media screen and (max-width: 767px) { .l-inner { width: calc(100% - 10vw); } } /* ======================================== ヘッダー高さ ======================================== */ :root { --header-height: 70px; } /* ======================================== Header PC：1400pxデザイン基準 1025px以上 ======================================== */ .l-header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: var(--header-height); background-color: var(--color-white); box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1); } .l-header__inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: space-between; /* 1400pxまでは可変 1400px以上は100pxで固定 */ padding-inline: min(7.1428571429vw, 100px); box-sizing: border-box; } /* ======================================== ロゴ ======================================== */ .l-header__logo { width: min(17.7142857143vw, 248px); height: 100%; flex: 0 0 min(17.7142857143vw, 248px); overflow: hidden; } .l-header__logo a { display: block; width: 100%; height: 100%; overflow: hidden; } .l-header__logo img { display: block; width: min(17.7142857143vw, 248px); max-width: none; height: auto; /* 画像内の透明余白を調整 1400px以上では固定 */ margin-top: max(-2.7857142857vw, -39px); margin-left: max(-1.5571428571vw, -21.8px); } /* ======================================== CTA ======================================== */ .l-header__cta { display: flex; align-items: center; gap: clamp(16px, 1.7142857143vw, 24px); margin-left: auto; } .l-header__button { display: block; flex-shrink: 0; transition: opacity 0.3s ease; } .l-header__button--tel-pc { display: block; width: min(18.7142857143vw, 262px); max-width: none; height: auto; margin-top: min(0.3vw, 4.2px); margin-left: 0; } .l-header__button--contact-pc { display: block; width: min(20.3428571429vw, 284.8px); max-width: none; height: auto; margin-top: min(0.33vw, 4.62px); margin-left: 0; } .l-header__button--sp { display: none; } @media (hover: hover) { .l-header__button:hover { opacity: 0.8; } } /* ======================================== Tablet 768px〜1024px 1024pxデザイン基準 ヘッダー高さ：70px固定 ======================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { :root { --header-height: 70px; } .l-header { height: var(--header-height); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } .l-header__inner { padding-inline: min(3.125vw, 32px); } /* ======================================== ロゴ ======================================== */ .l-header__logo { width: min(20.5078125vw, 210px); height: 100%; flex: 0 0 min(20.5078125vw, 210px); overflow: hidden; } .l-header__logo a { display: block; width: 100%; height: 100%; overflow: hidden; } .l-header__logo img { display: block; width: 210px; max-width: none; height: auto; margin-top: -28.6px; margin-left: -18px; } /* ======================================== CTA ======================================== */ .l-header__cta { display: flex; align-items: center; gap: min(1.3671875vw, 14px); margin-left: auto; } .l-header__button--pc { display: block; } .l-header__button--sp { display: none; } .l-header__button--tel-pc { display: block; width: min(21.484375vw, 220px); max-width: none; height: auto; margin-top: min(0.390625vw, 4px); margin-left: 0; } .l-header__button--contact-pc { display: block; width: min(23.4375vw, 240px); max-width: none; height: auto; margin-top: min(0.390625vw, 4px); margin-left: 0; } } /* ======================================== SP 400pxデザイン基準 767px以下 ヘッダー高さ：58px固定 ======================================== */ @media screen and (max-width: 767px) { :root { --header-height: 58px; } .l-header { width: 100%; height: var(--header-height); box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1); } .l-header__inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: flex-start; padding: 0 0 0 min(1.5vw, 6px); box-sizing: border-box; } /* ======================================== ロゴ ======================================== */ .l-header__logo { width: 187px; height: 100%; flex: 0 0 187px; overflow: hidden; } .l-header__logo a { display: block; width: 100%; height: 100%; overflow: hidden; } .l-header__logo img { display: block; width: 187px; max-width: none; height: auto; margin-top: -27px; margin-left: -12px; } /* ======================================== CTA ======================================== */ .l-header__cta { display: flex; height: 100%; align-items: stretch; gap: 0; margin-left: auto; } .l-header__button--pc { display: none; } .l-header__button--sp { display: flex; width: 70px; height: 100%; flex: 0 0 70px; align-items: flex-start; justify-content: center; overflow: hidden; margin: 0; } .l-header__button--sp img { display: block; width: 70px; max-width: none; height: auto; margin: 4.6px 0 0; } .l-header__button--contact-sp, .l-header__button--tel-sp { margin-left: 0; } } /* Component */ /* ======================================== 共通お問い合わせCTA 見た目のみ ======================================== */ .c-contact-cta__button { position: relative; display: grid; grid-template-columns: 4.7142857143vw minmax(0, 1fr) 2.7142857143vw; align-items: center; padding: 0.5714285714vw 1.2142857143vw 0.5714285714vw 1.6428571429vw; color: #fff; text-decoration: none; border: 0.2142857143vw solid #fff; border-radius: 1.2857142857vw; box-shadow: 0 0.3571428571vw 0.6428571429vw rgba(0, 0, 0, 0.25); transition: opacity 0.3s ease, transform 0.3s ease; } .c-contact-cta__button--phone { background: linear-gradient(90deg, #3c69ff 0%, #27afff 100%); } .c-contact-cta__button--contact { background: linear-gradient(90deg, #ff5800 0%, #ff9300 100%); } .c-contact-cta__free { position: absolute; top: -2.2142857143vw; left: -2.7857142857vw; z-index: 3; display: grid; place-items: center; width: 5vw; height: 5vw; color: #ff6200; font-size: 1.4285714286vw; font-weight: 900; line-height: 1; background-color: #ffd51d; border: 0.1428571429vw solid #fff; border-radius: 50%; box-shadow: 0 0.2142857143vw 0.3571428571vw rgba(0, 0, 0, 0.2); } .c-contact-cta__icon { display: block; justify-self: center; width: 3.5714285714vw; height: auto; } .c-contact-cta__text { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.2; margin-top: 0vw; } .c-contact-cta__small { display: block; font-size: 1.4285714286vw; font-weight: 700; } .c-contact-cta__main { display: block; font-size: 1.6714285714vw; font-weight: 900; white-space: nowrap; } .c-contact-cta__arrow { display: block; justify-self: end; width: 2.2142857143vw; height: auto; } @media (hover: hover) { .c-contact-cta__button:hover { opacity: 0.88; transform: translateY(-0.2142857143vw); } } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .c-contact-cta__button { grid-template-columns: 10.5vw minmax(0, 1fr) 5vw; padding: 1.5vw 3.5vw 1.5vw 4.5vw; border-width: 0.5vw; border-radius: 3vw; } .c-contact-cta__free { top: -4.5vw; left: -5vw; width: 12vw; height: 12vw; font-size: 4vw; border-width: 0.5vw; } .c-contact-cta__icon { width: 8.5vw; } .c-contact-cta__small { font-size: 3vw; } .c-contact-cta__main { margin-top: 0.5vw; font-size: 4vw; } .c-contact-cta__arrow { width: 5vw; } } @media screen and (max-width: 767px) and (hover: hover) { .c-contact-cta__button:hover { opacity: 1; transform: none; } } /* Project */ /* ======================================== MV PC：1400px × 720pxデザイン基準 ・画面高には連動させない ・デザイン比率で高さを決める ======================================== */ .p-mv { position: relative; width: 100%; aspect-ratio: 1400/720; margin-top: var(--header-height); overflow: hidden; } /* ======================================== MVステージ ======================================== */ .p-mv__stage { position: relative; width: 100%; height: 100%; } /* ======================================== 背景画像 ======================================== */ .p-mv__background { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; } .p-mv__background img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center -5vw; object-position: center -5vw; } /* ======================================== MVコンテンツ ======================================== */ .p-mv__inner { position: relative; z-index: 1; width: 100%; height: 100%; } /* ======================================== キャッチコピー ======================================== */ .p-mv__copy { position: absolute; top: 2.2vw; left: 4.1428571429vw; z-index: 2; width: 66.9714285714vw; margin: 0; } .p-mv__copy picture, .p-mv__copy img { display: block; width: 100%; height: auto; } /* ======================================== 価格バナー ======================================== */ .p-mv__price { position: absolute; top: 25.2857142857vw; left: -1.3vw; z-index: 3; display: block; width: 60.4285714286vw; } .p-mv__price img { display: block; width: 100%; height: auto; } /* ======================================== CTA 配置は既存のまま ボタンは共通CTAと同じ見た目 ======================================== */ .p-mv__cta { position: absolute; top: 33.1428571429vw; right: 7.0642857143vw; z-index: 3; display: grid; gap: 1.4vw; width: 28.6571428571vw; } /* 共通ボタンのサイズだけMV内で指定 */ .p-mv__cta .c-contact-cta__button { width: 100%; height: 7vw; padding: 0.5714285714vw 0.8571428571vw 0.5714285714vw 0.8571428571vw; } /* ======================================== 実績 ======================================== */ .p-mv__features { position: absolute; top: 41.6428571429vw; left: 7.1428571429vw; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7142857143vw; width: 48.1428571429vw; margin: 0; padding: 0; list-style: none; } .p-mv__feature { min-width: 0; } .p-mv__feature picture, .p-mv__feature img { display: block; width: 100%; } .p-mv__feature img { height: auto; } /* ======================================== SP 400px × 760pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-mv { width: 100%; aspect-ratio: 400/760; margin-top: 0; } .p-mv__background img { -o-object-position: center top; object-position: center top; } /* ======================================== キャッチコピー ======================================== */ .p-mv__copy { top: 17.5vw; left: 0.5vw; width: 80vw; } /* ======================================== 価格バナー ======================================== */ .p-mv__price { top: 71.5vw; left: 2.5vw; width: 95vw; } /* ======================================== CTA 配置は既存のまま ======================================== */ .p-mv__cta { right: auto; left: 50%; top: 95vw; gap: 1vw; width: 90vw; transform: translateX(-50%); } .p-mv__cta .c-contact-cta__button { grid-template-columns: 12vw minmax(0, 1fr) 5.5vw; width: 100%; height: 14.5vw; min-height: 0; padding: 1.5vw 5.5vw; border-width: 0.5vw; border-radius: 2.5vw; box-shadow: 0 1vw 1.75vw rgba(0, 0, 0, 0.22); } .p-mv__cta .c-contact-cta__icon { width: 8.5vw; } .p-mv__cta .c-contact-cta__text { justify-content: center; margin-top: 0; line-height: 1; } .p-mv__cta .c-contact-cta__small { display: none; } .p-mv__cta .c-contact-cta__main { margin-top: 0; font-size: 4.5vw; line-height: 1; } .p-mv__cta .c-contact-cta__arrow { width: 7.5vw; } /* ======================================== 実績 ======================================== */ .p-mv__features { top: 127.5vw; left: 4.5vw; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vw; width: calc(100% - 9vw); } .p-mv__feature--speed { grid-column: 1/-1; } } /* ======================================== お任せくださいセクション PC：1400pxデザイン基準 ======================================== */ .p-solution { position: relative; width: 100%; height: 60.0571428571vw; overflow: hidden; background-color: #168cff; background-image: url("../images/top/solution-bg.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .p-solution__inner { position: relative; width: 100%; height: 100%; padding-top: 5.9142857143vw; } /* ======================================== 見出し ======================================== */ .p-solution__heading { position: relative; z-index: 3; text-align: center; } .p-solution__lead { margin: 0; color: var(--color-white); font-size: 2.2857142857vw; font-weight: 800; line-height: 1.3; letter-spacing: 0.03em; text-shadow: 0.1428571429vw 0.2142857143vw 0.2142857143vw rgba(0, 0, 0, 0.3); } .p-solution__lead-emphasis { color: var(--color-primary); -webkit-text-stroke: 0.4142857143vw var(--color-white); font-size: 2.8571428571vw; paint-order: stroke fill; } .p-solution__title-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; margin: 0.3571428571vw auto 0; } .p-solution__title { position: relative; z-index: 2; margin: 0; color: var(--color-white); font-size: 3.8571428571vw; font-weight: 900; line-height: 1.2; letter-spacing: 0.04em; text-shadow: 0.2142857143vw 0.3571428571vw 0.3571428571vw rgba(0, 0, 0, 0.32); } /* 黄色い強調装飾 */ .p-solution__accent { position: absolute; top: 50%; z-index: 1; display: block; width: 11.5714285714vw; height: auto; transform: translateY(-50%); } .p-solution__accent--left { left: -11.4285714286vw; top: 0.5714285714vw; } .p-solution__accent--right { right: -10.7142857143vw; top: 1.2857142857vw; } /* ======================================== 星の装飾 ======================================== */ .p-solution__star { position: absolute; z-index: 1; display: block; height: auto; pointer-events: none; } .p-solution__star--large { top: 2.4428571429vw; left: 17.8214285714vw; width: 3.8428571429vw; } .p-solution__star--small { top: 10.3571428571vw; right: 18.2142857143vw; width: 2.1428571429vw; } /* ======================================== 特徴カード ======================================== */ .p-solution__list { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.9285714286vw; width: 85.7142857143vw; margin: 3.5714285714vw auto 0; padding: 0; list-style: none; } .p-solution__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; height: 23.2142857143vw; padding: 2.5vw 1.2857142857vw 1.7142857143vw; background-color: #fff; border-radius: 2.6428571429vw; box-shadow: 0 0.5714285714vw 1vw rgba(0, 0, 0, 0.28); } .p-solution__item-icon { display: block; width: 9.6428571429vw; height: auto; } .p-solution__item-text { margin: 1.5714285714vw 0 0; color: #333; font-size: 1.6428571429vw; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; text-align: center; } .p-solution__item-emphasis { color: #ff5700; font-weight: 900; } /* ======================================== 共通CTAのセクション別調整 ======================================== */ .p-solution .c-contact-cta { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(2, 30vw); justify-content: center; gap: 5.8571428571vw; margin-top: 5.8571428571vw; } .p-solution .c-contact-cta__button { width: 30vw; height: 6.7857142857vw; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-solution { height: auto; padding: 14.5vw 0 14.5vw; background-position: center top; background-image: url("../images/top/solution-bg-sp.webp"); background-size: cover; } .p-solution__inner { width: 90vw; height: auto; margin-inline: auto; padding-top: 0; } /* ======================================== 見出し ======================================== */ .p-solution__lead { font-size: 6vw; line-height: 1.5; } .p-solution__lead-emphasis { -webkit-text-stroke: 1vw #fff; font-size: 6vw; margin-left: -1vw; margin-right: -1vw; } .p-solution__title-wrap { margin-top: 1.5vw; } .p-solution__title { font-size: 8vw; line-height: 1; margin-top: 0vw; letter-spacing: -0.1em; } .p-solution__accent { width: 19vw; } .p-solution__accent--left { left: -16.5vw; top: 2.5vw; } .p-solution__accent--right { right: -15.5vw; top: 3vw; } /* ======================================== 星 ======================================== */ .p-solution__star { display: none; } /* ======================================== カード ======================================== */ .p-solution__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw; width: 100%; margin-top: 7.5vw; } .p-solution__item { height: 46.5vw; padding: 2.5vw 3vw 4.5vw; border-radius: 5vw; } .p-solution__item-icon { width: 20.5vw; } .p-solution__item-text { margin-top: 2vw; font-size: 4vw; line-height: 1.3; } /* ======================================== 共通CTAのセクション別調整 ======================================== */ .p-solution .c-contact-cta { grid-template-columns: 1fr; gap: 4.5vw; width: 66.5vw; margin-top: 9.5vw; margin-inline: auto; } .p-solution .c-contact-cta__button { width: 100%; height: 17vw; } } /* ======================================== お悩みセクション PC：1400pxデザイン基準 ======================================== */ .p-problem { position: relative; width: 100%; height: 48.0285714286vw; overflow: visible; background-color: #fff9e8; background-image: url("../images/top/problem-bg.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .p-problem__inner { position: relative; width: 100%; height: 100%; } /* ======================================== PC：女性・吹き出し ======================================== */ .p-problem__visual { position: absolute; inset: 0 auto 0 0; width: 46.4285714286vw; height: 100%; } .p-problem__woman { position: absolute; bottom: -1.4285714286vw; left: 0.2857142857vw; z-index: 2; display: block; width: 46.8571428571vw; max-width: none; height: auto; } .p-problem__thinking { position: absolute; top: 6.5714285714vw; left: 26.5428571429vw; z-index: 3; display: block; width: 18.7857142857vw; max-width: none; height: auto; } /* SP専用ビジュアル */ .p-problem__visual-sp { display: none; } /* ======================================== 右側コンテンツ ======================================== */ .p-problem__content { position: absolute; top: 5.8571428571vw; right: 7.1428571429vw; z-index: 4; width: 46.4285714286vw; } /* ======================================== タイトル ======================================== */ .p-problem__heading { position: relative; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .p-problem__title { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 0.8142857143vw; margin: 0; margin-top: 1.4285714286vw; margin-left: -6.7857142857vw; color: var(--color-text); font-size: 2.9142857143vw; font-weight: 900; line-height: 1.2; letter-spacing: 0; white-space: nowrap; filter: drop-shadow(0.1428571429vw 0.2142857143vw 0.2142857143vw rgba(0, 0, 0, 0.18)); -webkit-text-stroke: 0.6785714286vw var(--color-white); paint-order: stroke fill; } .p-problem__title-text { position: relative; z-index: 2; } .p-problem__title-emphasis { position: relative; z-index: 1; display: inline-block; color: var(--color-primary); font-size: 4.2857142857vw; line-height: 1; } /* お悩み上部の青い点 */ .p-problem__title-dots { position: absolute; top: -1.4285714286vw; left: 50%; display: flex; gap: 3.4285714286vw; transform: translateX(-50%); } .p-problem__title-dots span { display: block; width: 0.7857142857vw; height: 0.7857142857vw; border-radius: 50%; background-color: #2eaff2; } /* PCのみ黄色ライン表示 */ .p-problem__title-line { position: absolute; right: -0.5vw; bottom: -0.2857142857vw; left: -0.5vw; z-index: -1; display: block; width: calc(100% + 1vw); height: 1.2142857143vw; } .p-problem__title-burst { position: absolute; top: -3.8142857143vw; right: -3.2714285714vw; z-index: 3; display: block; width: 4.3857142857vw; height: auto; } /* SPのみ表示するモヤモヤ */ .p-problem__title-worry { display: none; } /* ======================================== お悩み一覧 ======================================== */ .p-problem__list { display: grid; gap: 0.7142857143vw; width: 100%; margin: 3.5vw 0 0; padding: 0; list-style: none; } .p-problem__item { position: relative; display: grid; grid-template-columns: 4.6428571429vw minmax(0, 1fr) 6vw; align-items: center; width: 100%; height: 4.7857142857vw; padding: 0.4285714286vw 1.7142857143vw 0.6428571429vw 2vw; overflow: hidden; border: 0.0714285714vw solid #eee; border-radius: 0.4285714286vw; background-color: var(--color-white); box-shadow: 0 0.2142857143vw 0.5vw rgba(0, 0, 0, 0.13); } .p-problem__check { display: block; justify-self: center; width: 3.2142857143vw; height: auto; } .p-problem__text { min-width: 0; margin: 0; padding-inline: 0.5vw; color: var(--color-text); font-size: 1.7142857143vw; font-weight: 800; line-height: 1.3; letter-spacing: 0.04em; white-space: nowrap; } .p-problem__text-emphasis { color: var(--color-primary); } .p-problem__icon { display: block; justify-self: center; width: auto; max-width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .p-problem__icon--child { width: 4.4285714286vw; } .p-problem__icon--paper { width: 3.7857142857vw; } .p-problem__icon--money { width: 4.1428571429vw; } .p-problem__icon--dirt { width: 4.2142857143vw; } .p-problem__icon--shine { width: 3.2857142857vw; margin-left: 3.9285714286vw; } /* ======================================== 下向き矢印 ======================================== */ .p-problem__arrow { position: absolute; bottom: -5vw; left: 50%; z-index: 10; width: 17vw; height: 7.5714285714vw; transform: translateX(-50%); filter: drop-shadow(0.3828571429vw 0.4471428571vw 0.3192857143vw rgba(12, 22, 147, 0.5)); } .p-problem__arrow::before { display: block; width: 100%; height: 100%; background-color: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; } /* ======================================== Tablet PC構成をベースに表示 ======================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { .p-problem { height: 46.4285714286vw; } } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-problem { height: auto; min-height: 0; padding: 13.5vw 0 16vw; background-color: #fff9e8; background-image: url("../images/top/problem-bg-sp.webp"); background-repeat: repeat-y; /* SP背景画像に含まれている上部の無地部分を 上方向へ逃がして、ドット部分から表示する */ background-position: center -56.25vw; background-size: 100% auto; } .p-problem__inner { display: flex; flex-direction: column; width: 100%; height: auto; padding-inline: 4.75vw; } /* contentの囲いをレイアウト上では解除し、 heading・visual・listをorderで並べ替える */ .p-problem__content { position: static; display: contents; width: auto; } /* ======================================== SPタイトル ======================================== */ .p-problem__heading { position: relative; order: 1; width: 100%; margin-inline: 0; } .p-problem__title { display: flex; align-items: baseline; justify-content: center; gap: 1.25vw; font-size: 6.5vw; margin-left: 2.25vw; line-height: 1.25; filter: drop-shadow(0.25vw 0.5vw 0.75vw rgba(0, 0, 0, 0.2)); -webkit-text-stroke: 0.75vw #fff; } .p-problem__title-emphasis { font-size: 7.8vw; } .p-problem__title-dots { top: -3.25vw; gap: 6.75vw; } .p-problem__title-dots span { width: 1.75vw; height: 1.75vw; } /* SPでは黄色いラインを非表示 */ .p-problem__title-line { display: none; } .p-problem__title-burst { top: -7.75vw; right: -0.75vw; width: 9.5vw; } .p-problem__title-worry { position: absolute; top: -6.25vw; left: -1.75vw; z-index: 3; display: block; width: 12.5vw; height: auto; } /* ======================================== SPビジュアル ======================================== */ .p-problem__visual { display: none; } .p-problem__visual-sp { order: 2; display: block; width: 95vw; margin-top: -5.5vw; margin-left: -3.5vw; } .p-problem__visual-sp img { display: block; width: 100%; height: auto; } /* ======================================== SPお悩み一覧 ======================================== */ .p-problem__list { position: relative; order: 3; display: grid; gap: 3vw; width: 100%; margin: -1.5vw 0 0; } .p-problem__item { grid-template-columns: 14.5vw minmax(0, 1fr) 15.25vw; height: 14.2vw; padding: 0vw 2vw 0vw 2.25vw; border-width: 0.25vw; border-radius: 1.5vw; box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.13); } .p-problem__item::after { right: 1.5vw; bottom: 1.25vw; left: 1.5vw; border-bottom-width: 0.25vw; } .p-problem__check { width: 9.5vw; } .p-problem__text { padding-inline: 1.75vw; font-size: 4vw; line-height: 1.35; white-space: normal; } .p-problem__icon { max-height: 12.5vw; } .p-problem__icon--child { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(1.1); } .p-problem__icon--paper { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(1.8); } .p-problem__icon--money { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(1.1); } .p-problem__icon--dirt { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(1.1); } .p-problem__icon--shine { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transform: scale(0.8); } /* ======================================== SP下向き矢印 ======================================== */ .p-problem__arrow { bottom: -9.25vw; width: 37vw; height: 16.5vw; filter: drop-shadow(0.75vw 1vw 0.75vw rgba(12, 22, 147, 0.5)); } } .p-problem__br { display: none; } @media screen and (max-width: 767px) { .p-problem__br { display: block; } } /* ======================================== 壁紙コンシェルが選ばれる3つの理由 PC：1400pxデザイン基準 ======================================== */ .p-reason { position: relative; width: 100%; height: 112.1428571429vw; overflow: hidden; background-color: #fff; background-image: url("../images/top/reason-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-reason__inner { position: relative; width: min(100% - 11.4285714286vw, 85.7142857143vw); margin-inline: auto; padding-top: 6.2857142857vw; padding-bottom: 8.5714285714vw; } /* ======================================== PC：見出し画像 ======================================== */ .p-reason__heading { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; } .p-reason__heading-image { display: block; width: 65.7142857143vw; max-width: 100%; height: auto; } /* ======================================== PC：理由一覧 ======================================== */ .p-reason__list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6.8571428571vw; margin: 6.4285714286vw auto 0; padding: 0; list-style: none; } /* ======================================== PC：各理由の共通レイアウト ======================================== */ .p-reason__item { position: relative; display: flex; align-items: center; width: 100%; min-height: 23.5714285714vw; } .p-reason__item--01, .p-reason__item--03 { justify-content: flex-start; } .p-reason__item--02 { flex-direction: row-reverse; justify-content: flex-start; } /* ======================================== PC：番号画像 ======================================== */ .p-reason__number { position: absolute; z-index: 3; display: block; width: 10.7142857143vw; max-width: none; height: auto; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0.5; } .p-reason__item--01 .p-reason__number { top: -4.1428571429vw; left: 0vw; } .p-reason__item--02 .p-reason__number { top: -3.1428571429vw; right: -0.2857142857vw; } .p-reason__item--03 .p-reason__number { top: -2.1428571429vw; left: 0vw; } /* ======================================== PC：写真 ======================================== */ .p-reason__image-wrap { position: relative; z-index: 1; flex-shrink: 0; width: 27.8571428571vw; height: 20.8571428571vw; overflow: hidden; border-radius: 1.6428571429vw; box-shadow: 0 0.5vw 1.0714285714vw rgba(0, 0, 0, 0.2); } .p-reason__image { display: block; -o-object-fit: cover; object-fit: cover; width: 28.8571428571vw; height: 22.8571428571vw; margin-top: -0.7142857143vw; } /* 写真ごとの表示位置調整 */ .p-reason__item--01 .p-reason__image { -o-object-position: center center; object-position: center center; } .p-reason__item--02 .p-reason__image { -o-object-position: center center; object-position: center center; } .p-reason__item--03 .p-reason__image { -o-object-position: center center; object-position: center center; } /* ======================================== カード共通 ======================================== */ .p-reason__card { position: relative; z-index: 2; width: 52.5714285714vw; height: 23.9285714286vw; padding: 1.8571428571vw 4vw 1.5714285714vw 4.4285714286vw; border-radius: 2vw; background-color: transparent; /* カード全体の影 */ filter: drop-shadow(0.4285714286vw 0.5714285714vw 1.2857142857vw rgba(0, 0, 0, 0.18)); } /* 青い土台 */ .p-reason__card::before { position: absolute; inset: 0; z-index: 0; border-radius: inherit; content: ""; } /* 白いカード本体 */ .p-reason__card::after { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background-color: var(--color-white); content: ""; } /* 文字を白カードより前面へ */ .p-reason__card > * { position: relative; z-index: 2; } /* ======================================== 01・03：青い土台を右下 ======================================== */ .p-reason__item--01 .p-reason__card::before, .p-reason__item--03 .p-reason__card::before { background: linear-gradient(to right, #45d4ff 0%, #1fa9ff 45%, #2f63ff 100%); transform: translate(0.8571428571vw, 1vw) rotate(1deg); transform-origin: center; } /* ======================================== 02：青い土台を左下 ======================================== */ .p-reason__item--02 .p-reason__card::before { background: linear-gradient(to left, #45d4ff 0%, #1fa9ff 45%, #2f63ff 100%); transform: translate(-0.8571428571vw, 1vw) rotate(-1deg); transform-origin: center; } /* 写真とカードを重ねる */ .p-reason__item--01 .p-reason__card, .p-reason__item--03 .p-reason__card { margin-left: 2.1428571429vw; } .p-reason__item--02 .p-reason__card { margin-right: 2.1428571429vw; width: 54.2857142857vw; height: 24.2857142857vw; padding: 2.2857142857vw 1.4285714286vw 1.5714285714vw 1.7142857143vw; } /* ======================================== PC：カード見出し ======================================== */ .p-reason__card-title { position: relative; margin: 0; padding-bottom: 2.1428571429vw; color: var(--color-text); font-size: 2.6vw; font-weight: 900; line-height: 1; letter-spacing: 0.01em; } .p-reason__card-title::after { position: absolute; right: 0; bottom: 0; left: 0; height: 0.1428571429vw; background-image: repeating-linear-gradient(to right, #2eb8ed 0, #2eb8ed 0.3571428571vw, transparent 0.3571428571vw, transparent 0.7142857143vw); content: ""; } .p-reason__card-emphasis { color: #fd5e01; } /* ======================================== PC：カード本文 ======================================== */ .p-reason__card-lead { padding-top: 1.8571428571vw; color: var(--color-text); font-size: 2.1428571429vw; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; } .p-reason__card-text { margin: 0.9285714286vw 0 0; color: var(--color-text); font-size: 1.4857142857vw; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; } .p-reason__note { margin: 0.4285714286vw 0 0; color: var(--color-text); font-size: 1vw; font-weight: 400; line-height: 1.4; } /* ======================================== PC：各段の位置調整 ======================================== */ .p-reason__item--01 { padding-left: 1.4285714286vw; } .p-reason__item--02 { padding-right: 1.1428571429vw; } .p-reason__item--03 { padding-left: 1.4285714286vw; } /* ======================================== Tablet PCレイアウトを基準に縮小 ======================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { .p-reason__heading-image { width: 65.7142857143vw; } .p-reason__number { width: 10.7142857143vw; } } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-reason { height: auto; background-image: url("../images/top/reason-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-reason__inner { width: 100%; padding: 14vw 5vw 17.5vw; } /* ======================================== SP：見出し画像 ======================================== */ .p-reason__heading { display: flex; justify-content: center; width: 100%; } .p-reason__heading-image { display: block; width: 72vw; max-width: 100%; height: auto; } /* ======================================== SP：理由一覧 ======================================== */ .p-reason__list { display: flex; flex-direction: column; gap: 10.5vw; width: 100%; margin: -5vw auto 0; padding: 0; } /* ======================================== SP：各理由の共通レイアウト ======================================== */ .p-reason__item, .p-reason__item--01, .p-reason__item--02, .p-reason__item--03 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-height: 0; padding: 0; } /* ======================================== SP：番号画像 ======================================== */ .p-reason__number { position: absolute; z-index: 3; display: block; width: 15vw; max-width: none; height: auto; pointer-events: none; } .p-reason__item--01 .p-reason__number, .p-reason__item--02 .p-reason__number, .p-reason__item--03 .p-reason__number { top: -0.5vw; right: auto; left: 3.5vw; } /* ======================================== SP：写真 ======================================== */ .p-reason__image-wrap { position: relative; z-index: 1; width: 66.5vw; height: 35.25vw; overflow: hidden; border-radius: 5vw; box-shadow: 0 1.25vw 3vw rgba(0, 0, 0, 0.18); } .p-reason__image { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-reason__item--01 .p-reason__image { -o-object-position: center -3.5vw; object-position: center -3.5vw; transform: scale(1.05); } .p-reason__item--02 .p-reason__image { -o-object-position: center 0.5vw; object-position: center 0.5vw; transform: scale(1.05); } .p-reason__item--03 .p-reason__image { -o-object-position: center -3.5vw; object-position: center -3.5vw; transform: scale(1.05); } /* ======================================== SP：説明カード ======================================== */ .p-reason__card { width: 85vw; height: 50vw; min-height: 0; border-radius: 5vw; filter: drop-shadow(1vw 1.5vw 3vw rgba(0, 0, 0, 0.18)); padding: 4.75vw 0 4vw; } .p-reason__item--02 .p-reason__card { width: 85vw; height: 50vw; padding: 4.75vw 0 4vw; } .p-reason__item--01 .p-reason__card::before, .p-reason__item--02 .p-reason__card::before, .p-reason__item--03 .p-reason__card::before { background: linear-gradient(to right, #45d4ff 0%, #1fa9ff 45%, #2f63ff 100%); transform: translate(2vw, 2.25vw) rotate(1deg); } .p-reason__item--01 .p-reason__card, .p-reason__item--02 .p-reason__card, .p-reason__item--03 .p-reason__card { margin-top: 1vw; margin-right: 0; margin-left: 0; } /* ======================================== SP：カード見出し ======================================== */ .p-reason__card-title { position: relative; margin: 0; color: var(--color-text); font-size: 5vw; padding: 0 3vw 2.5vw 3vw; font-weight: 700; line-height: 1; letter-spacing: -0.08em; text-align: center; } .p-reason__card-title::after { position: absolute; right: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 0.25vw; width: 90%; background-image: repeating-linear-gradient(to right, #2eb8ed 0, #2eb8ed 1vw, transparent 1vw, transparent 2vw); content: ""; } .p-reason__item--02 .p-reason__card-title { font-size: 4.5vw; } .p-reason__card-emphasis { color: #fd5e01; margin-left: -0.5vw; margin-right: -0.5vw; } /* ======================================== SP：カード本文 ======================================== */ .p-reason__card-lead { margin: 2vw 0 0; color: #383838; font-size: 4vw; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; padding: 0 6.5vw; } .p-reason__card-text { margin: 1.5vw 0 0; color: #383838; font-size: 3.5vw; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; padding: 0 6.5vw; } .p-reason__note { margin: 1.5vw 0 0; color: #666; font-size: 2.5vw; font-weight: 400; line-height: 1.4; padding: 0 6.5vw; } .p-reason__item--02 .p-reason__card-lead { letter-spacing: -0.05em; } } /* ======================================== 他社比較 PC：1400pxデザイン基準 ======================================== */ .p-comparison { position: relative; width: 100%; overflow: hidden; background-color: var(--color-white); background-image: url("../images/top/comparison-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-comparison__inner { position: relative; width: min(100% - 5.7142857143vw, 94.2857142857vw); margin-inline: auto; padding-top: 3.8571428571vw; padding-bottom: 4.2857142857vw; } /* ======================================== セクション見出し ======================================== */ .p-comparison__heading { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 0.8571428571vw; padding-top: 0.7142857143vw; } .p-comparison__title { display: inline-block; margin: 0; color: var(--color-primary); font-size: 4vw; font-weight: 900; line-height: 1.2; letter-spacing: 0.1em; -webkit-text-stroke: 0.9642857143vw var(--color-white); paint-order: stroke fill; filter: drop-shadow(0 0.5vw 0.3571428571vw rgba(0, 0, 0, 0.28)); } .p-comparison__title-decoration { display: block; width: 5.7142857143vw; height: auto; } .p-comparison__title-decoration--left { transform: translateY(0.2142857143vw); } .p-comparison__title-decoration--right { transform: translateY(-0.2142857143vw); } /* ======================================== 横スクロール領域 ======================================== */ .p-comparison__scroll { position: relative; z-index: 2; width: 100%; overflow: visible; } /* ======================================== 水色の比較表外枠 ======================================== */ .p-comparison__table-wrap { position: relative; width: 85.7142857143vw; margin: 6vw auto 0; padding: 0.8571428571vw 1.7142857143vw 2vw; overflow: visible; border: 0.1428571429vw solid rgba(255, 255, 255, 0.9); border-radius: 2vw; background-color: #ecf4fd; box-shadow: 0.2877571429vw 0.2877571429vw 0.3597vw rgba(0, 0, 0, 0.2); } /* ======================================== 比較テーブル全体 ======================================== */ .p-comparison__table { position: relative; z-index: 1; display: block; width: 100%; overflow: visible; border-collapse: separate; border-spacing: 0; table-layout: fixed; border-radius: 0; background-color: transparent; box-shadow: none; } .p-comparison__table thead, .p-comparison__table tbody { display: block; width: 100%; } .p-comparison__table th, .p-comparison__table td { box-sizing: border-box; min-width: 0; vertical-align: middle; } /* 内側の列幅 項目列：285px 当社列：250px 残りをA・B・C社で3分割 */ .p-comparison__table thead tr, .p-comparison__table tbody tr { display: grid; grid-template-columns: 20.3571428571vw 17.8571428571vw repeat(3, minmax(0, 1fr)); } /* ======================================== A社・B社・C社 白い表の外側 ======================================== */ .p-comparison__table thead { position: relative; z-index: 2; background-color: transparent; } .p-comparison__table thead tr { height: 6.7142857143vw; background-color: transparent; } .p-comparison__blank, .p-comparison__recommend-space { display: block; background-color: transparent; } .p-comparison__company { position: relative; display: flex; height: 6.7142857143vw; align-items: center; justify-content: center; padding: 0; color: #383838; background-color: transparent; text-align: center; } .p-comparison__company-name { position: relative; display: inline-block; padding-bottom: 0vw; font-size: 2.2857142857vw; font-weight: 800; line-height: 1; letter-spacing: 0.03em; } .p-comparison__company-name::after { position: absolute; right: 0; bottom: -0.9285714286vw; left: 0; height: 0.2857142857vw; background-image: repeating-linear-gradient(to right, #3a63ff 0, #3a63ff 0.2857142857vw, transparent 0.2857142857vw, transparent 0.5714285714vw); content: ""; } /* ======================================== 白い比較表 ======================================== */ .p-comparison__table tbody { position: relative; z-index: 1; overflow: hidden; border-radius: 1.5714285714vw; background-color: var(--color-white); box-shadow: 0 0.2857142857vw 0.7142857143vw rgba(0, 0, 0, 0.16); } .p-comparison__table tbody tr { position: relative; background-color: var(--color-white); } .p-comparison__table tbody tr + tr::before { position: absolute; top: 0; right: 0; left: 0; z-index: 4; height: 0.1428571429vw; background-image: repeating-linear-gradient(to right, #2ab3fc 0, #2ab3fc 0.2857142857vw, transparent 0.2857142857vw, transparent 0.5714285714vw); content: ""; } /* 正しいデザインに合わせた行高 */ .p-comparison__table tbody tr:nth-child(1) { height: 11.0714285714vw; } .p-comparison__table tbody tr:nth-child(2) { height: 13.4285714286vw; } .p-comparison__table tbody tr:nth-child(3) { height: 16.2857142857vw; } /* ======================================== 左側の比較項目 ======================================== */ .p-comparison__category { position: relative; z-index: 2; display: flex; width: 100%; align-items: center; justify-content: flex-start; padding: 4.4285714286vw 1.4285714286vw 4.4285714286vw 2.5714285714vw; color: var(--color-text); background-color: var(--color-white); font-size: 2vw; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; text-align: left; } /* ======================================== 他社データ ======================================== */ .p-comparison__data { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 1.2857142857vw 0.5714285714vw; color: #383838; background-color: #fff; text-align: center; } /* 当社カードの下にある空き列 */ .p-comparison__table tbody .p-comparison__recommend-space { position: relative; z-index: 0; background-color: transparent; } /* ======================================== 当社カード ======================================== */ .p-comparison__recommend { position: absolute; top: -2.7142857143vw; left: 21.2857142857vw; z-index: 10; display: flex; flex-direction: column; width: 19.2857142857vw; height: calc(100% + 4.7142857143vw); overflow: hidden; border: 0.1428571429vw solid #2ab3fc; border-radius: 1.4285714286vw; background-color: #fff; box-shadow: 0.5052857143vw 0.5052857143vw 0.3609285714vw rgba(0, 0, 0, 0.3); } /* ======================================== 当社カード上部 ======================================== */ .p-comparison__recommend-heading { position: relative; z-index: 2; display: flex; /* カード上への飛び出し：38px 外枠上padding：12px 他社見出し：94px 合計：144px */ flex: 0 0 10.2857142857vw; align-items: flex-end; justify-content: center; width: 100%; padding-bottom: 2.1428571429vw; border-radius: 1.2857142857vw 1.2857142857vw 0 0; background-color: #fff; } /* ======================================== おすすめリボン ======================================== */ .p-comparison__ribbon { position: absolute; top: 1vw; left: 50%; z-index: 5; display: block; width: 8.4285714286vw; height: auto; transform: translateX(-50%); } /* ======================================== 当社タイトル ======================================== */ .p-comparison__recommend-company { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.7142857143vw; } .p-comparison__recommend-name { margin: 0; color: #3a63ff; font-size: 3.4285714286vw; font-weight: 900; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .p-comparison__company-decoration { display: block; width: 3vw; height: auto; } .p-comparison__company-decoration--left { transform: translateY(-1.0642857143vw); } .p-comparison__company-decoration--right { transform: translateY(-1.4857142857vw); } /* ======================================== 当社カード内リスト ======================================== */ .p-comparison__recommend-list { display: flex; flex: 1; min-height: 0; flex-direction: column; margin: 0; } /* 当社の1行目・2行目を他社側と同じ高さにする */ .p-comparison__recommend-item { position: relative; display: flex; flex: none; min-height: 0; flex-direction: column; margin: 0; } .p-comparison__recommend-item + .p-comparison__recommend-item::before { position: absolute; top: -0.0714285714vw; right: 0; left: 0; z-index: 2; height: 0.1428571429vw; background-image: repeating-linear-gradient(to right, #2ab3fc 0, #2ab3fc 0.2857142857vw, transparent 0.2857142857vw, transparent 0.5714285714vw); content: ""; } .p-comparison__recommend-item:nth-child(1) { height: 11vw; } .p-comparison__recommend-item:nth-child(2) { height: 13.4285714286vw; } .p-comparison__recommend-item:nth-child(3) { flex: 1; } .p-comparison__recommend-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .p-comparison__recommend-content { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 1vw 0.7142857143vw; text-align: center; } /* ======================================== 他社側の記号 ======================================== */ .p-comparison__symbol { position: relative; display: block; width: 4vw; height: 4vw; flex-shrink: 0; margin-bottom: 1vw; color: #383838; line-height: 1; } /* ======================================== 二重丸 ======================================== */ .p-comparison__symbol--double-circle { border: 0.2142857143vw solid currentcolor; border-radius: 50%; } .p-comparison__symbol--double-circle::before { position: absolute; top: 50%; left: 50%; width: 2.7142857143vw; height: 2.7142857143vw; border: 0.2142857143vw solid currentcolor; border-radius: 50%; content: ""; transform: translate(-50%, -50%); } .p-comparison__symbol--blue { color: #3a63ff; } /* ======================================== 一重丸 ======================================== */ .p-comparison__symbol--circle { border: 0.2142857143vw solid currentcolor; border-radius: 50%; } /* ======================================== 三角 ======================================== */ .p-comparison__symbol--triangle { width: 0; height: 0; margin-top: 0.1428571429vw; margin-bottom: 1.2142857143vw; border-right: 2vw solid transparent; border-bottom: 3.5vw solid #383838; border-left: 2vw solid transparent; } .p-comparison__symbol--triangle::after { position: absolute; top: 0.4285714286vw; left: -1.5714285714vw; width: 0; height: 0; border-right: 1.5714285714vw solid transparent; border-bottom: 2.7857142857vw solid #fff; border-left: 1.5714285714vw solid transparent; content: ""; } /* ======================================== 当社側の二重丸 ======================================== */ .p-comparison__recommend .p-comparison__symbol { width: 5.2857142857vw; height: 5.2857142857vw; margin-bottom: 0.1428571429vw; } .p-comparison__recommend .p-comparison__symbol--double-circle { border-width: 0.2857142857vw; } .p-comparison__recommend .p-comparison__symbol--double-circle::before { width: 3.5714285714vw; height: 3.5714285714vw; border-width: 0.2857142857vw; } /* ======================================== 他社価格・テキスト ======================================== */ .p-comparison__price { display: block; color: #383838; font-size: 1.5714285714vw; font-weight: 800; line-height: 1.35; white-space: nowrap; } .p-comparison__text { display: block; color: #383838; font-size: 1.5714285714vw; font-weight: 800; line-height: 1.35; letter-spacing: 0; white-space: nowrap; } /* ======================================== 当社価格・テキスト ======================================== */ .p-comparison__recommend-price { display: block; color: #fd5e01; font-size: 2.4285714286vw; font-weight: 900; line-height: 1.2; white-space: nowrap; } .p-comparison__recommend-text { display: block; color: #fd5e01; font-size: 2vw; font-weight: 900; line-height: 1.3; white-space: nowrap; } .p-comparison__recommend-description { margin: 0; color: #383838; font-size: 1.7857142857vw; font-weight: 800; line-height: 1.35; letter-spacing: 0; text-align: center; } .p-comparison__recommend-description strong { color: #fd5e01; font-size: 1.8571428571vw; font-weight: 900; } .p-comparison__recommend-description span { color: #383838; font-weight: 800; } /* ======================================== 注釈 ======================================== */ .p-comparison__note { position: relative; z-index: 3; width: 85.7142857143vw; margin: 1vw auto 0; color: #383838; font-size: 1vw; font-weight: 700; line-height: 1.5; text-align: right; } /* PCでは横スクロール案内を非表示 */ .p-comparison__scroll-guide { display: none; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-comparison { overflow: hidden; background-image: url("../images/top/comparison-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-comparison__inner { width: 100%; padding: 13.5vw 0 17.5vw; } /* ======================================== SP：見出し ======================================== */ .p-comparison__heading { gap: 1.5vw; padding-inline: 4.5vw; } .p-comparison__title { font-size: 6vw; line-height: 1.2; letter-spacing: 0.08em; filter: none; filter: drop-shadow(0 0.5vw 0.3571428571vw rgba(0, 0, 0, 0.28)); -webkit-text-stroke: 0.75vw var(--color-white); paint-order: stroke fill; } .p-comparison__title-decoration { width: 6.25vw; } .p-comparison__title-decoration--left, .p-comparison__title-decoration--right { transform: translateY(-1.5vw); } /* ======================================== SP：横スクロール領域 ======================================== */ .p-comparison__scroll { position: relative; z-index: 2; width: 100%; margin-top: 6.25vw; padding: 4.5vw 4.5vw 5.5vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .p-comparison__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ======================================== SP：水色外枠 ======================================== */ .p-comparison__table-wrap { position: relative; box-sizing: border-box; width: 105vw; margin: 0; padding: 2vw 2vw 3vw; overflow: visible; border: 0.25vw solid rgba(255, 255, 255, 0.9); border-radius: 5vw; background-color: #ecf4fd; box-shadow: 0.75vw 1vw 1.25vw rgba(0, 0, 0, 0.2); } /* ======================================== SP：比較テーブル ======================================== */ .p-comparison__table { display: block; width: 100%; overflow: visible; background-color: transparent; box-shadow: none; } .p-comparison__table thead, .p-comparison__table tbody { display: block; width: 100%; } /* 項目列：82px 当社列：96px A・B・C社：約75pxずつ */ .p-comparison__table thead tr, .p-comparison__table tbody tr { display: grid; grid-template-columns: 20.5vw 24vw repeat(3, minmax(0, 1fr)); } /* ======================================== SP：他社見出し ======================================== */ .p-comparison__table thead tr { height: 11vw; } .p-comparison__company { height: 11vw; } .p-comparison__company-name { padding-bottom: 0; font-size: 3vw; font-weight: 800; } .p-comparison__company-name::after { bottom: -1.5vw; height: 0.5vw; background-image: repeating-linear-gradient(to right, #3a63ff 0, #3a63ff 0.75vw, transparent 0.75vw, transparent 1.5vw); } /* ======================================== SP：白い表 ======================================== */ .p-comparison__table tbody { overflow: hidden; border-radius: 4vw; background-color: #fff; box-shadow: 0 0.75vw 1.75vw rgba(0, 0, 0, 0.14); } .p-comparison__table tbody tr + tr::before { height: 0.25vw; background-image: repeating-linear-gradient(to right, #2ab3fc 0, #2ab3fc 0.75vw, transparent 0.75vw, transparent 1.5vw); } .p-comparison__table tbody tr:nth-child(1) { height: 20vw; } .p-comparison__table tbody tr:nth-child(2) { height: 18.5vw; } .p-comparison__table tbody tr:nth-child(3) { height: 23vw; } /* ======================================== SP：左側項目 ======================================== */ .p-comparison__category { justify-content: center; padding: 1.5vw 1.25vw; font-size: 3vw; line-height: 1.35; text-align: center; } /* ======================================== SP：他社データ ======================================== */ .p-comparison__data { padding: 1.5vw 0.5vw; } /* ======================================== SP：当社カード ======================================== */ .p-comparison__recommend { position: absolute; top: -2.5vw; left: 22.5vw; z-index: 10; width: 24vw; height: 100%; border: 0.3vw solid #2ab3fc; border-radius: 4vw; background-color: #fff; box-shadow: 0.75vw 1vw 1.25vw rgba(0, 0, 0, 0.22); } /* ======================================== SP：当社カード上部 ======================================== */ .p-comparison__recommend-heading { flex: 0 0 15vw; padding-bottom: 1.75vw; border-radius: 3.75vw 3.75vw 0 0; } .p-comparison__ribbon { top: 1.75vw; width: 16vw; } .p-comparison__recommend-company { gap: 0.75vw; } .p-comparison__recommend-name { font-size: 3.75vw; } .p-comparison__company-decoration { width: 3.25vw; } .p-comparison__company-decoration--left, .p-comparison__company-decoration--right { transform: translateY(0.25vw); } /* ======================================== SP：当社カード各行 ======================================== */ .p-comparison__recommend-item + .p-comparison__recommend-item::before { top: 0.25vw; height: 0.25vw; background-image: repeating-linear-gradient(to right, #2ab3fc 0, #2ab3fc 0.75vw, transparent 0.75vw, transparent 1.5vw); } .p-comparison__recommend-item:nth-child(1) { height: 20vw; } .p-comparison__recommend-item:nth-child(2) { height: 18.5vw; } .p-comparison__recommend-item:nth-child(3) { flex: 1; } .p-comparison__recommend-content { padding: 1.25vw 0.5vw; } /* ======================================== SP：他社側の記号 ======================================== */ .p-comparison__symbol { width: 6.5vw; height: 6.5vw; margin-bottom: 1.25vw; } .p-comparison__symbol--double-circle { border-width: 0.375vw; } .p-comparison__symbol--double-circle::before { width: 4.25vw; height: 4.25vw; border-width: 0.375vw; } .p-comparison__symbol--circle { border-width: 0.375vw; } .p-comparison__symbol--triangle { width: 0; height: 0; margin-top: 0.25vw; margin-bottom: 1.5vw; border-right-width: 3.25vw; border-bottom-width: 5.75vw; border-left-width: 3.25vw; } .p-comparison__symbol--triangle::after { top: 0.75vw; left: -2.5vw; border-right-width: 2.5vw; border-bottom-width: 4.5vw; border-left-width: 2.5vw; } /* ======================================== SP：当社側の二重丸 ======================================== */ .p-comparison__recommend .p-comparison__symbol { width: 8.5vw; height: 8.5vw; margin-bottom: 0.75vw; } .p-comparison__recommend .p-comparison__symbol--double-circle { border-width: 0.5vw; } .p-comparison__recommend .p-comparison__symbol--double-circle::before { width: 5.5vw; height: 5.5vw; border-width: 0.5vw; } /* ======================================== SP：他社テキスト ======================================== */ .p-comparison__price { font-size: 2.5vw; line-height: 1.3; } .p-comparison__text { font-size: 2.5vw; line-height: 1.35; white-space: nowrap; } /* ======================================== SP：当社テキスト ======================================== */ .p-comparison__recommend-price { font-size: 3vw; } .p-comparison__recommend-text { font-size: 3vw; line-height: 1.3; } .p-comparison__recommend-description { font-size: 2.5vw; line-height: 1.3; } .p-comparison__recommend-description strong { font-size: 2.5vw; } /* ======================================== SP：横スクロール案内 ======================================== */ .p-comparison__scroll-guide { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; width: 77.5vw; align-items: center; gap: 1.75vw; margin: -0.75vw auto 0; color: #3a63ff; font-size: 3.5vw; font-weight: 800; line-height: 1.4; white-space: nowrap; text-align: center; } .p-comparison__scroll-guide > span { position: relative; display: block; width: 100%; overflow: visible; color: transparent; font-size: 0; } .p-comparison__scroll-guide > span::before { display: block; width: 100%; border-top: 0.375vw dashed #3a63ff; content: ""; } .p-comparison__scroll-guide > span:first-child::after { position: absolute; top: 50%; left: 0; width: 1.75vw; height: 1.75vw; border-bottom: 0.5vw solid #3a63ff; border-left: 0.5vw solid #3a63ff; content: ""; transform: translateY(-50%) rotate(45deg); } .p-comparison__scroll-guide > span:last-child::after { position: absolute; top: 50%; right: 0; width: 1.75vw; height: 1.75vw; border-top: 0.5vw solid #3a63ff; border-right: 0.5vw solid #3a63ff; content: ""; transform: translateY(-50%) rotate(45deg); } /* ======================================== SP：注釈 ======================================== */ .p-comparison__note { position: relative; z-index: 3; width: calc(100% - 10vw); margin: -7.25vw auto 0; padding-right: 1.75vw; font-size: 2vw; text-align: right; } } /* ======================================== 施工実績 PC：1400pxデザイン基準 ======================================== */ .p-works { position: relative; width: 100%; max-width: none; overflow: hidden; padding-top: 4vw; padding-bottom: 6.7857142857vw; background-color: #f4f8ff; background-image: url("../images/top/works-bg-pc_1.webp"); background-repeat: no-repeat; background-position: center -3.5714285714vw; background-size: 114%; } .p-works__inner { position: relative; width: 85.7142857143vw; margin-inline: auto; } /* ======================================== 見出し ======================================== */ .p-works__heading { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; min-height: 11.4285714286vw; margin-bottom: 7.2857142857vw; } .p-works__heading-text { position: relative; z-index: 2; width: 37.1428571429vw; text-align: center; } .p-works__title { margin: 0; color: var(--color-text); font-size: 3.4285714286vw; font-weight: 800; line-height: 1.25; letter-spacing: 0.05em; } .p-works__title-line { position: relative; display: block; width: 28.5714285714vw; height: 0.1428571429vw; margin: 1.4714285714vw auto 0; background-color: #9fa5aa; } .p-works__title-line::after { position: absolute; top: 50%; left: 50%; width: 5.4285714286vw; height: 0.3571428571vw; background-color: #3a63ff; content: ""; transform: translate(-50%, -50%); } .p-works__lead { margin: 1.2857142857vw 0 0; color: var(--color-text); font-size: 1.7142857143vw; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em; } .p-works__heading-photo { position: absolute; right: -7.5vw; bottom: -8.2142857143vw; z-index: 1; display: block; width: 30.4285714286vw; } .p-works__heading-photo img { display: block; width: 100%; height: auto; } /* ======================================== 上部ギャラリースライダー Swiper ======================================== */ .p-works__gallery-wrap { position: relative; left: 50%; z-index: 2; width: 100vw; margin-left: -50vw; margin-bottom: 5.7142857143vw; overflow: hidden; } .p-works__gallery { display: flex; gap: 1.4285714286vw; } .p-works__swiper { width: 100%; overflow: hidden; } .p-works__swiper .swiper-wrapper { align-items: center; transition-timing-function: linear; } .p-works__gallery { margin: 0; padding: 0; list-style: none; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .p-works__gallery-item { position: relative; flex-shrink: 0; width: 26.7857142857vw; height: 20.0892857143vw; overflow: hidden; background-color: #fff; box-shadow: 0 0.2142857143vw 0.3571428571vw rgba(0, 0, 0, 0.22), 0 0.5714285714vw 1.1428571429vw rgba(0, 0, 0, 0.12); } .p-works__gallery-item img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-works__sparkle { position: absolute; top: 0.1428571429vw; left: 55vw; z-index: 3; display: block; width: 28.5714285714vw; height: auto; pointer-events: none; } .p-works__sparkle img { display: block; width: 100%; height: auto; } /* ======================================== 施工実績カード ======================================== */ .p-works__list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); -moz-column-gap: 1.5714285714vw; column-gap: 1.5714285714vw; width: 100%; margin: 0 auto; padding: 0; list-style: none; } .p-works__item { display: flex; flex-direction: column; min-width: 0; height: 33.7142857143vw; padding: 1.2142857143vw 1vw 1.2857142857vw; overflow: hidden; background-color: var(--color-white); border: 0.1428571429vw solid #a5a5a5; border-radius: 1.2857142857vw; box-shadow: 0 0.2142857143vw 0.2857142857vw rgba(0, 0, 0, 0.28), 0 0.5vw 0.7142857143vw rgba(0, 0, 0, 0.14); } .p-works__item-heading { display: flex; align-items: center; width: 100%; height: 2.9285714286vw; margin-left: 0.7142857143vw; margin-bottom: 1.4285714286vw; } .p-works__number { display: grid; flex: 0 0 auto; place-items: center; width: 3.3571428571vw; height: 3.3571428571vw; color: var(--color-white); font-size: 2.0714285714vw; font-weight: 600; line-height: 1; background-color: var(--color-primary); border-radius: 50%; } .p-works__item-title { flex: 0 0 auto; margin: 0 0 0 1.4285714286vw; color: var(--color-primary); font-size: 1.7142857143vw; font-weight: 700; line-height: 1.3; white-space: nowrap; } .p-works__heading-line { margin-left: 0.8571428571vw; border-top: 0.1428571429vw dashed var(--color-primary); } .p-works__heading-line--01 { width: 10.1428571429vw; } .p-works__heading-line--02 { width: 8.5714285714vw; } .p-works__heading-line--03 { width: 3.7142857143vw; } .p-works__card-image { width: 100%; margin: 0; overflow: hidden; border-radius: 0.8571428571vw; } .p-works__card-image img { display: block; width: 100%; height: auto; } .p-works__description { display: grid; flex: 1; place-items: center; height: 5.3571428571vw; margin: 0.5714285714vw 0 0; color: var(--color-text); font-size: 1.5714285714vw; font-weight: 500; line-height: 1.5; letter-spacing: 0.015em; text-align: center; } /* ======================================== お客様の声セクション内のCTA 施工実績と同じ配置・サイズ ======================================== */ .p-works .c-contact-cta { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 30vw); justify-content: center; gap: 9.6428571429vw; margin-top: 6.9285714286vw; } .p-works .c-contact-cta__button { width: 31vw; height: 7.8571428571vw; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-works { width: 100%; max-width: none; padding-top: 5vw; padding-bottom: 15vw; background-image: url("../images/top/works-bg-sp_1.webp"); background-repeat: no-repeat; background-position: center -12.5vw; background-size: 150%; } .p-works__inner { width: 90vw; margin-inline: auto; } /* ======================================== 見出し ======================================== */ .p-works__heading { align-items: center; justify-content: center; min-height: 39vw; margin-bottom: 2.5vw; } .p-works__heading-text { width: 100%; } .p-works__title { font-size: 6vw; line-height: 1.25; letter-spacing: 0.05em; } .p-works__title-line { width: 47.5vw; height: 0.25vw; margin-top: 2.5vw; } .p-works__title-line::after { width: 10.75vw; height: 1vw; } .p-works__lead { margin-top: 3.25vw; font-size: 4vw; line-height: 1.6; letter-spacing: 0.02em; white-space: nowrap; } .p-works__heading-photo { right: -0.5vw; bottom: 18.5vw; width: 32.25vw; } /* ======================================== 上部ギャラリースライダー Swiper ======================================== */ .p-works__gallery-wrap { left: 50%; width: 100vw; margin-left: -50vw; margin-bottom: 11.5vw; } .p-works__gallery { gap: 7.5vw; } .p-works__swiper { width: 100%; } .p-works__gallery-item { width: 50vw; height: 37.5vw; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.22), 0 1.25vw 2.5vw rgba(0, 0, 0, 0.12); } .p-works__sparkle { top: -1.25vw; width: 39.25vw; } /* ======================================== 施工実績カード SP ======================================== */ .p-works__list { grid-template-columns: 1fr; row-gap: 8vw; width: 90vw; margin-inline: auto; } .p-works__item { width: 100%; height: 105.5vw; padding: 4.25vw 3.25vw 5vw; overflow: hidden; border-radius: 6.25vw; background-color: var(--color-white); box-shadow: none; box-shadow: 0.65vw 0.75vw 1.5vw rgba(0, 0, 0, 0.18); } /* ======================================== カード見出し ======================================== */ .p-works__item-heading { width: 100%; height: auto; min-height: 11vw; margin: 0 0 3.25vw; padding-inline: 2vw; } .p-works__number { width: 10.75vw; height: 10.75vw; font-size: 5.75vw; font-weight: 600; } .p-works__item-title { margin-left: 3.75vw; font-size: 5vw; line-height: 1.3; } /* 点線はカードごとに調整 */ .p-works__heading-line { flex: 0 0 auto; min-width: 0; margin-left: 3vw; border-top-width: 0.375vw; } .p-works__heading-line--01 { width: 31.5vw; } .p-works__heading-line--02 { width: 26.25vw; } .p-works__heading-line--03 { width: 13.5vw; } /* ======================================== 施工画像 ======================================== */ .p-works__card-image { width: 100%; margin: 0; overflow: hidden; border-radius: 3.5vw; } .p-works__card-image img { display: block; width: 100%; height: auto; } /* ======================================== 説明文 ======================================== */ .p-works__description { display: grid; place-items: center; height: auto; min-height: 18vw; margin: 2.5vw 0 0; font-size: 3.5vw; font-weight: 600; line-height: 1.55; letter-spacing: 0; text-align: center; } /* ======================================== CTA ======================================== */ .p-works .c-contact-cta { grid-template-columns: 1fr; gap: 4.5vw; width: 66.5vw; margin: 13vw auto 0; } .p-works .c-contact-cta__button { width: 100%; height: 16.5vw; } } /* ======================================== 火災保険 PC：1400pxデザイン基準 ======================================== */ .p-insurance { position: relative; width: 100%; max-width: none; overflow: hidden; padding-top: 4.1428571429vw; padding-bottom: 5.1428571429vw; background-color: #f8fbff; background-image: url("../images/top/insurance-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-insurance__inner { position: relative; width: 85.7142857143vw; margin-inline: auto; } /* ======================================== セクション見出し ======================================== */ .p-insurance__heading { position: relative; z-index: 2; text-align: center; padding-top: 2.1428571429vw; } .p-insurance__heading-label { position: relative; display: grid; place-items: center; width: 15vw; height: 4.1428571429vw; margin: 0 auto 0.5714285714vw; color: #fff; font-size: 2.1428571429vw; font-weight: 500; line-height: 1; letter-spacing: 0.06em; background-color: #3a63ff; border-radius: 2.2857142857vw; } .p-insurance__heading-label::after { position: absolute; bottom: -0.9285714286vw; left: 50%; width: 0; height: 0; border-top: 1.0714285714vw solid #3a63ff; border-right: 0.8571428571vw solid transparent; border-left: 0.8571428571vw solid transparent; content: ""; transform: translateX(-50%); } .p-insurance__title { margin: 0; color: #383838; font-size: 2.8571428571vw; font-weight: 800; line-height: 1.45; letter-spacing: -0.08em; } .p-insurance__title-blue { color: #3a63ff; font-size: 3.9285714286vw; } .p-insurance__title-orange { color: #fd5e01; font-size: 3.9285714286vw; margin-left: -1.7142857143vw; margin-right: -1.8142857143vw; letter-spacing: 0.02em; } .p-insurance__title-black { color: #383838; } .p-insurance__title-bottom { display: block; } /* ======================================== 火災保険の説明 ======================================== */ .p-insurance__intro { position: relative; z-index: 2; display: flex; align-items: center; width: 64.2857142857vw; min-height: 10.1428571429vw; margin: 2.7142857143vw auto 0; padding: 1.5714285714vw 3.2142857143vw 1.5714285714vw 12vw; background-color: #fff; border: 0.1428571429vw solid #20aef3; border-radius: 1.2857142857vw; box-shadow: 0 0.2857142857vw 0.3571428571vw rgba(0, 0, 0, 0.2), 0 0.6428571429vw 1.2857142857vw rgba(0, 0, 0, 0.09); } .p-insurance__intro-icon { position: absolute; top: 50%; left: 0.2857142857vw; width: 12vw; margin: 0; transform: translateY(-50%); } .p-insurance__intro-icon img { display: block; width: 100%; height: auto; } .p-insurance__intro-text { margin: 0; color: #383838; font-size: 1.7142857143vw; font-weight: 600; line-height: 1.3; letter-spacing: -0.05em; } .p-insurance__intro-text strong { color: #3a63ff; font-weight: 800; } /* ======================================== 適用される可能性があるケース ======================================== */ .p-insurance__cases { position: relative; z-index: 2; margin-top: 3.4285714286vw; } .p-insurance__cases-heading { display: flex; align-items: center; justify-content: center; gap: 0.5714285714vw; margin-bottom: 1.5714285714vw; } .p-insurance__cases-title { margin: 0; color: #383838; font-size: 1.9142857143vw; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; text-align: center; } .p-insurance__cases-decoration { display: block; flex: 0 0 auto; width: 2.1428571429vw; height: auto; } .p-insurance__case-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6428571429vw 1.1428571429vw; margin: 0 auto; padding: 0; list-style: none; } .p-insurance__case-item { position: relative; height: 10.8571428571vw; padding: 0.1285714286vw 1vw 1.0714285714vw; overflow: hidden; background-color: #fff; border: 0.0714285714vw solid #ddd; border-radius: 1.2142857143vw; box-shadow: 0 0.2142857143vw 0.2857142857vw rgba(0, 0, 0, 0.2), 0 0.5vw 0.7857142857vw rgba(0, 0, 0, 0.1); } .p-insurance__case-item:nth-child(1), .p-insurance__case-item:nth-child(2), .p-insurance__case-item:nth-child(3) { grid-column: span 2; } .p-insurance__case-item:nth-child(4) { grid-column: 2/span 2; } .p-insurance__case-item:nth-child(5) { grid-column: 4/span 2; } .p-insurance__case-heading { display: flex; align-items: center; width: 100%; height: 2vw; margin-bottom: 0.3vw; } .p-insurance__case-label { color: #3168ff; font-size: 1.2857142857vw; font-weight: 800; line-height: 1; } .p-insurance__case-number { display: grid; place-items: center; width: 1.7142857143vw; height: 1.7142857143vw; margin-left: 0.3571428571vw; color: #fff; font-size: 1vw; font-weight: 800; line-height: 1; background-color: #3a63ff; border-radius: 50%; } .p-insurance__case-line { flex: 1; margin-left: 0.6428571429vw; border-top: 0.1428571429vw dashed #29b9ff; } .p-insurance__case-content { display: flex; align-items: center; gap: 0.9285714286vw; } .p-insurance__case-image { flex: 0 0 auto; width: 11vw; height: 7.5vw; margin: 0; overflow: hidden; border-radius: 0.7142857143vw; } .p-insurance__case-image img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-insurance__case-text { margin: 0; color: #383838; font-size: 1.2857142857vw; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; } /* ======================================== 相談訴求 ======================================== */ .p-insurance__consultation { position: relative; z-index: 2; margin-top: 2vw; } .p-insurance__consultation-box { position: relative; display: flex; align-items: center; justify-content: center; width: 61.4285714286vw; height: 5.7142857143vw; margin-inline: auto; background-color: #fff; border: 0.0714285714vw solid #d7d7d7; border-radius: 1.2857142857vw; box-shadow: 0 0.2142857143vw 0.2857142857vw rgba(0, 0, 0, 0.18), 0 0.5vw 0.8571428571vw rgba(0, 0, 0, 0.08); } .p-insurance__staff { position: absolute; bottom: 0; left: 0vw; width: 8.5vw; margin: 0; } .p-insurance__staff img { display: block; width: 100%; height: auto; } .p-insurance__consultation-title { margin: 0; font-size: 2.8571428571vw; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-align: center; } .p-insurance__consultation-blue { color: #3168ff; } .p-insurance__consultation-orange { color: #fd5e01; margin-left: -0.5714285714vw; } .p-insurance__consultation-decoration { position: absolute; top: 0.3071428571vw; right: 5vw; display: block; width: 3.5714285714vw; height: auto; pointer-events: none; } .p-insurance__consultation-text { margin: 1.7857142857vw 0 0; color: #383838; font-size: 2vw; font-weight: 700; line-height: 1.55; letter-spacing: 0.02em; text-align: center; } .p-insurance__consultation-text strong { color: #3168ff; font-weight: 700; margin-left: -1.0142857143vw; margin-right: -0.2857142857vw; } /* ======================================== セクション内CTA ======================================== */ .p-insurance .c-contact-cta { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 32.8571428571vw); justify-content: center; gap: 4.5714285714vw; margin-top: 4vw; } .p-insurance .c-contact-cta__button { width: 32.3571428571vw; height: 8.7857142857vw; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-insurance { max-width: none; padding-top: 11.25vw; padding-bottom: 14.5vw; background-image: url("../images/top/insurance-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-insurance__inner { width: 90vw; margin-inline: auto; } /* ======================================== 見出し ======================================== */ .p-insurance__heading { padding-top: 6.5vw; } .p-insurance__heading-label { width: 23vw; height: 6.75vw; margin: 0 auto 1.25vw; font-size: 3.25vw; border-radius: 4.5vw; } .p-insurance__heading-label::after { bottom: -1.75vw; border-top-width: 2vw; border-right-width: 1.5vw; border-left-width: 1.5vw; } .p-insurance__title { font-size: 4.5vw; line-height: 1.45; letter-spacing: 0; } .p-insurance__title-blue, .p-insurance__title-orange { font-size: 6vw; } .p-insurance__title-orange { margin-right: -3vw; margin-left: -3vw; letter-spacing: 0; } .p-insurance__title-bottom { display: block; margin-top: 0.25vw; } /* ======================================== 火災保険の説明 ======================================== */ .p-insurance__intro { width: 90vw; min-height: 32.5vw; margin-top: 5vw; padding: 3.75vw 3.5vw 3.75vw 29vw; border-width: 0.375vw; border-radius: 4.5vw; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.16), 0 1.25vw 2.5vw rgba(0, 0, 0, 0.07); } .p-insurance__intro-icon { left: -0.5vw; width: 30vw; } .p-insurance__intro-text { font-size: 3.5vw; font-weight: 600; line-height: 1.4; letter-spacing: 0; } .p-insurance__intro-text br { display: none; } /* ======================================== ケース見出し ======================================== */ .p-insurance__cases { margin-top: 6.5vw; } .p-insurance__cases-heading { gap: 2.5vw; margin-bottom: 4.5vw; } .p-insurance__cases-title { width: 55vw; font-size: 4vw; line-height: 1.3; letter-spacing: 0; } .p-insurance__cases-decoration { width: 6vw; } /* ======================================== ケース一覧 ======================================== */ .p-insurance__case-list { grid-template-columns: 1fr; gap: 4.5vw; width: 90vw; } .p-insurance__case-item, .p-insurance__case-item:nth-child(1), .p-insurance__case-item:nth-child(2), .p-insurance__case-item:nth-child(3), .p-insurance__case-item:nth-child(4), .p-insurance__case-item:nth-child(5) { grid-column: auto; } .p-insurance__case-item { position: relative; width: 100%; height: 28vw; min-height: 0; padding: 3vw 4.5vw 3vw 5vw; overflow: hidden; border-width: 0.25vw; border-radius: 4vw; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.15), 0 1.25vw 2.25vw rgba(0, 0, 0, 0.07); } /* Case見出しを画像上部へ重ねる */ .p-insurance__case-heading { position: absolute; top: 3vw; right: 4.5vw; left: 5vw; z-index: 2; width: auto; height: 5vw; margin: 0; } .p-insurance__case-label { font-size: 3.5vw; line-height: 1; } .p-insurance__case-number { width: 5vw; height: 5vw; margin-left: 0.75vw; font-size: 2.75vw; } .p-insurance__case-line { position: absolute; top: 50%; right: 0; left: 41vw; margin-left: 0; border-top-width: 0.375vw; transform: translateY(-50%); } .p-insurance__case-content { height: 100%; align-items: center; gap: 4.25vw; } .p-insurance__case-image { width: 36.5vw; height: 22vw; border-radius: 2.25vw; } .p-insurance__case-text { flex: 1; font-size: 3.5vw; line-height: 1.5; letter-spacing: 0; } /* ======================================== 相談訴求 ======================================== */ .p-insurance__consultation { margin-top: 5vw; } .p-insurance__consultation-box { width: 90vw; height: 19.5vw; min-height: 0; border-width: 0.25vw; border-radius: 4vw; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.15), 0 1.25vw 2.25vw rgba(0, 0, 0, 0.07); } .p-insurance__staff { left: 4.5vw; width: 23vw; } .p-insurance__consultation-title { margin-left: 12vw; font-size: 5.5vw; line-height: 1.2; } .p-insurance__consultation-blue, .p-insurance__consultation-orange { display: block; } .p-insurance__consultation-orange { margin-left: 0; } .p-insurance__consultation-decoration { top: -2vw; right: 2.25vw; width: 9vw; } .p-insurance__consultation-text { margin-top: 5vw; font-size: 4vw; width: 85vw; line-height: 1.2; letter-spacing: -0.01em; } .p-insurance__consultation-text strong { margin-right: 0; margin-left: 0; } /* ======================================== 共通CTA ======================================== */ .p-insurance .c-contact-cta { grid-template-columns: 1fr; gap: 4vw; width: 66.5vw; margin: 15vw auto 0; } .p-insurance .c-contact-cta__button { width: 100%; height: 16.5vw; } } /* ======================================== お見積りから施工までの流れ PC：1400pxデザイン基準 ======================================== */ .p-flow { position: relative; left: 50%; width: 100vw; max-width: none; margin-left: -50vw; overflow: hidden; padding-top: 5vw; padding-bottom: 5.5714285714vw; background-color: #f8fbff; background-image: url("../images/top/flow-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-flow__inner { position: relative; width: 85.7142857143vw; margin-inline: auto; } /* ======================================== セクション見出し ======================================== */ .p-flow__heading { position: relative; z-index: 2; text-align: center; padding-top: 1vw; } .p-flow__title { margin: 0; color: #383838; font-size: 3.2142857143vw; font-weight: 800; line-height: 1.4; } .p-flow__title-line { position: relative; display: block; width: 5.7142857143vw; height: 0.4285714286vw; margin: 1.1428571429vw auto 0; background-color: #22b5ee; border-radius: 0.7142857143vw; } .p-flow__title-line::after { position: absolute; top: 0; right: -1.2142857143vw; width: 0.9285714286vw; height: 0.4285714286vw; background-color: #3a63ff; border-radius: 0.7142857143vw; content: ""; } .p-flow__lead { display: flex; justify-content: center; align-items: center; gap: 0.3571428571vw; width: 26.4285714286vw; min-height: 4.8571428571vw; margin: 2.4285714286vw auto 0; padding: 0.5714285714vw 2vw; color: #fff; font-size: 2.5vw; font-weight: 800; line-height: 1.2; letter-spacing: 0.03em; white-space: nowrap; background-color: #3a63ff; border-radius: 2.8571428571vw; } .p-flow__lead span { margin: 0; color: #ffd21f; font-size: 3vw; line-height: 1; } /* ======================================== ステップ一覧 ======================================== */ .p-flow__list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); -moz-column-gap: 3.7142857143vw; column-gap: 3.7142857143vw; margin: 2.5714285714vw auto 0; padding: 0; list-style: none; } /* ======================================== ステップカード ======================================== */ .p-flow__item { position: relative; display: flex; flex-direction: column; min-width: 0; height: 29.8571428571vw; padding: 1.7857142857vw 2.5vw 2.1428571429vw; background-color: #fff; border-radius: 1.8571428571vw; box-shadow: 0 0.2857142857vw 0.5714285714vw rgba(0, 0, 0, 0.16), 0 0.8571428571vw 1.7142857143vw rgba(0, 0, 0, 0.1); } /* ======================================== STEP番号 ======================================== */ .p-flow__step { position: absolute; top: 1.7142857143vw; left: 2vw; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; color: #3a63ff; } .p-flow__step-label { display: block; font-size: 1.3571428571vw; font-weight: 800; line-height: 1; letter-spacing: 0; } .p-flow__step-number { display: block; margin-top: 0.0714285714vw; font-size: 3.4285714286vw; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; } /* ======================================== ステップ画像 ======================================== */ .p-flow__image { position: relative; display: grid; place-items: center; width: 12.2857142857vw; height: 12.2857142857vw; margin: 0.7142857143vw auto 0; } .p-flow__image img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* ======================================== ステップ本文 ======================================== */ .p-flow__content { display: flex; flex: 1; flex-direction: column; margin-top: 1.2142857143vw; } .p-flow__item-title { margin: 0; color: #383838; font-size: 1.9285714286vw; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; text-align: center; } .p-flow__accent { color: #fd5e01; } .p-flow__item-title--accent { color: #fd5e01; } .p-flow__text { margin: 1vw 0 0; color: #383838; font-size: 1.2857142857vw; font-weight: 500; line-height: 1.65; letter-spacing: 0.025em; } /* ======================================== ステップ間の矢印 PC：右向き ======================================== */ .p-flow__arrow { position: absolute; top: 50%; right: -2.7857142857vw; z-index: 3; display: block; width: 2vw; height: 2vw; border-right: 0.5714285714vw solid #3a63ff; border-bottom: 0.5714285714vw solid #3a63ff; border-radius: 0.2142857143vw; transform: translateY(-50%) rotate(-45deg); } /* ======================================== カードごとの微調整 ======================================== */ .p-flow__item:nth-child(1) .p-flow__image { width: 12.4285714286vw; height: 12.4285714286vw; } .p-flow__item:nth-child(2) .p-flow__image { width: 12.4285714286vw; height: 12.4285714286vw; } .p-flow__item:nth-child(3) .p-flow__image { width: 12.4285714286vw; height: 12.4285714286vw; } .p-flow__item:nth-child(4) .p-flow__image { width: 12.4285714286vw; height: 12.4285714286vw; } /* STEP04には矢印なし */ .p-flow__item:last-child .p-flow__arrow { display: none; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-flow { left: 50%; width: 100vw; max-width: none; margin-left: -50vw; padding-top: 14.5vw; padding-bottom: 16vw; background-image: url("../images/top/flow-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-flow__inner { width: 90vw; margin-inline: auto; } /* ======================================== セクション見出し ======================================== */ .p-flow__title { font-size: 6.5vw; line-height: 1.4; letter-spacing: 0.015em; white-space: nowrap; } .p-flow__title-line { width: 12vw; height: 1vw; margin-top: 3vw; border-radius: 2.5vw; } .p-flow__title-line::after { right: -2.5vw; width: 2vw; height: 1vw; border-radius: 2.5vw; } .p-flow__lead { display: flex; justify-content: center; align-items: center; gap: 0.75vw; width: 46.75vw; min-height: 11.75vw; white-space: nowrap; font-size: 4.5vw; } .p-flow__lead span { margin: 0; font-size: 5.25vw; line-height: 1; } /* ======================================== ステップ一覧 ======================================== */ .p-flow__list { display: grid; grid-template-columns: 1fr; row-gap: 10.5vw; width: 90vw; margin-top: 8vw; } /* ======================================== ステップカード ======================================== */ .p-flow__item { display: grid; grid-template-columns: 33vw minmax(0, 1fr); align-items: center; min-height: 31vw; padding: 4.25vw 4.5vw; border-radius: 5vw; box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.16), 0 2vw 3.75vw rgba(0, 0, 0, 0.1); } /* ======================================== STEP番号 ======================================== */ .p-flow__step { top: 4.25vw; left: 4.75vw; } .p-flow__step-label { font-size: 3vw; } .p-flow__step-number { margin-top: 0.25vw; font-size: 6.5vw; line-height: 0.9; } /* ======================================== ステップ画像 ======================================== */ .p-flow__image, .p-flow__item:nth-child(1) .p-flow__image, .p-flow__item:nth-child(2) .p-flow__image, .p-flow__item:nth-child(3) .p-flow__image, .p-flow__item:nth-child(4) .p-flow__image { grid-column: 1; grid-row: 1; width: 21.5vw; height: 21.5vw; margin: 0 0 0.5vw 4.75vw; } /* ======================================== ステップ本文 ======================================== */ .p-flow__content { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; padding-left: 3vw; } .p-flow__item-title { font-size: 4.5vw; line-height: 1.35; text-align: left; } .p-flow__text { margin-top: 2vw; font-size: 3.5vw; line-height: 1.3; letter-spacing: 0; } /* ======================================== ステップ間の矢印 SP：下向き ======================================== */ .p-flow__arrow { top: auto; right: auto; bottom: -7.25vw; left: 50%; width: 5vw; height: 5vw; border-right-width: 1.75vw; border-bottom-width: 1.75vw; border-radius: 0.5vw; transform: translateX(-50%) rotate(45deg); } .p-flow__item:last-child .p-flow__arrow { display: none; } } /* ======================================== お客様の声 PC：1400pxデザイン基準 ======================================== */ .p-voice { position: relative; overflow: hidden; padding-block: 4vw 5.3571428571vw; background-color: #fff; } .p-voice__inner { position: relative; z-index: 1; width: 85.7142857143vw; margin-inline: auto; } /* ======================================== セクション見出し ======================================== */ .p-voice__heading { position: relative; display: flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding-inline: 5vw; } .p-voice__title { margin: 0; color: #383838; font-size: 3.2857142857vw; font-weight: 900; line-height: 1.3; letter-spacing: 0.03em; } .p-voice__title-icon { position: absolute; top: -1.4285714286vw; right: -2vw; display: block; width: 5.7142857143vw; height: auto; } .p-voice__title-line { position: absolute; bottom: -0.7142857143vw; left: 50%; display: block; width: 10.2142857143vw; height: 0.1428571429vw; background-image: repeating-linear-gradient(to right, #3a63ff 0, #3a63ff 0.7857142857vw, transparent 0.7857142857vw, transparent 1.2142857143vw); transform: translateX(-50%); } /* ======================================== セクション背景装飾 ======================================== */ .p-voice__decoration { position: absolute; z-index: -1; display: block; pointer-events: none; } .p-voice__decoration--top { top: -1.0714285714vw; right: 0.3571428571vw; width: 10.7142857143vw; height: 10.3571428571vw; background-image: radial-gradient(circle, #50c8f1 0.2857142857vw, transparent 0.3571428571vw); background-size: 1.5714285714vw 1.5714285714vw; transform: rotate(-12deg); } .p-voice__decoration--bottom { bottom: 7.1428571429vw; left: -0.7142857143vw; width: 10.7142857143vw; height: 10.3571428571vw; background-image: radial-gradient(circle, #50c8f1 0.2857142857vw, transparent 0.3571428571vw); background-size: 1.5714285714vw 1.5714285714vw; transform: rotate(10deg); } /* ======================================== お客様の声一覧 ======================================== */ .p-voice__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8571428571vw 1.4285714286vw; margin: 4vw 0 1.1428571429vw 0; padding: 0; list-style: none; } .p-voice__item { position: relative; min-width: 0; } /* ======================================== カード ======================================== */ .p-voice__card { position: relative; height: 23.7142857143vw; padding: 2.5vw 2.5714285714vw 3.2142857143vw; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } /* voice-card-01.webp：薄い水色 voice-card-02.webp：薄いクリーム 書き出した番号が逆の場合は 下記2つのURLだけ入れ替えてください。 */ .p-voice__item--01 .p-voice__card, .p-voice__item--04 .p-voice__card { background-image: url("../images/top/voice-card-02.webp"); } .p-voice__item--02 .p-voice__card, .p-voice__item--03 .p-voice__card { background-image: url("../images/top/voice-card-01.webp"); } /* ======================================== テープ装飾 ======================================== */ .p-voice__tape { position: absolute; z-index: 3; display: block; width: 8.9285714286vw; height: auto; pointer-events: none; } .p-voice__tape--01 { top: -1.7857142857vw; left: -1.2857142857vw; } .p-voice__tape--02 { top: -1.7142857143vw; right: 1.0714285714vw; } .p-voice__tape--03 { top: -1.6428571429vw; left: -1.2857142857vw; } .p-voice__tape--04 { bottom: -1.2857142857vw; left: -1.4285714286vw; } .p-voice__tape--05 { top: -1.7142857143vw; right: 1.0714285714vw; } .p-voice__tape--06 { bottom: -1.2857142857vw; left: -1.2857142857vw; } /* ======================================== 引用符装飾 ======================================== */ .p-voice__quote { position: absolute; z-index: 2; display: block; height: auto; pointer-events: none; } .p-voice__quote--01 { top: 1.0714285714vw; right: 24.5vw; width: 3vw; } .p-voice__quote--02 { right: -10.1428571429vw; bottom: -2.1428571429vw; width: 2vw; } .p-voice__quote--03 { top: 1.1428571429vw; right: 1.7857142857vw; width: 3vw; } .p-voice__quote--04 { right: 3.8571428571vw; bottom: -0.1428571429vw; width: 3vw; } /* ======================================== 満足度・タイトル ======================================== */ .p-voice__card-heading { position: relative; padding-bottom: 0.8571428571vw; border-bottom: 0.1428571429vw dashed #f4c900; } .p-voice__rating { display: flex; align-items: center; gap: 0.8571428571vw; margin: 0; line-height: 1; } .p-voice__rating-label { color: #3a63ff; font-size: 1.1428571429vw; font-weight: 800; } .p-voice__stars { color: #ffc800; font-size: 1.4285714286vw; font-weight: 900; letter-spacing: 0.06em; } .p-voice__card-title { margin: 0.8571428571vw 0 0; color: #383838; font-size: 1.4285714286vw; font-weight: 800; line-height: 1.45; letter-spacing: -0.12em; } /* ======================================== カード本文 ======================================== */ .p-voice__body { display: grid; grid-template-columns: 10.3571428571vw minmax(0, 1fr); gap: 0vw; align-items: start; margin-top: 0.7142857143vw; } .p-voice__customer { min-width: 0; text-align: center; } .p-voice__customer-image { width: 8.9285714286vw; height: 8.9285714286vw; overflow: hidden; border-radius: 50%; } .p-voice__customer-image img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-voice__customer-name { margin: 0.8571428571vw 0 0; color: #383838; font-size: 1.0714285714vw; font-weight: 700; line-height: 1.55; text-align: center; } .p-voice__customer-name span { display: block; } .p-voice__text { margin: 0; color: #383838; font-size: 1.2857142857vw; font-weight: 500; line-height: 1.45; letter-spacing: 0.015em; } /* ======================================== お客様写真の注記 PC ======================================== */ .p-voice__note { width: 100%; } .p-voice__note-text { margin: 0; color: #666; font-size: 1vw; font-weight: 400; line-height: 1.2; text-align: right; } /* ======================================== CTA ======================================== */ .p-voice .c-contact-cta { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 30vw); justify-content: center; gap: 2.7142857143vw; margin-top: 5vw; } .p-voice .c-contact-cta__button { width: 28.5714285714vw; height: 7.2857142857vw; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-voice { padding-block: 12vw 12vw; } .p-voice__inner { width: 90vw; margin-inline: auto; } /* ======================================== セクション見出し ======================================== */ .p-voice__heading { padding-inline: 11.25vw; } .p-voice__title { font-size: 6.5vw; line-height: 1.3; letter-spacing: 0.03em; white-space: nowrap; } .p-voice__title-icon { top: -1.5vw; right: 0vw; width: 10.25vw; } .p-voice__title-line { bottom: -2.5vw; width: 20vw; height: 0.5vw; background-image: repeating-linear-gradient(to right, #3a63ff 0, #3a63ff 1.25vw, transparent 1.25vw, transparent 2vw); } /* 見出し周辺の引用符 */ .p-voice__quote--01 { top: 2.5vw; right: 51.75vw; width: 6.75vw; } .p-voice__quote--02 { right: -9.25vw; bottom: -6.75vw; width: 5vw; } /* ======================================== カード一覧 ======================================== */ .p-voice__list { grid-template-columns: 1fr; gap: 4.5vw; width: 100%; margin: 10.75vw 0 2vw; } .p-voice__item { width: 100%; } /* ======================================== カード PCの固定高さを解除 ======================================== */ .p-voice__card { width: 100%; height: auto; min-height: 69.5vw; padding: 4.5vw 7.25vw 6.75vw; background-position: center; background-size: 100% 100%; } /* 文章量が多いカード */ .p-voice__item--03 .p-voice__card, .p-voice__item--04 .p-voice__card { min-height: 73.5vw; } /* ======================================== テープ装飾 ======================================== */ .p-voice__tape { width: 18.75vw; } /* 1枚目：左上 */ .p-voice__item--01 .p-voice__tape { top: -6.5vw; right: auto; bottom: auto; left: -3.5vw; } /* 2枚目：右上 */ .p-voice__item--02 .p-voice__tape { top: -4.5vw; right: -0.75vw; bottom: auto; left: auto; transform: rotate(29deg); } /* 3枚目：左上 */ .p-voice__item--03 .p-voice__tape { top: -9.25vw; right: auto; bottom: auto; left: -2.25vw; transform: rotate(-51deg); } /* 4枚目：右上 */ .p-voice__item--04 .p-voice__tape { top: -4.25vw; right: -1vw; bottom: auto; left: auto; transform: rotate(14deg); } /* ======================================== カード内の引用符 ======================================== */ .p-voice__item .p-voice__quote { width: 7.5vw; } .p-voice__quote--03 { top: 5.5vw; right: 5.5vw; } .p-voice__quote--04 { top: -74.5vw; right: 4.5vw; bottom: auto; } /* ======================================== 満足度・タイトル ======================================== */ .p-voice__card-heading { padding-bottom: 2.25vw; border-bottom-width: 0.25vw; } .p-voice__rating { gap: 1.25vw; } .p-voice__rating-label { font-size: 2.75vw; } .p-voice__stars { font-size: 3.5vw; letter-spacing: 0.03em; } .p-voice__card-title { margin-top: 0vw; padding-right: 0vw; font-size: 4vw; line-height: 1.35; letter-spacing: -0.01em; } /* ======================================== カード本文 ======================================== */ .p-voice__body { grid-template-columns: 16.75vw minmax(0, 1fr); gap: 2.75vw; align-items: start; margin-top: 2.75vw; } .p-voice__customer { width: 16.75vw; } .p-voice__customer-image { width: 15.5vw; height: 15.5vw; margin-inline: auto; } .p-voice__customer-name { margin-top: 1.5vw; font-size: 2vw; line-height: 1.45; } .p-voice__text { font-size: 3.125vw; font-weight: 500; line-height: 1.42; letter-spacing: 0; } /* ======================================== お客様写真の注記 SP ======================================== */ .p-voice__note-text { font-size: 3vw; text-align: right; } /* ======================================== CTA ======================================== */ .p-voice .c-contact-cta { grid-template-columns: 1fr; gap: 4.5vw; width: 66.5vw; margin: 8.5vw auto 0; } .p-voice .c-contact-cta__button { width: 100%; height: 16.5vw; } } /* ======================================== よくあるご質問 PC：1400pxデザイン基準 ======================================== */ .p-faq { position: relative; width: 100%; max-width: none; overflow: hidden; padding-block: 6.0714285714vw 7.1428571429vw; background-color: #f3f9ff; background-image: url("../images/top/faq-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; } .p-faq__inner { position: relative; width: 85.7142857143vw; margin-inline: auto; } /* ======================================== 見出し ======================================== */ .p-faq__heading { position: relative; display: flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding-left: 4.6428571429vw; } .p-faq__heading-icon { position: absolute; top: -0.4vw; left: -3.1857142857vw; display: block; width: 5.5714285714vw; height: auto; transform: translateY(-50%); } .p-faq__title { position: relative; margin: 0; color: #383838; font-size: 3.2142857143vw; font-weight: 800; line-height: 1.3; letter-spacing: 0.04em; } /* タイトル下の左右線＋中央の丸 */ .p-faq__title::after { position: absolute; bottom: -1.8571428571vw; left: 50%; width: 12vw; height: 0.8571428571vw; background: linear-gradient(#3a63ff, #3a63ff) left center/5vw 0.2142857143vw no-repeat, radial-gradient(circle, #3a63ff 0, #3a63ff 0.3571428571vw, transparent 0.3928571429vw) center/0.8571428571vw 0.8571428571vw no-repeat, linear-gradient(#3a63ff, #3a63ff) right center/5vw 0.2142857143vw no-repeat; content: ""; transform: translateX(-50%); } .p-faq__title-line { position: absolute; top: -2.4vw; left: 29.8571428571vw; display: block; width: 2.1428571429vw; height: auto; } /* ======================================== アコーディオン一覧 ======================================== */ .p-faq__list { display: grid; row-gap: 1.7142857143vw; margin: 5.3571428571vw auto 0; } .p-faq__item { overflow: hidden; cursor: pointer; background-color: #eaf6ff; border: 0.0714285714vw solid #3a63ff; border-left-width: 0.8571428571vw; border-radius: 1.5714285714vw; box-shadow: 0 0.2857142857vw 0.3571428571vw rgba(0, 0, 0, 0.18), 0 0.7142857143vw 1.4285714286vw rgba(0, 0, 0, 0.08); } /* ======================================== 質問部分 ======================================== */ .p-faq__question { position: relative; display: grid; grid-template-columns: 3.5714285714vw minmax(0, 1fr) 2.7142857143vw; -moz-column-gap: 1.2857142857vw; column-gap: 1.2857142857vw; align-items: center; width: 100%; min-height: 6.4285714286vw; margin: 0; padding: 1.4285714286vw 2vw; color: #383838; font: inherit; text-align: left; cursor: pointer; background-color: transparent; border: 0; } .p-faq__question-text { font-size: 1.7142857143vw; font-weight: 800; line-height: 1.45; letter-spacing: 0.015em; } .p-faq__label { display: grid; place-items: center; width: 3.1428571429vw; height: 3.1428571429vw; color: #fff; font-size: 1.7857142857vw; font-weight: 500; line-height: 1; border-radius: 50%; } .p-faq__label--question { background-color: #3a63ff; } .p-faq__label--answer { background-color: #fd6202; } .p-faq__toggle { position: relative; display: block; width: 3.1428571429vw; height: 3.1428571429vw; background-color: #3a63ff; border-radius: 50%; } .p-faq__toggle::before, .p-faq__toggle::after { position: absolute; top: 50%; left: 50%; width: 1.1428571429vw; height: 0.1428571429vw; background-color: #fff; content: ""; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .p-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .p-faq__question[aria-expanded=true] .p-faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); } /* ======================================== 回答部分 gridで高さをアニメーション ======================================== */ .p-faq__answer { display: grid; grid-template-rows: 0fr; visibility: hidden; cursor: pointer; transition: grid-template-rows 0.4s ease, visibility 0.4s; } .p-faq__item.is-open .p-faq__answer { grid-template-rows: 1fr; visibility: visible; } .p-faq__answer-inner { display: grid; grid-template-columns: 3.5714285714vw minmax(0, 1fr); -moz-column-gap: 1.2857142857vw; column-gap: 1.2857142857vw; min-height: 0; overflow: hidden; padding-inline: 2vw; transition: padding 0.4s ease; } .p-faq__item.is-open .p-faq__answer-inner { padding-top: 0.2857142857vw; padding-bottom: 2vw; } .p-faq__answer-text { margin: 0; color: #383838; font-size: 1.4285714286vw; font-weight: 500; line-height: 1.65; letter-spacing: 0.02em; padding-right: 3.5714285714vw; } .p-faq__answer-content { min-width: 0; } .p-faq__payment { display: block; width: 22.1428571429vw; height: auto; margin-top: 1.0714285714vw; } /* ======================================== フォーカス ======================================== */ .p-faq__question:focus-visible { outline: 0.2142857143vw solid #fd6202; outline-offset: -0.3571428571vw; } /* ======================================== SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-faq { width: 100%; padding-block: 14.5vw 17vw; background-image: url("../images/top/faq-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-faq__inner { width: 90vw; margin-inline: auto; } /* ======================================== 見出し ======================================== */ .p-faq__heading { width: -moz-fit-content; width: fit-content; margin-inline: auto; } .p-faq__heading-icon { top: -0.5vw; left: -8.5vw; width: 13vw; transform: translateY(-50%); } .p-faq__title { font-size: 7vw; line-height: 1.3; letter-spacing: 0.03em; white-space: nowrap; } /* タイトル下の左右線＋中央丸 */ .p-faq__title::after { bottom: -5vw; width: 27vw; height: 2.25vw; background: linear-gradient(#3a63ff, #3a63ff) left center/11vw 0.5vw no-repeat, radial-gradient(circle, #3a63ff 0, #3a63ff 0.875vw, transparent 1vw) center/2.25vw 2.25vw no-repeat, linear-gradient(#3a63ff, #3a63ff) right center/11vw 0.5vw no-repeat; } .p-faq__title-line { top: -5.25vw; left: auto; right: -8vw; width: 6.25vw; } /* ======================================== アコーディオン一覧 ======================================== */ .p-faq__list { width: 100%; row-gap: 7.5vw; margin: 14.25vw auto 0; } .p-faq__item { border-width: 0.25vw; border-left-width: 1.75vw; border-radius: 4vw; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.14), 0 1.5vw 3vw rgba(0, 0, 0, 0.07); } /* ======================================== 質問部分 ======================================== */ .p-faq__question { grid-template-columns: 9vw minmax(0, 1fr) 8vw; -moz-column-gap: 2.5vw; column-gap: 2.5vw; min-height: 19vw; padding: 3.25vw 3.25vw 3.25vw 2.75vw; } .p-faq__question-text { font-size: 3.5vw; line-height: 1.45; letter-spacing: 0; letter-spacing: -0.05em; } /* ======================================== Q・Aアイコン ======================================== */ .p-faq__label { width: 8.5vw; height: 8.5vw; font-size: 3.75vw; } /* ======================================== 開閉ボタン ======================================== */ .p-faq__toggle { width: 8vw; height: 8vw; } .p-faq__toggle::before, .p-faq__toggle::after { width: 3vw; height: 0.5vw; } /* ======================================== 回答部分 ======================================== */ .p-faq__answer-inner { grid-template-columns: 9vw minmax(0, 1fr); -moz-column-gap: 2.5vw; column-gap: 2.5vw; padding-inline: 2.75vw 3.5vw; } .p-faq__item.is-open .p-faq__answer-inner { padding-top: 0; padding-bottom: 4.5vw; } .p-faq__answer-text { padding-right: 0.75vw; font-size: 3.125vw; line-height: 1.65; letter-spacing: 0; } .p-faq__answer-content { min-width: 0; } /* ======================================== クレジットカード画像 ======================================== */ .p-faq__payment { width: 55vw; max-width: 100%; margin-top: 2.5vw; } /* ======================================== フォーカス ======================================== */ .p-faq__question:focus-visible { outline-width: 0.5vw; outline-offset: -0.75vw; } } /* ======================================== お問い合わせ PC ======================================== */ .p-contact { padding: 5.7142857143vw 0 8.5714285714vw; background: url("../images/top/contact-bg-pc.webp") no-repeat center top; background-size: cover; scroll-margin-top: calc(var(--header-height) + 8px); } .p-contact__inner { width: min(85.7142857143vw, 100% - 40px); margin-inline: auto; } .p-contact__card { overflow: visible; border-radius: 2.8571428571vw; background: #fff; box-shadow: 0 0.5714285714vw 0.8571428571vw rgba(0, 0, 0, 0.18); } /* =========================== 見出し =========================== */ .p-contact__heading { display: flex; align-items: center; justify-content: center; gap: 2vw; padding: 3vw 4.2857142857vw 1vw; } .p-contact__heading-icon { display: block; width: 13.2857142857vw; height: auto; } .p-contact__title { color: #383838; font-size: 3.2857142857vw; font-weight: 700; line-height: 1.4; } .p-contact__heading-woman { display: block; width: 16.8571428571vw; height: auto; } /* =========================== STEP PC =========================== */ .p-contact__steps { display: flex; gap: 0vw; overflow: visible; margin: 0; padding: 0; list-style: none; padding-inline: 1.5714285714vw; } .p-contact__step { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; gap: 1.4285714286vw; min-width: 0; height: 6.9285714286vw; padding: 0 3.2142857143vw; background: #f4f4f4; color: #383838; filter: drop-shadow(0 0.3571428571vw 0.3571428571vw rgba(0, 0, 0, 0.14)); } /* 1つ目：左は直線、右は矢印 */ .p-contact__step:first-child { clip-path: polygon(0 0, calc(100% - 2.5714285714vw) 0, 100% 50%, calc(100% - 2.5714285714vw) 100%, 0 100%); } /* 2つ目以降：左に切り込み、右は矢印 */ .p-contact__step:not(:first-child) { padding-left: 5vw; clip-path: polygon(0 0, calc(100% - 2.5714285714vw) 0, 100% 50%, calc(100% - 2.5714285714vw) 100%, 0 100%, 2.5714285714vw 50%); } /* 現在位置 */ .p-contact__step--current { background: #3a63ff; color: #fff; } .p-contact__step-number { display: flex; width: 2.8571428571vw; height: 2.8571428571vw; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: #b5b5b5; color: #fff; font-size: 1.4285714286vw; font-weight: 700; line-height: 1; } .p-contact__step--current .p-contact__step-number { background: #fff; color: #3a63ff; } .p-contact__step-text { font-size: 2.1428571429vw; font-weight: 700; line-height: 1; white-space: nowrap; } /* =========================== フォーム共通 =========================== */ .p-contact__form { padding: 5vw 5vw 6.4285714286vw; } .p-contact__field { display: grid; grid-template-columns: 18.5714285714vw 1fr; gap: 3.5714285714vw; padding: 2.1428571429vw 0; } .p-contact__field:last-of-type { border: 0; } .p-contact__required { display: flex; align-items: center; justify-content: center; width: 7.1428571429vw; height: 2.7857142857vw; border-radius: 0.2857142857vw; background: #ff6600; color: #fff; font-size: 1.1428571429vw; font-weight: 700; } .p-contact__label-spacer { display: block; width: 4vw; } .p-contact__label { color: #333; font-size: 1.4285714286vw; font-weight: 700; line-height: 1.6; } .p-contact__field-body { min-width: 0; } /* =========================== Contact Form 7 共通 =========================== */ .wpcf7, .wpcf7 form { width: 100%; } .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7-form-control { width: 100%; } .wpcf7-spinner { display: none; } .wpcf7-not-valid-tip { display: block; margin-top: 0.5714285714vw; color: #e60012; font-size: 1.1428571429vw; line-height: 1.5; } .wpcf7 form .wpcf7-response-output { margin: 1.7142857143vw 0 0; padding: 1vw 1.2857142857vw; border-radius: 0.4285714286vw; font-size: 1vw; line-height: 1.6; display: none; } /* ======================================== お問い合わせ 入力欄・ラジオ・住所 PC ======================================== */ /* =========================== お問い合わせ項目 Contact Form 7対応 =========================== */ .p-contact__field--category { align-items: flex-start; border: 0; } .p-contact__field--category .wpcf7-form-control-wrap { display: block; width: 100%; } .p-contact__radio-list { display: grid; width: 100%; gap: 1.2857142857vw; } .p-contact__radio-list .wpcf7-list-item { display: block; margin: 0; } .p-contact__radio-list .wpcf7-list-item label { display: flex; align-items: center; gap: 1vw; width: -moz-fit-content; width: fit-content; cursor: pointer; } .p-contact__radio-list input[type=radio] { position: relative; width: 1.4285714286vw; height: 1.4285714286vw; flex-shrink: 0; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #8b8b8b; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; } .p-contact__radio-list input[type=radio]::after { position: absolute; top: 50%; left: 50%; width: 0.7142857143vw; height: 0.7142857143vw; border-radius: 50%; background: #3a63ff; content: ""; opacity: 0; transform: translate(-50%, -50%) scale(0.5); transition: opacity 0.25s, transform 0.25s; } .p-contact__radio-list input[type=radio]:checked { border-color: #3a63ff; } .p-contact__radio-list input[type=radio]:checked::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .p-contact__radio-list input[type=radio]:focus-visible { outline: 2px solid #3a63ff; outline-offset: 2px; } .p-contact__radio-list .wpcf7-list-item-label { color: #333; font-size: 1.4285714286vw; font-weight: 800; line-height: 1.6; } /* =========================== 入力欄 =========================== */ .p-contact__input, .p-contact__textarea { width: 100%; border: 1px solid #cfd8e3; border-radius: 0.4285714286vw; background: #fff; color: #333; font-family: inherit; font-size: 1.1428571429vw; transition: border-color 0.25s, box-shadow 0.25s; } .p-contact__input { height: 4vw; padding: 0 1.2857142857vw; } .p-contact__textarea { min-height: 18.5714285714vw; padding: 1.2857142857vw; resize: vertical; } .p-contact__input:focus, .p-contact__textarea:focus { border-color: #3a63ff; outline: none; box-shadow: 0 0 0 0.2142857143vw rgba(58, 99, 255, 0.12); } /* =========================== 通常項目 =========================== */ .p-contact__field--name, .p-contact__field--kana, .p-contact__field--tel, .p-contact__field--email { align-items: center; } .p-contact__field--name .p-contact__field-heading, .p-contact__field--kana .p-contact__field-heading, .p-contact__field--tel .p-contact__field-heading, .p-contact__field--email .p-contact__field-heading { align-items: center; } /* =========================== 住所 =========================== */ .p-contact__field--address { align-items: flex-start; } .p-contact__address { display: grid; gap: 2.4285714286vw; } .p-contact__address-row { display: grid; grid-template-columns: 8.5714285714vw 1fr; align-items: center; gap: 1.4285714286vw; margin-top: -1vw; } .p-contact__address-label { color: #333; font-size: 1.4285714286vw; font-weight: 700; } .p-contact__input--short { max-width: 24.2857142857vw; } /* =========================== お問い合わせ内容 =========================== */ .p-contact__field--message { align-items: flex-start; } .p-contact__field--message .p-contact__field-heading { padding-top: 1.1428571429vw; } .p-contact__field--message .p-contact__textarea { min-height: 20vw; } /* =========================== hover =========================== */ @media (hover: hover) { .p-contact__radio-list .wpcf7-list-item label:hover input[type=radio] { border-color: #3a63ff; } .p-contact__input:hover, .p-contact__textarea:hover { border-color: #7ea4ff; } } /* ======================================== お問い合わせ プライバシーポリシー・送信ボタン PC ======================================== */ /* =========================== プライバシーポリシー =========================== */ .p-contact__privacy { margin-top: 5vw; } .p-contact__privacy-box { width: 56vw; margin-inline: auto; overflow: hidden; border: 1px solid #9a9a9a; border-radius: 0.4285714286vw; background: #fff; } /* タイトル部分 */ .p-contact__privacy-title { display: flex; height: 4.1428571429vw; align-items: center; justify-content: center; margin: 0; padding: 1.0714285714vw 2.1428571429vw; border: 0; border-bottom: 1px solid #e1e7ef; background: #eaf4ff; color: #2765ff; font-size: 1.4285714286vw; font-weight: 700; line-height: 1.4; text-align: center; } /* スクロール本文 */ .p-contact__privacy-content { height: 17.8571428571vw; margin-top: 0; overflow-y: auto; padding: 2.9285714286vw 5.7142857143vw; border: 0; border-radius: 0; background: #fff; scrollbar-color: #999 #f0f0f0; scrollbar-width: auto; } .p-contact__privacy-content::-webkit-scrollbar { width: 1.4285714286vw; } .p-contact__privacy-content::-webkit-scrollbar-track { background: #f0f0f0; } .p-contact__privacy-content::-webkit-scrollbar-thumb { min-height: 3.5714285714vw; border: 0.2857142857vw solid #f0f0f0; border-radius: 999px; background: #999; } .p-contact__privacy-content p { margin: 0; color: #333; font-size: 1.2857142857vw; font-weight: 500; line-height: 1.65; } .p-contact__privacy-content p + p { margin-top: 2vw; } .p-contact__privacy-section { margin-top: 2.2857142857vw; } .p-contact__privacy-heading { margin: 0 0 0.4285714286vw; color: #333; font-size: 1.5vw; font-weight: 700; line-height: 1.5; } .p-contact__privacy-list { margin: 1.4285714286vw 0 0; padding-left: 2vw; } .p-contact__privacy-list li { color: #333; font-size: 1.4285714286vw; font-weight: 500; line-height: 1.7; list-style: disc; } .p-contact__privacy-list li + li { margin-top: 1.2857142857vw; } /* =========================== 同意 =========================== */ .p-contact__agreement { display: flex; align-items: center; justify-content: center; margin-top: 2.8571428571vw; text-align: center; } .p-contact__agreement > p { margin: 0; } .p-contact__agreement .wpcf7-form-control-wrap { display: inline-block; width: auto; } .p-contact__agreement .wpcf7-acceptance { display: inline-block; width: auto; } .p-contact__agreement .wpcf7-list-item { display: block; margin: 0; } .p-contact__agreement label { display: inline-flex; align-items: center; justify-content: center; gap: 1.7857142857vw; cursor: pointer; } /* チェックボックス */ .p-contact__agreement input[type=checkbox] { position: relative; width: 1.5714285714vw; height: 1.5714285714vw; flex-shrink: 0; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0; background: #d2d2d2; cursor: pointer; transition: background-color 0.25s, box-shadow 0.25s; } .p-contact__agreement input[type=checkbox]::after { position: absolute; top: 43%; left: 50%; width: 0.5714285714vw; height: 1.0714285714vw; border-right: 0.2142857143vw solid #fff; border-bottom: 0.2142857143vw solid #fff; content: ""; opacity: 0; transform: translate(-50%, -50%) rotate(45deg); transition: opacity 0.25s; } .p-contact__agreement input[type=checkbox]:checked { background: #3a63ff; } .p-contact__agreement input[type=checkbox]:checked::after { opacity: 1; } .p-contact__agreement input[type=checkbox]:focus-visible { outline: 0.1428571429vw solid #3a63ff; outline-offset: 0.2857142857vw; } .p-contact__agreement .wpcf7-list-item-label { color: #333; font-size: 1.4285714286vw; font-weight: 700; line-height: 1.4; } /* =========================== 確認画面に進むボタン =========================== */ .p-contact__submit-wrap { margin-top: 4.2857142857vw; text-align: center; } .p-contact__submit-wrap > p { margin: 0; } .p-contact__submit { display: inline-flex; width: 32.8571428571vw; height: 6.7142857143vw; min-height: 0; align-items: center; justify-content: center; padding: 0 2.8571428571vw; border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff5722 0%, #ff721f 50%, #ff9626 100%); box-shadow: 0 0.3571428571vw 0.7142857143vw rgba(0, 0, 0, 0.22); color: #fff; cursor: pointer; font-family: inherit; font-size: 1.5714285714vw; font-weight: 700; line-height: 1.4; text-align: center; transition: opacity 0.3s ease, box-shadow 0.3s ease; } @media (hover: hover) { .p-contact__submit:hover { opacity: 0.9; transform: translateY(-0.2142857143vw); box-shadow: 0 0.7857142857vw 1.1428571429vw rgba(0, 0, 0, 0.2); } } .p-contact__submit:active { opacity: 0.8; transform: translateY(-0.0714285714vw); box-shadow: 0 0.4285714286vw 0.6428571429vw rgba(0, 0, 0, 0.23); } .p-contact__submit:focus-visible { outline: 0.2142857143vw solid #3a63ff; outline-offset: 0.3571428571vw; } .p-contact__field-heading { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 1vw; margin-top: -0.4vw; } .p-contact__field--kana .p-contact__field-heading { margin-left: 3vw; } .p-contact__field-heading > p { display: contents; } .p-contact__required, .p-contact__label-spacer { flex-shrink: 0; } .p-contact__label { flex-shrink: 0; } /* ======================================== お問い合わせ SP最終調整 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { /* ======================================== セクション・外枠 ======================================== */ .p-contact { padding: 15vw 0 15vw; } .p-contact__inner { width: 93vw; margin-inline: auto; } .p-contact__card { box-sizing: border-box; overflow: hidden; border-radius: 8vw; background-color: #fff; box-shadow: 0.65vw 0.75vw 1.5vw rgba(0, 0, 0, 0.18); } /* ======================================== 見出し ======================================== */ .p-contact__heading { min-height: 24vw; gap: 2.5vw; padding: 3.25vw 4.5vw 2.5vw; } .p-contact__heading-icon { width: 14.5vw; } .p-contact__title { flex-shrink: 0; font-size: 6.25vw; font-weight: 700; line-height: 1.3; white-space: nowrap; } .p-contact__heading-woman { width: 18.75vw; } /* ======================================== ステップ ======================================== */ .p-contact__steps { width: 100%; padding: 0; padding-bottom: 6vw; } .p-contact__step { height: 9vw; min-height: 9vw; gap: 1.5vw; padding: 0 2vw; } .p-contact__step:not(:first-child) { padding-left: 5.75vw; } .p-contact__step-number { width: 3.5vw; height: 3.5vw; font-size: 2vw; } .p-contact__step-text { font-size: 2.5vw; font-weight: 700; white-space: nowrap; } /* ======================================== フォーム共通 ======================================== */ .p-contact__form { padding: 0; } .p-contact__field { display: block; padding: 5.25vw 5vw; } /* 必須ラベルと項目名を同じ位置に揃える */ .p-contact__field-heading { display: grid; grid-template-columns: 16vw minmax(0, 1fr); align-items: center; -moz-column-gap: 3vw; column-gap: 3vw; margin: 0; padding: 0; } .p-contact__required, .p-contact__label-spacer { box-sizing: border-box; width: 16vw; height: 6.75vw; flex-shrink: 0; } .p-contact__required { border-radius: 1.75vw; font-size: 2.75vw; font-weight: 700; } /* 任意項目も必須項目とラベル位置を揃える */ .p-contact__label-spacer { display: block; visibility: hidden; } .p-contact__label { min-width: 0; font-size: 4.75vw; font-weight: 700; line-height: 1.4; white-space: nowrap; } .p-contact__field-body { width: 100%; margin-top: 3.25vw; } /* ふりがなの手動位置調整を解除 */ .p-contact__field--kana .p-contact__field-heading { margin-left: 0; padding-left: 0; } .p-contact__field--kana .p-contact__field-body { margin-top: 3.25vw; } /* ======================================== お問い合わせ項目 ======================================== */ .p-contact__field--category { padding-top: 0.5vw; padding-bottom: 5.5vw; } .p-contact__field--category .p-contact__field-body { margin-top: 3.75vw; padding-left: 6.25vw; } .p-contact__radio-list { gap: 3vw; } .p-contact__radio-list .wpcf7-list-item label { gap: 2.75vw; } .p-contact__radio-list input[type=radio] { width: 3.5vw; height: 3.5vw; } .p-contact__radio-list input[type=radio]::after { width: 1.5vw; height: 1.5vw; } .p-contact__radio-list .wpcf7-list-item-label { font-size: 3.5vw; font-weight: 700; line-height: 1.45; white-space: nowrap; } /* ======================================== 入力欄 ======================================== */ .p-contact__input { height: 9.25vw; padding: 0 2.75vw; border-radius: 0.75vw; font-size: 3.5vw; } .p-contact__textarea { min-height: 37.5vw; padding: 2.75vw; border-radius: 0.75vw; font-size: 3.5vw; } /* ======================================== 住所 ======================================== */ .p-contact__field--address { padding-top: 3vw; padding-bottom: 5.5vw; } .p-contact__field--address .p-contact__field-body { margin-top: 5vw; } .p-contact__address { gap: 4.5vw; } .p-contact__address-row { display: block; margin-top: 0; } .p-contact__address-label { display: block; margin-bottom: 1.75vw; font-size: 3.75vw; font-weight: 700; line-height: 1.4; white-space: nowrap; } .p-contact__input--short { width: 100%; max-width: none; } /* ======================================== お問い合わせ内容 ======================================== */ .p-contact__field--message { padding-top: 3.5vw; padding-bottom: 8.5vw; } .p-contact__field--message .p-contact__field-heading { padding-top: 0; } .p-contact__field--message .p-contact__field-body { margin-top: 3vw; } /* ======================================== プライバシーポリシー ======================================== */ .p-contact__privacy { margin-top: 0; padding: 0 5vw 10.75vw; } .p-contact__privacy-box { width: 100%; border-radius: 1vw; } .p-contact__privacy-title { height: auto; min-height: 10.5vw; padding: 2vw 3vw; font-size: 3.5vw; font-weight: 700; } .p-contact__privacy-content { height: 36.25vw; padding: 4.25vw 5vw; } .p-contact__privacy-content p, .p-contact__privacy-list li { font-size: 2.25vw; font-weight: 500; line-height: 1.65; } .p-contact__privacy-heading { font-size: 2.5vw; font-weight: 700; } .p-contact__privacy-section { margin-top: 3.5vw; } .p-contact__privacy-list { margin-top: 2vw; padding-left: 3.5vw; } /* ======================================== 同意 ======================================== */ .p-contact__agreement { margin-top: 4.5vw; } .p-contact__agreement label { gap: 2vw; white-space: nowrap; } .p-contact__agreement input[type=checkbox] { width: 4vw; height: 4vw; } .p-contact__agreement .wpcf7-list-item-label { font-size: 3.5vw; font-weight: 700; white-space: nowrap; } /* ======================================== 確認画面に進むボタン ======================================== */ .p-contact__submit-wrap { margin-top: 10vw; } .p-contact__submit { width: 63.75vw; height: 12.5vw; min-height: 12.5vw; padding: 0 5vw; font-size: 4.25vw; font-weight: 700; } .wpcf7-not-valid-tip { display: block; margin-top: 0.5714285714vw; color: #e60012; font-size: 3.5vw; line-height: 1.5; } } /* ======================================== お問い合わせ確認ページ PC 縦並び ======================================== */ .p-contact--confirm { padding: 8.5714285714vw 0 8.5714285714vw; } .p-contact__form--confirm { padding: 5vw 7.1428571429vw 6.4285714286vw; } .p-contact-confirm__lead { margin-bottom: 3.2142857143vw; text-align: center; } .p-contact-confirm__lead-text { margin: 0; color: #383838; font-size: 1.2857142857vw; font-weight: 500; line-height: 1.8; } .p-contact-confirm__list { width: 64.2857142857vw; margin-inline: auto; border-top: 1px solid #e5e5e5; } .p-contact-confirm__field { display: block; padding: 2vw 0 2.1428571429vw; border-bottom: 1px solid #e5e5e5; } .p-contact-confirm__heading { display: block; margin: 0; } .p-contact-confirm__label { margin: 0; color: #333; font-size: 1.4285714286vw; font-weight: 700; line-height: 1.6; } .p-contact-confirm__body { display: block; min-width: 0; margin-top: 0.8571428571vw; } .p-contact-confirm__value { min-width: 0; margin: 0; color: #333; font-size: 1.1428571429vw; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; } /* ======================================== 住所 ======================================== */ .p-contact-confirm__address { display: grid; gap: 1.2857142857vw; } .p-contact-confirm__address-row { display: block; } .p-contact-confirm__address-label { margin: 0 0 0.3571428571vw; color: #333; font-size: 1.2142857143vw; font-weight: 700; line-height: 1.6; } .p-contact-confirm__address-row .p-contact-confirm__value { font-size: 1.1428571429vw; line-height: 1.7; } /* ======================================== お問い合わせ内容 ======================================== */ .p-contact-confirm__value--message { white-space: pre-wrap; } /* ======================================== 同意済み ======================================== */ .p-contact-confirm__agreement { margin-top: 3.2142857143vw; text-align: center; } .p-contact-confirm__agreement-text { margin: 0; color: #3a63ff; font-size: 1.1428571429vw; font-weight: 700; line-height: 1.6; } /* ======================================== 戻る・送信ボタン ======================================== */ .p-contact-confirm__buttons { display: grid; grid-template-columns: repeat(2, 32.8571428571vw); justify-content: center; gap: 2.1428571429vw; margin-top: 3.5714285714vw; } .p-contact-confirm__back-wrap, .p-contact-confirm__submit-wrap { width: 100%; margin: 0; } .p-contact-confirm__back-wrap > p, .p-contact-confirm__submit-wrap > p { margin: 0; } .p-contact-confirm__submit-wrap { margin-top: 0; } .p-contact-confirm__back, .p-contact__form--confirm .p-contact__submit { display: inline-flex; width: 100%; height: 6.7142857143vw; min-height: 6.7142857143vw; align-items: center; justify-content: center; padding: 0 2.1428571429vw; border-radius: 999px; font-family: inherit; font-size: 1.5714285714vw; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .p-contact-confirm__back { border: 0.1428571429vw solid #3a63ff; background-color: #fff; box-shadow: 0 0.3571428571vw 0.7142857143vw rgba(0, 0, 0, 0.12); color: #3a63ff; } @media (hover: hover) { .p-contact-confirm__back:hover { opacity: 0.85; transform: translateY(-0.2142857143vw); } } /* ======================================== お問い合わせ確認ページ SP ======================================== */ @media screen and (max-width: 767px) { .p-contact--confirm { padding: 30vw 0 20vw; } .p-contact__form--confirm { padding: 0 0 10.5vw; } .p-contact-confirm__lead { margin-bottom: 5vw; padding: 1vw 5vw 0; } .p-contact-confirm__lead-text { font-size: 3.25vw; line-height: 1.7; } .p-contact-confirm__list { width: auto; margin-inline: 5vw; } .p-contact-confirm__field { display: block; padding: 4.5vw 0 5vw; } .p-contact-confirm__label { font-size: 4vw; font-weight: 700; line-height: 1.5; } .p-contact-confirm__body { display: block; margin-top: 2vw; } .p-contact-confirm__value { font-size: 3.5vw; font-weight: 400; line-height: 1.65; } .p-contact-confirm__address { gap: 3.25vw; } .p-contact-confirm__address-row { display: block; } .p-contact-confirm__address-label { margin-bottom: 0.75vw; font-size: 3.25vw; font-weight: 700; line-height: 1.5; } .p-contact-confirm__address-row .p-contact-confirm__value { font-size: 3.5vw; line-height: 1.65; } /* ======================================== お問い合わせ内容 ======================================== */ .p-contact-confirm__field--message { align-items: start; } .p-contact-confirm__value--message { white-space: pre-wrap; } /* ======================================== 同意済み ======================================== */ .p-contact-confirm__agreement { margin-top: 6.75vw; padding-inline: 5vw; } .p-contact-confirm__agreement-text { margin: 0; font-size: 3vw; font-weight: 700; line-height: 1.6; } /* ======================================== 戻る・送信ボタン ======================================== */ .p-contact-confirm__buttons { display: flex; flex-direction: column; align-items: center; gap: 3.5vw; margin-top: 7.5vw; } .p-contact-confirm__back-wrap, .p-contact-confirm__submit-wrap { width: 72.5vw; margin: 0; } .p-contact-confirm__back, .p-contact__form--confirm .p-contact__submit { width: 100%; height: 14.75vw; min-height: 14.75vw; padding: 0 4.5vw; font-size: 4vw; font-weight: 700; line-height: 1.3; white-space: nowrap; } .p-contact-confirm__back { border-width: 0.5vw; box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.12); } .p-contact-confirm__back:hover { transform: none; } } /* =========================== 完了ページ PC =========================== */ .p-contact--thanks { padding: 8.5714285714vw 0; } .p-contact-thanks { padding: 5.7142857143vw 0; text-align: center; } .p-contact-thanks__title { margin-bottom: 2.5vw; color: #3a63ff; font-size: 2.7142857143vw; font-weight: 700; } .p-contact-thanks__text { color: #383838; font-size: 1.2857142857vw; line-height: 2; } .p-contact-thanks__text p + p { margin-top: 1em; } .p-contact-thanks__button-wrap { margin-top: 4.2857142857vw; } .p-contact-thanks__button { display: inline-flex; justify-content: center; align-items: center; width: 24.2857142857vw; min-height: 5.8571428571vw; border-radius: 999px; background: #3a63ff; color: #fff; font-size: 1.5714285714vw; font-weight: 700; text-decoration: none; transition: opacity 0.3s; } @media (hover: hover) { .p-contact-thanks__button:hover, .p-contact-confirm__back:hover { opacity: 0.8; } } /* =========================== SP =========================== */ @media screen and (max-width: 767px) { .p-contact__form--confirm .p-contact-confirm__lead { margin-bottom: 7.5vw; padding: 0 5vw; } .p-contact__form--confirm .p-contact-confirm__lead-text { font-size: 3.75vw; } .p-contact__form--confirm .p-contact-confirm__field { display: block; padding: 6vw 5vw; } .p-contact__form--confirm .p-contact-confirm__heading { gap: 3.5vw; } .p-contact__form--confirm .p-contact-confirm__body { margin-top: 3.75vw; } .p-contact__form--confirm .p-contact-confirm__value { font-size: 3.75vw; } .p-contact__form--confirm .p-contact-confirm__address { gap: 3.5vw; } .p-contact__form--confirm .p-contact-confirm__address-row { display: block; } .p-contact__form--confirm .p-contact-confirm__address-label { display: block; margin-bottom: 1.5vw; } .p-contact__form--confirm .p-contact-confirm__agreement { margin-top: 8.75vw; } .p-contact__form--confirm .p-contact-confirm__agreement-text { font-size: 3.5vw; } .p-contact__form--confirm .p-contact-confirm__buttons { flex-direction: column; align-items: center; gap: 4.5vw; margin-top: 8.75vw; } .p-contact__form--confirm .p-contact-confirm__back, .p-contact__form--confirm .p-contact__submit { width: 72.5vw; min-height: 15vw; font-size: 4.5vw; } .p-contact--thanks { padding: 30vw 0 20vw; } .p-contact-thanks { padding: 12.5vw 2vw; } .p-contact-thanks__title { margin-bottom: 6vw; font-size: 6vw; } .p-contact-thanks__text { font-size: 3.5vw; line-height: 1.9; } .p-contact-thanks__button-wrap { margin-top: 10vw; } .p-contact-thanks__button { width: 72.5vw; min-height: 15vw; font-size: 4.5vw; } } /* ======================================== 運営会社情報 PC 1400pxデザイン基準 ======================================== */ .p-company { padding: 5vw 0 5vw; background-image: url("../images/top/company-bg-pc.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; } .p-company__inner { width: 85.7142857143vw; margin-inline: auto; } .p-company__title { position: relative; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding-bottom: 1vw; color: #383838; font-size: 3.2857142857vw; font-weight: 800; line-height: 1.4; letter-spacing: 0.04em; text-align: center; } .p-company__title::after { position: absolute; bottom: 0; left: 50%; width: 13.2142857143vw; height: 0.2857142857vw; background-color: #3a63ff; content: ""; transform: translateX(-50%); } .p-company__list { width: 64.2857142857vw; margin: 3.8571428571vw auto 0; border-top: 0.2142857143vw solid #3a63ff; } .p-company__item { display: grid; align-items: start; grid-template-columns: 26.4285714286vw 1fr; height: 9.7142857143vw; border-bottom: 1px solid rgba(56, 56, 56, 0.45); } .p-company__term, .p-company__description { display: flex; align-items: center; margin: 0; padding: 1.7142857143vw 3.1428571429vw; } .p-company__term { color: #3a63ff; font-size: 1.5vw; font-weight: 800; line-height: 1.5; height: 9.7142857143vw; } .p-company__description { color: #383838; font-size: 1.4285714286vw; font-weight: 700; line-height: 1.6; height: 9.7142857143vw; } .p-company__description a { color: inherit; text-decoration: none; } /* 事業内容のみ上揃え */ .p-company__item--business { align-items: start; height: auto; height: 9.7142857143vw; } .p-company__item--business .p-company__term, .p-company__item--business .p-company__description { align-items: flex-start; height: auto; height: 9.7142857143vw; } @media (hover: hover) { .p-company__description a:hover { opacity: 0.7; } } /* ======================================== 運営会社情報 Tablet ======================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { .p-company { padding: 70px 0 80px; } .p-company__inner { width: min(100% - 60px, 900px); } .p-company__title { padding-bottom: 20px; font-size: 40px; } .p-company__title::after { width: 150px; height: 3px; } .p-company__list { width: 100%; margin-top: 46px; border-top-width: 3px; } .p-company__item { grid-template-columns: 30% 1fr; min-height: 82px; } .p-company__term, .p-company__description { padding: 22px 30px; } .p-company__term { font-size: 18px; } .p-company__description { font-size: 17px; } } /* ======================================== 運営会社情報 SP 400pxデザイン基準 ======================================== */ @media screen and (max-width: 767px) { .p-company { padding: 13.75vw 0 16vw; background-image: url("../images/top/company-bg-sp.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .p-company__inner { width: 77.5vw; margin-inline: auto; } /* ======================================== タイトル ======================================== */ .p-company__title { padding-bottom: 2.5vw; font-size: 7vw; font-weight: 800; line-height: 1.35; letter-spacing: 0.04em; white-space: nowrap; } .p-company__title::after { width: 20vw; height: 0.5vw; } /* ======================================== 会社情報一覧 ======================================== */ .p-company__list { width: 100%; margin-top: 6.75vw; border-top: 0; } .p-company__item { display: block; width: 100%; height: auto; min-height: 0; padding: 3.5vw 0 4.25vw; border-bottom: 1px solid rgba(56, 56, 56, 0.25); } .p-company__item:first-child { padding-top: 0; } .p-company__item:last-child { padding-bottom: 0; border-bottom: 0; } /* ======================================== 項目名・内容 ======================================== */ .p-company__term, .p-company__description { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; } .p-company__term { color: #3a63ff; font-size: 4.25vw; font-weight: 800; line-height: 1.4; } .p-company__description { margin-top: 2vw; color: #383838; font-size: 3.5vw; font-weight: 700; line-height: 1.55; letter-spacing: 0; } .p-company__description a { color: inherit; text-decoration: none; } /* 所在地 */ .p-company__item:nth-child(3) .p-company__description { line-height: 1.5; } /* メールアドレス */ .p-company__item:nth-child(5) .p-company__description { font-size: 3.375vw; white-space: nowrap; } /* ======================================== 事業内容 PCの固定高さを解除 ======================================== */ .p-company__item--business { height: auto; min-height: 0; align-items: initial; } .p-company__item--business .p-company__term, .p-company__item--business .p-company__description { height: auto; min-height: 0; align-items: initial; } .p-company__item--business .p-company__description { line-height: 1.45; } } /* Utility */ /* ======================================== フェードイン ======================================== */ .js-fade { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .js-fade.is-show { opacity: 1; transform: translateY(0); } /* ======================================== 表示方向 ======================================== */ .js-fade--left { transform: translateX(-50px); } .js-fade--right { transform: translateX(50px); } .js-fade--up { transform: translateY(40px); } .js-fade--down { transform: translateY(-40px); } .js-fade.is-show { transform: translate(0); } /* ======================================== 表示タイミング ======================================== */ .js-fade-delay-1 { transition-delay: 0.15s; } .js-fade-delay-2 { transition-delay: 0.3s; } .js-fade-delay-3 { transition-delay: 0.45s; } .js-fade-delay-4 { transition-delay: 0.6s; } /* ======================================== 動きを減らす設定 ======================================== */ @media (prefers-reduced-motion: reduce) { .js-fade { opacity: 1; transform: none; transition: none; } } /* test *//*# sourceMappingURL=style.css.map */