@charset "utf-8";

/* =============================================================
    汎用ユーティリティ：テキスト揃え
    ※テーブルのセルなど、個別の要素だけ左寄せ／中央／右寄せにしたい場合に
      直接付与する。コンポーネント側のtext-align指定より必ず優先させるため
      !importantにしている
============================================================= */
.u-text-left {
    text-align: left !important;
}
.u-text-center {
    text-align: center !important;
}
.u-text-right {
    text-align: right !important;
}

/* ---------------------------------------------

navigation02 ※TOP、下層共通

--------------------------------------------- */

.header-area-upper {

	padding: var(--s1);

	text-align: right;

}

.header-title {

	font-size: 1.2rem;

	display: inline-block;

	position: relative;

}

.header-title::before {

	content: "PR";

	padding: .2rem;

	color: #fff;

	background-color: #333;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: -2.4rem;

}

.header-title a {

	text-decoration: none;

}

.header-title a:hover {

	text-decoration: underline;

}

.gnavi-btn-close {

	display: none;

}

.toggle-content {

	display: none;

}

.gnavi-ctrl {

	transition: opacity 0.6s, visibility 0.6s;

	opacity: 0;

	visibility: hidden;

}

.gnavi-ctrl.is-show {

	opacity: 1;

	visibility: visible;

}

#low-header .gnavi-ctrl {

	opacity: 1;

	visibility: visible;

}

.gnavi-btn {

	width: var(--s7);

	height: var(--s6);

	background: #333;

	display: block;

	position: fixed;

	top: var(--s3);

	right: 0;

	z-index: 200;

	cursor: pointer;

}

.gnavi-btn span {

	width: var(--s4);

	height: 0.2rem;

	display: inline-block;

	background: #fff;

	position: absolute;

	left: 1.2rem;

	transform: translate(0, -50%);

	transition: transform 0.4s, opacity 0.4s;

}

.gnavi-btn span:nth-of-type(1) {

	top: 1.7rem;

}

.gnavi-btn span:nth-of-type(2) {

	top: 2.4rem;

}

.gnavi-btn span:nth-of-type(3) {

	top: 3.1rem;

}

.gnavi-btn.is-active span:nth-of-type(1) {

	transform: translateY(0.7rem) rotate(-45deg);

}

.gnavi-btn.is-active span:nth-of-type(2) {

	opacity: 0;

}

.gnavi-btn.is-active span:nth-of-type(3) {

	transform: translateY(-0.7rem) rotate(45deg);

}

.gnavi-btn-close {

	/* .gnavi-btn（ハンバーガー→✕変形、z-index:200）が閉じるボタンを兼ねているため非表示 */
	display: none;

}

.gnavi-btn-close__inner {

	width: 100%;

	height: 100%;

	padding: 0;

	display: block;

	color: transparent;

	font-weight: 700;

	position: relative;

}

.gnavi-btn-close__inner::before,
.gnavi-btn-close__inner::after {

	content: "";

	width: 1.6rem;

	height: 0.2rem;

	background: #fff;

	position: absolute;

	top: 50%;

	left: 50%;

}

.gnavi-btn-close__inner::before {

	transform: translate(-50%, -50%) rotate(45deg);

}

.gnavi-btn-close__inner::after {

	transform: translate(-50%, -50%) rotate(-45deg);

}

.gnavi-area {

	width: 100%;

	max-width: 37.5rem;

	height: 100vh;

	padding: var(--s3) var(--s1) var(--s10);

	display: block;

	background-color: #fff;
	background-image:
		linear-gradient(#feefee 1px, transparent 1px),
		linear-gradient(90deg, #feefee 1px, transparent 1px);
	background-size: 70px 70px, 70px 70px;
	background-position: 0 35px, 0 35px;
	background-repeat: repeat, repeat;

	overflow-x: hidden;

	overflow-y: auto;

	position: fixed;

	top: 0;

	right: 0;

	z-index: 100;

	transform: translateX(100%);

	transition: transform 0.8s ease, opacity 0.8s ease;

	opacity: 0;

}

.gnavi-title {

	min-height: auto;

	margin: var(--s3) var(--s3) var(--s6) var(--s3);

	display: flex;

	align-items: center;

	justify-content: flex-start;

	font-size: 1.6rem;

	font-weight: 700;

	text-align: left;

	line-height: 1.5;

}

.gnavi-title img {

	width: 8rem;

	height: auto;

}

.gnavi-pc {

	display: flex;
	align-items: center;
	gap: var(--s5);

}

.gnavi-list {

	border-bottom: 1px solid #333;

	position: relative;

}

.gnavi-list li {

	padding-left: 0;

}

.gnavi-list__item::before {

	display: none;

}

.gnavi-list__link {

	width: 100%;

	margin: 0 auto;

	padding: var(--s2) var(--s4) var(--s2) var(--s2);

	border-top: 1px solid #333;

	display: block;

	font-weight: 700;

	line-height: 2;

	text-decoration: none;

	position: relative;

}

.gnavi-list__link::after {

	content: "";

	width: 1.4rem;

	height: 1.4rem;

	background: url("img/arrow-right_black.png") no-repeat center/contain;

	position: absolute;

	top: 50%;

	right: var(--s2);

	transform: translate(0, -50%) rotate(0);

	transition: transform 0.3s;

}

.gnavi-list__link--toggle::after {

	width: 1.2rem;

	height: 1.2rem;

	background-image: url("img/arrow-01-black-down.svg");

	background-size: contain;

}

.gnavi-list__link--toggle.is-open::after {

	transform: translate(0, -50%) rotate(180deg);

}

.gnavi-list__sub {

	width: 100%;

	background: #fff;

}

.gnavi-list__low .gnavi-list__link {

	padding: var(--s2) var(--s4) var(--s2) var(--s4);

}

.gnavi-list__low .gnavi-list__link::after {

	content: "└";

	background: none;

	transform: translateY(-50%);

	position: absolute;

	top: 40%;

	left: 1rem;

}

.is-gnavi-open .gnavi-area {

	opacity: 1;

	transform: translateX(0);

}



/* =============================================================
    ヘッダー共通
============================================================= */

.header-area {

	background: var(--white);
	filter: drop-shadow(0 0.4rem 0.8rem var(--shadow));
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;

}

.header-area__inner {

	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--s2) 0;
	gap: var(--s4);

	max-width: inherit;
}

.header-logo {

	position: absolute;
	left: 5rem;
	top: -4.5rem;
	z-index: 10;
	width: 20rem;
	aspect-ratio: 1;
	background: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

}

.header-logo img {

	max-width: 100%;
	display: block;

}

/* PCナビ */

.gnavi-pc__list {

	display: flex;
	align-items: center;
	gap: var(--s5);

}

.gnavi-pc__list li {

	padding-left: 0;

}

.gnavi-pc__list li::before {

	display: none;

}

.gnavi-pc__link {

	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--txt-emp);
	text-decoration: none;
	white-space: nowrap;

}

.gnavi-pc__link:hover {

	color: var(--site-color01);
	text-decoration: underline;

}

/* LINE登録ボタン */

.gnavi-pc__cta {
	margin: 0 var(--s3) 0 0;
	flex-shrink: 0;
	width: 24rem;
}

/* ヘッダーナビ内のLINE登録ボタンのみ幅を狭める（c-mv__bottomのボタンには影響させない） */
.gnavi-pc .gnavi-pc__cta {
	width: 20rem;
}

.gnavi-pc .btn-web.gnavi-pc__cta a {
	padding: var(--s2) 1.6rem;
}

/* PC: ハンバーガー非表示 */

.header-area--top .gnavi-ctrl,
.header-area--low .gnavi-ctrl {

	display: none;

}

/* 下層ヘッダー: ロゴ下の余白を確保してパンくずと重ならないように */
#pankuzuWrap {
    padding-top: 0;
}



/* ---------------------------------------------

index01(目次)

--------------------------------------------- */

.onb-index01-frame {

    width: 100%;

    background-color: var(--site-color09);

}

.onb-index01-wrap {

    margin: 0 auto;

}

/* =============================================================
    l-stack（xs〜xl）
============================================================= */
.l-stack-xs  { display: flex; flex-direction: column; gap: var(--s1); }
.l-stack-s   { display: flex; flex-direction: column; gap: var(--s2); }
.l-stack-sm  { display: flex; flex-direction: column; gap: var(--s3); }
.l-stack-m   { display: flex; flex-direction: column; gap: var(--s5); }
.l-stack-md  { display: flex; flex-direction: column; gap: var(--s8); }
.l-stack-l   { display: flex; flex-direction: column; gap: var(--s10); }
.l-stack-xl  { display: flex; flex-direction: column; gap: var(--s12); }

/* =============================================================
    TOP見出し共通（c-h2 / c-h3 / c-h4）
============================================================= */
.c-h2 {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--txt-emp);
}
.c-h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.5;
    color: var(--txt-emp);
}
.c-h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.5;
    color: var(--txt-emp);
}
.c-sec-head {
    text-align: center;
    margin-bottom: 3rem;
}
.c-staff__feature{
    margin-top:0;
}
.c-sec-label {
    display: inline-block;
    padding: var(--s-2) var(--s2);
    background: var(--site-color01);
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.c-sec-lead {
    width: 120rem;
    max-width: 100%;
    margin-inline: auto;
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* =============================================================
    MV（メインビジュアル）
============================================================= */

.c-mv {
    overflow-x: clip;
}
/* スライダー */
.c-mv__slider {
    overflow: hidden;
    padding: var(--s3) 0 var(--s5);
}
.c-mv__track {
    display: flex;
    gap: var(--s3);
    width: max-content;
    animation: mv-marquee 48s linear 1s infinite;
    animation-fill-mode: both;
}
.c-mv__item {
    width: 45vw;
    flex-shrink: 0;
}
.c-mv__item img {
    border-radius: var(--s4);
    width: 100%;
    display: block;
}
@keyframes mv-marquee {
    0%   { transform: translateX(calc(-17.5vw - var(--s3))); }
    100% { transform: translateX(calc(-17.5vw - var(--s3) - 3 * (45vw + var(--s3)))); }
}

/* テキスト・CTAエリア */
.c-mv__body .l-center {
    max-width: 100rem;
    margin-left: 0;
    padding-left: 0;
}
.c-mv__body {
    position: relative;
    z-index: 1;
    margin-top: -22rem;
    padding: var(--s5) 0 var(--s4) 34%;
}
.c-mv__body::before {
    content: '';
    position: absolute;
    inset: 0 0 0 34%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3rem 0 0 3rem;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    z-index: -1;
}
.c-mv__inner {
    max-width: none;
    padding-left: 7rem;
    position: relative;
}
.c-mv__balloon {
    position: absolute;
    top: calc(-1 * var(--s8) - 1rem);
    left: 5rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    background: var(--site-color01);
    color: var(--white);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    padding: var(--s1) var(--s4) var(--s2);
    border-radius: 5rem;
    white-space: nowrap;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
}
.c-mv__balloon-num {
    font-size: 4rem;
}
.c-mv__balloon::after {
    content: '';
    position: absolute;
    bottom: -1.6rem;
    left: var(--s5);
    width: 0;
    height: 0;
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-top: 1.9rem solid var(--site-color01);
    transform: rotate(-20deg);
    transform-origin: top center;
}
.c-mv__title {
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--txt-emp);
    margin: 0;
}
.c-mv__price {
    font-size: var(--fs-5xl);
    color: var(--site-color01);
    font-weight: 700;
}
.c-mv__bottom {
    display: flex;
    align-items: center;
    gap: var(--s5);
}
.c-mv__lead {
    flex: 1;
    font-size: var(--fs-base);
    line-height: 1.8;
    color: var(--txt-main);
    margin: 0;
}
.c-mv__bottom .btn-web a {
    padding-top: var(--s4);
    padding-bottom: var(--s4);
}
.c-mv__body .gnavi-pc__cta {
    margin: 0;
}

/* =============================================================
    ピックアップ（#recommended）
============================================================= */
.c-pickup {
    position: relative;
    z-index: 0;
    margin-top: -18rem;
    padding: calc(var(--s10) + 22rem) 0 24rem;
    background-color: var(--white);
    background-image:
        linear-gradient(#fec6bb 1px, transparent 1px),
        linear-gradient(90deg, #fec6bb 1px, transparent 1px);
    background-size: 70px 70px;
    background-position: 0 2rem;
}
.c-pickup .l-center {
    max-width: 120rem;
}
.c-pickup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: stretch;
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-pickup.is-visible .c-pickup__grid {
    opacity: 1;
    transform: translateY(0);
}
.c-pickup__box {
    background: var(--bg-pri);
    border-radius: var(--s3);
    padding: var(--s6) 3rem 4.5rem;
    position: relative;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
}
.c-pickup__box--campaign {
    background: var(--bg-sec);
}
.c-pickup__balloon {
    position: absolute;
    top: calc(-1 * var(--s3));
    left: var(--s3);
    display: inline-block;
    background: var(--site-color01);
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 700;
    padding: var(--s2) var(--s3) var(--s2) var(--s4);
    border-radius: 3rem;
    white-space: nowrap;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    /* グリッドのスライドが落ち着いた少し後に、吹き出しだけバウンドして登場させる */
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.4s ease 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}
.c-pickup.is-visible .c-pickup__balloon {
    opacity: 1;
    transform: scale(1);
}
.c-pickup__balloon::after {
    content: "";
    position: absolute;
    bottom: -1.6rem;
    left: 3rem;
    width: 0;
    height: 0;
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-top: 1.9rem solid var(--site-color01);
    transform: rotate(-20deg);
    transform-origin: top center;
}
.c-pickup__box-title {
    font-size: 3.6rem;
    font-weight: 700;
    text-align: center;
    color: var(--txt-emp);
    margin: 0 0 var(--s5);
    padding-bottom: var(--s3);
    position: relative;
}
.c-pickup__box-title::after {
    content: "";
    display: block;
    width: 3.2rem;
    height: 0.3rem;
    background: var(--site-color01);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.c-pickup__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.c-pickup__list li::before {
    display: none;
}
.c-pickup__list a {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: var(--white);
    border-radius: var(--s2);
    padding: 1.5rem 1.8rem 1.5rem 2.3rem;
    text-decoration: none;
    color: var(--txt-main);
    transition: opacity 0.2s;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.05);
}
.c-pickup__list a:hover {
    opacity: 0.6;
}
.c-pickup__list a::after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: url('img/arrow-right_black.png') no-repeat center / contain;
    flex-shrink: 0;
    margin-left: auto;
}
.c-pickup__box--campaign .c-pickup__list a {
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/* 免許プランアイコン（大） */
.c-pickup__icon {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.c-pickup__icon img {
    width: 56px;
    height: auto;
    display: block;
}
.c-pickup__icon--at img,
.c-pickup__icon--mt img {
    width: 42px;
}
.c-pickup__item-body {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    flex: 1;
    min-width: 0;
}
.c-pickup__item-name {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--txt-emp);
    display: flex;
    align-items: center;
    gap: var(--s1);
    line-height: 1.2;
}
.c-pickup__box--campaign .c-pickup__item-name {
    color: var(--site-color01);
}
.c-pickup__item-sub {
    font-size: var(--fs-sm);
    color: #333;
}
.c-pickup__item-sub em {
    font-style: normal;
    color: var(--site-color01);
    font-weight: 700;
}
.c-pickup__item-text {
    font-size: var(--fs-sm);
    color: var(--txt-main);
    margin: 0;
    line-height: 1.7;
}
/* キャンペーンアイコン（小） */
.c-pickup__icon-sm {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    vertical-align: middle;
}
.c-pickup__icon-sm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* =============================================================
    数字の実績
============================================================= */
.c-numbers {
    padding: 15rem 0 19rem;
    background-color: var(--site-color01);
    text-align: center;
    margin-top: -3rem;
}
/* .c-numbers__card は固定幅20rem×6項目＋gap＋padding(6rem×2)で約140rem必要なため、
   グローバルの.l-center（120rem）のままでは収まらない。このセクションだけ広げる */
.c-numbers .l-center {
    max-width: 150rem;
}
.c-numbers__logo {
    width: 12rem;
    aspect-ratio: 1;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--s4);
    padding: var(--s2);
}
.c-numbers__logo img {
    max-width: 80%;
    display: block;
}
.c-numbers__title {
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--s6);
    line-height: 1.4;
}
.c-numbers__card {
    background: var(--white);
    border-radius: 2rem;
    padding: 6rem;
    margin-bottom: var(--s3);
}
.c-numbers__list {
    display: flex;
    gap: var(--s2);
    justify-content: space-between;
}
.c-numbers__item {
    flex: none;
    width: 20rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    padding: var(--s4) var(--s2);
    background: var(--bg-pri);
    text-align: center;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.c-numbers.is-visible .c-numbers__item { opacity: 1; transform: scale(1); }
.c-numbers.is-visible .c-numbers__item:nth-child(1) { transition-delay: 0s; }
.c-numbers.is-visible .c-numbers__item:nth-child(2) { transition-delay: 0.2s; }
.c-numbers.is-visible .c-numbers__item:nth-child(3) { transition-delay: 0.4s; }
.c-numbers.is-visible .c-numbers__item:nth-child(4) { transition-delay: 0.6s; }
.c-numbers.is-visible .c-numbers__item:nth-child(5) { transition-delay: 0.8s; }
.c-numbers.is-visible .c-numbers__item:nth-child(6) { transition-delay: 1.0s; }
.c-numbers__item::before {
    display: none;
}
.c-numbers__label {
    font-size: var(--fs-lg);
    color: var(--txt-emp);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.c-numbers__note-mark {
    font-size: var(--fs-xs);
    font-weight: 400;
}
.c-numbers__value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 6rem;
    font-weight: 400;
    color: var(--site-color01);
    line-height: 1.1;
    white-space: nowrap;
}
.c-numbers__item:first-child .c-numbers__pre {
    margin-right: 0.5rem;
}
.c-numbers__pre,
.c-numbers__suf {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-left: 0.5rem;
}
.c-numbers__footnote {
    font-size: var(--fs-xs);
    color: var(--white);
    text-align: left;
    margin: 0 0 var(--s5);
    line-height: 1.4;
}
.c-numbers__cta {
    display: flex;
    justify-content: center;
}
.c-numbers__cta .btn-internal {
    margin: 0;
    max-width: 50rem;
}
.c-numbers__cta .btn-internal a {
    background-color: var(--site-color02);
    border-radius: 100px;
    padding-top: var(--s3);
    padding-bottom: var(--s3);
}
.c-numbers__cta .btn-internal:hover a {
    transform: none;
    opacity: 0.6;
}

/* =============================================================
    セクション切り替わり（スタックカード型：上部左右角丸 + 重ねる）
============================================================= */
/*
  仕組み（ネスト角丸）：
  - 各セクションに大きめの border-top-radius をかける
  - margin-top で前セクションに重ね、角丸が「つながって見える」
  - 半径 (8rem) > overlap (3rem) なので曲線が確実に見える
  - ::before（アイキャッチバッジ）は z-index: 2 で角丸の上に乗る
*/
.c-sec--rt {
    position: relative;
    z-index: 1;
    border-top-right-radius: 10rem;
	  border-bottom-right-radius: 10rem;
}

/* アイキャッチバッジ（上セクションに半分飛び出す） */
.c-sec-eyecatch {
    display: block;
    width: 21rem;
    height: 21rem;
    position: absolute;
    top: -10.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.c-numbers .c-sec-eyecatch  { background-image: url("img/eyecatch-numbers.png"); }
.c-features .c-sec-eyecatch { background-image: url("img/eyecatch-features.png"); top: -1rem;}
.c-compare .c-sec-eyecatch  { background-image: url("img/eyecatch-compare.png"); }
.c-staff .c-sec-eyecatch    { background-image: url("img/eyecatch-staff.png"); }
.c-manga .c-sec-eyecatch    { background-image: url("img/eyecatch-manga.png"); }
.c-plan .c-sec-eyecatch     { background-image: url("img/eyecatch-plan.png"); }
.c-access .c-sec-eyecatch   { background-image: url("img/eyecatch-access.png"); }
.c-voice .c-sec-eyecatch    { background-image: url("img/eyecatch-voice.png"); }
.c-faq .c-sec-eyecatch      { background-image: url("img/eyecatch-faq.png"); }

.c-numbers::before{
	content: "";
  display: block;
  width: 10rem;
  height: 10rem;
  background: url("img/radius_left_upper_red.svg?v=20260722") no-repeat right top/contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: -10rem;
  left: 0;
  z-index: -1;
}
.c-numbers::after{
	content: "";
  display: block;
  width: 10rem;
  height: 10rem;
  background: url("img/radius_left_bottom_red.svg?v=20260722") no-repeat right top/contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  bottom: -10rem;
  left: 0;
  z-index: 10;
}

/* =============================================================
    5つの特徴
============================================================= */
.c-features {
    margin-top: -10rem;
    padding: calc(var(--s10) + 36rem) 0 calc(var(--s10) + 13rem);
    z-index: auto;
    border-top-left-radius: 10rem;
    border-top-right-radius: inherit;
    background-color: var(--white);
    background-image:
        linear-gradient(#feefee 1px, transparent 1px),
        linear-gradient(90deg, #feefee 1px, transparent 1px);
    background-size: 70px 70px, 70px 70px;
    background-position: 0 35px, 0 35px;
    background-repeat: repeat, repeat;
}
.c-features__marquee {
    position: absolute;
    top: 22rem;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.c-features__marquee-track {
    display: flex;
    gap: 6rem;
    width: max-content;
    animation: features-marquee 120s linear infinite;
}
.c-features__marquee-track span {
    font-size: 14.8rem;
    font-weight: 700;
    color: rgba(227, 92, 68, 0.2);
    white-space: nowrap;
    letter-spacing: 0.08em;
}
@keyframes features-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* グリッドレイアウト */
.c-features__layout::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("img/bg-features.png");
    background-size: auto;
    background-position: center 30%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.c-features__layout {
    display: grid;
    grid-template-columns: 45.2rem 1fr 45.2rem;
    grid-template-areas:
        ".      card1  ."
        "card2  head   card3"
        "card4  .      card5"
        ".      cta    .";
    gap: var(--s8) var(--s5);
    position: relative;
    z-index: 1;
    max-width: 168rem;
    margin-left: auto;
    margin-right: auto;
    padding: var(--s8) 6rem var(--s6);
}
.c-features__card--01 { grid-area: card1; justify-self: center; }
.c-features__card--02 { grid-area: card3; margin-top: -20rem; }
.c-features__card--03 { grid-area: card5; margin-top: 8rem; transform: translateX(-18rem); }
.c-features__card--04 { grid-area: card4; margin-top: 8rem; transform: translateX(18rem); }
.c-features__card--05 { grid-area: card2; margin-top: -20rem; }
.c-features__head     { grid-area: head;  margin-top: -6rem; }
.c-features__cta      { grid-area: cta; }

/* カード共通 */
.c-features__card {
    background: var(--site-color09);
    border-radius: var(--s3);
    padding: 3rem;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    width: 45.2rem;
    /* スクロールで下からスッと上がるアニメーション。カード単位で監視し、
       各カードが実際に見えたタイミングで動かすため、遅延は付けない。
       --04/--05は既にtransform:translateX(...)でレイアウト位置をずらしているため、
       transformとは別に加算されるtranslateプロパティでスライドさせる */
    opacity: 0;
    translate: 0 4rem;
    transition: opacity 0.7s ease, translate 0.7s ease;
}
.c-features__card.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* 数字バッジ（吹き出し） */
.c-features__num {
    position: absolute;
    top: -8rem;
    left: 50%;
    background: var(--site-color01);
    color: var(--white);
    font-size: 2.8rem;
    font-weight: 700;
    padding: var(--s2) 5rem;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    /* カード本体のスライドが落ち着いた少し後に、バッジだけバウンドして登場させる。
       centering用のtranslateX(-50%)と同じtransformにscaleを追加して合成する */
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
    transition: opacity 0.4s ease 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}
.c-features__card.is-visible .c-features__num {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
/* 02〜05は同じ行に並ぶカードが同時に見えることがあるため、
   バッジのバウンドを少しずつ遅らせて順番に見せる */
.c-features__card--02.is-visible .c-features__num { transition-delay: 0.55s; }
.c-features__card--03.is-visible .c-features__num { transition-delay: 0.7s; }
.c-features__card--04.is-visible .c-features__num { transition-delay: 0.85s; }
.c-features__card--05.is-visible .c-features__num { transition-delay: 1s; }
.c-features__num::after {
    content: "";
    position: absolute;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-top: 1.9rem solid var(--site-color01);
}

/* カード画像 */
.c-features__card-img {
    width: 100%;
    border-radius: var(--s2);
    overflow: hidden;
    margin: var(--s3) 0 var(--s3);
}
.c-features__card-img img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* カード本文 */
.c-features__card-body .c-h3 {
    color: var(--site-color01);
}

/* 見出しブロック */
.c-features__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}
.c-features__head .c-sec-lead {
    width: 100%;
}

.c-features__accent {
    color: var(--site-color01);
    font-size: 6.4rem;
    line-height: 1;
}
.c-features__head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 1.6rem;
    margin-bottom: 2rem;
}
.c-features__head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}

/* CTAブロック */
.c-features__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* =============================================================
    比較セクション
============================================================= */
.c-compare {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    background: var(--bg-pri);
    z-index: 2;
    margin-top: -10rem;
}
.c-compare .l-center {
    max-width: 120rem;
}
.c-compare::before{
	content: "";
  display: block;
  width: 10rem;
  height: 10rem;
  background: url("img/radius_left_bottom_gray.svg?v=20260722") no-repeat right top/contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: -10rem;
  left: 0;
  z-index: -1;
}

.c-compare__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.8rem 0;
    border-top: inherit;
    border-left: inherit;
    /* スクロールで下からスッと上がるアニメーション（表全体をひとつの塊としてフェード） */
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-compare__table.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-compare__table th,
.c-compare__table td {
    text-align: center;
    vertical-align: middle;
    line-height: 1.6;
    padding: 2rem 2.4rem;
    border-top: inherit;
    border-left: inherit;
    font-weight: 700;
    border-bottom: 0.1rem solid #DAE2EA;
    font-size: 2rem;
}
.c-compare__table tbody tr:last-child th,
.c-compare__table tbody tr:last-child td {
    border-bottom: none;
}
.c-compare__table th:first-child,
.c-compare__table td:first-child {
    text-align: center;
    width: 16rem;
    min-width: 16rem;
    background: #DAE2EA;
    font-weight: 700;
    font-size: 1.6rem;
    border-right: none;
}
.c-compare__table th.c-compare__th-item {
    background: #DAE2EA;
    color: var(--txt-base);
    border-bottom: 0.3rem solid var(--white);
    border-top-left-radius: 3rem;
}
.c-compare__table th.c-compare__th-yumenori {
    background: var(--site-color01);
    color: var(--white);
    min-width: 22rem;
    border-left: 0.3rem solid var(--site-color01);
    border-right: 0.3rem solid var(--site-color01);
    border-bottom: none;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}
.c-compare__table th.c-compare__th-general {
    background: #7C9CAF;
    color: var(--white);
    min-width: 22rem;
    border-left: 0.3rem solid #7C9CAF;
    border-right: 0.3rem solid #7C9CAF;
    border-bottom: none;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}
.c-compare__table th.c-compare__th-licensed {
    background: #919699;
    color: var(--white);
    min-width: 22rem;
    border-left: 0.3rem solid #919699;
    border-right: 0.3rem solid #919699;
    border-bottom: none;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}
.c-compare__table tbody td.c-compare__td-yumenori {
    background: var(--white);
    font-weight: 700;
    border-left: 0.3rem solid var(--site-color01);
    border-right: 0.3rem solid var(--site-color01);
    border-bottom: 0.3rem solid var(--site-color01);
}
.c-compare__table tbody tr:last-child td.c-compare__td-yumenori {
    border-bottom: 0.3rem solid var(--site-color01);
}
.c-compare__table tbody th:first-child {
    border-bottom: 0.3rem solid var(--white);
}
.c-compare__table tbody tr:last-child th:first-child {
    border-bottom: none;
    border-bottom-left-radius: 3rem;
}
.c-compare__table tbody td:not(.c-compare__td-yumenori) {
    background: var(--white);
}
.c-compare__table tbody td:nth-child(3) {
    border-left: 0.3rem solid #7C9CAF;
    border-right: 0.3rem solid #7C9CAF;
    border-bottom: 0.3rem solid #7C9CAF;
}
.c-compare__table tbody td:nth-child(4) {
    border-left: 0.3rem solid #919699;
    border-right: 0.3rem solid #919699;
    border-bottom: 0.3rem solid #919699;
}
.c-compare__table tbody tr:last-child td:nth-child(3) {
    border-bottom: 0.3rem solid #7C9CAF;
}
.c-compare__table tbody tr:last-child td:nth-child(4) {
    border-bottom: 0.3rem solid #919699;
}
.c-compare__accent {
    color: var(--site-color01);
    font-weight: 700;
}
.c-compare__dark {
    color: #333;
}
.c-compare__table tbody td:nth-child(3) .c-compare__num {
    color: var(--site-color01);
}
.c-compare__table tbody td:nth-child(4) .c-compare__num--md {
    color: #333;
}
.c-compare__td-yumenori .c-compare__num {
    color: var(--site-color01);
}
.c-compare__table tbody tr:nth-child(1) .c-compare__td-yumenori .c-compare__unit {
    color: #333;
}
.c-compare__table th.c-compare__th-yumenori,
.c-compare__table th.c-compare__th-general,
.c-compare__table th.c-compare__th-licensed {
    font-size: 2.8rem;
}
.c-compare__num {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
}
.c-compare__num--md {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.c-compare__row--lg-num .c-compare__num--md {
    font-size: 3.6rem;
}
.c-compare__mark {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
}
.c-compare__unit {
    font-size: 1.6rem;
}
.c-compare__cta {
    text-align: center;
}
.c-compare__footnote {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--txt-sub);
    text-align: left;
    margin-top: calc(var(--s1) - var(--s3));
    margin-bottom: 0;
}
.c-compare__footnote-item {
    display: flex;
    gap: 0.4em;
}
.c-compare__footnote-item dt,
.c-compare__footnote-item dd {
    margin: 0 0 0.5rem;
}
.c-compare__footnote-item dt {
    flex-shrink: 0;
}
.c-compare .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-compare .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}

/* =============================================================
    代表・スタッフ紹介
============================================================= */
.c-staff {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    position: relative;
    z-index: 3;
}
.c-staff::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_left_top_gray.svg?v=20260722") no-repeat right top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#low-page .c-staff::before {
    display: none;
}
.c-staff::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("img/bg-staff.png");
    background-size: 141rem;
    background-position: 50% 68%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}
#low-page .c-staff {
    background-color: var(--bg-sec);
    padding-bottom: calc(var(--s10) + 8rem);
}
#low-page .c-staff::after {
    background-image: none;
}
.c-staff .l-stack-md {
    gap: var(--s14);
}
.c-staff .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-staff .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
/* クラス無しのh3（common.cssの#low-page h3:not([class])）にも
   .c-staff__subtitleと同じデザインを適用し、上書きする */
.c-staff__subtitle,
#low-page h3:not([class]) {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    width: auto;
    margin-block: 3rem 2rem;
    padding: 0;
    font-size: 3.2rem;
    line-height: 1.5;
    color: var(--txt-emp);
    border-bottom: none;
    font-weight: 700;
}
.c-staff__subtitle::before,
#low-page h3:not([class])::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    background: transparent;
    border: 0.7rem solid var(--site-color01);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.c-staff__members .c-staff__subtitle {
    margin-bottom: var(--s4);
}
.c-staff__catchcopy {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--site-color01);
    line-height: 1.6;
}
/* 代表メッセージ：見出し・画像・キャッチコピー・本文をグリッドで配置。
   PCは画像を左列にまとめて配置し、右列に見出し→キャッチコピー→本文を積む */
.c-staff__feature {
    display: grid;
    grid-template-columns: 69rem 1fr;
    grid-template-areas:
        "img title"
        "img catchcopy"
        "img text";
    column-gap: var(--s5);
    row-gap: var(--s3);
    align-items: start;
    /* スクロールで下からスッと上がるアニメーション（c-features__cardと同様、
       要素単位で監視し、それぞれが実際に見えたタイミングで動かす） */
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-staff__feature.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-staff__feature-title { grid-area: title; }
.c-staff__feature .c-staff__img { grid-area: img; }
.c-staff__feature .c-staff__catchcopy { grid-area: catchcopy; }
.c-staff__feature-text { grid-area: text; }
.c-staff__img img {
    max-width: 100%;
    display: block;
    border-radius: 3rem;
}
.c-staff__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s3);
}
.c-staff__member {
    text-align: center;
    width: 100%;
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-staff__member.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-staff__member img {
    max-width: 100%;
    border-radius: 3rem;
}
.c-staff__member .c-h4 {
    font-size: 2.4rem;
    text-align: left;
}
.c-staff__member p {
    text-align: left;
}
.c-staff__cta {
    text-align: center;
}

/* =============================================================
    マンガコンテンツ
============================================================= */
.c-manga {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    position: relative;
    z-index: 1;
    background-color: var(--bg-sec);
    background-image:
        linear-gradient(#fde3dc 1px, transparent 1px),
        linear-gradient(90deg, #fde3dc 1px, transparent 1px);
    background-size: 70px 70px;
    background-position: 0 35px, 0 35px;
    background-repeat: repeat, repeat;
}
/* 下層ページ（#low-page）ではボトムパディングを詰める */
#low-page .c-manga {
    padding-bottom: calc(var(--s10) + 5rem);
}
.c-manga::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_bottom_left_manga.svg?v=20260722") no-repeat right top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: -10rem;
    left: 0;
    z-index: 2;
}
.c-manga::after {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_top_left_manga.svg?v=20260722") no-repeat left bottom/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    bottom: -10rem;
    left: 0;
    z-index: 2;
}
.c-manga .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-manga .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-manga .l-grid-three {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
}
.c-manga__thumb {
    overflow: hidden;
    border-radius: var(--s3);
}
/* スクロールで下からスッと上がるアニメーション（カード単位で監視） */
.c-manga__card {
    display: flex;
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-manga__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-manga__card img {
    max-width: 100%;
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}
.c-manga__card:hover img {
    transform: scale(1.08);
}
/* グリッドの行内で高さを揃え、本文量が違っても末尾の要素（マンガを読む等）を下端で揃える */
.c-manga__card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.c-manga__card-link > *:last-child {
    margin-top: auto;
}
.c-manga__card .c-h3 {
    position: relative;
    padding-top: var(--s2);
    padding-right: var(--s6);
    font-size: 2.8rem;
    color: var(--site-color01);
}
.c-manga__card .c-h3::after {
    content: "";
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 47%;
    right: 0;
    background: url("img/arrow-right_black.png") no-repeat center/contain;
}
.c-manga__card p {
    padding-top: var(--s2);
    padding-bottom: var(--s3);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

/* =============================================================
    免許プラン・料金（詳細）
============================================================= */
.c-plan {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    position: relative;
}
.c-plan::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_left_bottom_gray.svg?v=20260722") no-repeat right top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: -10rem;
    left: 0;
    z-index: -1;
}
/* トップページは直前が漫画セクションのため、グレーの角丸装飾は不要（下層ページのFAQ→プランの繋ぎ目にのみ表示） */
#index .c-plan::before {
    display: none;
}
/* ページ最下部のセクションのため、次セクションへ繋げる右下の角丸は不要 */
.c-plan.c-sec--rt {
    border-bottom-right-radius: 0;
}
#low-page .c-plan {
    background-color: var(--bg-pri);
    z-index: 5;
    padding-bottom: calc(var(--s10) + 8rem);
}
.c-plan .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-plan .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-plan__row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
}
.c-plan__row--four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s5);
}
.c-plan__item {
    padding: var(--s5);
    background: var(--bg-sec);
    border-radius: var(--s3);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-plan__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-plan__item--sm {
    padding: 3rem;
}
.c-plan__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.c-plan__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-right: var(--s6);
    padding-bottom: var(--s2);
    margin-bottom: var(--s3);
    border-bottom: 0.2rem solid var(--site-color01);
}
.c-plan__item--wide .c-plan__head {
    padding-bottom: var(--s1);
}
.c-plan__head::after {
    content: "";
    width: 2rem;
    height: 2rem;
    position: absolute;
    bottom: calc(var(--s2) + 1.1rem);
    right: 0;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}
.c-plan__item--sm .c-plan__head::after {
    bottom: calc(var(--s2) + 0.8rem);
}
.c-plan__item--wide .c-plan__head::after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}
.c-plan__item .c-h3 {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    margin: 0;
}
.c-plan__item--wide .c-h3 {
    align-items: flex-start;
}
.c-plan__item .c-h3::before {
    content: "";
    display: block;
    width: 4.2rem;
    height: 6.5rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.c-plan__item--sm .c-h3::before {
    width: 3.2rem;
    height: 5.75rem;
}
.c-plan__title--at,
.c-plan__title--mt,
.c-plan__title--paper {
    font-size: 2.8rem;
}
.c-plan__title--at::before { background-image: url("img/icon-plan-at.png"); }
.c-plan__title--mt::before { background-image: url("img/icon-plan-mt.png"); }
.c-plan__title--kari::before { background-image: url("img/icon-plan-kari.png"); }
.c-plan__title--shikkou::before { background-image: url("img/icon-plan-shikkou.png"); }
.c-plan__title--gentei::before { background-image: url("img/icon-plan-gentei.png"); }
.c-plan__title--option::before { background-image: url("img/icon-plan-option.png"); }
.c-plan__title--paper::before { background-image: url("img/icon-plan-paper.png"); }
.c-plan__title--shutchou,
.c-plan__title--option-sub {
    font-size: 2.4rem;
}
.c-plan__title--shutchou::before,
.c-plan__title--option-sub::before {
    content: "";
    display: block;
    width: 4.8rem;
    height: 5.9rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.c-plan__title--shutchou::before { background-image: url("img/icon-plan-shutchou.png"); }
.c-plan__title--option-sub::before { background-image: url("img/icon-plan-option.png"); }
.c-plan__prices {
    width: 100%;
    margin-bottom: var(--s2);
    background: var(--white);
    border-collapse: collapse;
    border: none;
}
.c-plan__item--wide .c-plan__prices {
    width: calc((100% - var(--s4)) / 2 - 6rem);
}
.c-plan__prices th,
.c-plan__prices td {
    padding: var(--s1) var(--s2);
    text-align: center;
    border: none;
}
.c-plan__prices th {
    font-size: var(--fs-sm);
    background: var(--line);
    color: var(--txt-main);
    font-weight: 700;
    white-space: nowrap;
}
.c-plan__prices td {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--txt-main);
}
.c-plan__prices td.c-plan__price-value--accent {
    color: var(--site-color01);
}
.c-plan__prices td span {
    font-size: var(--fs-sm);
    color: var(--txt-main);
    font-weight: 400;
}
.c-plan__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-top: var(--s5);
}
.c-plan__option {
    padding: var(--s4);
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
}
.c-plan__option-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.c-plan__option-link .c-h4 {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s1);
    padding-right: var(--s5);
    margin: 0 0 var(--s2);
}
.c-plan__option-link .c-h4::after {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    bottom: 1rem;
    right: 0;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}

/* =============================================================
    アクセス
============================================================= */
.c-access {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    background: var(--bg-pri);
    z-index: 2;
}
.c-access .l-center {
    max-width: 120rem;
}
.c-access .btn-internal {
    margin-top: var(--s10);
}
.c-access .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-access .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-access::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_left_bottom_gray.svg?v=20260722") no-repeat right top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: -10rem;
    left: 0;
    z-index: -1;
}
.c-access__item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    text-align: left;
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-access__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-access__photo {
    flex-shrink: 0;
    width: 42%;
    border-radius: var(--s2);
    overflow: hidden;
}
.c-access__photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.c-access__body {
    flex: 1;
}
.c-access__name {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-2xl);
    margin: 0 0 var(--s2);
    font-weight: 700;
}
.c-access__marker {
    display: block;
    width: 3.7rem;
    height: 3.7rem;
    flex-shrink: 0;
    border: 0.7rem solid var(--site-color01);
    border-radius: 50%;
}
.c-access__addr {
    margin: 0 0 var(--s1);
    line-height: 1.6;
    font-size: var(--fs-base);
}
.c-access__route {
    margin: 0;
    line-height: 1.6;
    font-size: var(--fs-sm);
    color: var(--txt-sub);
}

/* =============================================================
    受講生の声
============================================================= */
.c-voice .l-grid-three {
    grid-gap: 3rem;
    grid-template-columns: repeat(3, 1fr);
}
.c-voice {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 13rem);
    z-index: 3;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 10rem;
    background-color: var(--white);
    background-image:
        linear-gradient(#feefee 1px, transparent 1px),
        linear-gradient(90deg, #feefee 1px, transparent 1px);
    background-size: 70px 70px, 70px 70px;
    background-position: 0 35px, 0 35px;
    background-repeat: repeat, repeat;
}
.c-voice .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-voice .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-voice::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_left_top_gray.svg?v=20260722") no-repeat right top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#low-page .c-voice::after {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_bottom_left_manga.svg?v=20260722") no-repeat left bottom/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}
.c-voice__card {
    position: relative;
    background: var(--bg-sec);
    border-radius: var(--s3);
    padding: 5rem;
    margin-bottom: var(--s5);
    filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.15));
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-voice__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.c-voice__card::after {
    content: "";
    position: absolute;
    bottom: -2.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 1.2rem solid transparent;
    border-right: 1.2rem solid transparent;
    border-top: 2.8rem solid var(--bg-sec);
}
.c-voice__title {
    font-size: 2.4rem;
    color: var(--site-color01);
    font-weight: 700;
    margin-bottom: var(--s4);
}
.c-voice__card p {
    font-size: var(--fs-sm);
    line-height: 1.8;
    margin: 0;
}
.c-voice__card p::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: var(--s5) 0 0 auto;
    background: url("img/icon-voice-person.png") no-repeat center/contain;
}
.c-voice__extra {
    display: none;
}
.c-voice__more {
    max-width: 46rem;
    width: 100%;
    margin: var(--s5) auto 0;
    padding: var(--s4) var(--s6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    background: var(--white);
    border: 0.3rem solid #DAE2EA;
    border-radius: 10rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
    color: var(--txt-main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.3s;
}
.c-voice__more:hover {
    opacity: 0.6;
}
.c-voice__more-icon {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s;
}
.c-voice__more.is-open .c-voice__more-icon {
    transform: rotate(45deg);
}

/* =============================================================
    よくあるご質問
============================================================= */
.c-faq {
    position: relative;
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 8rem);
    background-color: var(--bg-sec);
    z-index: 4;
    border-bottom-right-radius: inherit;
}
#low-page .c-faq {
    background-color: var(--white);
    /* 角のSVG装飾は使わず、左右ともデバイス端まで背景をつなげる */
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2) * 2);
    padding-left: max(0px, (100vw - 120rem) / 2);
    padding-right: max(0px, (100vw - 120rem) / 2);
    border-radius: 0;
}
.c-faq .l-center {
    max-width: 120rem;
}
.c-faq .btn-internal {
    margin-top: var(--s8);
}
.c-faq::before {
    content: "";
    display: block;
    width: 10rem;
    height: 10rem;
    background: url("img/radius_bottom_left_manga.svg?v=20260722") no-repeat left top/contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: -10rem;
    left: 0;
}
#low-page .c-faq::before {
    display: none;
}
#low-page .c-faq::after {
    display: none;
}
/* 「特徴」ページ（page-feature.php／#low-page.low-page--feature）だけは
   角のSVG装飾を表示する。カテゴリTOP（category.php）側は上のdisplay:noneのまま */
#low-page.low-page--feature .c-faq::before {
    display: block;
    top: 0;
    left: max(0px, (100vw - 120rem) / 2);
    background: url("img/radius_top_left_manga.svg?v=20260722") no-repeat left top/contain;
}
/* category.phpの#low-pageに.l-centerを追加(2026-07-27)したことに伴い、
   feature.html/top.html由来の各セクション背景が.l-center配下に置かれても
   ビューポート端まで正しくブリードするよう、.c-faqと同じはみ出し計算を適用する。
   #low-pageにl-centerが無いテンプレート（page-feature.php/page-top-page.php等）でも
   この計算式は無害（.c-faqで実績あり） */
#low-page .c-numbers,
#low-page .c-compare,
#low-page .c-staff,
#low-page .c-manga,
#low-page .c-plan,
#low-page .c-access,
#low-page .c-voice,
#low-page .c-appeal,
#low-page .c-pickup {
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2) * 2);
    padding-left: max(0px, (100vw - 120rem) / 2);
    padding-right: max(0px, (100vw - 120rem) / 2);
}
.c-faq .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-faq .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.c-faq__item {
    background: var(--white);
    border-radius: var(--s3);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    padding: 0 5rem 2rem;
}
/* スクロールで下からスッと上がるアニメーション */
.c-faq .c-faq__item {
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.c-faq .c-faq__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
#low-page .c-faq__item {
    background: var(--bg-sec);
}
.c-faq__q {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 4rem 0 2.5rem;
    cursor: pointer;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6;
    position: relative;
    padding-right: 7rem;
    margin: 0;
}
.c-faq__q::after {
    content: "";
    width: 5rem;
    height: 1px;
    background: var(--txt-emp);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
.c-faq__q::before {
    content: "";
    width: 1px;
    height: 5rem;
    background: var(--txt-emp);
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
.c-faq__q.is-open::after {
    transform: translateY(-50%) rotate(45deg);
}
.c-faq__q.is-open::before {
    transform: translateY(-50%) rotate(45deg);
}
.c-faq__q.is-open {
    border-bottom: 0.1rem solid var(--line);
}
.c-faq__a {
    display: none;
    padding: 3rem 0 4rem;
    margin: 0;
}
.c-faq__a-inner {
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.c-faq__a p {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0;
}
.c-faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--site-color01);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.c-faq__icon--a {
    background: none;
    color: var(--site-color01);
}

/* =============================================================
    特徴ページ：リード文
============================================================= */
.c-page-lead {
    text-align: center;
    padding: 0;
}
.c-page-lead .c-mv-lower__lead {
    width: 100rem;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 8rem;
}
/* 下層テンプレート（single.php／cate.html。#low-pageにl-centerが直接付く）だけ狭める。
   cate_top.html／feature.htmlには影響しない */
#low-page.l-center .c-page-lead .c-mv-lower__lead {
    margin-bottom: 7.5rem;
}
.c-page-lead--no-badge .c-mv-lower__lead {
    margin-bottom: 6rem;
}

/* =============================================================
    特徴ページ：魅力セクション
============================================================= */
.c-appeal {
    padding: calc(var(--s10) + 8rem) 0 calc(var(--s10) + 20rem);
}
.c-appeal__banner {
    border-radius: var(--s3);
    overflow: hidden;
    margin-bottom: var(--s6);
}
.c-appeal__banner img {
    width: 100%;
    display: block;
}
.c-appeal .c-sec-head {
    text-align: left;
}
.c-appeal__catch {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--site-color01);
    line-height: 1.6;
    text-align: left;
}
.c-appeal .c-h2 {
    position: relative;
    font-size: 3.6rem;
    text-align: left;
    padding-bottom: 1.6rem;
    margin-bottom: 2rem;
}
.c-appeal .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-appeal .c-sec-lead {
    margin-inline: 0;
    text-align: left;
}
.c-appeal__list {
    margin-top: var(--s8);
}
.c-appeal__item {
    align-items: center;
    gap: 7.8rem;
    margin-bottom: 15rem;
}
.c-appeal__item:last-child {
    margin-bottom: 0;
}
.c-appeal__body {
    flex: 1 1 0%;
    min-width: 0;
}
.c-appeal__img {
    width: 64rem;
    flex-shrink: 0;
    border-radius: var(--s2);
    overflow: hidden;
}
.c-appeal__img img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.c-appeal__tag {
    display: inline-block;
    align-self: flex-start;
    position: relative;
    background: var(--site-color01);
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 700;
    padding: var(--s1) var(--s3) var(--s2) var(--s4);
    border-radius: 3rem;
    white-space: nowrap;
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    margin-top: var(--s2);
    z-index: 1;
}
.c-appeal__tag::after {
    content: "";
    position: absolute;
    bottom: -1.6rem;
    left: 3rem;
    width: 0;
    height: 0;
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-top: 1.9rem solid var(--site-color01);
    transform: rotate(-20deg);
    transform-origin: top center;
}
.c-appeal__points {
    background: var(--bg-sec);
    border-radius: var(--s3);
    padding: var(--s5) var(--s6) var(--s4);
    margin-top: calc(-1 * var(--s3));
}
.c-appeal__points li {
    position: relative;
    padding-left: var(--s4);
    line-height: 1.6;
}
.c-appeal__points li:not(:last-child) {
    margin-bottom: var(--s2);
}
.c-appeal__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9em;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--site-color01);
    transform: translateY(-50%);
}
.c-appeal__body .c-h3 {
    color: var(--site-color01);
    font-size: 3.6rem;
    line-height: 1.4;
}
/* =============================================================
    CTA
============================================================= */
/* .c-ctaの直前に来る本文側に、バッジ（.c-sec-eyecatch、上に10.5rem突き出る）分の
   クリアランスを確保する。.c-cta自体はmargin-top:0で直前と詰めているため、
   本文の末尾がここより浅いとバッジが文字にかぶってしまう。
   single.php/category.phpは#low-page自体にl-centerが付き、page.phpは#low-page内側の
   .l-centerが本文ラッパーになるため、両方に効くようセレクタを分けている */
#low-page.l-center,
#low-page > .l-center {
    padding-bottom: 12rem;
}
.c-cta {
    position: relative;
    margin-top: 0;
    padding: 10em 0 10rem;
    background-image: url("img/bg-cta.jpg");
    background-size: 100%;
    background-position: 0 79%;
    background-repeat: no-repeat;
}
.c-cta .c-sec-eyecatch {
    background-image: url("img/eyecatch-numbers.png");
    z-index: 99;
}
.c-cta .l-center {
    max-width: 120rem;
    padding-top: 15rem;
    padding-bottom: 8rem;
}
.c-cta__inner {
    position: relative;
    z-index: 1;
    margin-bottom: 18rem;
}
.c-cta .c-h2 {
    color: var(--white);
    text-align: left;
}
.c-cta__lead {
    max-width: 60rem;
    color: var(--white);
    text-align: left;
    font-size: var(--fs-md);
    line-height: 1.8;
    margin: 0;
}
.c-cta__card {
    position: relative;
    z-index: 1;
    max-width: 120rem;
    margin: -14rem auto 0;
    background: rgba(245, 245, 245, 0.8);
    border-radius: 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--s6);
    padding: 5rem 6rem;
}
.c-cta__card-body {
    max-width: 50rem;
}
.c-cta__card-text {
    margin: 0 0 var(--s4);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-cta .btn-web {
    max-width: 40rem;
    margin: 0;
}
.c-cta .btn-web a {
    background-color: var(--site-color05);
    background-image: none;
    padding: var(--s3) var(--s5);
    text-align: center;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
}
.c-cta .btn-web::after {
    display: none;
}
.c-cta .btn-web:hover a {
    transform: none;
    opacity: 0.6;
}
.c-cta__qr {
    flex-shrink: 0;
    width: 16rem;
}
.c-cta__qr img {
    width: 100%;
    display: block;
    border-radius: 0.8rem;
}

/* =============================================================
    フッター
============================================================= */
.footer-area {
    padding: var(--s8) 0 0;
    background: var(--site-color01);
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s8);
    padding-bottom: var(--s8);
}
.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
}
.footer-info__title {
    margin: 0 0 var(--s2);
    color: var(--white);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.5;
}
.footer-info__addr {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-sm);
    line-height: 1.8;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s8);
}
.footer-nav__col {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.footer-nav__col li::before {
    display: none;
}
.footer-nav__col a {
    color: var(--white);
    font-size: var(--fs-base);
    text-decoration: none;
}
.footer-sub {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s4);
    padding-bottom: var(--s3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: var(--s3);
    max-width: 150rem;
}
.footer-sub__group {
    display: flex;
    gap: var(--s4);
}
.footer-sub__link {
    color: var(--white);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.footer-bottom {
    padding: var(--s1) 0;
    background: rgba(0, 0, 0, 0.15);
}
.footer-bottom .footer-copyright {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-xs);
    text-align: center;
}
.page-top {
    background: #333;
}
.page-top__link {
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
}
.page-top__arrow {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background: url("img/arrow-right_white.png") no-repeat center/contain;
    transform: rotate(-90deg);
}

/* =============================================================
    PC下層バナー（固定表示・LINE誘導） ※SPは非表示
============================================================= */
.c-floatBanner {
    display: none;
}
.c-spFixedBar {
    display: none;
}
@media screen and (min-width: 768px) {
    .c-floatBanner {
        display: block;
        position: fixed;
        right: 0;
        bottom: calc(var(--s7) + 6rem + var(--s3));
        z-index: 9;
        width: 24rem;
        padding: var(--s2);
        background: var(--white);
        border: 0.2rem solid var(--site-color01);
        border-right: none;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .c-floatBanner.js-show {
        opacity: 1;
    }
}
.c-floatBanner__close {
    position: absolute;
    top: -1.2rem;
    left: -1.2rem;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: #333;
    color: var(--white);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* トップページ「マンガでわかる」セクション（.c-manga）と同じピンク格子背景 */
.c-floatBanner__panel {
    margin-right: calc(-1 * var(--s4));
    margin-bottom: var(--s2);
    padding: var(--s2) calc(var(--s3) + var(--s2)) var(--s2) var(--s2);
    border-top-left-radius: var(--s3);
    border-bottom-left-radius: var(--s3);
    background-color: var(--bg-sec);
    background-image:
        linear-gradient(#fde3dc 1px, transparent 1px),
        linear-gradient(90deg, #fde3dc 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 10px, 0 10px;
    background-repeat: repeat, repeat;
}
.c-floatBanner__thumb {
    display: block;
    border-radius: var(--s2);
    overflow: hidden;
}
.c-floatBanner__thumb img {
    width: 100%;
    display: block;
}
.c-floatBanner__catch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: var(--s1) 0 0;
    color: var(--site-color01);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.4;
    text-decoration: none;
}
.c-floatBanner__arrow {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #1a1a1a url("img/arrow-right_white.png") no-repeat center/1.2rem auto;
}
.c-floatBanner__cta {
    margin: 0;
}
.c-floatBanner .btn-web a {
    background-color: var(--site-color05);
    background-image: none;
    padding: var(--s3) var(--s3);
    text-align: center;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
}
.c-floatBanner .btn-web::after {
    display: none;
}
.c-floatBanner .btn-web:hover a {
    transform: none;
    opacity: 0.6;
}
.page-top__text {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

/* =============================================================
    MV（下層）
============================================================= */
.c-mv-lower {
    position: relative;
    padding: 43rem 0 0rem;
    text-align: center;
    background-color: var(--white);
    background-image:
        linear-gradient(#feefee 1px, transparent 1px),
        linear-gradient(90deg, #feefee 1px, transparent 1px);
    background-size: 70px 70px, 70px 70px;
    background-position: 0 35px, 0 35px;
    background-repeat: repeat, repeat;
}
.c-mv-lower::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15rem;
    background: var(--white);
    border-radius: 15rem 15rem 0 0;
    box-shadow: 0 0.4rem 0.4rem 0.9rem rgba(0, 0, 0, 0.04);
    clip-path: inset(-3rem -3rem 0 -3rem);
    z-index: 1;
}
.c-mv-lower__marquee {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.c-mv-lower__marquee-track {
    display: flex;
    gap: 6rem;
    width: max-content;
    animation: features-marquee 120s linear infinite;
}
.c-mv-lower__marquee-track span {
    font-size: 14.8rem;
    font-weight: 700;
    color: rgba(227, 92, 68, 0.2);
    white-space: nowrap;
    letter-spacing: 0.08em;
}
.c-mv-lower__inner {
    position: relative;
    z-index: 1;
    padding: 0 0 4rem;
    text-align: center;
    background: var(--white);
    max-width: inherit;
    margin-top: -3rem;
}
.c-mv-lower__badge {
    position: absolute;
    left: 50%;
    bottom: 15rem;
    transform: translate(-50%, 50%);
    width: 20rem;
    z-index: 2;
}
.c-mv-lower__badge img {
    width: 100%;
    display: block;
}
.c-mv-lower__title {
    margin: var(--s5) 0 0;
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--site-color01);
}
/* 404ページ：MVタイトル（本来のh1枠）だけ中央寄せにする */
.c-mv-lower__title--404 {
    text-align: center;
}
/* 404ページ：本文（お探しのページが〜／トップページへ戻る）を中央寄せにし、
   下に余白を持たせる */
.c-404 {
    text-align: center;
    padding-bottom: var(--s10);
}
.c-mv-lower__lead {
    margin: 0 0 15rem;
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* 下層コンテンツ：角丸はヘッダー装飾（.c-mv-lower）側が持つため、ここは背景色のみ */
#contents {
    background: var(--white);
}

/* =============================================================
    カテゴリTOP：詳細リンク共通ボタン（詳細を見る＋丸矢印）
============================================================= */
.c-cate-top__more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--txt-main);
    text-decoration: none;
}
.c-cate-top__more-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--txt-emp);
    background-image: url("img/arrow-right_white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

/* =============================================================
    カテゴリTOP：注目リンクカード（4件）
============================================================= */
.c-cate-top__cards {
    max-width: 120rem;
    margin-inline: auto;
    padding: calc(var(--s10) + 4rem);
    background-color: var(--bg-pri);
    border-radius: 10rem;
}
.c-cate-top__cards .c-sec-head .c-h2 {
    font-size: 3.6rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-cate-top__cards .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-cate-top__card {
    background: var(--white);
    border: 0.1rem solid var(--site-color01);
    border-radius: var(--s3);
    padding: var(--s5);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.05);
    transition: opacity 0.3s;
}
.c-cate-top__card:hover {
    opacity: 0.6;
}
.c-cate-top__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.c-cate-top__card-head {
    margin-bottom: var(--s4);
}
.c-cate-top__card-head .c-h3 {
    position: relative;
    padding-right: var(--s6);
    font-size: 2.8rem;
    color: var(--site-color01);
    display: block;
}
.c-cate-top__card-head .c-h3::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}
.c-cate-top__card-text {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin-bottom: var(--s5);
}

/* =============================================================
    カテゴリTOP：h2見出しバナー（road line装飾）
    ※クラス無しのh2（common.cssの#low-page h2:not([class])）にも
      同じデザインを適用し、上書きする
============================================================= */
.c-cate-top__h2-banner,
#low-page h2:not([class]) {
    display: flex;
    align-items: center;
    gap: var(--s6);
    width: auto;
    margin: 6rem 0;
    padding: var(--s6) var(--s8);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--txt-emp);
    background-color: var(--bg-pri);
    border-left: none;
    border-radius: 1rem;
}
/* 2つ目以降のクラス無しh2は、前の文章との区切りが分かるよう上余白を広めにする */
#low-page h2:not([class]):not(:first-of-type) {
    margin-top: 10rem;
}
.c-cate-top__h2-banner::before,
.c-cate-top__h2-banner::after,
#low-page h2:not([class])::before,
#low-page h2:not([class])::after {
    content: "";
    flex: 1;
    height: 0.8rem;
    background-image: repeating-linear-gradient(
        to right,
        var(--white) 0,
        var(--white) 3rem,
        transparent 3rem,
        transparent 5.5rem
    );
    background-repeat: repeat-x;
}

/* リンク付き見出し（中に<a>を含む場合）：road line／丸バレット装飾はそのまま維持し、
   矢印だけ見出し全体の右端（h2/h3のposition:relative基準）に絶対配置する。
   common.css側でaに指定済みのbackground矢印は使わず打ち消す */
#low-page h2:not([class]):has(a),
#low-page h3:not([class]):has(a),
#low-page h4:not([class]):has(a),
#low-page h5:not([class]):has(a) {
    position: relative;
}
/* 矢印分の余白を見出し自体（テキストの折り返し幅を決める要素）に確保し、テキストと重ならないようにする */
#low-page h2:not([class]):has(a),
#low-page h3:not([class]):has(a),
#low-page h4:not([class]):has(a),
#low-page h5:not([class]):has(a) {
    padding-right: calc(2rem + var(--s2) * 2);
}
#low-page h2:not([class]):has(a) a,
#low-page h3:not([class]):has(a) a,
#low-page h4:not([class]):has(a) a,
#low-page h5:not([class]):has(a) a {
    background: none;
    padding-right: 0;
}
#low-page h2:not([class]):has(a) a::after,
#low-page h3:not([class]):has(a) a::after,
#low-page h4:not([class]):has(a) a::after,
#low-page h5:not([class]):has(a) a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}
/* テキスト部分だけだとクリックしづらいため、見出し全体（h2〜h5のposition:relative基準）を
   クリック範囲にする透明レイヤーをa::beforeで重ねる */
#low-page h2:not([class]):has(a) a::before,
#low-page h3:not([class]):has(a) a::before,
#low-page h4:not([class]):has(a) a::before,
#low-page h5:not([class]):has(a) a::before {
    content: "";
    position: absolute;
    inset: 0;
}

/* =============================================================
    カテゴリTOP：小見出し導入（バナー＋リード＋小見出しカード）
============================================================= */
.c-cate-top__intro {
    padding: calc(var(--s10) + 4rem) 0;
    background-color: var(--white);
}
/* h2直後の説明文：c-sec-lead（他セクションと共通利用）は使わず、この位置専用に指定
   （リード文ではなく単なる説明文のため、クラス名も外している） */
.c-cate-top__intro > p,
.c-cate-top__issues > p{
    width: 120rem;
    max-width: 100%;
    margin: 0 auto var(--s6);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-cate-top__intro .c-cate-top__case-head {
    margin-bottom: var(--s1);
}
.c-cate-top__intro .l-grid-two-large {
    margin-bottom: var(--s8);
}
.c-cate-top__intro .l-grid-two-large:last-child {
    margin-bottom: 0;
}
.c-cate-top__case-grid {
    --minimum: calc((100% - 8rem) / 2);
    gap: 8rem;
}
.c-cate-top__intro .l-grid-three {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
    margin-bottom: var(--s8);
}
.c-cate-top__intro .l-grid-three:last-child {
    margin-bottom: 0;
}

/* =============================================================
    フロート画像（画像左/右・PC時のみフロート、SPは縦積み）
============================================================= */
.l-float {
    margin-bottom: var(--s8);
}
.l-float .c-staff__subtitle {
    margin: 0 0 var(--s3);
}
.l-float .c-staff__catchcopy {
    margin: 0 0 var(--s3);
}
/* 画像幅は「代表・スタッフ紹介」（.c-staff__feature .c-staff__img）と同じ69remに揃える */
.c-cate-top__intro .l-float__left-pc,
.c-cate-top__intro .l-float__right-pc {
    width: 69rem;
}
.l-float__left-pc img,
.l-float__right-pc img {
    display: block;
    border-radius: 3rem;
}
/* 画像中央配置：画像・キャッチ・テキストをまとめて100rem幅に揃えて中央寄せ */
.c-cate-top__center-block {
    width: 100rem;
    max-width: 100%;
    margin: 0 auto;
}
.c-cate-top__center-block .l-float__center {
    width: 100%;
    margin: 0 0 var(--s5);
}
.l-float__center img {
    width: 100%;
    display: block;
    border-radius: 3rem;
}

/* =============================================================
    回り込み画像3点セット（low-*-img-box）
    ※HTMLは低層ページパーツ用（引用元キャプション付き）のまま、
      見た目はフロート画像（.l-float）と揃える
============================================================= */
.low-center-img-box,
.low-left-img-box,
.low-right-img-box {
    margin-bottom: var(--s8);
}
.low-center-img-box-manga .low-center-img img{
    margin-bottom: var(--s8);
	border-radius: 0;
}
.low-center-img-box .c-staff__subtitle,
.low-left-img-box .c-staff__subtitle,
.low-right-img-box .c-staff__subtitle {
    margin: 0 0 var(--s3);
}
.low-center-img-catch,
.low-left-img-catch,
.low-right-img-catch {
    font-size: var(--fs-xl);
    color: var(--site-color01);
    line-height: 1.6;
}
/* 画像幅・角丸をl-float__left-pc/right-pcと同じ69rem・3remに揃える */
.low-left-img,
.low-right-img {
    width: 69rem;
}
.low-center-img img,
.low-left-img img,
.low-right-img img {
    display: block;
    border-radius: 3rem;
}
/* 中央配置：画像・キャッチ・テキストをまとめて100rem幅に揃えて中央寄せ（l-float__centerと同仕様） */
.low-center-img-box {
    width: 100rem;
    max-width: 100%;
    margin-inline: auto;
}


/* =============================================================
    こんな課題ありませんかBOX（c-lowIssueSec）
    ※c-cate-top__concern（本ファイル上部の既存セクション）と同じ見た目に統一
      HTMLはパーツ集追加分のまま（見出し+リストがc-lowIssue直下）
============================================================= */
.c-lowIssueSec {
    position: relative;
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2));
    padding: calc(var(--s10) + 2rem) max(0px, (100vw - 120rem) / 2) calc(var(--s10) + 2rem) var(--s6);
    background-color: var(--bg-pri);
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
}
.c-lowIssue {
    max-width: 120rem;
    margin: 0 auto;
}
.c-lowIssue__title {
    margin: 0 0 3rem;
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--txt-emp);
}
.c-lowIssue ul {
    margin: 0;
    padding: var(--s6) var(--s8);
    list-style: none;
    background: var(--white);
    border-radius: 2rem;
    text-align: left;
}
.c-lowIssue ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s2) 0;
    margin-bottom: 0;
    font-weight: 700;
    color: var(--txt-main);
}
.c-lowIssue ul li::before {
    content: "";
    position: static;
    flex-shrink: 0;
    margin-top: 0.58rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--site-color01);
}

/* =============================================================
    ステップBOX（c-stepFlowSec）
    ※c-cate-top__issues-list（本ファイル上部の既存セクション）と同じ見た目に統一
      HTMLはパーツ集追加分のまま。rail内のdot/arrow（連結線）は非表示にし、
      labelを番号バッジとしてrailに重ねて表示する
============================================================= */
.c-stepFlowSec {
    margin-bottom: var(--s8);
}
.c-stepFlow {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}
.c-stepFlow__item {
    position: relative;
    min-height: 12rem;
    padding-left: calc(12rem + var(--s6));
}
.c-stepFlow__rail {
    position: absolute;
    top: 0;
    left: 0;
    width: 12rem;
    height: 12rem;
    border-radius: 2rem;
    background: var(--bg-sec);
}
.c-stepFlow__dot,
.c-stepFlow__arrow {
    display: none;
}
.c-stepFlow__label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 12rem;
    margin: 0;
    padding: 0 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--site-color01);
}
.c-stepFlow__title {
    margin: 0 0 var(--s2);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.5;
    color: var(--txt-emp);
}
.c-stepFlow__text {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* =============================================================
    担当者のコメントBOX（c-commentCaseSec）
    ※c-cate-top__comment（本ファイル上部の既存セクション）と同じデザイン・内容
      HTMLはパーツ集追加分のまま（meta見出しはheadMain内、
      head内でheadMain＋thumbが横並び）
============================================================= */
.c-commentCaseSec {
    padding: 0 0 calc(var(--s10) + 2rem);
    background-color: var(--white);
}
.c-commentCase {
    max-width: 120rem;
    margin: 0 auto;
    background: var(--bg-sec);
    border-radius: 3rem;
    padding: var(--s7) var(--s8);
}
.c-commentCase__head {
    margin-bottom: var(--s3);
}
/* metaは見出しとして全幅で最初に表示。thumbはmetaの直後からfloatし、
   タイトル・名前・本文（c-commentCase__text）がその右へ回り込む */
.c-commentCase__meta {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0 0 var(--s6);
    padding-bottom: var(--s4);
    border-bottom: 0.2rem solid var(--site-color01);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--txt-emp);
}
.c-commentCase__meta::before {
    content: "";
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border: 0.7rem solid var(--site-color01);
    border-radius: 50%;
}
.c-commentCase__thumb {
    float: left;
    width: 14rem;
    margin-right: var(--s6);
}
.c-commentCase__thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--s3);
    display: block;
}
.c-commentCase__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--site-color01);
    margin: 0 0 var(--s2);
}
.c-commentCase__name {
    font-weight: 700;
    color: var(--txt-emp);
    margin: 0;
}
.c-commentCase__text {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0 0 var(--s6);
}
.c-commentCase__cta {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s5);
    background: var(--white);
    border-radius: var(--s3);
    padding: var(--s5) var(--s6);
}
.c-commentCase__ctaLead {
    font-weight: 700;
    color: var(--txt-emp);
    margin: 0;
}
.c-commentCase__cta .btn-web {
    flex-shrink: 0;
    width: 36rem;
    max-width: 100%;
    margin: 0;
}
.c-commentCase__cta .btn-web a {
    background-color: var(--site-color05);
    background-image: none;
    padding: var(--s3) var(--s5);
    text-align: center;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
}
.c-commentCase__cta .btn-web::after {
    display: none;
}
.c-commentCase__cta .btn-web:hover a {
    transform: none;
    opacity: 0.6;
}

/* =============================================================
    2つ並びBOX（c-lowCards）※Notion元ソースのクラス名のまま使用。
      l-grid-2は実在しないため実際のユーティリティl-grid-two-largeに差し替え。
      内部リンクボタンはc-lowCardsAltと同じ丸矢印テキストリンクに統一
============================================================= */
.c-lowCards {
    margin-bottom: var(--s8);
}
.c-lowCards__item {
    margin-bottom: var(--s6);
}
.c-lowCards__title {
    margin: 0 0 var(--s3);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--site-color01);
}
.c-lowCards__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--s3);
    margin-bottom: var(--s4);
}
.c-lowCards__text {
    margin: 0 0 var(--s2);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-lowCards__btn {
    margin-top: 0;
}
.c-lowCards__more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--txt-main);
    text-decoration: none;
}
.c-lowCards__more::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--txt-emp);
    background-image: url("img/arrow-right_white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

/* =============================================================
    3つ並びBOX（c-lowCardsAltSec）※Notion元ソースのクラス名のまま使用。
      画像・料金表・内部リンクボタンを縦に並べ、c-cate-top__case-itemと
      同等の見た目に統一（料金表はcate.html側の情報を保持するため追加）
============================================================= */
.c-lowCardsAltSec {
    margin-bottom: var(--s8);
}
.c-lowCardsAlt__grid {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
}
.c-lowCardsAlt__title {
    margin: 0 0 var(--s3);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--site-color01);
}
.c-lowCardsAlt__item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--s3);
    margin-bottom: var(--s4);
}
.c-lowCardsAlt__text {
    margin: 0 0 var(--s4);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-lowCardsAlt__item .c-cate-top__case-prices {
    margin: 0 0 var(--s4);
}
.c-lowCardsAlt__btn {
    margin-top: var(--s4);
}
/* 内部リンクボタン（btn-internal）ではなく、c-caseLinks__moreと同じ丸矢印付きのテキストリンクにする */
.c-lowCardsAlt__more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--txt-main);
    text-decoration: none;
}
.c-lowCardsAlt__more::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--txt-emp);
    background-image: url("img/arrow-right_white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

/* =============================================================
    事例用：ナビゲーションBOX（c-caseLinksSec）
    ※c-cate-top__related（本ファイル上部の既存セクション）と同じデザイン・
      同じ情報構成（写真・タイトル・イニシャル名・テキスト・テキストリンク）に統一
============================================================= */
.c-caseLinksSec {
    margin-bottom: var(--s8);
}
.c-caseLinks__grid {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
}
/* グリッドの行内で高さを揃え、テキスト量が違っても「マンガを読む」等の位置を下端で揃える */
.c-caseLinks__item {
    display: flex;
}
.c-caseLinks__cardLink {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.c-caseLinks__thumb {
    display: block;
    border-radius: var(--s3);
    overflow: hidden;
}
.c-caseLinks__thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    display: block;
}
.c-caseLinks__title {
    margin: var(--s4) 0 var(--s1);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--site-color01);
}
.c-caseLinks__company {
    margin: 0 0 var(--s2);
    font-weight: 700;
    color: var(--txt-emp);
}
.c-caseLinks__text {
    margin: 0 0 var(--s3);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-caseLinks__more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
    margin: auto 0 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--txt-main);
}
.c-caseLinks__more::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--txt-emp);
    background-image: url("img/arrow-right_white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

/* =============================================================
    QAパーツ（c-faqSec / c-lowFaq）
    ※c-faq（本ファイル上部の既存セクション）と同じデザインに統一。
      見た目はパーツ集の元クラス（acc-area/acc-title.faq-q/acc-content.faq-a/
      acc-contentsbg-colored__inner）だけに依存させ、既にこのHTMLパターンで
      編集が進んでいた場合でも見た目が崩れないようにしている。
      クリック開閉の機能面のみ、最小限必要なjs-faq-q（クリック）と
      c-faq__a（既存JSがnext('.c-faq__a')で次要素を探すため）を追加。
============================================================= */
.c-faqSec {
    /* 左右の背景をデバイス端まで届かせる（#low-page .c-faqと同じフルブリード手法） */
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2) * 2);
    padding-top: calc(var(--s10) + 2rem);
    padding-bottom: calc(var(--s10) + 6rem);
    padding-left: max(0px, (100vw - 120rem) / 2);
    padding-right: max(0px, (100vw - 120rem) / 2);
    background-color: var(--bg-sec);
    margin-top: calc(var(--s10) + 4rem);
}
/* c-faqSecが連続する場合は2つ目以降の上余白を入れない */
.c-faqSec + .c-faqSec {
    margin-top: 0;
}
.c-lowFaq--static {
    background-color: var(--bg-pri);
}
.c-faqSec__inner {
    max-width: 120rem;
    margin: 0 auto;
    /* 元クラスl-stack-l（gap: var(--s10)=8rem）は本番c-faqのl-stack-sm（gap: var(--s3)）より
       広すぎるため、本番と同じgapに上書き */
    gap: var(--s3);
}
/* c-sec-head自体のmargin-bottomと二重に空かないよう打ち消す（本番c-faqも同様の入れ子構造） */
.c-faqSec .c-sec-head {
    margin-bottom: 0;
}
/* H2下の赤いライン装飾（.c-faq .c-sec-head .c-h2と同じ仕様） */
.c-faqSec .c-sec-head .c-h2 {
    font-size: 4rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-faqSec .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.acc-contentsbg-colored__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.acc-area {
    background: var(--white);
    border-radius: var(--s3);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.15);
    padding: 0 5rem 2rem;
}
.acc-title.faq-q {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 4rem 0 2.5rem;
    cursor: pointer;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6;
    position: relative;
    padding-right: 7rem;
    margin: 0;
}
.acc-title.faq-q::after {
    content: "";
    width: 5rem;
    height: 1px;
    background: var(--txt-emp);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
.acc-title.faq-q::before {
    content: "";
    width: 1px;
    height: 5rem;
    background: var(--txt-emp);
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
.acc-title.faq-q.is-open::after,
.acc-title.faq-q.is-open::before {
    transform: translateY(-50%) rotate(45deg);
}
.acc-title.faq-q.is-open {
    border-bottom: 0.1rem solid var(--line);
}
/* dl内のdtは見出し（acc-title）と重複するため非表示、ddをA アイコン付きの回答行として整形 */
.acc-content.faq-a {
    display: none;
    padding: 3rem 0 4rem;
    margin: 0;
}
.acc-content.faq-a dt {
    display: none;
}
.acc-content.faq-a dd {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.8;
}
.acc-content.faq-a dd::before {
    content: "A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--site-color01);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
/* アコーディオンなし版：常時展開・開閉UIを非表示（c-faq__list--plainと同じ挙動） */
.c-lowFaq--static .acc-title.faq-q {
    cursor: default;
    border-bottom: 0.1rem solid var(--line);
}
.c-lowFaq--static .acc-title.faq-q::before,
.c-lowFaq--static .acc-title.faq-q::after {
    display: none;
}
.c-lowFaq--static .acc-content.faq-a {
    display: block;
}

/* =============================================================
    画像＋見出し＋本文パーツ（c-serviceLinkSec）
    ※c-cate-top__list-inline（本ファイル上部のスタッフ・記事リスト）と同じデザインに統一
============================================================= */
.c-serviceLinkSec {
    max-width: 120rem;
    margin: 0 auto var(--s8);
}
.c-serviceLink {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
}
.c-serviceLink__card {
    display: flex;
    align-items: center;
    gap: var(--s5);
    color: inherit;
    text-decoration: none;
}
.c-serviceLink__thumb {
    display: block;
    flex-shrink: 0;
    width: 16.6rem;
    height: 16.6rem;
    border-radius: var(--s2);
    overflow: hidden;
}
.c-serviceLink__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.c-serviceLink__body {
    display: block;
    flex: 1;
}
.c-serviceLink__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin: 0;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--site-color01);
}
/* アイコン（arrow）はHTMLに要素を置かず、h3の右端にCSSで配置 */
.c-serviceLink__title::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}
.c-serviceLink__text {
    display: block;
    margin-top: var(--s3);
    font-size: var(--fs-base);
    line-height: 1.8;
}
/* スタッフ・記事リスト（カテゴリー共通テンプレートのc-cate-top__listを流用、幅120rem） */
.c-cate-top__list-inline {
    max-width: 120rem;
    margin: 0 auto var(--s8);
}

/* テーブル（幅120rem、色・線はc-cate-top__case-pricesなどサイト共通のトークンに統一） */
.c-cate-top__table-inline {
    max-width: 120rem;
    margin-inline: auto;
}
.c-cate-top__table-inline table {
    width: 100%;
    border-collapse: collapse;
    border-top: 0.1rem solid var(--line);
    border-left: 0.1rem solid var(--line);
}
.c-cate-top__table-inline th,
.c-cate-top__table-inline td {
    padding: var(--s3) var(--s4);
    border-right: 0.1rem solid var(--line);
    border-bottom: 0.1rem solid var(--line);
    font-size: var(--fs-base);
    font-weight: 400;
}
.c-cate-top__table-inline td {
    text-align: left;
}
.c-cate-top__table-inline td.c-cate-top__table-inline__flex {
    display:flex;
	align-items:center;
}
.c-cate-top__table-inline td.c-cate-top__table-inline__flex .btn-internal{
    max-width: 50%;
    width: 100%;
    margin: 0 2.5rem 0 0;
}
.c-cate-top__table-inline th {
    background: var(--bg-pri);
    font-weight: 700;
    color: var(--txt-main);
    text-align: center;
}
.c-cate-top__table-inline th:first-child,
.c-cate-top__table-inline td:first-child {
    width: 28rem;
    min-width: 20rem;
}

.c-cate-top__table-inline__option th:first-child {
    width: auto;
    min-width: 17rem;
}

/* =============================================================
    カテゴリTOP：スタッフ・記事リスト
============================================================= */
.c-cate-top__list {
    padding: calc(var(--s10) + 4rem) 0;
    background-color: var(--white);
}
.c-cate-top__list .l-center {
    max-width: 120rem;
}
.c-cate-top__list .c-sec-head .c-h2 {
    font-size: 3.6rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-cate-top__list .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-cate-top__list-items {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
}
.c-cate-top__list-link {
    display: flex;
    align-items: center;
    gap: var(--s5);
    color: inherit;
    text-decoration: none;
}
.c-cate-top__list-thumb {
    display: block;
    flex-shrink: 0;
    width: 16.6rem;
    height: 16.6rem;
    border-radius: var(--s2);
    overflow: hidden;
}
.c-cate-top__list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.c-cate-top__list-body {
    display: block;
    flex: 1;
}
.c-cate-top__list-head .c-h3 {
    display: block;
    position: relative;
    padding-right: var(--s6);
    font-size: 2.8rem;
    color: var(--site-color01);
}
.c-cate-top__list-head .c-h3::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url("img/icon-arrow-right.png") no-repeat center/contain;
}
.c-cate-top__list-text {
    display: block;
    margin-top: var(--s3);
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* =============================================================
    カテゴリTOP：ポイント（枠線なしカード2件）
============================================================= */
.c-cate-top__cards.c-cate-top__cards--simple {
    /* この section は #low-page 直下ではなく .l-center（120rem制限）の内側にネストされて
       いるため、max-width:none だけでは親の幅までしか広がらない。左右対称に
       ビューポート端までブリードさせ、内側の.l-centerで元のコンテンツ幅に戻す */
    max-width: none;
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2) * 2);
    padding: calc(var(--s10) + 4rem) max(0px, (100vw - 120rem) / 2);
    border-radius: 0;
}
.c-cate-top__cards--simple .l-center {
    max-width: 120rem;
}
.c-cate-top__cards--simple .l-grid-two {
    --minimum: calc((100% - 5rem) / 2);
    gap: 5rem;
}
.c-cate-top__card--simple {
    border: none;
}
.c-cate-top__card--simple .c-h3 {
    margin-bottom: var(--s4);
    font-size: 2.8rem;
    color: var(--site-color01);
}
.c-cate-top__card--simple .c-cate-top__more {
    margin-top: var(--s4);
}

/* =============================================================
    カテゴリTOP：事例
============================================================= */
.c-cate-top__case {
    padding: calc(var(--s10) + 4rem) 0 0;
    background-color: var(--white);
}
.c-cate-top__case .c-sec-head .c-h2 {
    font-size: 3.6rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}
.c-cate-top__case .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-cate-top__case-group + .c-cate-top__case-group {
    margin-top: var(--s10);
}
.c-cate-top__case-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s5);
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--txt-emp);
}
.c-cate-top__case-mark {
    display: inline-block;
    width: 3.7rem;
    height: 3.7rem;
    flex-shrink: 0;
    border: 0.7rem solid var(--site-color01);
    border-radius: 50%;
}
.c-cate-top__case .l-grid-three {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
}
.c-cate-top__case-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.c-cate-top__case-photo {
    display: block;
    border-radius: var(--s3);
    overflow: hidden;
}
.c-cate-top__case-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    display: block;
}
/* 2列（写真付きボックス）はカード幅が広いぶん、比率をやや縦長に */
.c-cate-top__case-grid .c-cate-top__case-photo img {
    aspect-ratio: 4 / 3;
}
.c-cate-top__case-title {
    margin: var(--s4) 0 var(--s1);
    min-height: 7.2rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--site-color01);
}
/* 2つ並びBOX（c-cate-top__case-grid）は他カード用の固定min-heightだと
   1行タイトルの時に空きすぎるため、min-heightは外し、
   行ごとの高さ揃えはJS（jquery.matchHeight、common.js側で適用）に任せる */
.c-cate-top__case-grid .c-cate-top__case-title {
    min-height: 0;
}
.c-cate-top__case-text {
    margin-bottom: var(--s4);
    font-size: var(--fs-base);
    line-height: 1.8;
}
.c-cate-top__case-prices {
    width: 100%;
    margin-bottom: var(--s4);
    border-collapse: collapse;
    border-top: 0.1rem solid var(--line);
    border-left: 0.1rem solid var(--line);
}
.c-cate-top__case-prices th,
.c-cate-top__case-prices td {
    padding: var(--s2) var(--s3);
    border-right: 0.1rem solid var(--line);
    border-bottom: 0.1rem solid var(--line);
    text-align: left;
}
.c-cate-top__case-prices th {
    width: 11rem;
    background: var(--bg-pri);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--txt-main);
    text-align: center;
    white-space: nowrap;
}
.c-cate-top__case-prices td {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--site-color01);
}
.c-cate-top__case-prices tr:last-child td {
    color: var(--txt-emp);
}
.c-cate-top__case-prices td span {
    margin-left: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--txt-main);
}
.c-cate-top__case .c-cate-top__more {
    margin-top: var(--s4);
}

/* アコーディオンなしFAQ（常時展開・開閉UIを非表示） */
.c-faq__list--plain .c-faq__q {
    cursor: default;
    border-bottom: 0.1rem solid var(--line);
}
.c-faq__list--plain .c-faq__q::before,
.c-faq__list--plain .c-faq__q::after {
    display: none;
}
.c-faq__list--plain .c-faq__a {
    display: block;
}

/* =============================================================
    関連記事（related-article01）：目次と同じデザイン
============================================================= */
.related-article01-frame {
    position: relative;
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    margin-bottom: 14rem;
    width: calc(100% + max(0px, (100vw - 120rem) / 2));
    padding: var(--s8) var(--s6) var(--s8) calc(max(0px, (100vw - 120rem) / 2) + var(--s6));
    background-color: var(--bg-pri);
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
}
.related-article01-title {
    text-align: center;
    margin: 0 0 var(--s6);
}
.related-article01-title span {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--txt-main);
}
.related-article01-gradation {
    position: relative;
    max-width: 120rem;
    margin: 0 auto;
    background: var(--white);
    border-radius: 2rem;
    padding: var(--s6) var(--s8);
    max-height: 28rem;
    overflow: hidden;
    transition: max-height 0.6s;
}
.related-article01-gradation::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22rem;
    background: linear-gradient(to bottom, transparent 0%, var(--white) 100%);
    transition: opacity 0.3s;
    pointer-events: none;
}
.related-article01-gradation.is-open {
    max-height: 200rem;
}
.related-article01-gradation.is-open::after {
    opacity: 0;
}
.related-article01-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.related-article01-list .relations-box {
    display: flex;
    align-items: center;
    gap: var(--s3);
    color: var(--txt-main);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.6;
}
.related-article01-list .relations-box::before {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--site-color01);
}
.related-article01-list .relations-box__pic,
.related-article01-list .subtitle {
    display: none;
}
.related-article01-list .catch-01 {
    margin: 0;
}
.related-article01-more {
    text-align: center;
    margin-top: var(--s6);
}
.related-article01-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    max-width: 25rem;
    width: 100%;
    padding: var(--s2);
    background: var(--white);
    border: 0.3rem solid var(--line);
    border-radius: 10rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
    color: var(--txt-main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.3s;
}
.related-article01-btn:hover {
    opacity: 0.6;
}
.related-article01-btn-icon {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s;
}
.related-article01-btn.is-open .related-article01-btn-icon {
    transform: rotate(45deg);
}

/* =============================================================
    カテゴリTOP：目次
============================================================= */
.c-toc {
    position: relative;
    margin-left: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2));
    margin-bottom: var(--s10);
    background-color: var(--bg-pri);
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    padding: var(--s8) var(--s6) var(--s10) calc(max(0px, (100vw - 120rem) / 2) + var(--s6));
    margin-top: 6rem;
}
.c-toc__title {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--txt-main);
    margin: 0 0 var(--s6);
}
.c-toc__card {
    max-width: 120rem;
    margin-inline: auto;
    background: var(--white);
    border-radius: 2rem;
    padding: var(--s6) var(--s8);
}
.c-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-toc__item a {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    color: var(--txt-main);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.6;
}
.c-toc__item a::before {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.58rem;
    border-radius: 50%;
    background: var(--site-color01);
}
.c-toc__item--h3 {
    padding-left: var(--s8);
}
.c-toc__item--h3 a {
    font-weight: 400;
}
.c-toc__item--h3 a::before {
    width: 1rem;
    height: 1rem;
    margin-top: 0.78rem;
    background: var(--line);
}

/* =============================================================
    カテゴリTOP：こんな課題はありませんか（フルブリード帯）
============================================================= */
.c-cate-top__concern {
    position: relative;
    /* 右：#low-pageがl-centerで幅制限されているため、vwで画面端まで届かせる。左：コンテンツ幅で止める */
    margin-right: calc(-1 * max(0px, (100vw - 120rem) / 2));
    width: calc(100% + max(0px, (100vw - 120rem) / 2));
    padding: calc(var(--s10) + 2rem) max(0px, (100vw - 120rem) / 2) calc(var(--s10) + 2rem) 0;
    background-color: var(--bg-pri);
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
    text-align: center;
}
.c-cate-top__concern .c-sec-lead {
    max-width: 70rem;
    margin-inline: auto;
}
.c-cate-top__concern-card {
    max-width: 120rem;
    margin: 0 auto;
    background: var(--white);
    border-radius: 2rem;
    padding: var(--s6) var(--s8);
    text-align: left;
}
.c-cate-top__concern-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-cate-top__concern-list li {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) 0;
    font-weight: 700;
    color: var(--txt-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c-cate-top__concern-list li::before {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--site-color01);
}

/* =============================================================
    カテゴリTOP：課題リスト（01〜04）
============================================================= */
.c-cate-top__issues {
    padding: calc(var(--s10) + 4rem) 0;
    background-color: var(--white);
}
.c-cate-top__issues-list {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-cate-top__issues-item {
    display: flex;
    align-items: center;
    gap: var(--s6);
}
.c-cate-top__issues-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 12rem;
    border-radius: 2rem;
    background: var(--bg-sec);
    color: var(--site-color01);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
}
.c-cate-top__issues-body h3 {
    margin: 0 0 var(--s2);
}
.c-cate-top__issues-text {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0;
}

/* =============================================================
    カテゴリTOP：関連事例のご紹介
============================================================= */
.c-cate-top__related {
    padding: calc(var(--s10) + 4rem) 0;
    background-color: var(--white);
}
.c-cate-top__related-eyebrow {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--txt-main);
    margin: 0 0 var(--s2);
}
.c-cate-top__related .c-sec-head .c-h2 {
    font-size: 3.6rem;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 0;
}
.c-cate-top__related .c-sec-head .c-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7.8rem;
    height: 0.3rem;
    background: var(--site-color01);
    border-radius: 9999px;
}
.c-cate-top__related-grid {
    --minimum: calc((100% - 5rem * 2) / 3);
    gap: 5rem;
}
.c-cate-top__case-name {
    font-weight: 700;
    color: var(--txt-emp);
    margin: 0 0 var(--s3);
}
.c-cate-top__related .btn-internal,
.c-cate-top__related .c-voice__more {
    margin: var(--s1) auto var(--s3);
    padding: var(--s2) var(--s2);
    max-width: 25rem;
}

/* =============================================================
    カテゴリTOP：ご担当者様のコメント
============================================================= */
.c-cate-top__comment {
    padding: calc(var(--s10) + 2rem) 0;
    background-color: var(--white);
}
.c-cate-top__comment-card {
    max-width: 120rem;
    margin: 0 auto;
    background: var(--bg-sec);
    border-radius: 3rem;
    padding: var(--s7) var(--s8);
}
.c-cate-top__comment-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0 0 var(--s6);
    padding-bottom: var(--s4);
    border-bottom: 0.2rem solid var(--site-color01);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--txt-emp);
}
.c-cate-top__comment-mark {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border: 0.3rem solid var(--site-color01);
    border-radius: 50%;
}
.c-cate-top__comment-body {
    display: flex;
    gap: var(--s6);
    margin-bottom: var(--s6);
}
.c-cate-top__comment-photo {
    flex-shrink: 0;
    width: 14rem;
}
.c-cate-top__comment-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--s3);
    display: block;
}
.c-cate-top__comment-content {
    flex: 1;
}
.c-cate-top__comment-catch {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--site-color01);
    margin: 0 0 var(--s2);
}
.c-cate-top__comment-name {
    font-weight: 700;
    color: var(--txt-emp);
    margin: 0 0 var(--s3);
}
.c-cate-top__comment-text {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0;
}
.c-cate-top__comment-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s5);
    background: var(--white);
    border-radius: var(--s3);
    padding: var(--s5) var(--s6);
}
.c-cate-top__comment-cta-text {
    font-weight: 700;
    color: var(--txt-emp);
    margin: 0;
}
.c-cate-top__comment-cta .btn-web {
    flex-shrink: 0;
    width: 36rem;
    max-width: 100%;
    margin: 0;
}
.c-cate-top__comment-cta .btn-web a {
    background-color: var(--site-color05);
    background-image: none;
    padding: var(--s3) var(--s5);
    text-align: center;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 0.8rem var(--shadow);
}
.c-cate-top__comment-cta .btn-web::after {
    display: none;
}
.c-cate-top__comment-cta .btn-web:hover a {
    transform: none;
    opacity: 0.6;
}

/* =============================================================
    SP対応 max-width: 767px
============================================================= */
@media screen and (max-width: 767px) {
    /* SP専用固定バー：左に「バナー＋LINEボタン」グループ、右にTOPへ戻るボタン。PC版.c-floatBanner/.page-topとは別マークアップ */
    .c-spFixedBar {
        display: flex;
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .c-spFixedBar.js-show {
        opacity: 1;
    }
    .c-spFixedBar__group {
        display: flex;
        width: 85%;
        box-sizing: border-box;
    }
    .c-spFixedBar__banner,
    .c-spFixedBar__cta {
        box-sizing: border-box;
    }
    .c-spFixedBar__banner {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: var(--s1) var(--s2) var(--s1) var(--s1);
        background-color: var(--bg-sec);
        background-image:
            linear-gradient(#fde3dc 1px, transparent 1px),
            linear-gradient(90deg, #fde3dc 1px, transparent 1px);
        background-size: 20px 20px;
        background-position: 0 10px, 0 10px;
        background-repeat: repeat, repeat;
        text-decoration: none;
        color: inherit;
        width: 65%;
    }
    .c-spFixedBar__banner img {
        width: 7rem;
        height: 4rem;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 0.6rem;
    }
    .c-spFixedBar__catch {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--site-color01);
    }
    .c-spFixedBar__arrow {
        display: block;
        flex-shrink: 0;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        background: #1a1a1a url("img/arrow-right_white.png") no-repeat center/0.7rem auto;
    }
    .c-spFixedBar__cta {
        display: flex;
        margin: 0;
        width: 35%;
    }
    .c-spFixedBar .btn-web a {
        width: 100%;
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--s1) 0.4rem;
        font-size: 1.2rem;
        line-height: 1.3;
        white-space: normal;
        box-sizing: border-box;
        background-color: var(--site-color05);
        background-image: none;
        border-radius: 0;
        text-align: center;
    }
    .c-spFixedBar .btn-web::after {
        display: none;
    }
    .c-spFixedBar__top {
        width: 15%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #333;
    }
    .c-spFixedBar__top-arrow {
        display: block;
        width: 1.4rem;
        height: 1.4rem;
        background: url("img/arrow-right_white.png") no-repeat center/contain;
        transform: rotate(-90deg);
    }
    /* PC版バナー・TOPボタンはSPでは非表示（.c-spFixedBarに置き換え） */
    .c-floatBanner {
        display: none;
    }
    .page-top {
        display: none;
    }

    /* MV（下層） SP */
    .c-mv-lower {
        padding: calc(var(--s13) + 4rem) 0 var(--s6);
    }
    .c-mv-lower::after {
        height: 5rem;
        border-radius: 5rem 5rem 0 0;
    }
    .c-mv-lower__marquee {
        top: 0;
    }
    .c-mv-lower__marquee-track span {
        font-size: 6rem;
    }
    .c-mv-lower__badge {
        width: 12rem;
        bottom: 5rem;
    }
    .c-mv-lower__title {
        font-size: var(--fs-2xl);
        margin-top: 5.2rem;
        line-height: 1.4;
    }
    .c-mv-lower__inner {
        padding-left: var(--s4);
        padding-right: var(--s4);
        padding-bottom: 2rem;
    }
    .c-page-lead .c-mv-lower__lead {
        padding-left: var(--s3);
        padding-right: var(--s3);
        text-align: left;
        margin-bottom: 10rem;
    }
    .c-page-lead--no-badge .c-mv-lower__lead {
        text-align: left;
        margin-bottom: 3rem;
        padding-left: var(--s3);
        padding-right: var(--s3);
    }
    /* 下層テンプレート（single.php／cate.html。#low-pageにl-centerが直接付く）だけ半分の余白にする */
    #low-page.l-center .c-page-lead .c-mv-lower__lead {
        margin-bottom: 4rem;
    }

    /* ヘッダー SP */
    .header-area__inner {
        padding: var(--s4) 0;
    }
    .header-logo {
        width: 100px;
        top: -2rem;
        left: 12px;
    }
    .gnavi-pc {
        display: none;
    }
    .header-area--top .gnavi-ctrl,
    .header-area--low .gnavi-ctrl {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    /* ハンバーガーボタン：同じ理由でpx固定値に */
    .gnavi-btn {
        width: 36px;
        height: 32px;
        top: 10px;
        right: 1.2rem;
    }
    .gnavi-btn span {
        width: 20px;
        left: 8px;
    }
    .gnavi-btn span:nth-of-type(1) {
        top: 10px;
    }
    .gnavi-btn span:nth-of-type(2) {
        top: 16px;
    }
    .gnavi-btn span:nth-of-type(3) {
        top: 22px;
    }
    /* ✕変形時の移動量もpx指定に揃える（remのままだとSPのvw基準ルートフォントサイズとズレて中心が合わない） */
    .gnavi-btn.is-active span:nth-of-type(1) {
        transform: translateY(6px) rotate(-45deg);
    }
    .gnavi-btn.is-active span:nth-of-type(3) {
        transform: translateY(-6px) rotate(45deg);
    }
    /* ハンバーガーメニュー：ロゴ SP調整 */
    .gnavi-title {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
    }
    .gnavi-title img {
        width: 100px;
        margin-top: -4rem;
    }
    /* 下向きアロー（トグル）を通常のアローと同じ画像に統一し、回転で開閉を表現する */
    .gnavi-list__link--toggle::after {
        background-image: url("img/arrow-right_black.png");
        transform: translate(0, -50%) rotate(90deg);
    }
    .gnavi-list__link--toggle.is-open::after {
        transform: translate(0, -50%) rotate(270deg);
    }

    /* MV SP */
    .c-mv__slider {
        padding: var(--s3) 0;
    }
    .c-mv__item {
        width: 80vw;
    }
    .c-mv__item img {
        border-radius: var(--s3);
    }
    @keyframes mv-marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(calc(-3 * (80vw + var(--s3)))); }
    }
    .c-mv__body {
        margin-top: -6rem;
        padding: var(--s5) 0 var(--s5) 0;
    }
    .c-mv__body::before {
        left: 0;
        border-radius: 3rem 3rem 0 0;
    }
    .c-mv__inner {
        padding-left: 1.6rem;
    }
    .c-mv__balloon {
        font-size: 1.8rem;
        padding: 0.6rem var(--s3) 0.8rem;
        left: 2rem;
    }
    .c-mv__balloon-num {
        font-size: 2.4rem;
    }
    .c-mv__title {
        font-size: var(--fs-2xl);
    }
    .c-mv__price {
        font-size: var(--fs-3xl);
    }
    .c-mv__lead {
        font-size: var(--fs-sm);
    }
    .c-mv__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s4);
    }
    .c-mv__body .gnavi-pc__cta {
        width: 100%;
    }
    /* ピックアップ SP */
    .c-pickup {
        margin-top: -8rem;
        padding: calc(var(--s5) + 8rem) 0 var(--s5);
    }
    .c-pickup__grid {
        grid-template-columns: 1fr;
        gap: var(--s8);
    }
    .c-pickup__box {
        padding: var(--s6) var(--s4) var(--s4);
    }
    .c-pickup__balloon {
        font-size: 1.8rem;
        padding: var(--s1) var(--s2) var(--s1) var(--s3);
    }
    .c-pickup__box-title {
        font-size: 2.2rem;
    }
    .c-pickup__item-name {
        font-size: 1.8rem;
    }
    .c-pickup__icon,
    .c-pickup__icon img {
        width: 40px;
    }
    .c-pickup__icon--at img,
    .c-pickup__icon--mt img {
        width: 30px;
    }

    /* セクション切り替わり SP */
    .c-sec--rt {
        border-top-left-radius: 0;
        border-top-right-radius: 4rem;
        border-bottom-right-radius: 4rem;
        margin-top: -2rem;
    }
    /* トップページはFAQが最後のセクションのため、次に繋げる右下の角丸は不要 */
    #index .c-faq.c-sec--rt {
        border-bottom-right-radius: 0;
    }
    .c-sec-eyecatch {
        width: 8rem;
        height: 8rem;
        top: -4rem;
    }

    /* 数字の実績 SP */
    .c-numbers {
        margin-top: 4rem;
        padding: var(--s6) 0;
        border-top-left-radius: 0;
    }
    .c-numbers__logo {
        width: 9rem;
    }
    .c-numbers__title {
        font-size: var(--fs-xl);
        margin-top: 1rem;
    }
    .c-numbers__card {
        padding: var(--s3);
    }
    .c-numbers__list {
        flex-wrap: wrap;
    }
    .c-numbers__item {
        width: calc((100% - var(--s2)) / 2);
        flex: none;
        /* PCではスクロールでis-visible付与時にフェードインするが、
           SPでは発火条件(rootMargin -70%)が合わず表示されないままになるため強制表示 */
        opacity: 1;
        transform: none;
        height: inherit;
    }
    /* PCはnowrapで1行固定だが、SPは2列になり幅が狭くなるため「教習期限なし（※2）」等が
       ボックスからはみ出す。折り返しを許可する（同じ行の「駅から徒歩」との高さ揃えは
       jquery.matchHeight・data-mh="c-numbers__label-3"側で対応、common.js参照） */
    .c-numbers__label {
        white-space: normal;
        line-height: 1.2;
    }
    .c-numbers__value {
        font-size: var(--fs-2xl);
    }
    .c-numbers__pre,
    .c-numbers__suf {
        font-size: var(--fs-base);
    }
    .c-numbers::before,
    .c-numbers::after {
        width: 4rem;
        height: calc(4rem + 1px);
    }
    .c-numbers::before {
        top: calc(-4rem + 0.5px);
    }
    .c-numbers::after {
        bottom: -4rem;
    }
    .c-numbers__footnote {
        margin-bottom: var(--s3);
    }
    .c-numbers {
        padding-bottom: var(--s10);
    }
    .c-numbers__cta .btn-internal {
        margin-top: 0;
        width: 90%;
    }

    /* 特徴 SP */
    .c-features {
        padding: var(--s5) 0;
    }
    /* PCでは絶対配置で背景に敷いているが、SPではバッジ→英字スクロール→見出しの
       順で実際に並べたいため、通常フローに戻す */
    .c-features__marquee {
        position: static;
        margin-bottom: 0;
        margin-top: 4rem;
    }
    .c-features__marquee-track span {
        font-size: 4rem;
    }
    .c-features__head .c-h2 {
        font-size: var(--fs-2xl);
        margin-bottom: var(--s2);
    }
    .c-features__accent {
        font-size: var(--fs-4xl);
    }
    .c-features__num {
        top: -2.4rem;
    }
    .c-features__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "card1"
            "card2"
            "card3"
            "card4"
            "card5"
            "cta";
        gap: var(--s6);
        padding: 0 var(--s4) var(--s4);
    }
    .c-features__layout::before {
        display: none;
    }
    .c-features__head,
    .c-features__card--02,
    .c-features__card--03,
    .c-features__card--04,
    .c-features__card--05 {
        margin-top: 0;
    }
    .c-features__card--04,
    .c-features__card--05 {
        transform: none;
    }
    .c-features__card--01 {
        justify-self: stretch;
    }
	.c-features__card--01 { grid-area: card1;}
    .c-features__card--02 { grid-area: card2;}
    .c-features__card--03 { grid-area: card3; transform: unset;}
    .c-features__card--04 { grid-area: card4;}
    .c-features__card--05 { grid-area: card5;}

    .c-features__card {
        width: 100%;
    }
    /* PCは同じ行に並ぶカード2〜5のバッジ出現をずらす演出だが、
       SPは1カラムでカード単位に順番に出現するため行揃えの遅延は不要 */
    .c-features__card--02.is-visible .c-features__num,
    .c-features__card--03.is-visible .c-features__num,
    .c-features__card--04.is-visible .c-features__num,
    .c-features__card--05.is-visible .c-features__num {
        transition-delay: 0.4s;
    }
    .c-features__cta .btn-internal {
        margin-top: 0;
        margin-bottom: var(--s7);
    }

    /* 比較 SP */
    .c-compare {
        padding: var(--s5) 0;
        padding-bottom: var(--s10);
        border-top-left-radius: 0;
    }
    .c-compare .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
        margin-top: 2rem;
    }
    .c-compare .c-sec-head {
        margin-bottom: -1rem;
    }
    .c-compare .c-sec-lead {
        text-align: left;
        margin-bottom: 2rem;
    }
    .c-compare::before {
        width: 4rem;
        height: calc(4rem + 1px);
        top: -4rem;
    }
    /* 比較項目列は幅を詰めて固定し、右側の3列だけを横スクロール対象にする */
    .c-compare__table th:first-child,
    .c-compare__table td:first-child {
        width: 9rem;
        min-width: 9rem;
        position: sticky;
        left: 0;
        z-index: 2;
        padding: 1.6rem 0.8rem;
        font-size: var(--fs-xs);
    }
    .c-compare__table th,
    .c-compare__table td {
        padding: 1.2rem 1rem;
        font-size: var(--fs-xs);
    }
    .c-compare__table th.c-compare__th-yumenori,
    .c-compare__table th.c-compare__th-general,
    .c-compare__table th.c-compare__th-licensed {
        font-size: var(--fs-base);
    }
    .c-compare__num {
        font-size: 2rem;
    }
    .c-compare__num--md {
        font-size: 1.6rem;
    }
    .c-compare__row--lg-num .c-compare__num--md {
        font-size: 2rem;
    }
    .c-compare__mark {
        font-size: 1.8rem;
    }
    .c-compare__unit {
        font-size: var(--fs-xs);
    }
    .c-compare__scroll-hint {
        text-align: center;
        font-size: var(--fs-xs);
        color: var(--txt-sub);
        margin-bottom: var(--s3);
        margin-top: 1rem;
    }

    /* スタッフ SP */
    .c-staff {
        padding: var(--s5) 0;
        padding-bottom: var(--s10);
    }
	  .c-staff.c-sec--rt {
        margin-top:0;
    }
    #low-page .c-staff {
        padding-bottom: var(--s10);
    }
    .c-staff__feature {
        padding: var(--s3);
    }
    .c-staff .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
        margin-top: 2rem;
    }
    .c-staff .c-sec-head {
        margin-bottom: -7rem;
    }
    .c-staff .c-sec-lead {
        text-align: left;
    }
    .c-staff::before {
        width: 4rem;
        height: 4rem;
    }
    .c-staff::after {
        background-size: 100rem;
        background-position: 50% 13%;
    }
    /* SPは 見出し→画像→キャッチコピー→本文 の順に1カラムで積む */
    .c-staff__feature {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "img"
            "catchcopy"
            "text";
    }
    .c-staff__subtitle {
        font-size: 2.4rem;
    }
    #low-page h3:not([class]) {
        font-size: 2.2rem;
    }
    .c-staff__subtitle::before,
    #low-page h3:not([class])::before {
        width: 1.8rem;
        height: 1.8rem;
        border-width: 0.5rem;
    }
    .c-staff__catchcopy {
        font-size: var(--fs-lg);
    }
    /* 代表メッセージ本文の下の余白を詰める */
    .c-staff__feature {
        margin-bottom: -5rem;
    }
    /* PC用のrepeat(5, 1fr)・固定幅26remがSPで崩れていたため2列に変更 */
    .c-staff__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .c-staff__member {
        width: 100%;
    }
    .c-staff__members .c-staff__subtitle {
        margin-bottom: var(--s2);
    }
    .c-staff__member .c-h4 {
        font-size: 2rem;
    }
    .c-staff__member p {
        font-size: var(--fs-base);
        line-height: 1.5;
    }

    /* マンガ SP */
    .c-manga {
        padding: var(--s5) 0;
        padding-bottom: var(--s10);
    }
    #low-page .c-manga {
        padding-bottom: var(--s6);
    }
    .c-manga .c-sec-head {
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .c-manga .c-sec-head .c-h2 {
        font-size: var(--fs-xl);
        padding-bottom: var(--s2);
        margin-bottom: var(--s2);
    }
    .c-manga::before,
    .c-manga::after {
        width: 4rem;
        height: calc(4rem + 1px);
    }
    .c-manga__card .c-h3 {
        font-size: var(--fs-lg);
        padding-right: var(--s5);
    }
    .c-manga__card .c-h3::after {
        width: 2rem;
        height: 2rem;
    }
    .c-manga__card p {
        font-size: var(--fs-base);
        padding-bottom: 0;
    }
    .c-manga::before {
        top: -4rem;
    }
    .c-manga::after {
        bottom: -4rem;
    }

    /* プラン SP */
    .c-plan.c-sec--rt {
        margin-top: 0;
    }
    .c-plan {
        padding: var(--s7) 0 var(--s14);
    }
    #low-page .c-plan {
        padding-bottom: var(--s10);
    }
    .c-plan::before {
        width: 4rem;
        height: 4rem;
        top: -4rem;
    }
    .c-plan .c-sec-head {
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .c-plan .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s2);
    }
    .c-plan__row--two,
    .c-plan__row--four,
    .c-plan__options {
        grid-template-columns: 1fr;
    }
    .c-plan__item {
        padding: var(--s5) var(--s3) var(--s3);
    }
    .c-plan__prices,
    .c-plan__prices tbody,
    .c-plan__prices tr,
    .c-plan__prices th,
    .c-plan__prices td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .c-plan__prices th {
        text-align: center;
    }
    .c-plan__item--wide .c-plan__prices {
        width: 100%;
    }
    .c-plan__title--at,
    .c-plan__title--mt,
    .c-plan__title--paper {
        font-size: var(--fs-lg);
    }
    .c-plan__title--shutchou,
    .c-plan__title--option-sub {
        font-size: var(--fs-md);
    }
    .c-plan__item .c-h3::before {
        width: 3.2rem;
        height: 5rem;
    }
    .c-plan__item--sm .c-h3::before {
        width: 2.6rem;
        height: 4.4rem;
    }
    .c-plan__prices td {
        font-size: var(--fs-lg);
    }

    /* アクセス SP */
    .c-access {
        padding: var(--s5) 0;
        padding-bottom: calc(var(--s10) + 1rem);
    }
    .c-access .c-sec-head {
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .c-access .c-sec-head .c-h2 {
        font-size: var(--fs-2xl);
        padding-bottom: var(--s2);
        margin-bottom: var(--s2);
    }
    .c-access::before {
        width: 4rem;
        height: calc(4rem + 1px);
        top: -4rem;
    }
    .c-access__item {
        gap: var(--s3);
        align-items: flex-start;
        margin-top: 1.5rem;
    }
    .c-access__name {
        font-size: var(--fs-lg);
    }
    .c-access__marker {
        width: 2rem;
        height: 2rem;
        border-width: 0.4rem;
    }
    .c-access__addr {
        font-size: var(--fs-sm);
    }
    .c-access__route {
        font-size: var(--fs-xs);
    }
    .c-access .btn-internal {
        margin-top: var(--s5);
    }

    /* 受講生の声 SP */
    .c-voice {
        padding: var(--s5) 0;
        padding-bottom: var(--s14);
        margin-top: 0;
    }
    .c-voice .c-sec-head {
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .c-voice .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s2);
    }
    .c-voice::before {
        width: 4rem;
        height: 4rem;
    }
    #low-page .c-voice::after {
        width: 4rem;
        height: 4rem;
    }
    /* PC用にrepeat(3, 1fr)で固定されていて共通の.l-grid-three(1カラム化)が
       効かずSPでも3列のまま崩れていたため */
    .c-voice .l-grid-three {
        grid-template-columns: 1fr;
        grid-gap: var(--s5);
    }
    .c-voice__card {
        padding: var(--s5) var(--s4);
    }
    .c-voice__title {
        font-size: var(--fs-lg);
    }
    .c-voice__card p::after {
        width: 3rem;
        height: 3rem;
        margin-top: var(--s3);
    }
    .c-voice .btn-internal {
        margin-top: 0;
    }
    .c-voice__more {
        font-size: 1.6rem;
        margin-bottom: 2rem;
        padding: var(--s2) var(--s2);
        width: 80%;
    }

    /* FAQ SP */
    .c-faq {
        padding: var(--s5) 0;
        padding-bottom: var(--s10);
    }
    .c-faq .c-sec-head {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .c-faq .btn-internal {
        margin-top: 3rem;
    }
    .c-faq .c-sec-head .c-h2 {
        font-size: var(--fs-2xl);
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
    }
    .c-faq::before {
        width: 4rem;
        height: calc(4rem + 1px);
        top: -4rem;
    }
    .c-faq__item {
        padding: 0 var(--s3) var(--s3);
    }
    .c-faq__q {
        font-size: var(--fs-md);
        padding: var(--s4) 0 var(--s3);
        padding-right: var(--s7);
        gap: var(--s2);
        align-items: flex-start;
    }
    .c-faq__a-inner {
        align-items: flex-start;
    }
    .c-faq__a p {
        line-height: 1.6;
    }
    .c-faq__q::after {
        width: 2.4rem;
    }
    .c-faq__q::before {
        height: 2.4rem;
        right: 1.2rem;
    }
    .c-faq__a {
        padding: var(--s3) 0 var(--s4);
    }
    .c-faq__icon {
        font-size: var(--fs-xl);
    }
    .c-faqSec {
        margin-left: calc(-1 * (var(--s2) + var(--s-2)));
        margin-right: calc(-1 * (var(--s2) + var(--s-2)));
        width: calc(100% + (var(--s2) + var(--s-2)) * 2);
        padding-top: var(--s10);
        padding-bottom: var(--s12);
        padding-left: calc(var(--s2) + var(--s-2));
        padding-right: calc(var(--s2) + var(--s-2));
        margin-top: 5rem;
    }

    /* 特徴ページ：魅力セクション SP */
    .c-appeal {
        padding: var(--s5) 0 var(--s14);
    }
    .c-appeal__banner {
        margin-bottom: var(--s1);
        margin-top: 3rem;
    }
    .c-appeal .c-sec-head {
        padding-left: 0;
        padding-right: 0;
    }
    .c-appeal__catch {
        font-size: 2rem;
    }
    .c-appeal .c-h2 {
        font-size: 2.6rem;
    }
    .c-appeal__list {
        margin-top: var(--s3);
    }
    .c-appeal__item {
        gap: var(--s2);
        margin-bottom: var(--s10);
    }
    .c-appeal__body .c-h3 {
        font-size: 2.4rem;
    }
    .c-appeal__img {
        width: 100%;
    }
    .c-appeal__tag {
        font-size: 2rem;
        padding: var(--s1) var(--s2) var(--s1) var(--s3);
    }
    .c-appeal__points {
        padding: var(--s6) var(--s4) var(--s3);
    }
    .c-appeal__points li {
        line-height: 1.4;
    }

    /* CTA SP：バッジが8rem/上端-4remに縮むため、本文側のクリアランスもPCより小さくてよい */
    #low-page.l-center,
    #low-page > .l-center {
        padding-bottom: 5rem;
    }
    .c-cta {
        margin-top: 0;
        padding: 26rem 0 4rem;
        background-color: #333;
        background-image: url("img/bg-cta_sp.jpg");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat, no-repeat;
    }
    .c-cta .l-center {
        padding-top: var(--s6);
        padding-bottom: var(--s5);
    }
    .c-cta__inner {
        margin-top: 2rem;
        margin-bottom: 4rem;
    }
    .c-cta__lead {
        max-width: none;
        font-size: var(--fs-base);
    }
    .c-cta__card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        margin: -2rem var(--s3) 0;
        padding: var(--s7) var(--s4) 0;
        background: rgba(255, 255, 255, 0.9);
    }
    .c-cta__card-body {
        max-width: none;
        /* ラッパーを透過させ、text/buttonをc-cta__cardの直接のflexアイテムにして
           qrと合わせて3つを個別に並び替えられるようにする */
        display: contents;
    }
    .c-cta__card-text {
        text-align: left;
        order: 3;
    }
    .c-cta .btn-web {
        order: 2;
        margin: 0 auto;
    }
    .c-cta__qr {
        width: 12rem;
        margin: 0 auto;
        order: 1;
    }

    /* フッター SP */
    .footer-area {
        padding-top: var(--s5);
    }
    .footer-area .l-center {
        padding-left: var(--s4);
        padding-right: var(--s4);
    }
    .footer-main {
        flex-direction: column;
        gap: var(--s6);
        padding-bottom: var(--s6);
    }
    .footer-info {
        flex-direction: column;
        gap: var(--s5);
    }
    .footer-nav {
        flex-direction: column;
        gap: var(--s2);
    }
    .footer-nav__col {
        gap: 0;
    }
    .footer-nav__col a {
        display: block;
        padding: var(--s3) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .footer-sub {
        gap: var(--s4);
        border-top: none;
        padding-top: 0;
    }

    /* 見出し SP */
    .c-sec-head {
        margin-bottom: 0;
        padding-left: var(--s3);
        padding-right: var(--s3);
    }
    .c-h2 {
        font-size: 2.6rem;
    }
    .c-h3 {
        font-size: var(--fs-xl);
    }
    .c-h4 {
        font-size: 2.2rem;
    }

    /* l-stack SP */
    .l-stack-md { gap: var(--s5); }
    .l-stack-l  { gap: var(--s7); }
    .l-stack-xl { gap: var(--s10); }

    /* カテゴリTOP：注目リンクカード SP */
    .c-cate-top__cards {
        padding: var(--s5) 0;
    }
    .c-cate-top__card {
        padding: var(--s4);
    }
    /* cate_top.html（category.php、#low-pageにl-centerが付かない）だけ赤枠を非表示にする */
    #low-page:not(.l-center) .c-cate-top__card {
        border: none;
    }

    /* カテゴリTOP：h2見出しバナー・小見出し導入 SP */
    .c-cate-top__h2-banner,
    #low-page h2:not([class]) {
        gap: var(--s3);
        font-size: var(--fs-xl);
        padding: var(--s2) var(--s2);
        white-space: normal;
        width: 100%;
        margin-bottom: 2rem;
        margin-top: 3rem;
    }
    #low-page h2:not([class]):not(:first-of-type) {
        margin-top: 4rem;
    }
    .c-cate-top__h2-banner[data-wrapped]::before,
    .c-cate-top__h2-banner[data-wrapped]::after,
    #low-page h2:not([class])[data-wrapped]::before,
    #low-page h2:not([class])[data-wrapped]::after {
        display: none;
    }
    .c-cate-top__h2-banner::before,
    .c-cate-top__h2-banner::after,
    #low-page h2:not([class])::before,
    #low-page h2:not([class])::after {
        height: 0.5rem;
        background-image: repeating-linear-gradient(
            to right,
            var(--white) 0,
            var(--white) 1.4rem,
            transparent 1.4rem,
            transparent 2.6rem
        );
    }
    .c-cate-top__intro {
        padding: var(--s5) 0;
    }
    .c-cate-top__intro .l-grid-two-large {
        margin-bottom: var(--s6);
    }

    /* カテゴリTOP：スタッフ・記事リスト SP */
    .c-cate-top__list {
        padding: var(--s10) 0;
    }
    .c-cate-top__list-items {
        gap: var(--s6);
    }
    .c-cate-top__list-link {
        align-items: flex-start;
        gap: var(--s3);
    }
    .c-cate-top__list-thumb {
        width: 8rem;
        height: 8rem;
    }

    /* 画像＋見出し＋本文パーツ（c-serviceLinkSec） SP：c-cate-top__listと同じ調整 */
    .c-serviceLink {
        gap: var(--s6);
    }
    .c-serviceLink__card {
        align-items: flex-start;
        gap: var(--s3);
    }
    .c-serviceLink__thumb {
        width: 8rem;
        height: 8rem;
    }

    /* カテゴリTOP：事例 SP */
    .c-cate-top__case {
        padding: var(--s5) 0;
    }
    .c-cate-top__case-group + .c-cate-top__case-group {
        margin-top: var(--s6);
    }

    /* 関連記事（related-article01） SP：.c-tocと同じく左端はデバイス端まで背景を伸ばす */
    .related-article01-frame {
        margin-left: calc(-1 * (var(--s2) + var(--s-2)));
        width: calc(100% + (var(--s2) + var(--s-2)));
        padding: var(--s6) var(--s4) var(--s7) calc(var(--s4) + var(--s2) + var(--s-2));
        margin-bottom: 7rem;
    }
    .related-article01-title span {
        font-size: var(--fs-xl);
    }
    .related-article01-gradation {
        padding: var(--s5);
    }
    .related-article01-btn {
        font-size: 1.6rem;
    }
    /* カテゴリTOP：目次 SP：左端はデバイス端まで背景を伸ばし、右上・右下は4remの角丸にする */
    .c-toc {
        margin-left: calc(-1 * (var(--s2) + var(--s-2)));
        width: calc(100% + (var(--s2) + var(--s-2)));
        padding: var(--s6) var(--s4) var(--s7) calc(var(--s1) + var(--s2) + var(--s-2));
        margin-bottom: var(--s6);
        border-top-right-radius: 4rem;
        border-bottom-right-radius: 4rem;
    }
    .c-toc__item--h3 {
        padding-left: var(--s5);
    }
    .c-cate-top__intro .c-cate-top__case-head {
        margin-bottom: var(--s1);
    }
    .c-toc__title {
        font-size: var(--fs-xl);
    }
    .c-toc__card {
        padding: var(--s5);
    }

    /* カテゴリTOP：こんな課題はありませんか SP */
    .c-cate-top__concern {
        margin-right: calc(-1 * (var(--s2) + var(--s-2)));
        width: calc(100% + (var(--s2) + var(--s-2)));
        padding: var(--s7) calc(var(--s2) + var(--s-2)) var(--s7) 0;
        border-top-left-radius: 4rem;
        border-bottom-left-radius: 4rem;
    }
    .c-cate-top__concern-card {
        padding: var(--s5);
    }
    .c-cate-top__concern-list li {
        white-space: normal;
    }

    /* カテゴリTOP：課題リスト SP */
    .c-cate-top__issues {
        padding: var(--s7) 0;
    }
    .c-cate-top__issues .l-center {
        padding-left: 0;
        padding-right: 0;
    }
    .c-cate-top__issues-item {
        gap: var(--s3);
    }
    .c-cate-top__issues-num {
        width: 7.2rem;
        height: 7.2rem;
        border-radius: var(--s3);
        font-size: var(--fs-2xl);
    }

    /* カテゴリTOP：関連事例のご紹介 SP */
    .c-cate-top__related {
        padding: var(--s5) 0;
    }
    .c-cate-top__related .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
    }

    /* カテゴリTOP：ご担当者様のコメント SP */
    .c-cate-top__comment {
        padding: var(--s7) 0;
    }
    .c-cate-top__comment-card {
        padding: var(--s5);
    }
    .c-cate-top__comment-body {
        flex-direction: column;
    }
    .c-cate-top__comment-photo {
        width: 8rem;
    }
    .c-cate-top__comment-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .c-cate-top__comment-cta .btn-web {
        width: 100%;
    }

    /* 回り込み画像3点セット（low-*-img-box） SP：l-floatと同じくSPは幅100%・フロート解除 */
    .low-left-img,
    .low-right-img {
        width: 100%;
        float: none;
    }
    .low-center-img-box {
        width: 100%;
    }

    /* こんな課題ありませんかBOX（c-lowIssueSec） SP：c-cate-top__concernと同じ調整。
       右端ブリード計算（100vw-120rem）はSP幅では0になるため、l-centerのSP側パディング分を
       打ち消して右端まで届かせる（.c-tocの左端ブリードと同じ理由・逆方向） */
    .c-lowIssueSec {
        margin-right: calc(-1 * (var(--s2) + var(--s-2)));
        width: calc(100% + (var(--s2) + var(--s-2)));
        padding: var(--s7) calc(var(--s2) + var(--s-2)) var(--s3) var(--s3);
        border-top-left-radius: 4rem;
        border-bottom-left-radius: 4rem;
    }
    .c-lowIssue__title {
        font-size: 2.4rem;
    }
    .c-lowIssue ul {
        padding: var(--s4);
    }

    /* ステップBOX（c-stepFlowSec） SP：c-cate-top__issuesと同じ縮小率 */
    .c-stepFlowSec {
        margin-bottom: var(--s5);
    }
    .c-stepFlow__item {
        min-height: 7.2rem;
        padding-left: calc(7.2rem + var(--s3));
    }
    .c-stepFlow__rail,
    .c-stepFlow__label {
        width: 7.2rem;
        height: 7.2rem;
    }
    .c-stepFlow__rail {
        border-radius: var(--s3);
    }
    .c-stepFlow__label {
        font-size: var(--fs-2xl);
    }
    .c-stepFlow__title {
        font-size: var(--fs-lg);
    }

    /* 担当者のコメントBOX（c-commentCaseSec） SP：c-cate-top__commentと同じ調整 */
    .c-commentCaseSec {
        padding: var(--s7) 0;
    }
    .c-commentCase {
        padding: var(--s5);
    }
    .c-commentCase__meta {
        font-size: var(--fs-lg);
        margin-bottom: var(--s4);
    }
    .c-commentCase__meta::before {
        width: 1.6rem;
        height: 1.6rem;
        border-width: 0.5rem;
    }
    .c-commentCase__title {
        line-height: 1.5;
    }
    .c-commentCase__ctaLead {
        line-height: 1.4;
    }
    .c-commentCase__thumb {
        width: 8rem;
        margin-right: var(--s3);
    }
    .c-commentCase__cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--s2);
    }
    .c-commentCase__cta .btn-web {
        width: 100%;
    }

    /* 回り込み画像3点セット（low-*-img-box） SP：キャッチ文字サイズ・余白調整 */
    .low-center-img-box,
    .low-left-img-box,
    .low-right-img-box {
        margin-bottom: var(--s5);
    }
    .low-center-img-catch,
    .low-left-img-catch,
    .low-right-img-catch {
        font-size: var(--fs-lg);
    }

    /* 2つ並びBOX（c-lowCards） SP：余白調整 */
    .c-lowCards {
        margin-bottom: var(--s5);
    }
    .c-lowCards__item {
        margin-bottom: var(--s4);
    }

    /* 3つ並びBOX（c-lowCardsAltSec） SP：余白調整 */
    .c-lowCardsAltSec {
        margin-bottom: var(--s5);
    }

    /* 事例用：ナビゲーションBOX（c-caseLinksSec） SP：余白調整 */
    .c-caseLinksSec {
        margin-bottom: var(--s5);
    }

    /* ===== カテゴリTOP（cate_top.html）追加SP調整 ここから ===== */
    /* PC用の固定font-size（3.6rem/2.8rem等）が詳細度の関係で共通のSP縮小より
       優先されてしまうため、top.htmlの各セクションと同じ理由で個別に上書きする */

    /* 注目リンクカード（4件） */
    .c-cate-top__cards {
        border-radius: 3rem;
    }
    .c-cate-top__cards .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s4);
        margin-bottom: var(--s3);
    }
    .c-cate-top__card-head .c-h3 {
        font-size: var(--fs-xl);
    }

    /* 下層ページ：インラインテーブル（幅120rem）SP：横スクロール対応（未対応で横ずれの原因になっていた） */
    .c-cate-top__table-inline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .c-cate-top__table-inline table {
        width: max-content;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-bottom: 0.1rem solid var(--line);
        margin-bottom: 1.5rem !important;
    }
    .c-cate-top__table-inline th,
    .c-cate-top__table-inline td {
        min-width: 20rem;
        font-size: var(--fs-base);
        padding: var(--s2) var(--s2);
    }
    .c-cate-top__table-inline th:first-child,
    .c-cate-top__table-inline td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 13rem;
        width: 13rem;
        border-left: 0.1rem solid var(--line);
    }

    /* スタッフ・記事リスト */
    .c-cate-top__list .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
    }
    .c-serviceLink__title {
        font-size: var(--fs-lg);
    }

    /* ポイント（2件、c-cate-top__cards--simple） */
    .c-cate-top__cards.c-cate-top__cards--simple {
        padding: var(--s5) 0;
    }
    .c-cate-top__card--simple .c-h3 {
        font-size: var(--fs-xl);
    }

    /* 事例 */
    .c-cate-top__case {
        padding: var(--s5) 0;
    }
    .c-cate-top__case .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
    }
    .c-cate-top__case-head {
        font-size: var(--fs-xl);
    }
    .c-cate-top__case-mark {
        width: 2.4rem;
        height: 2.4rem;
        border-width: 0.5rem;
    }
    .c-caseLinks__title {
        font-size: var(--fs-lg);
        margin-bottom: 1rem;
    }

    /* よくあるご質問（カテゴリ固有：c-faqSec / acc-title.faq-q） */
    .c-faqSec .c-sec-head .c-h2 {
        font-size: 2.6rem;
        padding-bottom: var(--s2);
        margin-bottom: var(--s3);
    }
    .acc-area {
        padding: 0 var(--s3) var(--s3);
    }
    .acc-title.faq-q {
        font-size: var(--fs-md);
        padding: var(--s4) 0 var(--s3);
        padding-right: var(--s7);
        gap: var(--s2);
        align-items: flex-start;
    }
    .acc-title.faq-q::after {
        width: 2.4rem;
    }
    .acc-title.faq-q::before {
        height: 2.4rem;
        right: 1.2rem;
    }
    .acc-content.faq-a dd {
        align-items: flex-start;
    }
    .acc-content.faq-a dd::before {
        font-size: var(--fs-xl);
    }
    /* ===== カテゴリTOP 追加SP調整 ここまで ===== */
}

/* =============================================================
    口コミ引用パーツ（c-reviewQuote）
    ※外部サイト等の口コミを「引用」として掲載するためのパーツ。
      編集者が実運用でc-reviewQuote__label＝見出し／c-reviewQuote__body＝
      本文（末尾に属性を記載）という使い方で量産しているため、HTMLは変えずに
      トップページの受講生の声（c-voice）と同系統のカードデザインを適用する。
      c-voice__card／__title／p::after（アイコン）と同じレシピを流用し、
      c-reviewQuote__list をグリッド化・各c-reviewQuote__itemをカード化している。
============================================================= */
.c-reviewQuoteSec {
    margin-bottom: var(--s8);
}
.c-reviewQuote__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}
.c-reviewQuote__item {
    position: relative;
    padding: var(--s5);
    margin-bottom: var(--s5);
    background: var(--bg-sec);
    border-radius: var(--s3);
    filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.15));
}
/* 共通CSSのli::before（バレット）を打ち消す */
.c-reviewQuote__item::before {
    display: none;
}
/* 吹き出しの三角形（c-voice__card::afterと同じ手法） */
.c-reviewQuote__item::after {
    content: "";
    position: absolute;
    bottom: -2.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 1.2rem solid transparent;
    border-right: 1.2rem solid transparent;
    border-top: 2.8rem solid var(--bg-sec);
}
.c-reviewQuote__label {
    margin: 0 0 var(--s4);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--site-color01);
}
/* テーマ側のblockquote既定スタイル（枠線・背景・インデント）を打ち消す */
.c-reviewQuote__body {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
.c-reviewQuote__body p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
}
/* c-voice__card p::afterと同じ人物アイコン */
.c-reviewQuote__body p::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: var(--s5) 0 0 auto;
    background: url("img/icon-voice-person.png") no-repeat center/contain;
}
.c-reviewQuote__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s1) var(--s3);
    margin: var(--s7) 0 0;
}
.c-reviewQuote__cite {
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--txt-sub);
}
/* サイト内の他パーツ（c-caseLinks__more等）と同じ丸矢印付きテキストリンク */
.c-reviewQuote__more {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--txt-main);
    text-decoration: none;
}
.c-reviewQuote__more:hover {
    opacity: 0.6;
}
.c-reviewQuote__more-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--txt-emp);
    background-image: url("img/arrow-right_white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

@media screen and (max-width: 767px) {
    .c-reviewQuoteSec {
        margin-bottom: var(--s5);
    }
    .c-reviewQuote__list {
        grid-template-columns: 1fr;
        gap: var(--s5);
    }
    .c-reviewQuote__item {
        padding: var(--s4);
    }
    .c-reviewQuote__item::after {
        bottom: -1.8rem;
        border-left-width: 0.8rem;
        border-right-width: 0.8rem;
        border-top-width: 2rem;
    }
    .c-reviewQuote__label {
        font-size: var(--fs-lg);
        margin-bottom: var(--s3);
    }
    .c-reviewQuote__body p::after {
        width: 3rem;
        height: 3rem;
        margin-top: var(--s3);
    }
    .c-reviewQuote__foot {
        margin-top: var(--s4);
    }
	.c-cate-top__table-inline td.c-cate-top__table-inline__flex {
    display:flex;
	flex-direction: column;
    }
	.c-cate-top__table-inline td.c-cate-top__table-inline__flex .btn-internal{
    max-width: 100%;
    width: 100%;
    margin: 1rem 0;
    }
}

/* =============================================================
    ノートPC（1366×768等）向け 個別コンポーネント調整
    ※root font-size / --fs-*トークンはcommon.css側で調整済み。
      ここではトークンだけでは対応しきれない個別パーツのみ上書きする
    ※このブロックはファイルの一番最後に置くこと。同一詳細度の場合、
      CSSは後に書かれたルールが勝つため、途中に置くと元のルールに
      負けてしまい!importantが必要になる（実際に負けて何度も!importantで
      対処する事態になったため、最後に移動した）
============================================================= */
@media screen and (min-width: 1001px) and (max-width: 1366px) {
    .c-mv__title {
        font-size: var(--fs-3xl);
    }
    /* コンテナが狭くなった分、原寸大(auto)の背景画像がはみ出て切れて見えるため縮小 */
    .c-features__layout::before {
        background-size: contain;
    }
    /* rem指定だとこのブレークポイントのroot font-size縮小分だけ一緒に縮んでしまうため、px直指定にする */
    .c-compare .l-center {
        max-width: 1000px;
    }
    .c-compare__table th:first-child {
        font-size: 15px;
        width: 20rem;
    }
    .c-access .l-center {
        max-width: 1000px;
    }
    .c-faq .l-center {
        max-width: 1000px;
    }
    .c-plan__row--four .c-h3 {
        font-size: var(--fs-lg);
    }
    /* --at/--mt/--paperはrem直書き(2.8rem)でroot font-size縮小の影響を受けてしまい、
       row-fourのh3（トークン指定で固定済み）とサイズが揃っていなかったため合わせる */
    .c-plan__title--at,
    .c-plan__title--mt,
    .c-plan__title--paper {
        font-size: var(--fs-lg);
    }
    /* アイコン＋テキストを縦中央揃えにする */
    .c-plan__item .c-h3 {
        align-items: center;
    }
    /* 4つ並び(row-four)は列幅が狭く、アイコンとの隙間分でテキストが1文字だけ
       折り返してしまうため、隙間とアイコン幅を少し詰めてテキスト側の余白を確保する */
    .c-plan__row--four .c-h3 {
        gap: var(--s1);
    }
    .c-plan__row--four .c-h3::before {
        width: 2.6rem;
    }
    /* 矢印アイコン分の右余白(padding-right)と、カード自体の左右余白が広く、
       テキスト幅を圧迫しているため、その分を詰めて文字のスペースを広げる */
    .c-plan__row--four .c-plan__head {
        padding-right: var(--s3);
    }
    .c-plan__row--four .c-plan__item--sm,
    .c-plan__item {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .c-plan__prices td {
        padding: var(--s1) var(--s1);
    }
    .c-cta .c-h2 {
        font-size: var(--fs-2xl);
    }
    /* rem直書き(4rem/3.6rem)でroot font-size縮小の影響を受けてしまう各セクション見出しを、
       他と揃えてすべてpx直指定の36pxにする（c-cta .c-h2は別途28px指定のため対象外） */
    .c-appeal .c-h2,
    .c-features__head .c-h2,
    .c-compare .c-sec-head .c-h2,
    .c-staff .c-sec-head .c-h2,
    .c-manga .c-sec-head .c-h2,
    .c-plan .c-sec-head .c-h2,
    .c-access .c-sec-head .c-h2,
    .c-voice .c-sec-head .c-h2,
    .c-faq .c-sec-head .c-h2 {
        font-size: 36px;
    }
    .c-staff__subtitle {
        font-size: 28px;
    }
    .c-staff__subtitle::before, #low-page h3:not([class])::before {
        margin-top: 1.5rem;
    }
    .c-manga__card .c-h3,
    .c-voice__title,
    .c-faq__q {
        font-size: 24px;
    }
    .c-voice__more {
        font-size: 15px;
    }
    .c-appeal__catch {
        font-size: 20px;
    }
    /* rem直書き(120rem)でroot font-size縮小の影響を受けてしまうため、px直指定にする */
    .c-sec-lead {
        width: 1000px;
    }
    /* rem直書き(100rem)でroot font-size縮小の影響を受けてしまうため、px直指定にする */
    .c-page-lead .c-mv-lower__lead {
        width: 1000px;
    }
    /* 同じくrem直書き(120rem)で縮んでいたため、他のl-center系と合わせてpx直指定にする。
       ※.c-mv__body .l-centerは、.c-mv__bodyがpadding-left:34%(%指定で画面幅に連動)の
       特殊レイアウトのため、1000px固定にすると残り幅からはみ出す（1001〜1366px時で
       利用可能幅は約660〜900px）。ここだけは元のrem比例縮小(100rem)のままにする */
    .c-pickup .l-center {
        max-width: 1000px;
    }
    /* .c-mv__body .l-centerは112rem固定にしたいが、.c-mv__bodyのpadding-left:34%により
       利用可能幅が66vw（1001px時で約660px）まで狭まる区間があり、112rem（約747px）が
       はみ出す。利用可能幅（66vw）を上限にclampして、112remまで広げつつはみ出しを防ぐ */
    .c-mv__body .l-center {
        max-width: min(112rem, 66vw);
    }
    /* 比較表：td本体(2rem)と単位テキスト(1.6rem)がrem直書きで15px未満に縮んでいたため引き上げる */
    .c-compare__table td {
        font-size: 15px;
    }
    .c-compare__unit {
        font-size: 12px;
    }
    .c-pickup__item-name {
        font-size: 24px;
    }
    .c-features__card-body .c-h3 {
        font-size: 20px;
    }
    /* 「円」だけ価格の数字より小さくする */
    .c-mv__price-unit {
        font-size: var(--fs-3xl);
    }
    /* プラン料金表の「円」も同様に小さくする */
    .c-plan__price-unit {
        font-size: 15px;
    }
    /* 幅が狭くなり固定サイズの文字がボタン内に収まらないため、折り返しを許可する */
    .c-mv__bottom .btn-web a {
        white-space: normal;
    }
    /* 画像を縦中央ではなく上揃えにする */
    .c-appeal__item {
        align-items: flex-start;
    }
    /* 下層ページ（#low-page）本文の見出し（クラス無しh1〜h5）はPCと同じpx実寸で表示する */
    #low-page h1:not([class]) {
        font-size: 36px;
    }
    #low-page h2:not([class]) {
        font-size: 36px;
    }
    #low-page h3:not([class]) {
        font-size: 32px;
    }
    #low-page h4:not([class]) {
        font-size: 28px;
    }
    #low-page h5:not([class]) {
        font-size: 24px;
    }
    /* 下層ページ（カテゴリTOP・パーツ集）のコンテンツ幅も、rem直書き(100rem/120rem)で
       1000px未満に縮んでいたため、他のl-center系と合わせてpx直指定にする */
    .c-cate-top__intro > p,
    .c-cate-top__issues > p,
    .c-cate-top__center-block,
    .low-center-img-box,
    .c-commentCase,
    .c-faqSec__inner,
    .c-serviceLinkSec,
    .c-cate-top__list-inline,
    .c-cate-top__table-inline,
    .c-cate-top__list .l-center,
    .c-cate-top__comment-card {
        width: 1000px;
        /* max-width:1000pxだと、親(#low-page > .l-center)がこのブレークポイントで
           約800pxまで縮む場合にwidth:1000pxがそのまま勝ってはみ出すため、
           他のl-center系と同じく親を超えない安全弁(max-width:100%)にする */
        max-width: 100%;
    }
    /* この4つは左右どちらかに背景だけフルブリードさせる特殊なpadding計算
       ((100vw - 120rem)/2)を持つラッパーの内側にあり、実際に使える幅が1000pxよりわずかに
       狭い。widthを固定するとラッパーの右（または左）端からはみ出すため、max-widthのみにする */
    .c-lowIssue,
    .related-article01-gradation,
    .c-toc__card,
    .c-cate-top__concern-card {
        max-width: 1000px;
    }
    /* .c-tocは非ブリード側(右)にvar(--s6)の余白があるのに対し、.c-lowIssueSecは
       非ブリード側(左)が0のままで非対称だったため、同じ余白を持たせて揃える */
    .c-lowIssueSec {
        padding-left: var(--s6);
    }
    .c-cate-top__h2-banner {
        font-size: 36px;
    }
    .c-faqSec .c-sec-head .c-h2 {
        font-size: 36px;
    }
    .c-lowCards__title,
    .c-lowCardsAlt__title,
    .c-serviceLink__title,
    .acc-title.faq-q,
    .c-cate-top__card-head .c-h3 {
        font-size: 24px;
    }
    .c-cate-top__related .c-sec-head .c-h2 {
        font-size: 36px;
    }
    .c-caseLinks__title {
        font-size: 24px;
    }
    .related-article01-title span,
    .c-toc__title {
        font-size: 24px;
    }
    .c-cate-top__case .c-sec-head .c-h2 {
        font-size: 34px;
    }
    .c-cate-top__card--simple .c-h3 {
        font-size: 24px;
    }
    .c-cate-top__cards .c-sec-head .c-h2,
    .c-cate-top__list .c-sec-head .c-h2 {
        font-size: 36px;
    }
    .c-pickup__box-title {
        font-size: 36px;
    }
    .c-numbers__title {
        font-size: 36px;
    }
}












/* ===== 共通(PC含む): 追加要素はすべて非表示 ===== */
.manga-zoom-check,
.manga-zoom-viewer,
.manga-zoom-hint {
	display: none;
}

/* ===== SP表示のみ有効 ===== */
@media screen and (max-width: 767px) {

	.manga-zoom-thumb {
		display: block;
		position: relative;
		cursor: pointer;
	}

	.manga-zoom-hint {
		display: block;
		position: absolute;
		bottom: 12px;
		right: 12px;
		background: rgba(0, 0, 0, .65);
		color: #fff;
		font-size: 11px;
		line-height: 1;
		padding: 7px 14px;
		border-radius: 16px;
		pointer-events: none;
	}

	/* チェックONで全画面ビューア表示 */
	.manga-zoom-check:checked ~ .manga-zoom-viewer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, .92);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 画面幅の2倍に拡大 → 縦横スクロールで読める */
	.manga-zoom-viewer img {
		width: 200%;
		max-width: none;
		height: auto;
		display: block;
	}

	/* 閉じるボタン: 縦横どちらにスクロールしても左上に追従 */
	.manga-zoom-close {
		position: sticky;
		top: 12px;
		left: 12px;
		display: block;
		width: fit-content;
		margin: 12px;
		background: rgba(255, 255, 255, .92);
		color: #1a1a1a;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		padding: 10px 18px;
		border-radius: 20px;
		cursor: pointer;
		z-index: 2;
	}
}

/* 拡大中は背面ページのスクロールを固定 */
body:has(.manga-zoom-check:checked) {
	overflow: hidden;
}