@charset "Shift_JIS";


/* 
基本ユニット
表組みタイプ

セレクトボックス装飾
ラジオボタン・チェックボックス装飾
*/


/* 基本ユニット（FormUnit dl） --------------------------------------------------- */

.FormUnit h2 {
padding: 1.4rem 1.6rem;
font-size: 1.5rem;
line-height: 1;
color: #fff;
background: var(--primary);
}

.FormUnit {
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--base-middle);
}

.FormUnit dt,
.FormUnit dd {
margin: 0;
}

.FormUnit dt {
padding: 1.2rem 1.6rem;
font-size: 1.4rem;
line-height: 1;
background: var(--base-pale);
}

.FormUnit dd  {
padding: 12px 0;
}

.FormUnit dd p {
margin: 0 1.6rem;
font-size: 1.4rem;
line-height: 1.6;
}

.FormUnit .SelectUnit p {
margin-bottom: 10px;
}

.FormUnit .SelectUnit p:last-child {
margin-bottom: 0;
}

.FormUnit .BirthdaySelect select {
width: 20% !important;
}

.FormUnit .BirthdaySelect select:first-child {
width: 30% !important;
}

/* 必須アイコン */
.FormUnit dt span {
display: block;
padding-right: 50px;
padding: 0.2rem 5rem 0.2rem 0;
background: url(../../img/sp/sys/order/Icon_Mandatory.png) no-repeat;
background-position: 100% 48%;
background-size: 40px 19px;
}

/* 商品表示：小 */
.FormUnit .ItemBoxS {
margin: 0 10px;
}


/* 表組みタイプ --------------------------------------------------- */

/* Table1 */
.FormUnit .Table1 th {
border-right: none;
}

/* Table2 */
.FormUnit .Table2 {
border-left: none;
border-top: none;
}

.FormUnit .Table2 th {
border-bottom: none;
}


/* 指示・注意書き等  --------------------------------------------------- */

.FormUnit .Lead {
margin-bottom: 8px !important;
font-size: 1.2rem;
line-height: 1.6em;
font-weight: bold;
}

.FormUnit .NoteUpper {
margin: 0 0 5px 0;
font-size: 86%;
line-height: 1.5em;
}

.FormUnit .NoteMiddle {
margin-top: 5px;
margin-bottom: 5px;
font-size: 86%;
line-height: 1.5em;
}

.FormUnit .NoteLower {
margin: 5px 10px 0 10px;
font-size: 86%;
line-height: 1.5em;
}

.FormUnit .NoteSide {
margin: 0 0 0 5px;
font-size: 86%;
}

/* ガイドリンク  */
.FormUnit .GuideLink {
margin-left: 12px;
font-size: 12px;
font-weight: normal;
}

.FormUnit .GuideLink a {
padding: 0 0 0 15px;
background: url(../../images_rev2/common/icon/Icon_Allow_Blue.png) no-repeat;
background-position: 0 50%;
background-size: 10px 10px;
}

.FormUnit .GuideLink2 {
margin: 0 0 0 15px;
font-size: 12px;
font-weight: normal;
}

.FormUnit .GuideLink2 a {
display: inline-block;
padding: 0 0 0 15px;
color: #fff;
background: url(../../images/sp/common/icon/Icon_LinkAllowCircleWhite.png) no-repeat;
background-position: 0 50%;
background-size: 10px 10px;
}

/* 入力内容注釈  */
.FormUnit .InNote {
margin-top: 12px;
}

.FormUnit .InNote p {
margin-bottom: 5px;
font-size: 12px;
}

.Form_Notice {
padding: 0.8rem 1.6rem;
}

/* アクションボタン  */
.BtnAction {
margin: 4rem 1.6rem 3rem 1.6rem;
}

.BtnAction .BtnNext {
margin-bottom: 2rem;
}

.BtnAction .BtnNext a {
padding: 2.2rem 0;
font-size: 1.8rem;
font-feature-settings: "palt";
}

/* エラーチップ  */
.FormUnit .ErrTip  {
display: inline-block;
margin-bottom: 5px;
background: url(../../img/sp/sys/order/Texture_ErrTipAllow.png) no-repeat;
background-position: 5% 100%;
}

.FormUnit .ErrTip span {
display: inline-block;
margin: 0 0 10px 0;
padding: 10px;
border-radius: 5px;
line-height: 1.6em;
color: #ffffff;
background: #e90000;
}

/* メインリード  */
.FormUnit .LeadMain {
margin: 20px 0 0 0;
font-weight: bold;
}

/* サブリード  */
.FormUnit .LeadSub {
margin: 10px 0 0 0;
}

/* フッターNote  */
.FormUnit .FootNote {
margin: 10px 0 0 0;
}

.FormUnit .FootNote li {
font-size: 86%;
line-height: 1.5em;
}

.FormUnit .NoticeArea {
margin: 10px 10px;
}

.FormUnit .NoticeArea p {
font-size: 86%;
}


/* 入力フィールドのサイズ  */
.FormUnit .InputName {
width: 200px;
}

.FormUnit .InputMail {
width: 350px;
}

.FormUnit .InputZipCode {
width: 50px;
}

.InputAddress1 {
width: 180px;
}

.FormUnit .InputAddress2,
.FormUnit .InputAddress3 {
width: 350px;
}

.FormUnit .InputTel {
width: 50px;
}

.FormUnit .InputComment {
width: 500px;
height: 10em;
}

.FormUnit .InputOther1 {
width: 300px;
}

/* テキスト入力のスタイル  */
.FormUnit input[type=text],
.FormUnit input[type=password],
.FormUnit input[type=tel],
.FormUnit input[type=email],
.FormUnit textarea {
width: 100%;
height: 44px;
padding: 0 10px;
border: 1px solid #b3cce6;
border-radius: 5px 5px;
box-sizing: border-box;
box-shadow: inset 1px 1px 1px 0px #d5d5d5;
font-size: 1.6rem;
line-height: 20px;
vertical-align: middle;
background: #fff;
}

.FormUnit textarea {
width: 95%;
height: 120px;
padding: 8px;
line-height: 1.4em;
}

.FormUnit input[type=image] {
vertical-align: middle;
}

/* ボタン  */
.FormUnit .BtnForm {
width: 100%;
height: 50px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 5px;
color: #fff;
text-indent: -9999px;
}


/* セレクトボックス装飾 --------------------------------------------------- */

.FormUnit select {
width: 100%;
height: 4.8rem;
padding-right: 3rem;
font-size: 1.4rem;
text-indent: 1.6rem;
border: 1px solid var(--primary);
border-radius: 8px;
box-sizing: border-box;
color: var(--base);
background: #fff url(../../images_rev2/common/icon/Icon_SelectBox.png) no-repeat;
background-position: right 1.6rem bottom 50%;
background-size: 1.2rem 1.8rem;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

.SelectBoxS select {
height: 30px;
font-size: 93%;
}


/* ラジオボタン・チェックボックス装飾 --------------------------------------------------- */

.FormUnit input[type=radio],
.FormUnit input[type=checkbox] {
display: none;
margin: 0 0 0 -10px;
}

.FormUnit input[type=radio] + label,
.FormUnit input[type=checkbox] + label {
display: inline-block;
position: relative;
margin-right: 1.4rem;
padding: 0 0 0 3.2rem;
font-size: 1.4rem;
line-height: 1.8;
cursor: pointer;
}

.FormUnit input[type=radio] + label::before,
.FormUnit input[type=checkbox] + label::before {
display: block;
position: absolute;
top: 11px;
left: 0;
width: 2.4rem;
height: 2.4rem;
margin-top: -11px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
content: "";
}

.FormUnit input[type=radio] + label::before {
border: 1px solid var(--base-deep);
border-radius: 100vh;
}

.FormUnit input[type=checkbox] + label::before {
border: 1px solid var(--base-deep);
border-radius: 4px;
}

.FormUnit input[type=radio]:checked + label::before,
.FormUnit input[type=checkbox]:checked + label::before {
border: none;
box-shadow: none;
background: var(--primary);
}

.FormUnit input[type=radio]:checked + label::after,
.FormUnit input[type=checkbox]:checked + label::after {
display: block;
position: absolute;
top: 11px;
content: "";
}

/* ラジオボタン選択時の中央ドット */
.FormUnit input[type=radio]:checked + label::after {
left: 0.6rem;
width: 1.2rem;
height: 1.2rem;
margin-top: -0.5rem;
border-radius: 100vh;
background: #fff;
}

/* チェックボックス選択時のチェックマーク */
.FormUnit input[type=checkbox]:checked + label::after {
left: 0.6rem;
top: 1.2rem;
width: 1.2rem;
height: 0.7rem;
margin-top: -0.6rem;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* 非アクティブ */
.FormUnit .Disabled {
opacity: 0.3;
}

/* 2016/06/14 追加 --------------------------------------------------- */
input[type=text].txt_input_bg_gray_{
	border-color: #f0f0f0;
	background-color: #f0f0f0;
	color: #505050;
}

div.sender_change_ {
	margin-bottom: 40px;
}
div.senderdata {
	margin-top: -30px;
}

/* エラーチップ  */
.FormUnit .ErrTipNovelty  {
display: inline-block;
margin-bottom: 5px;
background: url(../../img/sp/sys/order/Texture_ErrTipAllow.png) no-repeat;
background-position: 5% 100%;
}

.FormUnit .ErrTipNovelty span {
display: inline-block;
margin: 0 0 10px 0;
padding: 10px;
border-radius: 5px;
line-height: 1.6em;
color: #ffffff;
background: #e90000;
}