@charset "utf-8";
/*	必須アイコン
-------------------- */
.icn_required {
	display: inline-block;
	width: 40px;
	margin: -3px 0 0 10px;
	padding: 2px 0;
	border-radius: 2px;
	text-align: center;
	vertical-align: middle;
	color: #FFF;
	font-size: 12px;
	font-size: 1.2rem;
	background: #4D9FEB;
}

/*	エラー表示
-------------------- */
.errortxt {
	display: none;
	margin-top: 5px;
	font-size: 12px;
	font-size: 1.2rem;
	color: #FF1D1D;
	}
.formArea input[type="text"].errorbox,
.formArea input[type="email"].errorbox,
.formArea input[type="tel"].errorbox,
.formArea textarea.errorbox {
    border: 1px solid #FF383C;
	background: #FFF2F2;
}

/*	アイコン + ツールチップ
----------------------------- */
.summary-icn { display: inline-block; margin: -1px 0 0 10px; }
.summary-icn .summary-txt { display: none; }
.summary-icn:hover { position: relative; cursor: pointer; }
.summary-icn:hover .summary-txt {
    display: block;
	position: absolute;
    top: -13px;
	left: 30px;
	z-index:100;
    width: 200px;
    padding: 10px;
    border-radius:3px;
    font-size: 13px;
    font-size: 1.3rem;
    color: #fff;
	background: #555;
}
 .summary-icn .summary-txt:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -15px;
	z-index: 100;
    display: block;
	border-style: solid;
 	border-width: 10px 16px 10px 5px;
	border-color: transparent #555 transparent transparent;
}

/*	プレースホルダーの色
------------------------- */
.formArea .errorbox::-webkit-input-placeholder { color: #FF8082; }
.formArea .errorbox::-moz-placeholder { color: #FF8082; opacity: 1; }
.formArea .errorbox:-moz-placeholder { color: #FF8082; opacity: 1; }
.formArea .errorbox:-ms-input-placeholder { color: #FF8082; }

/*	フォーカスした時の色
------------------------- */
.formArea input.errorbox:focus,
.formArea textarea.errorbox:focus {
	transition: all 0.3s;
	border: 1px solid #D9D9D9;
    box-shadow: inset 0 0 5px rgba(4,6,4,0.3);	
	background: #FFF;
	outline: 0;
}
.formArea input#submit_button_01:focus {
    transition: none !important;
    box-shadow: none;
    outline: 0;
    color: #4D9FEB;
}

/*	オートフィル後の枠制御
------------------------- */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

/*	Loading　制御
------------------------- */
#loader-bg {position:fixed; width:100%; height:100%; top:0px; left:0px; background:#fff; z-index:99999; display: none;}
#loading {position:absolute; left:50%; top:50%; width:64px; margin:-32px 0 0 -32px; font-size:64px; display: none;}

/*	エラー制御
------------------------- */
.parsley-type, .parsley-required, .parsley-maxlength {
    margin-top: 5px;
    font-size: 12px;
    font-size: 1.2rem;
    color: #f00000;
}

/* ==========================================

	カラム構成	

=========================================== */

/*　2カラム（サイドナビ付）レイアウト	
---------------------------------------- */
.formArea,
.form_navArea {	float: left; box-sizing: border-box; }

/*-- フォーム部分 --*/
.formArea { 
	width: 70%;
	margin-right: 5%;
	padding: 50px;
	border-radius: 5px;
	background: #FFF; }

/*-- サイドナビ部分 --*/
.form_navArea {	width: 25%;	}

/*-- スマホ閲覧時 --*/
@media screen and (max-width: 739px){
	.formArea,
	.form_navArea {	float: none; width: 100%; }
	.formArea { margin-bottom: 20px; padding: 20px;  }
}



/* ==========================================

	フォーム　入力部分レイアウト

=========================================== */
.formArea dl { margin-bottom: 30px; }
.formArea dt { margin-bottom: 10px; font-size: 18px; font-size: 1.8rem; }

/*	ボックス枠線・背景色・サイズ	
----------------------------------- */
.formArea input[type="text"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea select,
.formArea textarea {
	padding: 10px;
	font-size: 16px;
	font-size: 1.6rem;
    border: 1px solid #D9D9D9;
	border-radius: 3px;
	background: #FFF;
}

/*	プレースホルダーの色
------------------------- */
.formArea ::-webkit-input-placeholder { color: #CDCDCD;}
.formArea ::-moz-placeholder { color: #CDCDCD; opacity: 1; }
.formArea :-moz-placeholder { color: #CDCDCD; opacity: 1; }
.formArea :-ms-input-placeholder { color: #CDCDCD;}

/*	入力ボックス
------------------------- */
.formArea input[type="text"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea textarea {
	box-sizing: border-box;
	width: 100%;
}

/*	ラジオボタン
------------------------- */
.radio-icn { display: none; }
.radio-icn + .radio-txt {
	padding-left: 20px;
	position:relative;
}
.radio-icn + .radio-txt::before{
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	display: block;
	width: 13px;
	height: 13px;
	border: 1px solid #999;
	border-radius: 50%;
}
/*.radio-icn:checked + .radio-txt { color: #009a9a; }*/
.radio-icn:checked + .radio-txt::after{
	content: "";
	position: absolute;
	top: 6px;
	left: 3px;
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4D9FEB;
}

/*	チェックボックス
------------------------- */
.use_service dd label {
	display: block;
	margin: 5px 10px 0 0;
}
.use_service dd label input { margin-right: 5px; }
.checkbox-icn {  display: none; }
.checkbox-txt{
	position:relative;
	margin-right: 10px;
	padding-left: 20px;
}
.checkbox-txt::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	display: block;
	width: 13px;
	height: 13px;
	border: 1px solid #999;
	border-radius: 2px;
}
.checkbox-icn:checked + .checkbox-txt::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	display: block;
	width: 4px;
	height: 10px;
	transform: rotate(40deg);
	border-bottom: 3px solid #4D9FEB;
	border-right: 3px solid #4D9FEB;
}



/*	セレクトボックス
------------------------- */
.formArea select {
	width: 250px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(/sevice_shared/img/common/ico_select.png) right 5px center no-repeat;
	background-size: 20px, 100%;
}

/* IE11対応 */
.formArea select::-ms-expand { display: none; }

/*	フォーカスした時の色
------------------------- */
/*-- 入力ボックス --*/
.formArea input:focus,
.formArea textarea:focus {
	transition: all 0.3s;	
    box-shadow: inset 0 0 5px rgba(4,6,4,0.3);	
	background: #FFF;
	outline: 0;
}
.formArea select:focus { 
    box-shadow: inset 0 0 5px rgba(4,6,4,0.3);	
	background: url(/sevice_shared/img/common/ico_select.png) right 5px center no-repeat #FFF;
	background-size: 20px, 100%;
	outline: 0;
	}
.formArea .submitArea input:focus　{
	box-shadow: none;
    background: #FFF;
    outline: 0;
    color: #4D9FEB;
}
/*-- プレースホルダー --*/
.formArea :focus::-webkit-input-placeholder { color:  transparent; }
.formArea :focus::-moz-placeholder { color: transparent; }
.formArea :focus:-moz-placeholder { color: transparent; }
.formArea :focus:-ms-input-placeholder { color: transparent; }

/*	送信ボタン
------------------------- */
/*-- デフォルトリセット --*/
input[type="submit"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration { display: none; }
input[type="submit"]::focus { outline-offset: -2px; }

button {
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	background-color: transparent;
}
.formArea .submit_btn,
.submit_btn.back_btn {
    /*display: block;*/
	max-width: 200px;
    width: 100%;
	margin: 0 auto;
	padding: 8px 0;
    text-align: center;
    font-weight: bold;
	color: #FFF;
    font-size: 2.0rem;
    font-size: 20px;
	border: 3px solid #4D9FEB;
	border-radius: 5px;
	-webkit-transition: opacity 0.4s linear; 
    -moz-transition: opacity 0.4s linear; 
    -o-transition:opacity 0.4s linear; 
    transition: opacity 0.4s linear; 
	background: #4D9FEB;	
}
.formArea .submit_btn { margin-left: 10px; }
@media screen and (max-width: 464px) {
	.formArea .submit_btn { margin-bottom: 10px; }	
}

.formArea .submit_btn:hover{ 
	color: #4D9FEB;
	border: 3px solid #4D9FEB;
	background: #FFF;
	transition: 0.4s;
}
.submit_btn.back_btn {
	max-width: 180px;
	font-size: 16px;
	font-size: 1.6rem;
	border: 3px solid #878787;
	background: #878787;
}
.submit_btn.back_btn:hover {
	border: 3px solid #878787;
	color: #878787;
	transition: 0.4s;
	background: #FFF;
}



/* ==========================================

	確認画面

=========================================== */
.confirm dl {
	margin-bottom: 40px;
	padding-bottom: 5px;
	border-bottom: 1px solid #DBDBDB; }



/* ==========================================

	埋め込み型フォームレイアウト

=========================================== */

/*　カラム構成	
---------------------------------------- */
.formArea.embedded { float: none; width: 100%; padding: 30px; }

/*　フォームレイアウト
---------------------------------------- */
.formArea.embedded .form_row { 
	float: left;
	width: 48%;
}
.formArea.embedded .frameClear { float: none; }

.formArea.embedded .form_row:nth-child(odd) { margin-right: 4%; }
.submitArea { clear: both; }
.formArea.embedded dt {
	margin-bottom: 2px;
	font-size: 16px;
	font-size: 1.6rem;
}
.formArea.embedded input[type="text"],
.formArea.embedded input[type="email"],
.formArea.embedded input[type="tel"],
.formArea.embedded select,
.formArea.embedded textarea {
	padding: 4px;	
	font-size: 14px;
	font-size: 1.4rem;
}


.formArea.embedded .submit_btn {
	max-width: 100%;
	width: 250px;
	margin-left: 0;
	border-radius: 0; 
}

@media screen and (max-width: 739px) {
	.formArea.embedded .form_row { 
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}
	.formArea.embedded .submit_btn { width: 200px; }
}

/* ローディングエフェクトスタイル
---------------------------------------- */

#overlay{
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	height:100%;
	display: none;
	background: rgba(0,0,0,0.6);
}
.cv-spinner {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.spinner {
	width: 40px;
	height: 40px;
	border: 4px #ddd solid;
	border-top: 4px #2e93e6 solid;
	border-radius: 50%;
	animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
.is-hide{
	display:none;
}

/*　モーダルデザイン
---------------------------------------- */
#thanksBox.submit-modal {
	display: block;
	box-sizing: border-box;
	max-width: 450px !important;
	margin: 0 auto !important;
	padding: 20px !important;
	border-radius: 5px !important;
	font-size: 16px !important;
	font-size: 1.6rem !important;
	background: #FFF !important;
	}
 button.mfp-close.submit-modal {
	position: static !important;
	width: 120px !important;
	height: auto !important;
	margin: 20px auto 0;
	padding: 0 10px !important;
	border-radius: 5px;
	opacity: 1 !important;
	color: #FFF !important;
	font-size: 20px !important;
	font-size: 2.0rem !important;
	background: #4D9FEB !important;
}



/* ==========================================

	お問い合わせ総合窓口

=========================================== */
.headerArea { background: #FFC926; }

#tab ul { letter-spacing:-0.4em; }	
#tab ul li {
	width: 50%;
	letter-spacing:normal;
	box-sizing: border-box;
    display: inline-block;
    vertical-align: bottm;
	text-align: center;
	font-size: 20px;
	font-size: 2.0rem;
    background: #4E515D;
}
#tab ul .active { 
    padding: 20px 0;
	border-top: 10px solid #FFF;
	font-weight: bold;
	background: #FFF; }
#tab ul li a {
	display: block;
    padding: 20px 0;
	color: #FFC926;
}
#tab ul li a:hover { text-decoration: none; background: #727681; }
#tab ul li a:hover img { opacity: 1; }

@media screen and (max-width:739px) {
	#tab ul li {
		vertical-align: bottom;
		font-size: 14px;
		font-size: 1.4rem;
	}
	#tab ul li img { display: none; }
	#tab ul .active,
	#tab ul li a { padding: 5px 0; }
}

.inq-cate {
	padding: 0;
	background: #000;
	background: url("/sevice_shared/img/inquiry/ttl_bg.png") repeat-x;
}
.inq-cate span {
    position: relative;
    display: inline-block;
    line-height: 32px;
    height: 32px;
    padding: 0 20px 0 0;
	background-color: #FFF;
}

@media screen and (min-width:740px){
	.consider .layout-3col {
		box-sizing: border-box;
		width: 33.3%;
		margin :0;
		border-right: 1px solid #CCC;
	}
	
	.consider .layout-3col:last-child { border-right: none; }
}

.purpose {
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
}
.purpose:before {
	content: "";
    display: inline-block;
    position: relative;
	width: 40px;
    height:46px;
    top: 16px;
    padding-left: 14px;
    background-repeat: no-repeat;
}
.purpose.icn_01:before { background-image: url("/sevice_shared/img/inquiry/icn_01.png"); }
.purpose.icn_02:before { background-image: url("/sevice_shared/img/inquiry/icn_02.png"); }
.purpose.icn_03:before { background-image: url("/sevice_shared/img/inquiry/icn_03.png"); }
.purpose.icn_04:before { background-image: url("/sevice_shared/img/inquiry/icn_04.png"); }
.purpose.icn_05:before { background-image: url("/sevice_shared/img/inquiry/icn_05.png"); }
.purpose.icn_06:before { background-image: url("/sevice_shared/img/inquiry/icn_06.png"); }
.purpose.icn_07:before { background: url(/sevice_shared/img/svg/cloud/icn_cloud.svg) no-repeat left 50% / 40px; padding-left: 10px;}
.purpose.icn_08:before { background: url(/sevice_shared/img/svg/datacenter/icn_datacenter.svg) no-repeat left 50% / 40px; padding-left: 10px;}
.purpose.icn_zenlogic:before { background: url(/sevice_shared/img/svg/rentalserver/icn_rentalserver.svg) no-repeat left 50% / 40px; padding-left: 10px;}
.purpose.icn_09:before { background-image: url("/sevice_shared/img/inquiry/icn_09.png"); }
.snav_se_icn { padding-left:2em; text-indent:-2em; }


.business-hours { color: #999; font-size: 12px; font-size: 1.2rem; }
.tel { margin-top: 30px; }
.tel a { color: #333; font-size: 38px; font-size: 3.8rem; }
.tel a:hover { text-decoration: none; }

@media screen and (max-width:739px){
	.ttl-icon { padding: 10px 0 10px 50px; background-size: 39px 39px; }
	.purpose { padding-bottom: 0; background-size: 20px 16px; }
	p.sbutton_fill,.tel { margin-top: 0; }
}

.help ul li { 
	float:left;
	box-sizing: border-box;
	width: 32%;
	margin: 0 2% 5% 0;
}
.help ul li a { padding: 10px 10px 10px 60px; color: #3B3B3B;} 
.help ul li a:hover { text-decoration: none; opacity:  0.6; } 
.help ul li:nth-child(3n) { margin-right: 0; }
.help ul li a.cloud { background: url(/sevice_shared/img/svg/cloud/icn_cloud.svg) no-repeat left 50% / 50px;}
.help ul li a.ilb { background: url(/sevice_shared/img/svg/cloud/icn_cloud_ilb.svg) no-repeat left 50% / 50px;}
.help ul li a.rdb { background: url(/sevice_shared/img/svg/cloud/icn_cloud_rdb.svg) no-repeat left 50% / 50px;}
.help ul li a.gcs { background: url(/sevice_shared/img/svg/cloud/icn_cloud_gcs.svg) no-repeat left 50% / 50px;}
.help ul li a.gcda { background: url(/sevice_shared/img/svg/cloud/icn_cloud_gcda.svg) no-repeat left 50% / 50px;}
.help ul li a.storage { background: url(/sevice_shared/img/svg/cloud/icn_cloud_obst.svg) no-repeat left 50% / 50px;}
.help ul li a.cache { background: url(/sevice_shared/img/svg/cloud/icn_cloud_cdn.svg) no-repeat left 50% / 50px;}
.help ul li a.dns { background: url(/sevice_shared/img/svg/cloud/icn_cloud_dns.svg) no-repeat left 50% / 50px;}
.help ul li a.gslb { background: url(/sevice_shared/img/svg/cloud/icn_cloud_gslb.svg) no-repeat left 50% / 50px;}
.help ul li a.baremetal { background: url(/sevice_shared/img/svg/cloud/icn_cloud_baremetal.svg) no-repeat left 50% / 50px;}
.help ul li a.private { background: url(/sevice_shared/img/svg/cloud/icn_cloud_private.svg) no-repeat left 50% / 50px;}
.help ul li a.dc { background: url(/sevice_shared/img/svg/datacenter/icn_datacenter.svg) no-repeat left 50% / 50px;}
.help ul li a.nw { background: url(/sevice_shared/img/svg/network/icn_network.svg) no-repeat left 50% / 50px;}

@media screen and (max-width: 739px){
	.help ul li { 
		width: 49%;
		margin: 0 2% 2% 0;
	}
	.help ul li:nth-child(3n) { margin-right: 2%; }
	.help ul li:nth-child(even) { margin-right: 0; }
	.help ul li a { 
		display: table;
		padding: 5px 0 5px 40px;
		font-size: 12px;
		font-size: 1.2rem;
		}
	.help ul li:nth-child(2n) { margin-right: 0; }
	.help ul li a.cloud,
	.help ul li a.ilb,
	.help ul li a.rdb,
	.help ul li a.gcs,
	.help ul li a.gcda,
	.help ul li a.storage,
	.help ul li a.cache,
	.help ul li a.dns,
	.help ul li a.gslb,
	.help ul li a.baremetal,
	.help ul li a.private,
	.help ul li a.aos,
	.help ul li a.dc,
	.help ul li a.nw,
	.help ul li a.bigdata { background-size: 26px auto; display: table-cell; vertical-align: middle;}
}

/*　ボタン */
p.sbutton_fill a {	padding: 18px 0; border-radius: 5px; }
p.sbutton_fill.btn-green a { box-shadow: 0 0 0 3px #58BE89 inset; background: #58BE89; }
p.sbutton_fill.btn-green a:hover { color: #58BE89; background: #FFF; }
	
p.sbutton_fill.btn-yellow a { box-shadow: 0 0 0 3px #FBA848 inset; background: #FBA848; }
p.sbutton_fill.btn-yellow a:hover { color: #FBA848; background: #FFF; }

p.sbutton_fill.btn-gray a { box-shadow: 0 0 0 3px #8f9bb8 inset; background: #8f9bb8; } /* add ike */
p.sbutton_fill.btn-gray a:hover { color: #8f9bb8; background: #FFF; } /* add ike */

p.sbutton_fill.btn-cl a, 
p.sbutton_fill.btn-dc a,
p.sbutton_fill.btn-zen a,
p.sbutton_fill.btn-td a { padding: 14px 0 10px; font-size: 16px; font-size: 1.6rem; line-height: 2.2rem; }

p.sbutton_fill.btn-dc a { box-shadow: 0 0 0 3px #06346A inset; background: #06346A; }
p.sbutton_fill.btn-dc a:hover { color: #06346A; background: #FFF; }
p.sbutton_fill.btn-zen a { box-shadow: 0 0 0 3px #48c3ec inset; background: #48c3ec; }
p.sbutton_fill.btn-zen a:hover { color: #48c3ec; background: #FFF; }
p.sbutton_fill.btn-td a { box-shadow: 0 0 0 3px #FF3B35 inset; background: #FF3B35; }
p.sbutton_fill.btn-td a:hover { color: #FF3B35; background: #FFF; }

p.sbutton_fill.sim a { padding: 4px 0; }
p.sbutton_fill.chat_close {
	padding: 15px 0;
    text-align: center;
    display: block;
    width: 100%;
	border-radius: 5px;
	color: #FFF;
    font-weight: bold;
    font-size: 1.8rem;
	box-shadow: 0 0 0 3px #AAA inset;	
	background: #AAA;
}

p.sbutton_fill .bluebtn {	padding: 18px 0; border-radius: 5px; color: #FFF; background: #4D9FEB; box-shadow: 0 0 0 3px #4D9FEB inset; text-align: center; display: block; width: 100%; font-weight: bold; font-size: 1.8rem; }
p.sbutton_fill .bluebtn:hover { color: #4D9FEB; background: #FFF; }


/* ---- Zenlogic専用窓口 ---- */
.inq_zenlogic {
	border-top: 2px solid #eee;
	overflow: hidden;
}
.inq_zenlogic > div {
	width: 86%;
	margin: 0 auto;
}
.inq_zenlogic div div {
	float: left;
	margin: auto 10px;
}
.inq_zenlogic div div.zen_tel {
	background: #f7f7f7;
	padding: 50px 30px;
	margin-top: 40px;
}
.inq_zenlogic div div.zen_tel h3 {
	font-size: 18px;
	background: url(/sevice_shared/img/inquiry/icn_tel.png) no-repeat left 50%;
	padding-left: 25px;
}
.inq_zenlogic div div.zen_tel a.tel {
	display: block;
	font-size: 3.8rem;
	color: #888;
}
.inq_zenlogic div div.zen_tel a.tel:hover {
	text-decoration: none;
}
.inq_zenlogic div div.zen_tel span.text_s {
	display: block;
	margin-top: -10px;
}

section.help {
	clear: both;
}

@media screen and (max-width: 979px){
.inq_zenlogic > div {
	width: auto;
}
.inq_zenlogic div div {
	float: none;
}
.inq_zenlogic div div.zen_tel {
	padding: 20px;
	width: 90%;
	max-width: 430px;
	margin: 0 auto;
}
}
@media screen and (max-width: 613px){
.inq_zenlogic div div.zen_tel h3 {
	background: none;
	padding-left: 0;
}
}


/* ---- clearfix ---- */
.formContent:after,
.formArea.embedded form {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
}