@charset "UTF-8";

#footerSign{margin-top:40px;}
#copy{ font-size:10px; text-align:center; margin-top:15px; }


/*--------------------見出し--------------------*/
.ttl1{background:#DCEEA4;}
.ttl1:before{ border-top: 7px solid #E3F3B2;}
.ttl2{font-size:20px;}


/*--------------------パーツ--------------------*/
.boxGrayRound{ text-align:center; background:#FFF; }
#waiting{text-align:center;}


/*--------------------エラー--------------------*/
.sessionError{ clear:both; font-size:15px; background:#FFFACD; border:solid 1px #FF0000; padding:15px 18px; }


/*--------------------フォーム--------------------*/
input[type="submit"]{margin:30px auto 20px;}


/*----------サーバープレゼントバナー----------*/
.privilege { width: 654px; margin: auto; position: relative; }
.privilegeRibbon { position: absolute; top: -8px; left: -8px; }

.privilegeTitle { font-size: 19px; text-align: center; color: #FFF; background: url(/newgtld/shop/images/privilege_pattern.gif); border-radius: 4px 4px 0 0; padding: 8px 10px 6px; }

.privilegeBox { overflow: hidden; font-size: 14px; padding: 15px 20px 20px; border: 1px #00aeff solid; text-align: center; }

.privilegeList { overflow: hidden; margin-top: 15px; }
.privilegeList li { float: left; margin: 0 32px 0 0; }
.privilegeList li:last-child {margin: 0;}


/*----------サインアップ----------*/
.signup_btn_notes { margin: 40px 0 -20px; text-align: center;}

/*----------汎用----------*/
.signup_notes_txt { font-size: 16px;}


/*----------------------------------------PC ＆ タブレット　641px以上----------------------------------------*/
@media only screen and (min-width: 641px) {

	/*----------見出し----------*/
	.ttl1{ font-size:18px; padding:14px 5px; }
	.ttl2{margin-top:30px;}

	/*----------パーツ----------*/
	.boxGrayRound{ width:400px; padding:20px 30px; }
	.boxGrayRound .ttl2{margin-top:7px;}
	.boxGrayRound .firstTime{margin-top:80px;}

	.dataName dt, .dataName dd{float:left;}
	.dataName dt{width:200px;}
}


/*----------------------------------------スマートフォン　640px以下----------------------------------------*/
@media only screen and (max-width: 640px) {


	/*----------共通部分----------*/
	#footerSign .listCenter.margin15 li{ font-size:12px; margin:0 0 0 10px; }
	#footerSign .listCenter.margin15 li:first-child {margin:0;}
	#copy{font-size:9px;}


	/*----------見出し----------*/
	.ttl1{ clear:both; font-size:15px; padding:12px 5px; }
	.ttl1 .regular{font-size:12px;}
	.ttl2{margin-top:20px;}


	/*----------パーツ----------*/
	.boxGrayRound{ width:87.7%; margin:10px auto; padding:0 4% 20px; }
	.boxGrayRound .firstTime{margin-top:20px;}


	/*----------エラー----------*/
	.textWarning{ clear:both; margin:10px 1% 15px 1%; padding:15px 2.5%; }


	/*----------サインアップ----------*/
	.signup_btn_notes { margin: 40px 0 0;}


	/*----------サーバープレゼントバナー----------*/
	.privilege {width: auto;}
	.privilegeTitle { padding: 6px 10px 5px 55px; line-height: 1.5; text-align: left; }

	.privilegeBox { padding: 15px 10px; text-align: left; }

	.privilegeList { overflow: hidden; margin-top: 0; text-align: center; }
	.privilegeList li { float: none; margin: 0 0 20px 0; }
	.privilegeList li:last-child {margin: 0;}
}


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
body.minihd{ background: #fff; padding-bottom: 0;}
body.minihd #main { width: auto; padding: 0; }

#flowchart *{ box-sizing: border-box;}

.required,
.any{ margin-top: 1px;}


/* flow
**********************************************************************/
#flowchart{ background: #fafafa; padding:10px; font-size:12px; border-bottom: #ccc 1px solid; }
#flowchart div{ background: #fff; padding: 10px; overflow: hidden; border: #ccc 1px solid; border-radius: 4px; }

#flowchart ul li{ background:url(images/flowchart_arrow_sp.png) no-repeat right 4px; height: 24px; margin:0 3px; padding:0 17px 0 5px; float: left; line-height: 24px; }

#flowchart ul li.lastChart{ background:none; padding: 0 0 0 5px; }
#flowchart ul li.current span{ display: block; padding:0 5px; color:#00ad5a; border: #00ad5a 1px solid; border-radius:3px; }


/* contents
**********************************************************************/
#contents{padding:30px 10px;}
#contents .amazon{ padding: 0 0 20px; margin: 30px 0 0; border-bottom: #DFDFDF 1px solid; }

#contents .amazon a{ display: block; padding: 0 0 0 12px; position: relative; color: #003399; }
#contents .amazon a:before{ content: ""; display: block; width: 0; height: 0; position: absolute; top: 7px; left: 0; border: 4px solid transparent; border-left: 6px solid #939393; }

#contents .amazon > img{ display: block; width: 74px; margin: 14px auto 0; }

#contents section > p{ margin: 30px 0 0; font-size: 14px; }
#contents section > p span{ display: block; font-weight: bold; }


/*btn*/
.btn{ width: 240px; height: 48px; letter-spacing: 1px; }
a.btn{ padding:11px 0 0;}

.attention{ border: none!important; padding: 0; }


/* table
**********************************************************************/
.tb2{ width:100%; margin:20px 0; }
.tb2 th{ width:40%; font-weight: bold; text-align:left; }

.tb2 th,
.tb2 td{ padding:10px;}
.tb2 input,
.tb2 .selectBox{ box-sizing: border-box;}

.tb2 input[type="text"],
.tb2 input[type="password"]{ width:75%; height:30px; padding: 0 5px; border:solid 1px #ccc; }
.tb2 input.textBoxMedium{width:95%;}

.messageError{ display : none; margin: 0 0 0 6px; font-size:12px; color:#FF0000; }

.addition{ display: block; margin: 4px 0 0; font-size: 12px; }
.addition a:hover{ text-decoration: none;}


/* index.php
**********************************************************************/
.hd_pickup {display: none;background: -webkit-gradient(linear, left top, right top, from(#ff900d), to(#ff4000));background: linear-gradient(to right, #ff900d 0%, #ff4000 100%);width: 100%;}
.hd_pickup img {display: block;width: auto;height: 60px;max-width: 800px;margin: 0 auto;}

.flowTop{ padding: 30px 0 0;}
.formTxt{ margin: 6px 0 0;}


/* signup_confirm.php
**********************************************************************/
.squareBlue a{ display:inline-block; background:#87CEEB; padding:2px 6px; font-size:11px; color:#FFFFFF; border-radius:2px; text-decoration:none; transition: background 0.3s ease-in-out 0s; }


/*gmoSign*/
.gmoSign{ background: #fffef7; margin:30px 0 0; padding:14px 12px 12px; font-size: 13px; border: #e5e3d7 1px solid; }
.gmoSign input{ display: inline-block; margin:5px 6px 0 0; vertical-align: top; }

.gmoSign p span a{ color: #333;}
.gmoSign > span{ margin:4px 0 0 20px; font-size: 13px; line-height: 1.6;}
.gmoSign > span a{ color: #888;}

.gmoSign > div{ background:#f5f3e5; margin: 14px 0 0; padding: 18px 12px;}
.gmoSign > div > p{ font-size: 13px;}

.gmoSign > div .point{ margin:8px 0 0; }
.gmoSign > div .point li{ margin:3px 0 0; font-size: 12px; color: #79776d;}
.gmoSign > div .point span{ display: inline-block; background: #333; width: 60px; margin:0 8px 0 0; border-radius: 9px; color: #fff; font-size: 10px; text-align: center;}


/* buy_input.php
**********************************************************************/
.selectBox{ width: 95%; max-width: 300px; height:32px; overflow: hidden; background: url(/parts/img/arrow_select.gif) no-repeat right #FFFFFF; border:solid 1px #ccc; -webkit-appearance: none; }
.selectBox select{ background: none; height: 100%; width: 150%; padding:0 5px; border: none; -webkit-appearance: none; }

.year{ margin: 0 0 0 10px;}

.period{ overflow: hidden;}
.period .selectBox{ width: 26%; max-width: 80px;}
.period .selectBox,
.period .txt{ float: left;}
.period .txt{ margin: 5px 0 0 6px;}

.automatic{ min-width: 560px;}


/* amazon_select.php
**********************************************************************/
.amaPrice *{ box-sizing: border-box;}
.amaPrice .price{ margin: 20px 0 0; overflow: hidden; border: #DDD 1px solid; }

.amaPrice .price dt,
.amaPrice .price dd{ padding: 14px 10px 12px; float: left; }
.amaPrice .price dt{ background: #F5F7F7; width: 35%; max-width: 336px; }

.amaPrice .amazonBox{ margin: 26px 0 0;}
.amaPrice .amazonBox #addressBookWidgetDiv,
.amaPrice .amazonBox #walletWidgetDiv{ height: 240px; }
.amaPrice .amazonBox #walletWidgetDiv{ margin: 14px 0 0;}

.amaPrice .submitBox li .btn{ padding: 16px 0 0!important; line-height: 1 }
.amaPrice .submitBox li .still{ opacity: 0.3; cursor: default; }


/*.user_input.php
**********************************************************************/
.userinput .discGray{margin: 26px 0 0 8px;}
.userinput .attention{ margin: 0 0 0 -4px;}
.userinput .attention a:hover{ color: #003399;}

.userinput input[type="radio"]{ margin: 0 6px 0 0; }

.userinput .contractType input,
.userinput .contractType label{ cursor: pointer; }


.userinput .automatic label{ display: block; cursor: pointer;}
.userinput .automatic input{ margin: 4px 4px 0 0; vertical-align: top; cursor: pointer; }


/* last_confirm.php
**********************************************************************/
.policyBox .policyTxt{ font-size: 16px; font-weight: bold; }

.lastconfirm .ttl2{ margin: 26px 0 0;}
.lastconfirm .tb2{ margin: 10px 0 0;}
.lastconfirm .attention a:hover{ color: #003399;}


/* complete.php
**********************************************************************/
.endcontent .btn{ padding: 13px 0 0!important; margin: 20px auto 0; line-height: 1; }


/* afterSns */
.afterSns{ margin:60px 0 40px;}
.afterSns ul li .btn{ width: auto; height: auto; margin:0!important;}


/*error*/
.textWarning{ font-size:14px; }
.textWarning div{ background:#fedae2; max-width: 960px; margin:5px auto 0; padding:15px 20px 15px 20px; border:solid 1px #FF6666; box-sizing: border-box; }

.textSuccess{ font-size:14px; }
.textSuccess div{ background:#dff0d8; max-width: 960px; margin:5px auto 0; padding:15px 20px 15px 20px; border:solid 1px #d6e9c6; box-sizing: border-box; }


/* form */
.form_content{ margin-top: 40px; padding: 30px 10px; border: solid 1px #ddd;}
.form_content .tit{ margin-bottom: 20px; font-size: 19px; font-weight: bold; text-align: center;}
.form_content .tit .price{ display: inline-block; margin-left: 10px; color: #ff6d06; }
.form_content .tit .price span{ font-size: 30px; line-height: 1;}

.domain_form{ display: flex; justify-content: space-between; max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 4px;  }
.domain_form input[type=text] { background: #f2f4f5; width: calc(100% - 70px); height: 70px; padding-left: 1rem; font-size: 16px; border: none; }
.domain_form input[type=submit] { background: url("/assets/img/common/ico_search_white.svg") no-repeat #005bac center/20px; width: 60px; height: 70px; margin: 0; border-left: #fff 1px solid; overflow: hidden; text-indent: 200%; white-space: nowrap; cursor: pointer;}


/* server */
.server_area { background: white; padding: 30px 20px 30px; margin: 60px 0 0; position: relative; border: solid 1px #ddd;}
.server_area::before { content: ""; display: block; width: 0; height: 0; position: absolute; top: -30px; left: 50%; border: 9px solid transparent; border-top: 9px solid #c4c4c4; -webkit-transform: translate(-50%, 0);transform: translate(-50%,0);}
.server_area dl{ color: #005bac; font-weight: bold; border-bottom: #e5e5e5 2px dashed; text-align: center;}
.server_area dt{ font-size: 20px; line-height: 1.5;}
.server_area dd{ margin: 20px 0; font-size: 16px;}

.server_area .logo{ display: flex; flex-wrap: wrap; align-items: center; margin: 30px 0 20px;}
.server_area .logo img{ width: 100%; max-width: 194px; margin: 0 auto;}
.server_area .logo span{ width: 100%; display: block; padding-top: 14px; margin-top: 14px; color: #ff6d06; font-size: 16px; font-weight: bold; text-align: center; border-top: #e5e5e5 1px solid;}

.server_area .dotList{ margin-bottom: 34px;}
.server_area .btn{ width: 260px; height: 50px; padding: 0!important; margin: 0 auto; font-size: 14px; font-weight: bold; line-height: 50px;}



/* session_error.php
**********************************************************************/
.sessionError{margin:0 10px 20px;}
.sessionError a:hover{ color: #003399;}


@media print, screen and (min-width:580px){
	#contents .amazon{ padding: 0 0 40px 104px; overflow: hidden; position: relative; }
	#contents .amazon img{ margin: 0; position: absolute; top: 0; left: 0; }

	#contents section > p{ margin: 37px 0 0;}
}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){

	/* common
	**********************************************************************/
	#footer{ margin: 100px auto 0;}

	.required,
	.any{ margin-top: 2px;}


	/* flow
	**********************************************************************/
	#flowchart{ padding: 30px 20px 34px; font-size:14px; }
	#flowchart div{ max-width: 960px; margin: 0 auto; padding: 18px 0; }

	#flowchart ul{ display: table; margin: 0 auto; }
	#flowchart ul li{ background:url(images/flowchart_arrow_pc.png) no-repeat right 4px; height: 29px; padding: 0 28px 0 10px; line-height: 29px; }

	#flowchart ul li:first-child{ padding: 0 26px 0 0;}
	#flowchart ul li.current span{ padding: 0 8px;}


	/* contents
	**********************************************************************/
	#contents{ max-width: 960px; margin: 0 auto; padding: 36px 20px 0; }
	#contents .amazon{ margin: 50px 0 0;}

	/*btn*/
	.btn{ margin: 40px auto 0; }
	a.btn{ padding:10px 0 0;}


	/* table
	**********************************************************************/
	.tb2{ margin:26px 0 0; font-size: 14px; }
	.tb2 th{width:30%;}
	.tb2 th,
	.tb2 td{padding:12px 15px;}

	.tb2 input[type="text"],
	.tb2 input[type="password"]{ width:180px; height:32px; padding:3px 10px 0; }
	.tb2 input:-webkit-autofill{box-shadow: 0 0 0 1000px white inset;}

	.tb2 input.error{ background: #FFE9E8; }
	.tb2 input.error:-webkit-autofill{box-shadow: 0 0 0 1000px #FFE9E8 inset;}
	.tb2 input.textBoxMedium{width:300px;}

	/*other 960px*/
	.buyTop,
	.buyframe{ max-width: 960px; margin: 0 auto; }


	/*subtxt*/
	.addition{ display: inline-block; margin: 0 0 0 6px; }


	/* index.php
	**********************************************************************/
	.flowTop{ padding: 36px 0 0;}
	.flowTop > div { margin: 20px 0 0; }


	/* user_input.php
	**********************************************************************/
	.userinput .automatic label{ display: inline-block; margin:0 14px 0 0; }
	.userinput .automatic input{ margin: 5px 6px 0 0;}


	/*gmoSign*/
	.gmoSign{ margin-top:40px; padding-left:16px; padding-right:16px; }
	.gmoSign > div{ padding: 18px 26px;}


	/* buy_input.php
	**********************************************************************/
	.selectBox select{  padding:2px 10px 0;}
	.year{ margin: 0 0 0 14px;}


	/* amazon_select.php
	**********************************************************************/
	.amaPrice .price dt,
	.amaPrice .price dd{ padding: 14px 20px 12px;}
	.amaPrice .price dt{ border-right: #ccc 1px solid;}

	.amaPrice .amazonBox{ display: table; margin: 40px auto 0; overflow: hidden; }

	.amaPrice .amazonBox #addressBookWidgetDiv,
	.amaPrice .amazonBox #walletWidgetDiv{ width: 400px; float: left; }

	.amaPrice .amazonBox #walletWidgetDiv{ margin: 0 0 0 24px;}
	.amaPrice .submitBox li .still:hover{ background: #1d965c!important;}


	/* last_confirm.php
	**********************************************************************/
	.lastconfirm .ttl2{ margin: 36px 0 0;}
	.lastconfirm .tb2{ margin: 16px 0 0;}


	/* complete.php
	**********************************************************************/
	.endcontent .btn{ padding: 16px 0 0!important;}

	.server_area dt{ display: table; background: linear-gradient(transparent 60%, #f7ce19 40%); margin: 0 auto; font-size: 26px;}
	.server_area dd{ font-size: 18px;}
	.server_area .logo img{ width: 28%; }
	.server_area .logo span{ width: 70%; padding:0 0 0 8px; margin:0 0 0 10px; font-size: 18px; text-align: left; border-left: #e5e5e5 1px solid; border-top:none;}


	/* session_error.php
	**********************************************************************/
	.sessionError{margin:25px 10px;}
}


/*************************************************************************************************************************
* 960px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:960px){


	/* index.php
	**********************************************************************/
	.hd_pickup {display: block;}


	/* flow
	**********************************************************************/
	#flowchart{ padding: 30px 0 34px;}


	/* contents
	**********************************************************************/
	#contents{ padding: 36px 0;}


	/* ignup_confirm.php
	**********************************************************************/
	.squareBlue a:hover{ background: #4B9BDC;}


	/* session_error.php
	**********************************************************************/
	.sessionError{margin:25px 0;}


	/* complete.php
	**********************************************************************/
	.form_content{ padding-right: 20px; padding-left: 20px; }
	.form_content .tit{ font-size: 24px; }
	.form_content .tit .price span{ font-size: 40px;}

	.domain_form input[type=text] { width: calc(100% - 80px); height: 64px; padding: 0 80px 0 20px; }
	.domain_form input[type=submit] { background-size: 24px; width: 64px; height: 64px; transition: background 0.3s ease-in-out 0s;}
	.domain_form input[type=submit]:hover{ background-color: #0068c6;}
}