@charset "utf-8";
/*
======== CONTENTS ==========================================
CMSフォーム
2021.1.6
 =========================================================
*/
/* HDGL(common.css) form base*/

/* 1: Base Setting
=========================================================================================== */

table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {text-align: left;}

/* [f1] Form Page
=========================================================================================== */

.FormTableStyle {width: 100%;}
.FormTableStyle th {
	width: 30%;
	background-color: #e8e8e8;
	font-weight: normal;
}

.FormTableStyle td {width: 70%;}

.FormTableStyle span.MustItem {
	display: block;
	color: #000;
	font-weight: bold;
}



/* --- [-] Name/Kana --- */

.FormTableStyle label.FirstName,
.FormTableStyle label.LastName {
	display: inline;
	float: left;
	margin: 0 15px 0 0;
}
.FormTableStyle label.FirstName input,
.FormTableStyle label.LastName input { display: block; }


/* --- [-] Name/Kana : For Accesibility --- */

.FormTableStyle .FirstNameAC,
.FormTableStyle .LastNameAC {
	display: inline;
	float: left;
	margin: 0 15px 0 0;
}
.FormTableStyle .FirstNameAC input,
.FormTableStyle .LastNameAC input { display: block; }
.FormTableStyle span.InputExample { line-height: 1.35; }
.FormTableStyle td input#name1_last,
.FormTableStyle td input#name1_first,
.FormTableStyle td input#name2_last,
.FormTableStyle td input#name2_first { width: 150px; }


/* --- [-] Input Item List > Vertical --- */

.FormTableStyle ul.Vertical { margin: 0 0 -3px; }
.FormTableStyle ul.Vertical li { margin: 0 0 3px; }
.FormTableStyle ul.Vertical li input {
	display: inline;
	margin: 0 0 2px;
	vertical-align: middle;
}


/* --- [-] Input Item List > Horizontal --- */

.FormTableStyle ul.Horizontal { margin: 0 0 -3px; }
.FormTableStyle ul.Horizontal li {
	float: left;
	margin: 0 1em 2px 0;
}
/* */
.FormTableStyle ul.Horizontal li label { white-space: nowrap; }
.FormTableStyle ul.Horizontal li input {
/*	display: inline;
	margin: 0 0 2px;*/
	vertical-align: middle;
}
.FormTableStyle input,
.FormTableStyle textarea { margin: 5px 0 0; }
.FormTableStyle select { margin: 0 0 5px; }

.Alternative {
	margin: 0 0 10px;
	text-align: center;
}

.FormTableStyle input[type="text"],
.FormTableStyle textarea,
.FormTableStyle select {
	padding: 2px 4px 4px 4px;
	border: solid 1px #ddd;
}

.Alternative li {
	display: inline;
	margin: 0 5px;
	padding: 0 0 15px;
	font-size: 90%;
	line-height: 1.2;
}

.SubmitButtonSet,
.SubmitButtonArea { text-align: center; }
.SubmitButtonSet li,
.SubmitButtonArea li {
	display: inline;
	margin: 0 3px;
}

.SubmitButtonSet li input[type="button"],
.SubmitButtonSet li input[type="submit"],
.SubmitButtonSet li input[type="reset"] {
	width: 180px;
	margin: 0 0 0px;
	padding: 9px 25px 9px 15px;
	font-family: inherit;
	font-size: 83%;
	color: #fff;
	text-align: center;
	line-height: 130%;
	border: 0 none;
	background-color: #e60027;
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: 16px 16px;
	-moz-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
	cursor: pointer;
	word-break: break-all;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	border-radius: 3.9375rem;
}

.SubmitButtonSet li input[type="submit"],
.SubmitButtonSet li input[name='submitbtn']{
	background-image: url(/res/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
}
.SubmitButtonSet li input[name="modify"]{
	width:120px;
	background-color: #ccc;
	font-size:13px!important;
	padding: 13px 15px 11px 15px;
	background-image: url(/-/media/Project/DefaultSite/common/form/icon_link_left_l_white_hd.gif);
	background-position:3% center;
}

.SubmitButtonSet li input[type="submit"]:hover {
	background-color: #b1000e;
	/*background-position: 99% center;*/
}
.SubmitButtonSet li input[type="reset"] {
	background-image: url(/res/image/jp/r1/icon/icon_close_hd.gif);

}
.SubmitButtonSet li input[type="reset"]:hover {
	background-color: #b1000e;
}
.SubmitButtonSet li input[type="button"]:hover {
	background-color: #b1000e;
	/*background-position: 99% center;*/
}
.SubmitButtonSet li input[name="modify"]:hover {
	background-color: #aaa;
	/*background-position: 2% center;*/
}
.SubmitButtonSet li input[type="submit"]:focus,
.SubmitButtonSet li input[type="button"]:focus,
.SubmitButtonSet li input[type="reset"]:focus{
	outline:none;
}


.SubmitButtonArea li input {
	display: inline;
	font-size: 83%;
	padding: 2px 5px;
}



/* [c14] Data Table
=========================================================================================== */

/* --- [c14-1-1] Data Table --- */
/* --- [c14-1-2] Data Table > With Captions --- */
/* --- [c14-2-1] Data Table > Width: 100% --- */
/* --- [c14-2-2] Data Table > Width: 100% > With Captions --- */
/* --- [c14-2-3] Data Table > Width: 100% > Multiple Headers --- */
/* --- [c14-3-1] Data Table > op-aligned --- */

table {
	margin: 0 0 20px;
	border-collapse: collapse;
}

table th {
	background-color: #f2f2f2;
	font-weight: normal;
}

table td.SubHeader {
	background-color: #f8f8f8;
	font-weight: normal;
}

table th,
table td {
	padding: 10px 15px;
	border: solid 1px #ddd;
	font-size: 83%;
	text-align: left;
}

table.DataTableStyle1 caption,
table.DataTableStyle3 caption,
table.DataTableStyle5 caption,
table.TableStyle1 caption,
table.TableStyle3 caption,
table.TableStyle5 caption {display: none;}

table.DataTableStyle2 caption,
table.DataTableStyle4 caption,
table.TableStyle2 caption,
table.TableStyle4 caption {
	padding: 0 0 5px;
	font-size: 83%;
	text-align: left;
}
table.DataTableStyle3,
table.DataTableStyle4,
table.TableStyle3,
table.TableStyle4 {width: 100%;}

table.DataTableStyle5 th,
table.DataTableStyle5 td,
table.TableStyle5 th,
table.TableStyle5 td {vertical-align: top;}


/* --- [-] Font Size in Data Table --- */

table .TextStyle2,
table .ImgOnlyStyle,
table .ListStyle2,
table .LinkListStyle2,
table .LinkListStyle4,
table .LinkListStyle6,
table .AnnotationsStyle2,
table .AdditionalNotesStyle2,
table .ButtonStyle1,
table .ButtonStyle2,
table .ButtonW120SetStyle6 dt,
table .ButtonW180SetStyle6 dt,
table .ButtonW240SetStyle6 dt,
table .ButtonW120SetStyle6 dd,
table .ButtonW180SetStyle6 dd,
table .ButtonW240SetStyle6 dd,
table .ButtonW120SetStyle8 dt,
table .ButtonW180SetStyle8 dt,
table .ButtonW240SetStyle8 dt,
table .ButtonW120SetStyle8 dd,
table .ButtonW180SetStyle8 dd,
table .ButtonW240SetStyle8 dd,
table .PlugInBanner {font-size: 100%;}


/* --- [-] Link in Data Table --- */

table[class*="DataTableStyle"] td > ul.ListStyle2,
table[class*="DataTableStyle"] td > ul.LinkListStyle2,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 {margin-bottom: 0;}

table[class*="DataTableStyle"] td > ol.LinkListStyle2,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 {margin-bottom: -5px;}

table[class*="DataTableStyle"] td > ul.LinkListStyle4,
table[class*="DataTableStyle"] td > dl.ListStyle2,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 {margin-bottom: -15px;}

table[class*="DataTableStyle"] td > ul.ListStyle2 + div,
table[class*="DataTableStyle"] td > ul.ListStyle2 + p,
table[class*="DataTableStyle"] td > ul.ListStyle2 + ul,
table[class*="DataTableStyle"] td > ul.ListStyle2 + dl,
table[class*="DataTableStyle"] td > ul.ListStyle2 + ol,
table[class*="DataTableStyle"] td > ul.LinkListStyle2 + div,
table[class*="DataTableStyle"] td > ul.LinkListStyle2 + p,
table[class*="DataTableStyle"] td > ul.LinkListStyle2 + ul,
table[class*="DataTableStyle"] td > ul.LinkListStyle2 + dl,
table[class*="DataTableStyle"] td > ul.LinkListStyle2 + ol,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 + div,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 + p,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 + ul,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 + dl,
table[class*="DataTableStyle"] td > ul.LinkListStyle6 + ol {margin-top: 15px;}

table[class*="DataTableStyle"] td > ol.LinkListStyle2 + div,
table[class*="DataTableStyle"] td > ol.LinkListStyle2 + p,
table[class*="DataTableStyle"] td > ol.LinkListStyle2 + ul,
table[class*="DataTableStyle"] td > ol.LinkListStyle2 + dl,
table[class*="DataTableStyle"] td > ol.LinkListStyle2 + ol,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2 + div,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2 + p,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2 + ul,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2 + dl,
table[class*="DataTableStyle"] td > dl.AdditionalNotesStyle2 + ol,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 + div,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 + p,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 + ul,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 + dl,
table[class*="DataTableStyle"] td > ul.AnnotationsStyle2 + ol {margin-top: 20px;}

table[class*="DataTableStyle"] td > ul.LinkListStyle4 + div,
table[class*="DataTableStyle"] td > ul.LinkListStyle4 + p,
table[class*="DataTableStyle"] td > ul.LinkListStyle4 + ul,
table[class*="DataTableStyle"] td > ul.LinkListStyle4 + dl,
table[class*="DataTableStyle"] td > ul.LinkListStyle4 + ol,
table[class*="DataTableStyle"] td > dl.ListStyle2 + div,
table[class*="DataTableStyle"] td > dl.ListStyle2 + p,
table[class*="DataTableStyle"] td > dl.ListStyle2 + ul,
table[class*="DataTableStyle"] td > dl.ListStyle2 + dl,
table[class*="DataTableStyle"] td > dl.ListStyle2 + ol,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 + div,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 + p,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 + ul,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 + dl,
table[class*="DataTableStyle"] td > dl.LinkListStyle2 + ol {margin-top: 30px;}




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

	/* ------ Data Table ------ */

	.JS table th,
	.JS table td {
		padding: 10px 10px;
		font-size: 76%;
	}

	.JS table.FormTableStyle {
		display: block;
		border-left: solid 1px #ddd;
		border-right: solid 1px #ddd;
		border-bottom: solid 1px #ddd;
	}

	.JS table.FormTableStyle tbody,
	.JS table.FormTableStyle tr {display: block;}

	.JS table.FormTableStyle th,
	.JS table.FormTableStyle td {
		display: block;
		width: auto;
		padding: 10px 15px;
		font-size: 83%;
		overflow: hidden;
		border: 0 none;
		border-top: solid 1px #ddd;
	}

	.JS table.FormTableStyle span.MustItem {
		display: inline;
		margin-left: 15px;
	}

	/* ------ Form Page ------ */

	.JS .FormTableStyle .FirstNameAC,
	.JS .FormTableStyle .LastNameAC {
		display: block;
		float: none;
		margin: 0;
	}
	.JS .FormTableStyle td input#name1_last,
	.JS .FormTableStyle td input#name1_first,
	.JS .FormTableStyle td input#name2_last,
	.JS .FormTableStyle td input#name2_first {width: 95%;}

	.JS .FormTableStyle input[type="text"],
	.JS .FormTableStyle textarea,
	.JS .FormTableStyle select {
		width: 95%;
		margin-bottom: 10px;
	}

	.JS .FormTableStyle input#postal_code1,
	.JS .FormTableStyle input#postal_code2 {width: auto;}

}

/*override HDGL
=========================================================================================== */

table.FormTableStyle {
	margin: 0 0 20px;
	border-collapse: collapse;
}
table.FormTableStyle th {
	background-color: #f2f2f2;
	font-weight: normal;
}
table.FormTableStyle td.SubHeader {
	background-color: #f8f8f8;
	font-weight: normal;
}
table.FormTableStyle th {
	padding: 10px 15px;
	border: solid 1px #ddd;
	font-size: 16px;
	text-align: left;
	border-bottom: 1px solid #fff;
}
table.FormTableStyle tr:last-child th {
	border-bottom: 1px solid #e8e8e8;
}
table.FormTableStyle td {
	padding: 10px 15px;
	border: solid 1px #ddd;
	font-size: 83%;
	text-align: left;
	word-break: break-all;
}

.FormTableStyle ul.Horizontal li input {
	margin: 2px 4px 5px 2px;
}
.FormTableStyle input[type="text"],
.FormTableStyle textarea {
	padding: 0.5rem !important;
	line-height: 120% !important;
	border: 1px solid #ccc;
	width:100%;
}
.FormTableStyle select {
	padding: 0.28rem !important;
	margin: 0.25rem 0 0 0;
	line-height: 120% !important;
	border: 1px solid #ccc;
	width:100%;
}
/* IE select */
.FormTableStyle select::-ms-expand {
	border:none;
	background: none;
  }
.FormTableStyle input[type="text"],
.FormTableStyle input[type="checkbox"],
.FormTableStyle input[type="radio"],
.FormTableStyle textarea,
.FormTableStyle select,
.FormTableStyle .Horizontal label+input[type="checkbox"],
.FormTableStyle .Horizontal label+input[type="radio"],
.FormTableStyle .Vertical label+input[type="checkbox"],
.FormTableStyle .Vertical label+input[type="radio"],
.FormTableStyle .Horizontal label,
.FormTableStyle .Vertical label,
.FormTableStyle p.prviewtext {
	font-size: 16px;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif
}
.FormTableStyle .InputExample {
	color: #999;
}
.FormTableStyle .clearboth {
clear:both;
}
.FormTableStyle textarea {
	font-family: inherit;
	width: 100%;
	resize:vertical;
}
span.MustItem {
	display: inline-block;
	float: right;
	margin-left: 5px;
	padding: 0 4px;
	background: #e70128;
	color: #fff!important;
	font-weight: normal!important;
	font-size: 83%;
	border-radius: 3px;
}
span.MustItem_nofloat {
	float: none;
	display: inline;
}
span.MustItem.agree {
	float: none;
	line-height: normal;
}
/* 商品共通フォーム：フィールド個別設定 */
.FormTableStyle .FirstNameAC,
.FormTableStyle .LastNameAC {
	margin-bottom: 15px;
	width: 44%;
}

/*郵便番号*/
.FormTableStyle input#zipcode1 {
	width: 3em!important;
}
.FormTableStyle input#zipcode2 {
	width: 4em!important;
}

.FormTableStyle input#company,
.FormTableStyle input#email,
.FormTableStyle input#address1  {
	width: 80%;
}
.FormTableStyle select#pref,
.FormTableStyle input#dept,
.FormTableStyle input#position,
.FormTableStyle input#tel {
	width: 60%;
}

.FormTableStyle .w100{width: 100%!important;}
.FormTableStyle .w90{width: 90%!important;}
.FormTableStyle .w80{width: 80%!important;}
.FormTableStyle .w70{width: 70%!important;}
.FormTableStyle .w60{width: 60%!important;}
.FormTableStyle .w50{width: 50%!important;}
.FormTableStyle .w40{width: 40%!important;}
.FormTableStyle .w30{width: 30%!important;}
.FormTableStyle .w20{width: 20%!important;}
.FormTableStyle .w10{width: 10%!important;}


/*同意する*/
.FormTableStyle checkbox#agree {
	font-size:1.2rem;
}
/*TEXTAREAの確認画面表示*/
.FormTableStyle .textarea_preview{
 white-space: pre-wrap;
 word-wrap: break-word;
}

@media screen and (max-width: 579px) {
.JS .FormTableStyle .FirstNameAC,
.JS .FormTableStyle .LastNameAC {
	display: block;
	float: none;
	margin: 0;
	width: 100%;
}
.JS .FormTableStyle td input#first_name,
.JS .FormTableStyle td input#last_name,
.JS .FormTableStyle td input#first_name_kana,
.JS .FormTableStyle td input#last_name_kana,
.JS .FormTableStyle td input#company,
.JS .FormTableStyle td input#dept,
.JS .FormTableStyle td input#position,
.JS .FormTableStyle td input#email,
.JS .FormTableStyle td input#tel,
.JS .FormTableStyle td input#address1,
.JS .FormTableStyle .w70,
.JS .FormTableStyle .w80,
.JS .FormTableStyle .w90{
	width: 95%!important;
}

.JS .SubmitButtonSet li input[type="button"],
.JS .SubmitButtonSet li input[type="submit"],
.JS .SubmitButtonSet li input[type="reset"] {
	width: 180px!important;
	min-width: 180px!important;
 }
}
.JS .SubmitButtonSet li input[name="modify"]{
	width: 120px!important;
	min-width: 120px!important;
}

@media screen and (max-width: 399px){
	.JS .SubmitButtonSet li input[type="button"],
	.JS .SubmitButtonSet li input[type="submit"],
	.JS .SubmitButtonSet li input[type="reset"] {
  -webkit-box-sizing: initial;
	margin-bottom:1rem;
 }
}

/*Original
=========================================================================================== */
.formbody {
	width: 90%;
	margin: auto;
}
@media screen and (max-width: 767px){
	.formbody,
	.thanks_msg,
	.thanks_link {
		width: 100%!important;
	}
}
/* Form gage (BP/custom)
=========================================================================================== */
.formgage {
	display: table;
	width: 100%;
	overflow: hidden;
	zoom: 1;
	margin: 0;
	margin-top: 1.4em;
	padding: 0;
	list-style-type: none;
}
.formgage li {
	position: relative;
	float: none !important;
	margin-right: 0 !important;
	font-weight: bold;
}
.formgage li.active {
	color: #fff;
}
.formgage li span.PC {
	display:inline;
}


@media screen and (max-width: 767px) {
 .formgage li p {
	  padding: 13px 17px;
	  box-sizing: border-box;
	  vertical-align: middle;
	}
}
@media screen and (max-width: 425px) {
	.formgage li span.PC {
	  display:none;
  }
}
@media screen and (max-width: 375px) {
 .formgage li p {
 	font-size: 80%!important;
 }
}

.formgage li {
	display: table-cell;
	background-color: #f1f1f1;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	line-height: 1.2;
}
.formgage .li03{
	padding-left: 0;
}
.formgage li p {
	padding: 13px 17px;
	box-sizing: border-box;
	vertical-align: middle;
	font-size: 90%;
    background-color: #f1f1f1;
    z-index: 0;
}
.formgage .li01 p {
    padding-right: 0;
}
.formgage li:not(.li01) p{
    padding-left: 30px;
    padding-right: 0;
}
.formgage li:not(.li03) p:before{
	border-left: 23px solid #fff;
	border-top: 32px solid transparent;
	border-bottom: 32px solid transparent;
	content: "";
	position: absolute;
	right: -23px;
	top: 0;
    bottom: 0;
    margin: auto;
	z-index: 1;
}
.formgage li:not(.li03) p:after{
	border-left: 20px solid #f1f1f1;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	content: "";
	position: absolute;
	right: -19px;
	top: 0;
    bottom: 0;
    margin: auto;
	z-index: 2;
}
/*Active*/
.formgage li.active p:after {
	border-left-color: #5f5f5f;
}
.formgage li.active p {
	background-color: #5f5f5f;
	z-index: 0;
}
.formgage li span {
	display: block;
	font-size: 90%;
}


/*エラーメッセージ*/

.formerror ul{
	padding-left: 25px;
	background: url(/res/common/img/se_inq/icn_error01.gif) no-repeat 0 0.3em;
}
.formerror ul li{
	text-indent: -1.5em;
	margin-left: 1.5em;
}

.formerrormsg {
	padding-left: 0.9375rem;
	margin-top: 0.2rem;
	margin-bottom: 0;
	display: block;
	clear: both;
	background: url(/res/common/img/se_inq/icn_error01.gif) no-repeat left 0.1em;
}


/*ウェブサイト上の個人情報の取扱いについて*/

/*リストの見出し*/
.privacybox dl dt {
	color: #cc0000;
	font-weight: bold;
	font-size:120%;
	margin-bottom: 1em;
}
.privacybox .ul01 {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.privacybox .ul01 li {
	margin-left: 1em;
}
/*utility*/
.privacybox .se-p01-t {
	margin-top: 0.7em;
}
.privacybox .sig01 {
	margin-top: 1.2em;
	padding: 0!important;
}
.privacybox .sig01 ul {
	margin-left: 15px;
}
.privacybox .sig01 ul li {
	position: relative;
}
.privacybox .sig01 ul li:before {
	position: absolute;
	content: "";
	display: inline-block;
	top: .55em;
	width: 0;
	height: 0;
	margin-left: -15px;
	border-style: solid;
	border-width: 3px 0 3px 5px;
	border-color: transparent transparent transparent #cc0000;
}
.privacybox .sig01 p {
	margin: 0 0 1rem 0;
}

/*個人情報について*/
.privacybox {
	width: 100% !important;
	padding: 1rem;
	font-size: 80%;
}
.privacybox dl, .privacybox ul {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}
.privacybox dt, .privacybox dd, .privacybox li {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
}
.privacybox .sig01 ul, .privacybox dl .ul01 {
	list-style: none;
}
.privacybox .sig01 a {
	padding: 0;
}
@media only screen and (min-width: 481px) {
	.privacybox .sig01 p {
	    margin: 0;
			text-align: right;
		}
}
@media screen and (max-width: 579px) {
 .privacybox {
		font-size: 70%;
	}
}

/*-----完了画面---------------------------------*/

.thanks_msg {
	width: 95%;
	padding: 5rem 1rem;
	margin: 1.375rem auto !important;
}
.thanks_link {
	width: 95%;
	margin: auto;
	padding-bottom: 3rem;
}
.thanks_link a{
	float:right;
}

/*--------------------------------------
placeholder
--------------------------------------*/
::placeholder {
	font-size: 100%;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
	color: #aaa!important;
 }
:-ms-input-placeholder{
	font-size: 100%;
 	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
	color: #aaa!important;
 }
 ::-ms-input-placeholder{
 	font-size: 100%;
  	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
 	color: #aaa!important;
  }

@media screen and (max-width: 639px) {
 	::placeholder {
		font-size: 90%;
	}
	:-ms-input-placeholder,
	::-ms-input-placeholder {
		font-size: 90%;
	}
}

.readbox{
	min-height: 2rem;
}
.readbox .hs-list{
	margin-left:1rem;
}
@media screen and (max-width: 639px) {
	.readbox .hs-list{
		margin-left:inherit;
	 }
}

/*guide navi*/
#ffgt{display:none;}

.hs-group{display:none;}

/*hide global footer*/
.hs-footer-nav{
   display:none;
}


/*--------------------------------------
ブラウザUIの更新
--------------------------------------*/
.FormTableStyle ul.Horizontal li input,
.FormTableStyle ul.Vertical li input{
    display: inline-block;
}

/*custom UI*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox],
    input[type=radio] {
        --active: #5f5f5f;
        --active-inner: #fff;
        --focus: 2px #aaa;
        --border: #aaa;
        --border-hover: #5f5f5f;
        --background: #fff;
        --disabled: #ddd;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: #5f5f5f;
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
    }
    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }
    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed;
    }
    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: #5f5f5f;
        --b: var(--border);
    }
    input[type=checkbox]:focus, input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
        width: 21px;
    }
    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
        opacity: var(--o, 0);
    }
    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
        --o: 1;
    }
    input[type=checkbox]+label, input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }
    input[type=checkbox]:not(.switch) {
        border-radius: 7px;
    }
    input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }
    input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }
    input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px;
    }
    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }
    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }
    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }
    input[type=radio] {
        border-radius: 50%;
    }
    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }
    input[type=radio]:checked {
        --s: .5;
    }
}