@charset "UTF-8";
/* CSS Document */

p{font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;}

.pc2 >span > #step{
	color:#5ADDDE !important;
	opacity:1;
}

.step_pho{
	display: table-cell;
	float:right;
	width:45%;
	height:auto;
	padding-left:20px;
}

.left_tableblock{
	display:table-cell;
	width:55%;
	padding:0 20px 10px 0;
	vertical-align:top;
}

.step_table{
	display:table;
	margin-top:25px;
}

.step_pho_mini{
	display: table-cell;
	width:45%;
	height:auto;
	padding-left:20px;
}
.step_pho_mini_border{
	display: table-cell;
	width:45%;
	height:auto;
	padding:20px;
	border:#ddd solid 2px;
}


.step_contact_btn,.step_contact_btn2{
	display:block;
	width:280px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	height:60px;
	line-height:60px;
	background-color:#00c8de;
	box-shadow:0 6px #0096a7;
	border-radius:5px;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.step_contact_btn{margin-top:100px;}

a > .step_contact_btn, a > .step_contact_btn2 {
	color:#fff;
	font-size:18px;
	opacity:1;
}
a > .step_contact_btn:hover,.step_contact_btn2:hover {
	box-shadow: 0 4px #0096a7;
	top: 2px;
}

/*a > .step_contact_btn,.step_contact_btn2 > a:active {
	box-shadow: 0 0 #0096a7;
	top: 6px;
}*/

.h3_first{
	margin-top:0;
	font-size:18px;
}
.h3_first span {
  background-color: #5addde;
  color: #fff;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
}
ul{
	margin-top:5px;
}
.test_btn{
	width:180px;
	height:38px;
	line-height:38px;
	background-color:#0071aa;
	font-size:15px;
	color:#fff;
	padding:5px;
	font-family:'FOT-ロダン ProN M', "游ゴシック体", "Yu Gothic", YuGothic, san-serif;
}
.new_btn{
	width:180px;
	height:38px;
	line-height:38px;
	background-color:#ffb122;
	font-size:15px;
	color:#fff;
	padding:5px;
}
.ms_login{
	display:block;
	text-align:center;
}
.ms_login a, .ms_login a:visited{
  display: inline-block;
  background-color: #5addde;
  border-radius: 5px;
  text-align: center;
  padding: 10px 20px;
  font-size: 24px;
  line-height:1.6em;
  text-decoration: none;
  color: #fff;
  font-weight:bold;
  margin:15px 0;
  width:50%;
  box-shadow:0 6px #44a6a7;
}

.step_mark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #ff9a00;
  border-bottom:#ff9a00 solid 2px;
  border-top:#ff9a00 solid 2px;
  padding:3px;
  background-color:#fff;
  margin-right:10px;
}
.step_mark02 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #00c8de;
  border-bottom:#00c8de solid 2px;
  border-top:#00c8de solid 2px;
  padding:3px;
  background-color:#fff;
  margin-right:10px;
}

.indent30_01 h4{
	font-size:18px;
	color:#ff9a00;
}
.indent30_02 h4{
	font-size:18px;
	color:#00c8de;
}
.login_title{
	margin-top:0;
	margin-bottom:10px;
	line-height:1em;}

.step_beacon_wrap{
	display: inline-block;
	vertical-align:top;
	background-color:#e6eaee;
	padding:8px;
	border-radius:5px;
	width:46%;
	line-height:1.4em;
	margin-left:3%;
	margin-top:15px;
	margin-bottom:15px;
	text-align:center;}
.step_beacon_wrap1{
	display: inline-block;
	vertical-align:top;
	background-color:#e6eaee;
	padding:8px;
	border-radius:5px;
	width:100%;
	line-height:1.4em;
	text-align:center;
	margin-bottom:15px;}
.step_beacon_wrap2{
	display: inline-block;
	vertical-align:top;
	background-color:#fff;
	width:46%;
	margin-left:3%;
	margin-top:15px;}
.step_beacon_wrap img, .step_beacon_wrap1 img{
	margin:10px 0;}
.step_beacon_wrap > a > h5, .step_beacon_wrap1 > a > h5{
	color:#333; line-height:1.3em;}
	
.block_4{display:inline-table;width:47%;}
.block_4_space{display:inline-table;width:4%;}
.plan_h3{
	font-size:16px;color:#fff; width:100%; border-top-right-radius:5px;border-top-left-radius:5px; padding:8px; font-weight:normal; text-align:center}
.guest_title {background : rgba(0, 200, 222, 1);}
.free_title {background : rgba(255, 177, 34, 1);}
.pay_title {background : rgba(255, 110, 110, 1);}
.premium_title {background : rgba(0, 150, 167, 1);}



/***** 導入ステップtableデザイン *****/
	
table	{border-collapse:collapse;width:100%;text-align:center;line-height:1.3em;}
thead th{
	font-size:15px;
	background:#fff4c6;
	padding:8px;
	color:#fff;
	height:169px;
	font-weight:normal;
}
thead th.null {background:#fff;}
tbody th {
	font-size:15px;
	font-weight:normal;
	background:#fff9e1;
	color:#333;
	padding:8px;
	border-bottom:1px solid #f3f0e4;
	border-right:1px solid #fff;
}
tbody td {
	font-size:15px;
	color:#333;
	padding:8px;
	border-right:1px solid #f3f0e4;
	border-bottom:1px solid #f3f0e4;
}

.plan_h4{
	margin:0; line-height:1em;}
#id_guest {background-color:#00c8de;}
#id_guest, #id_premium{border-top:#fff solid 50px; vertical-align:bottom;}
#id_free, #id_pay{border-top-right-radius:15px;border-top-left-radius:15px;}
#id_free {background-color:#ffb122; vertical-align: middle;}
#id_pay {background-color:#ff6e6e; vertical-align:middle;}
#id_premium {background-color:#0096a7;}
#id_free_font, #id_pay_font{font-size:26px;}

.guest_member,.free_member,.pay_member,.premium_member{
	background-color:#fff; width:92px;border-radius:5px; font-family:Montserrat, sans-serif;
	padding:5px 0;margin-bottom:21px;margin-top:21px;}
.guest_member{color:#00c8de}
.free_member{color:#ffb122}
.pay_member{color:#ff6e6e}
.premium_member{color:#0096a7}

.blank{
	background:#fff;
	border:none;
	height:50px;}
.guest_btn{background : rgba(0, 200, 222, 1);}
.free_btn{background : rgba(255, 177, 34, 1);}
.pay_btn{background : rgba(255, 110, 110, 1);}
.premium_btn{background : rgba(0, 150, 167, 1);}
.guest_btn,.free_btn,.pay_btn,.premium_btn{font-size:17px;border:none;}

.guest_btn a,.free_btn a,.pay_btn a,.premium_btn a{font-size:15px;padding:5px 15px; color:#fff; border:#fff solid 1px; border-radius:5px;}

/* テーブル内　申し込みボタン hover時 */
.guest_btn a:hover,.free_btn a:hover,.pay_btn a:hover,.premium_btn a:hover{background-color:#fff; opacity:1;}
.guest_btn a:hover{color : rgba(0, 200, 222, 1);}
.free_btn a:hover{color : rgba(255, 177, 34, 1);}
.pay_btn a:hover{color : rgba(255, 110, 110, 1);}
.premium_btn a:hover{color : rgba(0, 150, 167, 1);}

.guest_btn,.free_btn,.pay_btn,.premium_btn{border-bottom:none;color:#fff; height:50px;}

tbody .guest_btn.on {background : rgba(0, 200, 222, 1);}
tbody .free_btn.on {background : rgba(255, 177, 34, 1);}
tbody .pay_btn.on {background : rgba(255, 110, 110, 1);}
tbody .premium_btn.on {background : rgba(0, 150, 167, 1);}

tbody td.on {background:#f3f0e4;}
thead th.on {background:#ffca70;}

thead .td_colspan01.on {background:#ffca70;}
thead .td_colspan02.on {background:#ffca70;}
thead .td_colspan03.on {background:#ffca70;}
thead .td_colspan04.on {background:#ffca70;}
tbody th.on {background:#ffca70;}

.table_3{
	display: none;}
	
.red{
	color:#ff6f00;font-weight:bold;}


.big_en{
	display:inline;
	padding-bottom:5px;
	font-size:24px;}
.big_0{
	display: inline-block;font-size:60px;line-height:50px;height:50px;}

.accent{
	font-size:19px;}
.attention{
	font-size:12px;
	line-height:1.4em;
}
.letterspace{
	letter-spacing:-0.2em;}
.td_slash{
	font-size:14px;}
.attention_margin{margin-top:15px;}
.option{margin:0 5px 0 10px;
font-size:13px;
}

.option_menu {
width:100%;
margin:0 auto;
}

.block_930{
	display: inline;}	

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


	.step_pho{
	display: block;
	width:100%;
	padding:0px 0px 40px 0px;
}
.step_pho_mini{
	display: block;
	width:80%;
	padding:0px 0px 30px 0px;
	float:none;
	text-align:center;
}
.step_pho_mini_border{
	display: block;
	max-width: 900px;
	min-width:280px;
	height:auto;
	padding:20px;
	border:#ddd solid 2px;
	text-align:center;
}
.left_tableblock{
	display:block;
	width: 100%;
	padding:0;
	margin-bottom:15px;
}
.login_title{
	text-align:center;}
.step_contact_btn{
	margin-top:10px;
}



}

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

.step_beacon_wrap,.step_beacon_wrap1{
	display: block;
	border:none;
	padding:10px;
	border-radius:10px;
	width:100%;
	margin:15px 0 0 0;}
.step_beacon_wrap2{
	margin:0; width:100%;}	
#id_guest, #id_free, #id_pay, #id_premium{border-top-right-radius:15px;border-top-left-radius:15px; padding:0; }
table.responsive { margin-bottom: 0;width:580px;}
#id_guest, #id_premium{border-top: none;}
thead th{height: 120px;}
.big_0{font-size:38px;height:40px;}
thead td{padding:3px;}
#id_free, #id_pay {vertical-align: bottom;}

	
.guest_member,.free_member,.pay_member,.premium_member{margin-bottom:10px;margin-top:10px;}

.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 85px; overflow: hidden;}
	.pinned table { border-right: none; border-left: none; width: 100%; }
	.pinned table th, .pinned table td { white-space: nowrap; }
	.pinned td:last-child { border-bottom: 0; }

	
div.table-wrapper { position: relative; }
div.table-wrapper div.scrollable table{margin-left:85px;}
div.table-wrapper div.scrollable{ overflow: scroll; overflow-y: hidden;}
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
tbody th{font-size:12px;}
.blank{
	background:#fff;
	border:none;
	height: 56px;}
.block_930{
	display:block;}	
	
/*	
.table_th, .table_td{
	border-right:1px solid #dcd9d1;
	font-size:16px;
}
.table_th_title, .table_tbody, .table_tr, .table_th, .table_td, .table_th01, .table_th02{ 
	font-size:14px;line-height:1.2em; text-align:center; vertical-align:middle;}
.table_5{
	display:none;}
.table_3{
	display: table;width:100%;}
.table_th_title{
	display:inline-table;}
.table_tbody{
	display:table-row-group;
}
.table_tr{
	display:table-row;padding:8px 3px;
}
.table_th, .table_td{
	display: table-cell;margin:8px 3px;}
.table_th01{
	display:table-cell;
	margin:8px 3px;
	width:40%;
	font-size:16px;}
.table_td01{
	display:table;
	background:#fff;
	border-bottom:1px solid #dcd9d1;}
.table_th02{
	display:table-cell;border-right:1px solid #fff;border-left:1px solid #fff;padding:8px 3px;height:50px;}
.table_td02{
	display:table-cell;border-right:1px solid #dcd9d1;padding:8px 3px;height:51px; vertical-align:middle;}
.table_th{background-color:#fff9e1;color:#552f14;font-weight:bold;padding:8px 3px;}
.width38{width:38%;}
.width31{width:31%;}
.width62{width:62%;}
.td_padding{
	padding-top:5px;}
.option{
	line-height:2em;}
.letterspace{
	letter-spacing:-0.07em;}
*/	
}

@media only screen and (max-width:680px) {
.ms_login a, .ms_login a:visited{width:80%;}
}

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

.step_pho{
	padding-top:10px;
	padding-bottom:40px;
}

.step_pho_mini_border{
	padding:10px 5px 5px 5px;
}
.ms_login a, .ms_login a:visited{
  font-size: 20px;
  width:100%;
}

.plan_h3{
	margin-left:auto; margin-right:auto;}


.block_4{display:block; width:100%;}
.block_4_space{display:none;}
.or{
	background:#ffca70;}

.table_ul{
	width:100%;
	margin:0;}
input[type="checkbox"].on-off{
    display: none;
	transition-duration: 0.3s;
}
	
input[type="checkbox"].on-off + .table_ul{
    height: 0;
    overflow: hidden;
	transition-duration: 0.3s;
}

input[type="checkbox"].on-off:checked + .table_ul{
	border:none;
    height: auto !important;
	width:100% !important;
	max-width:100%;
	transition-duration: 0.3s;
}

	
}