@charset "UTF-8";
/* ==========================================================
   榊屋.com フォーム共通 スマホ対応CSS（form-sp.css）
   対象：contact / sample / order / simulation
   ・PC表示（768px以上）は既存デザインのまま。追加要素は非表示。
   ・767px以下で /sp/ と同じ見た目（白ヘッダー＋緑見出し＋緑フッター）に切り替え。
   ・各ページの既存CSS（contact.css 等）と base.css の「後」に読み込むこと。
   ========================================================== */

/* ---------- PCでは非表示にするスマホ用パーツ ---------- */
.spOnly,
.spTitle,
.spFlow {
	display: none;
}

/* ---------- プルダウン（PC・スマホ共通） ----------
   旧来の細いプルダウンを、高さのある今風の見た目に統一 */
#wrapper select {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: auto;
	min-height: 40px;
	padding: 8px 36px 8px 12px;
	font-size: 15px;
	line-height: 1.4;
	text-indent: 0;
	color: #403f41;
	vertical-align: middle;
	border: 1px solid #a7a9ac;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23006737'/%3E%3C/svg%3E") right 12px center no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
#wrapper select::-ms-expand {
	display: none;
}
#wrapper select:focus {
	outline: none;
	border-color: #006737;
	box-shadow: 0 0 0 3px rgba(0, 103, 55, 0.15);
}
#wrapper select.err {
	border-color: #F30;
}
/* 住所の都道府県（PCは住所入力と横並び） */
.formBox table td select.inputStyle2 {
	width: 116px; /* 既存の幅（100px＋余白）に合わせ、住所欄と横並びを維持 */
	padding: 6px 26px 6px 10px;
	min-height: 34px;
	background-position: right 9px center;
}
/* 配送申込トップ：都道府県（既存の大きいサイズを維持） */
#wrapper select.selectTodoufuken {
	width: 500px;
	min-height: 50px;
	font-size: 18px;
	background-color: #fffef6;
	border-color: #808184;
}
/* シミュレーション：都道府県 */
#step03Box select[name="todoufuken"] {
	width: 240px;
	min-height: 44px;
	font-size: 18px;
}

/* ---------- 入力欄（PC・スマホ共通） ----------
   テキスト入力・複数行入力を、プルダウンと揃えた今風の見た目に統一
   ※幅は各ページの既存CSSの指定をそのまま使う */
#wrapper input[type="text"],
#wrapper input[type="email"],
#wrapper input[type="tel"],
#wrapper textarea {
	height: 38px;
	padding: 0 10px;
	font-size: 15px;
	line-height: 1.4;
	color: #403f41;
	vertical-align: middle;
	border: 1px solid #a7a9ac;
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: border-color .15s, box-shadow .15s;
	transition: border-color .15s, box-shadow .15s;
}
#wrapper textarea {
	height: 120px;
	padding: 8px 10px;
	line-height: 1.6;
	resize: vertical;
}
#wrapper input[type="text"]::placeholder,
#wrapper textarea::placeholder {
	color: #a7a9ac;
}
#wrapper input[type="text"]:focus,
#wrapper input[type="email"]:focus,
#wrapper input[type="tel"]:focus,
#wrapper textarea:focus {
	outline: none;
	border-color: #006737;
	box-shadow: 0 0 0 3px rgba(0, 103, 55, 0.15);
}
/* 入力チェックでエラーになった欄 */
#wrapper input.err,
#wrapper textarea.err {
	border-color: #F30;
	color: #F30;
	background-color: #fff8f5;
}
#wrapper input.err:focus,
#wrapper textarea.err:focus {
	box-shadow: 0 0 0 3px rgba(255, 51, 0, 0.15);
}
/* ラジオ・チェックボックス（色をサイトの緑に） */
#wrapper input[type="radio"],
#wrapper input[type="checkbox"] {
	accent-color: #006737;
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	cursor: pointer;
}
/* 住所欄：内側余白が増えた分だけ幅を詰め、都道府県と横並びを維持（既存350px→344px） */
.formBox table td input.inputStyle3 {
	width: 344px;
}
/* 住所の都道府県プルダウンを入力欄と同じ高さに */
.formBox table td select.inputStyle2 {
	min-height: 40px;
}

/* 入力欄の中に表示した入力例（PC・スマホ共通）
   枠の外の「例：〜」は非表示（form-sp.js で is-ph を付与） */
.formBox table td span.is-ph {
	display: none;
}
#wrapper input::placeholder,
#wrapper textarea::placeholder {
	color: #a7a9ac;
	opacity: 1;
}

/* ---------- 画面内メッセージ・二重送信防止（PC・スマホ共通／form-ux.js） ---------- */
.formAlert {
	display: none;
	margin: 20px auto 0;
	padding: 12px 16px 12px 44px;
	max-width: 695px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #be1e2d;
	border-radius: 4px;
	background: #fff5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23be1e2d'/%3E%3Cpath d='M9 4h2v8H9zM9 14h2v2H9z' fill='%23fff'/%3E%3C/svg%3E") 14px center no-repeat;
	color: #be1e2d;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}
.formAlert.is-show {
	display: block;
	-webkit-animation: formAlertIn .25s ease-out;
	animation: formAlertIn .25s ease-out;
}
@-webkit-keyframes formAlertIn { from { opacity: 0; -webkit-transform: translateY(-4px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes formAlertIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.douiBox.is-error {
	border-color: #be1e2d;
	background-color: #fff5f5;
}

/* ---------- ボタン（PC・スマホ共通：画像ボタン → CSSボタン） ----------
   文字は form-sp.js が画像の alt から作成（.spBtnLabel）
   押下後は form-ux.js が .is-loading（くるくる）を付け、二度押しを止める */
#btnArea,
#btnArea2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: auto;
	margin: 30px auto 35px;
}
#btnArea > div,
#btnArea2 > div {
	float: none;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
}
#btnArea a,
#btnArea2 a {
	display: block;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
#btnArea a img,
#btnArea2 a img {
	display: none;
}
#btnArea .spBtnLabel,
#btnArea2 .spBtnLabel {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-width: 340px;
	min-height: 60px;
	padding: 10px 30px;
	border-radius: 6px;
	background: #be1e2d;
	box-shadow: 0 3px 0 #8e1521;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .04em;
	text-align: center;
	cursor: pointer;
	-webkit-transition: background-color .15s, box-shadow .15s, transform .15s, opacity .15s;
	transition: background-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
#btnArea a:hover .spBtnLabel,
#btnArea2 a:hover .spBtnLabel {
	background-color: #a81a27;
}
#btnArea a:active .spBtnLabel,
#btnArea2 a:active .spBtnLabel {
	box-shadow: 0 1px 0 #8e1521;
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
}
/* 戻るボタン */
#btnArea .spBtnLabel.is-back {
	min-width: 240px;
	background: #fff;
	border: 1px solid #a7a9ac;
	box-shadow: 0 3px 0 #d1d3d4;
	color: #58595b;
	font-weight: normal;
}
#btnArea a:hover .spBtnLabel.is-back {
	background-color: #f5f5f5;
}
#btnArea a:active .spBtnLabel.is-back {
	box-shadow: 0 1px 0 #d1d3d4;
}
/* 処理中（押した直後） */
#btnArea a.is-loading,
#btnArea2 a.is-loading,
#btnArea a.is-disabled,
#btnArea2 a.is-disabled {
	pointer-events: none;
	cursor: default;
}
#btnArea a.is-loading .spBtnLabel,
#btnArea2 a.is-loading .spBtnLabel {
	background-color: #c9545f;
	box-shadow: 0 3px 0 #a0434c;
	cursor: progress;
}
#btnArea a.is-loading .spBtnLabel:before,
#btnArea2 a.is-loading .spBtnLabel:before {
	content: "";
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 3px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	-webkit-animation: btnSpin .8s linear infinite;
	animation: btnSpin .8s linear infinite;
}
#btnArea a.is-disabled .spBtnLabel {
	opacity: .45;
}
@-webkit-keyframes btnSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	#btnArea a.is-loading .spBtnLabel:before,
	#btnArea2 a.is-loading .spBtnLabel:before {
		-webkit-animation-duration: 2.4s;
		animation-duration: 2.4s;
	}
}
#wrapper select.is-error {
	border-color: #be1e2d;
	background-color: #fff5f5;
}

@media screen and (max-width: 767px) {

	/* ---------- ベース ---------- */
	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		font-size: 14px;
		color: #403f41;
		background: #fff;
	}
	#container {
		width: auto;
		margin: 0;
	}
	#wrapper img,
	#pop-up img {
		max-width: 100%;
		height: auto;
	}
	/* 本文幅いっぱいの説明画像（流れ図など）に左右の余白 */
	#wrapper > div > img,
	#wrapper > div > picture {
		display: block;
		margin: 0 12px;
	}
	#wrapper > div > picture img {
		display: block;
		width: 100%;
	}
	#wrapper *,
	#pop-up * {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* PC用ヘッダー・フッターを隠す */
	#header,
	#footer {
		display: none;
	}

	/* ---------- スマホ用ヘッダー（/sp/ と同じ見た目） ---------- */
	body {
		padding-top: 45px; /* 固定ヘッダーの高さ分 */
	}
	#spHeader {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #fff;
		box-shadow: rgba(0, 0, 0, 0.2) 0 0 3px 3px;
	}
	#spHeader .spHeaderBar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 45px;
	}
	#spHeader .spLogo {
		display: block;
		line-height: 0;
	}
	#spHeader .spLogo img {
		width: 160px;
		height: 45px;
	}
	#spHeader .spMenuBtn {
		display: block;
		width: 45px;
		height: 45px;
		padding: 0;
		margin: 0;
		border: 0;
		background: none;
		cursor: pointer;
		line-height: 0;
	}
	#spHeader .spMenuBtn img {
		width: 45px;
		height: auto;
	}
	#spMenu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0;
		background: #fff;
		border-top: 1px solid #006737;
	}
	#spHeader.is-open #spMenu {
		display: block;
		max-height: calc(100vh - 45px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#spMenu li a {
		display: block;
		padding: 10px 55px 10px 30px;
		border-bottom: 1px solid #e6e6e7;
		background: url(/sp/img/arr_menu.png) right center no-repeat;
		background-size: 25px auto;
		font-size: 16px;
		color: #403f41;
		text-decoration: none;
	}

	/* ---------- ページ見出し（h1画像 → 緑帯テキスト） ---------- */
	#wrapper h1 {
		margin: 0;
	}
	#wrapper h1 img {
		display: none;
	}
	#wrapper h1 .spTitle {
		display: block;
		background: #006934 url(/sp/img/bg_green.png) center bottom repeat;
		background-size: 24px auto;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		line-height: 45px;
		padding: 0 15px;
	}
	/* シミュレーションはメインビジュアルなので画像のまま縮小表示 */
	#wrapper h1.spKeepImg img {
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	#wrapper h1.spKeepImg .spTitle {
		display: none;
	}

	/* ---------- 本文エリア ---------- */
	.inner {
		border: 0;
		margin: 0;
	}
	#mainContents {
		width: auto;
		margin: 0;
		padding: 15px 12px 30px;
	}
	#wrapper > p.text01,
	#wrapper > p.text04 {
		margin: 15px 12px;
	}
	.text01,
	.text04 {
		font-size: 14px;
		line-height: 1.7;
	}
	.text01 br,
	.text04 br {
		display: none;
	}
	.text02 {
		margin: 20px auto;
	}
	.text03 {
		margin: 15px 0;
		line-height: 1.7;
	}
	.text03 br {
		display: none;
	}
	.text05 {
		margin: 25px 0 8px;
		font-size: 16px;
		font-weight: bold;
		color: #006737;
		border-left: 4px solid #006737;
		padding-left: 8px;
	}
	.subLogo {
		width: auto;
		margin: 30px 0 10px;
		text-align: center;
	}
	.subLogo div img {
		display: inline-block;
	}

	/* ---------- ステップ表示（画像 → テキスト） ---------- */
	#flow {
		margin: 0 0 15px;
	}
	#flow > img {
		display: none;
	}
	#flow .spFlow {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		border: 1px solid #d1d3d4;
	}
	#flow .spFlow li {
		flex: 1 1 0;
		position: relative;
		padding: 8px 2px 8px 6px;
		background: #f7f6f2;
		color: #a7a9ac;
		font-size: 11px;
		font-weight: bold;
		line-height: 1.3;
		text-align: center;
	}
	#flow .spFlow li + li {
		border-left: 1px solid #d1d3d4;
	}
	#flow .spFlow li span {
		display: block;
		font-size: 16px;
		line-height: 1.1;
		font-weight: normal;
	}
	#flow .spFlow li.current {
		background: #006934 url(/sp/img/bg_green.png) center repeat;
		background-size: 24px auto;
		color: #fff;
	}
	#flow2 {
		margin: 0 0 10px;
	}

	/* ---------- エラーボックス ---------- */
	#errorBox {
		width: auto;
		margin: 20px 0;
	}
	#errorBox dt {
		font-size: 15px;
	}
	#errorBox dt span {
		display: block;
		font-size: 12px;
		font-weight: normal;
	}
	#errorBox dd {
		font-size: 14px;
		padding: 0 10px 0 30px;
	}

	/* ---------- 入力テーブル（横並び → 縦積み） ---------- */
	.formBox {
		margin: 15px 0;
	}
	.formBox table,
	.formBox tbody,
	.formBox tr,
	.formBox th,
	.formBox td,
	#selectcourse table,
	#selectcourse tbody,
	#selectcourse tr,
	#selectcourse th,
	#selectcourse td {
		display: block;
		width: auto;
	}
	.formBox table tr {
		position: relative;
	}
	.formBox table th,
	#selectcourse table th {
		width: auto;
		padding: 9px 12px;
		font-size: 14px;
		line-height: 21px;
		border: 0;
		overflow: hidden;
	}
	.formBox table th p {
		width: auto;
		float: left;
	}
	.formBox table th p br {
		display: none;
	}
	.formBox table th img {
		float: right;
		width: 40px;
		height: auto;
		margin-top: 1px;
	}
	.formBox table td,
	.formBox table td.firsttd {
		padding: 10px 0 18px;
		border-top: 0;
		border-bottom: 0;
		font-size: 15px;
		word-break: break-all;
	}
	/* 入力OK/NGマーク：見出し帯の右側（必須マークの左）に表示 */
	.formBox table td.check_mark {
		position: absolute;
		top: 12px;
		right: 60px;
		padding: 0 !important;
		border: 0;
	}
	.formBox table td.check_mark img {
		display: block;
		background: #fff;
		border-radius: 50%;
	}
	.formBox table td.check_mark:empty {
		display: none;
	}

	/* 入力欄 */
	#wrapper input[type="text"],
	#wrapper input[type="email"],
	#wrapper input[type="tel"] {
		height: 46px;
	}
	/* iPhoneは16px未満の入力欄をタップすると画面を拡大するため、スマホでは必ず16px以上 */
	#wrapper input[type="text"],
	#wrapper input[type="email"],
	#wrapper input[type="tel"],
	#wrapper textarea,
	#wrapper select {
		font-size: 16px;
	}
	.formBox table td input.inputStyle1,
	.formBox table td input.inputStyle3,
	.formBox table td textarea {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 10px;
		font-size: 16px; /* iOSで入力時にズームしない */
		border: 1px solid #a7a9ac;
		border-radius: 4px;
		background: #fff;
		-webkit-appearance: none;
		appearance: none;
	}
	/* プルダウン（スマホは全幅・16px） */
	#wrapper select,
	#wrapper select.selectTodoufuken,
	#step03Box select[name="todoufuken"],
	.formBox table td select.inputStyle2 {
		display: block;
		width: 100%;
		min-height: 46px;
		padding: 10px 36px 10px 12px;
		font-size: 16px;
		margin: 0;
	}
	.formBox table td select.inputStyle2 {
		margin-bottom: 8px;
	}
	.formBox table td textarea {
		height: 140px;
	}
	.formBox table td span {
		display: block;
		margin: 5px 0 0;
		font-size: 12px;
	}
	.formBox table td label {
		display: block;
		padding: 6px 0;
		font-size: 15px;
	}
	.formBox table td label input[type="radio"] {
		width: 18px;
		height: 18px;
		vertical-align: -3px;
	}
	/* ラジオのグループ（お届け先・お支払い方法） */
	.formBox table th.border2,
	.formBox table td.border2 {
		border: 1px solid #8f8f8f;
	}
	.formBox table th.border2 {
		border-bottom: 0;
	}
	.formBox table td.border2 {
		padding: 8px 12px 12px;
		margin-bottom: 10px;
	}
	.formBox table td.border2 > span {
		display: block;
		margin: 0;
	}
	.formBox table td.border2 > span label {
		display: block;
	}
	.formBox .ginkouText,
	.formBox .daibikiText {
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.6;
	}
	.formBox .ginkouText br,
	.formBox .daibikiText br {
		display: none;
	}
	.formBox table td.check_radio {
		top: 12px;
	}
	.selectTable {
		margin: 10px 0;
	}

	/* バリデーションのエラーメッセージ（入力欄の下に出る） */
	.formError {
		display: block;
		width: 100%;
	}
	.formError .formErrorContent {
		width: auto !important;
		padding: 4px 0 0;
		font-size: 13px;
	}
	.formError .errMsg {
		margin-left: 0;
		text-indent: 0;
	}

	/* 同意チェック */
	.douiBox {
		width: auto;
		margin: 12px 0;
		padding: 12px;
		font-size: 15px;
		line-height: 1.6;
	}
	.douiBox input[type="checkbox"] {
		width: 20px;
		height: 20px;
		vertical-align: -4px;
	}

	/* 個人情報（iframe） */
	#privacyBox iframe {
		display: block;
		width: 100%;
		height: 200px;
		margin: 0;
		border: 1px solid #a7a9ac;
	}

	.formAlert {
		margin: 20px 0 0;
		font-size: 14px;
	}
	/* ---------- ボタン（スマホ：全幅・縦並び。確認画面は送信を上、戻るを下） ---------- */
	#btnArea,
	#btnArea2 {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
		margin: 25px 0 10px;
	}
	#btnArea .spBtnLabel,
	#btnArea2 .spBtnLabel,
	#btnArea .spBtnLabel.is-back {
		min-width: 0;
		width: 100%;
		min-height: 54px;
		padding: 10px 12px;
		font-size: 16px;
	}
	#btnArea .spBtnLabel.is-back {
		min-height: 48px;
	}

	/* ---------- 配送申込：コース・料金 ---------- */
	#selectcourse {
		margin: 10px 0 0;
	}
	#selectcourse table {
		margin: 8px 0;
		border: 1px solid #8f8f8f;
	}
	#selectcourse table th,
	#selectcourse table td {
		border: 0;
	}
	#selectcourse table td {
		padding: 10px 12px;
		font-size: 16px;
		min-height: 1em;
	}
	.courseBox,
	a .courseBox {
		width: auto;
		padding: 0;
		margin: 0 0 12px;
	}
	.courseBox .image {
		width: auto;
		float: none;
		padding: 10px;
	}
	.courseBox .price {
		float: none;
		width: auto;
		margin: 0;
		padding: 0 10px 12px;
		font-size: 34px;
		line-height: 1.3;
	}
	.courseBox .price img {
		width: 220px;
	}
	.courseBox .daibiki {
		font-size: 16px;
	}
	.courseBox .daibiki br {
		display: none;
	}
	#chuuiText {
		padding: 14px 14px 6px;
		font-size: 13px;
		line-height: 1.7;
	}
	.otherplan {
		width: auto;
		margin: 0 12px 30px;
	}
	.otherplan .planTitle {
		margin: 0;
		padding: 14px 12px;
		font-size: 16px;
	}
	.otherplan #planBox {
		margin: 0 10px 10px;
	}

	/* ---------- 料金シミュレーション ---------- */
	#step01,
	#step02,
	#step03 {
		height: auto;
		margin: 0 0 12px;
		padding: 12px;
		background: #fff !important;
		border: 1px solid #d1d3d4;
		border-radius: 6px;
	}
	#step01.error,
	#step02.error,
	#step03.error {
		background: #fffde7 !important;
	}
	#step01Box,
	#step02Box,
	#step03Box {
		width: auto;
		padding: 0;
	}
	#step01 h2,
	#step02 h2,
	#step03 h2 {
		margin: 0 0 10px;
		padding: 6px 10px;
		font-size: 15px;
		border-radius: 4px;
	}
	#step01 h2:before,
	#step02 h2:before,
	#step03 h2:before {
		display: inline-block;
		margin-right: 8px;
		padding: 0 7px;
		border-radius: 3px;
		background: #006934;
		color: #fff;
		font-size: 12px;
		line-height: 20px;
		vertical-align: 1px;
	}
	#step01 h2:before { content: "STEP1"; }
	#step02 h2:before { content: "STEP2"; }
	#step03 h2:before { content: "STEP3"; }
	#step01Box label {
		display: block;
		font-size: 16px;
		line-height: 1.5;
		padding: 6px 0;
	}
	#step01Box label input {
		width: 18px;
		height: 18px;
		vertical-align: -3px;
	}
	#step02 ul {
		display: flex;
		gap: 6px;
	}
	#step02 li,
	#step02 li.sakaki-1tsui,
	#step02 li.sakaki-2tsui,
	#step02 li.sakaki-3tsui {
		flex: 1 1 0;
		width: auto;
		float: none;
		margin: 0;
		cursor: pointer;
	}
	#step02 li img {
		display: block;
		width: 100%;
	}
	/* タップ時のhover画像ずれ防止（選択状態は既存JSが画像を差し替える） */
	.sakaki-1tsui:hover,
	.sakaki-2tsui:hover,
	.sakaki-3tsui:hover {
		background: none !important;
	}
	.sakaki-1tsui:hover img,
	.sakaki-2tsui:hover img,
	.sakaki-3tsui:hover img {
		visibility: visible !important;
	}
	#step03Box #selectArea {
		padding: 10px;
	}
	#chuuiBox {
		width: auto;
		margin: 20px 0 0;
		padding: 12px 12px 0;
		font-size: 13px;
		line-height: 1.7;
	}
	#chuuiBox br {
		display: none;
	}

	/* 料金結果ポップアップ（colorbox） */
	#pop-up {
		width: auto;
		padding: 18px 0;
		border-width: 2px;
	}
	#pop-up #todokesaki {
		font-size: 22px;
		margin-bottom: 10px;
	}
	#pop-up #course {
		padding: 0 10px;
	}
	#pop-up #priceBox {
		padding: 14px 15px;
		margin: 12px 0;
	}
	#pop-up #priceBox #priceLeft,
	#pop-up #priceBox #priceRight {
		float: none;
		width: auto;
		margin: 0;
	}
	#pop-up #priceBox #priceLeft img {
		width: 220px;
	}
	#pop-up #priceBox #priceRight {
		margin-top: 10px;
	}
	#pop-up #priceBox #priceRight p {
		font-size: 20px;
	}
	#pop-up #priceBox #priceRight p span {
		font-size: 150%;
	}
	#pop-up #btnArea2 {
		margin: 0 15px;
	}

	/* ---------- スマホ用フッター（/sp/ と同じ見た目） ---------- */
	#spFooter {
		display: block;
		background: #006934 url(/sp/img/bg_green.png) center bottom repeat;
		background-size: 24px auto;
		color: #403f41;
		font-size: 12px;
		line-height: 1.6;
	}
	#spFooter .fBtn {
		padding: 10px;
	}
	#spFooter .fBtn a {
		display: block;
		background: #fff;
		border-radius: 3px;
		color: #006737;
		text-align: center;
		line-height: 40px;
		text-decoration: none;
	}
	#spFooter .fBtn a span {
		display: inline-block;
		padding-right: 30px;
		background: url(/sp/img/icon_totop.png) right center no-repeat;
		background-size: 11px auto;
	}
	#spFooter .fMenu {
		background: #fff;
		padding: 10px 0;
		text-align: center;
	}
	#spFooter .fLogo {
		padding: 10px 0 20px;
	}
	#spFooter .fLogo img {
		width: 152px;
		height: auto;
	}
	#spFooter ul {
		list-style: none;
		margin: 0;
		padding: 0;
		letter-spacing: -.4em;
	}
	#spFooter ul li {
		display: inline-block;
		line-height: 2;
		letter-spacing: normal;
	}
	#spFooter ul li a {
		color: #403f41;
		text-decoration: none;
	}
	#spFooter ul li:after {
		content: "";
		border-right: 1px solid #403f41;
		padding-left: 6px;
		margin-right: 6px;
	}
	#spFooter ul:before {
		content: "";
		border-left: 1px solid #403f41;
		margin-right: 6px;
	}
	#spFooter .spCopyright {
		padding: 10px;
		color: #fff;
		font-size: 10px;
		text-align: center;
	}
}