@charset "UTF-8";
/* CSS Document */
/* GLOBAL */

/* Code Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box; }

/* ---------- BASE ---------- */
body {
	line-height: 1.5em;
	margin: 0;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "Yu Gothic", sans-serif;
/* 	background-color: #e5f4f9; */
	background-color: rgba(47, 106, 152,0.757) ;
	-webkit-text-size-adjust: none;
	height: 100%; }

/* ---------- FORM SPACE ---------- */
.wpd1 { width: 90%; }
.wpd2 { width: 80%; }
.wpd3 { width: 20%; }
.wpd4 { width: 20%; }
.wpd5 { width: 50%; }
.wpd6 { width: 30%; }
.wpd_zip { width: 30%; }
.wpd_pref { width: 30%; }
.wpd_com { width: 90%; }
.fw_fr { margin-right: -2px; }

/* ---------- PC/SP ---------- */
.onlyPC { }
.onlySP { display: none; }

/* ---------- TEXT ---------- */
.tel_note { font-size: 80%; }
.txtBold { font-weight: bold; }
.txtUnderTxt { text-decoration: underline; }

/* ---------- Main ---------- */
main#formMain { width: 100%; background-color: #e5f4f9; }
/* ---------- EntryFormDiv ---------- */
/* Entry Form Block */
div#EntryFormDiv { width: 980px; margin: 0 auto; background-color: #e5f4f9; padding: 2em 1em; }

/* ---------- Form Header ---------- */
div#EntryFormDiv div#formHeaderBox {
	width: 100%;
	margin: 2em auto;
	margin-bottom: 0;
	padding-bottom: 2em; }

/* ---------- Error Message ---------- */
.errorP {
	margin: 10px auto;
	padding: 5px;
	line-height: 1.5em;
	background-color: #dc143c;
	color: #ffffff;
	border-radius: 3px;}

/* ---------- Progress Bar ---------- */
div#EntryFormDiv .progressbar { display: flex; flex-wrap: wrap; }
div#EntryFormDiv .progressbar .item {
	position: relative;
	width: 25%;
	text-align: center;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 13px 0;
	line-height: 1.5;
	background: #eaeaea;
	color: #999999; }
div#EntryFormDiv .progressbar .item:not(:last-child)::before,
div#EntryFormDiv .progressbar .item:not(:last-child)::after {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 100%;
	content: '';
	border: 50px solid transparent;
	border-left: 20px solid #eaeaea;
	margin: auto; }
div#EntryFormDiv .progressbar .item:not(:last-child)::before { margin-left: 1px; border-left-color: #fafafa; }
	/* ---------- active ---------- */
div#EntryFormDiv .progressbar .item.active {
	z-index: 1;
	background: #e06060;
	color: #ffffff; }
div#EntryFormDiv .progressbar .item.active:not(:last-child)::after { border-left-color: #e06060; }
div#EntryFormDiv .progressbar .item.active:not(:last-child)::before { border-left: none; }
div#EntryFormDiv span.prog_card_note { font-size:80%; }

/* ---------- mainContents ---------- */
div#EntryFormDiv div#mainContents { width: 100%; text-align: center; background-color: #e5f4f9; padding: 1em 0 1.5em; }

div#EntryFormDiv div#formBlock {
	width: 900px;
	background-color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 4px;
	text-align: left;
	margin: 0 auto;
	padding: 2em 1em; }
div#EntryFormDiv div#formBlock h2 {
	margin-bottom: 2em;
	font-size: 200%;
	text-align: center;
	color: #a4a4a4; }
div#EntryFormDiv div#formBlock h2 span {
	padding-bottom: 0.3em;
	border-bottom: 2px solid #a4a4a4; }

div#EntryFormDiv div.entry_message {
	width: 96%;
	margin: 0 auto;
	margin-bottom: 2em; }
div#EntryFormDiv div.entry_message strong.check_note { font-weight: bold; color: #dc143c; text-decoration: underline; }
p.order_note { color: #333333; text-indent: -1rem; margin-left: 1rem; margin-top: 8px; }

/* ---------- DL Style / order_box ---------- */
div#EntryFormDiv dl.entry_dl { text-align: left; margin: 1em 0; }
div#EntryFormDiv dl.entry_dl dt {
	font-size: 120%;
	font-weight: bold;
	color: #666666;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle; }
div#EntryFormDiv dl.entry_dl dd { width: 100%; }

/* ---------- DL Style / confirm_box ---------- */
div#EntryFormDiv dl.entry_dl_check { text-align: left; margin: 1px 0; margin-top: 1em; margin-bottom: 1.5em; }
div#EntryFormDiv dl.entry_dl_check dt {
	font-size: 120%;
	font-weight: bold;
	color: #666666;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle; }
div#EntryFormDiv dl.entry_dl_check dd.check_dd {
	padding: 8px 16px;
	line-height: 1.5em;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	font-size: 140%;
	background-color: #fafafc; }
div#EntryFormDiv dl.entry_dl_check dd.dd_space { margin-bottom: 16px; }

/* ---------- DL Style / address_dl ---------- */
div#EntryFormDiv dl.address_dl { margin: 0 0 0 8px; padding: 0; }
div#EntryFormDiv dl.address_dl dt { display: block; padding: 0 0 0 4px; font-weight: normal; font-size: 16px; }
div#EntryFormDiv dl.address_dl dd { display: block; margin-bottom: 8px; }

/* ---------- DL Style / tv_nest_dl ---------- */
div#EntryFormDiv dl.tv_nest_dl { padding: 0; }
div#EntryFormDiv dl.tv_nest_dl dt { display: block; padding: 0 0 0 16px; font-weight: normal; font-size: 16px; }
div#EntryFormDiv dl.tv_nest_dl dd { display: block; padding: 0 0 0 16px; }

/* ---------- Personal Info Agree ---------- */
div#EntryFormDiv dl.entry_dl_personal { text-align: left; margin: 1em 0; }
div#EntryFormDiv dl.entry_dl_personal dt {
	font-size: 120%;
	font-weight: bold;
	color: #666666;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle; }
div#EntryFormDiv dl.entry_dl_personal dd { width: 100%; }
div#EntryFormDiv textarea.FormWarningFrame { width: 96%; height: 7em; background-color: #ffffff; font-size: 80%; padding: 0.5em; }

/* ---------- Note ---------- */
div#EntryFormDiv p.serviceAddressNote { font-weight: normal; font-size: 80%; line-height: 150%; }

/* ---------- blkSeparator ---------- */
div#EntryFormDiv h2.blkSeparator {
	position: relative;
	text-align: left;
	color: #2f6a98;
	padding-bottom: 15px;
	margin-top: 2em;
	margin-bottom: 0px;
	font-size: 150%; }
div#EntryFormDiv h2.blkSeparator::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #2f6a98 0px, #2f6a98 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%) ;
	background-size: 8px 8px; }

/* ---------- UL Style / order_box  ---------- */
div#EntryFormDiv ul.ul_3column,
div#EntryFormDiv ul.ul_2column,
div#EntryFormDiv ul.ul_column,
div#EntryFormDiv ul.ul_checkbox { list-style: none; margin: 0; padding: 0; }
div#EntryFormDiv ul.ul_3column li { width: 32.9%; display: inline-block; text-align: center; }
div#EntryFormDiv ul.ul_2column li { width: 49%; display: inline-block; text-align: center; }
div#EntryFormDiv ul.ul_column li,
div#EntryFormDiv ul.ul_checkbox li { margin: 12px 0; }

/* ---------- UL Style / personal_box ---------- */
div#EntryFormDiv ul.name_ul,
div#EntryFormDiv ul.select_ul { list-style: none; margin: 0 0 0 1em; padding: 0; }
div#EntryFormDiv ul.name_ul li { display: inline-block; width: 49.7%; }
div#EntryFormDiv ul.select_ul li { margin: 8px 0; }

/* ---------- Prev / Next ---------- */
div#EntryFormDiv ul.footerLinkUL { list-style: none; width: 80%; margin: 1em auto; margin-top: 3em; }
div#EntryFormDiv ul.footerLinkUL li.nextStep {  }
div#EntryFormDiv ul.footerLinkUL li.prevStep { text-align: center; margin-top: 1.5em; }
div#EntryFormDiv ul.footerLinkUL li.cardChecknote { text-align: left; color: #dc143c; }

/* ---------- Card Entry ---------- */
div#EntryFormDiv div.ccard_message { width: 90%; margin: 0 auto; padding-top: 1em; }

/* ---------- Thanx Page ---------- */
div#EntryFormDiv div.thanx_message { width: 75%; margin: 0 auto; padding-top: 1em; }

/* ---------- Input Form ---------- */
div#EntryFormDiv input, textarea, select {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "Yu Gothic", sans-serif;
	border-radius: 3px;
	border: 1px solid #cccccc;
	background-color: #fafafc;
	margin: 5px;
	padding: 8px;
	font-size: 100%;
	-webkit-appearance: none; }
div#EntryFormDiv p.trans_memo { margin-left: 15px; }

/* ---------- radio / check box ---------- */
/* radioボタン、checkボタン非表示 */
div#EntryFormDiv input[type="radio"],input[type="checkbox"] { display: none; }

/* ---------- Radio Button ---------- */
div#EntryFormDiv label.btn_label {
	display: block;
	text-align: left;
	margin: 5px;
	border: 3px solid #e5e5e5;
	border-radius: 3px;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 8px 8px 8px 2.5em;
	background-color: #fafafc; }
div#EntryFormDiv label.btn_label:hover { border-color: #000000; }
div#EntryFormDiv label.btn_label:before {
	position: absolute;
	top: 12px;
	left: 1em;
	width: 10px;
	height: 10px;
	content: '';
	border: 0.2em solid #cccccc;
	border-radius: 50%; }
div#EntryFormDiv input[type="radio"]:checked + label.btn_label { border: 3px solid #000000; background-color: #ffffff; }
div#EntryFormDiv input[type="radio"]:checked + label.btn_label:before { border: 0.2em solid #000000; }

/* ---------- Check Box ---------- */
div#EntryFormDiv label.check_label {
	display: block;
	text-align: left;
	margin: 5px;
	border: 3px solid #e5e5e5;
	border-radius: 3px;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 8px 8px 8px 2.5em;
	background-color: #fafafc; }
div#EntryFormDiv label.check_label:hover { border-color: #000000; }
div#EntryFormDiv label.check_label:before {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 14px;
	height: 14px;
	content: '';
	border: 3px solid #cccccc;
	background-color: #fafafc;
	transition: 0.1s ease-in-out; }
div#EntryFormDiv input[type="checkbox"]:checked + label.check_label { border: 3px solid #000000; background-color: #ffffff; }
div#EntryFormDiv input[type="checkbox"]:checked + label.check_label:before {
	transform: rotate(45deg);
	border-color: #000000;
	border-top: none;
	border-left: none;
	width: 7px;
	top: 10px;
	left: 14px;
	background-color: transparent; }
/* ---------- Check Box (Terms Approval) ---------- */
div#EntryFormDiv label.customCheckbox {
	display: block;
	text-align: left;
	margin: 5px;
	border: 3px solid #89beeb;
	border-radius: 3px;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 8px 8px 8px 2.5em;
	background-color: #e1f0f5; }
div#EntryFormDiv label.customCheckbox:hover { border-color: #2f6a98; }
div#EntryFormDiv label.customCheckbox:before {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 14px;
	height: 14px;
	content: '';
	border: 3px solid #cccccc;
	background-color: #fafafc;
	transition: 0.1s ease-in-out; }
div#EntryFormDiv input[type="checkbox"]:checked + label.customCheckbox { border: 3px solid #2f6a98; background-color: #e1f0f5; }
div#EntryFormDiv input[type="checkbox"]:checked + label.customCheckbox:before {
	transform: rotate(45deg);
	border-color: #2f6a98;
	border-top: none;
	border-left: none;
	width: 7px;
	top: 10px;
	left: 14px;
	background-color: transparent; }
	
div#EntryFormDiv strong.require {
	font-size: 80%;
	display: inline;
	vertical-align: top;
	font-weight: normal;
	margin-left: 10px;
	margin-right: 5px;
	background-color: #dc143c;
	color: #ffffff;
	border-radius: 10px;
	padding: 2px 10px; }

/* ---------- Address Auto Input ---------- */
div#EntryFormDiv input.supportBtn {
	cursor: pointer;
	font-size: 80%;
	color: #000000;
	padding: 6px 18px;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #cdcdcd; }
div#EntryFormDiv input.supportBtn:hover { border-color: #dedede; background-color: #dedede; }

/* ---------- Submit Button  / Submit Card Button ---------- */
div#EntryFormDiv input.submitBtn,
div#EntryFormDiv input.submitCardBtn {
	cursor: pointer;
	font-size: 120%;
	font-weight: bold;
	color: #ffffff;
	padding: 12px 18px;
	border: 3px solid #a50d0d;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #e06060;
	margin: 1em auto;
	letter-spacing: 0.1em; }
div#EntryFormDiv input.submitBtn:hover,
div#EntryFormDiv input.submitCardBtn:hover { background-color: #a50d0d; border-color: #a50d0d; }

/* ---------- Submit NG Button ---------- */
div#EntryFormDiv input.submitNGBtn {
	cursor: default;
	font-size: 120%;
	font-weight: bold;
	color: #bbbbbb;
	padding: 12px 18px;
	border: 3px solid #aaaaaa;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #dddddd;
	margin: 1em auto;
	letter-spacing: 0.1em; }

/* ---------- Back Button ---------- */
div#EntryFormDiv .prevBtn {
	cursor: pointer;
	font-size: 100%;
	color: #000000;
	padding: 6px 12px;
	border: 1px solid #cdcdcd;
	border-radius: 3px;
	-webkit-appearance: none;
	text-decoration: none;
	background-color: #dedede;
	letter-spacing: 0.3em; }
div#EntryFormDiv .prevBtn:hover {
	text-decoration: none;
	border: 1px solid #cdcdcd;
	background-color: #cdcdcd; }
	
/* ---------- Error Message ---------- */
div#EntryFormDiv span.emes {
	font-size: 100%!important;
	display: inline-block;
	position: relative;
	padding: 4px 16px;
	background: #dc143c;
	color: #ffffff;
	text-align: center;
		/* border */
	border-radius: 3px;
 	margin-bottom: 1em;}
div#EntryFormDiv span.emes:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
/*	border-color: rgba(24, 44, 117, 0); */
	border-color: rgba(220, 20, 60, 0);
	border-top-color: #dc143c;
	border-width: 10px;
	margin-left: -10px;
	margin-bottom: 2em; }

/* ---------- gHeader ---------- */
#gHeader {
	padding: 16px 0 10px;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	background-color: #ffffff;
	border-top: 10px solid #009adf;
	border-bottom: 1px solid #c0c0c0;
	}
#gHeader .hBox {
	margin: 0 auto;
	width: 980px;
	align-items: center; }
#gHeader h1 { width: 125px; }
#gHeader h1 a { display: block; }
#gHeader h1 a:hover { opacity: 1; }

/* ---------- gFooter ---------- */
#gFooter { background-color: rgb(231, 245, 250); }
#gFooter p {
	padding: 38px 0 34px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.4; }
#gFooter address {
	padding: 15px 5px 10px;
	color: #ffffff;
	text-align: center;
	font-size: 90%;
	font-style: normal;
	background-color: rgba(47, 106, 152,0.757); }
	
/* ---------- invoiceDL ---------- */
dl.invoiceDL {
	border: 1px solid #ababab;
	width: 800px;
	margin:2em auto 0.5em;
	display: flex;
	flex-wrap: wrap;
	text-align: left; }
dl.thanxInvoiceDL {
	border: 1px solid #ababab;
	width: 100%;
	margin:2em auto 0.5em;
	display: flex;
	flex-wrap: wrap;
	text-align: left; }
dl.invoiceDL dt, dl.thanxInvoiceDL dt {
	text-align: right;
	vertical-align: top;
	display: inline-block;
	font-weight: bold;
	background-color: #eaeaea;
	padding: 10px 8px;
	border-right: 1px solid #ababab;
	border-bottom: 1px dotted #ababab ;
	width: 30%; }
dl.invoiceDL dd, dl.thanxInvoiceDL dd {
	display: inline-block;
	padding: 10px 8px;
	border-bottom: 1px dotted #ababab ;
	width: 70%; }
dl.invoiceDL dt:last-of-type, dl.thanxInvoiceDL dt:last-of-type { border-bottom: none; }
dl.invoiceDL dd:last-child, dl.thanxInvoiceDL dd:last-child { border-bottom: none; }
dl.invoiceDL dd > ul { list-style: disc; margin-left: 1em; }
dl.thanxInvoiceDL dd > ul { list-style: disc; margin-left: 1em; }

/* ---------- 2022-10-17 2ヶ月無料CP ---------- */
h3.cpH3 { position: relative; padding: 0 10px; text-align: center; font-size: 150%; color: #5c8cb0; }
h3.cpH3:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 4px;
	content: '' ;
	background: #5c8cb0; }
h3.cpH3 span { position: relative; padding: 0 0.5em; background: #ffffff; }
dl.cpDL {
	width: 100%;
	margin: 1em auto;
	display: flex;
	flex-wrap: wrap; }
dl.cpDL dt { display: inline-block; width: 20%; padding: 8px 16px; text-align: right; color: #5c8cb0; }
dl.cpDL dd { display: inline-block; width: 78%; padding: 8px; }

span.cpTarget {
	display: block;
	font-size: 120%;
	color: #5c8cb0;
	font-weight: bold;
	text-align: center;
	padding: 8px;
	border: 1px solid #5c8cb0;
	border-radius: 3px; }
p.noCPMessage { width: 100%; padding: 0.5em; color: #ff0000; text-align: center; font-size: 120%; }

ul.license_note { margin-left: 2rem; margin-top: 1rem; }
ul.license_note li { margin-top: 8px }