/* =========================================================
   style0_step193_template_sample_image_actual_size.css
   第193版: template1/sampleページの見本画像を原寸以上に拡大しない表示へ調整
   第192版: template1/sample1.htmlの上部説明カードを削除し、見本ページ左側の余白を出さない構成に調整
   第191版: template1/sample1.html（テンプレート見本ページ）をカード型レイアウトへリニューアルし、専用CSSを該当カテゴリへ統合
   第190版: template1/index.htmlの「縦型」「横型」ラベルの文字位置を少し下げ、本文リニューアル部分のクラス名を用途名で統一
   第189版: template1/index.htmlの「見本を見る」「ダウンロード」ボタンの赤みを抑え、落ち着いた茶系に調整

   ※今後このCSSを更新する場合は、この版コメント（第○版の履歴）も必ず更新すること。
   ※履歴コメントは最新5バージョンまでを記載し、古い履歴は削除すること。
   ========================================================= */

/* =========================================================
   style0_function_order.css
   目的: 機能順に並び替えた整理版
   並び順:
   01 基本設定・リセット
   02 ヘッダー・グローバルナビ
   03 メインレイアウト・本文
   04 ボックス・カード・導線ボタン
   05 フォーム
   06 テーブル
   07 パンくず・サイトマップ
   08 ソーシャル・外部ウィジェット
   09 装飾・テキスト補助・汎用クラス
   10 フッター
   11 その他・ページ個別調整
   12 レスポンシブ

   ※ CSSの指定内容は変更せず、ブロック単位で順番を整理しています。
   ※ 同一カテゴリ内では、元CSSでの前後関係を維持しています。

   ========================================================= */

/* =========================================================
   基本設定・リセット
   ========================================================= */

/* 汎用画像の基本挙動。
   max-width:100% により親幅を超えないようにしつつ、高さは自動調整。
   古い記述（width: auto;）は互換目的の可能性があるため維持。 */

img {
	vertical-align: top;
	max-width: 100%;
	width: auto;
	height: auto;
}

a img {
	border: none;
}

li {
	list-style-type: none;
}

a {
	color: #333399;
}

a:hover {
	color: #00A2FF;
	text-decoration: none;
}

/* 汎用 h2。
   #content h2 の方がより強い見出しデザインで、この指定はベース用途。 */

h2 {
	font-size: 15px;
	line-height: 19px;
	color: #4A4A4A;
	padding: 15px 0 10px;
	clear: both;
	font-weight: normal;
}

h2 span {
	font-size: 10px;
	padding-left: 15px;
	color: #FFAC46;
	letter-spacing: 1px;
	line-height: 14px;
}

/* 見出し風の装飾ボックス。
   疑似要素で左のアクセントラインを描いている。 */

h6 {
	font-size: 16px;
	position: relative;

	/* 左のアクセントライン分を確保するため、左余白だけ広めに設定。 */
	padding: 0.6em 0.5em 0.5em 1.4em;

	border: 2px solid #CCCCCC;
	border-radius: 5px;
}

h6::after {
	position: absolute;
	top: 50%;
	left: 0.7em;
	transform: translateY(-50%);
	content: '';
	width: 5px;
	height: 25px;
	background-color: #9B491E;
}

/* リンク一覧や説明リスト向けの共通装飾。
   dt を見出し、dd を説明文として見せる用途。 */

dl.dl_link {
	padding: 20px;
	border-bottom: 1px solid #D9D9D9;
	margin: 0 10px 0 5px;
}

/* float レイアウト崩れ防止用の clearfix。
   旧来のフロート主体レイアウトを支える基礎ユーティリティ。 */

/* clearfix */

.clearFix::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearFix {
	min-height: 1px;
}

/* 画像をセンタリング */

.appIconBig {
	display: block;
	margin: 0 auto;
}

iframe {
	border: 0;
	margin: 0;
	overflow: hidden;
}

/*コメントナビ*/

.navigation .alignright {
	float: right;
}

.navigation .alignleft {
	float: left;
}

.navigation::after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.navigation {
	margin-bottom: 30px;
}

/* --- はじめてのページ　アイコンのベースライン --- */

a.icon-link img {
	vertical-align: middle;
	margin-top: 0;
}

/* =========================================================
   ヘッダー・グローバルナビ
   ========================================================= */

/* ヘッダー：右上リンクの位置。
   li/a の見た目は PC用（601px以上）とタブレット・スマホ用（759px以下）で分けて指定。 */

header #h_list {
	position: absolute;
	top: 6px;
	right: 14px;
	margin: 0;
	padding: 0;
	text-align: right;
	z-index: 3;
}

/* ヘッダー：第一段階 整理 */

header {
	background-color: #FFFFFF;
	padding: 8px 18px;
	box-sizing: border-box;
	border-bottom: 1px solid #EAD7B8;
}

header h1 {
	margin: 10px 0 8px;
	color: #444444;
	font-size: 16px;
	line-height: 1.4;
	font-weight: normal;
	text-align: left;
}

header #logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
}

header h2 {
	margin: 8px 0 0;
	color: #4A4A4A;
	font-size: 15px;
	line-height: 1.7;
	font-weight: normal;
	text-align: left;
}

/* ヘッダー：SVGロゴ（スマホ用） */

header .site-logo-svg {
	display: none;
}

@media screen and (max-width: 600px) {
	header img#logo {
		display: none;
	}

	header .site-logo-text {
		display: none;
	}

	header .site-logo-svg {
		display: block;
		margin: 4px auto 8px;
		text-align: center;
		text-decoration: none;
	}

	header .site-logo-svg img {
		display: block;
		width: 100%;
		max-width: 420px;
		height: auto;
		margin: 0 auto;
	}
}

/* ヘッダー：SVGロゴ下サブコピー */

header .site-logo-sub {
	display: none;
}

@media screen and (max-width: 600px) {
	header .site-logo-sub {
		display: block;
		margin: 2px 0 8px;
		color: #5A321F;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
	}
}

/* ヘッダー：スマホ用h1文言切り替え */

.sp-h1-text {
	display: none;
}

@media screen and (max-width: 600px) {
	.pc-h1-text {
		display: none;
	}

	.sp-h1-text {
		display: inline;
	}
}

/* ==================== ヘッダー・ナビゲーション ==================== */

/* ===== グローバルメニュー調整済み：PC / タブレット / スマホ ===== */

/* サイト上部のブランド表示、補助リンク、案内情報、グローバルナビ領域。
   PC/スマホで表示方式がかなり変わるため、後半の media query とセットで確認する。 */

/* ===== ヘッダー関連 ===== */

/* ヘッダー右上などに出る横並びリンクの項目。
   区切り線とアイコン画像で補助メニュー風に見せている。 */

/* 電話番号や受付案内などの情報欄想定。
   画面幅によって非表示になるため、PC/SPで要確認。 */

header #info {
	font-size: 11px;
	color: #666666;
	line-height: 24px;
}

header #info strong {
	font-size: 26px;
	color: #FF6600;
	font-family: Arial, Helvetica, sans-serif;
}

header #info span {
	font-size: 18px;
	color: #505050;
}

/* PC・タブレット：ヘッダー上部リンクの見た目だけ調整 */
@media screen and (min-width: 601px) {

	header #h_list li {
		display: inline-block;
		margin: 0 0 0 4px;
		padding: 0;
		border: none;
		background: none;
		font-size: 12px;
		line-height: 1.4;
		vertical-align: top;
	}

	header #h_list a {
		display: inline-block;
		padding: 2px 8px;
		background: rgba(255, 255, 255, 0.42);
		border: 1px solid rgba(90, 50, 31, 0.18);
		border-radius: 4px;
		color: #5A321F;
		font-weight: normal;
		text-decoration: none;
		box-shadow: none;
	}

	header #h_list a:hover {
		background: rgba(255, 255, 255, 0.75);
		color: #8B1E1E;
		border-color: rgba(139, 30, 30, 0.35);
		text-decoration: none;
	}
}

/* =========================================================
   メインレイアウト・本文
   ========================================================= */

/* ページ全体の基本文字色・背景色・標準文字サイズ。
   読みやすさ改善のため line-height が追加されている。 */

body {
	color: #232323;
	background-color: #F2EDDE;
	font-size: 16px; /* 本文の読みやすさ調整 */
	line-height: 1.6; /* 本文の読みやすさ調整 */
}

#content img {
	margin-top: 4px;
}

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

/* ===== メインレイアウト ===== */

/* メイン表示領域の土台。
   #content やサイド領域を含む外枠として使われる。 */

#main {
	background-color: #FFFFFF;
}

#main h1 {
	font-size: 22px;
	color: #990000;
	border-top: 2px solid #B1B1B1;
	border-bottom: 2px solid #B1B1B1;
	padding: 5px 0;
}

/* 箱組みレイアウトの外側ラッパー。 */

#content .box_out {
	background-color: #F9F9F9;
	margin-bottom: 5px;
	padding: 5px;
}

/* 箱組みレイアウトの中身部分。
   多くのパーツの基本箱として再利用されている。 */

#content .box_in {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	margin-bottom: 5px;
	padding: 20px;
	border-radius: 10px;
}

/* 本文エリア専用の強い h2 デザイン。
   サイト内の主要セクション見出しとして使う想定。 */

#content h2 {
	font-size: 130%;
	font-weight: bold;
	text-align: left;
	border: 1px solid #990000;
	border-left-width: 10px;
	color: #990000;
	background-color: #FFFFFF;
	margin: 15px 0 10px;

	padding: 7px 10px 5px;
	line-height: 1.1;
}

/* 本文エリアの中見出し。
   背景色付き帯見出しで、情報ブロックの区切りに使われる。 */

#content h3 {
	font-size: 16px;
	line-height: 26px;
	color: #FFFFFF;
	padding: 4px 0 2px 10px;
	margin-top: 1px;
	font-weight: bold;
	background-color: #990000;
	margin-bottom: 0;
	display: block;
	border-bottom: 4px solid #C97D38;
}

#content h3 span {
	font-size: 10px;
	color: #FFDEA6;
	padding-left: 15px;
	font-weight: normal;
	letter-spacing: 2px;
}

/* 本文エリアの小見出し。
   左線アクセント型で、h3 より軽い区切り用途。 */

#content h4 {
	color: #FF6600;
	border-left: 3px solid #FFB77B;
	font-size: 16px;
	line-height: 16px;
	margin: 15px 5px 10px;
	padding: 3px 5px 3px 8px;
}

/* 本文エリアの補助見出し。
   左の太線と下線で見出し感を付ける。 */

#content h5 {
	border-bottom: 2px solid #FF8F00;
	border-left: 10px solid #FF8F00;
	color: #474747;
	font-size: 16px;
	padding: 5px 0 5px 15px;
}

#content h4 span {
	font-size: 12px;
	color: #FF9900;
	padding-left: 10px;
	line-height: 12px;
	font-weight: normal;
}

/* ===== 補助クラス ===== */

/* 見出し風の強調テキスト（W3C対応） */

#content .text-strong {
	font-size: 16px;
	position: relative;
	padding: 0.6em 0.5em 0.5em 1.4em;
	border: 2px solid #CCCCCC;
	border-radius: 5px;
	font-weight: bold;

	/* ここが重要：p の共通marginを打ち消す */
	margin: 10px 5px; /* 必要なら数値は微調整 */
}

#content .text-strong::after {
	position: absolute;
	top: 50%;
	left: 0.7em;
	transform: translateY(-50%);
	content: '';
	width: 5px;
	height: 25px;
	background-color: #9B491E;
}

/* h5 相当の見出し風テキスト（W3C対応） */

/* p 要素などで h5 相当の見出し風装飾を再現するクラス。 */

#content .text-h5 {
	border-bottom: 2px solid #FF8F00;
	border-left: 10px solid #FF8F00;
	color: #474747;
	font-size: 16px;
	padding: 5px 0 5px 15px;

	/* p に付くデフォルト余白の調整 */
	margin: 10px 5px;
	font-weight: bold;
}

/* 本文段落の基本設定。
   サイズと行間が比較的しっかり確保されており、可読性重視。 */

#content p {
	font-size: 16px; /* 本文の読みやすさ調整 */
	line-height: 1.8; /* 重要：可読性アップ */
	padding: 5px;
	margin: 5px 10px 10px;
}

/* 回り込み用の左寄せ画像。
   旧来の float レイアウト依存のため、周辺要素との回り込みに注意。 */

.img_left {
	float: left;
	background-color: #FFFFFF;
	padding: 2px;
	margin: 5px 20px 10px 10px;
	border: 1px solid #EDECE9;
}

/* 回り込み用の右寄せ画像。 */

.img_right {
	float: right;
	background-color: #FFFFFF;
	padding: 2px;
	margin: 5px 10px 10px 20px;
	border: 1px solid #EDECE9;
}

/* メインビジュアル領域。
   上に重ねるテキスト（.top_txt）とセットで使う前提。 */

#top_img {
	padding: 19px;
	position: relative;
}

#top_img .top_txt {
	text-align: left;
	position: absolute;
	z-index: 10;
	left: 30px;
	color: #FFFFFF;
	font-size: 18px;
	padding: 16px 0 8px 30px;
	background-image: url("img/top_txt.png");
	letter-spacing: 1px;
	line-height: 18px;
	width: 350px;
	background-repeat: repeat-y;
	background-position: left top;
	top: 35%;
}

#top_img .top_txt span {
	font-size: 10px;
}

#content .to_top {
	clear: both;
	margin: 16px 0 10px;
	padding: 0;
	text-align: right;
}

#content .to-top-link,
#content .to_top > a[href="#hp_base"] {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	background: #FFFDF7;
	border: 1px solid #EAD7B8;
	border-radius: 999px;
	color: #C40000;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	position: relative;
}

#content .to-top-link::before,
#content .to_top > a[href="#hp_base"]::before {
	content: "↑";
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

#content .to-top-link:hover,
#content .to_top > a[href="#hp_base"]:hover {
	background: #FFF3E5;
	color: #8B1E1E;
	text-decoration: none;
	opacity: 1;
}

#content .to_top img {
	display: none;
}

/* 汎用箇条書きリスト。
   画像付きのリストマーカーを使った説明項目向け。 */

#content ul.list {
	padding: 10px 0;
}

#content ul.list li {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 7px;
	padding-left: 15px;
	background-image: url("img/li.gif");
	background-repeat: no-repeat;
	background-position: 5px center;
	border-bottom: 1px dotted #DDDDDD;
	color: #777777;
}

#content .chui {
	color: #E44545;
	font-size: 13px;
}

/* 定義リスト型の一覧。
   用語・項目名と説明を左右で見せる用途。 */

#content .dl_list dl dt {
	float: left;
	width: 22%;
	border-right: 1px dotted #B48332;
	text-align: right;
	padding-right: 3%;
	margin-right: 3%;
}

#content .dl_list dl {
	clear: both;
	border-bottom: 1px dotted #D6D6D6;
	padding: 10px 6% 10px 2%;
}

#content .dl_list dl dd {
	margin-left: 28%;

}

/* 本文エリア内画像の枠線リセット */

#content img {
	border: none;
}

#content .img0 {
	border: 0;
}

/* float崩れ防止 */

#content .box_in::after {
	content: "";
	display: block;
	clear: both;
}

#content .table_menu strong {
	font-size: 16px;
	color: #1A1A1A;
}

#content .table_info .td_odd p {
	margin: 0;
}

/* 本文標準 */

.text-lh-170 {
	line-height: 1.7;
}

#content .text-lh-140 {
	line-height: 1.4;
}

#content .text-lh-150 {
	line-height: 1.5;
}

#content .text-lh-160 {
	line-height: 1.6;
}

#content .text-lh-170 {
	line-height: 1.7;
}

#content .text-lh-180 {
	line-height: 1.8;
}

#content .text-lh-200 {
	line-height: 2;
}

#content .text-scale-85 {
	font-size: 85%;
}

#content .text-scale-90 {
	font-size: 90%;
}

#content .text-scale-95 {
	font-size: 95%;
}

#content .text-scale-100 {
	font-size: 100%;
}

#content .text-scale-105 {
	font-size: 105%;
}

#content .text-scale-110 {
	font-size: 110%;
}

#content .text-scale-115 {
	font-size: 115%;
}

#content .text-scale-120 {
	font-size: 120%;
}

#content .text-scale-125 {
	font-size: 125%;
}

#content .text-scale-130 {
	font-size: 130%;
}

#content span.notice-text.sm {
	font-size: 13px;
}

/* select.html専用：注文ページ全体の基礎指定
   旧式の box番号・意味の薄いクラス名を使わず、用途が分かる名称で統一。 */
#content .order-select-page {
	color: #2F2720;
}

#content .order-select-page * {
	box-sizing: border-box;
}

#content .order-select-page a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* repeat/index.html専用：再注文ページ全体の基礎指定
   旧式の box番号・意味の薄いクラス名を使わず、用途が分かる名称で統一。 */
#content .repeat-order-page {
	color: #2F2720;
}

#content .repeat-order-page * {
	box-sizing: border-box;
}

#content .repeat-order-page a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* template1/index.html専用：テンプレート無料ダウンロードページ全体の基礎指定
   旧式の box番号・意味の薄いクラス名を使わず、用途が分かる名称で統一。 */
#content .template-download-page {
	color: #2F2720;
}

#content .template-download-page * {
	box-sizing: border-box;
}

#content .template-download-page a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* template1/sample1.html専用：テンプレート見本ページ全体の基礎指定
   旧式の box番号・意味の薄いクラス名を使わず、用途が分かる名称で統一。 */
#main .template-sample-page {
	color: #2F2720;
	padding: 16px 18px 24px;
	text-align: center;
}

#main .template-sample-page * {
	box-sizing: border-box;
}

#main .template-sample-page a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* =========================================================
   ボックス・カード・導線ボタン
   ========================================================= */

/* ==================== メインレイアウト・コンテンツ ==================== */

/* .switchBtn
------------------------- */

/* 表示切替ボタン群。
   ページ内タブや表示モード切替など、複数選択肢の切替UI向け。 */

.switchBtn {
	margin-top: 15px;
	padding: 10px 0;
	width: 100%;
	text-align: center;
	background: #EFEFEF;
	clear: both;
}

.switchBtn a {
	margin: 0 10px;
	padding: 5px 30px;
	text-align: center;
	display: inline-block;
	overflow: hidden;
	background: #EFEFEF;
	border: #333333 solid 1px;
	font-size: 13pt;
}

.switchBtn a.btnAcv {
	background: #FFFFFF;
}

/* select.html専用：用紙選択カード・注文ボタン */
#content .order-paper-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 28px;
}

#content .order-paper-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #D9C1A0;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(90, 50, 31, 0.10);
}

#content .order-paper-card:hover {
	transform: translateY(-3px);
	border-color: #B88746;
	box-shadow: 0 10px 24px rgba(90, 50, 31, 0.17);
}

#content .order-paper-image-link {
	display: block;
	padding: 18px 18px 0;
	background: #FFFFFF;
	border-radius: 18px 18px 0 0;
	text-align: center;
}

#content .order-paper-image-link img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
	padding: 4px;
	border: 1px solid #DCC8A8;
	border-radius: 4px;
	background: #FFFFFF;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

#content .order-paper-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 18px 20px;
	background: #FFFFFF;
	border-radius: 0 0 18px 18px;
}

#content .order-paper-card-header {
	margin-bottom: 8px;
}

#content .order-paper-card-header h4 {
	margin: 0;
	padding: 0;
	border: none;
	color: #8B1E1E;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

#content .order-paper-description {
	margin: 0 0 12px;
	padding: 0;
	font-size: 15px;
	line-height: 1.75;
	color: #3B332D;
}

#content .order-paper-spec-list {
	margin: 0 0 8px;
	padding: 0;
	border-top: 1px solid #F0E2CC;
}

#content .order-paper-spec-list div {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #F0E2CC;
}

#content .order-paper-spec-list dt,
#content .order-paper-spec-list dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

#content .order-paper-spec-list dt {
	color: #7A5C33;
	font-weight: bold;
}

#content .order-paper-spec-list dd {
	color: #2F2720;
}

#content .order-paper-note {
	margin: 0 0 14px;
	padding: 0;
	color: #8B1E1E;
	font-size: 13px;
	line-height: 1.6;
}

#content .order-paper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 11px 14px;
	background: #C40000;
	border: 1px solid #C40000;
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

#content .order-paper-button::after {
	content: "›";
	margin-left: 8px;
	font-size: 20px;
	line-height: 1;
}

#content .order-paper-button:hover {
	background: #8B1E1E;
	border-color: #8B1E1E;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
}

/* repeat/index.html専用：再注文カード・導線ボタン */
#content .repeat-choice-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 16px;
}

#content .repeat-choice-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #D9C1A0;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(90, 50, 31, 0.10);
}

#content .repeat-choice-card:hover {
	transform: translateY(-3px);
	border-color: #B88746;
	box-shadow: 0 10px 24px rgba(90, 50, 31, 0.17);
}

#content .repeat-choice-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px;
}

#content .repeat-choice-type {
	margin: 0 0 8px !important;
	padding: 0;
	color: #B88746;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

#content .repeat-choice-card h4 {
	margin: 0 0 10px;
	padding: 0;
	border: none;
	color: #8B1E1E;
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: 0.02em;
}

#content .repeat-choice-card p {
	margin: 0 0 16px;
	padding: 0;
	font-size: 15px;
	line-height: 1.75;
	color: #3B332D;
}

#content .repeat-choice-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 11px 14px;
	background: #C40000;
	border: 1px solid #C40000;
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

#content .repeat-choice-button::after {
	content: "›";
	margin-left: 8px;
	font-size: 20px;
	line-height: 1;
}

#content .repeat-choice-button:hover {
	background: #8B1E1E;
	border-color: #8B1E1E;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
}

#content .repeat-choice-button--secondary {
	background: #8B1E1E;
	border-color: #8B1E1E;
}

/* template1/index.html専用：テンプレートカード・ダウンロードボタン */
#content .template-download-card-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

#content .template-download-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #D9C1A0;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(90, 50, 31, 0.10);
}

#content .template-download-card:hover {
	transform: translateY(-3px);
	border-color: #B88746;
	box-shadow: 0 10px 24px rgba(90, 50, 31, 0.17);
}

#content .template-sample-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 18px 18px 8px;
	background: #FFFFFF;
	border-radius: 18px 18px 0 0;
	text-align: center;
}

#content .template-sample-link img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 200px;
	height: auto;
	margin: 0 auto;
	padding: 4px;
	border: 1px solid #DCC8A8;
	border-radius: 4px;
	background: #FFFFFF;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

#content .template-download-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 14px 16px 16px;
	background: #FFFFFF;
	border-radius: 0 0 18px 18px;
}

#content .template-card-title-row {
	margin-bottom: 8px;
}

#content .template-card-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	padding: 3px 8px 1px;
	background: #FFF3E5;
	border: 1px solid #EAD7B8;
	border-radius: 999px;
	color: #7A5C33;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	transform: translateY(1px);
}

#content .template-card-title-row h4 {
	margin: 0;
	padding: 0;
	border: none;
	color: #8B1E1E;
	font-size: 17px;
	line-height: 1.45;
	letter-spacing: 0.02em;
}

#content .template-file-info {
	margin: 0 0 12px;
	padding: 0;
	color: #3B332D;
	font-size: 14px;
	line-height: 1.6;
}

#content .template-file-info span {
	color: #7A5C33;
	font-weight: bold;
}

#content .template-card-button-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: auto;
}

#content .template-preview-button,
#content .template-download-button,
#content .template-main-button,
#content .template-sub-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

#content .template-download-button,
#content .template-main-button {
	background: #8B5E2E;
	border: 1px solid #8B5E2E;
	color: #FFFFFF;
}

#content .template-preview-button,
#content .template-sub-button {
	background: #FFFDF8;
	border: 1px solid #D9C1A0;
	color: #7A4A1F;
}

#content .template-download-button::after,
#content .template-main-button::after {
	content: "›";
	margin-left: 8px;
	font-size: 20px;
	line-height: 1;
}

#content .template-preview-button:hover,
#content .template-download-button:hover,
#content .template-main-button:hover,
#content .template-sub-button:hover {
	background: #6F3F18;
	border-color: #6F3F18;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
}

/* template1/sample1.html専用：見本ページのボタン */
#main .template-sample-action-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px 0 0;
}

#main .template-sample-download-button,
#main .template-sample-back-button,
#main .template-sample-home-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

#main .template-sample-download-button {
	background: #8B5E2E;
	border: 1px solid #8B5E2E;
	color: #FFFFFF;
}

#main .template-sample-download-button::after {
	content: "›";
	margin-left: 8px;
	font-size: 20px;
	line-height: 1;
}

#main .template-sample-back-button,
#main .template-sample-home-button {
	background: #FFFDF8;
	border: 1px solid #D9C1A0;
	color: #7A4A1F;
}

#main .template-sample-back-button::before,
#main .template-sample-home-button::before {
	content: "←";
	margin-right: 7px;
	font-size: 14px;
	line-height: 1;
}

#main .template-sample-download-button:hover,
#main .template-sample-back-button:hover,
#main .template-sample-home-button:hover {
	background: #6F3F18;
	border-color: #6F3F18;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
}

#main .box3 {
	text-align: center;
	width: 47%;
	padding: 8px 0;
	float: left;
	margin-bottom: 10px;
}

#content .box02_left h3, #content .box02_right h3 {
	clear: both;
}

/* 左右2カラムの box02 系の中身調整。
   同一レイアウトの左右差分を抑えるための共通指定。 */

#content .box02_left .box_in,
#content .box02_right .box_in {
	padding: 5px 10px;
}

#content .box02_left p,
#content .box02_right p {
	margin: 0;
}

.box02_left .img_left {
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 5px;
}

.box02_left .img_right {
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 10px;
}

/* menu_base は後半の旧互換ブロックで一元管理。 */

/* 地図埋め込みや案内図を囲う枠。 */

.map_base {
	background-color: #FFFFFF;
	text-align: center;
	margin: 15px 0;
	padding: 2px 0 5px;
	border: 1px solid #EAEAEA;
}

/* 汎用ボタン風リンク。
   box3 内ボタンでも再利用されるため、影響範囲が広い。 */

.btn_s a {
	padding: 2px 7px;
	font-size: 12px;
	border-color: #DDDDDD;
	border-style: solid;
	border-width: 2px 3px;
	text-decoration: none;
	line-height: 16px;
	color: #FFFFFF;
	background-color: #FF9900;
}

.btn_s a:hover,
.box3 .btn a:hover {
	color: #F97700;
	background-color: #FFFFFF;
	border-color: #F97700;
}

/* 商品・サンプル・カード表示用の基本ボックス。 */

#content .box3 {
	text-align: center;
	width: 47%;
	padding: 8px 0;
	border: 1px solid #EEE8DF;
	float: left;
	margin: 0 0 10px 2%;
	background-color: #F9F7F4;
	box-sizing: border-box;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

/* box3 に近いカード系ボックス。 */

#content .box4 {
	text-align: center;
	width: 30%;
	padding: 8px 0;
	border: 1px solid #EEE8DF;
	float: left;
	margin: 0 0 10px 2%;
	background-color: #F9F7F4;
	min-height: 146px;
	box-sizing: border-box;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

/* トップページ：見本画像カードのグリッド化（float崩れ防止） */

#content .top-sample-grid {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 2%;
	align-items: flex-start;
}

#content .top-sample-grid .top-sample-card,
#content .top-sample-grid .top-sample-card-vertical {
	float: none;
	margin-left: 0;
	width: 49%;
}

#content .top-sample-grid::after {
	content: "";
	display: block;
	clear: both;
}

/* トップページ：見本画像カード（box3 / box4 置き換え用） */

#content .top-sample-card {
	text-align: center;
	width: 47%;
	padding: 8px 0;
	border: 1px solid #EEE8DF;
	float: left;
	margin: 0 0 10px 2%;
	background-color: #F9F7F4;
	box-sizing: border-box;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

#content .top-sample-card-vertical {
	width: 30%;
	min-height: 146px;
}

#content .top-sample-card img {
	max-width: 100%;
	height: auto;
}

#content .top-sample-card .btn a,
#content .top-sample-card .btn a:link,
#content .top-sample-card .btn a:visited {
	display: block;
	width: 110px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 2px 7px;
	font-size: 12px;
	border-color: #DDDDDD;
	border-style: solid;
	border-width: 2px 3px;
	text-decoration: none;
	line-height: 16px;
	color: #FFFFFF;
	background-color: #FF9900;
}

#content .top-sample-card .btn a:hover {
	color: #F97700;
	background-color: #FFFFFF;
	border-color: #F97700;
}

/* トップページ：3枚画像セットのカード風ホバー効果（top-image-item専用） */

#content .top-image-row .top-image-item a {
	display: block;
	padding: 5px;
	background: #FFFDF7;
	border: 1px solid #EAD7B8;
	border-radius: 8px;
	box-sizing: border-box;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#content .top-image-row .top-image-item img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: none;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 0;
}

#content .top-image-row .top-image-item a:hover {
	transform: translateY(-3px);
	border-color: #B88746;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

/* トップページ：3枚画像セット */

#content .top-image-row {
	clear: both;
	display: flex;
	gap: 10px;
	margin: 4px 0 14px;
	box-sizing: border-box;
}

#content .top-image-row .top-image-item {
	float: none;
	width: 33.333%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* 旧クラス：box16（他ページ互換用・今後新規使用非推奨） */

#content .box16 {
	width: 33.333%;
	float: left;
	text-align: center;
	padding: 0 6px;
	margin: 0 0 12px;
	box-sizing: border-box;
}

#content .box16 img {
	max-width: 100%;
	height: auto;
	margin: 0;
}

/* =========================================================
   ■ box6（文例ボックス）基本設定
   ---------------------------------------------------------
   ・旧レイアウト：floatで2列表示
   ・高さは固定から可変に変更済み
   ・他ページでも使われている共通クラスなので注意
   ========================================================= */

#content .box6 {
	text-align: left;
	width: 46%;
	padding: 0;
	border: 16px solid #E4D8B4;
	float: left;
	margin-bottom: -16px;
	background-color: #FBFBFB;
	margin-right: -7px;

	/* 高さ固定を廃止（文字量に応じて伸びる） */
	min-height: 219px;
	height: auto;
}

/* =========================================================
   ■ box6_sub（box6内サブボックス）
   ---------------------------------------------------------
   ・box6内の補助エリア用
   ・基本レイアウトには影響しない
   ========================================================= */

#content .box6_sub {
	text-align: left;
	width: 95%;
	border: 5px solid #FFE1C4;
	float: left;
	background-color: #F8F8F8;
}

/* =========================================================
   ■ 文例ページ専用：高さ揃えレイアウト（重要）
   ---------------------------------------------------------
   ・bunreiページのみ適用
   ・flexを使って2列＋高さ揃えを実現
   ・他ページに影響を出さないため専用クラスで制御
   ========================================================= */

/* 親要素：2列レイアウト化 */

#content .bunrei_box_area {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch; /* 高さ揃えの本体 */
}

/* 子要素：box6をflex用に上書き */

#content .bunrei_box_area .box6 {
	box-sizing: border-box;
	width: calc(50% - 8px);

	/* floatレイアウトを無効化 */
	float: none;

	/* 余白調整（flex側でgap管理） */
	margin: 0;

	/* 高さは可変＋最低高さ確保 */
	min-height: 219px;
	height: auto;
}

#content .box9 {
	text-align: left;
	width: 46%;
	float: left;
	padding-right: 22px;
	font-size: 14px;
}

#content .box10 {
	text-align: left;
	width: 59%;
	float: left;
	padding-right: 27px;
}

#content .box11 {
	text-align: left;
	width: 37%;
	float: left;
	font-size: 13px;
}

#content .box12 {
	text-align: left;
	width: 61%;
	padding: 0;
	float: left;
	margin-bottom: -16px;
	background-color: #ECE9D8;
	margin-right: -11px;
	height: 388px;
}

#content .box13 {
	text-align: left;
	width: 39%;
	padding: 0;
	float: left;
	margin-bottom: -16px;
	background-color: #ECE9D8;
	margin-right: -7px;
	height: 388px;
}

/* トップページ：最終更新日バー（box14 廃止後の専用クラス） */

#content .top-update-bar {
	clear: both;
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;

	/* 上・左右・下の余白を明示。 */
	padding: 7px 18px 4px;

	background-color: #990000;
	color: #FDFDFD;
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
}

#content .top-update-bar strong {
	font-weight: bold;
}

#content .box15 {
	width: 50%;
	float: left;
	text-align: center;
}

/* トップページ：メイン案内バナー（information2.gif 背景使用） */

#content .top-info-banner {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 700 / 124;
	min-height: 124px;
	margin: 6px auto 24px;
	padding: 0 1% 0 0;
	background-color: #FFFDF0;
	background-image: url("img/information2.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	border: 1px solid #D8C590;
	color: #4A4A4A;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	overflow: hidden;
}

#content a.top-info-banner,
#content a.top-info-banner:link,
#content a.top-info-banner:visited,
#content a.top-info-banner:hover,
#content a.top-info-banner:active {
	text-decoration: none;
	color: #4A4A4A;
}

#content a.top-info-banner p,
#content a.top-info-banner strong,
#content a.top-info-banner span {
	text-decoration: none;
}

#content a.top-info-banner:hover {
	opacity: 0.9;
}

#content .top-info-banner p {
	margin: 0;
	padding: 0;
}

#content .top-info-price-main {
	font-size: 30px;
	font-weight: bold;
	line-height: 1.18;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

#content .top-info-price-main strong {
	font-size: 38px;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
}

#content .top-info-price-main span {
	font-size: 14px;
	margin-left: 2px;
}

#content .top-info-price-sub {
	margin-top: 5px !important;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.25;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

#content .top-info-price-sub strong {
	font-size: 23px;
	font-family: Arial, Helvetica, sans-serif;
}

#content .top-info-price-sub span {
	font-size: 11px;
	margin-left: 2px;
}

/* トップページ：画像見出しのテキスト化用 */

#content .top-section-copy {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #990000;
	line-height: 1.5;
	letter-spacing: 0.06em;
	margin: 32px auto 24px;
	padding: 14px 20px;
	position: relative;
	background: linear-gradient(to right, transparent, #FFF7E8 15%, #FFF7E8 85%, transparent);
}

#content .top-section-copy::before,
#content .top-section-copy::after {
	content: "";
	display: block;
	width: 72%;
	height: 2px;
	margin: 0 auto;
	background: linear-gradient(to right, transparent, #C97D38, transparent);
}

#content .top-section-copy::before {
	margin-bottom: 10px;
}

#content .top-section-copy::after {
	margin-top: 10px;
}

/* トップページ：特徴見出し（画像見出しのテキスト化用） */

#content .feature-heading {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	margin: 26px 0 18px;
	padding: 12px 18px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-left: 8px solid #B88746;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	color: #8B1E1E;
}

#content .feature-heading-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 42px;
	height: 32px;
	margin-right: 14px;
	padding: 0 10px;
	background-color: #8B1E1E;
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY(1px);
}

#content .feature-heading-number::before {
	content: "特徴";
	display: inline-block;
	margin-right: 5px;
	font-size: 12px;
	font-weight: normal;
	transform: translateY(1px);
}

#content .feature-heading-text {
	display: inline-block;
	font-size: 23px;
	font-weight: bold;
	line-height: 1.45;
	letter-spacing: 0.04em;
	transform: translateY(2px);
}

/* トップページ：更新日バー下の余白 */

#content .top-space-sm {
	clear: both;
	height: 12px;
	font-size: 0;
	line-height: 0;
}

/* トップページ：挨拶・現在状況ボックス */

#content .top-message-box {
	box-sizing: border-box;
	margin: 22px 0 24px;

	/* 上下・左右の余白を明示。 */
	padding: 18px 20px;

	background: linear-gradient(135deg, #FFFAF2 0%, #FFFFFF 62%, #FFF4DF 100%);
	border: 1px solid #E2C99D;
	border-left: 8px solid #B88746;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#content .top-message-box p {
	margin: 0;
	padding: 0;
}

#content .top-message-title {
	margin-bottom: 10px !important;
	color: #8B1E1E;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

#content .top-message-main {
	margin-bottom: 16px;
	color: #333333;
	font-size: 16px;
	line-height: 1.8;
}

#content .top-status-box {
	/* 上下・左右の余白を明示。 */
	padding: 14px 16px;

	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 8px;
}

#content .top-status-title {
	margin-bottom: 6px !important;
	color: #C40000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}

#content .top-status-box p {
	color: #232323;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
}

/* トップページ：価格表見出し */

#content .top-price-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 12px;
	padding: 10px 14px;
	background: #FFFAF2;
	border-left: 6px solid #B88746;
	border-bottom: 1px solid #E2C99D;
	box-sizing: border-box;
}

#content .top-price-heading span {
	color: #8B1E1E;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

#content .top-price-heading a {
	color: #8B1E1E;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px solid #8B1E1E;
}

#content .top-price-heading a:hover {
	color: #C40000;
	border-bottom-color: #C40000;
}

/* トップページ：中間余白 */

#content .top-space-md {
	clear: both;
	height: 18px;
	font-size: 0;
	line-height: 0;
}

/* トップページ：価格表本体（table_menu / td_head / td_odd 置き換え用） */

#content .top-price-box {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 12px auto 22px;
}

#content .top-price-table {
	width: 100%;
	margin: 0;
	border: 1px solid #D8C590;
	border-collapse: collapse;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#content .top-price-table th,
#content .top-price-table td {
	border: 1px solid #D8C590;
	padding: 11px 14px;
	line-height: 1.6;
}

#content .top-price-label {
	background: #F7EDD8;
	color: #5A321F;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

#content .top-price-value {
	background: #FFFFFF;
	color: #232323;
}

#content .top-price-value strong {
	font-size: 18px;
	color: #111111;
	font-weight: bold;
}

/* トップページ：料金の目安（menu_base / table_menu 置き換え用） */

#content .top-price-note-box {
	margin: 24px 0 22px;
}

#content .top-price-note-table {
	width: 100%;
	margin: 0;
	border: 1px solid #D8C590;
	border-left: 6px solid #B88746;
	border-collapse: collapse;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#content .top-price-note-table td {
	padding: 16px 18px;
	background: #FFFFFF;
	border: none;
	line-height: 1.6;
}

#content .top-price-note-title {
	display: block;
	margin-bottom: 6px;
	color: #8B1E1E;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
}

/* トップページ：用紙の大きさ（menu_base / table_menu / td_head / td_odd 置き換え用） */

#content .top-paper-size-box {
	margin: 24px 0 22px;
}

#content .top-paper-size-table {
	width: 100%;
	margin: 0;
	border: 1px solid #D8C590;
	border-collapse: collapse;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#content .top-paper-size-table th,
#content .top-paper-size-table td {
	border: 1px solid #D8C590;
	padding: 11px 14px;
	line-height: 1.6;
	vertical-align: middle;
}

#content .top-paper-size-label {
	background: #F7EDD8;
	color: #5A321F;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

#content .top-paper-size-value {
	background: #FFFFFF;
	color: #232323;
}

#content .top-paper-size-list strong {
	font-size: 18px;
	color: #232323;
}

#content .top-paper-size-note {
	font-size: 14px;
	line-height: 1.7;
}

/* トップページ：用紙サイズ注意ボックス */

#content .top-paper-notice {
	margin: 12px 0 22px;
	padding: 11px 13px;
	background: #FFFDF8;
	border: 1px solid #EAD7B8;
	border-left: 4px solid #D8C590;
	border-radius: 6px;
	box-sizing: border-box;
}

#content .top-paper-notice p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.75;
}

#content .top-paper-notice strong:first-child {
	display: inline-block;
	margin-right: 6px;
	color: #8B1E1E;
}

/* 旧互換：menu_base / table_menu 系（他ページ互換用・今後新規使用非推奨） */

/* 旧互換：menu_base（他ページ互換用） */
#content .menu_base {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 12px auto 22px;
}

/* 旧互換：table_menu（他ページ互換用） */
#content .menu_base .table_menu {
	width: 100%;
	margin: 0;
	border: 1px solid #D8C590;
	border-collapse: collapse;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 旧互換：table_menu 内セル（他ページ互換用） */
#content .menu_base .table_menu th,
#content .menu_base .table_menu td {
	border: 1px solid #D8C590;
	padding: 11px 14px;
	line-height: 1.6;
}

/* 旧互換：td_head 相当（他ページ互換用） */
#content .menu_base .table_menu th {
	background: #F7EDD8;
	color: #5A321F;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

/* 旧互換：td_odd 相当（他ページ互換用） */
#content .menu_base .table_menu td {
	background: #FFFFFF;
	color: #232323;
}

#content .menu_base .table_menu strong {
	font-size: 18px;
	color: #111111;
	font-weight: bold;
}

/* トップページ：画像＋説明文ブロック */

#content .top-info-section {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	box-sizing: border-box;
}

#content .top-info-section-image {
	flex: 0 0 220px;
	box-sizing: border-box;
}

#content .top-info-section-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 8px;
}

#content .top-info-section-text {
	flex: 1;
	box-sizing: border-box;
}

#content .top-info-section-text p {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
}

/* トップページ：本文説明ブロック */

#content .top-text-section {
	padding: 2px 4px;
	box-sizing: border-box;
}

#content .top-text-section p {
	margin: 0 0 14px;
	padding: 0;
	font-size: 16px;
	line-height: 1.85;
}

#content .top-text-section p:last-child {
	margin-bottom: 0;
}

/* トップページ：セクション間の余白 */

#content .top-section-gap {
	clear: both;
	height: 18px;
	font-size: 0;
	line-height: 0;
}

/* トップページ：ご注文のながれ（1列タイムライン型・作業者色分け） */

#content .order-flow {
	position: relative;
	margin: 18px 0 26px;
	padding-left: 16px;
}

#content .order-flow::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 34px;
	width: 2px;
	background: #D8C590;
}

#content .order-flow-step {
	position: relative;
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
	padding: 16px 18px 16px 12px;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
	box-sizing: border-box;
	border: 1px solid #D8C590;
	background: #FFFFFF;
}

#content .order-flow-step::after {
	display: none;
}

#content .order-flow-number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 17px;
	font-weight: bold;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY(-4px);
}

#content .order-flow-body {
	flex: 1;
}

#content .order-flow-body p {
	margin: 0;
	padding: 0;
	line-height: 1.75;
}

#content .order-flow-title {
	margin-bottom: 5px !important;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
}

#content .order-flow a {
	font-weight: bold;
}

#content .order-flow-step.step-customer {
	background: #FFF7EF;
	border-color: #E6B36D;
	border-left: 6px solid #F08A24;
}

#content .order-flow-step.step-customer .order-flow-number {
	background: #F08A24;
	border: 3px solid #FFF7EF;
}

#content .order-flow-step.step-customer .order-flow-title {
	color: #B85A00;
}

#content .order-flow-step.step-company {
	background: #FFFBE8;
	border-color: #DFCF87;
	border-left: 6px solid #E0B800;
}

#content .order-flow-step.step-company .order-flow-number {
	background: #D6B100;
	border: 3px solid #FFFBE8;
	color: #5A4200;
}

#content .order-flow-step.step-company .order-flow-title {
	color: #8A6A00;
}

#content .flow-role {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.4;
	vertical-align: middle;
	transform: translateY(0);
	opacity: 0.82;
}

#content .role-customer {
	background: #FFF3E5;
	color: #B85A00;
	border: 1px solid #F3B06A;
}

#content .role-company {
	background: #FFF8CF;
	color: #8A6A00;
	border: 1px solid #E2CA55;
}

/* トップページ：特急印刷コース案内カード */

#content .speed-course-card {
	box-sizing: border-box;
	margin: 18px auto 24px;
	background: #FFFDF8;
	border: 1px solid #EAD7B8;
	border-left: 1px solid #EAD7B8;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

#content .speed-course-head {
	position: relative;
	padding: 14px 16px 12px;
	background: #FFF8EF;
	border-bottom: 1px solid #E2C99D;
	border-left: 7px solid #C40000;
	text-align: left;
	box-shadow: none;
}

#content .speed-course-head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #F1D6A8;
}

#content .speed-course-badge {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 11px;
	background: #FFF3E5;
	color: #B85A00;
	border: 1px solid #F3B06A;
	border-radius: 999px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.45;
}

#content .speed-course-title {
	margin: 0 !important;
	padding: 0;
	color: #8B1E1E;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.45;
	letter-spacing: 0.05em;
}

#content .speed-course-catch {
	margin: 2px 0 0 !important;
	padding: 0;
	color: #C40000;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

#content .speed-course-body {
	padding: 14px 16px 16px;
	background: #FFFFFF;
}

#content .speed-course-body p {
	margin: 0;
	padding: 0;
	line-height: 1.75;
}

#content .speed-course-btn-wrap {
	margin-top: 12px !important;
	text-align: center;
}

#content .speed-course-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 260px;
	padding: 10px 18px;
	background: #FFFFFF;
	border: 2px solid #C40000;
	border-radius: 8px;
	color: #C40000;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
}

#content .speed-course-btn:hover {
	background: #C40000;
	color: #FFFFFF;
	text-decoration: none;
	opacity: 1;
}

/* トップページ：SNS共有エリア */

#content .top-share-area {
	margin: 24px 0 8px;
	padding: 14px 0 0;
	border-top: 1px solid #EAD7B8;
	text-align: center;
}

#content .top-share-area ul,
#content .top-share-area ul.sb,
#content .top-share-area li {
	margin: 0;
}

#content .top-share-area ul.sb {
	padding: 0;
}

/* =========================================================
   トップページ：注文・お問い合わせボタン
   ========================================================= */

#content .top-action-buttons {
	display: flex;
	gap: 28px;
	justify-content: center;
	align-items: center;
	margin: 18px 0 25px;
	clear: both;
}

#content .top-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px; /* アイコンと文字の間隔 */
	width: 300px;
	min-height: 58px;
	padding: 12px 18px 8px;
	box-sizing: border-box;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.03em;
	transition: opacity 0.2s ease;
}

#content .top-action-btn:hover {
	opacity: 0.82;
	text-decoration: none;
}

/* ご注文はこちら：SVGカートアイコン */

#content .order-btn {
	background-color: #C40000;
	border: 2px solid #C40000;
	color: #FFFFFF;
}

#content .order-btn::before {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	flex-shrink: 0;
	transform: translateY(-4px);
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 12h8l6.2 29.5h27.4L57 21H20.1' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='52' r='4.8' fill='black'/%3E%3Ccircle cx='47' cy='52' r='4.8' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 12h8l6.2 29.5h27.4L57 21H20.1' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='52' r='4.8' fill='black'/%3E%3Ccircle cx='47' cy='52' r='4.8' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* お問合せ・見積：SVGメールアイコン */

#content .contact-btn {
	background-color: #FFFFFF;
	border: 2px solid #C40000;
	color: #C40000;
}

#content .contact-btn::before {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	flex-shrink: 0;
	transform: translateY(-2px);
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='16' width='44' height='32' rx='3' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M12 19l20 17 20-17' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='16' width='44' height='32' rx='3' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M12 19l20 17 20-17' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#content .contact-btn:hover {
	color: #C40000;
}

/* トップページ：3枚並び画像ボックス */

/* 強調注意枠。
   赤枠で目立たせるため、警告や重要案内向け。 */

#content .box17 {
	text-align: left;
	width: 93%;
	border: 4px solid #FF0000;
	float: left;
	padding: 10px;
}

.box3 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding: 4px 7px 2px;
	font-size: 12px;
	border-color: #DDDDDD;
	border-style: solid;
	border-width: 2px 3px;
	text-decoration: none;
	line-height: 16px;
	color: #FFFFFF;
	background-color: #FF9900;
}

.box4 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding-top: 4px;
}

.box9 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding-top: 4px;
}

.box10 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding-top: 4px;
}

.box11 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding-top: 4px;
}

.box3 a img {
	background-color: #FFFFFF;
	padding: 2px 1px;
}

.box4 a img {
	background-color: #FFFFFF;
	padding: 2px 1px;
}

.box3 a:hover img {
}

.box4 a:hover img {
}

#content .box3:hover {
	background-color: #FFFCEC;
}

#content .box3 a img {
	border: none;
	padding: 0;
	background: none;
}

#content .box4:hover {
	background-color: #FFFCEC;
}

#content .box4 a img {
	border: none;
	padding: 0;
	background: none;
}

#content .box02_right .box_in ul.list li {
	font-size: 12px;
}

#content .box33 {
	width: 47%;
	padding: 8px 0;
	border: 1px solid #EEE8DF;
	float: left;
	margin-bottom: 10px;
	margin-left: 2%;
	background-color: #F9F7F4;
	text-align: center;
}

#content .box44 {
	width: 180px;
	border: 1px solid #EEE8DF;
	margin-left: 2%;
	background-color: #FAF5ED;
	height: 252px;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	position: relative;
	margin-bottom: 15px;
}

#content .box444 {
	width: 135px;
	border: 1px solid #EEE8DF;
	margin-left: 2%;
	background-color: #FAF5ED;
	height: 210px;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	position: relative;
	margin-bottom: 15px;
}

/* =========================================================
   テンプレート無料ダウンロードページ専用（template1/index.html）
   ========================================================= */

/* テンプレート一覧カード */

#content .box5 {
	text-align: center;
	width: 22%;
	padding: 8px 6px;
	border: 1px solid #EEE8DF;
	float: left;
	margin-bottom: 14px;
	background-color: #F9F7F4;
	margin-right: 6px;
	height: 289px;
}

#content .box5:hover {
	background-color: #FFFCEC;
}

#content .box5 .btn a {
	display: block;
	width: 110px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 4px;
}

#content .box5 a img {
	background-color: #FFFFFF;
	padding: 2px 1px;
	margin-bottom: 7px;
	border: 1px solid #8A8A8A;
}

/* SNSいいね枠 */

#content .box18 {
	text-align: left;
	width: 80%;
	border: 9px solid #E8E8E8;
	float: left;
	padding: 10px;
	border-radius: 11px;
}

#content .box18 p {
	font-size: 16px;
	margin-left: -5px;
	margin-bottom: -6px;
	margin-top: -12px;
	color: #3D3D3D;
}

#content .box7 {
	text-align: left;
	width: 97%;
	border: 2px solid #FF0000;
	float: left;
	padding: 10px;
}

#content .box77 {
	text-align: left;
	width: 97%;
	border: 1px solid #FC9B37;
	float: left;
	padding: 10px;
	background-color: #FFF2D7;
}

#content .box8 {
	text-align: left;
	width: 46%;
	padding: 0;
	border: 16px solid #E4D8B4;
	float: left;
	margin-bottom: -16px;
	background-color: #FBFBFB;
	margin-right: -7px;
	height: 519px;
}

.box6 .btn a {
	display: block;
	width: 110px;
	margin: 5px auto 0;
	padding-top: 4px;
}

.box6_sub .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
}

.box7 .btn a {
	margin-top: 5px;
	width: 110px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 4px;
}

.box8 .btn a {
	margin-top: 5px;
	width: 110px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 4px;
}

.box33 a img {
	background-color: #FFFFFF;
	padding: 2px 1px;
}

/* ボックス */

#content .box33_select {
	width: 47%;
	padding: 8px 0;
	border: 1px solid #EEE8DF;
	float: left;
	margin-bottom: 10px;
	margin-left: 2%;
	background-color: #F9F7F4;
	text-align: center;
	box-sizing: border-box;
}

/* 画像の白フチ */

#content .box33_select a img {
	background-color: #FFFFFF;
	padding: 2px 1px;
}

/* ==================== その他 ==================== */

.btn_s {
	clear: both;
}

/* =========================================================
   フォーム
   ========================================================= */

/* 画像リンクとボタンに共通の hover 演出。
   透明度変化だけでなく白背景も入るため、透過PNGや画像周辺の見え方に注意。 */

a:hover img,
input.btn:hover {
	opacity: 0.7;
	background: #FFFFFF;
}

/* フォーム部品の基本フォント。
   body のフォントとは別指定なので、フォームだけ見え方が変わる。 */

textarea,
input {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 12px;
}

/* 別CSSから不足分を補っている追加定義群。
   後から継ぎ足された可能性が高いため、他ファイルとの重複に注意。 */

/* ===== style3.css から追加した不足定義 ===== */

/* iOS系ブラウザでの submit ボタン見た目を均一化。 */

input[type="submit"] {
   -webkit-appearance: none;
   border-radius: 0;
}

input#submit_button1,
input#submit_button2 {
	padding: 15px 40px;
	font-size: 1.2em;
	background-color: #224488;
	color: #FFFFFF;
	border-style: none;
}

input#submit_button1:hover {
	background-color: #2244DD;
	color: #FFFFFF;
}

input#submit_button2:hover {
	background-color: #2244DD;
	color: #FFFFFF;
}

.required::after {
	content: "必須";
	color: #FFFFFF;
	background: #F43C57;
	font-size: 0.7em;
	padding: 0.2em;
	border-radius: 0.5em;
	margin-left: 0.4em;
	vertical-align: 10%;
}

/* 予備住所欄など、条件によって表示切替される想定の要素。
   JSやフォーム条件分岐と連動している可能性があるため削除注意。 */

#other_address {
	display: none;
}

/* フォーム全体を囲う領域。 */

#form {
	padding: 10px 0;
	margin: 10px;
	background-color: #F8F8F6;
}



/* フォーム導入文とフォーム本体の間の余白。 */

#content .form-before-space {
	height: 24px;
	font-size: 0;
	line-height: 0;
}

/* 新フォーム：form-modern
   お問い合わせ・見積フォームなど、table.aaabbb を使わない入力フォーム用。
   CGI連携用の name 属性はHTML側で維持し、見た目だけをフォーム専用構造にする。 */

#content .form-modern,
.form-modern #content {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

#content .form-modern .form-block,
.form-modern #content .form-block {
	margin: 0 0 30px;
	padding: 24px;
	background: #FFF4DF;
	border: 2px solid #D8B36A;
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(90, 50, 31, 0.14);
	box-sizing: border-box;
}

#content .form-modern .form-block-title,
.form-modern #content .form-block-title,
#content .form-modern .form-block > h4,
.form-modern #content .form-block > h4 {
	margin: -24px -24px 22px;
	padding: 13px 18px 12px;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	background: #9A6A35;
	border: 0;
	border-bottom: none;
	border-radius: 14px 14px 0 0;
}

#content .form-modern .form-grid,
.form-modern #content .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

#content .form-modern .form-row,
.form-modern #content .form-row {
	margin: 0;
	padding: 15px;
	background: #FFFFFF;
	border: 1px solid #E2C99D;
	border-radius: 12px;
	box-sizing: border-box;
}

#content .form-modern .form-row-full,
.form-modern #content .form-row-full {
	grid-column: 1 / -1;
}

#content .form-modern label,
.form-modern #content label,
#content .form-modern .form-label,
.form-modern #content .form-label {
	display: block;
	margin: 0 0 8px;
	color: #5A321F;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}

#content .form-modern .form-required,
.form-modern #content .form-required {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 7px 1px;
	background: #C40000;
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

#content .form-modern input[type="text"],
.form-modern #content input[type="text"],
#content .form-modern input[type="email"],
.form-modern #content input[type="email"],
#content .form-modern input[type="tel"],
.form-modern #content input[type="tel"],
#content .form-modern input[type="file"],
.form-modern #content input[type="file"],
#content .form-modern select,
.form-modern #content select,
#content .form-modern textarea,
.form-modern #content textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 13px;
	border: 2px solid #D8C590;
	border-radius: 9px;
	background: #FFFFFF;
	color: #232323;
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}

#content .form-modern textarea,
.form-modern #content textarea {
	min-height: 220px;
	resize: vertical;
}

/* 目録専用：表の「のし袋」記入欄だけ2行表示にする */
#content .form-modern textarea.mokuroku-front-textarea,
.form-modern #content textarea.mokuroku-front-textarea {
	min-height: 0;
	height: calc(1.6em * 2 + 24px + 4px);
}

#content .form-modern textarea::placeholder,
.form-modern #content textarea::placeholder {
	color: #888888;
	opacity: 1;
}

#content .form-modern input:focus,
.form-modern #content input:focus,
#content .form-modern select:focus,
.form-modern #content select:focus,
#content .form-modern textarea:focus,
.form-modern #content textarea:focus {
	outline: 3px solid rgba(196, 0, 0, 0.15);
	border-color: #C40000;
}

#content .form-modern input[type="file"],
.form-modern #content input[type="file"] {
	margin-bottom: 8px;
	padding: 10px;
	background: #FFFAF2;
}

#content .form-modern .form-help,
.form-modern #content .form-help,
#content .form-modern .form-note p,
.form-modern #content .form-note p {
	margin: 6px 0 0;
	padding: 0;
	color: #555555;
	font-size: 14px;
	line-height: 1.75;
}

#content .form-modern .form-note,
.form-modern #content .form-note {
	margin-top: 12px;
	padding: 13px 15px;
	background: #FFF8E8;
	border: 1px solid #E2C99D;
	border-radius: 8px;
}

#content .form-modern .form-alert,
.form-modern #content .form-alert {
	margin: 18px 0;
	padding: 15px 17px;
	background: #FFF3F0;
	border: 1px solid #F0B8AD;
	border-left: 5px solid #C40000;
	border-radius: 10px;
	color: #8B1E1E;
}

#content .form-modern .form-alert strong,
.form-modern #content .form-alert strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
}

#content .form-modern .form-alert p,
.form-modern #content .form-alert p {
	margin: 0;
	padding: 0;
	line-height: 1.75;
}


/* オーダーフォーム専用：賞状文面ブロックの余白・行間調整
   form が #content の外側にある order ページ用。CSS末尾ではなくフォームカテゴリ内で管理。 */

.form-modern.order-form #content .form-block > .form-row {
	margin-bottom: 14px;
}

.form-modern.order-form #content .form-block > .form-row:last-child {
	margin-bottom: 0;
}

.form-modern.order-form #content .form-block > .form-grid {
	margin-bottom: 14px;
	gap: 14px;
}

.form-modern.order-form #content .form-label {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.45;
}

.form-modern.order-form #content .form-row > label:not(.form-label) {
	display: block;
	margin: 7px 0 0;
	color: #232323;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.7;
}

.form-modern.order-form #content .form-row > label:not(.form-label) input[type="radio"] {
	margin-right: 5px;
	vertical-align: -1px;
}

.form-modern.order-form #content .form-help {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.8;
}

.form-modern.order-form #content .form-note {
	margin-top: 14px;
}

.form-modern.order-form #content .form-note p {
	line-height: 1.85;
}

.form-modern.order-form #content .form-alert {
	margin: 16px 0 18px;
}

/* オーダーフォーム専用：外字説明
   tableを使わず、上段3例は画像を「例」側へ寄せ、下段2例は横並び説明へ戻して見やすく整理。 */

.form-modern.order-form #content .gaiji-example-box {
	margin-top: 10px;
	padding: 12px 14px;
	background: #FFFDF8;
	border: 1px solid #E1CC9F;
	border-radius: 8px;
}

.form-modern.order-form #content .gaiji-example-row {
	display: grid;
	gap: 8px;
}

.form-modern.order-form #content .gaiji-example-row-top {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-modern.order-form #content .gaiji-example-row-bottom {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-modern.order-form #content .gaiji-example-row + .gaiji-example-row {
	margin-top: 8px;
}

.form-modern.order-form #content .gaiji-example-item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-areas:
		"label image"
		"text text";
	align-items: center;
	gap: 5px 8px;
	min-width: 0;
	padding: 8px 9px 9px;
	background: #FFFFFF;
	border: 1px solid #EEE0C9;
	border-radius: 6px;
	box-sizing: border-box;
}

.form-modern.order-form #content .gaiji-example-label {
	grid-area: label;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-width: 30px;
	padding: 2px 0 1px;
	background: #F5E7C8;
	border: 1px solid #E2CAA0;
	border-radius: 999px;
	color: #8B5A20;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
}

.form-modern.order-form #content .gaiji-example-image {
	grid-area: image;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.form-modern.order-form #content .gaiji-example-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.form-modern.order-form #content .gaiji-example-text {
	grid-area: text;
	min-width: 0;
	padding-top: 2px;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.45;
	text-align: center;
	word-break: keep-all;
}

.form-modern.order-form #content .gaiji-example-text small {
	display: block;
	margin-top: 1px;
	color: #555555;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.35;
}

/* 上段：高・崎・吉は画像を例バッジ側へ寄せる。 */
.form-modern.order-form #content .gaiji-example-row-top .gaiji-example-image {
	justify-content: flex-start;
}

.form-modern.order-form #content .gaiji-example-row-top .gaiji-example-text {
	padding-left: 38px;
	text-align: left;
}

/* 下段：辻・榊は前の横並び説明へ戻す。 */
.form-modern.order-form #content .gaiji-example-row-bottom .gaiji-example-item {
	grid-template-columns: 30px 92px minmax(0, 1fr);
	grid-template-areas: "label image text";
}

.form-modern.order-form #content .gaiji-example-row-bottom .gaiji-example-text {
	padding-top: 0;
	text-align: left;
}


/* オーダーフォーム専用：内定証書・入社証書 用紙タイプカード
   旧ページに近い見やすさを保つため、画像を大きめにし、表示枠の高さを統一。 */

.form-modern.order-form #content .paper-type-card-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 10px;
	align-items: stretch;
}

.form-modern.order-form #content .paper-type-card {
	background: #FFFFFF;
	border: 1px solid #E4D3B2;
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-modern.order-form #content .paper-type-card:hover {
	background: #FFFDF8;
	border-color: #C49A5A;
	box-shadow: 0 3px 10px rgba(80, 55, 25, 0.12);
}

.form-modern.order-form #content .paper-type-card:has(input[type="radio"]:checked) {
	background: #FFF8E8;
	border-color: #B8873B;
	box-shadow: 0 0 0 2px rgba(184, 135, 59, 0.15);
}

.form-modern.order-form #content .paper-type-card label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 100%;
	padding: 12px 10px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}

.form-modern.order-form #content .paper-type-card input[type="radio"] {
	margin: 0;
}

.form-modern.order-form #content .paper-type-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 230px;
	max-width: 100%;
	line-height: 0;
}

.form-modern.order-form #content .paper-type-image-link img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 205px;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	border: 1px solid #DDD7CC;
	border-radius: 4px;
	box-sizing: border-box;
}

.form-modern.order-form #content .paper-type-card strong {
	color: #4A3620;
	font-size: 15px;
	line-height: 1.4;
}


/* オーダーフォーム専用：テンプレート枠 用紙タイプカード
   画像数が多いため、PCでは4列、タブレットでは3列、スマホでは2列で見やすく整理。
   横型テンプレートは白地の境界が見えにくいため、実画像サイズに単線の薄グレー罫線を付与。 */

.form-modern.order-form #content .template-type-card-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.form-modern.order-form #content .template-type-card label {
	padding: 10px 8px;
	gap: 7px;
}

.form-modern.order-form #content .template-type-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 170px;
	margin: 0 auto;
	box-sizing: border-box;
}

.form-modern.order-form #content .template-type-image-link img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 150px;
	background: #FFFFFF;
	border: 1px solid #BDBDBD;
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
}

.form-modern.order-form #content .template-type-card strong {
	font-size: 14px;
}

.form-modern.order-form #content .orientation-card-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	margin-top: 8px;
}

.form-modern.order-form #content .orientation-card {
	float: none;
	display: block;
	min-height: 0;
	padding: 11px 10px 12px;
	text-align: center;
	background: #FFFDF8;
	border: 2px solid #E2C99D;
	border-radius: 10px;
	box-shadow: 0 2px 7px rgba(90, 50, 31, 0.06);
	box-sizing: border-box;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.form-modern.order-form #content .orientation-card:hover {
	background: #FFF8E8;
	border-color: #D8B36A;
	box-shadow: 0 4px 12px rgba(90, 50, 31, 0.12);
	transform: translateY(-1px);
}

.form-modern.order-form #content .orientation-card:has(input[type="radio"]:checked) {
	background: #FFF3D8;
	border-color: #B88746;
	box-shadow: 0 4px 12px rgba(90, 50, 31, 0.14);
}

.form-modern.order-form #content .orientation-card label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	margin: 0;
	color: #5A321F;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.45;
	cursor: pointer;
}

.form-modern.order-form #content .orientation-card input[type="radio"] {
	flex: 0 0 auto;
	margin: 0 0 6px;
}

.form-modern.order-form #content .orientation-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 122px;
	margin: 0 0 8px;
}

.form-modern.order-form #content .orientation-card img {
	display: block;
	max-width: 100%;
	max-height: 94px;
	margin: 0;
	padding: 2px;
	background: #FFFFFF;
	border: 1px solid #CFCFCF;
	box-sizing: border-box;
}

.form-modern.order-form #content .orientation-card img.orientation-img-tate {
	max-height: 118px;
}

.form-modern.order-form #content .orientation-card strong {
	display: block;
	margin-top: auto;
	padding-top: 0;
	line-height: 1.45;
}

/* オーダーフォーム専用：オプションブロック
   筒・額縁・ホルダー・角印の入力をカード内で整理。 */

.form-modern.order-form #content .order-options-block .form-row-full {
	margin-bottom: 14px;
}

.form-modern.order-form #content .order-option-group {
	margin: 18px 0 0;
	padding: 0 14px 15px;
	background: #FFF8E8;
	border: 2px solid #D8B36A;
	border-radius: 12px;
	box-sizing: border-box;
	overflow: hidden;
}

.form-modern.order-form #content .order-option-heading {
	margin: 0 -14px 13px;
	padding: 10px 14px;
	background: #E8D2A6;
	color: #6B2A1A;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 1px solid #C89A4B;
}

.form-modern.order-form #content .order-option-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.form-modern.order-form #content .order-option-item {
	display: grid;
	grid-template-columns: 54px 48px minmax(0, 1.25fr) minmax(130px, 0.75fr);
	gap: 7px 9px;
	align-items: center;
	max-width: 100%;
	min-width: 0;
	padding: 9px 10px;
	background: #FFFFFF;
	border: 1px solid #EEE0C9;
	border-radius: 8px;
	box-sizing: border-box;
}

.form-modern.order-form #content .order-option-item-with-select {
	grid-template-columns: 54px 42px minmax(0, 1fr) minmax(132px, 160px) minmax(70px, 0.55fr);
}

.form-modern.order-form #content .option-qty,
.form-modern.order-form #content input.option-qty[type="text"] {
	width: 54px;
	min-width: 54px;
	padding: 7px 6px;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
}

.form-modern.order-form #content .option-unit {
	font-weight: bold;
	line-height: 1.5;
	white-space: nowrap;
	min-width: max-content;
}

.form-modern.order-form #content .option-name {
	min-width: 0;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.65;
}

.form-modern.order-form #content .option-name .text-red {
	display: inline-block;
	margin-top: 2px;
	line-height: 1.5;
}

.form-modern.order-form #content .option-select,
.form-modern.order-form #content select.option-select {
	width: 100%;
	max-width: 160px;
	min-width: 0;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 1.4;
}

.form-modern.order-form #content .option-price {
	justify-self: end;
	min-width: 0;
	color: #008000;
	font-size: 13px;
	line-height: 1.6;
	text-align: right;
	white-space: normal;
	overflow-wrap: anywhere;
}

.form-modern.order-form #content .option-select {
	width: 100%;
	max-width: 220px;
	min-width: 0;
	padding: 8px 9px;
	border: 1px solid #D8C590;
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
}

.form-modern.order-form #content .option-select-wide {
	max-width: 100%;
	min-width: 250px;
}

.form-modern.order-form #content .order-option-item-stacked {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-items: stretch;
	padding: 10px 12px;
}

.form-modern.order-form #content .order-option-item-stacked .option-main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	min-width: 0;
}

.form-modern.order-form #content .order-option-item-stacked .option-main .option-name {
	font-size: 15px;
	line-height: 1.55;
}

.form-modern.order-form #content .order-option-item-stacked .option-caption {
	color: #008000;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.5;
}

.form-modern.order-form #content .order-option-item-stacked .option-control {
	display: grid;
	grid-template-columns: 54px max-content minmax(140px, 1fr);
	gap: 7px 8px;
	align-items: center;
	min-width: 0;
}

.form-modern.order-form #content .order-option-item-stacked .option-control .option-select {
	grid-column: auto;
	width: 100%;
	max-width: 220px;
}

.form-modern.order-form #content .order-option-item-stacked .option-control .option-price {
	justify-self: start;
	text-align: left;
}

/* オーダーフォーム専用：賞状筒・紙袋の2段カード調整
   商品名・仕様を上段、数量を左下、価格を右下に配置。 */

.form-modern.order-form #content .order-option-item-tube .option-main {
	justify-content: flex-start;
}

.form-modern.order-form #content .order-option-item-tube .option-control {
	grid-template-columns: 54px max-content 1fr;
}

.form-modern.order-form #content .order-option-item-tube .option-control .option-price {
	justify-self: end;
	text-align: right;
	white-space: nowrap;
}

/* オーダーフォーム専用：価格表示付き2段カードの調整
   商品名・仕様を上段、数量を左下、価格を右下に配置。 */

.form-modern.order-form #content .order-option-item-price-right .option-control {
	grid-template-columns: 54px max-content 1fr;
}

.form-modern.order-form #content .order-option-item-price-right .option-control .option-price {
	justify-self: end;
	text-align: right;
	white-space: normal;
}

/* オーダーフォーム専用：選択欄付き商品の価格右寄せ調整
   額立て・額縁入れ手提げ袋など、select付きでも価格を右下へ配置。 */

.form-modern.order-form #content .order-option-item-select-price-right .option-control {
	grid-template-columns: 54px max-content minmax(180px, 220px) minmax(0, 1fr);
}

.form-modern.order-form #content .order-option-item-select-price-right .option-control .option-select {
	grid-column: auto;
	justify-self: start;
	width: 100%;
	max-width: 220px;
}

.form-modern.order-form #content .order-option-item-select-price-right .option-control .option-price {
	justify-self: end;
	text-align: right;
	white-space: normal;
}

/* オーダーフォーム専用：A4・A3賞状ホルダーの2段カード調整
   商品名・仕様を上段、数量・種類を左下、価格を右下に配置。 */

.form-modern.order-form #content .order-option-item-holder .option-main {
	justify-content: flex-start;
}

.form-modern.order-form #content .order-option-item-holder .option-control {
	grid-template-columns: 54px max-content minmax(180px, 1fr) max-content;
}

.form-modern.order-form #content .order-option-item-holder .option-control .option-select {
	grid-column: auto;
	justify-self: start;
	max-width: 250px;
}

.form-modern.order-form #content .order-option-item-holder .option-control .option-price {
	justify-self: end;
	text-align: right;
	white-space: nowrap;
}

.form-modern.order-form #content .option-radio-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
	margin: 14px 0 0;
	padding: 0;
}

.form-modern.order-form #content .option-radio-list label {
	display: block;
	margin: 0;
	padding: 9px 10px;
	background: #FFFFFF;
	border: 1px solid #EEE0C9;
	border-radius: 8px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
}

.form-modern.order-form #content .option-radio-list input[type="radio"] {
	margin-right: 6px;
	vertical-align: -1px;
}

.form-modern.order-form #content .option-seal-grid {
	margin-top: 14px;
}


/* オーダーフォーム専用：お支払い方法ブロック
   支払い方法をカード型に整理し、長文やバナー画像が横にはみ出さないよう制御。 */

.form-modern.order-form #content .order-payment-block .form-row-full {
	margin-bottom: 14px;
}

.form-modern.order-form #content .payment-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.form-modern.order-form #content .payment-card {
	display: block;
	margin: 0;
	padding: 15px 16px;
	background: #FFFFFF;
	border: 1px solid #E2C99D;
	border-left: 5px solid #D8B36A;
	border-radius: 10px;
	box-sizing: border-box;
	line-height: 1.7;
	cursor: pointer;
	transition: border-color 0.2s ease, border-left-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-modern.order-form #content .payment-card:hover {
	background: #FFF4DF;
	border-color: #B88746;
	border-left-color: #9A6A35;
	box-shadow: 0 4px 14px rgba(90, 50, 31, 0.16);
}

.form-modern.order-form #content .payment-card-recommended {
	border-color: #D8C590;
	background: #FFFCF4;
}

.form-modern.order-form #content .payment-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-bottom: 6px;
	color: #232323;
	font-size: 16px;
	line-height: 1.5;
}

.form-modern.order-form #content .payment-card-head input[type="radio"] {
	margin: 0 2px 0 0;
	vertical-align: -1px;
}

.form-modern.order-form #content .payment-card-head strong {
	display: inline-block;
	padding: 4px 10px 1px;
	background: #9A6A35;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.45;
	letter-spacing: 0.02em;
}

.form-modern.order-form #content .payment-sub {
	display: inline-block;
	padding: 3px 7px 0;
	background: #FFF3E5;
	border: 1px solid #EAD7B8;
	border-radius: 999px;
	color: #8B5A20;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.45;
	vertical-align: middle;
}

.form-modern.order-form #content .payment-text,
.form-modern.order-form #content .payment-fee,
.form-modern.order-form #content .payment-note-red,
.form-modern.order-form #content .payment-small {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.85;
}

.form-modern.order-form #content .payment-text,
.form-modern.order-form #content .payment-fee,
.form-modern.order-form #content .payment-small {
	color: #444444;
	font-weight: normal;
}

.form-modern.order-form #content .payment-note-red {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	color: #8B1E1E;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.75;
}

.form-modern.order-form #content .payment-banner {
	display: block;
	margin-top: 8px;
}

.form-modern.order-form #content .payment-banner img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.form-modern.order-form #content .payment-inline-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 8px;
	color: #555555;
	font-size: 14px;
	line-height: 1.6;
}

.form-modern.order-form #content .payment-inline-field input[type="text"] {
	width: min(100%, 260px);
	padding: 9px 10px;
	font-size: 15px;
	line-height: 1.5;
}

.form-modern.order-form #content .receipt-radio-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* オーダーフォーム専用：お客様情報ブロック
   住所・メール・納期指定をカード内で読みやすく整理。 */

.form-modern.order-form #content .order-customer-block .form-row-full {
	margin-bottom: 14px;
}

.form-modern.order-form #content .order-customer-block .option-radio-list {
	margin-top: 0;
}

.form-modern.order-form #content .order-customer-block .form-help {
	display: inline-block;
	margin-top: 6px;
}

.form-modern.order-form #content .order-customer-block select {
	width: 100%;
	max-width: 320px;
}

#content .form-modern .form-submit-area,
.form-modern #content .form-submit-area {
	margin: 28px 0 12px;
	text-align: center;
}

#content .form-modern .form-submit-area p,
.form-modern #content .form-submit-area p {
	margin: 0 0 12px;
	padding: 0;
}

#content .form-modern #submit_button1,
.form-modern #content #submit_button1 {
	display: inline-block;
	width: 100%;
	max-width: 360px;
	padding: 16px 24px;
	border: none;
	border-radius: 999px;
	background: #C40000;
	color: #FFFFFF;
	font-size: 18px !important;
	font-weight: bold;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(196, 0, 0, 0.25);
}

#content .form-modern #submit_button1:hover,
.form-modern #content #submit_button1:hover {
	background: #8B1E1E;
}

/* 迷惑メール対策：ハニーポット
   orderページでは form が #content の外側にあるため、.hp-field 単独でも非表示にする。 */
.hp-field,
#content .form-modern .hp-field,
.form-modern #content .hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
}


/* =========================================================
   テーブル
   ========================================================= */

/* ==================== テーブル ==================== */

/* ===== テーブル ===== */

/* 全テーブル共通の基準設定。
   この後に table.aaa などの用途別派生が多数続く。 */

table {
	border-collapse: collapse;
	border: 1px solid #909090;
}

/* 本文内テーブルのはみ出し防止 */

#content table {
	max-width: 100%;
}

/* 罫線なし・全幅系テーブル群の一つ。
   命名だけでは用途が分かりにくいため、HTML側の使用箇所確認推奨。 */

table.aaa {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

table.aaa- {
	border-collapse: collapse;
	border: 0;
	width: 67%;
}

table.bbb {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

/* ===== テーブル 作成ページ/sakusei/===== */

.table-bbb-new td {
	padding: 4px;
	border: 1px solid #A1A1A1;
	font-size: 14px !important;
}

.table-bbb-new th {
	font-size: 16px !important;
	background-color: #FFF7E3 !important;
	border: 1px solid #CCCCCC;
	min-width: 80px; /* 幅を確保 */
	white-space: nowrap; /* 改行させない */
	padding: 8px 12px; /* 余白で見た目改善 */
	text-align: center; /* 中央寄せ */
}

/* ===== テーブル 作成ページ/sakusei/===== */

/* ===== テーブル 注文の流れ/nagare/===== */

table.bbbb {
	width: 100%;
	margin-bottom: 0;
}

#content table.bbbb td {
	border: 1px solid #909090;
	background-color: #FFF9DF;
	padding: 8px 0;
}

#content table.bbbb th {
	text-align: center;
	border: 1px solid #A1A1A1;
	background-color: #DEB99A;

	width: 200px;
}

/* ===== テーブル 注文の流れ/nagare/===== */

table.ccc {
	width: 100%;
}

table.ddd {
	width: 100%;
}

table.eee {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

table.fff {
	border-collapse: collapse;
	width: 100%;
}

table.fff8 {
	border-collapse: collapse;
	width: 80%;
}

/* ===== テーブル 作成ページ/mokuroku/===== */

table.fff8s {
	border-collapse: collapse;
	width: 80%;
}

#content table.fff8s td {
	text-align: center;
}

#content table.fff8s th {
	font-size: 13px;
	border: 1px solid #A1A1A1;
	background-color: #E1FFC2;
	font-weight: bold;
	color: #555555;
	text-align: center;
}

/* ===== テーブル 作成ページ/mokuroku/===== */

table.ffff {
	border-collapse: collapse;
	border: 0;
	width: 45%;
}

table.hhh {
	border-collapse: collapse;
	border: 1px solid #909090;
	margin-left: 14px;
}

table td {
	border-collapse: collapse;
	border: 1px solid #666666;
}

table.aaa td {
	border-collapse: collapse;
	border: 0;
}

/* ===== テーブル 支払いページ/pay/===== */
table.ffffcustom {
	border-collapse: collapse;
	border: 0;
	width: 60%;
}

#content table.ffffcustom td {
	border: 1px solid #909090;
	background-color: #FEFFDF;
	text-align: right;
	width: 60%;
}

#content table.ffffcustom th {
	border: 1px solid #909090;
	background-color: #E1FFC2;
	width: 40%;
}

/* ===== テーブル 作成ページ/sakusei/===== */

table.aaa2 {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

#content table.aaa2 td {
	border: 0;
}

#content table.aaa2 th {
	border-collapse: collapse;
	border: 0;
	background-color: #FFFFFF;
	width: 300px;
}

/* ===== テーブル 作成ページ/sakusei/===== */

/* ===== テーブル selectページ===== */

/* =========================
   selectページ専用（安全版）
========================= */

/* テーブル */

#content table.fff2 {
	border-collapse: collapse;
	width: 100%;
}

#content table.fff2 td {
	text-align: center;
	padding: 15px 0;
}

#content table.fff2 th {
	font-size: 14px;
	border: 1px solid #A1A1A1;
	background-color: #CCCCCC;
	font-weight: bold;
}

/* テーブルだけ左寄せ */

#content .box33_select table {
	text-align: left;
}

/* ===== テーブル selectページ===== */

table.ccc td {
	background-color: #FFF9DF;
}

table.ddd td {
	background-color: #FFF9DF;
}

/* 情報表示テーブルの標準レイアウト。
   入力確認や詳細情報一覧などに使う想定。 */

#content table.table_info {
	width: 96%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}

#content table td {
	padding: 4px;
	border: 1px solid #A1A1A1;
	font-size: 13px;
	color: #333333;
}

#content table.aaa td {
	padding: 4px;
	border: 0;
	font-size: 13px;
}

#content table.aaa- td {
	padding: 4px;
	border: 0;
	font-size: 13px;
}

#content table.aaaa td {
	border: 1px solid #909090;
}

#content table.aaaaa td {
	border: 1px solid #909090;
	width: 76%;
}

/* ===== テーブル ロゴ/rogo/===== */

table.aaaacustom {
	border-collapse: collapse;
	border: 0;
	width: 60%;
}

#content table.aaaacustom td {
	border: 1px solid #909090;
}

#content table.aaaacustom th {
	border: 1px solid #909090;
	background-color: #CCCCCC;
}

/* ===== テーブル ロゴ/rogo/===== */

/* ===== テーブル お客様の声===== */

table.aaaacustom-2 {
	border-collapse: collapse;
	border: 0;
	width: 100%;
	margin-bottom: 10px;
}

#content table.aaaacustom-2 td {
	font-size: 15px;
	border: 1px solid #909090;
	background-color: #ECDED1;
	color: #4B3E32;
}

#content table.aaaacustom-2 th {
	font-size: 15px;
	border: 1px solid #909090;
	background-color: #F0ECDE;
}

/* ===== テーブル お客様の声===== */

/* ===== テーブル 特急===== */

table.aaacustom-3 {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

#content table.aaacustom-3 td {
	border: 1px solid #909090;
	background-color: #FEFFDF;
	text-align: center;
}

#content table.aaacustom-3 th {
	border: 1px solid #909090;
	background-color: #FFEAB9;
	text-align: center;
}

table.bbbcustom {
	border-collapse: collapse;
	width: 80%;
}

#content table.bbbcustom td {
	border: 2px solid #909090;
	text-align: center;
}

#content table.bbbcustom th {
	border: 2px solid #909090;
	text-align: center;
}

table.fffcustom {
	border-collapse: collapse;
	border: 0;
	width: 100%;
	margin-top: 3px;
}

#content table.fffcustom td {
	border: 1px solid #909090;
	background-color: #FEFFDF;
	text-align: center;
	padding: 10px 0;
}

#content table.fffcustom th {
	border: 1px solid #909090;
	background-color: #CCFFCC;
	text-align: center;
}

/* ===== テーブル 特急===== */

#content table.ccc td {
	font-size: 13px;
}

#content table.ddd td {
	font-size: 13px;
}

#content table.eee td {
	font-size: 18px;
	text-align: center;
	color: #FF9900;
	border-width: 0;
}

#content table.fff td {
	text-align: center;
}

#content table th {
	font-size: 14px;
	text-align: left;

	/* 下線だけ太めにするため、下側のみ3px。 */
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px 1px 3px;

	background-color: #FF9900;
	color: #333333;
	padding: 5px 5px 5px 10px;
	font-weight: normal;
}

#content table.aaaa th {
	border: 1px solid #909090;
}

#content table.aaaaa th {
	border: 1px solid #909090;
	width: 24%;
	background-color: #FFEAB9;
}

#content table.ccc th {
	font-size: 14px;
	text-align: center;
	border: 1px solid #A1A1A1;
	background-color: #FF9933;
	padding: 5px 5px 5px 10px;
	font-weight: bold;
	color: #555555;
	width: 105px;
}

#content table.ddd th {
	font-size: 14px;
	text-align: center;
	border: 1px solid #A1A1A1;
	background-color: #FFCE00;
	padding: 5px 5px 5px 10px;
	font-weight: bold;
	color: #555555;
	width: 105px;
}

#content table.fff th {
	font-size: 13px;
	border: 1px solid #A1A1A1;
	background-color: #E1FFC2;
	font-weight: bold;
	color: #555555;
	text-align: center;
}

#content table.fff8 th {
	font-size: 13px;
	border: 1px solid #A1A1A1;
	background-color: #E1FFC2;
	font-weight: bold;
	color: #555555;
	text-align: center;
}

#content table.ffff th {
	font-size: 13px;
	border: 1px solid #A1A1A1;
	background-color: #E1FFC2;
}

#content table.ffff td {
	font-size: 13px;
	text-align: right;
}

#content form table th {
	width: 127px;
}

/* 左側見出しセル。
   見出しラベル用として色分け・背景画像付き。 */

#content table td.td_head {
	background-color: #FEE9BD;
	text-align: right;
	padding: 8px;
	white-space: nowrap;
	color: #333333;
	border-top-width: 1px;
	border-right: 4px solid #FC9B37;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D5D5D5;
	border-bottom-color: #D5D5D5;
	border-left-color: #D5D5D5;
	font-size: 15px;
	font-weight: normal;
	background-image: url("img/td_head.gif");
	background-repeat: repeat-x;
}

/* 内容セル。
   td_head と対になる本文側セル。 */

#content table td.td_odd {
	background-color: #FFF9DF;
	text-align: left;
	padding: 8px;
	border: 1px solid #D5D5D5;
	font-size: 12px;
	color: #333333;
	background-image: url("img/td_odd.gif");
	background-repeat: repeat-x;
	line-height: 20px;
}

/* メニュー型テーブルの見出しセル。
   通常の table_info より販促・案内色が強いデザイン。 */

#content table.table_menu th {
	font-size: 14px;
	background-image: url("img/th.gif");
	background-repeat: repeat-x;
	background-position: center top;
	color: #333333;
	background-color: #FDF7E8;
	border-right: 4px solid #FDB762;
	text-align: right;
	border-bottom: 1px solid #D9D9D9;
	white-space: nowrap;
	border-top: 1px solid #D9D9D9;
	border-left: 1px solid #D9D9D9;
	padding: 15px 10px 15px 20px;
}

#content table.table_menu2 th {
	font-size: 14px;
	background-image: url("img/th.gif");
	background-repeat: repeat-x;
	background-position: center top;
	color: #333333;
	background-color: #FDF7E8;
	border-right-style: solid;
	text-align: center;
	border-bottom: 4px solid #FDB762;
	white-space: nowrap;
	border-top: 1px solid #D9D9D9;
	border-left: 1px solid #D9D9D9;
	padding: 15px 10px 3px;
	font-weight: bold;
}

#content table.table_menu th span {
	font-size: 14px;
	color: #E24B4B;
}

#content table.table_menu td {
	font-size: 14px;
	line-height: 22px;
	background-color: #FFFFFF;
	padding: 10px 15px;
	border-color: #BCBCBC #909090 #BCBCBC #BCBCBC;
}

#content table.table_menu {
	width: 97%;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
}

/* 見本ボックス内の画像だけ */

#content .box3 img,
#content .box4 img,
#content .box5 img,
#content .box33 img,
#content .box44 img,
#content .box444 img,
#content table.aaac img,
#content table.aaacc img,
#content table.aaaccc img {

	/* 重要ポイント */
	padding: 0;
	background: none;

	border: 1px solid #A8A8A8;
}

table.aaab {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

table.aaabb {
	border-collapse: collapse;
	border: 0;
}

table.aaac {
	border-collapse: collapse;
	border: 0;
	height: 146px;
	width: 157px;
	text-align: left;
}

table.aaacc {
	border-collapse: collapse;
	border: 0;
	height: 252px;
	width: 180px;
	text-align: left;
}

table.aaaccc {
	border-collapse: collapse;
	border: 0;
	height: 210px;
	width: 135px;
	text-align: left;
}

/* 旧互換：aaabbb（フォーム・案内表の旧テーブル用）
   新規ページでは form-modern など用途名の分かる構造への置き換えを推奨。 */

table.aaabbb {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}

table.aaad {
	border-collapse: collapse;
	border: 0;
	color: #009900;
}

table.w100 {
	width: 100%;
}

#content table.aaad td {
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	border: 0;
	font-size: 13px;
}

#content table.aaab td {
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	border: 0;
	font-size: 13px;
}

#content table.aaabb td {
	padding-top: 12px;
	padding-right: 12px;
	padding-left: 12px;
	padding-bottom: 12px;
	background: #EEEEEE;
	border: 0;
	font-size: 16px;
	font-weight: bold;
}

#content table.aaabb th {
	font-size: 16px;
	text-align: right;
	border-top-width: initial;
	border-right-width: initial;
	border-bottom-width: initial;
	border-left-width: initial;
	border-top-style: initial;
	border-right-style: initial;
	border-bottom-style: initial;
	border-left-style: initial;
	border-top-color: initial;
	border-right-color: initial;
	border-bottom-color: initial;
	border-left-color: initial;
	background: #EEEEEE;
	font-weight: bold;
}

#content table.aaac td {
	border: 0;
}

#content table.aaacc td {
	border: 0;
}

#content table.aaaccc th {
	border: 0;
	height: 180px;
	background-color: #FAF5ED;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#content table.aaaccc td {
	border: 0;
	height: 10px;
}

#content table.aaa th {
	font-size: 14px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #FFF7E3;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-weight: normal;
}

#content table.aaab th {
	font-size: 14px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #FFF7E3;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-weight: normal;
}

#content table.aaabb tr:nth-child(odd) th {
	background: #CCDDCC;
}

#content table.aaabb tr:nth-child(odd) td {
	background: #CCDDCC;
}

#content table.aaac th {
	border: 0 solid #CCCCCC;
	background-color: transparent;
	height: 15px;
	width: 110px;
	font-size: 15px;
	text-align: left;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#content table.aaad th {
	font-size: 14px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #FFF7E3;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-weight: normal;
}

#content table td.td_head2 {
	background-color: #FEE9BD;
	text-align: right;
	padding: 8px;
	white-space: nowrap;
	color: #333333;
	border-top-width: 1px;
	border-right: 4px solid #FC9B37;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D5D5D5;
	border-bottom-color: #D5D5D5;
	border-left-color: #D5D5D5;
	font-size: 15px;
	background-repeat: repeat-x;
	background-image: url("img/td_head.gif");
	width: 15%;
}

#content .box33 table {
	text-align: left;
}

/* テーブル共通の最終指定は上部の標準ブロックへ統合済み。 */

/* トップページのbbbだけ枠復活 */

#content table.bbb {
	border: 1px solid #909090;
}

#content table.bbb td {
	border: 1px solid #A1A1A1;
	padding: 5px;
}

/* ゆったり */

/* テーブル対策（サイズと同じ考え方） */

#content .text-lh-120 {
	line-height: 1.2;
}
/* テーブル内の標準フォントサイズは、テーブル標準ブロックへ統合済み。 */

#content .text-scale-80 {
	font-size: 80%;
}
/* =========================================================
   コメント付与版について
   - 作業・保守用として用途コメントを追加
   - 本番公開用は、必要に応じてコメント削除版や圧縮版を別途作成推奨
   - text系 / highlight系 / box系 / table系 は HTML側で直接使われている可能性が高いため、
     未使用に見えても即削除せず、実ページ確認後に整理すること
   ========================================================= */

/* ===== 価格表：highlight5 / highlight6 をHTMLに個別指定しないための背景色指定 ===== */

#content table.price-highlight-table td:not([colspan="2"]),
#content table.shipping-area-table tr:nth-child(2) td,
#content table.fee-highlight-table td {
	background-color: #FFF9DF !important;
}

#content table.price-highlight-table td[colspan="2"] {
	background-color: #FFCC66 !important;
}

/* =========================================================
   パンくず・サイトマップ
   ========================================================= */

#sitemap header {
	height: 80px;
}

/* ==================== パンくず・サイトマップ ==================== */

/* サイトマップページ専用の本文余白調整。 */

#sitemap #main p {
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 10px;
	padding-left: 25px;
}

#sitemap #main li {
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 35px;
}

#sitemap #main ul {
	margin: 0;
	padding: 0;
}

#sitemap #main li a {
	background-image: url("img/li.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
}

#sitemap #main {
	padding-top: 10px;
	padding-right: 3%;
	padding-left: 3%;
	padding-bottom: 20px;
	width: 94%;
}

/* パンくずリストの別実装。
   #pankuzu と役割が重なるため、ページによってどちらを使っているか確認が必要。 */

/* --------------------------- パン屑リスト ------------------------------- */

/* --- リストエリア --- */

ol.topicPath {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
}

/* --- リスト項目 --- */

ol.topicPath li {
display: inline;
}

/* --- リンク --- */

ol.topicPath li a {
margin-right: 6px; /* リンクエリアの右マージン */
}

/* select.html専用：注文ページのパンくず */
#content .order-breadcrumb {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 10px;
}

#content .order-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
}

#content .order-breadcrumb-list li {
	list-style: none;
}

/* repeat/index.html専用：再注文ページのパンくず */
#content .repeat-breadcrumb {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 10px;
}

#content .repeat-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
}

#content .repeat-breadcrumb-list li {
	list-style: none;
}

/* --------------------------- パン屑リスト ------------------------------- */

/* サイトマップ専用レイアウト。
   入れ子リストの階層構造で見せるため、通常ページへの影響は限定的。 */

/* --------------------------- サイトマップ ------------------------------- */

/* --- サイトマップエリア --- */

ul.sitemap {
width: 100%; /* サイトマップエリアの幅 */
margin: 0;
padding: 0;
font-weight: bold; /* 一旦全ての文字を太字にする */
list-style-type: none;
color: #2B2B2B;
}

/* --- 入れ子にされたリスト用 --- */

ul.sitemap ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* 全てのリスト項目 */

ul.sitemap li {
	padding: 1px 0 0 10px; /* 1階層目のパディング（上右下左） */
	background: url("img/v_line1.gif") no-repeat left top; /* 1階層目の背景 */
	line-height: 120%;
}

/* 2階層目のコンテナ */

ul.sitemap div.contentNav {
	width: 100%; /* コンテナの幅 */
	margin-top: 20px; /* コンテナの上マージン */
}

/* セクション（2階層目のリストエリア） */

ul.sitemap ul.section {
	width: 49.9%; /* セクションの幅 */
	float: left;
}

ul.sitemap ul.separator {
	background: url("img/v_separator.gif") repeat-y right top; /* セクション間の垂直区切り線 */
}

/* 2階層目以降のリスト項目 */

ul.sitemap ul.section li {
	margin: 0 20px 20px 0; /* 2階層目のマージン（上右下左） */
	padding: 1px 0 10px 15px; /* 2階層目のパディング（上右下左）上書き */
	background: url("img/v_line4.gif") no-repeat 5px 0; /* 2階層目の背景 上書き */
	border-bottom: 1px #C0C0C0 dotted; /* 2階層目の下境界線 */
}

/* 3階層目以降のリストエリア */

ul.sitemap ul.section ul {
	margin: 7px 0 0 8px; /* 3階層目以降のマージン（上右下左） */
	font-weight: normal; /* 3階層目以降の文字をノーマルの太さに戻す */
}

/* 3階層目以降のリスト項目 */

ul.sitemap ul.section ul li {
	margin: 0 0 6px; /* 3階層目以降のマージン */
	padding: 0 0 0 12px; /* 3階層目のパディング（上右下左）上書き */
	background: url("img/triangle5.gif") no-repeat 0 0.2em; /* 3階層目の背景 上書き */
	border-bottom: none; /* 3階層目以降の下境界線 上書き */
}

/* 4階層目以降のリスト項目 */

ul.sitemap ul.section ul li li {
	padding: 0 0 0 9px; /* 4階層目以降のパディング（上右下左）上書き */
	background: url("img/square.gif") no-repeat 0 0.4em; /* 4階層目以降の背景 上書き */
}


/* template1/index.html専用：パンくず */
#content .template-breadcrumb {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FFFDF7;
	border: 1px solid #EAD7B8;
	border-radius: 10px;
}

#content .template-breadcrumb-list {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
}

#content .template-breadcrumb-list li {
	display: inline;
	margin: 0 5px 0 0;
	color: #5A321F;
}

/* =========================================================
   ソーシャル・外部ウィジェット
   ========================================================= */

#content .fb-share-button {
	margin-left: 0;
	top: -6px;
}

/* ==================== ソーシャル・補助UI ==================== */

/* SNSシェアボタン配置調整。
   外部ウィジェットの幅や余白ずれを個別に吸収している。
   ボタン撤去済みページでは未使用化している可能性あり。 */

/*------------------------------------------------------------
ソーシャルボタン
-------------------------------------------------------------*/

#content .sb {
	width: 100%;
	margin: 0;
	padding: 0;
}

#content .sb-hatebu {
	margin-left: -20px;
}

#content .sb-gplus {
	margin-left: 5px;
}

#content .sb-pocket {
	margin-left: 5px;
}

#content .sb-line {
	margin-left: 5px;
}

#content .sb-fb-like {
	margin-left: -6px;
}

#content .fb-like {
	margin-left: -44px;
}

#content .sb-hatebu2 {
	margin-left: -25px;
}

#content .sb-line2 {
	margin-left: 0;
}

#content .sb-fb-like2 {
	margin-left: 50px;
}

#content .sb-hatebu3 {
	margin-left: -8px;
}

#content .sb-hatebu4 {
	margin-left: -25px;
}

#content .sb li {
	display: inline-block;
	margin-right: 5px;
	vertical-align: top;
	list-style: none;
}

/* IE6 */

/* IE7 */

#main iframe.twitter-share-button {
	width: 100px !important;
}

/* =========================================================
   装飾・テキスト補助・汎用クラス
   ========================================================= */

.highlight9_table-wide50 {
	width: 50%;
}

/* ==================== 装飾・テキスト補助クラス ==================== */

/* テキスト強調用の補助クラス群*/

/* 黄色背景＋太字 */

.bg-yellow-bold {
	background-color: #FFFF00;
	font-weight: bold;
}

/* 緑背景＋太字 */

.bg-green-bold {
	background-color: #00FF00;
	font-weight: bold;
}

/* 水色背景＋太字 */

.bg-cyan-bold {
	background-color: #CAFFFF;
	font-weight: bold;
}

/* 黄色背景 */

.bg-yellow {
	background-color: #FFFF00;
}

/* =========================================================
   テキストサイズ・色ユーティリティ
   目的：
   ・サイズと色を分離して再利用しやすくする
   ・どのページでも使える共通パーツ化
   ========================================================= */

/* =========================
   フォントサイズ（拡大）
   ========================= */

/* 親要素に対しての倍率指定（%）
   例：親が16pxの場合、110% = 約17.6px */

.text-scale-80 {
	font-size: 80%;
}

.text-scale-85 {
	font-size: 85%;
}

.text-scale-90 {
	font-size: 90%;
}

.text-scale-95 {
	font-size: 95%;
}

.text-scale-100 {
	font-size: 100%;
}

.text-scale-105 {
	font-size: 105%;
}
/* 少しだけ大きい */

.text-scale-110 {
	font-size: 110%;
}
/* やや強調 */

.text-scale-115 {
	font-size: 115%;
}
/* 中強調 */

.text-scale-120 {
	font-size: 120%;
}
/* 強調（旧 text1B 相当） */

.text-scale-125 {
	font-size: 125%;
}
/* かなり強調 */

.text-scale-130 {
	font-size: 130%;
}
/* 見出し寄り */

/* =========================
   テキスト揃え
   ========================= */

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* =========================
   テキストカラー
   ========================= */

/* 黒（グレー寄り） */

.text-black {
	color: #333333;
}

/* グレー */

.text-gray {
	color: #666666;
}

/* 赤 */

.text-red {
	color: #FF0000;
}

/* えんじ */

.text-red-soft {
	color: #990000;
}

/* 緑 */

.text-green {
	color: #009900;
}

/* オレンジ */

.text-orange {
	color: #FF9900;
}

/* 青 （土曜日など）*/

.text-blue {
	color: #0000FF;
}

/* ベージュ（注文の流れページ） */

.text-beige {
	color: #D4A47B;
}

/* =========================
   行間（line-height）
   ========================= */

/* %指定はフォントサイズに対する倍率
   例：16px × 150% = 24px */

.text-lh-120 {
	line-height: 1.2;
}

.text-lh-140 {
	line-height: 1.4;
}

.text-lh-150 {
	line-height: 1.5;
}
/* 標準〜やや広め */

.text-lh-160 {
	line-height: 1.6;
}

.text-lh-180 {
	line-height: 1.8;
}
/* 読みやすい */

.text-lh-200 {
	line-height: 2;
}
/* =========================
   太字（強調）
   ========================= */

/* 汎用太字（見出し・強調用） */

.text-bold {
	font-weight: bold;
}

/* =========================
   赤い下線
   ========================= */

.text-underline-same {
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* =========================================================
   使用例（HTML）
   =========================================================

<span class="text-scale-85 text-green text-bold">緑 85%</span>
<span class="text-scale-90 text-green text-bold">緑 90%</span>
<span class="text-scale-95 text-green text-bold">緑 95%</span>
<span class="text-scale-100 text-green text-bold">緑 100%</span>

<span class="text-scale-85 text-orange text-bold">オレンジ 85%</span>
<span class="text-scale-90 text-orange text-bold">オレンジ 90%</span>
<span class="text-scale-95 text-orange text-bold">オレンジ 95%</span>
<span class="text-scale-100 text-orange text-bold">オレンジ 100%</span>
<span class="text-scale-105 text-black">黒 105%</span>
<span class="text-scale-110 text-red">赤 110%</span>
<span class="text-scale-120 text-black text-bold">黒 120% 太字</span>
<span class="text-scale-130 text-red text-bold">赤 130% 太字</span>

<span class="text-scale-110 text-black">通常強調</span>

<span class="text-scale-120 text-red text-bold">
重要な注意文

<span class="text-scale-120 text-red text-bold text-center">　中央揃えの強調テキスト

<span class="text-scale-100 text-lh-150">
ちょっと詰め気味の文章
</span>

<span class="text-scale-100 text-lh-200">
ゆったり読みやすい文章
</span>
========================================================= */

/* テキスト装飾の旧来ユーティリティ群。
   命名が抽象的で用途把握が難しいため、今後整理候補。
   ただし本文中に直接埋め込まれている可能性が高く、一括削除は危険。 */

/* 文字サイズ（小）,色*/

/* ========================================
   基本テキスト
======================================== */

/* hajimeteのみ使用 */

.text-indent {
	display: block;
	font-size: 15px;
	padding-left: 25px;
	text-indent: 0em;
	list-style-position: inside;
	line-height: 18px;
}

/* 基本下線 */

.text-underline {
	text-decoration: underline;
}

/* 赤強調下線（これだけで完結） */

.text-underline-alert {
	text-decoration: underline;
	text-decoration-color: #FF0000;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 緑太字＋赤強調下線 */

.text-green-bold-red-underline {
	color: #1B9000;
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: #FF0000;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 赤太字＋赤強調下線＋文字サイズ110% */

.text-red-bold-red-underline {
	color: #FF0000;
	font-weight: bold;
	font-size: 110%;
	text-decoration: underline;
	text-decoration-color: #FF0000;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 赤太字＋赤強調下線＋文字サイズ125% */

.text-red-bold-red-underline-large {
	color: #FF0000;
	font-weight: bold;
	font-size: 125%;
	text-decoration: underline;
	text-decoration-color: #FF0000;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ========================================
   装飾テキスト
======================================== */

.notice-text {
	line-height: 1.8;
	color: #333333;
	text-decoration: underline;
	text-decoration-color: #DD3333;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
	font-weight: bold;
}

.notice-text.notice-md {
	font-size: 16px;
}

/* =========================================================
   フッター
   ========================================================= */

/* =========================================================
   整理メモ：ここから下は旧CSS由来・追記調整が多い領域です。
   新しい指定をCSS最下部へ追加すると、既存セレクタを意図せず上書きしやすくなります。
   追加・修正する場合は、該当カテゴリ（ヘッダー／本文／テーブル／レスポンシブ等）へ移動して管理してください。
   ========================================================= */

/* =========================================================
   PC基本
   ========================================================= */

/* ===== 基本設定 ===== */

/* =========================================================
   style0_reordered.css
   目的: 元の指定をできるだけ維持したまま、読みやすい順に並べ替え
   並び順: 基本設定、ヘッダー、メイン、テーブル、補助、フッター、レスポンシブ
   ※ セレクタの内容は原則そのまま、順番中心で整理
   ========================================================= */

/* ==================== 基本設定 / リセット ==================== */

/* サイト全体の素地になる共通設定。
   ここで基本の余白・文字・画像・リンク挙動をそろえる。
   個別ページで差分指定を行う前提の土台。 */

/* 全要素の初期化。
   旧サイト由来のため、margin/padding を強めにリセットしている。
   フォントもここで全体指定しているので、個別に変える場合は上書きが必要。 */

* {
	padding: 0;
	margin: 0;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

/* フッター最下部の帯状住所表示。
   通常の address 意味付けより、視覚表現として使っている。 */

address {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	background-color: #990000;
	line-height: 30px;
	text-align: center;
	border-top: 1px solid #8A8A8A;
	width: 100%;
}

/* ==================== フッター ==================== */

#foot_base {
	background-repeat: repeat-x;
	background-position: top;
	background-color: #F8F8F8;
	clear: both;
	border-top: 1px solid #E1E1E1;
}

footer {
	width: 100%;
	max-width: 1000px;
	min-width: 0;
	position: relative;
	height: auto;
	min-height: 0;
	overflow: visible;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 8px 6px;
	box-sizing: border-box;
}

/* ===== フッター ===== */

footer .prbox a {
	color: #999999;
}

footer p {
	font-size: 15px;
	color: #232323;
	line-height: 1.6;
	text-align: center;
	position: static;
	width: 100%;
	height: auto;
	top: auto;
	margin: 0 0 5px;
	padding: 0;
}

footer #f_logo {
	position: static;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	padding: 0;
	font-size: 23px;
	color: #232323;
	font-weight: bold;
}

footer #f_logo2 {
	position: static;
	width: 100%;
	text-align: center;
	margin-bottom: 8px;
	padding: 0;
	font-size: 15px;
	color: #232323;
	border-bottom: none;
}

footer .prbox {
	position: static;
	margin-top: 4px;
	text-align: center;
	font-size: 10px;
	color: #999999;
}

/* テンプレートページ：TOPページへ戻るリンク */

#content .template-page-nav {
	clear: both;
	margin: 28px 0 10px;
	text-align: center;
}

#content .template-home-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	background: #FFFDF7;
	border: 1px solid #D8C590;
	border-radius: 999px;
	color: #8B1E1E;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#content .template-home-link::before {
	content: "←";
	font-size: 14px;
	font-weight: bold;
}

#content .template-home-link:hover {
	background: #FFF3E5;
	border-color: #B88746;
	color: #8B1E1E;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

/* サンプルページ：TOPページへ戻るリンク */

#main .sample-page-nav {
	clear: both;
	margin: 28px 0 10px;
	text-align: center;
}

#main .sample-home-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	background: #FFFDF7;
	border: 1px solid #D8C590;
	border-radius: 999px;
	color: #8B1E1E;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#main .sample-home-link::before {
	content: "←";
	font-size: 14px;
	font-weight: bold;
}

#main .sample-home-link:hover {
	background: #FFF3E5;
	border-color: #B88746;
	color: #8B1E1E;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}


/* template1/sample1.html専用：テンプレート見本ページ */
#main .template-sample-preview-card {
	max-width: 920px;
	margin: 0 auto 18px;
	padding: 22px;
	background: #FFFFFF;
	border: 1px solid #D9C1A0;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(90, 50, 31, 0.10);
}

#main .template-sample-preview-frame {
	margin: 0;
	padding: 0;
	text-align: center;
}

#main .template-sample-preview-frame img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 5px;
	background: #FFFFFF;
	border: 1px solid #DCC8A8;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

#main .template-sample-detail-card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
}

#main .template-sample-detail-item {
	padding: 13px 15px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 12px;
}

#main .template-sample-detail-label {
	display: block;
	margin-bottom: 4px;
	color: #7A5C33;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
}

#main .template-sample-detail-text {
	display: block;
	color: #2F2720;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}

/* トップページ：特急印刷コース 見た目調整は上の基本ブロックへ統合済み */

/* =========================================================
   その他・ページ個別調整
   ========================================================= */

/* select.html専用：注文ページの案内・補助導線 */
#content .order-hero {
	margin: 0 0 18px;
	padding: 24px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 14px;
	box-shadow: none;
}

#content .order-hero-label,
#content .order-section-label {
	margin: 0 0 6px;
	padding: 0;
	color: #B88746;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

#content .order-hero h3,
#content .order-other-section h3 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: #8B1E1E;
	font-size: 28px;
	line-height: 1.35;
	letter-spacing: 0.03em;
}

#content .order-hero-lead {
	margin: 12px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	color: #3A332C;
}

#content .order-hero-feature-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

#content .order-hero-feature {
	padding: 14px 16px;
	background: #FFFFFF;
	border: 1px solid #D7B98B;
	border-radius: 12px;
}

#content .order-hero-feature strong {
	display: block;
	margin: 0 0 4px;
	color: #8B1E1E;
	font-size: 16px;
	line-height: 1.45;
}

#content .order-hero-feature span {
	display: block;
	color: #4A4038;
	font-size: 13px;
	line-height: 1.6;
}

#content .order-paper-guide {
	margin: 0 0 18px;
}

#content .order-paper-guide-main {
	padding: 18px 20px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 14px;
	box-shadow: none;
}

#content .order-paper-guide-main h4 {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	color: #8B1E1E;
	font-size: 21px;
	line-height: 1.45;
}

#content .order-paper-guide-main p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.8;
}

#content .order-other-section {
	margin: 0 0 22px;
	padding: 22px 20px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 14px;
}

#content .order-other-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}

#content .order-other-card {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 12px;
	color: #2F2720;
	text-decoration: none;
}

#content .order-other-card:hover {
	border-color: #B88746;
	box-shadow: 0 4px 14px rgba(90, 50, 31, 0.12);
	color: #2F2720;
	text-decoration: none;
	transform: translateY(-2px);
}

#content .order-other-icon {
	display: flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: #8B1E1E;
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: bold;
	line-height: 1;
}

#content .order-other-title {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.45;
	color: #8B1E1E;
}

#content .order-other-text {
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.55;
	color: #4A4038;
}

#content .order-contact-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 18px;
	padding: 18px 20px;
	background: #8B1E1E;
	border: 1px solid #7A1818;
	border-radius: 14px;
	color: #FFFFFF;
}

#content .order-contact-box p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.7;
}

#content .order-contact-title {
	font-size: 18px !important;
	font-weight: bold;
}

#content .order-contact-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 160px;
	padding: 10px 15px;
	background: #FFFFFF;
	border: 1px solid #F2D6D6;
	border-radius: 999px;
	color: #8B1E1E;
	font-weight: bold;
	text-decoration: none;
}

#content .order-contact-button:hover {
	background: #FFF3E5;
	color: #8B1E1E;
	text-decoration: none;
	transform: translateY(-1px);
}

/* repeat/index.html専用：再注文ページの案内・補助導線 */
#content .repeat-hero,
#content .repeat-confirm-box,
#content .repeat-choice-section {
	margin: 0 0 18px;
	padding: 22px 20px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 14px;
	box-shadow: none;
}

#content .repeat-section-label {
	margin: 0 0 6px;
	padding: 0;
	color: #B88746;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

#content .repeat-hero h2,
#content .repeat-confirm-box h3,
#content .repeat-choice-section h3 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: #8B1E1E;
	font-size: 28px;
	line-height: 1.35;
	letter-spacing: 0.03em;
}

#content .repeat-hero-lead,
#content .repeat-confirm-box p {
	margin: 12px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	color: #3A332C;
}

#content .repeat-hero-feature-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

#content .repeat-hero-feature {
	padding: 14px 16px;
	background: #FFFFFF;
	border: 1px solid #D7B98B;
	border-radius: 12px;
}

#content .repeat-hero-feature strong {
	display: block;
	margin: 0 0 4px;
	color: #8B1E1E;
	font-size: 16px;
	line-height: 1.45;
}

#content .repeat-hero-feature span {
	display: block;
	color: #4A4038;
	font-size: 13px;
	line-height: 1.6;
}

#content .repeat-contact-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 18px;
	padding: 18px 20px;
	background: #8B1E1E;
	border: 1px solid #7A1818;
	border-radius: 14px;
	color: #FFFFFF;
}

#content .repeat-contact-box p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.7;
}

#content .repeat-contact-title {
	font-size: 18px !important;
	font-weight: bold;
}

#content .repeat-contact-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 160px;
	padding: 10px 15px;
	background: #FFFFFF;
	border: 1px solid #F2D6D6;
	border-radius: 999px;
	color: #8B1E1E;
	font-weight: bold;
	text-decoration: none;
}

#content .repeat-contact-button:hover {
	background: #FFF3E5;
	color: #8B1E1E;
	text-decoration: none;
	transform: translateY(-1px);
}


/* template1/index.html専用：ページ案内・注意事項 */
#content .template-hero,
#content .template-download-section,
#content .template-notice-section,
#content .template-related-section {
	margin: 0 0 18px;
	padding: 22px 20px;
	background: #FFFAF2;
	border: 1px solid #E2C99D;
	border-radius: 14px;
}

#content .template-section-label {
	margin: 0 0 6px;
	padding: 0;
	color: #B88746;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

#content .template-hero h2,
#content .template-download-section h3,
#content .template-notice-section h3,
#content .template-related-section h3 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: #8B1E1E;
	font-size: 26px;
	line-height: 1.35;
	letter-spacing: 0.03em;
}

#content .template-hero-lead,
#content .template-section-heading p,
#content .template-related-section p {
	margin: 12px 0 0;
	padding: 0;
	color: #3A332C;
	font-size: 16px;
	line-height: 1.8;
}

#content .template-hero-feature-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

#content .template-hero-feature {
	padding: 14px 16px;
	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 12px;
}

#content .template-hero-feature strong {
	display: block;
	margin: 0 0 4px;
	color: #8B1E1E;
	font-size: 16px;
	line-height: 1.45;
}

#content .template-hero-feature span {
	display: block;
	color: #4A4038;
	font-size: 13px;
	line-height: 1.6;
}

#content .template-section-heading {
	margin-bottom: 16px;
}

#content .template-notice-list {
	margin: 14px 0 0;
	padding: 0;
}

#content .template-notice-list li {
	position: relative;
	margin: 0;
	padding: 9px 0 9px 20px;
	border-bottom: 1px solid #EAD7B8;
	color: #3A332C;
	font-size: 15px;
	line-height: 1.75;
	list-style: none;
}

#content .template-notice-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: #8B1E1E;
	font-weight: bold;
}

#content .template-notice-list li:last-child {
	border-bottom: none;
}

#content .template-related-main {
	background: #FFFFFF;
	border: 1px solid #EAD7B8;
	border-radius: 12px;
	padding: 18px;
}

#content .template-related-button-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

#content .template-page-nav {
	margin: 18px 0;
	text-align: center;
}

#content .template-home-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	background: #FFFDF7;
	border: 1px solid #EAD7B8;
	border-radius: 999px;
	color: #8B1E1E;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#content .template-home-link:hover {
	background: #FFF3E5;
	border-color: #B88746;
	color: #8B1E1E;
	text-decoration: none;
}

.dl_link dt {
	font-size: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	line-height: 28px;
	margin-bottom: 7px;
	background-image: url("img/li.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
	font-weight: normal;
	letter-spacing: 1px;
}

.dl_link dd {
	font-size: 13px;
	line-height: 20px;
	padding-right: 15px;
	padding-left: 15px;
	color: #505050;
}

.td_head .eng {
	margin: 0;
	padding: 0;
	font-size: 10px;
	color: #DCA35C;
}

.table_info th a {
	color: #312D24;
}

/* 赤ラベル 白文字・赤背景・太字の、短い注意ラベル用。 */

.label-red {
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	background-color: #FF0000;
	padding-right: 8px;
	padding-left: 8px;
}

/* --- GMOサイトシールの枠 --- */

#ss_gmo_globalsign_secured_site_seal {
	outline: 1px solid #A8A8A8;
	outline-offset: 0;
	overflow: visible;
	background: #FFFFFF;
}

#ss_gmo_globalsign_img {
	display: block;
	width: 100% !important;
	height: 57px !important;
	border: 0 !important;
}
/* フッター：会社情報ボックス */

#footer .footer-company-box,
footer .footer-company-box {
	clear: both;
	display: block;
	position: relative;
	width: calc(100% - 28px);
	margin: 12px auto 8px;
	padding: 14px 16px 12px;
	background: #FFFDF7;
	border: 1px solid #EAD7B8;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#footer .footer-company-box p,
footer .footer-company-box p {
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.6;
}

#footer .footer-company-name,
footer .footer-company-name {
	color: #232323;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

#footer .footer-business-hours,
footer .footer-business-hours {
	color: #8B1E1E;
	font-weight: bold;
}

#footer .footer-note,
footer .footer-note {
	margin-top: 7px !important;
	color: #555555;
	font-size: 14px;
	line-height: 1.6;
}

/* タブレット：画像＋説明文ブロックの画像幅を少し控えめにする */
@media screen and (min-width: 601px) and (max-width: 900px) {
	#content .top-info-section-image {
		flex-basis: 190px;
	}
}

/* スマホ・小タブレット：トップページの最終更新日バーと余白を非表示 */
@media screen and (max-width: 759px) {
	#content .top-update-bar {
		display: none;
	}

	#content .top-update-bar + .top-space-sm {
		display: none;
	}

	#content .top-update-bar + .top-space-sm + .box_out {
		margin-top: 0;
	}
}

/* スマホ：ヘッダー下から本文までの空きスペースを詰める */
@media screen and (max-width: 600px) {
	#top_img {
		display: none;
		height: 0;
		margin: 0;
		padding: 0;
	}

	#main {
		padding-top: 0;
	}

	#content {
		margin-top: 0;
	}
}

/* スマホ：グローバルメニューの見た目を少し整える */
@media screen and (max-width: 600px) {
	nav#g_navi a.menu {
		border-radius: 0;
		letter-spacing: 0.02em;
	}

	nav#g_navi ul.gl_menu li a,
	nav#g_navi ul.gl_menu li strong {
		font-size: 14px;
		line-height: 1.5;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* スマホ・小タブレット：価格バナーと注文ボタン周りを見やすく調整 */
@media screen and (max-width: 759px) {
	#content .top-info-price-main {
		font-size: 32px;
	}

	#content .top-info-price-main strong {
		font-size: 42px;
	}

	#content .top-info-price-sub {
		font-size: 19px;
	}

	#content .top-info-price-sub strong {
		font-size: 26px;
	}
}

/* =========================================================
   レスポンシブ
   ========================================================= */

/* select.html専用：注文ページのレスポンシブ調整 */
@media screen and (max-width: 759px) {
	#content .order-hero {
		padding: 22px 18px;
	}

	#content .order-hero h3,
	#content .order-other-section h3 {
		font-size: 24px;
	}

	#content .order-hero-feature-list,
	#content .order-paper-card-list,
	#content .order-other-card-list {
		grid-template-columns: 1fr;
	}

	#content .order-paper-spec-list div {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	#content .order-contact-box {
		align-items: stretch;
		flex-direction: column;
	}

	#content .order-contact-button {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	#content .order-paper-card-body,
	#content .order-other-section,
	#content .order-paper-guide-main {
		padding: 15px;
	}

	#content .order-paper-card-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	#content .order-other-card {
		grid-template-columns: 38px minmax(0, 1fr);
		padding: 14px;
	}

	#content .order-other-icon {
		width: 38px;
		height: 38px;
	}
}


/* repeat/index.html専用：再注文ページのレスポンシブ調整 */
@media screen and (max-width: 759px) {
	#content .repeat-hero,
	#content .repeat-confirm-box,
	#content .repeat-choice-section {
		padding: 20px 16px;
	}

	#content .repeat-hero h2,
	#content .repeat-confirm-box h3,
	#content .repeat-choice-section h3 {
		font-size: 24px;
	}

	#content .repeat-hero-feature-list,
	#content .repeat-choice-card-list {
		grid-template-columns: 1fr;
	}

	#content .repeat-contact-box {
		align-items: stretch;
		flex-direction: column;
	}

	#content .repeat-contact-button {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	#content .repeat-choice-card-body {
		padding: 16px;
	}
}

@media screen and (max-width: 600px) {
	#footer .footer-company-box,
	footer .footer-company-box {
		clear: both;
		display: block;
		position: relative;
		width: calc(100% - 14px);
		margin: 10px auto 4px;
		padding: 12px 9px 9px;
		border-radius: 9px;
		box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04);
	}

	#footer .footer-company-name,
	footer .footer-company-name {
		font-size: 18px;
		line-height: 1.35;
	}

	#footer .footer-note,
	footer .footer-note {
		margin-top: 6px !important;
		font-size: 13px;
		line-height: 1.55;
	}

	#content .top-share-area {
		margin: 18px 0 6px;
		padding-top: 10px;
	}

	#content .speed-course-head {
		background: linear-gradient(135deg, #FFE7D6 0%, #FFF1E4 55%, #FFF8EF 100%);
		padding: 13px 12px 12px 14px;
		border-left-width: 6px;
		box-shadow: none;
	}

	#content .speed-course-badge {
		margin-bottom: 5px;
		font-size: 12px;
	}

	#content .speed-course-title {
		font-size: 20px;
		line-height: 1.2;
	}

	#content .speed-course-catch {
		margin-top: 2px !important;
		font-size: 18px;
		line-height: 1.25;
	}
	#content .speed-course-card {
		margin: 22px auto 20px;
	}
	#content .speed-course-body {
		padding: 14px 13px 16px;
	}
	#content .speed-course-btn {
		width: 100%;
		min-width: 0;
		font-size: 15px;
	}
	#content .order-flow {
		padding-left: 6px;
	}
	#content .order-flow::before {
		left: 22px;
	}
	#content .order-flow-step {
		gap: 10px;
		padding: 14px 12px 14px 8px;
	}
	#content .order-flow-number {
		width: 30px;
		height: 30px;
		font-size: 16px;
	}
	#content .flow-role {
		margin-left: 5px;
		padding: 1px 6px;
		font-size: 11px;
	}
	#content .menu_base .table_menu th,
	#content .menu_base .table_menu td {
		padding: 9px 10px;
		font-size: 14px;
	}
	#content .menu_base .table_menu strong {
		font-size: 16px;
	}

	#content .top-price-heading {
		display: block;
		margin: 22px 0 10px;
		padding: 9px 12px;
	}
	#content .top-price-heading span {
		display: block;
		font-size: 18px;
	}
	#content .top-price-heading a {
		display: inline-block;
		margin-top: 4px;
		font-size: 13px;
	}
	#content .top-message-box {
		margin: 18px 0 20px;
		padding: 15px 13px;
		border-left-width: 6px;
	}
	#content .top-message-title {
		font-size: 18px;
	}
	#content .top-message-main,
	#content .top-status-box p {
		font-size: 15px;
	}
	#content .top-status-title {
		font-size: 17px;
	}

	/* スマホ：価格バナーは大きくなりすぎないよう固定 */
	#content .top-info-banner {
		min-height: 88px;
		margin: 4px auto 18px;
		padding: 0 2% 0 0;
		background-position: center center;
		background-size: 100% 100%;
		align-items: flex-end;
		text-align: right;
	}

	#content .top-info-price-main {
		font-size: 19px;
		line-height: 1.16;
		white-space: nowrap;
	}

	#content .top-info-price-main strong {
		font-size: 30px;
	}

	#content .top-info-price-main span {
		font-size: 10px;
	}

	#content .top-info-price-sub {
		margin-top: 2px !important;
		font-size: 13px;
		line-height: 1.25;
		white-space: nowrap;
	}

	#content .top-info-price-sub strong {
		font-size: 18px;
	}

	#content .top-info-price-sub span {
		font-size: 8px;
	}

	#content .top-section-copy {
		font-size: 20px;
		line-height: 1.6;
		letter-spacing: 0.03em;
		margin: 24px auto 18px;
		padding: 12px 10px;
	}

	#content .top-section-copy::before,
	#content .top-section-copy::after {
		width: 90%;
	}

	#content .feature-heading {
		align-items: flex-start;
		margin: 22px 0 14px;
		padding: 11px 12px;
		border-left-width: 6px;
	}

	#content .feature-heading-number {
		min-width: 36px;
		height: 28px;
		margin-right: 10px;
		padding: 0 8px;
		font-size: 16px;
		transform: translateY(1px);
	}

	#content .feature-heading-number::before {
		font-size: 11px;
		transform: translateY(1px);
	}

	#content .feature-heading-text {
		font-size: 20px;
		transform: translateY(2px);
	}

	#content .top-action-buttons {
		margin: 15px 0 20px;
	}

	#content .top-action-btn {
		min-height: 52px;
		gap: 6px;
	}

	#content .order-btn::before,
	#content .contact-btn::before {
		width: 29px;
		height: 29px;
	}

	/* スマホ：見本画像カード2列統一・最終上書き */
	#content .top-sample-card,
	#content .top-sample-card-vertical {
		width: 48%;
		min-height: 0;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 14px;
		float: left;
		box-sizing: border-box;
	}

	/* スマホ：top-sample-grid内はfloatを完全解除 */
	#content .top-sample-grid .top-sample-card,
	#content .top-sample-grid .top-sample-card-vertical {
		float: none;
		width: 49%;
		margin-left: 0;
		margin-right: 0;
	}

	/* スマホ：価格表を見やすい2列ペア表示にする */
	#content .top-price-table {
		border: none;
		box-shadow: none;
		background: transparent;
	}

	#content .top-price-table tr {
		display: grid;

		/* Dreamweaverでは警告が出る場合あり。
		   1fr はCSS Gridの正式な単位のため、ブラウザ表示が正常なら問題なし。 */
		grid-template-columns: 1fr 1fr;

		gap: 0;
		margin-bottom: 10px;
		border: 1px solid #D8C590;
		background: #FFFFFF;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	#content .top-price-table th,
	#content .top-price-table td {
		display: block;
		width: auto;
		box-sizing: border-box;
		border: none;
		text-align: left;
	}

	#content .top-price-table th {
		padding: 9px 10px 4px;
		background: #F7EDD8;
		color: #5A321F;
		font-size: 13px;
		line-height: 1.5;
		white-space: normal;
	}

	#content .top-price-table td {
		padding: 4px 10px 10px;
		background: #FFFFFF;
		color: #232323;
		font-size: 16px;
		line-height: 1.45;
	}

	#content .top-price-table td strong {
		font-size: 19px;
		line-height: 1.35;
	}

	/* スマホ価格表：各セルのgrid配置を個別ルールに統合 */
	#content .top-price-table th:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	#content .top-price-table td:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	#content .top-price-table th:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
		border-left: 1px solid #D8C590;
	}

	#content .top-price-table td:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
		border-left: 1px solid #D8C590;
	}

	/* スマホ：用紙の大きさ表を1カラムで見やすくする */
	#content .top-paper-size-table {
		border: 1px solid #D8C590;
		border-left: 6px solid #B88746;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
		background: #FFFFFF;
	}

	#content .top-paper-size-table tr {
		display: block;
	}

	#content .top-paper-size-table th,
	#content .top-paper-size-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
		border: none;
		text-align: left;
	}

	#content .top-paper-size-label {
		padding: 10px 12px;
		background: #F7EDD8;
		color: #5A321F;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.5;
		white-space: normal;
	}

	#content .top-paper-size-value {
		padding: 10px 12px;
		background: #FFFFFF;
		color: #232323;
		font-size: 15px;
		line-height: 1.7;
	}

	#content .top-paper-size-value + .top-paper-size-value {
		border-top: 1px solid #EAD7B8;
		background: #FFFDF7;
	}

	#content .top-paper-size-list strong {
		display: inline-block;
		min-width: 2.2em;
		font-size: 17px;
		color: #232323;
	}

	#content .top-paper-size-note {
		display: block;
		font-size: 14px;
		line-height: 1.8;
	}

	/* スマホ：画像＋説明文ブロック */
	#content .top-info-section {
		display: block;
	}

	#content .top-info-section-image {
		margin: 0 0 12px;
	}

	#content .top-info-section-image img {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}

	#content .top-info-section-text p {
		font-size: 15px;
		line-height: 1.75;
	}

header h1 {
		display: block;
		position: static;
		margin: 0 0 6px;
		font-size: 13px;
		line-height: 1.5;
		text-align: left;
	}

	header #logo {
		display: block;
		width: 100%;
		max-width: 700px;
		height: auto;
		margin: 0 auto;
	}

}

#side2 h3 {
	font-size: 14px;
	line-height: 18px;
	color: #FFFFFF;
	padding-bottom: 3px;
	font-weight: normal;
	margin-bottom: 1px;
	padding-top: 5px;
	letter-spacing: 1px;
	text-align: center;
	background-color: #F97700;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #FFBA66;
}

#side2 .side_box h3 {
	background-color: #FF8515;
	background-image: none;
	line-height: 20px;
	height: 20px;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 1px;
	padding-left: 0;
	font-size: 13px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #D5D0C8;
}

#side2 li {
	line-height: 0;
}

#side2 .side_box .side_inbox p {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	font-size: 12px;
}

#side2 .side_box .side_btn {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #F2F2F2;
}

#side2 li a span {
	font-size: 10px;
	line-height: 12px;
	color: #999999999;
}

#side2 li a:hover span {
	color: #FFA451;
}

#side2 .chui {
	font-size: 10px;
	color: #D73743;
	padding-left: 5px;
}

/* PC基本：min-width 指定 */

@media screen and (min-width: 760px) {

	#top_img {
	padding-bottom: 97px;
}

	#info {
		display: none;
	}

	#hp_base {
	width: 760px;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
}

	#main {
		width: 750px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
}

	#content {
		width: 100%;
	margin-right: 5px;
	margin-top: 10px;
}

header {
	height: 230px;
	position: relative;
	background-color: #FF9900;
}

header h1 {
	font-size: 16px;
	line-height: 1.4;
	margin: 10px 0 8px;
}

header img#logo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 58px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
}

header #h_list {
	position: absolute;
	right: 5px;
	top: 1px; /* 1px分少し下げる */
}

header #info {
	position: absolute;
	text-align: right;
}

/* PC表示時のグローバルナビ本体。
   ヘッダー下に絶対配置されるため、ヘッダー高さ変更時は連動確認が必要。 */
nav#g_navi {
	position: absolute;
	left: -1px;
	bottom: -57px;
	height: 50px;
	width: 100%;
	max-width: calc(100% - 5px);
	padding-left: 5px;
	z-index: 2;
}

nav#g_navi ul.gl_menu {
	height: 30px;
	display: block;
}

nav#g_navi li a {
	display: block;
	float: left;
	color: #727272;
	text-decoration: none;
	text-align: center;
	line-height: 14px;
	height: 13px;
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 6px;
	font-size: 12px;
	padding-top: 6px;
	width: auto;
	border-right: 2px solid #FF9E46;
	background-color: #FFCC66;
	font-weight: bold;
	margin-bottom: 7px;
}

nav#g_navi li strong {
	display: block;
	float: left;
	color: #000000;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E0E0E0;
	text-align: center;
	line-height: 7px;
	height: 11px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 5px;
	font-size: 12px;
	padding-top: 8px;
	width: auto;
	background-color: #FF9E46;
	font-weight: bold;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FF8D31;
	border-bottom: 2px solid #FF0004;
}

nav#g_navi li a span {
	color: #FFA851;
	line-height: 10px;
	font-size: 10px;
}

nav#g_navi li strong span {
	color: #FF6600;
	line-height: 12px;
	font-size: 10px;
}

nav#g_navi li a:hover span {
	color: #FFFFFF;
}


nav#g_navi li a:hover {
	color: #FFFFFF;
	background-color: #FF9E46;
	border-bottom-color: #FF6600;
}


nav#g_navi li {
	display: inline;
}

a.menu {
	display: none;
}

#content .box02_left {
	float: left;
	width: 49%;
}

#content .box02_right {
	float: right;
	width: 49%;
}

/* 760px以上で出るサイドバー。
   1000px未満では side2 と役割が切り替わる。 */
#side {
	padding: 5px;
	float: left;
	width: 220px;
	margin-top: 10px;
	border: 1px solid #BAA482;
	background-color: #FDF7E8;
}

#side h3 {
	font-size: 14px;
	line-height: 18px;
	color: #FFFFFF;
	padding-bottom: 3px;
	font-weight: normal;
	margin-bottom: 1px;
	padding-top: 5px;
	letter-spacing: 1px;
	text-align: center;
	background-color: #F97700;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #FFBA66;
}
/* サイドバー：画像余白調整 */

#side .side-img {
	display: block;
	margin: 0 auto 12px;
}

/* サイドバー：中間余白 */

#side .side-space-md {
	clear: both;
	height: 18px;
	font-size: 0;
	line-height: 0;
}

#side .side_box {
	width: 220px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
}

#side .side_box h3 {
	background-color: #FF8515;
	background-image: none;
	line-height: 20px;
	height: 20px;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 1px;
	padding-left: 0;
	font-size: 13px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #D5D0C8;
}

#side .side_box .side_inbox {
	width: 210px;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #DEB99A;
}

#side li {
	line-height: 0;
}

#side li a {
	display: block;
	font-size: 15px;
	line-height: 24px;
	color: #272727;
	text-decoration: none;
	background-color: #F5E9D8;
	padding-top: 10px;
	padding-right: 5px;
	padding-left: 22px;
	border-bottom: 1px solid #98744E;
	background-image: url("img/side_li.gif");
	background-position: center top;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	height: 32px;
}

#side li a:hover {
	background-color: #FFFFFF;
	color: #000000;
	background-image: url("img/side_li_ov.gif");
}

#side .side_box .side_inbox p {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	font-size: 12px;
}

#side .side_box .side_btn {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #F2F2F2;
}

#side li a span {
	font-size: 10px;
	line-height: 12px;
	color: #999999999;
}

#side li a:hover span {
	color: #FFA451;
}

#side ul {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

#side .chui {
	font-size: 10px;
	color: #D73743;
	padding-left: 5px;
}

footer li a {
	text-decoration: none;
	font-size: 13px;
}

footer li a:hover {
	color: #999999999;
}

footer li {
	font-size: 12px;
	display: inline;
}

footer #f_ul01 {
	text-align: center;
	position: static;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}

footer #f_ul02 {
	text-align: center;
	position: static;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}

footer #f_ul03 {
	text-align: center;
	position: static;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}

footer #f_ul04 {
	text-align: center;
	position: static;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}

}

@media screen and (min-width: 760px) and (max-width: 999px) {

	#top_img {
		padding-bottom: 150px;
	}

	header {
		height: 230px;
		position: relative;
		background-color: #FF9900;
		overflow: visible;
	}

	header h1 {
		font-size: 16px;
		line-height: 1.4;
		margin-top: 32px;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 8px;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
	}

	nav#g_navi {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -168px;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border-top: 1px solid #D8B8A4;
		box-shadow: 0 3px 8px rgba(80, 35, 20, 0.14);
		box-sizing: border-box;
		z-index: 20;
	}

	nav#g_navi a.menu {
		display: none !important;
	}

	nav#g_navi ul.gl_menu {
		display: block !important;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border-left: 1px solid #EAD8CE;
		border-bottom: 3px solid #8F1D14;
		box-shadow: none;
		box-sizing: border-box;
		overflow: visible;
	}

	nav#g_navi ul.gl_menu::after {
		content: "";
		display: block;
		clear: both;
	}

	nav#g_navi .gl_menu > li {
		position: relative;
		display: block;
		float: left;
		width: 20%;
		min-width: 0;
		margin: 0;
		padding: 0;
		border-right: 1px solid #EAD8CE;
		border-bottom: 1px solid #EAD8CE;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	/* タブレットで下層メニューを「再注文」の次に続けて並べる */
	nav#g_navi .gl_menu > li:last-child {
		display: contents;
		float: none;
		width: auto;
		clear: none;
		margin: 0;
		padding: 0;
		border: none;
		background: transparent;
	}

	nav#g_navi .gl_menu > li:last-child > a {
		float: left;
		display: flex !important;
		width: 20%;
		min-height: 32px;
		border-right: 1px solid #EAD8CE;
		border-bottom: 1px solid #EAD8CE;
	}

	nav#g_navi .gl_menu > li > a,
	nav#g_navi .gl_menu > li > strong {
		display: flex !important;
		float: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 32px;
		margin: 0;
		padding: 7px 3px 0;
		color: #8F1D14;
		background: #FFFFFF;
		border: none;
		font-size: 12px;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: normal;
		box-sizing: border-box;
	}

	nav#g_navi .gl_menu > li > strong {
		color: #FFFFFF;
		background: #8F1D14;
	}

	nav#g_navi .gl_menu > li > a:hover {
		color: #FFFFFF;
		background: #A92A1E;
	}

	/* タブレットでは下層メニューを常時表示。親メニューの続きとして並べる */
	nav#g_navi .gl_menu2 {
		display: contents;
		margin: 0;
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
	}

	nav#g_navi .gl_menu2::after {
		content: "";
		display: block;
		clear: both;
	}

	nav#g_navi .gl_menu2 li {
		display: block;
		float: left;
		width: 20%;
		margin: 0;
		padding: 0;
		border-right: 1px solid #EAD8CE;
		border-bottom: 1px solid #EAD8CE;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	nav#g_navi .gl_menu2 li:nth-child(5n+4) {
		border-right: none;
	}

	nav#g_navi .gl_menu2 li a {
		display: flex !important;
		float: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 32px;
		height: auto;
		margin: 0;
		padding: 7px 3px 0;
		color: #8F1D14;
		background: #FFFFFF;
		border: none;
		font-size: 12px;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: normal;
		box-sizing: border-box;
	}

	nav#g_navi .gl_menu2 li a:hover {
		color: #FFFFFF;
		background: #A92A1E;
	}
}

@media screen and (max-width: 759px) {
	header h2 {
		display: none;
	}

	nav#g_navi {
		position: static;
		clear: both;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border-top: 1px solid #D8B8A4;
		border-bottom: 3px solid #8F1D14;
		box-shadow: none;
		box-sizing: border-box;
	}

	nav#g_navi a.menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 42px;
		padding: 4px 14px 0;
		color: #FFFFFF !important;
		background: #8F1D14 !important;
		border: none;
		box-shadow: none;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.2;
		text-align: left;
		text-decoration: none;
		box-sizing: border-box;
	}

	nav#g_navi a.menu span {
		padding-left: 0;
		font-size: 12px;
	}

	nav#g_navi a.menu span::after {
		content: "表示する ▼";
	}

	nav#g_navi a.menuOpen span::after {
		content: "閉じる ×";
	}

	nav#g_navi a.menu:hover {
		cursor: pointer;
		color: #FFFFFF !important;
		background: #A92A1E !important;
	}

	nav#g_navi ul.gl_menu {
		display: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border-top: 1px solid #EAD8CE;
		box-shadow: none;
		box-sizing: border-box;
	}

	nav#g_navi ul.gl_menu li,
	nav#g_navi .gl_menu2 li {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #EAD8CE;
		background: #FFFFFF;
		font-size: 14px;
		line-height: 1.4;
		box-sizing: border-box;
	}

	nav#g_navi ul.gl_menu li:last-child,
	nav#g_navi .gl_menu2 li:last-child {
		border-bottom: none;
	}

	nav#g_navi ul.gl_menu li a,
	nav#g_navi ul.gl_menu li strong,
	nav#g_navi .gl_menu2 li strong {
		display: block;
		width: 100%;
		margin: 0;
		padding: 11px 14px;
		color: #8F1D14;
		background: #FFFFFF;
		border: none;
		font-size: 14px;
		font-weight: bold;
		line-height: 1.4;
		text-align: left;
		text-decoration: none;
		box-sizing: border-box;
	}

	/* スマホ表示：下層メニューのリンク専用。
	   共通メニュー指定の値を引き継ぎつつ、字下げ・文字サイズ・太さだけ専用化。 */
	nav#g_navi .gl_menu2 li a {
		display: block;
		width: 100%;
		margin: 0;
		padding: 11px 14px 11px 26px;
		color: #8F1D14;
		background: #FFFFFF;
		border: none;
		font-size: 13px;
		font-weight: normal;
		line-height: 1.4;
		text-align: left;
		text-decoration: none;
		box-sizing: border-box;
	}

	nav#g_navi ul.gl_menu li strong,
	nav#g_navi .gl_menu2 li strong {
		color: #FFFFFF;
		background: #8F1D14;
	}

	nav#g_navi ul.gl_menu li a:hover,
	nav#g_navi .gl_menu2 li a:hover {
		color: #FFFFFF;
		background: #8F1D14;
	}

	nav#g_navi .gl_menu2 {
		display: block;
		margin: 0;
		padding: 0;
		background: #FFF7F2;
		box-shadow: none;
		box-sizing: border-box;
	}


	/* スマホ・タブレット表示：フッターリンクメニューを非表示 */
	footer ul,
	footer #f_ul01,
	footer #f_ul02,
	footer #f_ul03,
	footer #f_ul04 {
		display: none !important;
	}

}

@media screen and (min-width: 1000px) {

	#top_img {
	padding-bottom: 11px;
}

	header h1 {
		position: absolute;
	top: 13%;
	left: 14%;
}

	header h2 {
		position: absolute;
	top: 140px;
	width: 100%;
	text-align: center;
	margin-left: 0;
	font-weight: normal;
	font-size: 14px;
}

	#hp_base {
		width: 100%;
	max-width: 1013px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

nav#g_navi {
	width: 100%;
	max-width: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50px;
	z-index: 20;
	padding: 0;
	background: #FFFFFF;
	border-top: 1px solid #D8B8A4;
	box-shadow: 0 3px 8px rgba(80, 35, 20, 0.14);
	box-sizing: border-box;
}

nav#g_navi ul.gl_menu {
	display: flex !important;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	box-shadow: none;
	box-sizing: border-box;
	border-bottom: 3px solid #8F1D14;
}

nav#g_navi .gl_menu > li {
	position: relative;
	flex: 1 1 0;
	display: block;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-right: 1px solid #EAD8CE;
	border-bottom: none;
	background: transparent;
	box-sizing: border-box;
}

nav#g_navi .gl_menu > li:last-child {
	border-right: none;
}

nav#g_navi .gl_menu > li > a,
nav#g_navi .gl_menu > li > strong {
	display: flex !important;
	float: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 3px 4px 0;
	color: #8F1D14;
	background: #FFFFFF;
	border: none;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

/* PC表示：現在ページ（strong）の反転表示 */
nav#g_navi .gl_menu > li > strong {
	color: #FFFFFF;
	background: #8F1D14;
}

/* PCでは下層メニューを非表示 */
nav#g_navi .gl_menu2 {
	display: none;
}

	#main {
		float: left;
	width: 1000px;
	margin: 20px auto 0;
	padding-top: 6px;
	padding-right: 6px;
	padding-left: 6px;
}

	#content {
		float: right;
	width: 747px;
	margin-right: 5px;
	margin-top: 10px;
}

#side2 {
	padding: 5px;
	float: left;
	width: 220px;
	margin-top: 10px;
	border: 1px solid #BAA482;
	background-color: #FDF7E8;
	font-size: 0;
}

#side2 .side_box {
	width: 220px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
}

#side2 .side_box .side_inbox {
	width: 210px;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #DEB99A;
}

#side2 li a {
	display: block;
	font-size: 15px;
	line-height: 24px;
	color: #272727;
	text-decoration: none;
	background-color: #F5E9D8;
	padding-top: 4px;
	padding-right: 5px;
	padding-left: 22px;
	border-bottom: 1px solid #98744E;
	background-image: url("img/side2_li.gif");
	background-position: center top;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	height: 28px;
}

#side2 li a:hover {
	background-color: #FFFFFF;
	color: #000000;
	background-image: url("img/side2_li_ov.gif");
}

#side2 ul {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

}

@media screen and (min-width: 760px) {
textarea,
input {
	font-size: 14px;
	margin-bottom: 5px;
}
}

/* =========================================================
   1000px以下
   ========================================================= */

@media screen and (max-width: 1000px) {

#side {
	display: none;
}
/* 1000px以下で使う代替サイド領域。 */
#side2 {
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
	float: left;
	width: 96%;
	margin-top: 10px;
	border: 1px solid #BAA482;
	background-color: #FDF7E8;
	font-size: 0;
}

#side2 .side_box {
	width: 100%;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
}

#side2 .side_box .side_inbox {
	width: 100%;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #DEB99A;
}

#side2 li a {
	display: block;
	font-size: 15px;
	line-height: 24px;
	color: #272727;
	text-decoration: none;
	background-color: #F5E9D8;
	padding-top: 4px;
	padding-right: 5px;
	padding-left: 22px;
	border-bottom: 1px solid #98744E;
	background-position: center top;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	height: 28px;
}

#side2 li a:hover {
	background-color: #FFFFFF;
	color: #000000;
}

#side2 ul {
	width: 96%;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

}

/* =========================================================
   760px以下
   ========================================================= */

@media screen and (max-width: 759px) {
	#content .box33_select {
		margin-left: 2%;
	}
}

@media screen and (max-width: 759px) {

	h2 {
	font-size: 14px;
	line-height: 19px;
	color: #4A4A4A;
	padding-top: 8px;
	padding-bottom: 3px;
	clear: both;
	font-weight: normal;
	text-align: center;
	}

	#content .box_in {
	padding: 1%;
	}

	#form {
	margin: 1%;
	background-color: #F8F8F6;
	}

	#content table td.td_head {
	padding: 8px;
	white-space: normal;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	}

	.td_head .eng {
	font-size: 10px;
	}

	#content table td.td_odd {
	padding: 8px;
	font-size: 14px;
	line-height: 1.7;
	box-sizing: border-box;
	}

	#content .chui {
	font-size: 12px;
	line-height: 1.6;
	}

	textarea,
	input {
	max-width: 100%;
	box-sizing: border-box;
	font-size: 16px !important;
	line-height: 1.5;
	}


	/* スマホ・小タブレット：新フォーム form-modern */
	#content .form-modern .form-block,
.form-modern #content .form-block {
		margin-bottom: 24px;
		padding: 16px;
		border-radius: 12px;
	}

	#content .form-modern .form-block-title,
	#content .form-modern .form-block > h4 {
		margin: -16px -16px 18px;
		border-radius: 10px 10px 0 0;
	}

	#content .form-modern .form-block-title,
	#content .form-modern .form-block > h4 {
		font-size: 18px;
	}

	#content .form-modern .form-grid,
.form-modern #content .form-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	#content .form-modern .form-row-full,
.form-modern #content .form-row-full {
		grid-column: auto;
	}

	#content .form-modern textarea,
.form-modern #content textarea {
		min-height: 180px;
	}

	#content .form-modern .form-note,
.form-modern #content .form-note {
		padding: 11px 12px;
	}


	.form-modern.order-form #content .form-block > .form-row,
	.form-modern.order-form #content .form-block > .form-grid {
		margin-bottom: 12px;
	}

	.form-modern.order-form #content .gaiji-example-box {
		padding: 10px;
	}

	.form-modern.order-form #content .gaiji-example-row,
	.form-modern.order-form #content .gaiji-example-row-top,
	.form-modern.order-form #content .gaiji-example-row-bottom {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.form-modern.order-form #content .gaiji-example-item,
	.form-modern.order-form #content .gaiji-example-row-bottom .gaiji-example-item {
		grid-template-columns: 30px 64px minmax(0, 1fr);
		grid-template-areas: "label image text";
		align-items: center;
		padding: 7px 8px;
	}

	.form-modern.order-form #content .gaiji-example-row-bottom .gaiji-example-item {
		grid-template-columns: 30px 104px minmax(0, 1fr);
	}

	.form-modern.order-form #content .gaiji-example-image,
	.form-modern.order-form #content .gaiji-example-row-top .gaiji-example-image {
		justify-content: center;
	}

	.form-modern.order-form #content .gaiji-example-text,
	.form-modern.order-form #content .gaiji-example-row-top .gaiji-example-text,
	.form-modern.order-form #content .gaiji-example-row-bottom .gaiji-example-text {
		padding-top: 0;
		padding-left: 0;
		font-size: 13px;
		text-align: left;
	}

	.form-modern.order-form #content .gaiji-example-text small {
		font-size: 11px;
	}


	.form-modern.order-form #content .paper-type-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.form-modern.order-form #content .paper-type-card label {
		padding: 9px 7px;
	}

	.form-modern.order-form #content .paper-type-image-link {
		width: 130px;
		height: 155px;
	}

	.form-modern.order-form #content .paper-type-card strong {
		font-size: 13px;
	}

	.form-modern.order-form #content .orientation-card-list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.form-modern.order-form #content .orientation-card {
		padding: 12px;
	}

	.form-modern.order-form #content .orientation-image-wrap {
		height: 122px;
		margin-bottom: 8px;
	}

	.form-modern.order-form #content .orientation-card img {
		max-height: 94px;
	}

	.form-modern.order-form #content .orientation-card img.orientation-img-tate {
		max-height: 118px;
	}

	.form-modern.order-form #content .order-option-group {
		margin-top: 12px;
		padding: 0 12px 12px;
		border-radius: 10px;
	}

	.form-modern.order-form #content .order-option-heading {
		margin: 0 -12px 11px;
		padding: 9px 12px;
	}

	.form-modern.order-form #content .order-option-item,
	.form-modern.order-form #content .order-option-item-with-select {
		grid-template-columns: 48px 38px 1fr;
		gap: 6px 8px;
	}

	.form-modern.order-form #content .option-price {
		grid-column: 3 / 4;
		white-space: normal;
	}

	.form-modern.order-form #content .order-option-item-with-select .option-select,
	.form-modern.order-form #content .order-option-item-with-select .option-name,
	.form-modern.order-form #content .order-option-item-with-select .option-price {
		grid-column: 1 / -1;
	}

	.form-modern.order-form #content .order-option-item-with-select .option-name {
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
		line-height: 1.6;
	}

	.form-modern.order-form #content .order-option-item-with-select .option-price {
		justify-self: start;
		text-align: left;
	}

	.form-modern.order-form #content .option-select,
	.form-modern.order-form #content .option-select-wide {
		min-width: 0;
		width: 100%;
		max-width: none;
	}

	.form-modern.order-form #content .order-option-item-stacked {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 9px 10px;
	}

	.form-modern.order-form #content .order-option-item-stacked .option-main {
		gap: 3px 8px;
	}

	.form-modern.order-form #content .order-option-item-stacked .option-control {
		grid-template-columns: 48px max-content minmax(0, 1fr);
		gap: 6px 8px;
	}

	.form-modern.order-form #content .order-option-item-select-price-right .option-control {
		grid-template-columns: 48px max-content minmax(0, 1fr);
	}

	.form-modern.order-form #content .order-option-item-select-price-right .option-control .option-select {
		grid-column: 3;
		width: 100%;
		max-width: none;
	}

	.form-modern.order-form #content .order-option-item-select-price-right .option-control .option-price {
		grid-column: 3;
		justify-self: end;
		text-align: right;
		white-space: normal;
	}

	.form-modern.order-form #content .order-option-item-tube .option-control {
		grid-template-columns: 48px max-content 1fr;
	}

	.form-modern.order-form #content .order-option-item-tube .option-control .option-price {
		justify-self: end;
		text-align: right;
		white-space: nowrap;
	}

	.form-modern.order-form #content .order-option-item-holder .option-control {
		grid-template-columns: 48px max-content minmax(0, 1fr);
	}

	.form-modern.order-form #content .order-option-item-holder .option-control .option-select {
		grid-column: 3;
		width: 100%;
		max-width: none;
	}

	.form-modern.order-form #content .order-option-item-holder .option-control .option-price {
		grid-column: 3;
		justify-self: end;
		text-align: right;
		white-space: nowrap;
	}

	.form-modern.order-form #content .order-option-item-stacked .option-control .option-select {
		grid-column: auto;
		width: 100%;
		max-width: none;
	}

	.form-modern.order-form #content .order-option-item-stacked .option-main .option-name {
		grid-column: auto;
		line-height: 1.55;
	}

	.form-modern.order-form #content .order-option-item-stacked .option-caption {
		font-size: 12px;
	}

	.form-modern.order-form #content .option-qty,
	.form-modern.order-form #content input.option-qty[type="text"] {
		width: 48px;
		min-width: 48px;
	}

	#content .form-modern #submit_button1,
.form-modern #content #submit_button1 {
		max-width: none;
		padding: 16px 20px;
	}

	#content table.aaabbb,
	#content table.aaabbb tbody,
	#content table.aaabbb tr,
	#content table.aaabbb th,
	#content table.aaabbb td {
	display: block;
	width: 100%;
	box-sizing: border-box;
	}

	#content table.aaabbb tr {
	margin-bottom: 10px;
	}

	#content table.aaabbb th {
	padding: 8px 10px;
	text-align: left;
	line-height: 1.5;
	}

	#content table.aaabbb td.td_head {
	text-align: left;
	border-right-width: 1px;
	border-bottom: none;
	}

	#content table.aaabbb td.td_odd {
	background-repeat: repeat;
	}

	#content table.aaabbb input[type="text"],
	#content table.aaabbb input[type="file"],
	#content table.aaabbb textarea {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	}

	#content table.aaabbb input[type="file"] {
	padding: 8px 0;
	}

	input#submit_button1,
	input#submit_button2 {
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 10px auto 0;
	padding: 14px 20px;
	font-size: 18px !important;
	border-radius: 4px;
	}

	#hp_base {
	width: 100%;
	min-width: 320px;
	}

	header {
	width: 98%;
	padding-top: 5px;
	padding-right: 1%;
	padding-bottom: 5px;
	padding-left: 1%;
	}

	#logo {
	float: left;
	}

	#info {
	float: left;
	margin-bottom: 10px;
	margin-left: 3%;
	}

	#h_list {
	clear: both;
	}

	#top_img .top_txt {
	left: 5%;
	font-size: 14px;
	line-height: 14px;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 5%;
	width: 85%;
	}

	#top_img .top_txt span {
	font-size: 8px;
	}

	#main {
	width: 98%;
	background-color: #FFFFFF;
	padding-top: 1%;
	padding-right: 1%;
	padding-left: 1%;
	}

	#main .box3 {
	width: 62%;
	height: auto;
	}

	#content .box3 {
	width: 100%;
	}

	#content .box4 {
	margin-left: 2%;
	float: right;
	}

	#content .box6 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box6_sub {
	width: 91%;
	margin-left: 2%;
	}

	#content .box9 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box10 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box11 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box15 {
	width: 47%;
	float: left;
	text-align: center;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	}

	/* トップページ：注文・お問い合わせボタン（760px以下） */
	#content .top-action-buttons {
	display: block;
	}

	#content .top-action-btn {
	width: 100%;
	max-width: 100%;
	margin-bottom: 10px;
	font-size: 19px;
	}

	.box3 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}

	.box4 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}

	#content .fb-like {
	margin-left: 0;
	}

	#content .sb-fb-like2 {
	margin-left: 0;
	}
}

@media screen and (max-width: 759px) {
	#content .box33 {
	margin-left: 2%;
	}

	/* ===== テンプレート無料ダウンロードページ：760px以下 ===== */
	#content .box5 {
	text-align: center;
	width: 45%;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 1px solid #EEE8DF;
	float: left;
	margin-bottom: 29px;
	background-color: #F9F7F4;
	margin-right: 6px;
	padding-right: 6px;
	padding-left: 6px;
	}

	#content .box18 {
	width: 87%;
	}

	#content .box7 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box8 {
	width: 91%;
	margin-left: 2%;
	}

	#content .box5 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}

	.box6 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}

	.box7 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}

	.box8 .btn a {
	font-size: 10px;
	line-height: 16px;
	width: 80px;
	}}

/* =========================================================
   420px以下
   ========================================================= */

@media only screen and (max-width: 420px) {
	footer {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 6px 6px 2px;
		box-sizing: border-box;
	}

	#footer .footer-company-box,
	footer .footer-company-box {
		width: calc(100% - 12px);
		margin-bottom: 2px;
		padding-bottom: 8px;
	}

	footer .prbox {
		margin-top: 2px;
	}
}

/* PC：ヘッダー説明文の重なり防止 */

@media screen and (min-width: 760px) {
	header h2 {
		display: block;
		position: absolute;
		top: 177px;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 14px;
		line-height: 1.45;
		color: #4A2A00;
		z-index: 1;
	}
}

/* タブレット・スマホ：ヘッダーリンクをロゴ下の1行ボタンにする */
@media screen and (max-width: 759px) {
	header #h_list {
		display: flex;
		justify-content: center;
		gap: 5px;
		position: static;
		margin: 12px 0 7px;
		padding: 0 4px;
		text-align: center;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	header #h_list li {
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		font-size: 12px;
		line-height: 1.4;
		flex: 0 0 auto;
	}

	header #h_list li:last-child {
		border-right: none;
	}

	header #h_list a {
		display: block;
		padding: 5px 10px;
		background: #FFF8EF;
		border: 1px solid #D8C590;
		border-radius: 5px;
		color: #5A321F;
		font-weight: bold;
		text-decoration: none;
	}

	header h1 {
		display: block;
		position: static;
		margin: 0 0 6px;
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
	}

	header #logo {
		display: block;
		width: 100%;
		max-width: 700px;
		height: auto;
		margin: 0 auto 5px;
	}
}

/* 既存CSS下部にあったテンプレート枠レスポンシブ調整を、レスポンシブカテゴリ内へ移動。 */
@media screen and (max-width: 1000px) {
	.form-modern.order-form #content .template-type-card-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 760px) {
	.form-modern.order-form #content .template-type-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-modern.order-form #content .template-type-image-link {
		width: 120px;
		height: 150px;
	}

	.form-modern.order-form #content .template-type-image-link img {
		width: auto;
		height: auto;
		max-height: 130px;
	}
}


/* template1/sample1.html専用：見本ページのレスポンシブ調整 */
@media screen and (max-width: 759px) {

	#main .template-sample-preview-card {
		padding: 16px;
	}

	#main .template-sample-detail-card {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 480px) {
	#main .template-sample-action-list {
		align-items: stretch;
		flex-direction: column;
	}

	#main .template-sample-download-button,
	#main .template-sample-back-button,
	#main .template-sample-home-button {
		width: 100%;
	}
}

/* =========================================================
   運用メモ
   =========================================================
   ・新規CSSは最下部へ継ぎ足さず、該当カテゴリへ入れてください。
   ・既存セレクタを再定義する場合は「何を上書きするか」をコメントで明記してください。
   ・次回整理候補：header / nav#g_navi / table / スマホ用media query。
   ========================================================= */


/* template1/index.html専用：テンプレートページのレスポンシブ調整 */
@media screen and (max-width: 759px) {
	#content .template-download-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#content .template-hero-feature-list {
		grid-template-columns: 1fr;
	}

	#content .template-hero h2,
	#content .template-download-section h3,
	#content .template-notice-section h3,
	#content .template-related-section h3 {
		font-size: 23px;
	}

	#content .template-related-button-list {
		flex-direction: column;
	}

	#content .template-main-button,
	#content .template-sub-button {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	#content .template-download-card-list {
		grid-template-columns: 1fr;
	}

	#content .template-hero,
	#content .template-download-section,
	#content .template-notice-section,
	#content .template-related-section {
		padding: 18px 15px;
	}

	#content .template-sample-link {
		min-height: 190px;
	}

	#content .template-sample-link img {
		max-height: 180px;
	}
}