@charset "Shift_JIS";
/*
	[00] 950dfont引継ぎ
	[01] main
	[02] layout
	[03] table
	
*/

/*
	[00] 950dfont引継ぎ
*/
/*BODY設定*/
body      { color: black; font-size: 10px; font-style: normal; font-weight: normal; line-height: normal; background-color: #ffffff; padding-top:7px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px }

/*リンク設定*/
/*標準リンク設定*/
a  { color: blue; text-decoration: none }
a:hover   { color: blue; text-decoration: underline }
a:active { color: #666666; text-decoration: none }
a:visited  { color: #36c }

/*ヘッター、フッター用リンク設定。コメントの header menu area 〜 /header menu area 及びfooter area 〜/footer area で使用します。*/
.lnk0:link{color:#1b2e57}
.lnk0:visited{color:#1b2e57}
.lnk0:active {color:#1b2e57}
.lnk0:hover  { color: #455d89; text-decoration: none }

/*ページトップ・戻るエリア文字設定*/
.pagetop  { font-size: 11px; text-align: right; letter-spacing: 1px }

/*標準文字設定（12pixel・グレー文字）*/
.n12G-120     { font-size: 12px; line-height: 120%; letter-spacing: normal; padding-left: 2px }
/*標準文字設定（11pixel）*/
.n11-0    { font-size: 11px; line-height: normal;}

/*
	[00] 950dfont引継ぎここまで
*/

/*
	[01] main
*/

#main{
margin: 10px;
width: 966px;
}


#main h2.free{
border: 0;
margin-top: 5px;
margin-bottom: 10px;
}

#main h3{
border: 0;
margin-bottom: 10px;
}

#main h4{
border: 0;
margin-top: 10px;
margin-bottom: 0px;
}

#main h4.setup{
margin-top: 10px;
margin-bottom: 0px;
text-align: left;
width: 925px;
padding: 0px;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}

/* main_content */
#main_content {
	width:986px;
}

/* ｾｦﾉﾊｲ霖・｢･ﾆ･ｭ･ｹ･ﾈ */
#main div#commodity{
float: left;
width: 715px;
min-height:100px;
margin-right: 10px;
}
#main div#commodity div.inner{
width: 716px;
border-bottom: 2px solid #000000;
}

#main div#commodity div.inner_02 {
background-color: #000000;
padding-left: 4px;
padding: 3px;
margin: 0px;
text-align: left;
float:left;
color: #ffffff;
line-height: 1.5em;
letter-spacing: 0.2em;
text-indent: 5px;
font-size: 12px;
clear: both;
}

#main div#commodity img{
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}

#main div#commodity p{
font-size: 12px;
float: right;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 0px;
display: inline;
width: 100%;
}
#main div#commodity p.text_tax{
font-size: 10px;
float: right;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
display: inline;
}

#main div#commodity p.right{
font-size: 12px;
float: right;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}

#main div#commodity p.service{
color: #FF0000;
}


/* PC設定 */
#main div#flow{
float: right;
width: 230px;
height: 100px;
vertical-align: top;
padding-left: 10px;
}


/* コース選択 */
#main div#course{
width: 956px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
text-indent:10px;
vertical-align: middle;
font-size: 14px;
letter-spacing: 2px;
font-weight: bold;
background-color: #cccccc;
clear: both;
}

#main div#course02{
clear: both;
font-size:12px;
text-indent:5px;
text-align: right;
float: right;
margin-top: 0px ;
display: inline ;
}

#main div#course02 p.align-r{
background: url(/shopping/internet/img_cmn/arrow_price.gif) no-repeat;
text-indent:10px;
text-align: right;
float: right;
margin-top: 0px ;
margin-left: 10px;
}

/* イー・モバイル契約商品の購入について */
#main div.explanation-area {
	margin:20px 0 20px 0;
	padding:10px;
	border:#ff0000 1px solid;
}
#main div.explanation-area h4 {
	margin:0 0 20px 0;
	font-size:17px;
	color:#ff0000;
}
#main div.explanation-area h5 {
	margin:0 0 10px 0;
	font-size:17px;
}
#main div.explanation-area p {
	margin:0 0 20px 0;
	font-size:13px;
	line-height:1.4;
}
#main div.explanation-area p.announce {
	font-size:12px;
}
#main div.explanation-area p.img {
	margin:0 0 20px 0;
	text-align:center;
}
#main div.explanation-area p span.important-txt {
	color:#ff0000;
	font-weight:bold;
}

/* 本人確認に使用する書類 */
#main div.require-area {
	width: 100%;
	margin:0 0 20px 0;
}
#main div.require-area h4 {
	margin:0 0 10px 0;
	font-size:17px;
	color:#ff0000;
	line-height:1.3;
}
#main div.require-area p {
	margin:0 0 20px 0;
	font-size:13px;
	line-height:1.4;
}
#main div.require-area div.column-wrapper div.column01 {
	float:left;
	width:230px;
	margin:0 10px 10px 0;
	font-size:13px;
	line-height:1.4;
}
#main div.require-area div.column-wrapper div.column01 h5 {
	margin:0 0 10px 0;
	padding:3px 10px;
	font-size:13px;
	font-weight:bold;
	height:2.5em;
	background-color:#ffffb8;
}
#main div.require-area div.column-wrapper div.column01 p.img {
	height:160px;
	margin:0 0 10px 0;
}
#main div.require-area div.column-wrapper div.column01 ol li {
	margin:0 0 2px 0.8em;
	text-indent:-0.8em;
	list-style-type:none;
	list-style-position:inside;
	font-size:12px;
}
#main div.require-area div.column-wrapper div.column01 ul li {
	margin:0 0 0 1.1em;
	text-indent:-1.1em;
	list-style-type:none;
	list-style-position:inside;
	font-size:12px;
}

/* ウォーターサーバチェック */

#main h4 .hissu-yel {
	margin:0 0 0 10px;
	padding:3px;
	-webkit-border-radius: 5px;
	border-radius: 3px;
	background:#ff9d40;
	color:#ffffff;
	font-weight:bold;
}
#main div.water-check-area {
	text-align:left;
	margin:0 0 20px 0;
	padding:0 0 10px 0;
	border:#000000 1px solid;
}
#main div.water-check-area h4 {
	margin:0 0 20px 0;
	padding:10px 10px;
	border-bottom:#000000 1px solid;
	background-color:#bdd5fe;
	font-size:14px;
	font-weight:normal;
	color:#000000;
}
#main div.water-check-area .two-column-wrapper {
	padding:0 20px 10px 20px;
}
#main div.water-check-area .region-list {
	float:left;
	width:400px;
}

#main div.water-check-area .water-notice {
	color:#ff0000;
	border: 1px #F00 solid;
	padding: 4px;
}
.water-notice_title{ font-size:18px; color:#F00;}
.water-notice02{
	padding: 10px 0;
	display: inline-block;
	color: #F00;
	font-size: 14px;
}

.water-notice_s{
	font-size: 12px;
}

.water-notice_ss{
	font-size: 10px;
}

#main div.water-check-area h5 {
	margin:0 0 5px 0;
	color:#386BB3;
	font-size:14px;
}
#main div.water-check-area p {
	margin:0 10px 15px 0;
	font-size:14px;
	line-height:1.4;
}
#main div.water-check-area div.water-image-area {
	float:right;
	width:520px;
}

#main .two-column-wrapper02 {
	margin:0 0 30px 0;
}

#main div.water-product-area {
	float:left;
	width:470px;
	border:#286bcc 1px solid;
	text-align:left;
}
#main div.water-product-area h4 {
	width:190px;
	margin:0;
	padding:5px 0;
	border-right:#286bcc 1px solid;
	border-bottom:#286bcc 1px solid;
	background-color:#bdd5fe;
	text-align:center;
	font-size:14px;
	font-weight:normal;
	color:#000000;
}
#main div.water-product-area .inner_03 {
	padding:10px;
}
#main div.water-product-area .product-img {
	float:left;
	width:180px;
	text-align:center;
}
#main div.water-product-area .product-name {
	float:right;
	width:270px;
	color:#000000;
	font-size:14px;
}

#main div.water-exp-area {
	float:right;
	width:450px;
	padding:10px;
	background:#fdf3cf;
	text-align:left;
	font-size:14px;
	line-height:1.6;
}
#main div.water-exp-area h4 {
	margin:0 0 10px 0;
	font-weight:normal;
	font-size:14px;
	color:#000000;
}
#main div.water-exp-area h4 span {
	color:#386bb3;
}

#main div.water-button-area {
	text-align:center;
}
#main div.water-button-area p {
	margin:0 0 10px 0;
	font-size:13px;
}
#main div.water-button-area div.check-area {
	margin:0 0 30px 0;
}



/** 役務選択ボタン **/
.select-cell label {
	position:relative;
	display:block;
	margin:10px 20px 10px 10px;
	padding:3px 0 3px 7px;
	border:#ccc 1px dotted;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color:#fff;
}
.select-cell label.chosen {
    background-color:#fed991;
}
.select-cell label.nochoice {
    background-color:#efefef;
}

/** js背景色操作 **/
label.selectLabel {
    background-color:#fed991;
}
label.unselectLabel {
    background-color:#fff;
}

.selectCell {
    background-color:#fed991;
}
.unselectCell {
    background-color:#fff;
}


/* 上記内容を確認する */
#main div.check-area {
	margin:0 0 50px 0;
}
#main div.check-area p {
	text-align:center;
}

/* ･､･�･鬣､･�･ﾕ･・ｼ･・
----------------------------- */
#main div#note{
width: 925px;
color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
}

/* ワイモバイルタブレット 事業法対応 */

div#includeYmobileService {
    border: #ff0000 1px solid;
    margin: 20px 0 20px 0;
    padding: 10px;
}

div#includeYmobileService div.pageWrapper ul {
    font-size: 13px;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

div#includeYmobileService div.pageWrapper h4 {
    color: red;
    font-size: 17px;
    margin: 0 0 20px 0;
}

/* P20lite 追加対応 20180831 */

label.unselectLabel.ekimu_sp_plan p.recommend {
    color:  red;
    padding:  5px;
    font-weight:  bold;
}

label.ekimu_sp_plan.selectLabel p.recommend {
    color:  red;
    padding:  5px;
    font-weight:  bold;
}

/* ------------------------------------------
  [02]:layout
------------------------------------------ */

/* align */
.left{ text-align:left; }

.right{
text-align:right;
font-size: 14px;
}

.center{ text-align:center; }

.middle, *:first-child+html body img.middle{ vertical-align:middle; }

.fleft{ float:left; }

.fright{ float:right; }

.block{ display:block; }

.inline{ display:inline; }

.hide { display: none; }

/* margin */
.mt0 { margin-top:0 !important;}
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mr0 { margin-right:0 !important;}
.mr10 { margin-right:10px !important;}
.mr20 { margin-right:20px !important;}
.mr30 { margin-right:30px !important;}
.mr40 { margin-right:40px !important;}
.mr50 { margin-right:50px !important;}
.mb0 { margin-bottom:0 !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.ml0 { margin-left:0 !important;}
.ml10 { margin-left:10px !important;}
.ml20 { margin-left:20px !important;}
.ml30 { margin-left:30px !important;}
.ml40 { margin-left:40px !important;}
.ml50 { margin-left:50px !important;}

/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
line-height: 0;/* for modern browser */
}
.clearfix {
display: inline-block;
min-height: 1%;
}


/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* End hide from IE-mac */


/* clear */
.clear{
clear:both;
height:1px !important;
font-size:1px !important;
margin:0 !important;
}

/*  ------------------------------------------
  [03] table
------------------------------------------  */
/* menu_01 */
#main table.menu_01{
border-collapse:collapse;
border-spacing: 0;
margin-bottom:1em;
background-color: #fafad9;
text-align: center;
letter-spacing: 1px;
border: 1px solid #999999;
font-size: 12px;
font-weight: bold;
width: 966px;
}

#main table.menu_01 th,
#main table.menu_01 td {
padding:4px;
line-height: 1.25;
border:1px solid #999999;
font-size: 12px;
}
	
#main table.menu_01 th.course_01 {
text-align:left;
background-color: #ffffff;
width: 278px;
}

#main table.menu_01 td.contents_01,
#main table.menu_01 td.contents_02,
#main table.menu_01 td.contents_03,
#main table.menu_01 td.contents_04,
#main table.menu_01 td.contents_05,
#main table.menu_01 td.contents_06 {
background-color: #ffffff;
vertical-align: middle;
}

#main table.menu_01 td.contents_01{
font-size: 12px;
text-align:left;
}

#main table.menu_01 td.contents_02{
font-size: 10px;
text-align:left;
}

#main table.menu_01 td.contents_03{
font-size: 18px;
}

#main table.menu_01 td.contents_05{
font-size: 20px;
font-weight: bold;
}

#main table.menu_01 td.contents_06{
font-size: 22px;
font-weight: bold;
color: #ff0000;
}

#main table.menu_01 p.align_l{
vertical-align: top;
float: left;
display: block;
clear: both;
font-style: normal;
}

#main table.menu_01 p.align_r{
vertical-align: bottom;
float: right;
clear: both;
}

#main table.menu_01 p.contents_05_c{
vertical-align: top;
font-size: 10px;
text-align: center;
}

span.price-y { font-size:14px;
vertical-align: text-bottom;
}

span.price-y02 { font-size:10px;
vertical-align: top;
}
#main #commodity .clearfix .right.clearfix tax {
	font-size: 12px;
}
#main #commodity .clearfix .right.clearfix .text_tax {
	font-size: 10px;
}


/*  ------------------------------------------
  [99] Naire Service
------------------------------------------  */
/* common */
#naire .error{
	background: #fdd!important;
	border-color: red!important;
}

.clearfix::after {
    content: "";
    display: block;
    height: 30px;
    clear: both;
}
.fl { float: left; }
.tac { text-align: center; }
.mb20 { margin-bottom: 20px; }
#naire {
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic","Italianno", "sans-serif";
	width: 986px;
	margin: 0 auto;
}
#naire .naireBox {
  display: flex;
	margin-top: 20px;
	margin-bottom: 50px;
}

#naire .naireBoxLeft {
	flex-basis: 50%;
	position: relative;
	margin-right: 15px;
}
#naire .naireBoxRight {
	flex-basis: 50%;
	padding-top: 5px;
	display: block;
	position: relative;
	margin:0 auto 15px auto;
	padding: 10px 0;
	background: #f1f1f1;
}
#naire .naireBoxRight h2{
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 0 -20px;
	width: calc(100% + 20px);
	font-size: 22px;
	color:#FFF;
	background: #7b7f86;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#naire .naireBoxRight h2:before{
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px #616367;	
}

#naire .naireBoxLeftImg {
	max-width: 550px;
}

#naire .naireName {
	display: inline-block;
	width: 10em;
	position: absolute;
  	top: 210px;
  	left: 45%;
	color: #FFF;
	font-size: 20px;
}

#naire .naireInputTable{
	width: 93%;
	font-size: 16px;
	box-sizing: border-box;
	margin: 0 auto 10px auto;
}
#naire .naireInputTable th{
	text-align: left;
	padding: 0;
}
#naire input[name*="selDesignType"] {
	vertical-align: -1px;
	margin-right: 4px;
	margin-left: 8px;
}

#naire input[name*="designName"] {
	margin: 10px 6% 10px 0;
	width: 78%;
	padding: 3% 5%;
	border-radius: 4px;
	border: 1px solid #999;
	font-size: 100%;
	display: block;
}

#naire .naireAttention {
  	margin-bottom: 20px;
	font-size: 14px;
}
#naire .nairePreAttention {
	padding: 10px;
}
#naire .naireNotice {
	font-size: 14px;
	background: #fffbdf;
    border: 1px solid #ccc;
	padding: 16px 20px;
	margin:0 auto 40px auto;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 10px;
	width: 100%;
}

#naire .naireNoticeMsg {
	text-align:left;
}
#naire .naireLabelHorizontal + #naire .naireLabelHorizontal {
	margin-left: 20px;
}
#naire .naireRadioLabel {
	display: inline-block;
	background: #fff;
	padding: 10px 16px 10px 10px;
	border: 1px solid #aaa;
	border-radius: 4px;
	cursor: pointer;
	background: #FFF;
	cursor: pointer;
}
#naire .naireNoticeConfirm {
	display: block;
    margin: 20px auto 0 auto;
    width: 300px;
    border: 1px dotted #ccc;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
	background: #FFF;
}
#naire .naireNoticeConfirm:hover {
	background-color: #fff993;
}
#naire .naireNoticeConfirm label{
	cursor: pointer;
}
#naire .naireRadioLabel:hover, #naire .naireRadioLabel:selected {
	border:1px solid #ff5858;
	background: #fde08b;
}

#naire .hilight{
	background:#ffe932!important;
}


/*注意事項*/
#naire p.conf {
    font-size: 12pt;
	background: #333;
	color: #FFF;
	margin: -30px auto 15px auto;
	width: 50%;
	padding: 2px 0;
	border-radius: 30px;
}

/*カートに入れる*/
.submitbtn {
    text-align: center;
}
/*
.submitbtn a {
    background: #dd0000;
    display: inline-block;
    margin: auto;
    padding: 0px 26px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
    border-radius: 8px;
    font-size:18px;
    font-weight: bold;
}
.submitbtn a:hover {
	filter: brightness(140%);
}
*/