/* ==========================================================================
page.css - 個別テンプレート固有のスタイル
投稿タイプ・ページごとの上書きはここに追記していく想定
========================================================================== */
/* ---------- コラム: カテゴリ絞り込み一覧の見出し(taxonomy-column_category.php) ----------
.c-entry-content h2 と同じ「薄い背景+左の丸いバー」の見た目を、
本文の外(ページ単体の見出し)でも使えるようにした版 */
.c-term-heading {
background: var(--color-bg-sub);
padding: 16px 16px 16px 24px;
font-size: 22px;
font-weight: bold;
border-radius: 0.5rem;
position: relative;
}
.c-term-heading::before {
content: "";
display: block;
width: 0.5rem;
height: 60%;
border-radius: 0 0.5rem 0.5rem 0;
background: var(--color-primary);
position: absolute;
top: 20%;
left: 0;
}
/* ---------- single-news / single-column 等 記事詳細の本文エリア ----------
ブロックエディタ側は .editor-styles-wrapper が本文のルート要素になるため、
.c-entry-content と同じルールを併記して見た目を揃えている(add_editor_styleで読込) */
.c-entry-content,
.editor-styles-wrapper {
line-height: var(--lh-body);
}
.single-news .l-main>.container {
max-width: 1000px;
margin: 0 auto;
}
.single-news .post-title,
.single-column .post-title {
font-weight: bold;
font-size: clamp( 24px, calc( 18px + 1.875vw ), 42px );
margin-top: 8px;
margin-bottom: clamp( 30px, calc( 20px + 3.125vw ), 60px );
}
/* ---------- 固定ページ本文内での全幅セクション(alignfull) ----------
page.php等は本文(.c-entry-content)を.containerで幅制限しているが、
ブロックエディタで「全幅」を選んだ要素(alignfullクラス)だけは
画面幅いっぱいに広げる。個別テンプレートを作らず、固定ページの編集画面(本文)だけで
「白背景の帯」と「全幅の色帯」が混在するデザインを組める。
使い方: 全幅にしたい要素(グループブロック等)を「全幅」に設定するか、
カスタムHTMLブロックで
のように書く(内側に.containerを入れて元の読みやすい幅に戻す) */
.c-entry-content .alignfull,
.editor-styles-wrapper .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
}
.c-entry-content .alignfull .c-about-heading,
.editor-styles-wrapper .alignfull .c-about-heading {
margin-top: 0;
}
/* .alignfullのoverflow:hiddenは子要素のposition:stickyを無効化してしまうため、
お申し込みフローの帯だけは例外的にoverflow:visibleに戻す
(横スクロール対策はbody { overflow-x: hidden }側で担保済み) */
.c-entry-content .alignfull.c-guide-steps-band,
.editor-styles-wrapper .alignfull.c-guide-steps-band {
overflow: visible;
}
.c-entry-content h2:not(.c-faq-category__title,
.c-guide-step__heading,.c-about-heading),
.editor-styles-wrapper h2:not(.c-faq-category__title,
.c-guide-step__heading,.c-about-heading) {
background: var(--color-bg-sub);
padding: 16px 16px 16px 24px;
font-size: clamp( 22px, calc( 19.333333333333332px + 0.8333333333333334vw ), 30px );
font-weight: bold;
margin-top: clamp( 48px, calc( 37.333333333333336px + 3.3333333333333335vw ), 80px );
margin-bottom: clamp( 20px, calc( 16px + 1.25vw ), 32px );
border-radius: 0.5rem;
position: relative;
}
.c-entry-content h2:not(.c-faq-category__title,
.c-guide-step__heading,
.c-about-heading)::before,
.editor-styles-wrapper h2:not(.c-faq-category__title,
.c-guide-step__heading,
.c-about-heading)::before {
content: "";
display: block;
width: 0.5rem;
height: 60%;
border-radius: 0 0.5rem 0.5rem 0;
background: var(--color-primary);
margin-right: 0.5rem;
position: absolute;
top: 20%;
left: 0;
}
.c-entry-content h3,
.editor-styles-wrapper h3 {
font-size: clamp( 20px, calc( 18.666666666666668px + 0.4166666666666667vw ), 24px );
font-weight: bold;
margin-top: clamp( 32px, calc( 26.666666666666668px + 1.6666666666666667vw ), 48px );
margin-bottom: clamp( 12px, calc( 10.666666666666666px + 0.4166666666666667vw ), 16px );
}
.c-entry-content h3::before,
.editor-styles-wrapper h3::before {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-primary);
margin-right: 0.5rem;
margin-bottom: 0.25rem;
}
.c-entry-content h4,
.editor-styles-wrapper h4 {
color: var(--color-primary);
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
font-weight: bold;
margin-top: clamp( 32px, calc( 26.666666666666668px + 1.6666666666666667vw ), 48px );
margin-bottom: clamp( 12px, calc( 10.666666666666666px + 0.4166666666666667vw ), 16px );
}
.c-entry-content h5,
.editor-styles-wrapper h5 {
font-size: 16px;
font-weight: bold;
margin-top: clamp( 16px, calc( 13.333333333333334px + 0.8333333333333334vw ), 24px );
margin-bottom: clamp( 8px, calc( 5.333333333333334px + 0.8333333333333334vw ), 16px );
}
.c-entry-content strong,
.editor-styles-wrapper strong {
font-weight: bold;
color: var(--color-primary);
background: linear-gradient(transparent 60%, var(--color-highlight) 60%);
}
.c-entry-content p + p,
.editor-styles-wrapper p + p {
margin-top: 1em;
}
.c-entry-content a,
.editor-styles-wrapper a {
color: var(--color-primary);
text-decoration: underline;
font-weight: 500;
}
.c-entry-content .wp-block-buttons .wp-block-button__link,
.editor-styles-wrapper .wp-block-buttons .wp-block-button__link {
background: var(--color-primary);
color: #FFF !important;
text-decoration: none;
}
/* 新しいタブで開くリンクに矢印アイコンを付ける。
ただし画像や動画などをリンクにした場合(中身がテキストでない場合)は、
アイコンがメディアの直後にくっついて表示されてしまうため除外する */
.c-entry-content a[target="_blank"]:not(.c-inquire-links__btn):not(:has(img, video, audio, svg))::after,
.editor-styles-wrapper a[target="_blank"]:not(.c-inquire-links__btn):not(:has(img, video, audio, svg))::after {
content: "";
display: inline-block;
margin-left: 4px;
text-decoration: none;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20208%20208%22%3E%0A%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23195dd9%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M20.6%2C208c-5.7%2C0-10.5-2-14.5-6-4-4-6-8.9-6-14.5V36.6c0-5.7%2C2-10.5%2C6-14.5%2C4-4%2C8.9-6%2C14.5-6h65.1c2.9%2C0%2C5.4%2C1%2C7.3%2C2.9%2C2%2C2%2C3%2C4.4%2C3%2C7.3s-1%2C5.3-3%2C7.3c-2%2C2-4.4%2C3-7.3%2C3H20.6v150.9h150.9v-65.1c0-2.9%2C1-5.4%2C2.9-7.3%2C2-2%2C4.4-3%2C7.3-3s5.3%2C1%2C7.3%2C3c2%2C2%2C3%2C4.4%2C3%2C7.3v65.1c0%2C5.7-2%2C10.5-6%2C14.5-4%2C4-8.9%2C6-14.5%2C6H20.6ZM187.4%2C35.1l-94.9%2C94.9c-2.1%2C2.1-4.5%2C3.1-7.1%2C3s-5-1.2-7.1-3.3-3.1-4.5-3.1-7.3%2C1-5.2%2C3.1-7.3L172.9%2C20.6h-39.1c-2.9%2C0-5.4-1-7.3-2.9-2-2-3-4.4-3-7.3s1-5.3%2C3-7.3c2-2%2C4.4-3%2C7.3-3h64c2.9%2C0%2C5.4%2C1%2C7.3%2C3%2C2%2C2%2C3%2C4.4%2C3%2C7.3v64c0%2C2.9-1%2C5.4-2.9%2C7.3-2%2C2-4.4%2C3-7.3%2C3s-5.3-1-7.3-3c-2-2-3-4.4-3-7.3v-39.1Z%22%2F%3E%0A%3C%2Fsvg%3E');
transform: translateY(2px);
}
.c-entry-content a.c-btn--accent[target="_blank"]::after,
.editor-styles-wrapper a.c-btn--accent[target="_blank"]::after {
display: none;
}
.c-entry-content a.c-btn--accent.c-btn--single,
.editor-styles-wrapper a.c-btn--accent.c-btn--single {
margin-block: clamp( 48px, calc( 44px + 1.25vw ), 60px );
}
.c-entry-content a.c-btn--accent.c-btn--single[target="_blank"]::after,
.editor-styles-wrapper a.c-btn--accent.c-btn--single[target="_blank"]::after {
display: inline-block;
background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20208%20208%22%3E%0A%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23FFFFFF%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M20.6%2C208c-5.7%2C0-10.5-2-14.5-6-4-4-6-8.9-6-14.5V36.6c0-5.7%2C2-10.5%2C6-14.5%2C4-4%2C8.9-6%2C14.5-6h65.1c2.9%2C0%2C5.4%2C1%2C7.3%2C2.9%2C2%2C2%2C3%2C4.4%2C3%2C7.3s-1%2C5.3-3%2C7.3c-2%2C2-4.4%2C3-7.3%2C3H20.6v150.9h150.9v-65.1c0-2.9%2C1-5.4%2C2.9-7.3%2C2-2%2C4.4-3%2C7.3-3s5.3%2C1%2C7.3%2C3c2%2C2%2C3%2C4.4%2C3%2C7.3v65.1c0%2C5.7-2%2C10.5-6%2C14.5-4%2C4-8.9%2C6-14.5%2C6H20.6ZM187.4%2C35.1l-94.9%2C94.9c-2.1%2C2.1-4.5%2C3.1-7.1%2C3s-5-1.2-7.1-3.3-3.1-4.5-3.1-7.3%2C1-5.2%2C3.1-7.3L172.9%2C20.6h-39.1c-2.9%2C0-5.4-1-7.3-2.9-2-2-3-4.4-3-7.3s1-5.3%2C3-7.3c2-2%2C4.4-3%2C7.3-3h64c2.9%2C0%2C5.4%2C1%2C7.3%2C3%2C2%2C2%2C3%2C4.4%2C3%2C7.3v64c0%2C2.9-1%2C5.4-2.9%2C7.3-2%2C2-4.4%2C3-7.3%2C3s-5.3-1-7.3-3c-2-2-3-4.4-3-7.3v-39.1Z%22%2F%3E%0A%3C%2Fsvg%3E');
}
/* PDFファイルへのリンクは、target="_blank"の有無を問わずPDFバッジを優先表示する
(両方に一致する場合、この規則が下にあるため上の矢印アイコンを上書きする)。
画像や動画などをリンクにした場合(中身がテキストでない場合)は除外する */
.c-entry-content a[href$=".pdf"]:not(:has(img, video, audio, svg))::after,
.c-entry-content a[href*=".pdf?"]:not(:has(img, video, audio, svg))::after,
.editor-styles-wrapper a[href$=".pdf"]:not(:has(img, video, audio, svg))::after,
.editor-styles-wrapper a[href*=".pdf?"]:not(:has(img, video, audio, svg))::after {
content: "";
display: inline-block;
margin-left: 4px;
width: 16px;
height: 19px;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20160%20190%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23195dd9%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20class%3D%22st0%22%20x%3D%2274.7%22%20y%3D%2285.3%22%20width%3D%2214.2%22%20height%3D%2230.9%22%2F%3E%0A%20%20%3Crect%20class%3D%22st0%22%20x%3D%2236.6%22%20y%3D%2285.3%22%20width%3D%2214.3%22%20height%3D%2211%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M50.9%2C76h-18.9c-1.2%2C0-2.3.4-3.3%2C1.3-1%2C.9-1.4%2C1.9-1.4%2C3.3v40.2c0%2C1.4.5%2C2.4%2C1.4%2C3.3.9.9%2C2%2C1.3%2C3.3%2C1.3s2.3-.5%2C3.2-1.4c.9-1%2C1.3-2%2C1.3-3.3v-15.2h14.3c2.6%2C0%2C4.8-.9%2C6.6-2.7s2.7-4%2C2.7-6.6v-11c0-2.6-.9-4.8-2.7-6.6-1.8-1.8-4-2.7-6.6-2.7ZM50.9%2C96.3h-14.3v-11h14.3v11Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M67%2C77.3c-1%2C.9-1.4%2C1.9-1.4%2C3.3v40.1c0%2C1.3.5%2C2.4%2C1.4%2C3.4%2C1%2C.9%2C2%2C1.4%2C3.3%2C1.4h13.4c8%2C0%2C14.6-6.6%2C14.6-14.6v-20.2c0-8-6.6-14.6-14.6-14.6h-13.4c-1.2%2C0-2.3.4-3.3%2C1.3h0ZM74.7%2C85.3h8.3c3.2%2C0%2C5.8%2C2.6%2C5.8%2C5.8v19.3c0%2C3.2-2.6%2C5.8-5.8%2C5.8h-8.3v-30.9Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M128.7%2C96.3h-15.1v-11h15.1c1.3%2C0%2C2.3-.5%2C3.2-1.4s1.3-2%2C1.3-3.3-.4-2.3-1.3-3.2-1.9-1.3-3.2-1.3h-19.6c-1.2%2C0-2.3.4-3.3%2C1.3-1%2C.9-1.4%2C1.9-1.4%2C3.3v40.2c0%2C1.4.5%2C2.4%2C1.4%2C3.3.9.9%2C2%2C1.3%2C3.3%2C1.3s2.3-.5%2C3.2-1.4c.9-1%2C1.3-2%2C1.3-3.3v-15.2h15.1c1.3%2C0%2C2.3-.5%2C3.2-1.4.9-.9%2C1.3-2%2C1.3-3.3s-.4-2.3-1.3-3.2-1.9-1.3-3.2-1.3h0Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M17.1%2C190c-4.5%2C0-9.1-1.1-12.6-4.5-3.4-3.4-4.5-6.9-4.5-12.6V17.2c0-4.5%2C1.1-9.1%2C4.5-12.6C7.9%2C1.1%2C11.3%2C0%2C17.1%2C0h91.4c5.7%2C0%2C11.4%2C2.3%2C16%2C6.9l28.6%2C28.6c4.5%2C4.5%2C6.9%2C10.3%2C6.9%2C16v121.4c0%2C4.5-1.1%2C9.1-4.5%2C12.6-3.4%2C3.4-6.9%2C4.5-12.6%2C4.5H17.1ZM17.1%2C172.8h125.7V50.3l-33.1-33.1H17.1v155.7ZM17.1%2C17.2v155.7V17.2Z%22%2F%3E%0A%3C%2Fsvg%3E');
transform: translateY(2px);
}
.c-entry-content mark,
.editor-styles-wrapper mark {
background: none;
color: var(--color-primary);
text-decoration: underline;
}
.c-entry-content .form-policy-wrap,
.editor-styles-wrapper .form-policy-wrap {
width: 100%;
height: 14.5rem;
overflow-x: hidden;
overflow-y: auto;
border: solid 1px var(--color-border-strong);
padding: 16px;
margin-bottom: 30px;
line-height: 1.5;
}
.c-entry-content .form-policy-wrap h4,
.editor-styles-wrapper .form-policy-wrap h4 {
margin-top: 16px;
}
/* ---------- 資料請求フォーム(Contact Form 7) ---------- */
.c-entry-content .c-form-card,
.editor-styles-wrapper .c-form-card {
display: flex;
flex-direction: column;
gap: 32px;
padding: clamp( 24px, calc( 12px + 3.75vw ), 60px );
background: var(--color-bg-sub);
}
.c-entry-content .c-form-field,
.editor-styles-wrapper .c-form-field {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 620px;
margin: 0 auto;
}
.c-entry-content .c-form-field__label,
.editor-styles-wrapper .c-form-field__label {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
font-weight: bold;
font-size: 18px;
}
.c-entry-content .c-form-required,
.editor-styles-wrapper .c-form-required {
display: inline-block;
padding: 2px 7px 3px;
background: var(--color-accent);
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.4;
transform: translateY(-1px);
}
.c-entry-content .c-form-optional,
.editor-styles-wrapper .c-form-optional {
display: inline-block;
padding: 2px 7px 3px;
background: #98989A;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.4;
transform: translateY(-1px);
}
.c-entry-content .c-form-field input[type="text"],
.c-entry-content .c-form-field input[type="email"],
.c-entry-content .c-form-field input[type="tel"],
.c-entry-content .c-form-field select,
.c-entry-content .c-form-field textarea,
.editor-styles-wrapper .c-form-field input[type="text"],
.editor-styles-wrapper .c-form-field input[type="email"],
.editor-styles-wrapper .c-form-field input[type="tel"],
.editor-styles-wrapper .c-form-field select,
.editor-styles-wrapper .c-form-field textarea {
display: block;
width: 100%;
padding: 14px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 16px;
font-family: inherit;
}
.c-entry-content .c-form-field select,
.editor-styles-wrapper .c-form-field select {
appearance: none;
-webkit-appearance: none;
padding-right: 44px;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23195dd9%22%3E%3Cpath%20d%3D%22M480-345.33%20268-557.33l47.33-47.34L480-440l164.67-164.67L692-557.34%20480-345.33Z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 20px 20px;
cursor: pointer;
}
.c-entry-content .c-form-field input.wpcf7-not-valid,
.c-entry-content .c-form-field select.wpcf7-not-valid,
.editor-styles-wrapper .c-form-field input.wpcf7-not-valid,
.editor-styles-wrapper .c-form-field select.wpcf7-not-valid {
background-color: #fdecec;
border-color: var(--color-accent);
}
.c-entry-content .wpcf7-not-valid-tip,
.editor-styles-wrapper .wpcf7-not-valid-tip {
display: block;
margin-top: 8px;
color: var(--color-accent);
font-size: 14px;
font-weight: bold;
}
.c-entry-content .wpcf7-list-item,
.editor-styles-wrapper .wpcf7-list-item {
margin: 0;
}
.c-entry-content .wpcf7-list-item label,
.editor-styles-wrapper .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
cursor: pointer;
}
.c-entry-content .wpcf7-list-item input[type="checkbox"],
.editor-styles-wrapper .wpcf7-list-item input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--color-primary);
}
.c-entry-content .c-form-submit,
.editor-styles-wrapper .c-form-submit {
display: flex;
justify-content: center;
margin-block: clamp( 40px, calc( 32px + 2.5vw ), 64px ) clamp( 18px, calc( 16px + 0.625vw ), 24px );
}
.c-entry-content .c-form-submit input[type="submit"],
.editor-styles-wrapper .c-form-submit input[type="submit"] {
appearance: none;
-webkit-appearance: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
font-weight: bold;
color: #fff;
border-radius: 999px;
padding: 14px clamp( 40px, calc( 32px + 2.5vw ), 64px ) 14px clamp( 24px, calc( 20px + 1.25vw ), 32px );
min-width: 248px;
background-color: transparent;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%23ffffff%22%2F%3E%3Csvg%20x%3D%226%22%20y%3D%226%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%230454D7%22%20d%3D%22M673-446.67H193.33q-14.33%200-23.83-9.5-9.5-9.5-9.5-23.83%200-14.33%209.5-23.83%209.5-9.5%2023.83-9.5H673L456.33-730q-10-10-9.83-23.33.17-13.34%2010.17-23.34%2010-9.66%2023.33-9.83%2013.33-.17%2023.33%209.83l273.34%20273.34q5.33%205.33%207.5%2011%202.16%205.66%202.16%2012.33t-2.16%2012.33q-2.17%205.67-7.5%2011L503.33-183.33q-9.66%209.66-23.16%209.66t-23.5-9.66q-10-10-10-23.5t10-23.5L673-446.67Z%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E'), var(--gradient-primary-btn);
background-repeat: no-repeat, no-repeat;
background-position: right 8px center, 0% 0%;
background-size: 40px 40px, 200% 100%;
transition: background-position 0.375s ease-out;
}
.c-entry-content .c-form-submit input[type="submit"]:hover,
.editor-styles-wrapper .c-form-submit input[type="submit"]:hover {
background-position: right 8px center, 100% 0%;
}
.c-entry-content .c-form-submit input[type="submit"]+.wpcf7-spinner,
.editor-styles-wrapper .c-form-submit input[type="submit"]+.wpcf7-spinner {
opacity: 0.7;
display: block;
margin: 12px auto;
}
.c-entry-content .wpcf7-response-output,
.editor-styles-wrapper .wpcf7-response-output {
margin-top: 0 !important;
margin-bottom: 48px !important;
padding: 16px;
border-radius: 8px;
text-align: center;
font-weight: bold;
border-width: 4px !important;
}
/* ブラウザがフォームの入力内容を記憶している状態で再表示すると、CF7が
.wpcf7-response-output要素自体は出力する(中身のメッセージは空、
aria-hidden="true")ため、枠線だけの空の箱が表示されてしまうことがある。
中身が空の場合は枠線ごと非表示にする */
.c-entry-content .wpcf7-response-output:empty,
.editor-styles-wrapper .wpcf7-response-output:empty {
display: none !important;
}
/* ---------- 資料請求フォーム 確認画面(Multi-Step Forms for CF7の[multiform]で
入力済みの内容を読み取り専用表示する画面。入力画面(.c-form-field)と同じ見た目に
揃えるため、入力欄の代わりにテキスト表示用の.c-form-field__valueを使う) ---------- */
.c-entry-content .c-form-field__value,
.editor-styles-wrapper .c-form-field__value {
display: block;
width: 100%;
padding: 14px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
/* [multiform]は改行文字を
に変換せずそのまま出力するため、textarea項目
(お問い合わせ内容等)の改行がここで潰れないようにする */
white-space: pre-line;
min-height: 1.6em;
}
/* 確認画面の「戻る／送信」2ボタン。[previous]はtype="button"で出力されるため、
通常の送信ボタン(.c-form-submit input[type="submit"])とは別に見た目を用意する */
.c-entry-content .c-form-submit--split,
.editor-styles-wrapper .c-form-submit--split {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.c-entry-content .c-form-submit--split p,
.editor-styles-wrapper .c-form-submit--split p {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-entry-content .c-form-submit--split input[type="submit"],
.editor-styles-wrapper .c-form-submit--split input[type="submit"] {
min-width: 200px;
}
.c-entry-content .c-form-submit--split .wpcf7-previous,
.editor-styles-wrapper .c-form-submit--split .wpcf7-previous {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--color-border-strong);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
font-family: inherit;
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
font-weight: bold;
border-radius: 999px;
padding: 14px clamp( 32px, calc( 26px + 1.875vw ), 48px );
min-width: 200px;
}
.c-entry-content .c-form-submit--split .wpcf7-previous:hover,
.editor-styles-wrapper .c-form-submit--split .wpcf7-previous:hover {
background: var(--color-bg-sub);
}
/* ---------- お問い合わせページ 上部リンクボタン ---------- */
.c-entry-content .c-inquire-links,
.editor-styles-wrapper .c-inquire-links {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 24px 0 40px;
}
.c-entry-content .c-inquire-links__btn,
.editor-styles-wrapper .c-inquire-links__btn {
display: inline-flex;
align-items: center;
padding: 8px 48px 8px 24px;
background: var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: 999px;
color: #FFF !important;
text-decoration: none !important;
position: relative;
transition: all 0.2s ease;
}
.c-entry-content .c-inquire-links__btn:hover,
.editor-styles-wrapper .c-inquire-links__btn:hover {
opacity: 0.875;
}
.c-entry-content .c-inquire-links__btn::after,
.editor-styles-wrapper .c-inquire-links__btn::after {
content: "";
display: block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M673-446.67H193.33q-14.33%200-23.83-9.5-9.5-9.5-9.5-23.83%200-14.33%209.5-23.83%209.5-9.5%2023.83-9.5H673L456.33-730q-10-10-9.83-23.33.17-13.34%2010.17-23.34%2010-9.66%2023.33-9.83%2013.33-.17%2023.33%209.83l273.34%20273.34q5.33%205.33%207.5%2011%202.16%205.66%202.16%2012.33t-2.16%2012.33q-2.17%205.67-7.5%2011L503.33-183.33q-9.66%209.66-23.16%209.66t-23.5-9.66q-10-10-10-23.5t10-23.5L673-446.67Z%22%2F%3E%3C%2Fsvg%3E') !important;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
right: 22px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* ---------- お問い合わせフォーム: ボタン型ラジオ選択 ---------- */
.c-entry-content .c-form-field--radio-tabs .wpcf7-radio,
.editor-styles-wrapper .c-form-field--radio-tabs .wpcf7-radio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
}
.c-entry-content .c-form-field--radio-tabs .wpcf7-list-item,
.editor-styles-wrapper .c-form-field--radio-tabs .wpcf7-list-item {
margin: 0;
}
.c-entry-content .c-form-field--radio-tabs .wpcf7-list-item label,
.editor-styles-wrapper .c-form-field--radio-tabs .wpcf7-list-item label {
justify-content: center;
padding: 14px 12px;
background: var(--color-border-strong);
border-radius: 4px;
color: #fff;
font-weight: bold;
transition: background 0.2s ease, color 0.2s ease;
}
.c-entry-content .c-form-field--radio-tabs input[type="radio"],
.editor-styles-wrapper .c-form-field--radio-tabs input[type="radio"] {
accent-color: var(--color-border-strong);
}
.c-entry-content .c-form-field--radio-tabs input[type="radio"]:checked,
.editor-styles-wrapper .c-form-field--radio-tabs input[type="radio"]:checked {
accent-color: #fff;
}
.c-entry-content .c-form-field--radio-tabs label:has(input:checked),
.editor-styles-wrapper .c-form-field--radio-tabs label:has(input:checked) {
background: var(--color-primary);
color: #fff;
}
/* ---------- お問い合わせフォーム: チェックボックスグリッド ---------- */
.c-entry-content .c-form-field--checkbox-grid .wpcf7-checkbox,
.editor-styles-wrapper .c-form-field--checkbox-grid .wpcf7-checkbox {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 16px;
}
@media (max-width: 600px) {
.c-entry-content .c-form-field--checkbox-grid .wpcf7-checkbox,
.editor-styles-wrapper .c-form-field--checkbox-grid .wpcf7-checkbox {
grid-template-columns: 1fr;
}
}
/* ---------- プライバシーポリシー/Cookieポリシー ---------- */
.c-entry-content .c-policy-content,
.editor-styles-wrapper .c-policy-content {
max-width: 1100px;
margin: 0 auto 64px;
}
.c-entry-content .c-policy-content h5 {
font-weight: normal;
margin-bottom: 0;
}
.c-entry-content .c-policy-content h5+p {
padding-left: 30px;
}
.c-entry-content .c-policy-content h5+ul,
.c-entry-content .c-policy-content h5+p+ul {
padding-left: 54px;
}
.c-entry-content .c-policy-content p+p,
.editor-styles-wrapper .c-policy-content p+p {
margin-top: 0;
}
.c-entry-content .c-policy-content .link-line,
.editor-styles-wrapper .c-policy-content .link-line {
margin-top: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.c-entry-content .c-policy-content .link-line a,
.editor-styles-wrapper .c-policy-content .link-line a {
display: inline-block;
margin-top: 12px;
}
.c-entry-content ul,
.editor-styles-wrapper ul {
list-style: disc;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
padding-inline-start: 24px;
}
.ez-toc-list.ez-toc-list-level-1,
.ez-toc-list .ez-toc-list-level-3,
.ez-toc-list .ez-toc-list-level-4,
.ez-toc-list .ez-toc-list-level-5 {
padding-inline-start: 0;
}
.c-entry-content ol,
.editor-styles-wrapper ol {
list-style: decimal;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
padding-inline-start: 24px;
}
.c-entry-content ol.kakko,
.editor-styles-wrapper ol.kakko {
padding-inline-start: 48px;
}
.c-entry-content ol.kakko li,
.editor-styles-wrapper ol.kakko li {
list-style-type:none;
counter-increment: number;
text-indent: -28px;
}
.c-entry-content ol.kakko li::before,
.editor-styles-wrapper ol.kakko li::before{
content: "(" counter(number) ") ";
}
@media (max-width: 768px) {
.c-entry-content .c-form-card,
.editor-styles-wrapper .c-form-card {
padding: 24px;
gap: 24px;
}
.c-entry-content .c-form-submit input[type="submit"],
.editor-styles-wrapper .c-form-submit input[type="submit"] {
width: 100%;
}
}
.c-entry-thumbnail {
margin: 32px 0;
border-radius: clamp( 6px, calc( 4px + 0.625vw ), 12px );
overflow: hidden;
}
.c-entry-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------- 記事一覧に戻るボタン ---------- */
.c-entry-back {
text-align: center;
margin-top: 56px;
}
/* ---------- FAQ: カテゴリジャンプナビ ---------- */
.c-faq-jump-nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 32px;
row-gap: 12px;
}
.c-faq-jump-nav__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
font-size: 18px;
font-weight: bold;
}
.c-faq-jump-nav__item span[aria-hidden] {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.c-faq-jump-nav__item span[aria-hidden] svg {
width: 80%;
height: 80%;
}
/* ---------- FAQ: キーワード検索(中央寄せの単独フォーム) ---------- */
.c-faq-search {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 48px;
flex-wrap: wrap;
}
.c-faq-search__label {
display: flex;
align-items: center;
gap: 16px;
font-weight: bold;
white-space: nowrap;
}
.c-faq-search__label::after {
content: "";
display: inline-block;
width: 32px;
height: 2px;
background: var(--color-border-strong);
}
.c-faq-search__form {
display: flex;
width: 100%;
max-width: 360px;
border: 1px solid var(--color-border);
border-radius: 999px;
overflow: hidden;
}
.c-faq-search__form input {
flex: 1;
padding: 12px 14px;
border-radius: 999px 0 0 999px;
}
.c-faq-search__form button {
padding: 0 16px;
border-radius: 999px;
}
.c-faq-search__form button span {
display: flex;
justify-content: center;
align-items: center;
filter: grayscale(1) brightness(2);
transition: all 0.2s ease;
}
.c-faq-search__form button:hover span {
filter: grayscale(0) brightness(1);
}
.c-faq-search__reset {
display: block;
font-size: 14px;
padding: 4px 12px;
background: var(--color-bg-lightgray);
border: solid 1px var(--color-border-strong);
border-radius: 999px;
color: var(--color-text-sub);
transition: all 0.2s;
}
.c-faq-search__reset:hover {
color: var(--color-text);
background: #FFF;
border: solid 1px var(--color-border-strong);
opacity: 1;
}
@media (max-width: 768px) {
.c-faq-search__reset {
margin: 12px auto 0;
}
}
/* ---------- FAQ: カテゴリセクション ---------- */
.c-faq-category {
margin-top: 56px;
}
.c-faq-category__title {
font-size: 22px;
font-weight: bold;
padding-bottom: 12px;
border-bottom: 3px solid var(--color-border);
position: relative;
}
.c-faq-category__title::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 96px;
height: 3px;
background: var(--color-primary);
}
/* ---------- FAQ: アコーディオン本体 ---------- */
.c-faq-list {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ---------- FAQ: キーワード検索での絞り込み(faq-search.js) ---------- */
.c-faq-item.is-search-hidden,
.c-faq-category.is-search-hidden {
display: none;
}
.c-faq-search__empty {
margin-top: 56px;
text-align: center;
color: var(--color-text-sub);
}
.c-faq-item {
border-radius: 24px;
background: #fff;
padding: 0 48px;
}
.c-faq-item__q {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 24px 0;
text-align: left;
}
.c-faq-item__mark {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
font-family: "Poppins", sans-serif;
}
.c-faq-item__mark-q {
color: var(--color-bg);
background: var(--gradient-primary);
}
.c-faq-item__mark-a {
color: var(--color-primary);
background: transparent;
}
.c-faq-item__question {
flex: 1;
font-size: 20px;
font-weight: bold;
line-height: var(--lh-heading);
}
.c-faq-item__icon {
flex-shrink: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.c-faq-item__icon::before,
.c-faq-item__icon::after {
content: "";
position: absolute;
background: var(--color-primary);
}
.c-faq-item__icon::before {
width: 30px;
height: 3px;
}
.c-faq-item__icon::after {
width: 3px;
height: 30px;
transition: transform 0.3s ease;
}
.c-faq-item.is-open .c-faq-item__icon::after {
transform: scaleY(0) rotateZ(90deg); /* 開いているときは「−」だけにする */
}
/* grid-template-rowsを0fr→1frでアニメーションさせ、実際のコンテンツの高さに
応じて滑らかに開閉する(max-height方式は大きめの固定値との差でカクつくため不採用)。
.c-faq-item__a-inner(grid-itemそのもの)にpaddingを付けると、
stretchで高さ0にされてもpadding分の高さが残って閉じきらないため、
paddingは内側の.c-faq-item__answer側に持たせている */
.c-faq-item__a {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
border-top: 0 solid var(--color-border);
transition: grid-template-rows 0.35s ease, opacity 0.25s ease, border-top-width 0.35s ease;
}
.c-faq-item__a-inner {
display: flex;
gap: 16px;
overflow: hidden;
}
.c-faq-item__a-inner .c-faq-item__mark {
margin-top: 24px;
}
.c-faq-item__a-inner .c-faq-item__answer {
padding: 24px 0 32px;
}
.c-faq-item.is-open .c-faq-item__a {
grid-template-rows: 1fr;
opacity: 1;
border-top-width: 2px;
}
.c-faq-item__answer {
flex: 1;
line-height: var(--lh-body);
}
@media (max-width: 900px) {
.c-faq-item {
padding: 0 24px;
}
.c-faq-jump-nav {
grid-template-columns: 1fr;
}
.c-faq-search {
justify-content: flex-start;
gap: 8px;
}
.c-faq-jump-nav__item span[aria-hidden] {
width: 26px;
height: 26px;
}
}
/* ---------- single-column: 本文下のCTAバナー(PC/SPで画像を出し分け) ---------- */
.c-column-cta {
margin-top: 56px;
}
.c-column-cta img {
width: 100%;
height: auto;
border-radius: 12px;
}
/* ---------- single-column: こちらの記事もチェック ---------- */
.c-related-pickup {
margin-top: 56px;
}
.c-related-pickup__label {
display: flex;
align-items: center;
width: fit-content;
text-align: center;
background: var(--gradient-primary);
color: var(--color-bg);
font-weight: bold;
font-size: 16px;
padding: 0.25rem 1rem 0.325rem;
margin: 0 auto -8px 32px;
border-radius: 3rem;
position: relative;
}
.c-related-pickup__label::after {
display: block;
content: "";
width: 0;
height: 0;
border-top: solid 0.75rem #0774d7;
border-right: solid 0.375rem transparent;
border-bottom: solid 0rem transparent;
border-left: solid 0.375rem transparent;
position: absolute;
left: 25%;
bottom: -0.75rem;
transform: skewX(-30deg);
}
/* ---------- single-column: cta ---------- */
.c-single-column-cta {
margin-top: 56px;
}
@media (min-width: 767px) {
.c-single-column-cta .c-cta {
padding: 24px 12px;
border-radius: 32px;
}
.c-single-column-cta .c-cta__buttons .c-btn {
font-size: 125%;
padding: 14px clamp( 20px, calc( 16px + 1.25vw ), 32px );
}
.c-single-column-cta .c-cta__note {
font-size: clamp( 11px, calc( 10px + 0.3125vw ), 14px );
}
.c-single-column-cta .c-cta__caption {
font-size: 80%;
}
}
/* ---------- single-column: 監修者情報 ---------- */
.c-supervisor-section {
margin-top: 56px;
}
.c-supervisor-section__title {
font-size: 22px;
font-weight: bold;
padding-bottom: 12px;
border-bottom: 3px solid var(--color-border);
position: relative;
}
.c-supervisor-section__title::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 96px;
height: 3px;
background: var(--color-primary);
}
.c-supervisor-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 24px;
grid-row-gap: 0px;
padding: clamp( 16px, calc( 10.666666666666668px + 1.6666666666666667vw ), 32px );
margin: clamp( 16px, calc( 10.666666666666668px + 1.6666666666666667vw ), 32px ) auto;
background: var(--color-bg-lightgray);
border-radius: 12px;
}
.c-supervisor-card__photo {
grid-area: 1 / 1 / 4 / 2;
flex-shrink: 0;
width: clamp( 96px, calc( 84px + 3.75vw ), 132px );
height: clamp( 96px, calc( 84px + 3.75vw ), 132px );
overflow: hidden;
}
.c-supervisor-card__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-supervisor-card__name {
grid-area: 1 / 2 / 2 / 3;
font-size: clamp( 20px, calc( 18.666666666666668px + 0.4166666666666667vw ), 24px );
font-weight: bold;
line-height: 1.25;
}
.c-supervisor-card__position {
grid-area: 2 / 2 / 3 / 3;
font-size: 14px;
margin-top: 4px;
}
.c-supervisor-card__bio {
grid-area: 3 / 2 / 4 / 3;
margin-top: 8px;
line-height: var(--lh-body);
}
@media (max-width: 768px) {
.c-supervisor-card__photo { grid-area: 1 / 1 / 3 / 2; }
.c-supervisor-card__name { grid-area: 1 / 2 / 2 / 3; }
.c-supervisor-card__position { grid-area: 2 / 2 / 3 / 3; }
.c-supervisor-card__bio { grid-area: 3 / 1 / 4 / 3; }
}
/* ---------- single-column: SNSシェアボタン ---------- */
.c-share-buttons {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 56px;
}
.c-share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-weight: bold;
font-size: 18px;
letter-spacing: 0;
}
.c-share-btn:hover {
opacity: 0.8;
}
.c-share-btn--x {
background: #000;
}
.c-share-btn--facebook {
background: #1877f2;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
}
.c-share-btn--line {
background: #06c755;
font-size: 10px;
}
/* ---------- single-column: 関連記事 ---------- */
.c-related-articles {
margin-top: 56px;
}
.c-related-articles__title {
font-size: 22px;
font-weight: bold;
padding-bottom: 12px;
border-bottom: 3px solid var(--color-border);
position: relative;
}
.c-related-articles__title::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 96px;
height: 3px;
background: var(--color-primary);
}
.c-related-articles__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
}
@media (max-width: 600px) {
.c-related-articles__grid {
grid-template-columns: 1fr;
}
}
/* ---------- 固定ページ「お申し込みフロー」(/guide) ----------
本文(投稿編集画面)に直接HTMLブロックとして書く運用のため、
.c-entry-content 側の汎用h2/p等のスタイルに勝てるよう
.c-entry-content/.editor-styles-wrapper を必ず前置する */
.c-entry-content .c-guide-intro,
.editor-styles-wrapper .c-guide-intro {
max-width: 720px;
line-height: var(--lh-body);
margin-bottom: 40px;
}
.c-entry-content .c-guide-nav,
.editor-styles-wrapper .c-guide-nav {
position: relative;
display: flex;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
margin-bottom: 56px;
}
.c-entry-content .c-guide-nav::before,
.editor-styles-wrapper .c-guide-nav::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 10px;
background: var(--color-primary);
}
.c-entry-content .c-guide-nav__item,
.editor-styles-wrapper .c-guide-nav__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 1;
text-align: center;
}
.c-entry-content .c-guide-nav__badge,
.editor-styles-wrapper .c-guide-nav__badge {
display: inline-flex;
align-items: baseline;
justify-content: center;
padding: 6px 16px;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.05em;
white-space: nowrap;
position: absolute;
top: -20px;
line-height: 1;
}
.c-entry-content .c-guide-nav__label,
.editor-styles-wrapper .c-guide-nav__label {
font-size: 20px;
font-weight: bold;
line-height: 1.4;
transition: color 0.2s ease;
}
.c-guide-nav__label small {
font-size: 20px;
}
.c-entry-content .c-guide-nav__item,
.editor-styles-wrapper .c-guide-nav__item {
background-color: var(--color-bg);
border-radius: 12px;
border: solid 2px var(--color-primary);
padding-block: 36px 32px;
text-decoration: none;
color: var(--color-text);
position: relative;
}
.c-guide-nav__item:hover {
opacity: 1;
color: var(--color-primary);
}
.c-entry-content .c-guide-nav__item:hover .c-guide-nav__label,
.editor-styles-wrapper .c-guide-nav__item:hover .c-guide-nav__label {
color: var(--color-primary);
}
/* お申し込みステップへのジャンプ+現在地表示を兼ねた、画面左側に浮かせる丸数字ナビ。
.c-guide-steps(カード側)と横並びにし、position:stickyで
このセクションをスクロールしている間だけ追従させる */
.c-entry-content .c-guide-steps-wrap,
.editor-styles-wrapper .c-guide-steps-wrap {
display: flex;
align-items: flex-start;
gap: 24px;
padding-top: clamp( 40px, calc( 32px + 2.5vw ), 64px );
}
.c-entry-content .c-guide-steps-nav-floating,
.editor-styles-wrapper .c-guide-steps-nav-floating {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp( 24px, calc( 12px + 3.75vw ), 60px );
flex-shrink: 0;
}
.c-entry-content .c-guide-steps-nav-floating::before,
.editor-styles-wrapper .c-guide-steps-nav-floating::before {
content: "";
position: absolute;
top: 20px;
bottom: 20px;
left: 50%;
width: 0;
border-right: dashed 2px var(--color-border);
transform: translateX(-50%);
z-index: 0;
}
.c-entry-content .c-guide-steps-nav-floating__item,
.editor-styles-wrapper .c-guide-steps-nav-floating__item {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: clamp( 40px, calc( 30px + 3.125vw ), 70px );
height: clamp( 40px, calc( 30px + 3.125vw ), 70px );
border-radius: 50%;
background: var(--color-bg);
color: var(--color-primary);
border: 1px solid var(--color-primary);
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: clamp( 20px, calc( 16px + 1.25vw ), 32px );
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
letter-spacing: 0;
}
.c-entry-content .c-guide-steps-nav-floating__item:hover,
.editor-styles-wrapper .c-guide-steps-nav-floating__item:hover,
.c-entry-content .c-guide-steps-nav-floating__item.is-active,
.editor-styles-wrapper .c-guide-steps-nav-floating__item.is-active {
background: var(--color-primary);
color: #fff;
border-color: transparent;
opacity: 1;
}
.c-entry-content .c-guide-steps,
.editor-styles-wrapper .c-guide-steps {
flex: 1;
min-width: 0;
}
.c-entry-content .c-guide-step,
.editor-styles-wrapper .c-guide-step {
scroll-margin-top: 120px;
}
.c-entry-content .c-guide-step + .c-guide-step,
.editor-styles-wrapper .c-guide-step + .c-guide-step {
margin-top: 32px;
}
.c-entry-content .c-guide-step__card,
.editor-styles-wrapper .c-guide-step__card {
flex: 1;
display: flex;
align-items: center;
gap: 24px;
background: var(--color-bg);
border-radius: 16px;
padding: clamp( 24px, calc( 21.333333333333332px + 0.8333333333333334vw ), 32px );
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
margin: 0;
}
.c-entry-content .c-guide-step__body,
.editor-styles-wrapper .c-guide-step__body {
flex: 1;
}
.c-entry-content .c-guide-step__heading,
.editor-styles-wrapper .c-guide-step__heading {
display: flex;
align-items: center;
background: none;
padding: 0;
border-radius: 0;
position: static;
font-size: clamp( 18px, calc( 16px + 0.625vw ), 24px );
font-weight: bold;
line-height: 1.5;
margin-top: 0;
margin-bottom: 12px;
}
.c-entry-content .c-guide-step__heading::before,
.editor-styles-wrapper .c-guide-step__heading::before {
content: none;
}
.c-entry-content .c-guide-step__number,
.editor-styles-wrapper .c-guide-step__number {
font-family: "Poppins", sans-serif;
font-size: clamp( 30px, calc( 24px + 1.875vw ), 48px );
font-weight: bold;
color: var(--color-primary);
margin-right: 12px;
}
.c-entry-content .c-guide-step__text,
.editor-styles-wrapper .c-guide-step__text {
line-height: var(--lh-body);
margin: 0;
}
.c-entry-content .c-guide-step__link,
.editor-styles-wrapper .c-guide-step__link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 10px 20px;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-weight: bold;
text-decoration: none;
}
.c-entry-content .c-guide-step__link-arrow,
.editor-styles-wrapper .c-guide-step__link-arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.c-entry-content .c-guide-step__payments,
.editor-styles-wrapper .c-guide-step__payments {
margin-top: 20px;
}
.c-entry-content .c-guide-step__payments-img,
.editor-styles-wrapper .c-guide-step__payments-img {
display: block;
width: 100%;
max-width: 360px;
height: auto;
}
.c-entry-content .c-guide-step__illustration,
.editor-styles-wrapper .c-guide-step__illustration {
flex-shrink: 0;
width: 180px;
margin: 0;
}
.c-entry-content .c-guide-step__illustration img,
.editor-styles-wrapper .c-guide-step__illustration img {
display: block;
width: 100%;
height: auto;
max-height: 200px;
}
.c-entry-content .c-guide-apply,
.editor-styles-wrapper .c-guide-apply {
text-align: center;
margin-top: 56px;
padding-bottom: clamp( 40px, calc( 32px + 2.5vw ), 64px );
}
.c-entry-content .c-guide-apply .c-btn,
.editor-styles-wrapper .c-guide-apply .c-btn {
width: 100%;
max-width: 560px;
font-size: clamp( 21px, calc( 18px + 0.9375vw ), 30px );
font-weight: bold;
}
.c-entry-content .c-guide-apply .c-btn .c-btn__icon,
.editor-styles-wrapper .c-guide-apply .c-btn .c-btn__icon {
width: clamp( 21px, calc( 18px + 0.9375vw ), 30px );
aspect-ratio: 3 / 4;
margin-right: 0.25rem;
}
@media (max-width: 768px) {
.c-entry-content .c-guide-steps-nav-floating,
.editor-styles-wrapper .c-guide-steps-nav-floating {
display: none;
}
.c-entry-content .c-guide-nav,
.editor-styles-wrapper .c-guide-nav {
display: block;
padding: 0;
}
.c-entry-content .c-guide-nav__item,
.editor-styles-wrapper .c-guide-nav__item {
gap: 0;
padding: 0 10px 0 74px;
height: 48px;
display: block;
text-align: left;
margin-bottom: 8px;
}
.c-entry-content .c-guide-nav__badge,
.editor-styles-wrapper .c-guide-nav__badge {
width: 64px;
height: 44px;
top: 0;
left: 0;
flex-direction: column;
align-items: center;
border-radius: 10px 0 0 10px;
font-size: 20px;
gap: 0;
padding: 0;
}
.c-entry-content .c-guide-nav__badge small,
.editor-styles-wrapper .c-guide-nav__badge small {
font-size: 12px;
}
.c-entry-content .c-guide-nav__label,
.editor-styles-wrapper .c-guide-nav__label {
font-size: 14px;
height: 100%;
display: flex;
align-items: center;
}
.c-entry-content .c-guide-nav::before,
.editor-styles-wrapper .c-guide-nav::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 10px;
height: calc(100% - 8px);
background: var(--color-primary);
}
.c-entry-content .c-guide-step__card,
.editor-styles-wrapper .c-guide-step__card {
flex-direction: column;
align-items: stretch;
padding: 20px;
}
.c-entry-content .c-guide-step__illustration,
.editor-styles-wrapper .c-guide-step__illustration {
width: 140px;
margin: 16px auto 0;
}
.c-entry-content .c-guide-step__illustration img,
.editor-styles-wrapper .c-guide-step__illustration img {
max-height: 160px;
}
.c-entry-content .c-guide-apply .c-btn,
.editor-styles-wrapper .c-guide-apply .c-btn {
width: 100%;
max-width: 400px;
}
}
/* ---------- 固定ページ「取引時確認書類について」(/documents) ---------- */
.c-entry-content .c-doc-wrap,
.editor-styles-wrapper .c-doc-wrap {
background: var(--color-bg-sub);
border-radius: 24px;
padding: clamp( 20px, calc( 0px + 6.25vw ), 80px );
margin-inline: auto;
}
.c-entry-content .c-doc-wrap__title,
.editor-styles-wrapper .c-doc-wrap__title {
text-align: center;
font-size: clamp( 24px, calc( 21.333333333333332px + 1.6666666666666667vw ), 32px );
font-weight: bold;
line-height: var(--lh-heading);
background: none;
padding: 0 16px 24px;
margin-top: 0;
margin-bottom: clamp( 24px, calc( 18px + 1.875vw ), 42px );
position: relative;
}
.c-entry-content .c-doc-wrap__title::after,
.editor-styles-wrapper .c-doc-wrap__title::after {
display: block;
width: 64px;
height: 4px;
background-color: var(--color-primary);
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 32px);
}
.c-entry-content .c-doc-wrap__caution,
.editor-styles-wrapper .c-doc-wrap__caution {
text-align: center;
color: var(--color-accent);
font-weight: bold;
font-size: 18px;
margin: 0 0 24px;
}
.c-entry-content .c-doc-category,
.editor-styles-wrapper .c-doc-category {
background: var(--color-bg);
border-radius: 12px;
overflow: hidden;
}
.c-entry-content .c-doc-category + .c-doc-category,
.editor-styles-wrapper .c-doc-category + .c-doc-category {
margin-top: 24px;
}
.c-entry-content .c-doc-category__header,
.editor-styles-wrapper .c-doc-category__header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px clamp( 19px, calc( 12px + 2.1875vw ), 40px );
color: #fff;
font-weight: bold;
font-size: clamp( 20px, calc( 18.666666666666668px + 0.4166666666666667vw ), 24px );
background: var(--color-primary-medium);
}
.c-entry-content .c-doc-category__header--individual,
.editor-styles-wrapper .c-doc-category__header--individual {
background: var(--color-primary-light);
}
.c-entry-content .c-doc-category__icon,
.editor-styles-wrapper .c-doc-category__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.c-entry-content .c-doc-category__body,
.editor-styles-wrapper .c-doc-category__body {
padding: clamp( 16px, calc( 12px + 2vw ), 24px ) clamp( 19px, calc( 12px + 2.1875vw ), 40px );
}
.c-entry-content .c-doc-category__note,
.editor-styles-wrapper .c-doc-category__note {
line-height: 1.8;
margin: 0 0 20px;
}
.c-entry-content .c-doc-flex,
.editor-styles-wrapper .c-doc-flex {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.c-entry-content .c-doc-grid--3col,
.editor-styles-wrapper .c-doc-grid--3col {
max-width: 664px;
justify-content: flex-start;
margin-inline: auto;
}
.c-entry-content .c-doc-item__label,
.editor-styles-wrapper .c-doc-item__label {
font-weight: bold;
margin: 0 0 6px;
line-height: 1.25;
}
.c-entry-content .c-doc-item__frame img,
.editor-styles-wrapper .c-doc-item__frame img {
display: block;
}
.c-entry-content .c-doc-item__frame img.doc,
.editor-styles-wrapper .c-doc-item__frame img.doc {
width: auto;
height: clamp( 222px, calc( 205px + 5.3125vw ), 273px );
}
.c-entry-content .c-doc-item__frame img.card,
.editor-styles-wrapper .c-doc-item__frame img.card {
width: auto;
height: clamp( 74px, calc( 57px + 5.3125vw ), 125px );
}
@media (max-width: 576px) {
.c-entry-content .c-doc-grid--3col .c-doc-item,
.editor-styles-wrapper .c-doc-grid--3col .c-doc-item{
width: calc(50% - 16px);
}
}
/* ---------- 固定ページ「会社概要」等の項目一覧テーブル(.c-info-table) ----------
社名・所在地・役員のような「ラベル+内容」の行を並べる汎用コンポーネント。
特定商取引法に基づく表記など、同じ体裁の他ページでも使い回せる */
.c-entry-content .c-info-table,
.editor-styles-wrapper .c-info-table {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.c-entry-content .c-info-table__row,
.editor-styles-wrapper .c-info-table__row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
padding-block: 32px 24px;
border-bottom: 3px solid var(--color-border);
position: relative;
align-items: center;
}
.c-entry-content .c-info-table__row::after,
.editor-styles-wrapper .c-info-table__row::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 200px;
height: 3px;
background: var(--color-primary);
}
.c-entry-content .c-info-table__row:first-child,
.editor-styles-wrapper .c-info-table__row:first-child {
padding-top: 0;
}
.c-entry-content .c-info-table__label,
.editor-styles-wrapper .c-info-table__label {
font-weight: bold;
color: var(--color-primary);
align-self: center;
}
.c-entry-content .c-info-table__value,
.editor-styles-wrapper .c-info-table__value {
line-height: var(--lh-body);
}
.c-entry-content .c-info-table__value p,
.editor-styles-wrapper .c-info-table__value p {
margin: 0;
}
.c-entry-content .c-info-table__value p + p,
.editor-styles-wrapper .c-info-table__value p + p {
margin-top: 4px;
}
/* 所在地: 複数拠点を点線区切りで並べる */
.c-entry-content .c-info-table__office + .c-info-table__office,
.editor-styles-wrapper .c-info-table__office + .c-info-table__office {
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed var(--color-border);
}
.c-entry-content .c-info-table__office-title,
.editor-styles-wrapper .c-info-table__office-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 8px !important;
}
.c-entry-content .c-info-table__office-title .u-tag,
.editor-styles-wrapper .c-info-table__office-title .u-tag {
border-radius: 4px;
}
.c-entry-content .c-info-table__office-map,
.editor-styles-wrapper .c-info-table__office-map {
font-size: 14px;
}
/* 役員 */
.c-entry-content .c-info-table__officers,
.editor-styles-wrapper .c-info-table__officers {
display: flex;
flex-direction: column;
line-height: 1.625;
gap: 0;
}
.c-entry-content .c-info-table__officers + .c-info-table__officers,
.editor-styles-wrapper .c-info-table__officers + .c-info-table__officers {
margin-top: 24px;
}
.c-entry-content .c-info-table__officers p,
.editor-styles-wrapper .c-info-table__officers p {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
}
.c-entry-content .c-info-table__officers p span:first-child,
.editor-styles-wrapper .c-info-table__officers p span:first-child {
min-width: 180px;
flex-shrink: 0;
}
/* 主要株主構成 */
.c-entry-content .c-info-table__shareholders,
.editor-styles-wrapper .c-info-table__shareholders {
margin: 0;
}
.c-entry-content .c-info-table__shareholders span,
.editor-styles-wrapper .c-info-table__shareholders span {
display: block;
}
.c-entry-content .c-info-table__note,
.editor-styles-wrapper .c-info-table__note {
display: block;
text-align: right;
margin-top: 8px;
}
.c-entry-content .c-company-certs,
.editor-styles-wrapper .c-company-certs {
text-align: center;
margin-top: 48px;
}
.c-entry-content .c-company-certs img,
.editor-styles-wrapper .c-company-certs img {
display: inline-block;
max-width: 400px;
width: 100%;
height: auto;
}
@media (max-width: 600px) {
.c-entry-content .c-info-table__row,
.editor-styles-wrapper .c-info-table__row {
grid-template-columns: 1fr;
gap: 8px;
padding-block: 20px;
}
}
/* ---------- 固定ページ「Cookieポリシー」の表組み ----------
.c-table-scroll(横スクロール用) + .c-scroll-hint(SPのみ横スクロールヒント画像、
common.jsではなくscroll-hint.jsが自動で処理)を併記して使う */
.c-entry-content .c-table-scroll,
.editor-styles-wrapper .c-table-scroll {
overflow-x: auto;
margin: 24px 0;
}
.c-entry-content .c-cookie-table,
.editor-styles-wrapper .c-cookie-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
}
.c-entry-content .c-cookie-table th,
.c-entry-content .c-cookie-table td,
.editor-styles-wrapper .c-cookie-table th,
.editor-styles-wrapper .c-cookie-table td {
border: 1px solid var(--color-border);
padding: 16px;
text-align: left;
vertical-align: top;
line-height: 1.6;
}
.c-entry-content .c-cookie-table th,
.editor-styles-wrapper .c-cookie-table th {
background: var(--color-primary);
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.c-entry-content .c-cookie-table td:first-child,
.editor-styles-wrapper .c-cookie-table td:first-child {
font-weight: bold;
background: var(--color-bg-sub);
text-align: center;
width: 24%;
}
.c-entry-content .c-cookie-table td:nth-child(2),
.editor-styles-wrapper .c-cookie-table td:nth-child(2) {
width: 26%;
max-width: 310px;
}
/* ---------- インターネットFAXとは(about) ---------- */
.c-entry-content .c-about-lead,
.editor-styles-wrapper .c-about-lead {
max-width: 1000px;
margin: 0 auto clamp( 25px, calc( 12px + 4.0625vw ), 64px );
text-align: center;
}
.c-entry-content h2.c-about-heading,
.editor-styles-wrapper h2.c-about-heading {
text-align: center;
font-size: clamp( 25px, calc( 20px + 1.5625vw ), 40px );
font-weight: bold;
line-height: var(--lh-heading);
margin-block: clamp( 8px, calc( 4px + 1.25vw ), 20px ) clamp( 24px, calc( 16px + 2.5vw ), 48px );
padding-bottom: 24px;
position: relative;
}
.c-entry-content h2.c-about-heading::after,
.editor-styles-wrapper h2.c-about-heading::after {
display: block;
width: clamp( 62px, calc( 52px + 3.125vw ), 92px );
height: 4px;
background-color: var(--color-primary);
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.c-entry-content .c-about-diagram,
.editor-styles-wrapper .c-about-diagram {
margin: 0 auto 32px;
}
.c-entry-content .c-about-diagram img,
.editor-styles-wrapper .c-about-diagram img {
display: block;
width: 100%;
height: auto;
}
.c-entry-content .c-about-compare-wrap,
.editor-styles-wrapper .c-about-compare-wrap {
background: #FFF;
border-radius: clamp( 20px, calc( 16px + 1.25vw ), 32px );
padding: clamp( 16px, calc( 0px + 5vw ), 64px );
width: calc(100% - 32px);
max-width: 1152px;
margin: 0 auto;
}
.c-entry-content .c-compare-table,
.editor-styles-wrapper .c-compare-table {
width: 100%;
max-width: 1040px;
min-width: 640px;
margin: 0 auto;
border-collapse: collapse;
font-size: clamp( 13px, calc( 12px + 0.3125vw ), 16px );
}
.c-entry-content .c-compare-table th,
.c-entry-content .c-compare-table td,
.editor-styles-wrapper .c-compare-table th,
.editor-styles-wrapper .c-compare-table td {
border: 1px solid var(--color-border);
padding: 14px 12px;
text-align: center;
vertical-align: middle;
line-height: 1.5;
}
.c-entry-content .c-compare-table thead th,
.editor-styles-wrapper .c-compare-table thead th {
background: var(--color-border-strong);
font-weight: bold;
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
}
.c-entry-content .c-compare-table thead .c-compare-table__blank,
.editor-styles-wrapper .c-compare-table thead .c-compare-table__blank {
background: none;
border: none;
}
.c-entry-content .c-compare-table tbody th,
.editor-styles-wrapper .c-compare-table tbody th {
background: var(--color-bg-sub);
font-weight: bold;
text-align: center;
color: var(--color-primary);
font-size: clamp( 16px, calc( 15.333333333333334px + 0.20833333333333334vw ), 18px );
}
.c-entry-content .c-compare-table .c-compare-table__highlight,
.editor-styles-wrapper .c-compare-table .c-compare-table__highlight {
font-weight: bold;
border-left: clamp( 3px, calc( 2.3333333333333335px + 0.20833333333333334vw ), 5px ) solid var(--color-primary);
border-right: clamp( 3px, calc( 2.3333333333333335px + 0.20833333333333334vw ), 5px ) solid var(--color-primary);
}
.c-entry-content .c-compare-table th.c-compare-table__highlight,
.editor-styles-wrapper .c-compare-table th.c-compare-table__highlight {
background: var(--color-primary);
color: #fff;
border-radius: 0;
}
.c-entry-content thead .c-compare-table__highlight,
.editor-styles-wrapper thead .c-compare-table__highlight {
background: var(--color-primary);
color: #fff;
border-top: clamp( 3px, calc( 2.3333333333333335px + 0.20833333333333334vw ), 5px ) solid var(--color-primary);
border-radius: 12px 12px 0 0;
}
.c-entry-content tbody tr:last-child .c-compare-table__highlight,
.editor-styles-wrapper tbody tr:last-child .c-compare-table__highlight {
border-bottom: clamp( 3px, calc( 2.3333333333333335px + 0.20833333333333334vw ), 5px ) solid var(--color-primary);
border-radius: 0 0 12px 12px;
}
.c-entry-content .c-chevron-down,
.editor-styles-wrapper .c-chevron-down {
display: block;
width: clamp( 56px, calc( 49.333333333333336px + 2.083333333333333vw ), 76px );
height: clamp( 40px, calc( 35.333333333333336px + 1.4583333333333333vw ), 54px );
margin: clamp( 28px, calc( 16px + 3.75vw ), 64px ) auto;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2277.877%22%20height%3D%2255.42%22%20viewBox%3D%220%200%2077.877%2055.42%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%220.947%22%20y1%3D%220.5%22%20x2%3D%220.18%22%20y2%3D%220.5%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230454d7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230688d7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22arrow%22%20d%3D%22M7309.712-7971.322a5.954%2C5.954%2C0%2C0%2C1%2C0-6.9l23.246-30.117-23.246-30.115a5.951%2C5.951%2C0%2C0%2C1%2C0-6.895%2C3.2%2C3.2%2C0%2C0%2C1%2C5.326%2C0l25.707%2C33.311a5.559%2C5.559%2C0%2C0%2C1%2C1.311%2C3.686%2C5.654%2C5.654%2C0%2C0%2C1-1.268%2C3.66l-25.75%2C33.367a3.384%2C3.384%2C0%2C0%2C1-2.662%2C1.426A3.385%2C3.385%2C0%2C0%2C1%2C7309.712-7971.322Zm-20.73%2C0a5.945%2C5.945%2C0%2C0%2C1-.006-6.9l23.248-30.117-23.248-30.115a5.942%2C5.942%2C0%2C0%2C1%2C.006-6.895%2C3.191%2C3.191%2C0%2C0%2C1%2C5.32%2C0l25.713%2C33.316a5.541%2C5.541%2C0%2C0%2C1%2C1.307%2C3.68%2C5.63%2C5.63%2C0%2C0%2C1-1.273%2C3.67l-25.746%2C33.357a3.376%2C3.376%2C0%2C0%2C1-2.662%2C1.426A3.377%2C3.377%2C0%2C0%2C1%2C7288.981-7971.322Z%22%20transform%3D%22translate(-7969.396%20-7287.135)%20rotate(90)%22%20stroke%3D%22rgba(0%2C0%2C0%2C0)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%20fill%3D%22url(%23linear-gradient)%22%2F%3E%3C%2Fsvg%3E');
background-size: contain;
background-repeat: no-repeat;
}
.c-entry-content .c-merit-box,
.editor-styles-wrapper .c-merit-box {
width: calc(100% - 32px);
max-width: 1000px;
margin: 0 auto clamp( 28px, calc( 16px + 3.75vw ), 64px );
padding: clamp( 24px, calc( 19.333333333333332px + 1.5555555555555556vw ), 40px );
background: #fff;
border: clamp( 5px, calc( 3.3333333333333335px + 0.5208333333333333vw ), 10px ) solid var(--color-primary);
border-radius: 24px;
}
.c-entry-content .c-merit-box__title,
.editor-styles-wrapper .c-merit-box__title {
text-align: center;
font-size: clamp( 20px, calc( 18.666666666666668px + 0.4166666666666667vw ), 24px );
font-weight: bold;
color: var(--color-primary);
margin-bottom: 20px;
}
.c-entry-content .c-merit-box__list,
.editor-styles-wrapper .c-merit-box__list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
}
.c-entry-content .c-merit-box__list li,
.editor-styles-wrapper .c-merit-box__list li {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.6;
font-weight: bold;
}
.c-entry-content .c-merit-box__list li::before,
.editor-styles-wrapper .c-merit-box__list li::before {
content: "";
display: block;
flex-shrink: 0;
width: 27px;
height: 27px;
margin-top: 0.15em;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%23195dd9%22%2F%3E%3Csvg%20x%3D%228%22%20y%3D%228%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E');
background-size: contain;
background-repeat: no-repeat;
}
.c-entry-content .c-scene-grid,
.editor-styles-wrapper .c-scene-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 32px;
margin-top: 24px;
}
.c-entry-content .c-scene-item,
.editor-styles-wrapper .c-scene-item {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
}
.c-entry-content .c-scene-item__img,
.editor-styles-wrapper .c-scene-item__img {
width: 160px;
height: 160px;
margin-bottom: -32px;
position: relative;
z-index: 1;
}
.c-entry-content .c-scene-item__card,
.editor-styles-wrapper .c-scene-item__card {
width: 100%;
background: var(--color-bg-sub);
border-radius: 16px;
padding: 48px 24px 28px;
text-align: center;
}
.c-entry-content .c-scene-item__title,
.editor-styles-wrapper .c-scene-item__title {
font-size: clamp( 18px, calc( 16px + 0.625vw ), 24px );
font-weight: bold;
line-height: 1.4;
margin-bottom: 12px;
}
.c-entry-content .c-scene-item__text,
.editor-styles-wrapper .c-scene-item__text {
line-height: var(--lh-body);
text-align: center;
letter-spacing: 0.04em;
}
.c-entry-content .c-entrust-grid,
.editor-styles-wrapper .c-entrust-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 24px;
margin: clamp( 32px, calc( 24px + 2.5vw ), 56px ) 0 clamp( 40px, calc( 32px + 2.5vw ), 64px );
}
.c-entry-content .c-entrust-item,
.editor-styles-wrapper .c-entrust-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(33.333% - 18px);
background: #fff;
border-top: 8px solid var(--color-primary);
border-radius: 8px;
padding: 32px 24px 28px;
text-align: center;
}
.c-entry-content .c-entrust-item__img,
.editor-styles-wrapper .c-entrust-item__img {
height: 100px;
width: auto;
margin-bottom: 20px;
}
.c-entry-content .c-entrust-item__title,
.editor-styles-wrapper .c-entrust-item__title {
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
font-weight: bold;
color: var(--color-primary);
line-height: 1.6;
}
.c-entry-content .c-entrust-item__text,
.editor-styles-wrapper .c-entrust-item__text {
font-size: 14px;
color: var(--color-text-sub);
line-height: var(--lh-body);
margin-top: 8px;
}
.c-entry-content .c-about-cta,
.editor-styles-wrapper .c-about-cta {
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.c-entry-content .c-compare-table th,
.c-entry-content .c-compare-table td,
.editor-styles-wrapper .c-compare-table th,
.editor-styles-wrapper .c-compare-table td {
padding: 8px 6px;
}
.c-entry-content .c-scene-item,
.editor-styles-wrapper .c-scene-item {
width: 100%;
max-width: 340px;
}
.c-entry-content .c-entrust-item,
.editor-styles-wrapper .c-entrust-item {
width: 100%;
max-width: 320px;
}
}
/* ---------- 機能・仕様(function4/マイフォルダ作成): フォルダ閲覧権限マトリクス ----------
列: 行見出し + 受信BOX/共有フォルダ/サブID①〜③用フォルダ + 補足吹き出し用のブラケット・注記列
行: 見出し行 + 管理者 + サブID①〜③ の計5行。同じグリッド内に注記(__note)・
ブラケット(__brace)も配置することで、行の高さに関わらず対象行の範囲とぴったり揃う */
.c-entry-content .c-permission-matrix-wrap,
.editor-styles-wrapper .c-permission-matrix-wrap {
overflow-x: auto;
}
.c-entry-content .c-permission-matrix,
.editor-styles-wrapper .c-permission-matrix {
display: grid;
grid-template-columns: 104px repeat(5, minmax(96px, 1fr)) 24px minmax(220px, 280px);
min-width: 940px;
max-width: 1000px;
margin: 0 auto;
}
.c-entry-content .c-permission-matrix__cell,
.editor-styles-wrapper .c-permission-matrix__cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 8px;
border: 1px solid var(--color-border);
line-height: 1.4;
font-weight: bold;
font-size: 15px;
}
.c-entry-content .c-permission-matrix__cell--corner,
.editor-styles-wrapper .c-permission-matrix__cell--corner {
border: none;
background: none;
}
.c-entry-content .c-permission-matrix__cell--head,
.editor-styles-wrapper .c-permission-matrix__cell--head {
background: var(--color-primary);
color: #fff;
}
.c-entry-content .c-permission-matrix__cell--subhead,
.editor-styles-wrapper .c-permission-matrix__cell--subhead {
background: var(--color-primary-light);
color: #fff;
}
.c-entry-content .c-permission-matrix__cell--admin-label,
.editor-styles-wrapper .c-permission-matrix__cell--admin-label {
background: var(--color-primary-dark);
color: #fff;
}
.c-entry-content .c-permission-matrix__cell--sub-label,
.editor-styles-wrapper .c-permission-matrix__cell--sub-label {
background: var(--color-bg-sub);
color: var(--color-primary);
}
.c-entry-content .c-permission-matrix__mark,
.editor-styles-wrapper .c-permission-matrix__mark {
background: #fff;
font-size: 22px;
}
.c-entry-content .c-permission-matrix__mark--ok,
.editor-styles-wrapper .c-permission-matrix__mark--ok {
color: var(--color-primary);
}
.c-entry-content .c-permission-matrix__mark--ng,
.editor-styles-wrapper .c-permission-matrix__mark--ng {
color: var(--color-border-strong);
}
.c-entry-content .c-permission-matrix__brace,
.editor-styles-wrapper .c-permission-matrix__brace {
border-top: 2px solid var(--color-border-strong);
border-right: 2px solid var(--color-border-strong);
border-bottom: 2px solid var(--color-border-strong);
border-radius: 0 8px 8px 0;
margin: 10px 8px 10px 2px;
}
.c-entry-content .c-permission-matrix__brace--admin,
.editor-styles-wrapper .c-permission-matrix__brace--admin {
grid-column: 7;
grid-row: 2;
}
.c-entry-content .c-permission-matrix__brace--sub,
.editor-styles-wrapper .c-permission-matrix__brace--sub {
grid-column: 7;
grid-row: 3 / 6;
}
.c-entry-content .c-permission-matrix__note,
.editor-styles-wrapper .c-permission-matrix__note {
display: flex;
align-items: center;
padding: 8px 20px;
border-radius: 8px;
font-weight: bold;
font-size: 14px;
line-height: 1.6;
}
.c-entry-content .c-permission-matrix__note--admin,
.editor-styles-wrapper .c-permission-matrix__note--admin {
grid-column: 8;
grid-row: 2;
background: var(--color-primary-dark);
color: #fff;
padding-block: 8px;
}
.c-entry-content .c-permission-matrix__note--sub,
.editor-styles-wrapper .c-permission-matrix__note--sub {
grid-column: 8;
grid-row: 3 / 6;
background: #fff;
border: 1px solid var(--color-primary-light);
color: var(--color-text);
margin-block: 8px;
}
/* ---------- 導入事例アーカイブ(archive-case_study.php): 導入企業ロゴ ---------- */
.c-case-trust {
text-align: center;
margin-bottom: clamp( 30px, calc( 24px + 1.875vw ), 48px );
}
.c-case-trust__badge {
display: block;
width: 440px;
text-align: center;
margin: 0 auto;
color: #fff;
font-weight: bold;
font-size: 20px;
position: relative;
}
.c-case-trust__badge span {
position: relative;
z-index: 1;
}
.c-case-trust__badge::before {
content: "";
background: var(--color-primary);
border-radius: 999px;
width: 440px;
height: 48px;
position: absolute;
bottom: 10px;
left: 0;
z-index: 0;
}
.c-case-trust__badge::after {
display: block;
content: "";
width: 0;
height: 0;
border-top: solid 0.75rem var(--color-primary);
border-right: solid 0.375rem transparent;
border-bottom: solid 0rem transparent;
border-left: solid 0.375rem transparent;
position: absolute;
left: calc(50% - 0.375rem);
bottom: calc(10px + -0.75rem);
}
.c-case-trust__badge strong {
font-size: 48px;
font-weight: bold;
font-family: "Poppins", sans-serif;
letter-spacing: 0;
margin: 0 4px;
-webkit-text-stroke: 12px var(--color-primary);
paint-order: stroke fill;
transform: translateY(2px);
}
.c-case-trust__text {
margin-top: 16px;
margin-inline: auto;
font-size: 30px;
font-weight: bold;
display: inline-block;
}
.c-case-trust__text span {
color: #000;
}
.c-logo-grid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: clamp( 16px, calc( 9.333333333333334px + 2.083333333333333vw ), 36px );
margin-top: 32px;
}
.c-logo-grid__item {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
background: #fff;
/*border: 1px solid var(--color-border);
padding: 12px 20px;*/
}
.c-logo-grid__item img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.c-logo-grid-cta {
display: flex;
justify-content: center;
margin-block: 48px;
}
/* ---------- 導入企業一覧(/case-study/logomark/): ロゴ+企業名の一覧 ---------- */
.c-logomark-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp( 16px, calc( 9.333333333333334px + 2.083333333333333vw ), 36px );
margin-top: 16px;
}
.c-logomark-grid-upper-caption {
text-align: right;
font-size: 14px;
}
.c-logomark-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.c-logomark-item__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 96px;
background: #fff;
border: 1px solid var(--color-border-strong);
padding: 12px 20px;
}
.c-logomark-item__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.c-logomark-item__logo .c-ph {
width: 100%;
aspect-ratio: auto;
}
.c-logomark-item__name {
font-weight: bold;
text-align: center;
line-height: 1.4;
}
/* ---------- 導入事例アーカイブ: セクション見出し(活用事例/活用シーン) ---------- */
.c-section-heading {
margin-block: 64px;
font-size: clamp( 24px, calc( 22px + 0.625vw ), 30px );
font-weight: bold;
padding-bottom: 12px;
border-bottom: 3px solid var(--color-border);
position: relative;
}
.c-section-heading::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 96px;
height: 3px;
background: var(--color-primary);
}
.c-case-load-more {
display: flex;
justify-content: center;
margin-top: 40px;
}
.c-case-load-more__btn {
border: none;
cursor: pointer;
}
@media (max-width: 768px) {
.c-case-trust__badge {
width: 308px;
font-size: 14px;
padding: 6px 12px;
}
.c-case-trust__badge::before {
width: 300px;
height: 36px;
}
.c-case-trust__badge strong {
font-size: 30px;
}
.c-case-trust__text {
font-size: 22px;
}
.c-logo-grid {
grid-template-columns: repeat(2, 1fr);
}
.c-logo-grid__item {
height: 56px;
}
.c-logomark-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---------- 導入事例詳細(single-case_study.php): サマリーカード ---------- */
.c-case-summary {
background: var(--color-bg-sub);
border-radius: 16px;
padding: 32px;
}
.c-case-summary__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.c-case-summary__body {
display: flex;
align-items: flex-start;
gap: 32px;
}
.c-case-summary__thumb {
width: 45%;
flex-shrink: 0;
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
}
.c-case-summary__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-case-summary__info {
flex: 1;
min-width: 0;
}
.c-case-summary__company {
margin-bottom: 8px;
}
.c-case-summary__title {
font-size: 22px;
font-weight: bold;
line-height: var(--lh-heading);
margin-bottom: 16px;
}
.c-case-summary__logo {
display: inline-flex;
align-items: center;
height: 50px;
margin-bottom: 16px;
}
.c-case-summary__logo img {
max-width: 160px;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.c-case-summary__meta {
display: flex;
flex-direction: column;
gap: 8px;
}
.c-case-summary__meta-row {
display: flex;
}
.c-case-summary__meta-row dt {
flex-shrink: 0;
font-weight: bold;
color: var(--color-primary);
}
.c-case-summary__meta-row dt::after {
content: "：";
}
.c-case-summary__meta-row dd {
margin: 0;
}
@media (max-width: 768px) {
.c-case-summary__body {
flex-direction: column;
}
.c-case-summary__thumb {
width: 100%;
}
}
/* ---------- 導入事例詳細: リード(メタボックス入力。h3/pの見た目は.c-entry-contentを流用) ---------- */
.c-case-lead {
margin-top: 32px;
}
/* ---------- 導入事例詳細: 課題と背景 / 導入のポイントと成果 ---------- */
.c-case-flow {
max-width: 1000px;
margin: clamp( 24px, calc( 12px + 3.75vw ), 60px ) auto;
display: flex;
flex-direction: column;
align-items: center;
}
.c-case-flow__box {
width: 100%;
border-radius: 24px;
overflow: hidden;
}
.c-case-flow__box--challenge {
background: var(--color-border-strong);
}
.c-case-flow__box--point {
background: var(--gradient-primary);
}
.c-case-flow__label {
margin: 0;
padding: 14px;
text-align: center;
font-weight: bold;
font-size: clamp( 20px, calc( 18.666666666666668px + 0.4166666666666667vw ), 24px );
}
.c-case-flow__box--challenge .c-case-flow__label {
color: #000;
}
.c-case-flow__box--point .c-case-flow__label {
color: #fff;
}
.c-case-flow__panel {
margin: 0 clamp( 10px, calc( 6.666666666666667px + 1.0416666666666665vw ), 20px ) clamp( 10px, calc( 6.666666666666667px + 1.0416666666666665vw ), 20px );
padding: 20px 24px;
background: #fff;
border-radius: 0 0 16px 16px;
}
.c-case-flow__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.c-case-flow__item {
display: flex;
align-items: center;
gap: 12px;
font-weight: bold;
line-height: 1.6;
color: var(--color-text);
}
.c-case-flow__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
}
.c-case-flow__arrow {
display: block;
width: clamp( 80px, calc( 68px + 5vw ), 119px );
height: auto;
margin: 24px auto;
}
/* ---------- 導入事例詳細: お客様情報 ---------- */
.c-case-customer-box {
background: var(--color-bg-sub);
border-radius: 16px;
padding: 32px clamp( 18px, calc( 4px + 4.375vw ), 60px );
margin: 48px 0;
}
.c-case-customer-box__title {
text-align: center;
font-size: clamp( 24px, calc( 21.333333333333332px + 1.6666666666666667vw ), 32px );
font-weight: bold;
line-height: var(--lh-heading);
background: none;
padding: 0 0 24px;
margin-top: 1rem;
margin-bottom: clamp( 24px, calc( 20px + 1.25vw ), 32px );
position: relative;
}
.c-case-customer-box__title::after {
display: block;
width: 64px;
height: 4px;
background-color: var(--color-primary);
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 32px);
}
.c-case-customer-box__table {
display: flex;
flex-direction: column;
margin: 0;
}
.c-case-customer-box__row {
display: flex;
gap: 16px;
padding: 16px 0;
}
.c-case-customer-box__row:not(:last-child) {
border-bottom: 3px solid var(--color-border);
position: relative;
}
.c-case-customer-box__row:not(:last-child)::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 144px;
height: 3px;
background: var(--color-primary);
}
.c-case-customer-box__row dt {
flex-shrink: 0;
width: 160px;
font-weight: bold;
color: var(--color-primary);
}
.c-case-customer-box__row dd {
flex: 1;
min-width: 0;
margin: 0;
line-height: var(--lh-body);
display: flex;
}
.c-case-customer-box__logo {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
background: #fff;
margin-left: auto;
vertical-align: middle;
}
.c-case-customer-box__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 768px) {
.c-case-customer-box__row {
flex-direction: column;
gap: 4px;
}
.c-case-customer-box__row dt {
width: auto;
}
}
/* ---------- 機能・仕様(function): MOVFAXの機能 ---------- */
.c-entry-content .c-function-grid,
.editor-styles-wrapper .c-function-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px;
}
.c-entry-content .c-function-card,
.editor-styles-wrapper .c-function-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-radius: 12px;
padding: 20px;
text-decoration: none !important;
color: inherit;
}
.c-entry-content .c-function-card:hover,
.editor-styles-wrapper .c-function-card:hover {
opacity: 1;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.c-entry-content .c-function-card__icon,
.editor-styles-wrapper .c-function-card__icon {
display: block;
width: 100%;
height: auto;
aspect-ratio: 226/120;
margin-bottom: 16px;
}
.c-entry-content .c-function-card__badge,
.editor-styles-wrapper .c-function-card__badge {
align-self: flex-start;
font-size: 16px;
padding: 2px 12px;
margin-bottom: 8px;
position: absolute;
top: 12px;
left: 0;
border-radius: 0 2rem 2rem 0;
}
.c-entry-content .c-function-card__title,
.editor-styles-wrapper .c-function-card__title {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
text-align: center;
margin-bottom: 8px;
}
.c-entry-content .c-function-card__text,
.editor-styles-wrapper .c-function-card__text {
line-height: var(--lh-body);
padding-bottom: 40px;
}
.c-entry-content .c-function-card__arrow,
.editor-styles-wrapper .c-function-card__arrow {
position: absolute;
right: 16px;
bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gradient-primary);
}
@media (max-width: 768px) {
.c-entry-content .c-function-grid,
.editor-styles-wrapper .c-function-grid {
grid-template-columns: 1fr;
}
/* SPは「画像+タイトル」を2カラムで横並びにし、本文だけ折り返して
全幅の1カラムで使うレイアウトにする(画像はfunction-fig-XX-sp.svgの
正方形版をpc-block/sp-blockで出し分け)。
.c-function-card__bodyはタイトル・本文をHTML上まとめているだけの
ラッパーなので、display:contentsで畳んで子要素を直接
.c-function-cardのグリッドアイテムとして配置する */
.c-entry-content .c-function-card,
.editor-styles-wrapper .c-function-card {
display: grid;
grid-template-columns: 108px 1fr;
column-gap: 16px;
row-gap: 8px;
align-items: center;
text-align: left;
padding-bottom: 56px;
}
/* バッジ(プレミアムプラン)は上端に重ねて表示するため、
バッジがあるカードだけ上部に余白を追加してタイトルとの重なりを防ぐ */
.c-entry-content .c-function-card:has(.c-function-card__badge),
.editor-styles-wrapper .c-function-card:has(.c-function-card__badge) {
padding-top: 48px;
}
.c-entry-content .c-function-card__icon,
.editor-styles-wrapper .c-function-card__icon {
grid-column: 1;
grid-row: 1;
width: 108px;
height: 108px;
margin-bottom: 0;
}
.c-entry-content .c-function-card__body,
.editor-styles-wrapper .c-function-card__body {
display: contents;
}
.c-entry-content .c-function-card__title,
.editor-styles-wrapper .c-function-card__title {
grid-column: 2;
grid-row: 1;
align-self: center;
text-align: left;
margin-bottom: 0;
}
.c-entry-content .c-function-card__text,
.editor-styles-wrapper .c-function-card__text {
grid-column: 1 / -1;
grid-row: 2;
padding-bottom: 0;
}
}
/* ---------- 機能・仕様(function): 製品仕様 ----------
table+rowspanではなくdiv+flexで組んでいる。
分類(基本/受信/送信)はPC/SPとも上部に横書きの全幅バーとして表示する。
項目行(ラベル+値)は、PCは横並び、SPのみ縦積み(項目名の下に値)にする */
.c-entry-content .c-spec-table-wrap,
.editor-styles-wrapper .c-spec-table-wrap {
margin-bottom: clamp( 32px, calc( 16px + 5vw ), 80px );
}
.c-entry-content .c-spec-table-group,
.editor-styles-wrapper .c-spec-table-group {
max-width: 1000px;
margin: 0 auto 24px;
}
.c-entry-content .c-spec-table-group:last-child,
.editor-styles-wrapper .c-spec-table-group:last-child {
margin-bottom: 0;
}
.c-entry-content .c-spec-table,
.editor-styles-wrapper .c-spec-table {
display: flex;
flex-direction: column;
align-items: stretch;
border: solid 1px var(--color-border);
}
.c-entry-content .c-spec-table__category,
.editor-styles-wrapper .c-spec-table__category {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #fff;
font-weight: bold;
text-align: center;
writing-mode: horizontal-tb;
letter-spacing: 0.15em;
padding: 14px;
border-bottom: solid 1px var(--color-border);
}
.c-entry-content .c-spec-table__rows,
.editor-styles-wrapper .c-spec-table__rows {
flex: 1;
min-width: 0;
}
.c-entry-content .c-spec-table__row,
.editor-styles-wrapper .c-spec-table__row {
display: flex;
border-bottom: 1px solid var(--color-border);
}
.c-entry-content .c-spec-table__row:last-child,
.editor-styles-wrapper .c-spec-table__row:last-child {
border-bottom: none;
}
.c-entry-content .c-spec-table__label,
.editor-styles-wrapper .c-spec-table__label {
display: flex;
align-items: center;
flex-shrink: 0;
width: 300px;
padding: 20px 24px;
color: #fff;
font-weight: bold;
}
.c-entry-content .c-spec-table__value,
.editor-styles-wrapper .c-spec-table__value {
flex: 1;
min-width: 0;
padding: 20px 24px;
background: #fff;
color: var(--color-text);
line-height: var(--lh-body);
}
.c-entry-content .c-spec-table--basic .c-spec-table__category,
.c-entry-content .c-spec-table--basic .c-spec-table__label,
.editor-styles-wrapper .c-spec-table--basic .c-spec-table__category,
.editor-styles-wrapper .c-spec-table--basic .c-spec-table__label {
background: #8BADE2;
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
}
.c-entry-content .c-spec-table--receive .c-spec-table__category,
.c-entry-content .c-spec-table--receive .c-spec-table__label,
.editor-styles-wrapper .c-spec-table--receive .c-spec-table__category,
.editor-styles-wrapper .c-spec-table--receive .c-spec-table__label {
background: #386BB9;
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
}
.c-entry-content .c-spec-table--send .c-spec-table__category,
.c-entry-content .c-spec-table--send .c-spec-table__label,
.editor-styles-wrapper .c-spec-table--send .c-spec-table__category,
.editor-styles-wrapper .c-spec-table--send .c-spec-table__label {
background: #123A78;
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
}
@media (max-width: 600px) {
.c-entry-content .c-spec-table__category,
.editor-styles-wrapper .c-spec-table__category {
letter-spacing: 0.05em;
}
.c-entry-content .c-spec-table__row,
.editor-styles-wrapper .c-spec-table__row {
flex-direction: column;
}
.c-entry-content .c-spec-table__label,
.editor-styles-wrapper .c-spec-table__label {
width: 100%;
padding: 14px 16px;
}
.c-entry-content .c-spec-table__value,
.editor-styles-wrapper .c-spec-table__value {
padding: 14px 16px;
}
.c-entry-content .c-spec-table__rows,
.editor-styles-wrapper .c-spec-table__rows {
margin-inline: auto;
}
}
/* ---------- 機能・仕様 配下の下階層ページ共通: カギ括弧風の引用ボックス ----------
「受信したFAXを印刷せずに編集・返信できるイメージ編集機能」のようなリード見出しで、
他の機能ページでも使い回す想定の共通コンポーネント */
.c-entry-content .c-bracket-quote,
.editor-styles-wrapper .c-bracket-quote {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 1000px;
margin: clamp( 32px, calc( 24px + 2.5vw ), 48px ) auto 24px;
padding: 20px 40px;
border: 1px dashed var(--color-border);
background: #fff;
}
.c-entry-content .c-bracket-quote::before,
.c-entry-content .c-bracket-quote::after,
.editor-styles-wrapper .c-bracket-quote::before,
.editor-styles-wrapper .c-bracket-quote::after {
content: "";
position: absolute;
width: clamp( 24px, calc( 14px + 3.125vw ), 54px );
height: clamp( 24px, calc( 14px + 3.125vw ), 54px );
border: clamp( 2.75px, calc( 2px + 0.234375vw ), 5px ) solid var(--color-primary);
}
.c-entry-content .c-bracket-quote::before,
.editor-styles-wrapper .c-bracket-quote::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.c-entry-content .c-bracket-quote::after,
.editor-styles-wrapper .c-bracket-quote::after {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.c-entry-content .c-bracket-quote__body,
.editor-styles-wrapper .c-bracket-quote__body {
text-align: center;
}
.c-entry-content .c-bracket-quote__lead,
.editor-styles-wrapper .c-bracket-quote__lead {
font-size: clamp( 18px, calc( 16.666666666666668px + 0.4166666666666667vw ), 22px );
font-weight: bold;
line-height: 1.4;
}
.c-entry-content .c-bracket-quote__lead strong,
.editor-styles-wrapper .c-bracket-quote__lead strong {
color: var(--color-primary);
font-weight: bold;
background: linear-gradient(transparent 60%, var(--color-highlight) 60%);
}
.c-entry-content .c-bracket-quote__title,
.editor-styles-wrapper .c-bracket-quote__title {
font-size: clamp( 18px, calc( 16.666666666666668px + 0.4166666666666667vw ), 22px );
font-weight: bold;
margin-top: 0;
}
.c-entry-content .c-bracket-quote__note,
.editor-styles-wrapper .c-bracket-quote__note {
font-size: 15px;
color: var(--color-text-sub);
margin-top: 0px;
}
.c-entry-content .c-bracket-quote__icon,
.editor-styles-wrapper .c-bracket-quote__icon {
flex-shrink: 0;
width: clamp( 70px, calc( 60px + 3.3333333333333335vw ), 100px );
height: auto;
position: absolute;
bottom: 20px;
right: 20px;
}
.c-entry-content .c-bracket-double,
.editor-styles-wrapper .c-bracket-double {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 1000px;
margin: clamp( 32px, calc( 24px + 2.5vw ), 48px ) auto 24px;
padding: 20px 40px;
background: #fff;
}
.c-entry-content .c-bracket-double::before,
.c-entry-content .c-bracket-double::after,
.editor-styles-wrapper .c-bracket-double::before,
.editor-styles-wrapper .c-bracket-double::after {
content: "";
position: absolute;
width: clamp( 15px, calc( 8px + 2.1875vw ), 36px );
height: 100%;
border: clamp( 6px, calc( 4px + 0.625vw ), 12px ) solid #AFCBFF;
}
.c-entry-content .c-bracket-double::before,
.editor-styles-wrapper .c-bracket-double::before {
top: -2px;
left: -2px;
border-right: none;
}
.c-entry-content .c-bracket-double::after,
.editor-styles-wrapper .c-bracket-double::after {
bottom: -2px;
right: -2px;
border-left: none;
}
/* ---------- 機能・仕様 配下の下階層ページ共通: 画面イメージ ---------- */
.c-entry-content .c-stamp-caption,
.editor-styles-wrapper .c-stamp-caption {
max-width: 1000px;
margin: 16px auto 0;
text-align: left;
line-height: var(--lh-body);
}
/* ---------- 機能・仕様 配下の下階層ページ共通: 番号付き手順リスト ---------- */
.c-entry-content .c-numbered-steps,
.editor-styles-wrapper .c-numbered-steps {
max-width: 1000px;
margin: 0 auto 24px;
background: var(--color-bg-sub);
border-radius: 16px;
padding: clamp( 15px, calc( 12px + 0.9375vw ), 24px ) 0;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
z-index: 1;
}
.c-entry-content .c-numbered-steps::after,
.editor-styles-wrapper .c-numbered-steps::after {
display: block;
content: "";
width: 0;
height: calc(100% - calc(clamp( 15px, calc( 12px + 0.9375vw ), 24px ) * 2) - 40px);
border-left: dashed 1px var(--color-border-strong);
position: absolute;
top: calc(clamp( 15px, calc( 12px + 0.9375vw ), 24px ) + 20px);
left: 20px;
z-index: 0;
}
.c-entry-content .c-numbered-steps__item,
.editor-styles-wrapper .c-numbered-steps__item {
display: flex;
align-items: center;
gap: 20px;
}
.c-entry-content .c-numbered-steps__num,
.editor-styles-wrapper .c-numbered-steps__num {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: 18px;
letter-spacing: 0;
position: relative;
z-index: 2;
}
.c-entry-content .c-numbered-steps__text,
.editor-styles-wrapper .c-numbered-steps__text {
line-height: var(--lh-body);
}
/* ---------- イメージ編集(スタンプ)機能: できること(4カード) ---------- */
.c-entry-content .c-stamp-feature-grid,
.editor-styles-wrapper .c-stamp-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1000px;
margin: 0 auto clamp( 48px, calc( 40px + 3.3333333333333335vw ), 72px );
}
.c-entry-content .c-stamp-feature-card,
.editor-styles-wrapper .c-stamp-feature-card {
background: var(--color-bg-sub);
border-radius: 12px;
padding: 24px;
}
.c-entry-content .c-stamp-feature-card__head,
.editor-styles-wrapper .c-stamp-feature-card__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.c-entry-content .c-stamp-feature-card__icon,
.editor-styles-wrapper .c-stamp-feature-card__icon {
flex-shrink: 0;
width: clamp( 40px, calc( 32px + 2.5vw ), 64px );
height: clamp( 40px, calc( 32px + 2.5vw ), 64px );
}
.c-entry-content .c-stamp-feature-card__title,
.editor-styles-wrapper .c-stamp-feature-card__title {
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
font-weight: bold;
}
.c-entry-content .c-stamp-feature-card__text,
.editor-styles-wrapper .c-stamp-feature-card__text {
line-height: var(--lh-body);
}
@media (max-width: 768px) {
.c-entry-content .c-bracket-quote,
.editor-styles-wrapper .c-bracket-quote {
padding: 16px 16px;
gap: 0;
}
.c-entry-content .c-bracket-quote__body,
.editor-styles-wrapper .c-bracket-quote__body {
text-align: left;
}
.c-entry-content .c-stamp-feature-grid,
.editor-styles-wrapper .c-stamp-feature-grid {
grid-template-columns: 1fr;
}
.c-entry-content .c-bracket-quote__icon,
.editor-styles-wrapper .c-bracket-quote__icon {
position: relative;
bottom: auto;
right: 0;
}
}
/* ---------- イメージ編集(スタンプ)機能: メリット(4カード、水色の帯) ---------- */
.c-entry-content .c-stamp-merit-grid,
.editor-styles-wrapper .c-stamp-merit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 0 auto;
}
.c-entry-content .c-stamp-merit-card,
.editor-styles-wrapper .c-stamp-merit-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border-radius: 16px;
padding: 28px 12px 28px 38px;
}
/* 01〜04の数字は疑似要素にして、テキストの背後に薄く表示する装飾にする
(data-num属性の値をそのまま表示するため、マークアップ側にdata-num="01"等を付与する) */
.c-entry-content .c-stamp-merit-card::before,
.editor-styles-wrapper .c-stamp-merit-card::before {
content: attr(data-num);
position: absolute;
top: -0.125em;
left: -4px;
font-family: "Poppins", sans-serif;
font-size: 64px;
font-weight: bold;
line-height: 1;
letter-spacing: 0;
color: rgba(25, 93, 217, 0.12);
z-index: 0;
}
.c-entry-content .c-stamp-merit-card__body,
.editor-styles-wrapper .c-stamp-merit-card__body {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.c-entry-content .c-stamp-merit-card__title,
.editor-styles-wrapper .c-stamp-merit-card__title {
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
font-weight: bold;
color: var(--color-primary);
line-height: 1.5;
margin-bottom: 8px;
}
.c-entry-content .c-stamp-merit-card__text,
.editor-styles-wrapper .c-stamp-merit-card__text {
line-height: var(--lh-body);
}
.c-entry-content .c-stamp-merit-card__img,
.editor-styles-wrapper .c-stamp-merit-card__img {
position: relative;
z-index: 1;
flex-shrink: 0;
max-width: 150px;
max-height: 200px;
height: auto;
}
@media (max-width: 768px) {
.c-entry-content .c-stamp-merit-grid,
.editor-styles-wrapper .c-stamp-merit-grid {
grid-template-columns: 1fr;
}
.c-entry-content .c-stamp-merit-card,
.editor-styles-wrapper .c-stamp-merit-card {
display: flex;
flex-direction: column-reverse;
gap: 16px;
background: #fff;
border-radius: 16px;
padding: 28px 24px;
}
}
/* ---------- イメージ編集(スタンプ)機能: その他機能はこちら(6リンク) ---------- */
.c-entry-content .c-function-link-grid,
.editor-styles-wrapper .c-function-link-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin: 0 auto clamp( 60px, calc( 48px + 3.75vw ), 96px );
}
.c-entry-content .c-function-link,
.editor-styles-wrapper .c-function-link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 4px solid var(--color-primary);
border-radius: 8px;
padding: 12px 48px 12px 108px;
text-decoration: none !important;
color: inherit;
position: relative;
height: clamp( 76px, calc( 68px + 2.5vw ), 100px );
}
.c-entry-content .c-function-link:hover,
.editor-styles-wrapper .c-function-link:hover {
opacity: 1;
background: var(--color-bg-sub);
}
.c-entry-content .c-function-link__icon,
.editor-styles-wrapper .c-function-link__icon {
flex-shrink: 0;
max-width: 80px;
max-height: 108px;
height: auto;
position: absolute;
top: auto;
left: 16px;
transform: translateY(-12px);
}
.c-entry-content .c-function-link__text,
.editor-styles-wrapper .c-function-link__text {
font-size: clamp( 18px, calc( 16px + 0.625vw ), 24px );
font-weight: bold;
line-height: 1.4;
color: var(--color-primary);
}
.c-entry-content .c-function-link__arrow,
.editor-styles-wrapper .c-function-link__arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gradient-primary);
}
@media (max-width: 922px) {
.c-entry-content .c-function-link-grid,
.editor-styles-wrapper .c-function-link-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.c-entry-content .c-function-link-grid,
.editor-styles-wrapper .c-function-link-grid {
grid-template-columns: 1fr;
}
}
/* ---------- 料金プランページ: 料金比較表(c-plan-panel) ----------
トップページ(front-page.css)の料金プランと同じ見た目を、固定ページの
.c-entry-content配下でも使えるようスコープして再掲。
トップページ版に加えて、機能比較用の項目名だけの行(c-plan-cell--check)と
対応/非対応を表す丸チェックアイコン(c-plan__check)・ダッシュ(c-plan__dash)を追加している */
.c-entry-content .c-plan-panel,
.editor-styles-wrapper .c-plan-panel {
display: grid;
grid-template-columns: 240px 1fr 1fr;
max-width: 1200px;
min-width: 1000px;
margin: 24px auto;
border-bottom: solid 1px var(--color-border);
}
.c-entry-content .c-plan-panel-wrap,
.editor-styles-wrapper .c-plan-panel-wrap {
overflow-x: auto;
}
.c-entry-content .c-plan-labels__item,
.editor-styles-wrapper .c-plan-labels__item {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-sub);
color: var(--color-primary);
font-weight: bold;
font-size: 18px;
line-height: var(--lh-heading);
padding: 12px 16px;
border-top: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
border-left: 1px solid var(--color-border);
list-style: none;
text-align: center;
margin: 0;
}
.c-entry-content .c-plan-labels__item a,
.editor-styles-wrapper .c-plan-labels__item a {
font-weight: bold;
}
.c-entry-content .c-plan-labels__item--spacer,
.editor-styles-wrapper .c-plan-labels__item--spacer {
background: transparent;
border: none;
}
.c-entry-content .c-plan-labels__item--last,
.editor-styles-wrapper .c-plan-labels__item--last {
border-bottom: 1px solid var(--color-border);
}
.c-entry-content .c-plan-cell,
.editor-styles-wrapper .c-plan-cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 24px;
border-top: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
background: var(--color-bg);
font-weight: bold;
}
.c-entry-content .c-plan-cell--merged,
.editor-styles-wrapper .c-plan-cell--merged {
grid-column: 2 / span 2;
}
.c-entry-content .c-plan-cell--header,
.editor-styles-wrapper .c-plan-cell--header {
padding: 24px 20px;
color: #fff;
border-top: none;
position: relative;
flex-direction: column;
}
.c-entry-content .c-plan-cell--header.c-plan-cell--standard,
.editor-styles-wrapper .c-plan-cell--header.c-plan-cell--standard {
background: var(--color-primary-light);
}
.c-entry-content .c-plan-cell--header.c-plan-cell--premium,
.editor-styles-wrapper .c-plan-cell--header.c-plan-cell--premium {
background: var(--color-primary-medium);
}
.c-entry-content .c-plan-cell--last,
.editor-styles-wrapper .c-plan-cell--last {
border-bottom: 1px solid var(--color-border);
}
.c-entry-content .c-plan__ribbon,
.editor-styles-wrapper .c-plan__ribbon {
position: absolute;
top: -24px;
left: -24px;
width: 90px;
height: 90px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.25;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
letter-spacing: 0;
transform: rotateZ(-15deg);
z-index: 1;
}
.c-entry-content .c-plan__catch,
.editor-styles-wrapper .c-plan__catch {
font-size: 16px;
margin-bottom: 4px;
font-weight: bold;
position: relative;
}
.c-entry-content .c-plan__catch::before,
.c-entry-content .c-plan__catch::after,
.editor-styles-wrapper .c-plan__catch::before,
.editor-styles-wrapper .c-plan__catch::after {
display: block;
width: 2px;
height: 90%;
background: var(--color-bg);
content: "";
position: absolute;
}
.c-entry-content .c-plan__catch::before,
.editor-styles-wrapper .c-plan__catch::before {
top: 2px;
left: -10px;
transform: rotateZ(-15deg);
}
.c-entry-content .c-plan__catch::after,
.editor-styles-wrapper .c-plan__catch::after {
top: 2px;
right: -4px;
transform: rotateZ(15deg);
}
.c-entry-content .c-plan__name,
.editor-styles-wrapper .c-plan__name {
font-size: 28px;
font-weight: bold;
line-height: 1.125;
}
.c-entry-content .c-plan__row-label,
.editor-styles-wrapper .c-plan__row-label {
display: none;
}
.c-entry-content .c-plan__value,
.editor-styles-wrapper .c-plan__value {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 2px 2px;
font-weight: bold;
font-size: 18px;
}
.c-entry-content .c-plan__value--sm,
.editor-styles-wrapper .c-plan__value--sm {
font-weight: bold;
font-size: 18px;
}
.c-entry-content .c-plan__num,
.editor-styles-wrapper .c-plan__num {
font-size: 26px;
font-weight: 900;
line-height: 1.125;
}
.c-entry-content .c-plan__num--price,
.editor-styles-wrapper .c-plan__num--price {
font-size: 32px;
}
.c-entry-content .c-plan__num--accent,
.editor-styles-wrapper .c-plan__num--accent {
color: var(--color-accent);
}
.c-entry-content .c-plan__unit,
.editor-styles-wrapper .c-plan__unit {
font-weight: 800;
font-size: 18px;
}
.c-entry-content .c-plan__note,
.editor-styles-wrapper .c-plan__note {
font-size: 13px;
font-weight: 500;
color: var(--color-text-sub);
}
.c-entry-content .c-plan__checklist,
.editor-styles-wrapper .c-plan__checklist {
display: flex;
flex-direction: column;
gap: 8px;
color: var(--color-text);
text-align: left;
}
.c-entry-content .c-plan__checklist li,
.editor-styles-wrapper .c-plan__checklist li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.375;
font-weight: 600;
}
.c-entry-content .c-plan__checklist li::before,
.editor-styles-wrapper .c-plan__checklist li::before {
content: "";
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 1px;
}
.c-entry-content .c-plan-cell--standard .c-plan__checklist li::before,
.editor-styles-wrapper .c-plan-cell--standard .c-plan__checklist li::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235F96FC%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E');
}
.c-entry-content .c-plan-cell--premium .c-plan__checklist li::before,
.editor-styles-wrapper .c-plan-cell--premium .c-plan__checklist li::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231754C4%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E');
}
/* 機能比較行(対応/非対応)専用: 丸チェックアイコンとダッシュ */
.c-entry-content .c-plan-cell--check,
.editor-styles-wrapper .c-plan-cell--check {
gap: 4px;
}
.c-entry-content .c-plan__check,
.editor-styles-wrapper .c-plan__check {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--color-primary-light);
flex-shrink: 0;
}
.c-entry-content .c-plan-cell--premium .c-plan__check,
.editor-styles-wrapper .c-plan-cell--premium .c-plan__check {
background: var(--color-primary-medium);
}
.c-entry-content .c-plan__check svg,
.editor-styles-wrapper .c-plan__check svg {
width: 24px;
height: 24px;
}
.c-entry-content .c-plan__dash,
.editor-styles-wrapper .c-plan__dash {
color: var(--color-border-strong);
font-weight: bold;
font-size: 20px;
}
@media (max-width: 768px) {
.c-entry-content .c-plan-panel,
.editor-styles-wrapper .c-plan-panel {
grid-template-columns: 124px 1fr 1fr;
min-width: 640px;
margin: 32px auto 0;
}
.c-entry-content .c-plan-labels__item,
.editor-styles-wrapper .c-plan-labels__item {
font-size: 14px;
padding: 8px;
}
.c-entry-content .c-plan__catch,
.editor-styles-wrapper .c-plan__catch {
font-size: 13px;
line-height: 1.25;
}
.c-entry-content .c-plan__num--price,
.editor-styles-wrapper .c-plan__num--price {
font-size: 24px;
}
.c-entry-content .c-plan-cell,
.editor-styles-wrapper .c-plan-cell {
padding: 8px 12px;
}
.c-entry-content .c-plan__ribbon,
.editor-styles-wrapper .c-plan__ribbon {
left: -36px;
width: 70px;
height: 70px;
font-size: 13px;
}
.c-entry-content .c-plan__name,
.editor-styles-wrapper .c-plan__name {
font-size: 16px;
}
}
/* ---------- 料金プランページ: 市外局番オプション料金 ---------- */
.c-entry-content .c-price-option,
.editor-styles-wrapper .c-price-option {
max-width: 1000px;
margin: clamp( 40px, calc( 32px + 2.5vw ), 64px ) auto;
padding: 32px 64px;
background: var(--color-bg);
border: 5px solid var(--color-primary-light);
border-radius: 16px;
text-align: center;
}
.c-entry-content .c-price-option__title,
.editor-styles-wrapper .c-price-option__title {
font-size: clamp( 22px, calc( 19.333333333333332px + 0.8333333333333334vw ), 30px );
font-weight: bold;
color: var(--color-primary);
}
.c-entry-content .c-price-option__lead,
.editor-styles-wrapper .c-price-option__lead {
margin-top: 8px;
}
.c-entry-content .c-price-option__grid,
.editor-styles-wrapper .c-price-option__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 16px;
margin-top: 24px;
}
.c-entry-content .c-price-option__card,
.editor-styles-wrapper .c-price-option__card {
background: var(--color-bg-sub);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.c-entry-content .c-price-option__area,
.editor-styles-wrapper .c-price-option__area {
display: block;
background: var(--color-primary);
color: #fff;
font-weight: bold;
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
padding: 4px 16px;
border-radius: 16px 16px 0 0;
}
.c-entry-content .c-price-option__code,
.editor-styles-wrapper .c-price-option__code {
margin-top: 12px;
font-family: "Poppins", sans-serif;
font-size: clamp( 36px, calc( 31.333333333333332px + 1.4583333333333333vw ), 50px );
font-weight: bold;
line-height: 1;
color: var(--color-primary);
letter-spacing: 0;
}
.c-entry-content .c-price-option__price,
.editor-styles-wrapper .c-price-option__price {
margin: 4px auto;
font-weight: bold;
}
.c-entry-content .c-price-option__price strong,
.editor-styles-wrapper .c-price-option__price strong {
color: var(--color-primary);
background: none;
font-size: 110%;
}
.c-entry-content .c-price-option__note,
.editor-styles-wrapper .c-price-option__note {
margin-top: 16px;
font-size: 15px;
color: var(--color-text-sub);
}
@media (max-width: 600px) {
.c-entry-content .c-price-option,
.editor-styles-wrapper .c-price-option {
padding: 16px;
}
.c-entry-content .c-price-option__grid,
.editor-styles-wrapper .c-price-option__grid {
grid-template-columns: 1fr;
}
}
/* ---------- 料金プランページ: 月額料金のシミュレーション例(3カード) ---------- */
.c-entry-content .c-sim-example-grid,
.editor-styles-wrapper .c-sim-example-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1000px;
margin: 40px auto 0;
}
.c-entry-content .c-sim-example-card,
.editor-styles-wrapper .c-sim-example-card {
background: var(--color-bg);
border-radius: 16px;
padding: 0 0 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.c-entry-content .c-sim-example-card__plan,
.editor-styles-wrapper .c-sim-example-card__plan {
text-align: center;
background: var(--color-primary-light);
color: #fff;
font-weight: bold;
font-size: clamp( 18px, calc( 17.333333333333332px + 0.20833333333333334vw ), 20px );
padding: 8px;
}
.c-entry-content .c-sim-example-card--premium .c-sim-example-card__plan,
.editor-styles-wrapper .c-sim-example-card--premium .c-sim-example-card__plan {
background: var(--color-primary-medium);
}
.c-entry-content .c-sim-example-card__conditions,
.editor-styles-wrapper .c-sim-example-card__conditions {
margin: 20px 20px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.c-entry-content .c-sim-example-card__conditions li,
.editor-styles-wrapper .c-sim-example-card__conditions li {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
}
.c-entry-content .c-sim-example-card__icon,
.editor-styles-wrapper .c-sim-example-card__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
}
.c-entry-content .c-sim-example-card__icon svg,
.editor-styles-wrapper .c-sim-example-card__icon svg {
width: 100%;
height: 100%;
}
.c-entry-content .c-sim-example-card__breakdown,
.editor-styles-wrapper .c-sim-example-card__breakdown {
margin: 16px 20px 0;
padding-top: 16px;
border-top: 1px dashed var(--color-border);
display: flex;
flex-direction: column;
gap: 6px;
}
.c-entry-content .c-sim-example-card__breakdown li,
.editor-styles-wrapper .c-sim-example-card__breakdown li {
color: var(--color-text);
}
.c-entry-content .c-sim-example-card__total,
.editor-styles-wrapper .c-sim-example-card__total {
margin: 16px 20px 0;
text-align: center;
}
.c-entry-content .c-sim-example-card__total-num,
.editor-styles-wrapper .c-sim-example-card__total-num {
font-size: clamp( 40px, calc( 38.333333333333336px + 0.5208333333333333vw ), 45px );
}
.c-entry-content .c-sim-example-card__total-num .equal,
.editor-styles-wrapper .c-sim-example-card__total-num .equal {
color: var(--color-border-strong);
font-weight: normal;
}
.c-entry-content .c-sim-example-card__total-num .yen,
.editor-styles-wrapper .c-sim-example-card__total-num .yen {
color: #000;
font-weight: 900;
}
.c-entry-content .c-sim-example-card__total-num strong,
.editor-styles-wrapper .c-sim-example-card__total-num strong {
font-weight: 900;
color: var(--color-accent);
background: linear-gradient(transparent 55%, var(--color-highlight) 55%);
}
.c-entry-content .c-sim-example-card__total-note,
.editor-styles-wrapper .c-sim-example-card__total-note {
display: block;
font-size: 14px;
color: var(--color-text-sub);
font-weight: normal;
}
@media (max-width: 900px) {
.c-entry-content .c-sim-example-grid,
.editor-styles-wrapper .c-sim-example-grid {
grid-template-columns: 1fr;
}
}
/* ---------- 料金プランページ: 月額料金のシミュレーター(JS計算) ---------- */
.c-entry-content .c-simulator,
.editor-styles-wrapper .c-simulator {
margin: 56px auto 0;
position: relative;
}
.c-entry-content .c-simulator__title,
.editor-styles-wrapper .c-simulator__title {
position: relative;
z-index: 2;
width: fit-content;
margin: 0 auto -28px;
background: var(--color-primary);
color: #fff;
font-weight: bold;
font-size: clamp( 20px, calc( 16.666666666666668px + 1.0416666666666665vw ), 30px );
padding: 8px 24px;
border-radius: 999px;
text-align: center;
}
.c-entry-content .c-simulator__box,
.editor-styles-wrapper .c-simulator__box {
background: var(--color-bg);
border-radius: 24px;
padding: 56px 40px 40px;
}
.c-entry-content .c-simulator__box+.c-chevron-down,
.editor-styles-wrapper .c-simulator__box+.c-chevron-down {
margin: clamp( 14px, calc( 12px + 0.625vw ), 20px ) auto;
}
.c-entry-content .c-simulator__lead,
.editor-styles-wrapper .c-simulator__lead {
text-align: center;
font-size: 14px;
color: var(--color-text-sub);
margin-bottom: 24px;
}
.c-entry-content .c-simulator__form,
.editor-styles-wrapper .c-simulator__form {
margin-bottom: 32px;
}
.c-entry-content .c-simulator__fields,
.editor-styles-wrapper .c-simulator__fields {
display: flex;
align-items: center;
gap: 32px;
}
.c-entry-content .c-simulator__usage-grid,
.editor-styles-wrapper .c-simulator__usage-grid {
flex: 1;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 32px;
}
.c-entry-content .c-simulator__multiply,
.editor-styles-wrapper .c-simulator__multiply {
flex-shrink: 0;
font-size: 32px;
font-weight: bold;
color: var(--color-text);
}
.c-entry-content .c-simulator__lines-field,
.editor-styles-wrapper .c-simulator__lines-field {
flex-shrink: 0;
width: 220px;
}
.c-entry-content .c-simulator__field,
.editor-styles-wrapper .c-simulator__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.c-entry-content .c-simulator__field label,
.editor-styles-wrapper .c-simulator__field label {
display: flex;
align-items: center;
gap: 6px;
font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
font-weight: bold;
color: var(--color-text);
}
.c-entry-content .c-simulator__field label::before,
.editor-styles-wrapper .c-simulator__field label::before {
content: "";
flex-shrink: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-primary);
}
.c-entry-content .c-simulator__field select,
.c-entry-content .c-simulator__field input,
.editor-styles-wrapper .c-simulator__field select,
.editor-styles-wrapper .c-simulator__field input {
width: 100%;
padding: 10px 36px 10px 14px;
border: none;
border-radius: 8px;
background: var(--color-bg);
font-size: 15px;
color: var(--color-text);
border: solid 1px var(--color-border);
}
.c-entry-content .c-simulator__field select,
.editor-styles-wrapper .c-simulator__field select {
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23195dd9%22%3E%3Cpath%20d%3D%22M480-345%20240-585l56-56%20184%20184%20184-184%2056%2056-240%20240Z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding: 14px 36px 14px 14px;
}
.c-entry-content .c-simulator__submit,
.editor-styles-wrapper .c-simulator__submit {
text-align: center;
margin-top: 24px;
}
.c-entry-content .c-simulator__submit button,
.editor-styles-wrapper .c-simulator__submit button {
-webkit-appearance: none;
appearance: none;
border: none;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 12px;
}
.c-entry-content .c-simulator__submit button.c-simulator-btn .arrow,
.editor-styles-wrapper .c-simulator__submit button.c-simulator-btn .arrow {
transform: rotateZ(90deg);
}
.c-entry-content .c-simulator__submit-icon,
.editor-styles-wrapper .c-simulator__submit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.c-entry-content .c-simulator__submit-icon svg,
.editor-styles-wrapper .c-simulator__submit-icon svg {
width: 16px;
height: 16px;
}
.c-entry-content .c-simulator__arrow-down,
.editor-styles-wrapper .c-simulator__arrow-down {
text-align: center;
margin: 16px 0;
color: var(--color-primary-light);
}
.c-entry-content .c-simulator__arrow-down svg,
.editor-styles-wrapper .c-simulator__arrow-down svg {
width: 40px;
height: 40px;
}
.c-entry-content .c-simulator__result,
.editor-styles-wrapper .c-simulator__result {
background: var(--gradient-primary);
border-radius: 16px;
padding: 24px;
}
.c-entry-content .c-simulator__result,
.editor-styles-wrapper .c-simulator__result,
.c-entry-content .c-simulator__result+.c-simulator__note,
.editor-styles-wrapper .c-simulator__result +.c-simulator__note {
max-width: 1000px;
margin-inline: auto;
}
.c-entry-content .c-simulator__result-title,
.editor-styles-wrapper .c-simulator__result-title {
font-size: clamp( 18px, calc( 16px + 0.625vw ), 24px );
font-weight: bold;
text-align: center;
color: #fff;
margin-bottom: 16px;
}
.c-entry-content .c-simulator__result-inner,
.editor-styles-wrapper .c-simulator__result-inner {
background: var(--color-bg);
border-radius: 8px;
padding: 16px;
}
.c-entry-content .c-simulator__result-total,
.editor-styles-wrapper .c-simulator__result-total {
text-align: center;
}
.c-entry-content .c-simulator__result-label,
.editor-styles-wrapper .c-simulator__result-label {
font-size: 18px;
font-weight: bold;
margin-right: 8px;
}
.c-entry-content .c-simulator__result-num,
.editor-styles-wrapper .c-simulator__result-num {
font-size: clamp(40px, calc(38.333333333333336px + 0.5208333333333333vw), 45px);
font-weight: 900;
color: var(--color-accent);
}
.c-entry-content .c-simulator__result-tax,
.editor-styles-wrapper .c-simulator__result-tax {
margin-left: 4px;
font-size: 14px;
color: var(--color-text-sub);
}
.c-entry-content .c-simulator__result-breakdown:has(li),
.editor-styles-wrapper .c-simulator__result-breakdown:has(li) {
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--color-border);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 48px;
}
.c-entry-content .c-simulator__result-breakdown li,
.editor-styles-wrapper .c-simulator__result-breakdown li {
color: var(--color-text);
}
.c-entry-content .c-simulator__note,
.editor-styles-wrapper .c-simulator__note {
margin-top: 16px;
}
@media (max-width: 768px) {
.c-entry-content .c-simulator__fields,
.editor-styles-wrapper .c-simulator__fields {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.c-entry-content .c-simulator__usage-grid,
.editor-styles-wrapper .c-simulator__usage-grid {
grid-template-columns: 1fr;
}
.c-entry-content .c-simulator__multiply,
.editor-styles-wrapper .c-simulator__multiply {
text-align: center;
}
.c-entry-content .c-simulator__lines-field,
.editor-styles-wrapper .c-simulator__lines-field {
width: 100%;
}
.c-entry-content .c-simulator__result-breakdown,
.editor-styles-wrapper .c-simulator__result-breakdown {
grid-template-columns: 1fr;
}
.c-entry-content .c-simulator__result,
.editor-styles-wrapper .c-simulator__result {
padding: 16px;
}
.c-entry-content .c-simulator__box,
.editor-styles-wrapper .c-simulator__box {
padding: 48px 16px 16px;
}
}
.c-entry-content .c-faq-list.c-plan-faq .c-faq-item,
.editor-styles-wrapper .c-faq-list.c-plan-faq .c-faq-item {
background: var(--color-bg-sub);
}
/* ---------- システム連携ページ: 各種連携サービス一覧 ---------- */
.c-entry-content .c-integration-list,
.editor-styles-wrapper .c-integration-list {
max-width: 900px;
margin: 40px auto clamp( 40px, calc( 32px + 2.5vw ), 64px );
display: flex;
flex-direction: column;
gap: 24px;
}
.c-entry-content .c-integration-item,
.editor-styles-wrapper .c-integration-item {
background: var(--color-bg-sub);
border-radius: 16px;
padding: 32px;
display: flex;
align-items: center;
gap: 32px;
}
.c-entry-content .c-integration-item__logo,
.editor-styles-wrapper .c-integration-item__logo {
flex-shrink: 0;
width: 280px;
}
.c-entry-content .c-integration-item__logo img,
.editor-styles-wrapper .c-integration-item__logo img {
width: 100%;
}
.c-entry-content .c-integration-item__content,
.editor-styles-wrapper .c-integration-item__content {
flex: 1;
min-width: 0;
}
.c-entry-content .c-integration-item__head,
.editor-styles-wrapper .c-integration-item__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.c-entry-content .c-integration-item__title,
.editor-styles-wrapper .c-integration-item__title {
font-size: clamp( 18px, calc( 16px + 0.8333333333333334vw ), 22px );
font-weight: bold;
padding-left: 14px;
border-left: 4px solid var(--color-primary);
line-height: 1.3;
}
.c-entry-content .c-integration-item__text,
.editor-styles-wrapper .c-integration-item__text {
margin-top: 16px;
font-size: 15px;
color: var(--color-text);
line-height: 1.8;
}
.c-entry-content .c-integration-item__link,
.editor-styles-wrapper .c-integration-item__link {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-primary);
color: #fff;
font-weight: bold;
font-size: 15px;
padding: 8px 24px;
border-radius: 999px;
text-decoration: none !important;
white-space: nowrap;
}
.c-entry-content .c-integration-item__link::after,
.editor-styles-wrapper .c-integration-item__link::after {
display: none !important;
}
.c-entry-content .c-integration-item__link:hover,
.editor-styles-wrapper .c-integration-item__link:hover {
opacity: 0.8;
}
.c-entry-content .c-integration-item__link svg,
.editor-styles-wrapper .c-integration-item__link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (max-width: 768px) {
/* SPは「画像→タイトル→本文→ボタン」の縦積みにする。
ボタンはHTML上タイトルと同じ.c-integration-item__head内にあるため、
.headをdisplay:contentsで畳んで子要素(タイトル/ボタン)を直接
.c-integration-item__contentのflexアイテムにし、それぞれにorderを
指定することで本文の後ろにボタンだけを移動させている */
.c-entry-content .c-integration-item,
.editor-styles-wrapper .c-integration-item {
flex-direction: column;
align-items: center;
padding: 24px;
gap: 0;
}
.c-entry-content .c-integration-item__logo,
.editor-styles-wrapper .c-integration-item__logo {
width: 100%;
max-width: 280px;
}
.c-entry-content .c-integration-item__content,
.editor-styles-wrapper .c-integration-item__content {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 24px;
}
.c-entry-content .c-integration-item__head,
.editor-styles-wrapper .c-integration-item__head {
display: contents;
}
.c-entry-content .c-integration-item__title,
.editor-styles-wrapper .c-integration-item__title {
order: 1;
}
.c-entry-content .c-integration-item__text,
.editor-styles-wrapper .c-integration-item__text {
order: 2;
}
.c-entry-content .c-integration-item__link,
.editor-styles-wrapper .c-integration-item__link {
order: 3;
align-self: center;
margin-top: 24px;
}
}
/* ---------- パートナー募集ページ: 独自ヘッダー(page-headerコンポーネントを使わず本文側で構成) ---------- */
.c-entry-content .c-partner-hero,
.editor-styles-wrapper .c-partner-hero {
position: relative;
background: var(--gradient-primary);
padding-block: clamp( 40px, calc( 32px + 2.5vw ), 64px );
margin-bottom: clamp( 40px, calc( 32px + 2.5vw ), 64px );
overflow: visible;
}
.c-entry-content .c-partner-hero__eyebrow,
.editor-styles-wrapper .c-partner-hero__eyebrow {
font-size: 20px;
font-weight: bold;
font-family: "Poppins", sans-serif;
letter-spacing: 0;
color: #fff;
}
.c-entry-content .c-partner-hero__title,
.editor-styles-wrapper .c-partner-hero__title {
margin-top: 4px;
font-size: clamp( 26px, calc( 22px + 1.6666666666666667vw ), 38px );
font-weight: bold;
color: #fff;
line-height: 1.4;
position: relative;
z-index: 1;
}
.c-entry-content .c-partner-hero__lead,
.editor-styles-wrapper .c-partner-hero__lead {
margin-top: 12px;
width: clamp( 256px, calc( 138px + 36.875vw ), 610px );
color: #fff;
line-height: var(--lh-body);
position: relative;
z-index: 1;
}
.c-entry-content .c-partner-hero__stats,
.editor-styles-wrapper .c-partner-hero__stats {
width: clamp( 300px, calc( 226px + 23.125vw ), 522px );
position: absolute;
top: 17.5%;
right: auto;
left: calc(50% + 100px);
}
.c-entry-content .c-partner-hero__stats img,
.editor-styles-wrapper .c-partner-hero__stats img {
width: 100%;
height: auto;
}
.c-entry-content .c-partner-hero__cta,
.editor-styles-wrapper .c-partner-hero__cta {
margin-top: 24px;
position: relative;
z-index: 1;
}
.c-entry-content .c-partner-hero__illustration,
.editor-styles-wrapper .c-partner-hero__illustration {
position: absolute;
right: auto;
left: calc(50% + 100px);
top: 80%;
transform: translateY(-50%);
width: clamp( 256px, calc( 148px + 33.75vw ), 580px );
height: auto;
pointer-events: none;
}
@media (max-width: 1280px) {
.c-entry-content .c-partner-hero__stats,
.editor-styles-wrapper .c-partner-hero__stats {
width: clamp( 300px, calc( 226px + 23.125vw ), 522px );
position: relative;
top: unset;
right: unset;
left: 0;
margin-top: 16px;
}
.c-entry-content .c-partner-hero__illustration,
.editor-styles-wrapper .c-partner-hero__illustration {
right: 3%;
left: auto;
top: clamp( 80%, calc( 105px + -1.953125vw ), 90% );
width: clamp( 256px, calc( -80px + 43.75vw ), 480px );
}
.c-entry-content .c-partner-hero__lead,
.editor-styles-wrapper .c-partner-hero__lead {
width: 100%;
}
}
@media (max-width: 768px) {
.c-entry-content .c-partner-hero,
.editor-styles-wrapper .c-partner-hero {
padding-block: clamp( 40px, calc( 32px + 2.5vw ), 64px ) 96px;
margin-bottom: 128px;
}
.c-entry-content .c-partner-hero__cta,
.editor-styles-wrapper .c-partner-hero__cta {
display: flex;
justify-content: center;
}
.c-entry-content .c-partner-hero__cta .c-btn,
.editor-styles-wrapper .c-partner-hero__cta .c-btn {
display: flex;
width: calc(100% - 32px);
margin-inline: auto;
}
.c-entry-content .c-partner-hero__stats,
.editor-styles-wrapper .c-partner-hero__stats {
width: clamp( 300px, calc( 226px + 23.125vw ), 522px );
margin: 16px auto 0;
}
.c-entry-content .c-partner-hero__illustration,
.editor-styles-wrapper .c-partner-hero__illustration {
top: 100%;
right: 50%;
width: 65%;
transform: translateY(-50%) translateX(50%);
}
}
/* ---------- パートナー募集ページ: 当社のサポートについて(2x2カード) ---------- */
.c-entry-content .c-support-grid,
.editor-styles-wrapper .c-support-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp( 16px, calc( 10.666666666666668px + 1.6666666666666667vw ), 32px );
max-width: 1000px;
margin: 40px auto 0;
}
.c-entry-content .c-support-card,
.editor-styles-wrapper .c-support-card {
background: var(--color-bg);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
}
.c-entry-content .c-support-card__icon,
.editor-styles-wrapper .c-support-card__icon {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.c-entry-content .c-support-card__icon img,
.editor-styles-wrapper .c-support-card__icon img {
max-height: 100%;
width: auto;
}
.c-entry-content .c-support-card__title,
.editor-styles-wrapper .c-support-card__title {
margin-top: 16px;
font-size: clamp( 18px, calc( 16px + 0.625vw ), 24px );
font-weight: bold;
color: var(--color-primary);
}
.c-entry-content .c-support-card__text,
.editor-styles-wrapper .c-support-card__text {
margin-top: 12px;
text-align: left;
line-height: var(--lh-body);
}
@media (max-width: 600px) {
.c-entry-content .c-support-grid,
.editor-styles-wrapper .c-support-grid {
grid-template-columns: 1fr;
}
}
/* ---------- パートナー募集ページ: お支払いまでの流れ(横並び番号ステップ) ---------- */
.c-entry-content .c-flow-steps,
.editor-styles-wrapper .c-flow-steps {
position: relative;
display: flex;
justify-content: space-between;
margin: 40px auto 0;
gap: 8px;
}
.c-entry-content .c-flow-steps::before,
.editor-styles-wrapper .c-flow-steps::before {
content: "";
position: absolute;
top: calc(50% - 2px);
left: 20px;
right: 20px;
height: 10px;
background: var(--color-primary);
z-index: 0;
}
.c-entry-content .c-flow-steps__item,
.editor-styles-wrapper .c-flow-steps__item {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1;
aspect-ratio: 1/1;
background: var(--color-bg-sub);
border-radius: 999px;
position: relative;
max-width: 160px;
}
.c-entry-content .c-flow-steps__num,
.editor-styles-wrapper .c-flow-steps__num {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: #FFF;
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: 24px;
letter-spacing: 0;
position: absolute;
top: -16px;
left: calc(50% - 22px);
}
.c-entry-content .c-flow-steps__label,
.editor-styles-wrapper .c-flow-steps__label {
font-size: clamp( 14px, calc( 12px + 0.625vw ), 20px );
font-weight: bold;
text-align: center;
line-height: 1.25;
letter-spacing: 0;
}
@media (max-width: 768px) {
.c-entry-content .c-flow-steps,
.editor-styles-wrapper .c-flow-steps {
flex-direction: column;
row-gap: 24px;
}
.c-entry-content .c-flow-steps::before,
.editor-styles-wrapper .c-flow-steps::before {
left: calc(50% - 5px);
top: 20px;
bottom: 20px;
width: 10px;
height: calc(100% - 40px);
}
.c-entry-content .c-flow-steps__item,
.editor-styles-wrapper .c-flow-steps__item {
aspect-ratio: unset;
max-width: unset;
width: calc(100% - 32px);
margin: 0 auto;
padding: 16px 48px;
}
.c-entry-content .c-flow-steps__num,
.editor-styles-wrapper .c-flow-steps__num {
top: auto;
bottom: auto;
left: -8px;
}
.c-entry-content .c-flow-steps__label,
.editor-styles-wrapper .c-flow-steps__label {
font-size: 18px;
}
}
/* ---------- お申し込みページ(/apply): メインの申し込みボックス ---------- */
.c-entry-content .c-apply-box,
.editor-styles-wrapper .c-apply-box {
max-width: 1000px;
margin: 0 auto;
background: var(--color-bg-sub);
border-radius: 16px;
padding: clamp( 16px, calc( 4px + 3.75vw ), 52px );
text-align: center;
}
.c-entry-content .c-apply-box__lead,
.editor-styles-wrapper .c-apply-box__lead {
line-height: var(--lh-body);
}
.c-entry-content .c-apply-box__lead a,
.editor-styles-wrapper .c-apply-box__lead a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.c-entry-content .c-apply-box__btn,
.editor-styles-wrapper .c-apply-box__btn {
margin-top: 32px;
font-size: clamp( 18px, calc( 16px + 0.8333333333333334vw ), 24px );
padding: 12px clamp( 32px, calc( 24px + 3.3333333333333335vw ), 56px ) 9px;
font-weight: bold;
}
.c-entry-content .c-apply-box__btn .c-btn__icon,
.editor-styles-wrapper .c-apply-box__btn .c-btn__icon {
width: clamp(21px, calc(18px + 0.9375vw), 30px);
aspect-ratio: 3 / 4;
margin-right: 0.25rem;
}
/* ---------- お申し込みページ(/apply): 代理店紹介ボックス(c-bracket-quoteを中央寄せで流用) ---------- */
.c-entry-content .c-apply-referral,
.editor-styles-wrapper .c-apply-referral {
max-width: 720px;
margin: 0 auto;
}
.c-entry-content .c-apply-referral__text,
.editor-styles-wrapper .c-apply-referral__text {
margin-top: 12px;
color: var(--color-text-sub);
line-height: var(--lh-body);
}
.c-entry-content .c-apply-referral__btn,
.editor-styles-wrapper .c-apply-referral__btn {
margin-top: 24px;
}
.c-entry-content .c-apply-referral__btn .c-btn,
.editor-styles-wrapper .c-apply-referral__btn .c-btn {
background: var(--color-primary);
color: #FFF;
text-decoration: none;
font-size: 16px;
padding: 8px 20px;
}
@media (max-width: 768px) {
.c-entry-content .c-apply-referral__btn,
.editor-styles-wrapper .c-apply-referral__btn {
text-align: center;
}
}