@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); /* reset */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* common */ :root { --padding: 80px; --base-color: #ffffff; --red:#D61518; --yellow:#FAC500; --orange:#ec6e1c; --lightyellow:#FFF000; --text-color: #1a1c1c; --darkredgray:#2f3131; --mediumgray:#454747; --lightgray:#e2e3e3; } html{ scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 150px; } body { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; display: flex; flex-direction: column; background:var(--base-color); color: var(--text-color); font-size:16px; overflow-x: hidden; position:relative; width:100%; } @media screen and (max-width: 768px) { html{ scroll-padding-top: 100px; } body { font-size:14px; } } a { color: var(--red); text-decoration: none; } a:hover{ text-decoration: none; } img { object-fit: cover; } main{ width:100%; } section{ width:100%; position:relative; } .inner{ width:1200px; max-width:calc(100% - 40px); padding:80px 0 100px 0; margin:0 auto; } @media screen and (max-width: 768px) { .inner{ padding: 40px 0; } } @media screen and (max-width: 528px) { .inner{ padding: 36px 0 60px 0; } } /* button */ .button-box{ text-align: center; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 8px 24px; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; color: #fff; text-decoration: none; border-radius: 4px; background: linear-gradient(to bottom, #555, #222); box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all .25s ease; } .button:after{ content: ""; display: inline-block; width: 18px; height: 18px; background: url("../images/button-arrow.svg") no-repeat center center; background-size: contain; } .button:hover{ background: linear-gradient(to bottom, #666, #333); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.35); } @media screen and (max-width: 768px) { .button:after{ top:12px; } } /* header */ header{ width:100%; margin:0 auto; height:80px; position:fixed; z-index:999; background: white; } header .inner{ padding:0; position:relative; display: flex; justify-content: flex-end; width:100%; } header .h-b-box{ position:absolute; top:28px; right:0; display:flex; justify-content: space-between; gap:20px; } header .copy{ position:fixed; top:40px; right:calc(50% + 120px); z-index:10; } header .sp{ display:none; } header .h-b-box li a{ color: var(--text-color); } header .h-b-box li a:hover{ color: var(--red); } header .h-b-box .button{ background: linear-gradient( to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */ ); font-size:.9em; padding: 6px 20px; margin-top:-4px; color:white; box-shadow: 0 4px 10px rgb(255 180 0 / 37%); } header .h-b-box .button:hover{ background: linear-gradient( to bottom, #ffc85c 0%, /* 明るいオレンジ黄（+明度） */ #ff864c 40%, /* 明るいオレンジ赤（+明度） */ #fa4740 100% /* 明るい赤（+明度） */ ); color:white; box-shadow: 0 4px 10px rgb(255 180 0 / 37%); } @media (max-width: 1400px) { header .copy{ width:360px; right:calc(50% + 80px); } } @media (max-width: 950px) { header .pc{ display:none; } header .sp{ display:block; top: 10px; width: 200px; left: 20px; } } header .logo{ position:fixed; top:32px; left:32px; z-index:10; width:200px; } .height-list{ height:auto; } /* ハンバーガーメニュー */ @media (max-width: 850px) { header{ height:60px; } header .inner{ max-width:calc(100% - 20px); } header .logo{ top: 19px; } /* チェックボックスを非表示にする */ .drawer_hidden { display: none; } /* ハンバーガーアイコンの設置スペース */ .drawer_open { display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; position: relative; z-index: 100;/* 重なり順を一番上にする */ cursor: pointer; } /* ハンバーガーメニューのアイコン */ .drawer_open span, .drawer_open span:before, .drawer_open span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background: #333; transition: 0.5s; position: absolute; } /* 三本線の一番上の棒の位置調整 */ .drawer_open span:before { bottom: 8px; } /* 三本線の一番下の棒の位置調整 */ .drawer_open span:after { top: 8px; } /* アイコンがクリックされたら真ん中の線を透明にする */ #drawer_input:checked ~ .drawer_open span { background: rgba(255, 255, 255, 0); } /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */ #drawer_input:checked ~ .drawer_open span::before { bottom: 0; transform: rotate(45deg); } #drawer_input:checked ~ .drawer_open span::after { top: 0; transform: rotate(-45deg); } /* メニューのデザイン*/ .nav_content { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; /* メニューを画面の外に飛ばす */ z-index: 99; background: #fff; transition: .5s; } /* メニュー黒ポチを消す */ .nav_list { list-style: none; } /* アイコンがクリックされたらメニューを表示 */ #drawer_input:checked ~ .nav_content { left: 0;/* メニューを画面に入れる */ background: var(--lightgray); } header .h-b-box{ width:300px; position:relative; flex-direction: column; gap:8px; margin:100px auto; text-align: center; font-size:1.5em; } header .h-b-box .button{ margin-top:20px; } } @media (max-width: 500px) { header .sp{ display:block; width: 160px; left: 105px; top:16px; } header .logo{ position:fixed; right:auto; left:12px; margin:0 auto; z-index:10; } header .inner { max-width: 100%; } } /*//// swiper ////*/ .swiper{ padding:0 0 40px 0 !important; } /* 画面全幅のヒーロー領域（左右の余白を無視して100vwに拡張） */ .hero-swiper { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 80px; } /* 高さは600px固定（必要なら下の「レスポンシブ案」を参照） */ .hero-swiper .swiper { height: 600px; } /* slidesPerView:'auto' で「スライド幅 = 内包コンテンツ幅」にする */ .hero-swiper .swiper-slide { width: auto !important; /* 重要：コンテンツ幅に追従 */ display: flex; /* 画像を中央揃え */ align-items: center; justify-content: center; background: #0e0e0e; /* レターボックス部分の背景（任意） */ } /* 画像は縦いっぱい（= 600px）で、横は比率維持。トリミング禁止 */ .hero-swiper .swiper-slide img { height: 100%; width: auto; object-fit: contain; /* 見切れ防止（非トリミング） */ display: block; } /* ページネーション（●）の位置調整（任意） */ .hero-swiper .swiper-pagination { bottom: 12px !important; } .swiper-pagination-bullet-active{ background:var(--red) !important; } .swiper-button-next, .swiper-button-prev{ color:white !important; filter:drop-shadow(0 0 10px var(--red)); } /* 初期状態: PC向け 600px */ .hero-swiper .swiper { height: 600px; } /* 横幅1000px以下のとき */ @media (max-width: 1000px) { .hero-swiper .swiper { height: 400px; } .hero-swiper .swiper-slide img { height: 100%; /* 高さに合わせる */ } } /* 横幅768px以下のとき */ @media (max-width: 768px) { .hero-swiper .swiper { height: 220px; } .hero-swiper .swiper-slide img { height: 100%; } } @media (max-width: 950px) { .hero-swiper{ padding-top:0px; } } /* common */ h2{ text-align: center; font-size:3em; font-weight:700; z-index:2; position:relative; width:280px; margin:0 auto; margin-bottom:40px; } h2 img{ width:200px; } h2:before{ position:absolute; top:0; left:0; content:""; width:20px; height:100%; border:3px solid var(--red); border-right:none; } h2:after{ position:absolute; top:0; right:0; content:""; width:20px; height:100%; border:3px solid var(--red); border-left:none; } .inner > h3{ font-size:1.8em; font-weight:700; text-align: center; margin-bottom: 40px; } /* merit */ .merit-list{ width:100%; display:flex; gap:40px; text-align: center; justify-content: center; margin-top: 80px; } .merit-list li{ position:relative; background:var(--lightgray); border:3px solid var(--orange); padding:60px 20px 20px 20px; } .merit-list li .num{ position:absolute; top:-40px; right:0; left:0; margin:0 auto; background: linear-gradient(to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */); width:80px; height:80px; border-radius:40px; font-family: "roboto", sans-serif; color:white; display:flex; justify-content: center; align-items: center; flex-direction: column; } .merit-list li .num span{ display:block; font-size:2em; line-height: .8; } .merit-list li .text01{ width:100%; height:100px; background:white; display:flex; align-items: center; position:relative; margin-bottom:40px; justify-content: center; font-size: 1.2em; font-weight: 600; flex-direction: column; line-height:1.3; } .merit-list li .text01:after{ position:absolute; content:""; bottom:-31px; right:0; left:0; margin:0 auto; height: calc(tan(60deg) * 36px / 2); width: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); background:white; } .merit-list li .text01 span{ display:block; font-size:.6em; } .merit-list li .text02{ width:100%; height:100px; display:flex; align-items: center; position:relative; margin-bottom:20px; justify-content: center; font-size: 1.2em; font-weight: 600; flex-direction: column; line-height:1.3; background: linear-gradient( to top right, #c59417 0%, /* 左下：濃い金 */ #d2a628 35%, /* 中間：やや明るい金 */ #f4d77b 100% /* 右上：ハイライト金 */ ); } @media (max-width: 950px) { .merit-list{ gap:20px; } } @media (max-width: 650px) { .merit-list{ flex-direction: column; gap:60px; } .merit-list li{ padding: 60px 20px 160px 20px; } .merit-list li img{ position: absolute; top: 180px; left:20px; width: calc(100% - 40px); height: 160px; object-position: 0 75%; } .merit-list li .text01{ width: calc(55% - 40px); margin-right: 40px; float:left; } .merit-list li .text01:after{ width:28px; height:100%; clip-path: polygon(0 0, 100% 50%, 0 100%); bottom: auto; right: -28px; left: auto; } .merit-list li .text02{ float:right; width:45%; } } @media (max-width: 450px) { .merit-list li .text01, .merit-list li .text02{ float:none; width:100%; height:80px; font-size: 1.3em; line-height:1.2; } .merit-list li img{ position: relative; top: 0; width: 100%; left: 0; } .merit-list li .text01:after{ position:absolute; content:""; bottom:-31px; right:0; left:0; margin:0 auto; height: calc(tan(60deg) * 36px / 2); width: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); background:white; } .merit-list li { padding: 60px 20px 20px 20px; } } /* disclaimer */ .disclaimer-area{ display:flex; flex-direction: column; gap:40px; } .disclaimer-item{ background:#F5F5F5; padding:40px; border-radius:16px; } .disclaimer-item h3{ font-size:1.5em; font-weight:700; margin-bottom:20px; } .disclaimer-item ul{ display:flex; flex-direction: column; gap:8px; padding-left:20px; } .disclaimer-item ul li{ list-style-type: disc; } @media (max-width: 650px) { .disclaimer-item { padding: 24px; } } /* FAQ */ .faq{ background:#fff4df; } .faq-contents{ display:flex; flex-direction: column; gap:80px; } .faq-area{ display:flex; flex-direction: column; gap:40px; } .faq-area h3{ font-size:1.5em; font-weight:700; text-align: center; color:white; width:100%; padding:4px; background: linear-gradient(to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */); } .faq-item{ background:white; padding:20px; } .faq-head h4{ font-size:1.2em; font-weight:700; padding:0 20px 0 36px; position:relative; } .faq-head h4:after{ position:absolute; top:-16px; left:0; content:"Q"; color:var(--red); font-size:2em; font-family: "roboto", sans-serif; } .faq-item.is-open .faq-body p{ color:var(--mediumgray); } /* 質問行のレイアウト（左右にタイトルと＋／－） */ .faq-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } /* 回答はデフォルトで非表示 */ .faq-body { display: none; margin-top: 1em; } /* 開いているときだけ表示 */ .faq-item.is-open .faq-body { display: block; } /* 右端の＋／－アイコン */ .faq-toggle::before { content: "+"; /* 初期状態は＋ */ font-size: 2rem; line-height: 1; } /* 開いているときは－に変更 */ .faq-item.is-open .faq-toggle::before { content: "−"; } @media (max-width: 650px) { .faq-contents{ gap:40px; } .faq-area{ gap:20px; } .faq-item { padding: 16px; } .faq-head h4{ padding: 0 12px 0 36px; } } /* install */ .install-flow{ display: flex; flex-direction: column; gap:4px; } .step-box{ width:100%; display:flex; background:#fff4df; gap:8px; } .step-box .num{ background: linear-gradient(to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */); color:white; font-weight:700; font-family:"roboto", sans-serif; text-align:center; width:100px; align-items: center; display: flex; justify-content: center; font-size: 1.2em; } .step-box .contents{ display: flex; align-items: center; gap:4px; } .step-box .contents img{ width:48px; mix-blend-mode: darken; } .step-box .contents p{ font-size:1.2em; font-weight:700; } .step-box .contents p.small{ font-size:.8em; font-weight:400; } .install-flow > img{ width: 28px; margin: 0 auto; } @media (max-width: 750px) { .step-box{ flex-direction: column; gap:0; } .step-box .num{ width:80px; margin: 12px auto 0 auto; } .step-box .contents{ width: 100%; flex-direction: column; gap: 0; padding: 12px; } .step-box .contents p.small{ text-align: center; } } .install .company{ background:#fff8f6; padding:40px; margin-top:80px; display:flex; gap:40px; align-items: flex-start; } .install .company > img{ object-fit:none; } .install .company .text h3{ font-weight:700; font-size:1.5em; margin-bottom:20px; } .install .jada{ background:#F5F5F5; padding:40px; margin-top:80px; display:flex; flex-direction: column; align-items: flex-start; } .install .jada h3{ font-weight:700; font-size:1.5em; margin-bottom:20px; text-align: center; width:100%; } .install .sp{ display:none; } @media (max-width: 768px) { .install .jada, .install .company{ margin-top:40px; } } @media (max-width: 650px) { .install .company{ flex-direction: column; padding:24px; gap:20px; } .install .jada{ padding:24px; } .install .company > img{ margin:0 auto; } .install .company .text h3{ text-align: center; } .install .company, .install .jada{ margin-top:40px; } } @media (max-width: 450px) { .install .sp{ display:block; } } /* cta */ .cta{ background: linear-gradient(to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */); text-align: center; color:white; overflow:hidden; position:relative; } .cta .inner{ padding:40px 0; position:relative; z-index:1; } .cta h2{ font-size:2em; margin-bottom:20px; } .cta h2:before, .cta h2:after{ display:none; } .cta .button-box{ margin-top:20px; } /* 左右の三角グラデ装飾 */ .cta::before, .cta::after { content: ""; position: absolute; top: 0; bottom: 0; /* これで高さが .cta にフィット */ width: 320px; /* デザインに合わせて調整 */ background-repeat: no-repeat; background-size: auto 100%; /* 高さ100％でスケールさせる */ z-index: 0; } /* 左側 */ .cta::before { left: 0; background-image: url("../images/cta-left.svg"); } /* 右側 */ .cta::after { right: 0; background-image: url("../images/cta-right.svg"); } @media (max-width: 800px) { .cta::before { left: -80px; } .cta::after { right: -80px; } } @media (max-width: 650px) { .cta::before { left: -160px; } .cta::after { right: -160px; } } /* spec */ .spec{ background:#fff8f6; } .spec .inner > p{ text-align: center; margin-top:16px; } .spec-table{ width:100%; display:flex; flex-direction: column; border-top:1px solid #919292; } .spec-table .line{ display:flex; border-bottom:1px solid #919292; background:white; } .spec-table .line .title{ width:300px; background:#2f3131; color:white; font-weight:500; display:flex; align-items: center; padding:8px; } .spec-table .line .contents{ width:calc(100% - 316px); padding:8px; display: flex; align-items: center; } .spec-table .line .contents span{ color:var(--red); font-weight:600; } .spec-table .sp{ display:none; } @media (max-width: 768px) { .spec-table .line .title{ width:120px; } .spec-table .line .contents{ width:calc(100% - 136px); padding:8px; } .spec-table .sp{ display:block; } } /* usage */ .usage-box:last-child{ padding-top:80px; } .usage-box ul { display: flex; justify-content: center; gap: 40px; /* カード同士の間隔 */ list-style: none; padding: 0; margin: 0; } /* 各カード */ .usage-box li { position: relative; width: 280px; /* お好みで調整 */ padding: 16px 20px 28px 20px; border-radius: 20px; background: linear-gradient( 180deg, #ffb400 0%, #ff7a00 40%, #ff4a3a 100% ); /* 枠のグラデーション */ box-sizing: border-box; text-align: center; } /* 内側の白い面を作る */ .usage-box li::before { content: ""; position: absolute; inset: 2px; /* 枠の太さ（2px） */ border-radius: 18px; /* 外側より少し小さく */ background: #fff; z-index: 0; } /* 中身を前面に */ .usage-box li > * { position: relative; z-index: 1; } /* アイコン画像 */ .usage-box li img { display: block; margin: 0 auto; width: 72px; /* デザインに合わせて調整 */ height: auto; } /* テキスト */ .usage-box li p { margin: 0; font-weight:600; } .usage-box h3{ font-size:1.5em; font-weight:700; text-align: center; margin-bottom:40px; } .usage-box li p.small { font-size:.6em; margin-top:8px; } .usage-box .sp{ display:none; } @media (max-width: 860px) { .usage-box .sp{ display:block; } } @media (max-width: 650px) { .usage-box ul{ gap:20px; } .usage-box li{ padding:16px 16px 24px 16px; } } @media (max-width: 470px) { .usage-box ul{ flex-direction: column; } .usage-box li{ width:100%; } .usage-box .sp{ display:none; } } /* revenue */ .revenue{ background:#fff4df; } .simulation-table{ display:flex; flex-direction: column; } .simulation-table .line{ width:100%; display:flex; border-bottom:1px solid #919292; } .simulation-table .first{ background: linear-gradient(to bottom, #8B8C96, #000); color:white; text-align: center; padding: 8px 0; line-height: 1.2; } .simulation-table .first span{ font-size:1.2em; } .simulation-table .line div{ width: calc((100% - 300px) / 5); text-align: center; padding:8px 12px; } .simulation-table .line .title{ width:300px; background:#8e3b00; color:white; text-align: left; } .simulation-table .first .title{ background:none; } .simulation-table .line .one{ background: #be5200; color:white; } .simulation-table .line .two{ background:#ec6e1c; color:white; } .simulation-table .line .three{ background: #ff9b65; color:white; } .simulation-table .line .four{ background: #ffcbb2; } .simulation-table .line .five{ background: #fff8f6; } @media (max-width: 1020px) { .simulation-table{ font-size:.8em; } .simulation-table .first{ padding:4px 0; } .simulation-table .line .title{ width:245px; } .simulation-table .line div{ width: calc((100% - 245px) / 5); padding: 8px 4px; } } /* 追加：スクロールヒントの基本スタイル */ .simulation-scroll-hint { display: none; font-size: 12px; color: #666; text-align: right; margin: 0 0 4px 0; } /* 追加：ラッパー */ .simulation-table-wrap { /* PCでは普通に幅いっぱいで表示 */ } /* 既存の .simulation-table のスタイルはそのままでOK */ /* 710px以下用 */ @media (max-width: 710px) { /* ヒントを表示 */ .simulation-scroll-hint { display: block; } /* 横スクロール可能にするラッパー */ .simulation-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* テーブル自体は最小幅710px確保（＝スマホ幅より広くして横スクロールに） */ .simulation-table { min-width: 710px; } /* 文字が消えた時の見た目 */ .simulation-scroll-hint.is-hidden { opacity: 0; visibility: hidden; transition: opacity .3s; } } .revenue .inner > p{ margin-top:16px; text-align: center; } @media (max-width: 900px) { .revenue .inner > p{ text-align: left; } .revenue .inner > p br{ display:none; } } .revenue .rate{ width:100%; padding:40px; background:white; text-align: center; border:1px solid #c6c7c7; border-radius:16px; margin-top:40px; } .revenue .rate h3{ font-size:1.5em; font-weight:700; text-align: center; } .revenue .rate p{ margin-top:16px; } @media (max-width: 650px) { .revenue .rate{ padding:24px 20px; } .revenue .rate p{ text-align: left; } } /* comparison */ .comparison .intro{ margin-bottom:40px; } .comparison .matome{ margin-top:40px; } .comparison-table{ display:flex; flex-direction: column; } .comparison-table .line{ display:flex; border-bottom:1px solid #919292; } .comparison-table .category{ border-bottom:2px solid #2f3131; gap:8px; } .comparison-table .category img{ height:80px; } .comparison-table .line div{ width:calc(100% / 6); padding:8px 12px; text-align: center; display:flex; align-items: center; flex-direction: column; justify-content: center; } .comparison-table .category div{ flex-direction: row; justify-content: center; background:#F5F5F5; border-top-left-radius:16px; border-top-right-radius:16px; } .comparison-table .category div img{ mix-blend-mode: darken; } .comparison-table .category div:first-child{ background:none; } .comparison-table .line div:first-child{ font-weight:600; justify-content: center; } .comparison-table .line div:last-child{ background:#fff8f6; } .comparison-table .line div:last-child img{ mix-blend-mode: unset; } .comparison-table .category div:last-child{ background:#ffcbb2; } .comparison-table .ue div{ justify-content: flex-start; } .comparison-table .line:last-child div{ justify-content: flex-start; text-align: left; } .comparison-table .line:last-child div:first-child{ justify-content: center; } .comparison-table .line div span, .comparison-table .line div p.small{ font-size:0.8em; } @media (max-width: 1200px) { .comparison-table{ font-size:.8em; } .comparison-table .category{ gap:4px; } .comparison-table .category div{ gap:4px; } .comparison-table .category img{ height:48px; } .comparison-table .line div{ padding:8px 4px; width:calc((100% - 80px) / 5); } .comparison-table .line div:first-child{ width:80px; } } /* スクロールヒントの基本 */ .comparison-scroll-hint { display: none; font-size: 12px; color: #666; text-align: right; margin: 0 0 8px; } /* 750px以下で横スクロールにする */ @media (max-width: 750px) { .comparison-scroll-hint { display: block; } .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 画面より広くして、はみ出させる */ .comparison-table { min-width: 750px; /* 必要なら 800px などに調整 */ } /* 共通：メッセージを消す用のクラス */ .comparison-scroll-hint.is-hidden, .simulation-scroll-hint.is-hidden { /* 既存のものもまとめて */ opacity: 0; visibility: hidden; transition: opacity .3s; } .comparison .intro br, .comparison .matome br{ display:none; } } @media (max-width: 750px) { .comparison h3{ font-size:1.48em; } } /* system02 */ .system02{ background:#fff8f6; } .system02 .inner{ display:flex; flex-direction: column; gap:40px; } .system02 .feature-contents{ width:100%; display:flex; gap:40px; align-items: flex-start; } .system02 .feature-copy{ width:100%; display:flex; justify-content: space-around; } .system02 .feature-copy > p{ font-size:2em; font-weight:700; color:var(--red); width:calc(50% - 40px); align-self: center; padding-right:40px; } @media (max-width: 1050px) { .system02 .feature-copy > p br{ display:none; } } @media (max-width: 900px) { .system02 .feature-copy{ flex-direction: column; gap:40px; } .system02 .feature-copy > p br{ display:block; } .system02 .feature-copy > p{ width:100%; text-align: center; padding-right:0; } .system02 .feature-copy > img{ width: 600px; max-width:100%; margin: 0 auto; } } @media (max-width: 650px) { .system02 .feature-copy > p{ font-size:1.5em; } } /* --- 共通 --- */ .feature-contents { position: relative; padding: 24px; background: linear-gradient(90deg, #ffb400 0%, #ff7a00 40%, #ff3b2f 100%); box-sizing: border-box; display: flex; align-items: center; gap: 40px; } /* 内側の白い面（グラデ枠を作る） */ .feature-contents::before { content: ""; position: absolute; inset: 2px; background: #fff; z-index: 0; } /* 中身を前面に */ .feature-contents > img, .feature-contents > .text { position: relative; z-index: 1; } /* 画像 */ .feature-contents > img { width: calc(50% - 40px); height: 100%; display: block; object-fit: cover; } /* テキストエリア */ .feature-contents .text { width:50%; } /* 見出し */ .feature-contents .text h3 { font-size: 1.5em; font-weight:700; line-height: 1.2; margin: 0; } /* 見出し内の「複数台でも対象」行 */ .feature-contents .text > div { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 16px; color: var(--red); font-weight: 700; font-size: 1.5em; } .feature-contents .text > div img { width: 18px; height: auto; } /* 箇条書き */ .feature-contents .text ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.8; } .feature-contents .text li { margin-bottom: 8px; list-style-type: disc; } .feature-contents .text h3 .sp02{ display:none; } @media (max-width: 770px) { .system02 .feature-contents{ gap:20px; } } /* --- スマホ（750px以下） --- */ @media (max-width: 650px) { .feature-contents { flex-direction: column; padding: 16px; gap: 16px; } .feature-contents > img { width: 100%; height: 200px; object-position: 0 30%; } .feature-contents .text{ width:100%; } .feature-contents .text h3 { text-align: center; } .feature-contents .text > div { font-size: 1.5em; display:flex; flex-direction: column; gap:8px; margin-top: 16px; } .feature-contents .text > div img{ transform: rotate(90deg); } .feature-contents .text ul { font-size: 13px; } .feature-contents .text h3 .sp02{ display:block; } } /* --- 全体レイアウト --- */ .feature-list { display: flex; justify-content: center; gap: 40px; list-style: none; padding: 0; } /* --- 各ボックス（外側：グラデ枠を作る） --- */ .feature-list li { position: relative; flex: 1 1 0; max-width: 320px; text-align: center; padding: 24px 16px; /* グラデーション枠の背景 */ background: linear-gradient(180deg, #ffb400 0%, #ff3b2f 100%); box-sizing: border-box; } /* 内側白い面（実際のコンテンツ部分） */ .feature-list li::before { content: ""; position: absolute; inset: 2px; /* 枠の太さ */ background: #fff; z-index: 0; } /* 中身を前面にする */ .feature-list li > * { position: relative; z-index: 1; } /* --- テキスト類 --- */ .feature-list li > p:first-child { margin: 0 0 12px; font-weight: 700; font-size: 1.5em; line-height: 1.2; } /* 矢印 */ .feature-list li img { display: block; margin: 0 auto 12px; width: 20px; height: auto; } /* 赤字のメインメッセージ */ .feature-list .red { margin: 0; color: var(--red); font-weight: 700; font-size: 1.5em; } /* 補足（2つ目の項目） */ .feature-list .detail { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #555; } .feature-list .red .sp{ display:none; } @media (max-width: 890px) { .feature-list { gap: 20px; } .feature-list .red .sp{ display:block; } } @media (max-width: 650px) { .feature-list { flex-direction: column; align-items: center; gap:40px; } .feature-list li { max-width: none; width: 100%; } .feature-list .red .sp { display: none; } } /* system01 */ .system01 .inner{ text-align: center; } .system01 .inner h3 span{ font-size:.8em; } .sikumi-flow{ display:flex; flex-direction: column; gap:4px; width:400px; max-width:100%; margin:40px auto; position:relative; } .sikumi-flow p{ width:100%; background:#fff8f6; text-align: center; padding:4px; } .sikumi-flow img{ height:24px; margin:0 auto; } .system01 .feature-left{ position:absolute; left:-250px; top:300px; z-index:-1; opacity:.2; width:300px; height:auto; } .system01 .feature-right{ position:absolute; right:-250px; top:0; z-index:-1; opacity:.2; width:300px; height:auto; } @media (max-width: 650px) { .system01 .feature-left, .system01 .feature-right{ display:none; } .system01 .arrow-img{ width:200px; } } /* feature02 */ .feature02 .inner{ display:flex; flex-direction: column; gap:80px; } .feature02 .feature-box{ display:flex; gap:40px; } .feature02 .feature-box img{ width:calc(50% - 20px); } .feature02 .feature-box > div{ width:calc(50% - 20px); } .feature02 .feature-box h3{ font-size:1.5em; font-weight:700; margin-bottom:20px; } .feature02 .feature-box ul{ display:flex; flex-direction: column; gap:8px; } .feature02 .feature-box ul li{ display:flex; gap:4px; font-size: 1.1em; } .feature02 .feature-box ul li img{ width: 24px; height: 28px; padding-top: 4px; } .feature02 .feature-box ul li p{ width:calc(100% - 28px); } @media (max-width: 920px) { .feature02 .feature-box ul li{ font-size: 1em; } .feature02 .feature-box ul li img{ height: 24px; padding-top: 0; } } @media (max-width: 700px) { .feature02 .feature-box{ flex-direction: column; gap: 20px; } .feature02 .feature-box img{ width:100%; height:200px; } .feature02 .feature-box > div{ width:100%; text-align: center; } .feature02 .feature-box ul li{ justify-content: center; } .feature02 .feature-box ul li p{ width:auto; } .feature02 .feature-box:last-child{ padding-top:220px; position:relative; } .feature02 .feature-box:last-child > img{ position:absolute; top:0; left:0; } } @media (max-width: 460px) { .feature02 .feature-box ul li{ justify-content: flex-start; } .feature02 .feature-box ul li p{ text-align: left; } } /* feature01 */ .feature01{ background:#FFF5F0; } /* 全体レイアウト */ .feature-point { width:80%; list-style: none; margin: 40px auto 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; /* カード同士の余白 */ justify-content: center; } /* 各カード */ .feature-point li { background: #fff; border-radius: 8px; box-shadow: 0 0px 20px rgb(255 203 178 / 32%); padding: 16px 8px 20px; text-align: center; box-sizing: border-box; flex: 0 1 calc(33.333% - 24px); /* PC：3カラム */ max-width: 280px; } /* アイコン画像 */ .feature-point li img { display: block; margin: 0 auto; width: 80px; /* デザインに合わせて調整 */ height: auto; } /* 見出し */ .feature-point li h4 { margin: 0 0 12px; font-size: 1.5em; line-height: 1.2; font-weight:700; } /* 説明文 */ .feature-point li p { margin: 0; font-size: 14px; line-height: 1.8; } /* 強調部分（赤） */ .feature-point li span { color: var(--red); font-weight: 700; } .feature-point li span.small { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; } @media (max-width: 1050px) { .feature-point { width:100%; } } /* 800px以下：2カラム（2＋2＋1） */ @media (max-width: 850px) { .feature-point { gap: 20px; } .feature-point li { flex: 0 1 calc(50% - 20px); /* 2カラム */ max-width: none; } } /* 650px以下：1カラム */ @media (max-width: 570px) { .feature-point { gap: 16px; } .feature-point li { flex: 0 1 100%; } .feature01 .inner > h3{ font-size:1.6em; } } /* about02 */ /* セクション全体 ------------------------------------ */ .about02 { position: relative; background: #111; /* 本体の黒背景 */ color: #fff; padding: 80px 0 0 0; margin-bottom: 80px; } /* 下端をゆるくカーブさせる */ .about02::after { content: ""; position: absolute; left: 50%; bottom: -80px; transform: translateX(-50%); width: 140%; /* 横に少しはみ出させて自然なカーブに */ height: 320px; background: #111; /* 黒いエリアを下方向に伸ばす */ border-radius: 0 0 50% 50%;/* 下側を丸めて「∪」のカーブにする */ z-index: -1; /* 下のセクション（薄い色）が後ろに見えるように */ } @media (max-width: 800px) { .about02::after { height: 200px; } } /* インナー */ .about02 .inner { text-align: center; position: relative; z-index: 1; /* カーブより前面に */ padding-top: 20px; } /* 見出し（価格） */ .about02 h2 { margin: 0 0 40px; font-size: 1.5em; font-weight: 700; color: #ffd52a; width:100%; } .about02 h2:before, .about02 h2:after { display:none; } .about02 h2 span { font-size: 2em; } /* 中央の3つのグラデBOX ------------------------------- */ .point-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .point-list li { position: relative; flex: 1 1 0; max-width: 260px; padding: 18px 16px; border-radius: 12px; background: linear-gradient(180deg, #ffb400 0%, #ff5a2f 100%); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } /* 内側の白い面（実カード） */ .point-list li::before { content: ""; position: absolute; inset: 2px; border-radius: 10px; background: #fff; z-index: 0; } .point-list li > * { position: relative; z-index: 1; } /* テキスト */ .point-list .black { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: #111; font-weight: 700; } .point-list .black.big { font-size: 20px; } .point-list .red { margin: 0; font-size: 30px; font-weight: 700; color: var(--red); line-height: 1.3; } .point-list .red span { font-size: 18px; } .point-list .detail { margin: 8px 0 0; font-size: 12px; color: #555; } /* 下の説明テキスト ---------------------------------- */ .about02 > .inner > p { margin: 0 0 40px; font-size: 13px; line-height: 1.9; } /* 下部の光るボタンリスト ----------------------------- */ .about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; width:400px; max-width:100%; margin:0 auto; } .about-list li { position: relative; width: 100%; padding: 10px 28px; border-radius: 999px; background: radial-gradient(circle at 50% 0, #fff59a 0, #ffd54f 40%, #ffb300 80%); box-shadow: 0 0 25px rgba(255, 215, 64, 0.7); box-sizing: border-box; } /* 内側の黒い帯 */ .about-list li::before { content: ""; position: absolute; inset: 2px; border-radius: 999px; background: #111; z-index: 0; } /* 中身を前面に */ .about-list li > * { position: relative; z-index: 1; } /* アイコン＋テキスト */ .about-list li { display: flex; align-items: center; gap: 8px; } .about-list li img { width: 20px; height: auto; } .about-list li p { margin: 0; font-size: 14px; } .about02 .inner > img{ position:absolute; z-index:2; top:-300px; right:0; left:0; margin:0 auto; width:200px; } /* レスポンシブ：650px以下で3BOXを縦並び ------------ */ @media (max-width: 550px) { .point-list { flex-direction: column; align-items: center; } .point-list li { max-width: none; width: 100%; } .about02 h2 { font-size: 1.3em; } .about02 h2 span { font-size: 2em; } .about02 > .inner > p { text-align: left; } .about02 > .inner > p br{ display:none; } .about02 .inner > img{ width:150px; top:-250px; } .about02 .inner{ padding-top:0; } } /* about01 */ .about01 .inner{ padding:0; width:100%; max-width:100%; background:#2f3131; text-align: center; color:white; position:relative; padding-bottom:240px; } .about01 .inner img{ height: 340px; position: absolute; right: 0; left: 0; margin: 0 auto; z-index: 1; bottom: 0; padding-right: 20px; } .about01 h2{ width:100%; font-size:2em; margin-bottom:0; } .about01 h2:before, .about01 h2:after{ display:none; } .about01 .inner::after { content: ""; position: absolute; left: 50%; top: -80px; transform: translateX(-50%); width: 140%; height: 320px; background: #2f3131; border-radius: 50% 50% 0 0; } @media (max-width: 800px) { .about01 .inner::after { height: 200px; } .about01 .inner{ padding-bottom:240px; } } @media (max-width: 550px) { .about01 .inner img{ height:200px; } .about01 .inner{ padding-bottom:200px; } } @media (max-width: 470px) { .about01 h2{ font-size:1.48em; } } /* hero */ .hero{ background: linear-gradient(180deg, #FFFFFF 0%, #FFF4DB 40%, #FFCFD0 80%); } .hero .inner{ position:relative; padding-top: 100px; } .hero .inner > img{ position:absolute; bottom:0; right:5%; width:400px; } .title-box{ padding-left:15%; margin-top: 20px; padding-bottom: 40px; z-index: 2; position: relative; } .fukidasi{ position:relative; background:var(--orange); color:white; font-size:1.5em; font-weight:700; padding:4px 16px; width:fit-content; margin-bottom: 20px; } .fukidasi:after{ position: absolute; content: ""; background: var(--orange); bottom: -20px; left: 40px; height: calc(tan(60deg) * 28px / 2); width: 28px; clip-path: polygon(0 0, 100% 0, 50% 100%); } h1 .title{ font-size:3em; font-weight:700; line-height: 1.4; margin-bottom:20px; } h1 img{ width:50%; } .title-box > img{ width:40%; margin-top:20px; } .title-box .button-box{ text-align:left; margin-top: 20px; } @media (max-width: 1200px) { .title-box{ padding-left:5%; } .hero .inner > img{ right:0; max-width: 45%; } } @media (max-width: 768px) { .hero .inner{ padding-bottom:80px; padding-top: 60px; } .fukidasi{ font-size:1em; } .fukidasi:after { bottom: -16px; left: 20px; height: calc(tan(60deg) * 20px / 2); width: 20px; } h1 .title{ font-size:2.5em; } .title-box > img{ width:50%; } } @media (max-width: 500px) { .title-box{ padding-left:0; } h1 .title{ font-size:2em; margin-bottom: 60px; } .hero .inner > img{ width:180px; max-width:180px; height: 220px; object-position: 0 0; bottom:auto; top:75px; } .title-box > img{ width:100%; margin-top:8px; } h1 img{ width:100%; } .title-box .button-box{ text-align: center; } } @media (max-width: 410px) { h1 .title{ font-size:1.5em; } h1 .title{ margin-bottom: 90px; } } .hero .background { position: absolute; display: block; top: 0; left: 0; z-index: 0; opacity:.6; } @media (max-width: 500px) { .hero .background { opacity:.4; } } /* form */ .privacy-consent { display: flex; font-size: 14px; color: #333; justify-content: center; align-items: center; margin-top: 20px; } /* 共通の input スタイルを打ち消して、小さな四角にする */ .privacy-consent .privacy-checkbox { width: 16px; height: 16px; padding: 0; margin: 0 6px 0 0; /* 文字との間隔 */ border-radius: 2px; /* ブラウザ標準のチェックボックスを使う場合 */ appearance: auto; -webkit-appearance: auto; box-sizing: border-box; } /* 色だけブランドカラーにしたい場合（対応ブラウザのみ） */ .privacy-consent .privacy-checkbox { accent-color: var(--red); } /* 「プライバシーポリシー」部分だけ赤＋下線 */ .privacy-link { color: var(--red); text-decoration: none; } /* ホバー時（任意） */ .privacy-link:hover { opacity: 0.8; text-decoration: underline; } /* form */ .form{ background:#fff8f6; } #form h2{ color:var(--navy); } #form .form-content{ width:100%; display:flex; flex-direction: column; width: 100%; margin-top:80px; gap:20px; margin-top:40px; } .form .two-clm{ width: 100%; display: flex; gap: 40px; } .form .two-clm div{ width:calc(50% - 20px); } form{ width:800px; max-width:100%; margin:80px auto 0 auto; } .form label{ width:100%; font-weight:600; display:block; margin-bottom:8px; } .privacy-consent label{ width:fit-content; margin: 0; } .required{ font-size:0.7em; font-weight:400; color:white; padding:2px 4px; background:var(--red); margin-left:8px; border-radius:2px; } .form textarea, .form input{ width:100%; background:white; padding:8px 12px; border:1px solid var(--lightgray); border-radius:4px; } .form textarea{ height:120px; } .send{ margin:20px auto 0 auto; text-align: center; } .send .button{ margin:0 auto; font-size:1.5em; background: linear-gradient(to bottom, #f8b532 0%, /* 上部：明るいオレンジ */ #f26b2c 40%, /* 中間：オレンジ赤 */ #e51d26 100% /* 下部：深い赤 */); color:white; box-shadow: 0 4px 10px rgb(255 180 0 / 37%); } .send button:hover{ cursor:pointer; background: linear-gradient(to bottom, #ffc85c 0%, /* 明るいオレンジ黄（+明度） */ #ff864c 40%, /* 明るいオレンジ赤（+明度） */ #fa4740 100% /* 明るい赤（+明度） */); box-shadow: 0 4px 10px rgb(255 180 0 / 37%); } #thankyouMessage{ margin-top:40px; } #thankyouMessage p{ text-align:center; font-size:1.2em; font-weight:600; color:var(--navy); } @media screen and (max-width: 900px) { .form .two-clm{ gap:20px; } } @media screen and (max-width: 768px) { .form .two-clm{ flex-direction: column; } .form .two-clm div{ width:100%; } form{ margin:40px auto 0 auto; } .send{ margin:20px auto; } } /* footer */ footer{ background:var(--text-color); padding:40px 0 100px 0; } footer ul{ width:1000px; max-width:100%; text-align:center; margin:0 auto 40px auto; } footer ul li { margin-bottom:12px; } footer ul li a{ color:white; } footer ul li a:hover{ text-decoration: underline; } footer p{ font-size:0.6em; color:white; text-align:center; }