@charset "utf-8";
/* CSS Document */

#contents {
	margin: 0 auto;
	padding: 3rem 0 0;
	max-width: 926px;
	width: 100%;
}
@media (max-width: 640px) {
    #contents {
        width: 90%;
        margin: 0 5%;
    }
    h1 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.2em;
    }
    .productlist li {
        width: 100%;
        margin-right: 0;
    }
}
h1 {
	margin: 15px 0;
	text-align: left;
}
h2 {
	margin-top: 50px;
}
p {
	text-align: left; /* 文章は左揃えを基本にする */
}

/* 画像だけを載せているpタグは、これまで通り中央に置く */
.p-image {
	text-align: center;
}

.small {
	font-size: 11px;
}
#footer {
	border-top: 5px solid #99CFC9;
	padding: 15px;
	text-align: center;
	margin-top: 25px;
	clear: both;
}
h3 {
	text-align: center;
}
h4 {
	color: #008080; /* バッジ等と同じteal色にして、新旧セクションの色味を揃える */
}
#mess {
	width: 835px;
	padding: 10px;
	border: 1px solid #DEDEDE;
}
@media (max-width: 640px) {
	#mess {
		width: 100%;
		box-sizing: border-box; /* paddingを付けても幅からはみ出さないように */
		margin: 0;
		padding: 15px; /* 元々0で文字が枠にくっついていたので、余白を復活させる */
	}
}
.btn {
	text-align: center; /* 動画ボタンは文章ではないので中央のまま */
}
/* ------------------------------
   会員登録／ログインの案内。以前は画像2枚だったものを、
   同じ見た目のままHTML/CSSで組み直したもの(文言の修正や翻訳がしやすい)
------------------------------ */
.member-guide {
	display: flex;
	gap: 2.5em;
	margin: 2em 0;
}

.member-card {
	flex: 1 1 0;
	min-width: 0;
	padding: 1em 1.5em 1.5em 1.2em;
	background-color: #fefeef; /* 元画像と同じ、ごく薄いクリーム色 */
	border-top: 4px solid #ce0014;
	text-align: center;
}

/* 見出しの下の赤い区切り線 */
.member-card__title {
	margin: 0 0 0.8em;
	padding-bottom: 0.6em;
	border-bottom: 2px solid #ce0014;
	color: #222;
	/* 黄金比(≒1.618)の半分の段(√1.618≒1.272)ぶん大きくして見出しを目立たせる */
	font-size: 1.336em;
	font-weight: bold;
	text-align: center;
}

.member-card__lead {
	margin: 0 0 0.4em;
	color: #222;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}

.member-card__note {
	margin: 0;
	color: #444;
	font-size: 0.85em;
	line-height: 1.5;
	text-align: center;
}

.member-card__action {
	margin: 1.2em 0 0;
	text-align: center;
}

/* 赤いボタン。右端の丸い矢印はCSSで描く */
.member-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1.4em;
	background-color: #cf0115;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.3;
}

.member-btn::after {
	content: "";
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23cf0115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.member-btn:hover {
	background-color: #a80010;
	color: #fff;
}

/* ボタン内の「無料」の白抜き囲み */
.member-btn__free {
	padding: 0.1em 0.3em;
	background-color: #fff;
	color: #cf0115;
	font-weight: bold;
}

@media (max-width: 640px) {
	.member-guide {
		flex-direction: column-reverse; /* スマホでは会員登録の案内を先に見せる */
		gap: 1.5em;
	}
}
.productlist ul {
	width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2em;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	justify-content: center;
}
.productlist li {
	list-style: none;
	text-align: center;
}
.productlist li img {
	width: 100%;
}
.alpha a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
img {
	border: none;
	max-width: 100%; /* 画像が#contentsの幅からはみ出してスマホで横スクロールしてしまうのを防ぐ */
	height: auto;
}

/* New Header Guide Styles */
.new-header-guide {
    border: 1px solid #97c4c1;
    margin-bottom: 2em;
}

.guide-banner {
    /* 元の#97c4c1は白文字とのコントラスト比が約1.9:1しかなく読みにくかったため、
       ページ内の他の見出し・バッジと同じteal(#008080)に統一(コントラスト比 約4.8:1) */
    background-color: #008080;
    color: white;
    text-align: center;
    padding: 1em;
}

.guide-banner p {
    margin: 0;
    font-size: 1.272em; /* 黄金比の半分の段(√1.618)。以前は「1.2 em」と空白が入り無効だった */
    text-align: center;
    font-weight: 600;
}

.guide-banner h1 {
    font-size: 2em;
    font-weight: bold;
    display: inline;
}

.guide-columns {
    display: flex;
    background-color: #fff;
}

.guide-column {
    padding: 1.5em;
    flex: 1;
    text-align: center;
}

.guide-column.left {
    border-right: 1px solid #a8d8d4;
}

.guide-column h2 {
    color: #008080; /* A teal color */
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0;
}

.guide-column .subtext {
    margin: 1em 0;
    text-align: center;
    color: #333;
}

.guide-column .subtext strong {
    font-size: 1.2em;
    font-weight: bold;
    color: #c70067; /* Magenta */
}

/* バナー直下の導入文。左右2列の説明に入る前の案内なので、枠の中で左揃えにする */
.guide-lead {
    margin: 0;
    padding: 1.2em 1.5em 0;
    text-align: left;
    line-height: 1.7;
}

/* ソフトのアイコンと説明文の横並び */
.guide-column__intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.guide-column__icon {
    flex-shrink: 0;
    width: 3.4em;
    height: auto;
}

.guide-column__intro .subtext {
    margin: 0;
    text-align: left;
}

/* 「対応製品一覧」の小見出し */
.guide-column__label {
    margin: 1.5em 0 0.6em;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* 対応製品へのリンクボタン。原稿では製品写真入りだが、写真は差し替えが利くよう文字だけで作る */
.model-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
}

.model-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.7em 1em;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #333;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
    line-height: 1.3;
}

/* 右端の丸い矢印。画像ファイルを持たずCSSの中で描いている */
.model-link::after {
    content: "";
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background-color: #6d4c9e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.model-link:hover {
    border-color: #008080;
    color: #008080;
}

.guide-buttons {
    margin-top: 1.5em;
    display: flex;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
    flex-direction: column;
}

.guide-btn {
    background-color: #c70067; /* Magenta */
    color: white;
    text-decoration: none;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    line-height: 1.2;
    border: none;
    cursor: pointer;
}

.guide-btn:hover {
    opacity: 0.8;
}

/* Responsive Styles */
/* サイト全体のPC/SP切り替え基準(640px/641px)に合わせる。以前は768pxで独自に切り替わっており、
   641〜768pxの間だけ共通ヘッダーはPC表示、この見出しバナーだけSP表示という食い違いが起きていた */
@media (max-width: 640px) {
    .guide-columns {
        flex-direction: column;
    }

    .guide-column.left {
        border-right: none;
        border-bottom: 1px solid #a8d8d4;
    }

    .guide-buttons {
        flex-direction: column;
        align-items: center;
    }

    .guide-btn {
        width: 80%;
        box-sizing: border-box;
    }

    .guide-lead {
        padding: 1em 1em 0;
    }

    /* スマホ：全幅の縦積みにはせず、機種が多い欄は2列のタイルに並べる */
    .model-links--compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5em;
    }
    .model-links--compact .model-link {
        justify-content: space-between;
        padding: 0.6em 0.8em;
    }
}

/* 左右分割パネル(Audio Builderと既存STEPガイドの併記エリア) */
/* 引き戸のイメージ: 2枚の戸(パネル)は幅・位置を固定したまま重ねて置き、手前に出す方をz-indexで切り替える。
   隙間なく13%だけ覗かせるには、戸の幅を「コンテンツ幅-13%」に固定し、位置は動かさないのが正解 */
.split-panel {
    position: relative;
    display: grid;
    border: 1px solid #DEDEDE;
    margin: 2em 0;
    overflow: hidden;
    overflow: clip; /* ページ内リンク等で枠の内側が横にずれないよう、内側のスクロール自体を起こさない */
    /* 中の戸の重ね順(1〜3)がこの枠の中だけで完結するようにする。
       これを入れないと、サイト共通の追従メニュー(重ね順1)より戸が前に出てしまい、
       画面幅によってはメニューが戸に隠れる */
    isolation: isolate;
    /* パネル内の縦の余白はこの4段階だけを使う(バラつき防止) */
    --sp-xs: 0.5em;  /* 見出しと直後の本文など、くっつけたい間隔 */
    --sp-sm: 0.8em;  /* 段落どうし */
    --sp-md: 1.2em;  /* ひとまとまりの部品の下 */
    --sp-lg: 2em;    /* Stepなど大きな区切りの上 */
    --door-width: 89%; /* 戸1枚の幅(固定・常に同じ)。手前の戸がこの幅で全部見え、奥の戸は残り11%だけ覗く */
}

.split-side {
    grid-column: 1;
    grid-row: 1; /* 2枚を同じマスに重ねて置く。高さは高い方の戸に自動で揃う */
    width: var(--door-width);
    min-width: 0; /* 中の大きい画像に幅を引っ張られないようにする */
    padding: 2em;
    box-sizing: border-box;
    z-index: 1; /* 位置は動かさず、手前/奥の順番だけで見え方を変える */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.split-side img {
    max-width: 100%;
    height: auto;
}

.split-audio-builder {
    justify-self: start; /* 左端に固定 */
    background-color: #f4fafa;
    border-right: 1px solid #DEDEDE;
    z-index: 2; /* 通常時はAudio Builder側を手前に出しておく */
}

.split-step-guide {
    justify-self: end; /* 右端に固定 */
    background-color: #fff;
}

/* 今どちらの部屋(戸)を見ているかが分かる大見出し。各パネルの一番上に置く */
.split-room-title {
    margin: 0 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #008080;
    font-size: 1.3em;
    text-align: center;
}

/* Audio Builder側のStep見出し(画像を使わず文字だけで表現。h3なのでbaseのh3{text-align:center}を上書き) */
.step-heading {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin: 2em 0 0.5em;
    text-align: left;
}

.step-heading__badge {
    flex-shrink: 0;
    background-color: #008080; /* 既存の見出し色(teal)に合わせる */
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
}

.step-heading__title {
    font-weight: bold;
    font-size: 1.1em;
}

/* マウスが乗っている(またはタップした)側の戸を手前に出す(位置は動かさない) */
.split-side.is-active {
    z-index: 3;
}

/* 反対側の戸は動かさない(リキッドに変形させない)。少し暗くするだけ */
.split-side.is-dimmed {
    filter: brightness(0.7);
    opacity: 0.85;
}

/* 左右パネルの切替タブ。PCでもスマホでもクリックで切り替える
   (以前はPCだけマウスを乗せると切り替わったが、意図せず切り替わるため変更) */
.split-tabs {
    display: flex;
    justify-content: space-between; /* 左タブ=左の戸、右タブ=右の戸 と位置を対応させる */
    gap: 0.5em;
    margin: 2em 0 0;
}
.split-tab {
    padding: 0.7em 1.6em;
    border: 1px solid #008080;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background-color: #fff;
    color: #008080;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
}
.split-tab:hover {
    background-color: #e6f2f2;
}
/* 今表示している方のタブだけ塗りつぶして目立たせる */
.split-tab.is-active-tab {
    background-color: #008080;
    color: #fff;
}
.split-tab:focus-visible {
    outline: 2px solid #c70067;
    outline-offset: 2px;
}
/* タブの直下にパネルを密着させる */
.split-tabs + .split-panel {
    margin-top: 0;
}
/* 奥の戸(暗くなっている側)は、覗いている部分をクリックしても切り替えられる */
.split-side.is-dimmed {
    cursor: pointer;
}

@media (max-width: 640px) {
    .split-tabs {
        margin-top: 1.5em;
    }
    .split-tab {
        flex: 1;
        padding: 0.8em 0.5em;
        border-bottom: 1px solid #008080;
        border-radius: 6px;
        font-size: 0.95em;
    }
    .split-tabs + .split-panel {
        margin-top: 0.8em;
    }
}

/* スマホは戸を重ねず、タブで選んだ方だけを表示する(明暗の差では分かりにくいため、非表示/表示をはっきり分ける) */
@media (max-width: 640px) {
    .split-panel {
        display: block;
        margin-top: 0.8em;
    }

    .split-side {
        width: 100%;
        z-index: auto;
        border-right: none; /* PC用の仕切り線はタブに置き換わるので不要 */
    }

    /* 初期状態はAudio Builder側を表示。タブを押すとJSがis-active/is-dimmedを付け替える */
    .split-step-guide {
        display: none;
    }
    .split-side.is-active {
        display: block;
    }
    .split-side.is-dimmed {
        display: none;
    }

    /* SPでは部屋の大見出し(Audio Builderの3STEP等)は複数行になりやすいので左揃え+行間を広めに */
    .split-room-title {
        text-align: left;
        line-height: 1.3;
    }

    /* SPではStep1/2/3の見出し(バッジ+テキスト)は中央寄せにする。
       文章量によって折り返し位置がバラつかないよう、バッジとテキストを常に別行に固定する */
    .step-title,
    .step-heading {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* 旧usemap画像(step.png, img_step1.png)がスマホ幅で横にはみ出さないようにするだけの指定。
   リンク先の保守が難しいためクリック領域は持たせず、表示のみ */
.img-responsive {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------
   メッセージダウンロードサービスの案内(原稿では左にバナー、右に説明文)
------------------------------ */
.dl-service {
    display: flex;
    align-items: flex-start;
    gap: 1.2em;
    margin: 0.8em 0 1em;
}

.dl-service__banner {
    flex: 0 0 auto;
    width: 46%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2em 0.8em;
    margin: 0;
    padding: 0.7em 0.9em;
    background-color: #e0e1e2; /* 原稿のバナーは薄いグレー地に青文字 */
    box-sizing: border-box;
    text-align: left;
}

.dl-service__title {
    flex: 1 1 100%;
    color: #006895;
    font-weight: bold;
    font-size: 1.05em;
    line-height: 1.3;
}

.dl-service__lead {
    flex: 1 1 0;
    min-width: 0;
    color: #333;
    font-size: 0.95em;
    line-height: 1.5;
}

/* 「約3,000種」だけ赤字で目立たせる(原稿どおり) */
.dl-service__num {
    color: #e2001a;
    font-weight: bold;
}

/* 「MP3 無料DL」の四角いバッジ */
.dl-service__badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25em 0.6em;
    background-color: #00567a;
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.3;
}

.dl-service__badge-mp3 {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.dl-service__text {
    flex: 1 1 0;
    min-width: 0;
}

.dl-service__text p {
    text-align: left;
    margin: 0 0 0.5em;
}

.dl-service__text p:last-child {
    margin-bottom: 0;
}

/* ------------------------------
   取り込み可能なファイルの仕様表。左右に余白を取って引き締めて見せる
------------------------------ */
.filespec {
    width: calc(100% - 6em);
    margin: 1em auto 0;
    border-collapse: collapse;
    font-size: 0.85em;
}

.filespec caption {
    padding: 0.4em 0.9em;
    background-color: #006895;
    color: #fff;
    font-weight: bold;
    text-align: left;
}

.filespec th,
.filespec td {
    border: 1px solid #b9c8cf;
    padding: 0.5em 0.8em;
    text-align: left;
    vertical-align: top;
}

/* 原稿の画像では列見出しが黄色いが、あれは校正用のマーカーなので採用しない */
.filespec th {
    background-color: #eef2f4;
    font-weight: bold;
}

/* 中身のセルは白地にする。パネル側の淡い色が透けると読みにくいため */
.filespec td {
    background-color: #fff;
}

.filespec ul {
    margin: 0;
    padding-left: 1.1em;
    list-style: disc;
}

.filespec li {
    margin-bottom: 0.2em;
    line-height: 1.5;
}

@media (max-width: 640px) {
    /* 狭い画面では横並びをやめて縦に積む。表は幅いっぱいに使う */
    .dl-service {
        flex-direction: column;
    }
    .dl-service__banner {
        width: 100%;
    }
    .filespec {
        width: 100%;
    }
}

/* Step内の小見出し(「テキスト音声変換」「基本操作」など)。原稿の緑ラベルに合わせた帯 */
.sub-label {
    display: inline-block;
    margin: 1.8em 0 0.8em;
    padding: 0.35em 1.4em;
    background-color: #4a8c3f;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-align: left;
}

/* パネルの中に入れたSTEP矢印バーは、戸の幅に収めるため文字を少し詰める */
.split-side .step-flow__item {
    padding: 0.8em 1.9em 0.8em 1em;
}
/* 2つ目以降は左端がV字にえぐれているので、その分だけ文字の開始位置を右へずらす */
.split-side .step-flow__item--2,
.split-side .step-flow__item--3 {
    padding-left: 2.4em;
}
.split-side .step-flow__label {
    font-size: 1em;
}
.split-side .step-flow__desc {
    font-size: 0.8em;
}

/* どちらのソフトを使うかは製品の発売時期で決まるため、各パネル冒頭に対応製品を書く行 */
.target-models {
    margin: 0.5em 0 1.5em;
    padding: 0.6em 0.9em;
    background: #fff;
    border-left: 4px solid #97c4c1;
    font-size: 0.9em;
    line-height: 1.6;
    text-align: left;
    /* 白地だと軽く見えるので、箱全体にうっすら影を落として浮かせる */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ------------------------------
   内容がまだ確定していない箇所の目印。
   確定したらHTML側の class="non-fixing" を消すだけで通常表示に戻る
------------------------------ */
.non-fixing {
    position: relative;
    outline: 2px dashed #c70067;
    outline-offset: 3px;
}

/* 文字だけの箱は、右上のバッジに文章が潜り込まないよう右側を空けておく */
.target-models.non-fixing,
.g-list.non-fixing {
    padding-right: 5em;
}

.non-fixing::after {
    content: "確定前";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    background: #c70067;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Step1/2/3の大見出し(画像だったtit01〜tit03を文字に置き換えたもの)。
   見出し階層をh3に整理したため、h2が持っていた上の余白(50px)をここで補う */
.step-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 50px;
    text-align: left;
}
.step-title__badge {
    flex-shrink: 0;
    background-color: #008080; /* 既存の見出し色(teal)に合わせる */
    color: #fff;
    font-weight: bold;
    /* Audio Builder側の.step-heading__badgeとサイズが揃っていなかったため統一 */
    font-size: 0.9em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
}
.step-title__text {
    font-weight: bold;
}

/* 「簡単3ステップ！」の見出し(画像だったtit_3step.pngを文字に置き換えたもの) */
.section-heading {
    margin-top: 1.5em;
    text-align: center;
}
.section-heading__accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    margin: 0 0.1em;
    background-color: #008080;
    color: #fff;
    border-radius: 50%;
    /* 「3」だけ黄金比(フィボナッチ数列の収束比 ≒1.618)で拡大して目立たせる */
    font-size: 1.618em;
}

/* STEP1〜3の進捗バー(画像だったstep.pngを矢印形のCSSに置き換えたもの) */
.step-flow {
    display: flex;
    margin: 1.5em 0;
    /* 矢印3つの重ね順もこのバーの中だけで完結させる(理由は.split-panelと同じ) */
    isolation: isolate;
}
.step-flow__item {
    flex: 1;
    /* 右端は矢印の先端がとがっているぶん、文字が隣の矢印に乗って見えないよう広めに空ける */
    padding: 1em 2.4em 1em 1.5em;
    color: #fff;
}
.step-flow__item--1 {
    --shadow: #2b6d63; /* 背景色(#3f9c8f)を少し濃くした同系色 */
    background-color: #3f9c8f;
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
    z-index: 3;
}
.step-flow__item--2 {
    --shadow: #35608f; /* 背景色(#4a7fc4)を少し濃くした同系色 */
    background-color: #4a7fc4;
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
    margin-left: -1.5em;
    padding-left: 2.2em;
    z-index: 2;
}
.step-flow__item--3 {
    --shadow: #4c3670; /* 背景色(#6d4c9e)を少し濃くした同系色 */
    background-color: #6d4c9e;
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
    margin-left: -1.5em;
    padding-left: 2.2em;
    z-index: 1;
}
.step-flow__title,
.step-flow__label,
.step-flow__desc {
    text-align: center; /* このバーは短いラベルなので、本文の左揃え基本方針の対象外にする */
    margin: 0;
    /* 背景と同系統の濃い色で縁取りのような影をつけ、文字を読みやすくする */
    text-shadow: 1px 1px 0 var(--shadow), -1px 1px 0 var(--shadow), 1px -1px 0 var(--shadow), -1px -1px 0 var(--shadow);
}
.step-flow__title {
    font-weight: bold;
    font-size: 1.1em;
}
.step-flow__check {
    display: inline-block;
    margin-right: 0.2em;
}
.step-flow__label {
    font-weight: bold;
    margin: 0.2em 0 0.6em;
}
.step-flow__desc {
    font-size: 0.75em;
    font-weight: 600; /* 太さが無いと縁取り影があっても読みにくいため上げる */
    line-height: 1.4;
}

/* スマホでは矢印形にせず、縦に積んだシンプルな帯にする(下向きの矢印は不要) */
@media (max-width: 640px) {
    .step-flow {
        flex-direction: column;
        margin: 1em 0;
    }
    .step-flow__item,
    .split-side .step-flow__item,
    .split-side .step-flow__item--2,
    .split-side .step-flow__item--3 {
        clip-path: none;
        margin-left: 0;
        padding: 1em;
        z-index: auto; /* PCの矢印重ね順(1〜3)はSPでは不要。他要素との重なりに影響しないようリセット */
    }
}


/* ------------------------------
   パネル内の縦マージンの共通化。
   ここで一括して決めることで、部品ごとの数値のバラつきをなくす
   (どれも .split-side を付けて詳細度を揃えてあるので、上下関係を気にせず追記できる)
------------------------------ */
.split-side .split-room-title {
    margin: 0 0 var(--sp-md);
}
.split-side .target-models {
    margin: 0 0 var(--sp-lg);
}
.split-side .step-flow {
    margin: 0 0 var(--sp-lg);
}
.split-side .step-heading,
.split-side .sub-label {
    margin: var(--sp-lg) 0 var(--sp-xs);
}
.split-side p {
    margin: 0 0 var(--sp-sm);
}
.split-side .g-list {
    margin-bottom: var(--sp-md);
}
.split-side .img-responsive,
.split-side > img {
    display: block;
    margin: 0 0 var(--sp-md);
}
.split-side .dl-service {
    margin: 0 0 var(--sp-md);
}
.split-side .dl-service p {
    margin-bottom: var(--sp-xs);
}
.split-side .filespec {
    margin: var(--sp-md) auto 0;
}
/* 最後の要素の下は枠の内側余白(padding)に任せる */
.split-side > *:last-child {
    margin-bottom: 0;
}


/* ------------------------------
   ※の注記(サイト共通クラス)の位置合わせ。
   共通CSSは左マージンでリストごと右にずらすため、直前の本文と左端が揃わない。
   マージンを0に戻し、代わりに内側の余白で※の分だけ空ける
   (2行目以降が文頭に揃うぶら下げは維持される)
------------------------------ */
#contents .g-list-caution {
    margin-left: 0;
    padding-left: 1em;
}


/* ------------------------------
   画面写真に説明を重ねる部品。
   写真は素のスクリーンショットのまま、囲み枠・ラベル・吹き出しはHTML/CSSで載せる。
   文字を画像に焼き込まないので、修正も翻訳もテキスト編集だけで済む。

   仕組み: 写真と説明を同じマス目に重ねて置く(grid)。
   位置と大きさは写真に対する%指定、文字の大きさは写真の幅を基準にした単位(cqw)なので、
   写真が縮んでも説明の位置関係と見た目の比率が崩れない。
------------------------------ */
.annotated-shot {
    display: grid;
    margin: 0 0 var(--sp-md);
    container-type: inline-size; /* 中の文字サイズを写真の幅基準にするための宣言 */
}

.annotated-shot > img,
.annotated-shot > .shot-overlay {
    grid-area: 1 / 1; /* 2つを同じマスに重ねる */
}

.annotated-shot > img {
    display: block;
    width: 100%;
    height: auto;
}

.shot-overlay {
    position: relative;
    pointer-events: none; /* 重ねた説明が写真の邪魔をしないように */
}

/* 注目してほしい範囲を囲む角丸の枠 */
.shot-frame {
    position: absolute;
    border: 0.3cqw solid #009a8d;
    border-radius: 2.5cqw;
}

/* 位置は画面写真の実際のパネル境界を測って決めている
   (カタログ素材の画面 1800×870：左パネル x21〜403 / 右パネル x461〜1796 / 上端 y104・下端 y836。枠は少し外側に取る) */
.shot-frame--clips {
    left: 0.67%;
    top: 11.95%;
    width: 22.2%;
    height: 84.4%;
}

.shot-frame--playlist {
    left: 25.33%;
    top: 11.95%;
    width: 74.56%;
    height: 84.4%;
}

/* 枠の下辺に重ねる見出しラベル */
.shot-label {
    position: absolute;
    top: 96.35%; /* 枠の下辺に重ねる */
    transform: translateY(-50%);
    padding: 0.4cqw 1.1cqw;
    border-radius: 0.5cqw;
    background-color: #009a8d;
    color: #fff;
    font-size: 1.7cqw;
    font-weight: bold;
    line-height: 1.3;
    white-space: nowrap;
}

.shot-label--clips {
    left: 4%;
}

.shot-label--playlist {
    right: 1%;
}

/* 薄緑の吹き出し */
.shot-note {
    position: absolute;
    padding: 1.2cqw 1.5cqw;
    border-radius: 1cqw;
    background-color: #d3f2c9; /* 写真の上でも沈まないよう、緑をはっきりめにする */
    color: #14401f;
    font-size: 1.7cqw;
    line-height: 1.5;
    text-align: center;
}

/* 吹き出しの三角のしっぽ */
.shot-note::after {
    content: "";
    position: absolute;
    width: 5cqw;
    height: 4cqw;
    background-color: inherit;
}

.shot-note--edit {
    left: 57%;
    top: 40%; /* トラック2のクリップの右、トラック3・4の空き。目盛りとクリップを隠さない */
    width: 40%;
    box-sizing: border-box;
}

/* しっぽを上に長く伸ばし、今と同じくツールバー(複製・音量)を指す */
.shot-note--edit::after {
    left: 7%;
    top: -9.5cqw;
    width: 3cqw; /* 根元を細くして、先を鋭く見せる */
    height: 10cqw;
    clip-path: polygon(0 100%, 60% 0, 100% 100%);
}

.shot-note--select {
    left: 33%;
    top: 72%;
    width: 34%;
    box-sizing: border-box;
}

/* 指し示す相手が左枠の中なので、しっぽを長めに伸ばして左上へ向ける。
   吹き出しとの接合部は縦に幅を持たせ、角丸との間に隙間ができないよう内側へ少し重ねる */
.shot-note--select::after {
    left: -10.5cqw;
    top: -1.5cqw;
    width: 12cqw;
    height: 7cqw;
    clip-path: polygon(100% 30%, 0 0, 100% 100%);
}

/* 左の枠から右の枠へ向かう矢印。先端が吹き出しに重ならない幅にとどめる */
.shot-arrow {
    position: absolute;
    left: 19%;
    top: 58%;
    width: 17%;
    height: 14%;
    fill: #8ddc84;
}

/* スマホでは写真が小さくなり重ねた文字が読めないので、説明は隠して写真だけ見せる */
@media (max-width: 640px) {
    .shot-overlay {
        display: none;
    }
}


/* ------------------------------
   2026-09-22 チェックバック対応
------------------------------ */

/* 上部PPE2列の対応機種。リンク先が機種ごとに無いため、ボタンではなく型式の並びで見せる */
.model-names {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.model-names li {
    padding: 0.3em 0.7em;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.3;
}

/* 「メッセージダウンロードサービス」はAudio Builderの機能ではなく別サービスなので、
   緑の機能ラベルとは色と形を変えて区別する(サービスのバナーと同じ青系) */
.sub-label--service {
    background-color: #fff;
    color: #006895;
    border: 2px solid #006895;
}

/* Audio Builderの対応OS(カタログの表記に合わせる) */
.os-note {
    font-size: 0.9em;
    color: #444;
}

/* 改行位置の調整：単語の途中や記号だけが次の行に落ちないようにする */
.guide-column .subtext strong {
    white-space: nowrap;
}
.member-card__lead,
.step-flow__desc,
.guide-lead {
    text-wrap: pretty;
}
/* 上部2列の見出し：語の途中では折り返さず、HTML側で指定した位置（「PATLITE」の直後）でだけ折り返す。
   極端に狭い画面ではみ出さないよう、最後の手段としてどこでも折り返せるようにしておく */
.guide-column h2 {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 左右のパネル共通：STEP矢印の直下に置く、Step1〜3全体の見出し */
.split-side .panel-basic-title {
    margin: 0 0 var(--sp-xs);
    padding-left: 0.6em;
    border-left: 4px solid #008080;
    border-radius: 0;
    font-size: 1.15em;
    font-weight: bold;
    text-align: left;
}
/* 見出しの直後のStep1は、見出しとの間を詰める */
.split-side .panel-basic-title + .step-heading,
.split-side .panel-basic-title + .step-title {
    margin-top: var(--sp-md);
}

/* 上部PPE2列の対応機種ボタン。数が多いので少し小ぶりにする */
.model-links--compact {
    gap: 0.4em;
}
.model-links--compact .model-link {
    padding: 0.45em 0.7em;
    font-size: 0.8em;
    gap: 0.4em;
}

/* Step1 テキスト音声変換：画面写真と対応言語を横に並べる */
.tts-figure {
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin: 0 0 var(--sp-md);
}
.tts-figure__shot {
    flex: 0 1 55%;
    min-width: 0;
    height: auto;
    border: 1px solid #d5dde0;
}
.tts-langs {
    flex: 1 1 0;
    border: 2px solid #00a0a0;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}
.split-side .tts-langs__title {
    margin: 0;
    padding: 0.35em 1em;
    background-color: #00a0a0;
    color: #fff;
    font-weight: bold;
    text-align: left;
}
.tts-langs__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3em 1em;
    margin: 0;
    padding: 0.8em 1em 0.9em 2em;
    font-size: 0.9em;
}
@media (max-width: 640px) {
    .tts-figure {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 吹き出しに軽い影を付けて写真から浮かせる。
   しっぽは形を切り抜いて作っているため、箱の影(box-shadow)ではなく、しっぽごと影を落とせる drop-shadow を使う */
.shot-note {
    filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.28));
}

/* PCだけの改行。スマホでは自然に折り返す */
@media (max-width: 640px) {
    .br-pc {
        display: none;
    }
}


/* 重なり順：吹き出しを矢印より手前に出す(影の付いた吹き出しの上に矢印が乗ると不自然なため) */
.shot-arrow {
    z-index: 1;
}
.shot-note {
    z-index: 2;
}

/* ==============================
   ここから英語版(海外サイト)だけの設定
   上の部分は日本語版(co.jp /peditor/guide.css)と同じ内容。日本語版を直したら、上の部分も写す
============================== */

/* プレイリストエディタ2の案内が無いので、左右の戸にせず1枚で全幅に置く。
   日本語版の枠線・背景色は、タブで切り替える「戸」に見せるためのものなので、1枚だけの海外版では外して本文と同じ地に流す */
.split-panel--single {
    display: block;
    border: none;
    overflow: visible;
}
.split-panel--single .split-side {
    width: 100%;
    padding: 0;
    border-right: none;
    background-color: transparent;
}

/* 上部：1列だけなので中央にまとめる */
.new-header-guide .guide-columns {
    justify-content: center;
}
.guide-column__note {
    margin: 0.8em 0 0;
    color: #444;
    font-size: 0.85em;
    text-align: center;
}

/* 従来機種向けのソフト(プレイリストエディタ2)への案内 */
.ppe2-link {
    margin: 0 0 2em;
    font-size: 0.9em;
    text-align: center;
}

/* 英語UIの画面写真に合わせた枠の位置
   (1800×870：左パネル x14〜285 / 右パネル x309〜1794 / 上端 y82。下は写真の下端近くまで) */
.annotated-shot--en .shot-frame--clips {
    left: 0.45%;
    top: 8.7%;
    width: 15.7%;
    height: 87.4%;
}
.annotated-shot--en .shot-frame--playlist {
    left: 16.7%;
    top: 8.7%;
    width: 83.2%;
    height: 87.4%;
}
.annotated-shot--en .shot-label {
    top: 96.1%;
}
.annotated-shot--en .shot-label--clips {
    left: 1.5%;
}
/* 上の吹き出し：トラック5以降の空いている所に置き、しっぽでツールバー(複製・音量)を指す */
.annotated-shot--en .shot-note--edit {
    left: 40%;
    top: 45%;
    width: 42%;
}
/* ドイツ語は文が長く3行に折り返すため、吹き出しを少し広げて2行に収める */
:lang(de) .annotated-shot--en .shot-note--edit {
    width: 46%;
}
.annotated-shot--en .shot-note--edit::after {
    left: 7%;
    top: -13.5cqw;
    width: 3cqw;
    height: 14cqw;
    clip-path: polygon(0 100%, 60% 0, 100% 100%);
}
/* 下の吹き出しと矢印：左の一覧からトラックへ */
.annotated-shot--en .shot-note--select {
    left: 31%;
    top: 72%;
    width: 30%;
}
.annotated-shot--en .shot-arrow {
    left: 12%;
    top: 58%;
    width: 17%;
    height: 14%;
}

/* Step3 USB転送の図：文字を消した図の上に、英語の文字をHTMLで重ねる
   (位置は元の図の文字の位置。写真の幅を基準にした単位cqwで、縮んでも比率が崩れない) */
.usb-figure {
    display: grid;
    margin: 0 0 var(--sp-md);
    container-type: inline-size;
}
.usb-figure > img,
.usb-figure > .usb-figure__overlay {
    grid-area: 1 / 1;
}
.usb-figure > img {
    display: block;
    width: 100%;
    height: auto;
}
.usb-figure__overlay {
    position: relative;
    pointer-events: none;
}
.usb-figure__text,
.usb-figure__box {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    line-height: 1.2;
}
.usb-figure__text {
    color: #000;
    font-size: max(2.6cqw, 11px); /* スマホで図が縮んでも読める大きさは保つ */
}
.usb-figure__text--typec {
    left: 64.7%;
    top: 20.6%;
}
.usb-figure__text--usb {
    left: 44.7%;
    top: 78.8%;
}
/* 「Create」「Transfer」の濃い灰色の角丸(元の図と同じ色) */
.usb-figure__box {
    top: 93.1%;
    padding: max(0.35cqw, 2px) max(1.6cqw, 6px);
    border-radius: max(0.5cqw, 3px);
    background-color: #464747;
    color: #fff;
    font-size: max(2.3cqw, 10px); /* スマホで図が縮んでも読める大きさは保つ */
    font-weight: bold;
}
.usb-figure__box--create {
    left: 12.1%;
}
.usb-figure__box--transfer {
    left: 44.7%;
}

/* 画面には出さず、読み上げソフトにだけ伝える文 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* USB図の説明文：PCでは図の上の文字で足りるので読み上げ用にだけ持たせ、
   スマホでは図が小さく重ねた文字が読めないため、重ねた文字を消して図の下に表示する */
.usb-figure__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .usb-figure__overlay {
        display: none;
    }
    .usb-figure__caption {
        position: static;
        width: auto;
        height: auto;
        margin: 0.5em 0 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        color: #444;
        font-size: 0.85em;
    }
}

/* STEP矢印：海外版はパネルの題名を置かず、この矢印を「3ステップ」の象徴として見せる。
   各矢印の中は「左に大きな番号、右にラベルと説明文」の2列で左ぞろえにし、ひとかたまりに見せる。
   日本語版の文字の縁取り(濃い影)は、大きな太字だとにじんで見えるので、薄い影だけにする */
.split-panel--single .step-flow__item {
    display: grid;
    grid-template-columns: auto 1fr;
    /* 上下の余りを1frずつ取り、文字のかたまりを縦中央に置く。罫線(番号の欄)は上下いっぱいに伸ばす。
       矢印3つは同じ高さに並ぶので、罫線は3本とも「一番背の高い文字のかたまり」と同じ長さになる */
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 0.8em;
    align-content: stretch;
    padding: 1.9em 2.1em 1.9em 1.5em; /* 右は矢印の先端ぶん(幅の約8%)だけ空ける */
}
.split-panel--single .step-flow__item--2,
.split-panel--single .step-flow__item--3 {
    padding-left: 2.8em;
}
.split-panel--single .step-flow__title,
.split-panel--single .step-flow__label,
.split-panel--single .step-flow__desc {
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* 番号の欄：右の文字のかたまり(ラベル＋説明文)と同じ高さまで伸ばし、その右端に区切りの縦罫線を引く */
.split-panel--single .step-flow__title {
    grid-row: 1 / 5;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0 0 0.8em; /* 説明文の下の空きと同じだけ下を空け、縦罫線を文字の最後の行で止める */
    padding-right: 0.55em;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    line-height: 1;
}
/* 数字はイタリックで大きく */
.step-flow__num {
    font-size: 2.9em;
    font-style: italic;
    font-weight: bold;
    line-height: 0.9;
}
.split-panel--single .step-flow__label {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 0.8em; /* 見出しと説明文の間を少し空けて読みやすくする */
    font-size: 1.25em;
    line-height: 1.2;
}
.split-panel--single .step-flow__desc {
    grid-column: 2;
    grid-row: 3;
    margin: 0 0 0.8em; /* 下にも同じだけ空け、文字のかたまりが上下の中央に来るようにする */
    font-size: 0.88em;
    font-weight: 600; /* 色の上でも読みやすいよう太めにする */
    line-height: 1.45;
}
@media (max-width: 640px) {
    .split-panel--single .step-flow__item,
    .split-panel--single .step-flow__item--2,
    .split-panel--single .step-flow__item--3 {
        padding: 1em 1.2em;
    }
}