@charset "utf-8";

/*
==================================================
基本スタイルシート(全ページ共通ヘッダー・フッター部分)
製作者：Naoko
==================================================
*/


/*デフォルト
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
*{
	padding:0px;
	margin:0px;
	}
body {
	font-size:small;
	font-size: 16px;
	/* font-family:Verdana, Helvetica, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; */
	font-family:Verdana, Helvetica, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, sans-serif;
	line-height: 1.7;
	color:#333333;
	background:#e7f1e1;
	}
h1	{
	font-size:200%;}
h2	{
	font-size:160%;}
h3	{
	font-size:110%;}
h5	{
	font-size:11px;
	font-weight:lighter;
	color:#999;
	margin:15px auto 0;
	}

/*--画像--*/
img{
	border:none;
	margin:0px;
	background-color:transparent;
	}

/*--リンク--*/
a:link,a:visited {
	color:#0099cc;
	text-decoration:none;
	-moz-outline-style:none;
	overflow:hidden;
	}
a:hover,a:active,a:after {
	color:#0099cc;
	text-decoration:underline;
	-moz-outline-style:none;
	overflow:hidden;
	}

/*--リスト--*/
ul,ol,dl,dt,dd,li{
	color:#333333;
	list-style:none;
	}

/*--clearfix--*/
.clearfix {width:100%;}
.clearfix:after{
	content: ""; 
	display: block; 
	clear: both;
	}


/*レイアウト
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
#header_wrap{
	height:65px;
	background:#ffffff;
	border-bottom:1px solid #dddddd;
	}
	#header{
		width:940px;
		margin:0px auto;	
		}


#contents_wrap{
	border-top:1px solid #ffffff;
		}
	#contents{
		width:940px;
		margin:0px auto;
		padding:30px 0px 10px;	
		}
		#main_wrap{
			width:648px;
			background:#ffffff;
			border:1px solid #cccccc;
			float:left;	
			-webkit-border-radius:5px 5px 5px 5px;
			-moz-border-radius:5px 5px 5px 5px;
			border-radius:5px 5px 5px 5px;
			}
			.main_box{
				width:610px;
				margin:20px auto;
				}
		#side_wraper{
			width:288px;
			float:right;
			}
			.side_wrap{
				width:273px;
				margin:0px 0px 15px 15px;
				background:#ffffff;
				border:1px solid #cccccc;
				-webkit-border-radius:5px 5px 5px 5px;
				-moz-border-radius:5px 5px 5px 5px;
				border-radius:5px 5px 5px 5px;
				}
		#contents_box{
			width:938px;
			height:100%;
			background:#ffffff;
			border:1px solid #cccccc;
			-webkit-border-radius:5px 5px 5px 5px;
			-moz-border-radius:5px 5px 5px 5px;
			border-radius:5px 5px 5px 5px;
			}
			.send_box{
				width:900px;
				margin:20px auto;
				}

#footer{
	display: flex;
	width:940px;
	margin:0px auto;
	padding:0px 0px 50px;
  align-items: end;
}

#footer .seal-area{
	display: flex;
}
#footer .seal{
	margin-right: 1rem;
}
#footer .copyright{
	font-size: 14px;
}


/*ヘッダー
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
#title{
	width:330px;
	height:65px;
	background:url("../images/title.gif") no-repeat;
	float:left;
	text-indent:-9999px;
	}

#phone{
	width:280px;
	height:65px;
	background:url("../images/phone.gif") no-repeat;
	float:right;
	text-indent:-9999px;
	}


/*メインコンテンツ
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
.main_title{
	padding:20px 0px 20px 20px;
	}

/**ナビゲーションバー**/
.nav_bar{
	width:648px;
	height:20px;
	background:url("../images/bar_bg.gif") no-repeat 0px 0px;
	margin-bottom:10px;
	text-indent:-9999px;
	}
.nav_bar_send{
	width:938px;
	height:20px;
	background:url("../images/bar_bg.gif") no-repeat 0px -20px;
	margin-bottom:10px;
	}
.nav_bar_send a{
	width:150px;
	height:20px;
	display:block;
	text-indent:-9999px;
	float:left;
	}
.nav_bar_send p{
	float:left;
	text-indent:-9999px;
	}

.main_box p{
	margin:0px auto 10px;
	}

/**各種タイトル**/	
.item_title_baseplan,
.item_title_option,
.item_title_otheroption,
.item_title_setup,
.item_title_multioption,
.item_title_multi_otheroption,
.item_title_multisetup,
.item_title_domain,
.item_title_multidomain,
.item_title_os,
.item_title_template,
.item_title_cp
{
	width:610px;
	height:54px;
	display:block;
	text-indent:-9999px;
	margin-bottom:20px;
	}

.item_title_baseplan{background:url("../images/item_title.gif?20190903") no-repeat 0px 0px;}
.item_title_domain{background:url("../images/item_title.gif?20190903") no-repeat 0px -54px;}
.item_title_os{background:url("../images/item_title.gif?20190903") no-repeat 0px -108px;}
.item_title_template{background:url("../images/item_title.gif?20190903") no-repeat 0px -162px;}
.item_title_cp{background:url("../images/item_title.gif?20190903") no-repeat 0px -216px;}

.item_title_option{background:url("../images/item_title.gif?20190903") no-repeat 0px -268px;}
.item_title_multioption{background:url("../images/item_title.gif?20190903") no-repeat 0px -324px;}

/**サブタイトル**/
.item_sub_title{
	width:580px;
	height:30px;
	background:url("../images/item_title.gif?20190903") no-repeat 0px -504px;
	padding-left:30px;
	font-size:110%;
	color:#000;
	margin:20px auto 10px;
	font-size:15px;
	font-weight:bold;
	}

/**各アイテム囲い**/
.item{
	margin:0px auto 30px;
	}

	
/**人気アイコン**/
.popular{
	background:url("../images/popular.gif") no-repeat top right;
	line-height:18px;
	padding-bottom:2px;
	padding-right:47px;
	}

/**料金**/
.price{
	color:#333;
	margin-left:10px;
	}

/**ラジオボタン**/
.radio_list_inline,
.radio_list{
	margin:0px auto;
	padding:0px 0px 0px 20px;
	line-height:2.5;
	}
.radio_list_child{
	margin:0px auto;
	padding:0px 20px;
	}
.radio_list_inline li{
	display:inline;
	margin-right:50px;
	
	}
	
.radio_list_inline li input,
.radio_list li input,
.radio_list_child li input{
	margin-right: 10px;
    margin-left: 10px;
	margin-bottom:2px;
	vertical-align:middle;
	font-size: 20px;	
	position: relative;
	}
.radio_list_inline li input:hover,
.radio_list li input:hover,
.radio_list_child li input:hover,.radio_list_inline_send dd input:hover{
	cursor: pointer;
}
.radio_list_inline li input[type="radio"]::before, .radio_list li input[type="radio"]::before, .radio_list_child li input[type="radio"]::before,.radio_list_inline_send dd input[type="radio"]::before{
	content: "";
	position: absolute;
	z-index: 1;
	width: 24px;
	height: 24px;
	top:-7.5px;
	left:-7.5px;
	background: #fff;
	border-radius: 15px;
	border: 1px solid #999;
}
.radio_list_inline li input[type="radio"]:checked::after, 
.radio_list li input[type="radio"]:checked::after, 
.radio_list_child li input[type="radio"]:checked::after,
.radio_list_inline_send dd input[type="radio"]:checked::after{
	content: "";
	position: absolute;
	z-index: 2;
	width: 16px;
    height: 16px;
    background: #777;
    border-radius: 16px;
    top: -2.5px;
    left: -2.5px;
}

.radio_list_inline li input[type="checkbox"]::before, .radio_list li input[type="checkbox"]::before, .radio_list_child li input[type="checkbox"]::before{
	content: "";
	position: absolute;
	z-index: 1;
	width: 24px;
	height: 24px;
	top:-7.5px;
	left:-7.5px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #999;
}
.radio_list_inline li input[type="checkbox"]:checked::after, 
.radio_list li input[type="checkbox"]:checked::after, 
.radio_list_child li input[type="checkbox"]:checked::after{		
	position: absolute;
	z-index: 5;
	content: "";	
	background: url(../images/checked.svg)no-repeat;
	width: 20px;
	height: 20px;
	top: -1.5px;
    left: -4.5px;
	/* font-size: 18px; */

}

/**セレクト**/
select{
	font-family:Verdana, Helvetica, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, sans-serif;
}
.select_list{
	margin:10px auto;
	padding:0px 20px 0px 35px;
	line-height:2.2;
	}
.select_list li{
	list-style:url("../images/list_image.gif");
	}
.select_list li select{
	padding-left:10px;
	margin:0px 5px 0px 20px;
	}
.select_list_child{
	margin:0px auto;
	padding:0px 20px 0px 35px;
	}
.select_list_child li{
	list-style:url("../images/list_image_s.gif");
	}

/**お見積書発行ボタン**/
.estimate_btn{
	width:220px;
	height:57px;
	margin:10px auto;
	background:url("../images/estimate_btn.gif") no-repeat top;
	}
.estimate_btn a{
	width:220px;
	height:57px;
	background:url("../images/estimate_btn.gif") no-repeat top;
	display:block;
	text-indent:-9999px;
	}
.estimate_btn a:hover{
	background:url("../images/estimate_btn.gif") no-repeat bottom;
	}

/**クリアボタン**/
.clear_btn{
	width:195px;
	height:16px;
	background:url("../images/clear_btn.gif") no-repeat 0 0;
	margin:20px auto;
	}
.clear_btn a{
	width:195px;
	height:16px;
	background:url("../images/clear_btn.gif") no-repeat 0 0;
	display:block;
	text-indent:-9999px;
	}
.clear_btn a:hover{
	background:url("../images/clear_btn.gif") no-repeat 0 -16px;
	}

/**アコーディオン**/
.accordion_wrap{
	position:relative;
	}
.accordion_btn{
	width:100%;
	position:absolute;
	top:15px;
	left:0;
	}
.accordion_btn a{
	display:block;
	width:100%;
	height:35px;
	text-indent:-9999px;
	background:url("../images/accordion_btn.gif") no-repeat 575px 6px;
	}
.accordion_btn a.active{
	background-position: 575px -28px;
	}

/**マルチドメイン**/
.multidomain_btn{
	width:648px;
	height:70px;
	margin:50px auto 0px;
	}
.multidomain_btn a{
	display:block;
	width:648px;
	height:70px;
	background:url("../images/multidomain_btn.gif") no-repeat top;
	text-indent:-9999px;
	}
.multidomain_btn a.active{
	background-position: bottom;
	}

/**Javascriptエラー**/
.attention{
	margin:20px auto;
	padding:10px;
	border:2px solid #ffae90;
	text-align:center;
	background:#ffebe6;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	line-height:19px;
	color:#f06c2d;
	}
.attention span{
	background:url("../images/attention_icon.gif") no-repeat left;
	padding-left:25px;
	}

select{
	-webkit-appearance:none;
	appearance:none;
	background-color:#fff;
	border:1px solid #999999;
	border-radius: 4px;
	font-size: 16px;
	padding:1rem ;
	min-width: 460px;
	background-image: url(../images/select_arrow.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
}


/*サイドバー
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
.side_title{
	background:url("../images/side_title.gif") no-repeat;
	width:273px;
	height:42px;
	text-indent:-9999px;
	}
.side_multidomain_title{
	width:273px;
	height:28px;
	background:url("../images/side_multidomain.gif") no-repeat;
	text-indent:-9999px;
	margin:0 auto;
	}

.side_plan,
.side_domain,
.side_option,
.side_multidomain,
.side_multioption,
.side_os,
.side_template,
.side_conpa,
.side_managed
{
	margin:10px auto;
	padding-bottom:20px;
	}
.side_plan,
.side_domain,
.side_multidomain,
.side_os,
.side_template,
.side_conpa{
	border-bottom:1px dotted #dddddd;
	}
.side_box{
	width:263px;
	margin:5px;
	}
.side_box h4{
	font-size:120%;
	font-weight:bold;
	}

/**料金等詳細**/
.side_box table{
	border-collapse:collapse;
	width:263px;
	text-align:left;
	
	}
.side_box table th{
	text-align:left;
	}
	
.side_box table th.shoki{
	font-weight:lighter;
	color:#333;
	}
.side_box table th.month{
	font-weight:lighter;
	color:#333;
	}	
	
	
.side_box table td{
	font-size:90%;
	}
.side_box table th,
.side_box table td{
	padding:3px;
	word-break:break-all;
	vertical-align:bottom;
	}
.table_price{
	text-align:right;
	}
.total_price{
	font-size:110%;
	font-weight:bolder;
	}
.table_ex{
	background:#ffffb1;
	}

.side_box table td.table_month12{
	background:#ffffb1;
	
	text-align:right;
	font-size: 14px;
	letter-spacing: -1.1px;
	}

.table_month{
	text-align:right;
	font-size: 14px;
	letter-spacing: -1.1px;

	}

/**お支払い合計月額**/
.side_total{
	background:#daecfe;
	margin-bottom:10px;
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:5px 0px;
	}
	.side_campaign{
	background:#f7debb;
	margin-bottom:10px;
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:5px 0px;
	}
.side_total table th{text-align:center;}
.side_total table td,.side_campaign table td{
	padding:3px 5px;
	}

.side_campaign table ul.triStyle li{
	position: relative;
	margin:0px 0px 6px 24px;
	padding-left:4px
	}

.side_campaign table ul.triStyle li::after,
.side_campaign table ul.triStyle li::before {
	display: block;
	content: '';
	position: absolute;
}
.side_campaign table ul.triStyle li::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #d38618;
	border-radius: 100%;
}
.side_campaign table ul.triStyle li::before {
	z-index: 2;
	top: .675em;
	left: -.980em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/**キャッシュバック対象金額**/
.cashback{
	background:#ffffb1;
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:5px 0px;
	}
.cashback table td{
	padding:3px 5px;
	}
.cashback p{
	padding:0px 10px;
	font-size:90%;
	color:#666666;
	}

/**お見積もりボタンエリア**/
.estimate_txt{
	font-size:110%;
	font-weight:bolder;
	text-align:center;
	margin:20px auto 0px;
	word-break:keep-all;
	}

/**ページトップ**/
.pagetop{
	position:fixed;
	bottom:30px;
	right:0px;
	}

/**キャンペーン**/
h4.title-campaign{
	text-align:center;
	margin-bottom:0.5em;
	}
ul.list-campaign{
	margin-left:1.5em;
	}
	ul.list-campaign li{
	list-style:disc;
	margin-bottom:0.5em;
	}
ul.list-campaign li a.blank{
	background-image: url(https://vps.gmocloud.com/template/img/ico_blank.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 8px;
	}


/*お見積書発行ページ
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
.send_box h2{
	padding:10px 0px 20px;
	font-size:200%;
	}
.send_box p{
	margin:0px auto 20px;
	}
.send_title_payment{
	width:900px;
	height:36px;
	background:url("../images/send_title.gif") no-repeat top;
	text-indent:-9999px;
	margin-bottom:20px;
	}
.send_title_view{
	width:900px;
	height:36px;
	background:url("../images/send_title.gif") no-repeat bottom;
	text-indent:-9999px;
	margin-bottom:20px;
	}
.item_send{
	width:900px;
	/* border-top:1px solid #dddddd; */
	padding-top:20px;
	}
.item_send li{
	font-size:85%;
	color:#666666;
	padding-left:20px;
	line-height: 1.7;
	}
.required {
	font-size:70%;
	color:#f00;
	font-weight:normal;
	margin-left: 0.5em;
}

/**長期割引アイコン**/
.discount{
	background:url("../images/discount.gif") no-repeat top right;
	padding-bottom:2px;
	padding-right:70px;
	}

/**ラジオボタン**/
.radio_list_inline_send{
	width:880px;
	margin:10px auto;
	padding:0px 0px 10px 20px;
	line-height:2.2;
	border-bottom:1px solid #dddddd;
	}
.radio_list_inline_send2{
	width:880px;
	margin:0px auto 15px;
	padding:0px 0px 10px 20px;
	line-height:1.6;
	}
.radio_list_inline_send dt{
	font-weight:bolder;
	display:block;
	width:300px;
	float:left;
	}
.radio_list_inline_send2 dt{
	display:block;
	float:left;
	font-size: 16px;
	font-weight: bolder;
	margin-right: 1em;
	text-align: right;
	width: 8em;
	}
.radio_list_inline_send dd{
	display:block;
	width:180px;
	float:left;
	}
.radio_list_inline_send2 dd{
	display:block;
	width:600px;
	float:left;
	}
.radio_list_inline_send dd img{
	margin:10px 0px 0px 20px;
	}
.radio_list_inline_send dd input{
	margin-right: 10px;
	margin-left: 10px;
	position: relative;
	margin-bottom:2px;
	vertical-align:middle;
	}
.radio_list_inline_send2 dd input{
	width:300px;
	padding:5px 10px;
	}


/**お見積書発行ボタン**/
.send_btn{
	width:460px;
	height:57px;
	margin:30px auto;
	}
.send_btn .print_btn{
	width:220px;
	height:57px;
	background:url("../images/send_btn_v2.gif") no-repeat 0px 0px;
	margin-right:20px;
	float:left;
	}
.send_btn .print_btn a{
	width:220px;
	height:57px;
	background:url("../images/send_btn_v2.gif") no-repeat 0px 0px;
	display:block;
	text-indent:-9999px;
	}
.send_btn .print_btn a:hover{
	background:url("../images/send_btn_v2.gif") no-repeat 0px -57px;
	}
.send_btn .mail_btn{
	width:220px;
	height:57px;
	background:url("../images/send_btn_v2.gif") no-repeat 0px -114px;
	float:left;
	}
.send_btn .mail_btn a{
	width:220px;
	height:57px;
	background:url("../images/send_btn_v2.gif") no-repeat 0px -114px;
	display:block;
	text-indent:-9999px;
	}
.send_btn .mail_btn a:hover{
	background:url("../images/send_btn_v2.gif") no-repeat 0px -171px;
	}

/**戻るボタン**/
.back_btn{
	width:142px;
	height:17px;
	background:url("../images/back.gif") no-repeat top;
	margin:20px auto 50px;
	}
.back_btn a{
	width:142px;
	height:17px;
	background:url("../images/back.gif") no-repeat top;
	display:block;
	text-indent:-9999px;
	}
.back_btn a:hover{
	background:url("../images/back.gif") no-repeat 0px -17px;
	}

/**お見積もり完了**/
#done{
	width:430px;
	padding:20px;
	background:#ffffff;
	border:8px solid #eeeeee;
	}
#done h2{
	width:430px;
	text-align:center;
	color:#2896ec;
	}
.close_icon{
	margin:20px 0px 0px;
	text-align:right;
	}
.close_icon img{
	cursor:pointer;
	}

.em {
	color: #ff4200;
}


label:hover,select:hover{
	cursor: pointer;
}

.bk-op{
	font-size:10px;
}