@charset "UTF-8";
/**
Components CSS
File: assets/css/components.css
Description: コンポーネント（全ページ共通）スタイルシート
#breadcrumbs パンくずリスト
.c-subtitle サブタイトル（ドット装飾）
.entry-title コンテンツタイトル（固定ページ）
.pagination ページネーション
.sns-share 記事シェアボタン（横並び）

404
*/

/* =====================================================
□ 共通（PC・スマホ共通）
===================================================== */

/* 固定ヘッダー分のアンカー位置を調整 */
html {
scroll-padding-top: var(--anchor-offset, 110px);
}

.anchor {
scroll-margin-top: 0;
}

/* パンくずリスト */
#breadcrumbs {
padding: 16px 0;
margin-bottom: 20px;
font-size: 0.85em;
display: flex;
flex-wrap: wrap;
align-items: center;
color: var(--color-gray-800);
background-color: var(--color-gray-100);
}

.breadcrumbs-inner {
width: 1200px;
margin: 0 auto;
font-size: var(--font-size-caption);
}

#breadcrumbs a {
color: var(--color-gray-800);
text-decoration: none;
transition: color 0.2s ease;
}

#breadcrumbs a span {
display: inline-flex;
align-items: center;
}

#breadcrumbs a:hover {
color: var(--color-blue);
text-decoration: underline;
}

#breadcrumbs span {
margin: 0 5px;
}

.breadcrumb-home-icon {
width: 14px;
height: 14px;
display: inline-block;
transition: opacity 0.2s ease;
}

#breadcrumbs a:hover .breadcrumb-home-icon {
opacity: 0.6;
}

/* アイコンブロック */
.wp-block-icon svg {
height:24px;
}

/* サブタイトル（ドット装飾） */
.c-subtitle {
display: flex;
align-items: center;
margin-bottom: 1.8rem;
}

.c-subtitle .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
}

.dot-orange {
background: var(--color-orange);
}

.dot-green {
background: var(--color-green);
}

.c-subtitle .text {
margin-left: 0.4rem;
font-size: var(--font-size-small);
line-height: 1.2;
}

/* コンテンツ */
body.page-terms .entry-content,
body.page-privacy-policy .entry-content,
body.page-cookie-policy .entry-content {
max-width: 100%;
margin: 0 auto;
padding: 96px 64px 96px 64px;
background: #fff;
border-radius: 24px;
}

/* コンテンツ サブタイトル */
body.page-terms .entry-content> h2,
body.page-privacy-policy .entry-content >h2,
body.page-cookie-policy .entry-content> h2 {
margin: 78px 0px 28px 0px;
padding: 0px 0px 0px 20px;
border-bottom: 0px solid var(--color-green);
border-left: 4px solid var(--color-green);
border-right: 0px solid var(--color-green);
border-top: 0px solid var(--color-green);
}

body.page-terms .entry-content> h3,
body.page-privacy-policy .entry-content >h3,
body.page-cookie-policy .entry-content> h3 {
margin: 48px 0 0 0;
color:var(--color-green);
}

/* ページング */
.pagination {
grid-column: 1 / 2;
grid-row: 2 / 3;
margin-top: 4rem;
display: flex;
justify-content: center;
}

.pagination nav {
display: flex;
align-items: center;
border: 1px solid var(--color-gray-300);
border-radius: 50px;
overflow: hidden;
}

/* 区切り線 */
hr {
border: none !important;
height: 1px !important;
background: var(--color-gray-200) !important;
}

/* 投稿詳細：リンク全体を操作できる共通前後ナビ */
.pagination .article-navigation {
width: min(100%, 400px);
}

.article-navigation a {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 56px;
padding: 12px 16px;
box-sizing: border-box;
color: var(--color-gray-900);
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading);
text-decoration: none;
transition: background-color .3s ease;
}

.article-navigation a + a {
border-left: 1px solid var(--color-gray-300);
}

.article-navigation a:hover {
background-color: var(--color-gray-100);
}

.article-navigation a:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -4px;
}
/* ページング archive：数字＋前へ／次へ */
.pagination .nav-links {
display: flex;
align-items: center;
}

.pagination .nav-links .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-right: 1px solid var(--color-gray-300);
color: #000;
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading);
text-decoration: none;
transition: opacity .3s ease;
}

.pagination .nav-links .page-numbers:last-child {
border-right: 0;
}

.pagination .nav-links a.page-numbers:hover {
opacity: .6;
}

.pagination .nav-links .page-numbers.current {
background: var(--color-gray-400);
}

/* 「前へ」「次へ」の文字を消して矢印だけ残す */
.pagination .nav-links .prev.page-numbers,
.pagination .nav-links .next.page-numbers {
width: 50px;
font-size: 0;
}

.pagination .nav-links .prev.page-numbers span[aria-hidden],
.pagination .nav-links .next.page-numbers span[aria-hidden] {
font-size: 1.0625rem;
}

/* 記事シェアボタン */
.sns-share {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 60px 0;
}

.sns-share__list {
display: flex;
flex-direction: row;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}

.sns-share__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 4px;
color: var(--color-gray-500);
background: var(--color-gray-100);
border: 1px solid var(--color-gray-300);
text-decoration: none;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sns-share__btn svg {
width: 16px;
height: 16px;
}

.sns-share__btn:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 3px;
}

.sns-share__btn--x:hover {
background: #000;
border-color: #000;
color: #fff;
}

.sns-share__btn--facebook:hover {
background: #1877f2;
border-color: #1877f2;
color: #fff;
}

.sns-share__btn--line:hover {
background: #06c755;
border-color: #06c755;
color: #fff;
}

.sns-share__btn--copy:hover {
background: var(--color-blue);
border-color: var(--color-blue);
color: #fff;
}

.sns-share__copy-msg {
display: none;
font-size: var(--font-size-caption);
color: var(--color-green);
}

/* CTA（フッター） */
.cta-footer {
position: relative;
overflow: hidden;
padding: 40px 0 0;
--circle-d: max(1800px, 130vw);
background-color: #fff;
}

.cta-footer::before {
content: "";
position: absolute;
top: calc(var(--circle-d) * 0.14444);
left: 50%;
width: var(--circle-d);
height: var(--circle-d);
transform: translateX(-50%);
border-radius: 50%;
background: #fff;
z-index: 0;
}

.cta-footer__text {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-align: center;
font-family: var(--font-latin);
font-size: clamp(3rem, 7vw, 6.25rem);
font-weight: var(--font-weight-heading);
line-height: 1.2;
letter-spacing: 0.16em;
color: var(--color-gray-200);
pointer-events: none;
z-index: 2;
}

.cta-footer__text-track {
display: flex;
width: max-content;
animation: cta-footer-text-scroll 45s linear infinite;
}

.cta-footer__text-track > span {
flex: 0 0 auto;
min-width: 100vw;
padding-right: 1em;
box-sizing: border-box;
}

@keyframes cta-footer-text-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
.cta-footer__text-track {
	animation: none;
}
}

.cta-footer__heading {
font-size: clamp(1.6rem, 4vw, 2.6rem);
font-weight: var(--font-weight-heavy);
line-height: 1.4;
color: var(--color-gray-800);
margin-bottom: 0.9rem;
}

.cta-footer__sub {
font-size: var(--font-size-small);
color: var(--color-gray-300);
line-height: 1.9;
margin-bottom: 2rem;
}

.cta-footer__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}

/* 注文・相談 */
.cta {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, clamp(290px, 27vw, 460px)) minmax(0, 1fr);
gap: 0;
align-items: center;
width: 100%;
max-width: none;
margin: 0;
padding: 140px 0 80px clamp(24px, 3.5vw, 60px);
box-sizing: border-box;
}

/* 左 */
.cta-main {
position: relative;
z-index: 2;
min-width: 0;
height: auto;
}

.cta-main > a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}

.cta-main-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 38px clamp(18px, 2vw, 28px) 26px;
box-sizing: border-box;
width: 100%;
min-height: 440px;
border-radius: 42px;
background-color: #e2e2eb;
background-image: linear-gradient(#ffffffb3 1px, transparent 1px),
	linear-gradient(90deg, #ffffffb3 1px, transparent 1px);
background-size: 20px 20px;
overflow: hidden;
isolation: isolate;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.cta-main-content::before,
.cta-main-content::after {
content: "";
position: absolute;
z-index: -1;
width: 240px;
height: 140px;
background: #63bcec;
border-radius: 40% 60% 55% 45%;
pointer-events: none;
}

.cta-main-content::before { top: -85px; left: -65px; }
.cta-main-content::after { bottom: -95px; right: -75px; }

.cta-main-content .cta-main-title {
position: relative;
width: 100%;
margin: 0;
padding: 8px 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 28px;
background: #fff;
color: #222;
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
font-weight: var(--font-weight-heavy);
line-height: 1.5;
text-align: center;
}

.cta-main-title > span {
display: inline-block;
background: repeating-linear-gradient(120deg, #fff568 0 2px, transparent 2px 5px) bottom / 100% 6px no-repeat;
}

.cta-main-content .cta-main-title--image {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}

.cta-main-title-image {
display: block;
width: 100%;
height: auto;
}

.cta-main-title .cta-main-gear {
position: absolute;
z-index: 1;
width: 32px;
height: 32px;
padding: 0;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
object-fit: contain;
}
.cta-main-gear--left { top: calc(30% - 16px); left: 0; }
.cta-main-gear--right { bottom: calc(28% - 16px); right: 0; }

.cta-main-samples {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 16px;
flex: 0 0 auto;
height: auto;
width: 100%;
}

.cta-main-samples img {
display: block;
flex: 0 0 auto;
width: auto;
height: clamp(80px, 7.5vw, 125px);
max-width: none;
object-fit: contain;
object-position: center bottom;
}

.cta-main-samples img:first-child {
width: auto;
}

.cta-main-samples img:last-child {
width: auto;
}

.cta-main-content .cta-main-description {
width: 100%;
margin: 0;
color: var(--color-gray-900);
font-size: var(--font-size-body);
font-weight: var(--font-weight-heading);
line-height: 1.7;
text-align: center;
}

.cta-main-description strong {
display: block;
font-size: clamp(1.1rem, 1.4vw, 1.3rem);
font-weight: var(--font-weight-display);
}

.cta-main-description > span {
display: block;
margin-top: 8px;
font-size: var(--font-size-body);
font-weight: var(--font-weight-heavy);
}

.cta-main-tape {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
max-width: 320px;
padding: 14px 12px;
box-sizing: border-box;
background: #fff568;
color: #222;
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading);
line-height: 1.4;
clip-path: polygon(1% 3%, 98% 0, 100% 94%, 2% 100%, 0 45%);
transform: rotate(-1.5deg);
transition: transform .2s ease, background-color .2s ease;
}

.cta-main-tape > span {
font-size: 1.3em;
}

.cta-main > a:hover .cta-main-tape,
.cta-main > a:focus-visible .cta-main-tape {
background: #ffed48;
transform: rotate(0);
}

.cta-main > a:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 6px;
border-radius: 42px;
}

.cta-main-label {
position: absolute;
top: -80px;
left: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 66%;
height: 60px;
border-radius: 50px 50px 0 50px;
background: var(--color-blue);
color: #fff;
font-size: var(--font-size-lead);
font-weight: var(--font-weight-heading);
transform: translateX(-50%);
}

/* 右 */
.cta-right {
min-width: 0;
}

.cta-follow p {
width: 68%;
margin: 0;
text-align: center;
color: var(--color-gray-900);
}

.cta-follow p strong {
font-size: var(--font-size-title);
font-weight: var(--font-weight-display);
}

/* 右側横スクロール */
.cta-banners {
--banner-size: 260px;
--banner-gap: 30px;

position: relative;
z-index: 1;
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--banner-size);
align-items: center;
gap: var(--banner-gap);
width: 100%;
max-width: none;
margin: 0;
padding: 70px 0 35px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
}

.cta-banners.is-dragging {
cursor: grabbing;
user-select: none;
}

.cta-banners::-webkit-scrollbar {
display: none;
}

/* SNSバナー */
.banner-item {
position: relative;
width: var(--banner-size);
height: var(--banner-size);
aspect-ratio: 1 / 1;
overflow: visible;
}

.banner-item > .cta-main-label {
position: absolute;
top: -25px;
left: 50%;
z-index: 3;

display: flex;
align-items: center;
justify-content: center;

width: 86%;
height: 3.125rem;

border-radius: 3.125rem 3.125rem 0 3.125rem;
background: #fff;
color: var(--color-gray-900);

box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, .1);

font-size: var(--font-size-small);
font-weight: var(--font-weight-display);
transform: translateX(-50%);
white-space: nowrap;
}

.banner-item > a {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: visible;
text-decoration: none;
}

.sns-content {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
transition: transform 0.4s ease;
}

.sns-content img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

/* 画像 hover */
.banner-item:hover .sns-content {
transform: scale(1.06);
}

/* 　丸CTA　 */
.cta-actions {
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-self: center;

width: var(--banner-size);
height: var(--banner-size);
margin: 0;
}

.cta-actions > a {
display: block;
width: 100%;
height: 100%;
}

.cta-actions .cta-main-label {
position: absolute;
top: -55px;
left: 50%;
z-index: 3;

display: flex;
align-items: center;
justify-content: center;

width: max-content;
height: 3.75rem;
padding: 0;

background: transparent;
color: var(--color-gray-900);
box-shadow: none;

font-size: var(--font-size-small);
font-weight: var(--font-weight-heading);
transform: translateX(-50%);
white-space: nowrap;
text-align: center;
}

/* 総合窓口 */
.cta-actions .contact-cta {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 100%;
min-width: 0;
min-height: 0;

padding: 36%;
box-sizing: border-box;
border-radius: 50%;
text-align: center;
background: var(--color-orange);
}

/* 資料ダウンロード */
.cta-actions .download-cta {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 100%;
min-width: 0;
min-height: 0;

padding: 36%;
box-sizing: border-box;
border-radius: 50%;
text-align: center;
background: var(--color-green);
}

/* 丸CTA hover */
.cta-actions .contact-cta,
.cta-actions .download-cta {
transition: transform 0.4s ease;
}

.cta-actions:hover .contact-cta,
.cta-actions:hover .download-cta {
transform: scale(1.06);
}

/* 404 */
body.error404 .entry-content .image {
width: 95%;
text-align: right;
opacity: 0.4;
}

body.error404 .image img {
width: 24%;
}

/* 円周テキスト（SVG textPath版） */
.circular-text {
position: absolute;
top: calc(var(--circle-d) * 0.13056);
left: 50%;

width: calc(var(--circle-d) * 1.04444);
height: calc(var(--circle-d) * 1.04444);
margin-left: calc(var(--circle-d) * -0.52222);

pointer-events: none;
z-index: 2;
overflow: visible;
}

.circular-text__svg {
width: 100%;
height: 100%;
overflow: visible;
}

.circular-text__svg text {
font-family: var(--font-latin);
font-size: 5.625rem;
font-weight: var(--font-weight-heading);
line-height: 1;
fill: var(--color-gray-200);
letter-spacing: 0.16em;
}

/* 　ボタン共通コンポーネント　 */
/*
【種類】
・通常（グレー）  : .button--default                / 44px
・ブルー         : .wp-block-button.button--blue   / 60px
・ホワイト       : .wp-block-button.button--white  / 60px
・オレンジ       : .wp-block-button.button--orange / 60px
・送信（グリーン）: .button--submit                 / 60px

【Gutenbergの使い方】
親 .wp-block-button に button--blue / button--white /
button--orange を付与し、リンクに button button--default、
内側に button__wrapper / button__text を使用する。

【矢印】
・通常 / 青 / 白 / オレンジ : 標準で表示
・親 .wp-block-button.button--no-arrow : 非表示
・送信 : 標準で非表示（通常要素なら button--arrow で表示）
※ input 要素自体には ::before / ::after を描画できないため、
	CF7 の input 送信ボタンに矢印を付ける場合は別要素が必要。
*/

/* 　01. ボタン本体（全種類共通）　 */
.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box !important;
padding: 2px !important;
border: none !important;
margin: 0 !important;
border-radius: var(--btn-radius);
overflow: hidden;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
font-family: inherit;
height: auto;
line-height: normal;
vertical-align: middle;
outline: 2px solid transparent;
outline-offset: 0;
transition: outline-color var(--transition), outline-offset var(--transition);
}

/* ボタン内側：標準60px（通常ボタンのみ後述で44pxに変更） */
.button__wrapper {
position: relative;
z-index: 2;
box-sizing: border-box !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
line-height: 60px !important;
border: none !important;
border-radius: calc(var(--btn-radius) - 1px);
padding: 0 40px !important;
margin: 0 !important;
white-space: nowrap;
background-color: transparent !important;
transition: background var(--transition);
}

/* Gutenberg 標準スタイルの上書き */
.wp-element-button.button {
padding: 2px !important;
border: none !important;
font-size: inherit;
}

/* ボタン内の文字・SVGアイコン */
.button__text,
.button__icon {
position: relative;
z-index: 2;
font-family: var(--font-body);
font-weight: var(--font-weight-heading);
font-size: var(--font-size-small);
letter-spacing: 0.05em;
line-height: normal;
color: #fff;
transition: color var(--transition);
}

.button__icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
width: 16px;
height: 16px;
}

.button__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
}

/* ホバー時のスポットライト演出用パーツ */
.button__spotlight {
position: absolute;
z-index: 1;
width: 10px;
height: 10px;
opacity: 1;
border-radius: 50%;
inset: 0;
top: 50%;
transform: scale(0);
pointer-events: none;
}

/* 　02. ボタンの色　 */

/* 02-1. 通常ボタン：グレー（本文用） */
.button--default {
--btn-bg: var(--color-button-gray);
--btn-spotlight: linear-gradient(to right, #d9d9d9, #9a9a9a);
--btn-text: var(--color-button-white-text);
--btn-outline: var(--color-gray-500);
--btn-border: none;
--arrow-color: var(--color-gray-300);

background: var(--btn-bg) !important;
}

/* 02-2. ブルーボタン（Gutenberg 親クラスで切り替え） */
.wp-block-button.button--blue .button--default {
--btn-bg: var(--color-blue);
--btn-spotlight: linear-gradient(to right, #7ec8f7, #1e88e5);
--btn-text: #fff;
--btn-outline: var(--color-blue);
--btn-border: none;
--arrow-color: var(--color-blue);
}

/* 02-3. ホワイトボタン（Gutenberg 親クラスで切り替え） */
.wp-block-button.button--white .button--default {
--btn-bg: var(--color-button-white);
--btn-spotlight: linear-gradient(to right, #f2f2f2, #d9d9d9);
--btn-text: var(--color-button-white-text);
--btn-outline: var(--color-button-white-border);
--btn-border: 1px solid var(--color-button-white-border);
--arrow-color: var(--color-muted);
}

/* 02-4. オレンジボタン（旧CTAボタンの代替） */
.wp-block-button.button--orange .button--default {
--btn-bg: var(--color-orange);
--btn-spotlight: linear-gradient(to right, #ffe259, #ffa751);
--btn-text: #fff;
--btn-outline: var(--color-orange);
--btn-border: none;
--arrow-color: var(--color-orange);
}

/* 02-5. 通常 / 青 / 白 / オレンジの色を共通で反映 */
.button--default .button__wrapper {
border: var(--btn-border) !important;

height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
line-height: 44px !important;
padding: 0 32px !important;
padding-right: 46px !important; /* 矢印分の余白 */
}
.button--default .button__text,
.button--default .button__icon {
color: var(--btn-text);

font-size: var(--font-size-small) !important;
}

.button--default .button__spotlight {
background: var(--btn-spotlight);
}

.button--default:hover {
outline-color: color-mix(in srgb, var(--btn-outline) 60%, transparent);
}

/* 　03. ボタンサイズ・文字サイズ　 */

/* 03-1. 通常ボタン：44px */

/* 03-2. 青・白・オレンジ：60px */
.wp-block-button.button--blue .button--default .button__wrapper,
.wp-block-button.button--white .button--default .button__wrapper,
.wp-block-button.button--orange .button--default .button__wrapper {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
line-height: 60px !important;
padding: 0 40px !important;
padding-right: 46px !important; /* 矢印分の余白 */
}
/* 03-3. 青・白・オレンジ・送信：文字1rem */
.wp-block-button.button--blue .button--default .button__text,
.wp-block-button.button--blue .button--default .button__icon,
.wp-block-button.button--white .button--default .button__text,
.wp-block-button.button--white .button--default .button__icon,
.wp-block-button.button--orange .button--default .button__text,
.wp-block-button.button--orange .button--default .button__icon {
font-size: var(--font-size-body) !important;
}
/* 　04. 矢印（丸背景＋右向き矢印）　 */
/* 04-1. 通常 / 青 / 白 / オレンジは標準で矢印あり。
送信は .button--submit.button--arrow を指定した場合のみ表示。 */
.button--default .button__wrapper::before {
content: "";
position: absolute;
z-index: 3;
right: 14px;
top: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
transform: translateY(-50%);
transition: transform var(--transition);
}

.button--default .button__wrapper::after {
content: "";
position: absolute;
z-index: 4;
right: 20px;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-50%);
background-color: var(--arrow-color, var(--color-gray-300));
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M1 8H15M15 8L9 2M15 8L9 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M1 8H15M15 8L9 2M15 8L9 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--transition);
}
/* 04-2. ホバー時：矢印を右へ3px移動 */
.button--default:hover .button__wrapper::before,
.button--default:hover .button__wrapper::after {
transform: translateY(-50%) translateX(3px);
}

/* 04-4. Gutenberg の親に button--no-arrow を付けると矢印なし */
.wp-block-button.button--no-arrow .button--default .button__wrapper {
padding-right: 32px !important;
}

.wp-block-button.button--no-arrow .button--default .button__wrapper::before,
.wp-block-button.button--no-arrow .button--default .button__wrapper::after {
content: none;
}

/* =====================================================
□ PC（641px以上）
===================================================== */

@media screen and (min-width: 641px) {
	/* CTA（フッター） */
	body:not(.page-fab, .fab-lp) .cta-footer {
		padding-top: 24px;
	}

	body:not(.page-fab, .fab-lp) .cta-footer__text {
		font-size: clamp(2.5rem, 5vw, 4.5rem);
	}

	body:not(.page-fab, .fab-lp) .cta {
		grid-template-columns: minmax(0, clamp(240px, 22vw, 320px)) minmax(0, 1fr);
		padding: 100px 0 48px max(24px, calc((100% - 1000px) / 2));
	}

	/* 左 */
	body:not(.page-fab, .fab-lp) .cta-main-content {
		gap: 12px;
		min-height: 0;
		padding: 24px 18px 20px;
		border-radius: 28px;
	}

	body:not(.page-fab, .fab-lp) .cta-main-title .cta-main-gear {
		width: 24px;
		height: 24px;
	}

	body:not(.page-fab, .fab-lp) .cta-main-gear--left {
		top: calc(30% - 12px);
	}

	body:not(.page-fab, .fab-lp) .cta-main-gear--right {
		bottom: calc(28% - 12px);
	}

	body:not(.page-fab, .fab-lp) .cta-main-samples {
		gap: 12px;
	}

	body:not(.page-fab, .fab-lp) .cta-main-samples img {
		height: clamp(64px, 6vw, 88px);
	}

	body:not(.page-fab, .fab-lp) .cta-main-description strong {
		font-size: var(--font-size-body);
	}

	body:not(.page-fab, .fab-lp) .cta-main-description > span {
		font-size: var(--font-size-small);
	}

	body:not(.page-fab, .fab-lp) .cta-main-tape {
		gap: 12px;
		padding: 10px 12px;
	}

	body:not(.page-fab, .fab-lp) .cta-main > a > .cta-main-label {
		top: -56px;
		height: 44px;
		font-size: var(--font-size-small);
	}

	/* 右側横スクロール */
	body:not(.page-fab, .fab-lp) .cta-follow {
		display: none;
	}

	body:not(.page-fab, .fab-lp) .cta-banners {
		--banner-size: 200px;
		--banner-gap: 24px;
		padding: 52px 0 24px;
	}

	body:not(.page-fab, .fab-lp) .banner-item > .cta-main-label {
		top: -20px;
		height: 40px;
	}

	body:not(.page-fab, .fab-lp) .cta-actions .cta-main-label {
		top: -44px;
		height: 44px;
	}
}

/* =====================================================
□ スマホ（640px以下）
===================================================== */

@media screen and (max-width: 640px) {
/* コンテンツ */
body.page-terms .entry-content,
body.page-privacy-policy .entry-content,
body.page-cookie-policy .entry-content {
	padding: 32px 20px;
	border-radius: 16px;
}

/* コンテンツ サブタイトル */
body.page-terms .entry-content > h2,
body.page-privacy-policy .entry-content > h2,
body.page-cookie-policy .entry-content > h2 {
	margin: 40px 0 20px;
	padding-left: 12px;
}

/* ボタン内側：標準60px（通常ボタンのみ後述で44pxに変更） */
.button__wrapper {
	max-width: 100%;
}

/* 03-1. 通常ボタン：44px */
.button--default .button__wrapper {
	width: 100%;
}

/* ページング archive：数字＋前へ／次へ */
.pagination .nav-links {
	flex-wrap: wrap;
	justify-content: center;
}

/* CTA（フッター） */
.cta-footer__actions {
	flex-direction: column;
	align-items: center;
}

/* 01. ボタン本体（全種類共通） */
.button {
	width: 100%;
	max-width: 300px;
	justify-content: center;
}

/* パンくずリスト */
.breadcrumbs-inner {
	width: 100%;
	padding: 0 16px;
	box-sizing: border-box;
}

/* 記事シェアボタン */
.sns-share {
	justify-content: center;
}

/* SNSバナー */
.sns {
	grid-template-columns: 1fr;
	gap: 70px;
	padding: 100px 20px 50px;
}

.sns-main {
	height: 450px;
	margin: 0;
}

.sns-main-label {
	top: -70px;
	height: 60px;
	font-size: var(--font-size-body);
}

.sns-item {
	max-width: 380px;
	width: 100%;
	margin: 0 auto;
}

/* 注文・相談 */
.cta {
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding: 120px 20px 32px;
}

/* 右 */
.cta-follow {
	display: none;
}

/* 右側横スクロール */
.cta-banners {
	--banner-size: 220px;
	--banner-gap: 20px;

	width: calc(100% + 40px);
	margin: 0 -20px;
	padding: 60px 0 16px;
}

/* 左 */
.cta-main {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.cta-main-content {
	min-height: 0;
	padding: 32px 18px 24px;
	border-radius: 28px;
}

.cta-main-samples {
	gap: 10px;
}

.cta-main-samples img {
	max-width: 60%;
	height: clamp(64px, 20vw, 90px);
}

.cta-main-samples img:last-child {
	max-width: 30%;
}

.cta-main-description strong {
	font-size: var(--font-size-body);
}

.cta-main-description > span {
	font-size: var(--font-size-small);
}

.cta-main > .cta-main-label {
	top: -70px;
	height: 50px;
	font-size: var(--font-size-body);
}

/* 404 */
body.error404 .entry-content .image {
	width: 100%;
	margin-top: 24px;
}

body.error404 .image img {
	display: block;
	width: clamp(140px, 40vw, 180px);
	max-width: 100%;
	height: auto;
	margin-left: auto;
}
}