/*-----------------------------------------------------------------------------
	style_auhikari.css
	あづみ野テレビ for auひかり 料金シミュレーション
--------------------------------------------------------------------------------*/
/*----------------------------------------------------
	basic
----------------------------------------------------*/
body {
	margin: 0;
	background-color: #ffffff;
/*	background-image: url("../images_idx/background.gif");*/
	background-repeat: repeat-x;
	font-size: 10pt;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	color: #333333;
}

table {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	color: #333333;
	font-size: 10pt;
}

/*input { 
	font-family : inherit;
	font-size: 12px;
}
*/

img { border: 0; }
.lh11 { line-height: 1.1em !important; }
.ftwt_b { font-weight: bold; }
.cl_red { color: #D0021B; }



/*----------------------------------------------------
	オプション枠
----------------------------------------------------*/
.op2{ 
	position: relative; 
	border-top: 1px solid #00B3C4;
	width: 95%;
	font-weight: normal;
	font-size:14px;
	margin: 0 auto;
}
.op2:after{ 
	content: "セットトップボックス（STB）"; 
	position: absolute; 
	background: #fff; 
	font-size: 16px; 
	font-weight: bold;
	color: #00B3C4; 
	padding: 0 10px;
	top: -.7em; 
	left: 10px; 
}

.op{ 
	position: relative; 
	border-top: 1px solid #00B3C4;
	width: 95%;
	font-weight: normal;
	font-size:14px;
	margin: 0 auto;
}
.op:after{ 
	content: "CSパック"; 
	position: absolute; 
	background: #fff; 
	font-size: 16px; 
	font-weight: bold;
	color: #00B3C4; 
	padding: 0 10px;
	top: -.7em; 
	left: 10px; 
}

/*----------------------------------------------------
	カテゴリ区別表示枠
----------------------------------------------------*/
.ct_box {
	position: relative;
	margin: 0 auto;
	padding: 2em 0;
	border-radius: 5px;
	max-width: 800px;
	margin-top: 55px;
	border: solid 2px #38BBCE;
border: solid 1.6px #E6E5E5;
}

.ct_box_au {
	position: relative;
	margin: 0 auto;
	padding: 2em 0;
	border-radius: 5px;
	max-width: 800px;
	margin-top: 55px;
	border: solid 2px #F15A24;
}

.ct_box .box-title-tv {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	color: #FFF;
	background: #DF0010;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ct_box .box-title-net {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	color: #FFF;
	background: #036EB7;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ct_box .box-title-tel {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	color: #FFF;
	background: #00913A;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ct_box_au .box-title-au {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
	background: #F15A24;
	color: #FFF;
	font-weight: bold;
	padding: 10px 15px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ct_box .box-title-dc {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
    background: #00B3C4;
	color: #FFF;
	font-weight: bold;
	padding: 10px 15px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ct_box .box-title-au {
	position: absolute;
	display: inline-block;
	top: -18px;
	left: 10px;
	line-height: 1;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	background: #F15A24;
	color: #FFF;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/*----------------------------------------------------
	選択表示
----------------------------------------------------*/
.select {
 	width: 100px;
    background-color: #01B3C4;
	float: left;	
	margin: 0 auto;
	padding: 8px 0;
	color: white;
	font-weight: bold;
	text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.select_non {
 	width: 100px;
    background-color: #C0C0C0;
	padding: 8px 0;
	color: white;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.select_au {
 	width: 100px;
 	border: 1px solid #FF9600;
	float: left;	
	margin: 0 auto;
	padding: 8px 0;
	color: #E45827;
	font-weight: bold;
	text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.select150 {
 	width: 150px;
    background-color: #01B3C4;
	float: left;	
	margin: 0 auto;
	padding: 8px 0;
	color: white;
	font-weight: bold;
	text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.select150_non {
 	width: 150px;
    background-color: #C0C0C0;
	padding: 8px 0;
	color: white;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}


/*----------------------------------------------------
	サービス選択タイトル
----------------------------------------------------*/
.content {
	width: 92%;
	max-width: 900px;
	margin:0 auto;
	border-bottom: 1px solid gray;
}


.content_atn {
	width: 92%;
	max-width: 600px;
	margin:0 auto;
	margin-top: 10px !important;
}


.content_box {
	width: 92%;
	max-width: 900px;
	margin:0 auto;
}

/*----------------------------------------------------
	お問い合わせ
----------------------------------------------------*/
.toiawase {
	width: 92%;
	max-width: 772px;
	margin:0 auto;
	border: 1px solid #00B3C4;
	margin-top: 30px;
	font-size: 14px;
	background: #FFF;
	font-weight: bold;
	padding: 10px 15px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
 
/*----------------------------------------------------
	選択ラベル
----------------------------------------------------*/
/* ラジオボタンを非表示にする */
input[type=radio] { display: none; }

input[type="radio"]:checked + label {
	background: #01B3C4;/* マウス選択時の背景色を指定する */
	color: #FFFFFF; 	/* マウス選択時のフォント色を指定する */
    transition: .4s;
}

.label:hover {
	background-color: #9DD9E1; 	/* マウスオーバー時の背景色を指定する */ 
    transition: .4s;
}

.label {
	background: #C0C0C0;/* マウス選択時の背景色を指定する */
	display: block;
    display: inline-block;		/* for IE */
	float: left;
	width: 100%;
	height: 100%;
	padding: 10px 0 10px 0;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 12pt;
	cursor: pointer;	
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/* コメントサイズ小 */
.label_s {
	background: #C0C0C0;/* マウス選択時の背景色を指定する */
	display: block;
    display: inline-block;		/* for IE */
	float: left;
	width: 100%;
	height: 100%;
	padding: 10px 0 10px 0;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 10pt;
	cursor: pointer;	
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/* auひかりご契約中用ラベル */
input[type="radio"]:checked + label_au {
	background: #FF9600;/* マウス選択時の背景色を指定する */
	color: #FFFFFF; 	/* マウス選択時のフォント色を指定する */
    transition: .4s;
}

.label_au {
border: 1px solid #FF9600;
/*	background: #FF9600;/* マウス選択時の背景色を指定する */
	display: block;
    display: inline-block;		/* for IE */
	float: left;
	width: 100%;
	height: 100%;
	padding: 10px 0 10px 0;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 12pt;
	cursor: pointer;	
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.label img { pointer-events: none; }	/* for IE */
.label_s img { pointer-events: none; }	/* for IE */
.label_au img { pointer-events: none; }	/* for IE */


/*----------------------------------------------------
	footer
----------------------------------------------------*/
.footer { /* 料金表 */
    background-color: #01B3C4;
    width: 100%;
    height: 86px;
    position: fixed;
	padding-top: 6px;
    bottom: 36px;
}

.footer2 {	/*詳細を見る */
    background-color: white;
    width: 100%;
    height: 40px;
    position: fixed;
    bottom:  0px;
	font-weight: bold;
	font-size: 12pt;
	padding-bottom: 8px;
	border-bottom: 2px solid #01B3C4;
}

/* safariの場合のfooter
@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root .footer {
    background-color: #01B3C4;
    width: 100%;
    height: 90px;
    position: fixed;
	padding-top: 6px;
    bottom: 36px;
    }
}
 */
/*----------------------------------------------------
	line
----------------------------------------------------*/
hr.smline {
	border-style: dotted;
	border-width: 1px;
	color: #C0C0C0;
	height:1px;
}

/*----------------------------------------------------
	font	
----------------------------------------------------*/
.ftsz7 { 	font-size: 7pt; }
.ftsz8 { 	font-size: 8pt; }
.ftsz9 { 	font-size: 9pt; }
.ftsz10 { font-size: 10pt; }

/*----------------------------------------------------
	link
----------------------------------------------------*/
a:link {
/*	color: #0066CC;*/
	color: #000;
	text-decoration: none;
}

a:visited {
/*	color: #0066CC;*/
	color: #000;
	text-decoration: none;
}

a:active {
/*	color: #0066CC;*/
	color: #000;
	text-decoration: underline;
}

a:hover {
	color: #0066CC;
	text-decoration: underline;
}

a.downlink:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

/*----------------------------------------------------
	price_box
----------------------------------------------------*/
.pr_txt {
	border: none;
	text-align: right;
	font-size: 18px;
	font-weight: bold;
}

.course_txt {
	border:none;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	background-color: #01B3C4;
	color: white;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
}

.box_radius1 {
	padding: 10px 0 10px 0; /*上右下左*/
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	font-weight: bold;
	height: 100%;
	font-size: medium;
/* border: 1px solid gray;*/
}

.box_radius_course {
	background-color: #01B3C4;
	padding: 0 0 0 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

/*
	border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
	-webkit-border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
	-moz-border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
*/
}

.box_radius_result0 {
	background-color: #01B3C4;
	padding: 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

.box_radius_result1 {
	background-color: #01B3C4;
	padding: 0 0 0 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

/*
	border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
	-webkit-border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
	-moz-border-radius: 2px 2px 0px 0px / 2px 2px 0px 0px;
*/
}

.box_radius_result21 {
	background-color: white;
	padding: 3 1 1 1;
	border: 1px solid white;
	font-size: 9pt;
	color: black;
}

.box_radius_result22 {
	background-color: white;
	padding: 3 .5 1 .5;
	border: 1px solid white;
}

.box_radius_result23 {
	background-color: #01B3C4;
	padding: 3 1 1 1;
/*	border: 1px solid white;*/
}

.box_radius_result12 {
	padding: 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

.box_radius_result222 {
	background-color: white;
	padding: 3px 7px 1px 7px;
}

.box_radius_result232 {
	background-color: white;
	color: black;
	padding: 3px 7px 1px 7px;
}

/*----------------------------------------------------
	modal
----------------------------------------------------*/
/* ラジオボックス非表示 */
.popupModal1 > input { display: none; }
.popupModal1 > input:nth-child(1) + label { cursor: pointer; }
/* 初期設定 ポップアップ非表示 */
.modalPopup2 { display: none; }

/* 背景 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 96%;
	height: 100%;
	border-radius: 10px;
	left: 50%;
	top: 50%;
	margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 15px;
    overflow: hidden;
}

@media (min-width: 768px) {/* PCサイズ時はページの真ん中の600x600領域 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
         width: 600px;
         height: 600px;
         padding: 20px 28px;
    }

	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    	 left: 50% !important;
		 top: 50% !important;
		 margin-left: 270px !important;
		 margin-top: -310px !important;
	 }
}


.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１以外のラベルを初期は非表示 */
}

/* 透過背景 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}

/* 閉じるボタン背景 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;

    z-index: 999;
    width: 44pt;
    height: 44pt;

    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;

    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);

}

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}

.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
/*     padding-bottom: .5em;*/
     margin: .5em 0;
     font-weight: bold;
	 font-size: 20px;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     font-size: 14px;
     line-height: 1.1em;
     font-weight: normal;
}

/**************************
	 grid
**************************/
.gridWrapper {
	clear:both;
	overflow:hidden;
	margin: 0 auto;
	}

.grid div.img{
	margin: 0;
	text-align: center;
	}

.gridWrapper_csdigi {

/*	width:800px;
*/
	padding: 8px .75em;

width: 98%;
max-width: 800px;


	margin: 0 auto;
	}


/* for PC ------------------------------------------------------------*/
@media only screen and (min-width:960px){
/* グリッド全体 */
.gridWrapper{
	display:table;
	border-collapse:separate;
	border-spacing:20px;
	margin-left:-20px;
	width:800px;
	margin: 0 auto;
	}

.gridWrapper2 {
	display:table;
	border-collapse:separate;
	width:800px;
	margin: 0 auto;
	}

.gridWrapper_ttl{
	width:800px;
	background-color: #f6f6f6;
	border-left: 6px solid #FF9A00;
	padding: 8px .75em;
	margin: 0 auto;
	}


/* common - grid */
.grid{
	display:table-cell;
/*	background-color: #C0C0C0;*/
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	}

.box_prc {
	width: 56%;
	margin: 0px auto;
	}

/* iPadのみのfooter */
.ipad .footer {
    background-color: #01B3C4 !important;
    width: 100%  !important;
    position: fixed  !important;
    height: 98px  !important;
    bottom: 38px  !important;
	}

.ipad .footer2 {
    background-color: #01B3C4;
    background-color: #f6f6f6;
    width: 100%;
    height: 38px;
    position: fixed;
    bottom:  0px;
	font-weight: bold;
	font-size: 12pt;
	}

	/* 閉じるボタン背景 */
	.ipad .popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    	line-height: 36pt;
	}

} /*end960*/


@media only screen and (max-width:959px){	/*iPad 縦 */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

.grid{
	float: left;
	width: 42%;
	margin: 10px 4% 0 4%;
/*	background-color: #C0C0C0;*/
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	}

.grid_1p{ /*選択1ラインの場合 */
	float: left;
	width: 92%;
	margin: 10px 4% 0 4%;
/*	background-color: #C0C0C0;*/
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	}

.gridWrapper_csdigi {
	width: 94%;
	padding: 8px .75em;
	margin: 0 auto;
	padding: 18px .75em;
	width: 98%;
	margin: 0 auto;
	}

.grid img { margin-right: 5px; }

.gridWrapper_ttl { width:96%; }

.content { 	width: 96%; }

.box_prc { width: 60%; }


/*料金表*/
footer {
    background-color: #01B3C4 !important;
    width: 100%  !important;
    height: 94px  !important;
    position: fixed  !important;
	bottom: 28px  !important;
	}

/*詳細料金表*/
.footer2 {	
    background-color: #01B3C4;
    background-color: #f6f6f6;
    width: 100%;
    height: 38px;

    position: fixed;
    bottom:  0px;
	font-weight: bold;
	font-size: 12pt;
	}

/* iPadのみのfooter */
.ipad .footer {
    background-color: #01B3C4 !important;
    width: 100%  !important;
    position: fixed  !important;
    height: 94px  !important;
    bottom: 38px  !important;
	}

.ipad .footer2 {
    background-color: #01B3C4;
    background-color: #f6f6f6;
    width: 100%;
    height: 38px;
    position: fixed;
    bottom:  0px;
	font-weight: bold;
	font-size: 12pt;
	}



	/* 背景 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
		top: 48%;
	}
	.popupModal1 .modalTitle { margin: 3px 0; }


} /*end959*/

@media only screen and (max-width:768px){

	.box_prc { width: 58%; }

	/* 閉じるボタン背景 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    	line-height: 38pt;
	}

} /*end759*/


@media only screen and (max-width:640px){

	.box_prc { width: 80%; }

	/*料金表*/
	footer {
    	background-color: #01B3C4 !important;
		width: 100%  !important;
		height: 90px  !important;
		position: fixed  !important;
		bottom: 28px  !important;
	}

	/*詳細料金表*/
	.footer2 {	
    	background-color: #01B3C4;
		background-color: #f6f6f6;
		width: 100%;
		height: 38px;
		position: fixed;
		bottom:  0px;
		font-weight: bold;
		font-size: 12pt;
	}

} /*end640*/


@media only screen and (max-width:480px){
	.box_ttl {
    	position: relative;
    	padding-bottom: 1em;
		border: solid 1px #01B3C4;
		border-radius: 5px;
	}

	.gridWrapper_ttl { width:94%; }

	.box_prc { width: 100%; }

	/*料金表*/
	footer {
    	background-color: #01B3C4 !important;
		position: fixed  !important;
		width: 100%  !important;
/*
		height: 91px  !important;
		bottom: 28px  !important;
*/
		height: 90px  !important;
		bottom: 38px  !important;


	}

	/*詳細料金表*/
	.footer2 {	
    	background-color: #01B3C4;
		background-color: #f6f6f6;
		width: 100%;
		height: 38px;

		position: fixed;
		bottom:  0px;
		font-weight: bold;
		font-size: 12pt;
	}

	/* 閉じるボタン背景 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    	line-height: 38pt;
	}

}	/*end 480px*/


/*************************************
	オプション フェードイン表示	
*************************************/
@keyframes my-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.box_fdi {  
	animation-name: my-fade-in;
	animation-duration: 2s;
}

/**/
.ls_3m { letter-spacing: -3px; }
.ls_5m { letter-spacing: -5px; }
.ls_7m { letter-spacing: -7px; }