@charset "UTF-8";

/*　CSS INDEX ========================================================
01_サブメニュー
02_料金一覧表
03_オプション料金一覧表

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

p.blue {
	color:  #009FE8;
}
p.yellow {
	color:  #BFA600;
}


/*=======================================================================
01_サブメニュー（scrollspy）
========================================================================*/
/*  top_submenu
--------------------------------------------------------------------------------------------*/
#top_submenu{
	position: fixed;
	top: 40%;
	right: 0%;
	width: 190px;
	background-color:rgba(255,255,255,0.65);
	z-index:1;
	padding:5px;
	border-radius: 3px;	
}

#top_submenu ul {
	margin:0 0 0 2%;
}
#top_submenu li {
	list-style:none;
	margin:0;
	padding:0;
	line-height:1.8em;
}
#top_submenu li a {
	color:#808080;
	text-decoration:none;
}

#top_submenu li.active {
	/*background:#e0e0e0;*/
}
#top_submenu li.active a#sub01 {
	color:#009FE8;
}
#top_submenu li.active a#sub02 {
	color:#60BF80;
}
#top_submenu li.active a#sub03 {
	color:#BFA600;
}
#top_submenu li.active a#sub04 {
	color:#F37900;
}
#top_submenu li.active a#sub05 {
	color:#E4393B;
}
#top_submenu li.active a#sub06 {
	color:#BF69A3;
}
#top_submenu li.active a#sub07 {
	color:#0038A6;
}
#top_submenu li.active a#sub08 {
	color:#009FE8;
}
#top_submenu li.active a#sub09 {
	color:#60BF80;
}

#top_submenu li.second a:hover,#top_submenu li.second a:active {
	color:#009FE8;
}
#top_submenu li.third a:hover,#top_submenu li.third a:active {
	color:#009FE8;
}
#top_submenu li.fourth a:hover,#top_submenu li.fourth a:active {
	color:#60BF80;
}
#top_submenu li.fifth a:hover,#top_submenu li.fifth a:active {
	color:#BFA600;
}
#top_submenu li.sixth a:hover,#top_submenu li.sixth a:active {
	color:#F37900;
}
#top_submenu li.seventh a:hover,#top_submenu li.seventh a:active {
	color:#E4393B;
}
#top_submenu li.eighth a:hover,#top_submenu li.eighth a:active {
	color:#BF69A3;
}
#top_submenu li.nineth a:hover,#top_submenu li.nineth a:active {
	color:#0038A6;
}
#top_submenu li.tenth a:hover,#top_submenu li.tenth a:active {
	color:#009FE8;
}

/*=======================================================================
02_料金一覧表
========================================================================*/

/* レスポンシブ　テーブル 01
使用個所：/price/,/onlinestore/
--------------------------------------------------------------------------------------------*/
table.responsive01 { 
	width: 100%; 
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #808080; 

}
table.responsive01 th { 
	font-weight:normal;
	background:#eee;
}

table.responsive01 td, table.responsive01 th { 
	padding: 1em; 
	text-align: left;
}

@media (max-width: 767px) {	
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
	display: block; 
}
table.responsive01 { 
	width: 95%;
	margin:0 auto; 
}		
table.responsive01 th { 
	border-bottom: 1px solid #808080; 
}
table.responsive01 tr {
}	
table.responsive01 td.cell02,
table.responsive01 td.cell03,
table.responsive01 td.cell04 { 
	border: none;
	width:85%;
	margin: 10px auto;
	border: 1px solid #808080; /*それぞれのセルにボーダーをつける*/
}
table.responsive01 td.cell05 { 
	border: none;
	width:85%;
	margin: 10px auto;
}

}
@media (min-width: 768px) {	
table.responsive01 th { 
	border-right: 1px solid #808080;
	width:10%;
}
table.responsive01 td.cell02,
table.responsive01 td.cell03,
table.responsive01 td.cell2_02,
table.responsive01 td.cell2_03 {
	border-right: 1px solid #808080;
}
table.responsive01 td.cell05 {
	border-top: 1px solid #808080;
}
.cell02, .cell2_02 {
	width:40%;
	vertical-align:top;
}
.cell03, .cell2_03 {
	width:40%;
	vertical-align:top;
}
}

/* 文字装飾-----------------------------------------------*/

table.responsive01 td p.number{
	margin: 0;
	font-size:30px;
	color: #2babd2;
	text-align: left;
}
table.responsive01 td p.Lh25 {
	line-height:2.5em;
}
table.responsive01 p.small {
	font-size: 0.8em;
	text-align: left;
	margin:0.8em 0;
}
.cell02_priceBox span.plus {
	font-size:280%;
}
.cell03 span.plus {
	font-size:280%;
	vertical-align:middle;
}
.panda_img {
	float:left;
	margin: 0 0 0 3%;
}
.cell02_priceBox {
	float:right;
}

@media (max-width: 767px) {	
.cell02_priceBox span.plus {
	display:none;
}
td.cell03 span.plus {
	display:block;
	float:left;
	font-size:250%;	
}
td.cell03 img.cell03img01,
td.cell03 img.cell03img02 {
	display:block;
	float:left;
	width:inherit;
}
.cell02_priceBox img {
	text-align:right;
	margin: 0 0 20px 0;
}

}
@media (min-width: 768px) and (max-width: 959px) {	
.cell02_priceBox {
	width:60%;
}
.cell02_priceBox img {
	text-align:right;
	margin: 0 0 20px 5%;
}
}
@media (min-width: 960px) {	
.cell02_priceBox {
	width:65%;
}
.cell02_priceBox img {
	text-align:right;
	margin: 0 0 20px 85px;
}
.cell02_priceBox p.cell02_price {
	text-align:left;
	margin-left:10px;
}
}
@media (max-width: 767px) {	
.plus_phone {
	display:block;
	margin:0 auto;
	font-size:250%;
	text-align:center;
}
}
table.responsive01 td.visible-phone {
	padding:0;
	height:20px;
	line-height:20px;
}


/*=======================================================================
03_オプション料金一覧表
========================================================================*/
/* 使用個所　 /price/、/onlinestore/
planBox:１行、planBox02：２行
--------------------------------------------------------------------------------------------*/

@media (min-width: 768px) {
.charge_num_l{
	font-size:30px;
	margin-left:2%;
	margin-right:2%;
	font-weight: bold;
	font-family:"Arial Black", Gadget, sans-serif;
}
}

@media (max-width: 768px) {
.charge_num_l{
	font-size:30px;
	margin-left:2%;
	margin-right:2%;
	font-weight: bold;
	font-family:"Arial Black", Gadget, sans-serif;
}
}

@media (min-width: 768px) {
.planBox dl.plan01 dt.plan_ttl {
	float:left;
}
.planBox dl.plan01 dt.plan_ttl {
	width:33%;
	margin:0;
	padding:0;
}
.planBox dl.plan01 dd {
	float:left;
	width:33%;
	margin:0;
}
.planBox dl.plan01 dd.borderR_blue {
	border-right:1px solid #009FE8;
}
.planBox dl.plan01 dd.borderR_green {
	border-right:1px solid #60BF80;
}
.planBox dl.plan01 dd.borderR_yellow {
	border-right:1px solid #BFA600;
}
}
@media (max-width: 768px) {
	.planBox {
		width:90%;
		margin:0 auto;
	}
}
.planBox dl.plan01 {
	min-height: 65px;
}

.planBox dl.plan01 dt.plan_ttl {
	text-align:center;
	font-size:123.1%;
	font-weight:normal;
	min-height: 65px;
/*	line-height:1.4em;
	padding-top: 1.2em;*/
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.planBox dl.plan01 dt.plan_ttl p{
	display:block;
	color:#fff;
/*	min-height: 1.4em;*/
	line-height:1.4em;
	padding-top: 1.2em;
/*	padding-top: 0\9;*/
}
.planBox dl.plan01 dd {
	text-align:center;
	min-height: 65px;
	line-height:1.4em;
	/*padding-top: 1.2em;*/
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.planBox dl.plan01 dd p {
	padding-top: 1.2em;
}

.planBox dl.plan01 dd.planDetail01 p.green,
.planBox dl.plan01 dd.planDetail02 p.green {
	color:#60BF80;
	padding-left:1em;
	line-height:1.8em;
}
.planBox dl.plan01 dd.planDetail01 p.yellow,
.planBox dl.plan01 dd.planDetail02 p.yellow {
	color:#BFA600;
	padding-left:1em;
	line-height:1.2em;
}


/* planbox02
---------------------------------------------------*/
.planBox02 {
	margin-top: 20px;
}

@media (min-width: 768px) {
.planBox02 dl.plan02 dt.plan_ttl {
	float:left;
}
.planBox02 dl.plan02 dt.plan_ttl {
	width:33%;
	min-height: 65px;
	min-height: 118px\9;
	margin:0;
	padding:0;
}
.planBox02 dl.plan02 dd.plan_dd_row {
	float:left;
	width:66%;
	margin:0;
}
.planBox02 dl.plan02 dd.plan_dd_row dl.plan_dd_row01 {
	float:left;
	width:50%;
	margin:0;
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.planBox02 dl.plan02 dd.plan_dd_row dl.plan_dd_row02 {
	float:left;
	margin:0;	
	width:50%;
}
}
@media (max-width: 767px) {
.planBox02 dl.plan02 dt.plan_ttl {	
	min-height: 65px;
}
.planBox02 {
	width:90%;
	margin: 0 auto;
}
}

.planBox02 dl.plan02 {
	min-height:65px;
}

.planBox02 dl.plan02 dt.plan_ttl {
	text-align:center;
	font-size:123.1%;
	font-weight:normal;
	margin:0;
}
.planBox02 dl.plan02 dt.plan_ttl p{
	color:#fff;
	line-height:1.4em;
	padding-top: 1.2em;
	margin:0;
}
.planBox02 dl.plan02 dd {
	text-align:center;
	min-height: 65px;
	line-height:1.4em;
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin:0;
}

.planBox02 dl.plan02 dd.planDetail01,
.planBox02 dl.plan02 dd.planDetail02,
.planBox02 dl.plan02 dd.planDetail03 {
	min-height: 65px;	
	line-height:1.4em;
}
.planBox02 dl.plan02 dd.planDetail01 p.green,
.planBox02 dl.plan02 dd.planDetail02 p.green,
.planBox02 dl.plan02 dd.planDetail03 p.green {
	color:#60BF80;
	padding-left:1em;
	padding-top: 1.5em;
	line-height:1em;
}
.planBox02 dl.plan02 dd.planDetail01 p.yellow,
.planBox02 dl.plan02 dd.planDetail02 p.yellow,
.planBox02 dl.plan02 dd.planDetail03 p.yellow {
	color:#BFA600;
	padding-left:1em;
	padding-top: 1.2em;
	line-height:1em;
}
@media (min-width: 768px) {
.planBox02 dl.plan02 dd.planDetail01,
.planBox02 dl.plan02 dd.planDetail02 {
	border-right:1px solid #60BF80;

}
}

/* planBox03-------------------------------------------------------------------*/

@media (min-width: 768px) {
.planBox03 dl.plan03 dt.plan_ttl {
	float:left;
}
.planBox03 dl.plan03 dt.plan_ttl {
	width:33%;
	min-height: 65px;
	margin:0;
	padding:0;
}
.planBox03 dl.plan03 dd.plan_dd_row {
	float:left;
	width:66%;
	margin:0;
}
.planBox03 dl.plan03 dd p.yellow {
	margin-top:20px;
}
}
@media (max-width: 767px) {
.planBox03 {
	width:90%;
	margin: 0 auto;
}

.planBox03 dl.plan03 dt.plan_ttl {	
	min-height: 65px;
	margin:0;
}
.planBox03 dl.plan03 dd p.yellow {
	margin-top:30px;
}
}

.planBox03 dl.plan03 {
	min-height: 65px;
}

.planBox03 dl.plan03 dt.plan_ttl {
	text-align:center;
	font-size:123.1%;
	font-weight:normal;
	margin:0;
}
.planBox03 dl.plan03 dt.plan_ttl p{
	color:#fff;
	line-height:1.4em;
	padding-top: 1.2em;
}
.planBox03 dl.plan03 dd {
	text-align:center;
	min-height: 65px;
	line-height:1.4em;
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin:0;
}


/* //planbox--------------------------------------------------------------------------------------------*/

/*=======================================================================
09_パーツ:表
========================================================================*/

	/* 
	Generic Styling, for Desktops/Laptops 
	*/


/* price,onlinestoreで使用
--------------------------------------------------------------------*/
	.default_table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	.default_table th { 
	padding:10px;
	text-align:center;
	font-size:123.1%;
	font-weight:normal;
	}
	.default_table td, .default_table th { 
	padding:10px;
	font-size:123.1%;	
	text-align:center;
	}

@media (max-width: 767px) {
.default_table {
	width:90%;
	margin:0 auto;
	border-collapse:collapse;
	margin-bottom:20px;
}
.default_table th{
	padding:1%;
}
.default_table tr { border-bottom: 1px solid #ccc; }
.default_table td { 
	border: none;
	border-bottom: 1px solid #eee; 
	position: relative;
	padding:1%;
	}
.default_table .none{
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	display: none;
}
/*
.default_table tr:nth-of-type(odd) { 
		background: #eee; 
	}
	*/
}
/* //--------------------------------------------------------------------------------------------*/


@media only screen and (min-width: 768px) {
.tableWrapper {
	border-top:solid 1px #ccc;
	background:#eee;
}

.tableWrapper dl.ListDetail {
	border-bottom:solid 1px #ccc;
}

.tableWrapper dl.ListDetail dt.ListTTL{
  float: left;
  width: 38%/*14.5%*/;
  overflow: hidden;
  clear: left;
  text-align: center;
  text-overflow:clip;
  white-space: nowrap;
  background:#eee;
  padding: 10px 0;
  font-weight:normal;
  display: block;
}

.tableWrapper dl.ListDetail dd{
	padding: 10px 0;
	margin-left: 38%/*14.5%*/;
	background:#fff;
}
.tableWrapper dl.ListDetail dd p {
	margin:0;
	padding:0 0 0 10px;
}
}

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

.tableWrapper dl.ListDetail{
	margin-bottom:10px;
}

.tableWrapper dl.ListDetail dt.ListTTL {
  width: 100%;
  font-size:12px;
  text-align: center;
  background:#eee;
  padding: 5px 0;
  font-weight:normal;
}

.tableWrapper dl.ListDetail dd {
	padding: 10px 0;
	margin-left: 0px;
}
.tableWrapper dl.ListDetail dd p {
	margin:0;
	padding:0;
}
}
/*=========================================================================*/
/*=======================================================================
09_パーツ:表
左幅が長い
========================================================================*/

@media only screen and (min-width: 768px) {
table.tableWrapper02 {
	border-top:solid 1px #ccc;
	width:100%;
}
.tableWrapper02 th {
	font-weight:normal;
	font-size:14px;
	padding:10px 0;
	text-align:left;
	border-bottom:solid 1px #ccc;
	background:#eee;
}
th.table_thL {
  padding: 10px 0px 10px 7%;
}

.tableWrapper02 tr {
	border-bottom:solid 1px #ccc;
}

.tableWrapper02 td.tabledetail {
  width:80%;
  text-align: left;
  padding: 10px 0px 10px 7%;
  font-weight:normal;
}
.tableWrapper02 td.table_price {
  width:20%;
  text-align: left;
  padding-left:20px;
  padding: 10px 0;
  font-weight:normal;	
}

.tableWrapper02 tr td p {
	margin:0;
	padding:0 0 0 10px;
}
}

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

table.tableWrapper02 {
	border-top:solid 1px #ccc;
	width:100%;
}
.tableWrapper02 th {
	font-weight:normal;
	font-size:14px;
	padding:10px 0;
	text-align:left;
	border-bottom:solid 1px #ccc;
	background:#eee;
}
th.table_thL {
  padding: 10px;
}

.tableWrapper02 tr {
	border-bottom:solid 1px #ccc;
}

.tableWrapper02 td.tabledetail {
  width:80%;
  text-align: left;
  padding: 10px 5px;
  font-weight:normal;
}
.tableWrapper02 td.table_price {
  width:20%;
  text-align: left;
  padding-left:20px;
  padding: 10px 0;
  font-weight:normal;	
}

.tableWrapper02 tr td p {
	margin:0;
	padding:0 0 0 10px;
}
}
/*=========================================================================*/


/* planbox04
---------------------------------------------------*/
.planBox04 {
	margin-top: 20px;
}

@media (min-width: 768px) {
.planBox04 dl.plan04 dt.plan_ttl {
	float:left;
}
.planBox04 dl.plan04 dt.plan_ttl {
	width:33%;
	min-height: 180px;
	min-height: 233px\9;
	margin:0;
	padding:0;
}
.planBox04 dl.plan04 dd.plan_dd_row {
	float:left;
	width:66%;
	margin:0;
}
.planBox04 dl.plan04 dd.plan_dd_row dl.plan_dd_row01 {
	float:left;
	width:50%;
	margin:0;
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.planBox04 dl.plan02 dd.plan_dd_row dl.plan_dd_row02 {
	float:left;
	margin:0;	
	width:50%;
}
}
@media (max-width: 767px) {
.planBox04 dl.plan04 dt.plan_ttl {	
	min-height: 65px;
}
.planBox04 {
	width:90%;
	margin: 0 auto;
}
}

.planBox04 dl.plan04 {
	min-height:130px;
}

.planBox04 dl.plan04 dt.plan_ttl {
	text-align:center;
	font-size:123.1%;
	font-weight:normal;
	margin:0;
}
.planBox04 dl.plan04 dt.plan_ttl p{
	color:#fff;
	line-height:1.4em;
	padding-top: 1.2em;
	margin:0;
}
.planBox04 dl.plan04 dd {
	text-align:center;
	min-height: 65px;
	line-height:1.4em;
 	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin:0;
}

.planBox04 dl.plan04 dd.planDetail04 {
	min-height: 29px;	
	line-height:1.4em;
}
.planBox04 dl.plan04 dd.planDetail05 {
	min-height: 51px;	
	line-height:1.4em;
}
.planBox04 dl.plan04 dd.planDetail04 p.green,
.planBox04 dl.plan04 dd.planDetail05 p.green,{
	color:#60BF80;
	padding-left:1em;
	padding-top: 1.2em;
	line-height:1em;
}
.planBox04 dl.plan04 dd.planDetail01 p.yellow,
.planBox04 dl.plan04 dd.planDetail02 p.yellow,
.planBox04 dl.plan04 dd.planDetail03 p.yellow {
	color:#BFA600;
	padding-left:1em;
	padding-top: 1.2em;
	line-height:1em;
}
@media (min-width: 768px) {
.planBox04 dl.plan04 dt.plan_ttl p{
	margin-top:50px;
	margin-top:80px\9;
}
.planBox04 dl.plan04 dd.planDetail03 p.green,
.planBox04 dl.plan04 dd.planDetail03 p.yellow {
	margin-top:50px;
	margin-top:80px\9;
}
.planBox04 dl.plan04 dd.planDetail04,
.planBox04 dl.plan04 dd.planDetail05 {
	border-right:1px solid #60BF80;

}
}
p.green.charge_num_l.free {
	margin-left: 24%;
}
.planBox04 dl.plan04 dd.planDetail03 p.green {
	margin-top: 70px;
}
@media (min-width: 400px) and (max-width: 767px) {	
.planBox04 dl.plan04 dd.planDetail03 p.green {
	margin-top: 5px;
}
p.green.charge_num_l.free {
	margin-left: 0%;
}
.planBox04 dl.plan04 dd {
	min-height: 46px;
}
p.green.charge_num_l.free {
	padding-bottom: 7px;
}
}
@media (max-width: 640px) {
p.green.charge_num_l.free {
	margin-left: 0%;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.planBox04 dl.plan04 dd.planDetail03 p.green {
	margin-top: 0px;
}
.planBox04 dl.plan04 dd {
	min-height: 46px;
}
}
#highspeedoption {
	margin-bottom: 90px;
}