@charset "utf-8";
/* ============================================================
   「ゆがまーず」お申込みページ専用スタイル
   ・既存サイト共通の /style.css を土台に、本ページ固有の
     レイアウト（本文・案内ボックス・申込フォーム）を追加する。
   ・基調色は既存フォーム（form.html）に合わせてピンク系 #ed8da9。
   ・本ページはPC専用想定のため、固定幅レイアウトとする。
   ============================================================ */

/* 本文エリア（#container 1000px 内に配置） */
#yugamazu_main {
	width: 860px;
	margin: 20px auto 40px;
	text-align: left;
	color: #333;
	line-height: 1.7;
	font-size: 14px;
}

/* ページ見出し */
.yugamazu_title {
	font-size: 26px;
	font-weight: bold;
	color: #d35c7a;
	text-align: center;
	padding: 10px 0 16px;
	margin: 0 0 20px;
	border-bottom: 3px solid #ed8da9;
}

/* 商品写真 */
.yugamazu_photos {
	text-align: center;
	margin-bottom: 28px;
}
.yugamazu_photos img {
	margin: 0 8px;
	border: 1px solid #ccc;
	vertical-align: top;
}

/* ------------------------------------------------------------
   原稿（お支払い案内）ボックス
   ------------------------------------------------------------ */
.yugamazu_info {
	border: 2px solid #ed8da9;
	border-radius: 6px;
	padding: 18px 24px 8px;
	margin-bottom: 36px;
	background: #fff7f9;
}
.yugamazu_info h2 {
	font-size: 17px;
	font-weight: bold;
	color: #c84e6e;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #ed8da9;
	line-height: 1.5;
}

/* 案内項目（①②③） */
.info_list {
	margin: 0;
}
.info_list dt {
	font-weight: bold;
	font-size: 15px;
	color: #333;
	margin-top: 12px;
	/* 共通CSS（style.css の全体 dt 指定）が Q&A 用アイコン画像・height:25px を
	   全 dt に強制するため、本ボックスでは明示的に打ち消す。 */
	background-image: none;
	height: auto;
	padding: 4px 0 4px 10px;
	border-left: 6px solid #ed8da9;
}
.info_list dd {
	/* 共通CSS（style.css の全体 dd 指定）が Q&A 用アイコン画像・padding-left:30px を
	   全 dd に強制するため、本ボックスでは明示的に打ち消す。 */
	background-image: none;
	margin: 6px 0 12px 18px;
	padding: 0 0 6px 0;
}
.info_list dt .num {
	display: inline-block;
	color: #d35c7a;
	margin-right: 6px;
}
.info_list dd strong {
	color: #c0392b;
	font-size: 16px;
}
.info_list .note {
	display: inline-block;
	font-size: 13px;
	color: #777;
	line-height: 1.6;
	margin-top: 4px;
}
.info_list .mark {
	color: #d35c7a;
	font-weight: bold;
}

/* ------------------------------------------------------------
   申込フォーム
   ------------------------------------------------------------ */
.yugamazu_form_area h2 {
	font-size: 19px;
	font-weight: bold;
	color: #fff;
	background: #ed8da9;
	padding: 8px 14px;
	margin: 0 0 14px;
	border-radius: 4px;
}
.form_lead {
	margin-bottom: 14px;
	font-size: 13px;
}
.must_guide {
	font-size: 12px;
	color: #777;
}

/* 「必須」ラベル */
.must {
	display: inline-block;
	background: #c0392b;
	color: #fff;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
	padding: 3px 6px;
	margin-left: 6px;
	border-radius: 3px;
	vertical-align: middle;
}

/* 入力テーブル（form.html の .entry_form を踏襲したピンク罫線） */
.order_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}
.order_table th,
.order_table td {
	padding: 10px 12px;
	border: 1px solid #ed8da9;
	text-align: left;
	vertical-align: middle;
	font-size: 14px;
}
.order_table th {
	background-color: #fbe4ea;
	color: #333;
	font-weight: bold;
	width: 230px;
	white-space: nowrap;
}
.order_table input[type="text"],
.order_table input[type="number"],
.order_table select {
	border: 1px solid #cf99ab;
	padding: 5px 6px;
	font-size: 14px;
	border-radius: 3px;
}
.order_table input[type="text"]:focus,
.order_table input[type="number"]:focus,
.order_table select:focus {
	outline: none;
	border-color: #d35c7a;
	background: #fffafc;
}

/* ご注文内容の小見出し */
.order_subhead {
	font-size: 16px;
	font-weight: bold;
	color: #c84e6e;
	margin: 24px 0 8px;
	padding-left: 10px;
	border-left: 6px solid #ed8da9;
}

/* 金額表示 */
.price {
	font-weight: bold;
	color: #c0392b;
	font-size: 15px;
}
.total_row th {
	background-color: #ed8da9;
	color: #fff;
}
.total_price {
	font-size: 20px;
}
.over_note {
	color: #c0392b;
	font-size: 12px;
	margin: 6px 0 0;
	padding: 0;
}

/* 送信ボタン */
.submit_area {
	text-align: center;
	margin: 26px 0 10px;
}
.submit_btn {
	font-size: 17px;
	font-weight: bold;
	color: #fff;
	background: #d35c7a;
	border: none;
	border-radius: 5px;
	padding: 14px 48px;
	cursor: pointer;
}
.submit_btn:hover {
	background: #c84e6e;
}
.form_caution {
	text-align: center;
	font-size: 12px;
	color: #777;
}

/* トップへ戻るリンク */
.back_link {
	margin-top: 30px;
	text-align: center;
	font-size: 13px;
}
.back_link a {
	color: #d35c7a;
	text-decoration: none;
}
.back_link a:hover {
	text-decoration: underline;
}