@charset "utf-8";

.clear:after{content: ".";display:block;height:0;font-size:0;clear: both;visibility:hidden;}
.clear {display: inline-block;} 
* html .clear {height: 1%;}
.clear {display:block;}

/* =========================================================
 	layout Style
 ========================================================= */

/* 1. PC ⇔ Tab / Tab ⇔ MB Change
--------------------------------------------------------- */
/* 960px以上(PC) */
@media only screen and (min-width: 960px) {
	.onlypc {
		display: block;
	}
	.onlysm {
		display: none;
	}
	.onlytab {
		display: none;
	}
	/* PC・Tablet（SM以外） */
	.pctab {
		display: block;
	}
	/* Tablet・SM（PC以外） */
	.smtab {
		display: none;
	}
}
/* 768px～959px(Tablet) */
@media only screen and (min-width:768px) and (max-width: 959px){
	.onlypc {
		display: none;
	}
	.onlysm {
		display: none;
	}
	.onlytab {
		display: block;
	}
	/* PC・Tablet（SM以外） */
	.pctab {
		display: block;
	}
	/* Tablet・SM（PC以外） */
	.smtab {
		display: block;
	}	
}
/* 767px以下(SM) */
@media only screen and (max-width: 767px) {
	.onlypc {
		display: none;
	}
	.onlysm {
		display: block;
	}
	.onlytab {
		display: none;
	}
	/* PC・Tablet（SM以外） */
	.pctab {
		display: none;
	}
	/* Tablet・SM（PC以外） */
	.smtab {
		display: block;
	}
}

/* 2. Page Style
--------------------------------------------------------- */
article {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
}
#main-visual {
	max-width: 1200px;
	margin: 0 auto;
}

.read1st {
	background: #FFFF4D;
	color: #ff0000;
	font-size: 2em;
	text-align: center;
	padding: 0.4em;
	margin: 1em 0;
}
/* ----- 四か条 ----- */
.sct-clause {
	margin:0 auto 30px auto;
	max-width:960px;
	
}
.clause {
	box-sizing: border-box;
	background: #FCF7ED;
	border: 3px solid #D93600;
	border-top: none;
	padding: 0.5em 1em;
}
	.clause dd {
		font-size: 1.3em;
		margin: 0.5em 0 1.5em;
	}
	.clause dd:last-child {
		margin-bottom: 0;
	}

.note {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	margin: 2em 0 1em;
}
/* ----- NG・OK例 ----- */
.sct-sample:after {
	content: '';
	display: block;
	clear: both;
}
.sct-sample,
.sct-sample figure,
.sct-sample ul,
.sct-sample li {
	box-sizing: border-box;
}
.sct-sample,
.sct-warning {
	border: 2px solid #f2397d;
	border-radius: 10px;
	overflow: hidden;
	margin:0 auto;
	padding: 24px;
}
.sct-sample{
	border: 2px solid #fffb8f;
	border-radius: 10px;
	overflow: hidden;
	width:100%;
	margin:0 auto;
	padding: 24px;
	background: #fffff8;
}
	.sct-sample h2,
	.sct-warning h2 {
		background: #fffb8f;
		color: #7c7879;
		font-size: 18px;
		padding: 12px;
		text-align: center;
		font-weight: normal;
		margin-left: -24px;
		margin-right: -24px;
		margin-top: -24px;
		margin-bottom: 24px;
		font-weight: bold;
	}
	.sct-sample h3{
		font-size: 18px;
		padding:24px 12px 0 12px;
		border-top: 1px dotted #ccc;
		margin-bottom: 12px;
		line-height: 1.4;
	}
	/*.sct-sample figure {
		width: 60%;
		padding: 2.5em 1.5em 1em;
		float: right;
	}
	.sct-sample ul {
		width: 40%;
		float: left;
	}*/
	.sct-sample li,
	.sct-warning li {
		list-style: disc;
		margin-left: 2em;
		font-size: 16px;
	}
	.sct-sample li + li,
	.sct-warning li + li  {
		margin-top: 0.5em;
	}
		.sct-sample li span {
			color: #ff0000;
			font-weight: bold;
		}
/* ----- 規定サイズ ----- */
.sct-size:after {
	content: '';
	display: block;
	clear: both;
}
.sct-size,
.sct-size figure,
.sct-size dl,
.sct-size dt,
.sct-size dd {
	box-sizing: border-box;
}
	.sct-size figure {
		width: 30%;
		padding: 1em;
		float: left;
	}
	.sct-size dl {
		width: 70%;
		border: 2px solid #5B8AE1;
		border-radius: 0 0 10px 10px / 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
		-moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;
		background: #DCF8FC;
		float: right;
	}
	.sct-size dt {
		background: #5B8AE1;
		color: #ffffff;
		font-size: 2em;
		text-align: center;
		padding: 0.2em 0.5em;
	}
	.sct-size dd {
		padding: 1em;
		font-size: 1.4em;
		line-height: 1.8;
	}
		.sct-size dd span {
			color: #0000FF;
			font-weight: bold;
		}
		.sct-size dd img {
			margin: 1.5em auto 0;
		}
.sct-size ol {
	counter-reset: ol-num;
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
}
	.sct-size ol li + li {
		margin-top: 0.5em;
	}
	.sct-size ol li:before{
		counter-increment: ol-num;
		content: "（" counter(ol-num) "）";
	}
	
/* ----- 金額アピール ----- */
.sct-price {
	margin: 2em 0;
}
.sct-price p {
	color: #ff0000;
	font-weight: bold;
	text-align: center;
	font-size: 2em;
}

/* ----- 注意事項 ----- */

.sct-warning {
	border-color: #f2397d;
	margin-bottom: 0;
	background: #fff9fb;
}
	.sct-warning h2 {
		background: #f2397d;
		color: #ffffff;
	}
	.sct-warning ul {
		padding: 1em;
	}
	.sct-warning li {
		margin-left: 1.5em;
	}


.sct-rosen{
	border: 2px solid #29adf5;
	border-radius: 10px;
	overflow: hidden;
	width:100%;
	margin:0 auto;
	padding: 24px;
}
	.sct-rosen h2{
		background: #29adf5;
		color: #fff;
		font-size: 18px;
		padding: 12px;
		text-align: center;
		font-weight: normal;
		margin-left: -24px;
		margin-right: -24px;
		margin-top: -24px;
		margin-bottom: 24px;
	}

.page-nav{
	background: #29adf5;
	margin-bottom: 48px;
	text-align: center;
}
.wrap-page-nav a{
	display: block;
	text-align: center;
	padding: 12px;
	background: #29adf5;
    color: #fff;
    font-size: 18px;
}
.wrap-page-nav a:hover{
	text-decoration:none;
	background: #56c3ff;
	border-radius: 0;
}
.wrap-page-nav a:before{
	content: "\f0dd";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
    margin-right: 12px;
    position: relative;
    top: -3px;
}
.wrap-page-nav a.add-border-left{
	border-left: 1px solid rgba(255,255,255,0.5);
}
.wrap-page-nav a.add-border-right{
	border-right: 1px solid rgba(0,0,0,0.1);
}

/* 768px～959px(Tablet) */
@media only screen and (min-width:768px) and (max-width: 959px){
	.sct-price p {
		font-size: 2em;
	}
}

/* 767px以下(SM) */
@media only screen and (max-width: 767px) {
	#main-visual {
		max-width: 768px;
	}
	.wrap-page-nav a{
		font-size: 14px;
	}
	.read1st,
	.sct-sample h2,
	.sct-rosen h2,
	.sct-size dt {
		font-size: 18px;
		line-height: 1.3;
	}
	.sct-clause,
	.sct-sample,
	.sct-size,
	.sct-warning {
		width: 98%;
		margin: 0 auto;
	}
	.sct-warning h2,
	.sct-rosen h2{
		text-align: center;
		font-weight: normal;
		margin-left: -12px;
		margin-right: -12px;
		margin-top: -12px;
		margin-bottom: 12px;
	}
	.sct-clause {
		margin-bottom: 2em;
	}
	.clause {
		padding: 0.5em 0.3em;
	}
	.clause dd {
		padding: 0 0.5em;
	}
	.note,
	.sct-sample li,
	.sct-size dd,
	.sct-warning li {
		line-height: 1.4;
		font-size: 14px;
	}
	.sct-warning{
		padding: 12px;
	}
	.sct-rosen{
		padding: 12px;
	}
	.sct-sample ul,
	.sct-sample figure {
		width: 100%;
	}
	.sct-sample figure {
		padding: 1em 0.4em 1em;
	}
	.sct-sample img {
		margin: 0 auto;
	}
		.sct-sample li,
		.sct-warning li {
			margin-left: 1.2em;
		}
		.sct-sample li + li,
		.sct-warning li + li {
			margin-top: 0.2em;
		}
	
	.sct-size dl,
	.sct-size figure {
		width: 100%;
	}
	.sct-size figure > img {
		margin: 0 auto 1em;
		width: 30%;
	}
	.sct-size dd img {
		max-width: 100%;
	}
	.sct-price p {
		font-size: 1.5em;
	}
}

/* Tab(未使用)
--------------------------------------------------------- */
.tab,
.tab li {
	box-sizing: border-box;
}
.tab{
	overflow: hidden;
	margin-bottom: 1em
}
.tab li {
	/*width: 15%;*/
	text-align: center;
	background: #99CCCC;
	padding: 5px 0;
	float: left;
	font-size: 1.2em;
}
/*.tab li:nth-child(5) {
	width: 25%;
}*/
.tab li + li {
	border-left: 2px solid #ffffff;
}
.tab li.select {
	background: #4F9D9D;
	color: #ffffff;
}
.content > div {
	display: none;
}
.content {
	width: 96%;
	margin: 0 auto 2em;
}
.content div.select {
	display: block;
}

/* 767px以下(SM) */
@media only screen and (max-width: 767px) {
 .tab li {
	 border: 1px solid #ffffff;
	 border-top: none;
 }
}
/* NG List
--------------------------------------------------------- */
.sct-data .note {
	color: #ff0000;
	margin-bottom: 0;
}
.ng-list {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0 30px;
}
.ng-list,
.ng-list th,
.ng-list td {
	border: 1px solid #cccccc;
	box-sizing: border-box;
}
	.ng-list th {
		background: #eee;
		color: #111;
		font-weight: bold;
		text-align: center;
	}
	.ng-list th,
	.ng-list td {
		padding: 8px;
	}

/* API Table(PC)
--------------------------------------------------------- */
.sct-data {
	width: 98%;
	margin: 0 auto 2em;
}


.tbl-labike {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 30px;
}
.tbl-labike a {
	white-space: nowrap;
}

.tbl-labike,
.tbl-labike th,
.tbl-labike td {
	border: 1px solid #cccccc;
	box-sizing: border-box;
}
	.tbl-labike th,
	.tbl-labike td {
		padding: 8px;
	}
	.tbl-labike th {
		background: #4F9D9D;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		font-size: 1.3em;
	}
	.td-area {
		font-size: 16px;
		font-weight: bold;
		/*white-space: nowrap;*/
		line-height: 1.4;
	}
		.td-area span {
			font-size: 1.5em;
			display: block;
		}
		.td-area img {
			margin-right: 5px;
		}
	.td-period {
		text-align: center;
		white-space: nowrap;
		font-size: 14px;
	}
		.td-period span {
			font-size: 16px;
			font-weight: bold;
		}
	.td-type {
		text-align: center;
	}
	.td-price {
		color: #ff0000;
		font-weight: bold;
		text-align: right;
		white-space: nowrap;
	}
		.td-price span {
			font-size: 22px;
			padding-right: 3px;
		}
		
.btn-m,
.btn-m:hover {
	display:block;
	padding:8px;
	margin:5px auto;
	font-weight:bold;
	font-size:15px;
	text-align:center;
	border:3px solid #fff;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px; 
	box-shadow: 0 0 5px 0 #ccc;
	-webkit-box-shadow: 0 0 5px 0 #ccc;
	-moz-box-shadow: 0 0 5px 0 #ccc;
	text-decoration:none !important;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
	letter-spacing: 0.08em !important;
	color:#fff !important;
}

.btn-m i{
	padding-right:5px;
}
.blue {
	background:#3eb8d2;
	/*background:#36b2d6;*/
	text-shadow:
	1px 2px 0px #3487ab,
	1px 2px 0px #3487ab;
}
.green {
	background:#83c32f;
	text-shadow:
	1px 2px 0px #78994b,
	1px 2px 0px #78994b;
}



/* API (MB)
--------------------------------------------------------- */

.box-route {
	box-sizing: border-box;
	border: 1px solid #4F9D9D;
	border-radius: 3px;
	padding-bottom: 5px;
	margin: 1em 0;
}
	.box-route a {
		width: 96%;
		margin-left: auto;
		margin-right: auto; 
	}
	.data-area {
		/*background: #996600;*/		
		background: #4F9D9D;
		color: #ffffff;
		padding: 5px 0;
		font-size: 14px;
		font-weight: bold;
		/*white-space: nowrap;*/
		line-height: 1.4;
		font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
		text-align: center;
	}
		.data-area img {
			vertical-align: bottom;
			margin-right: 5px;
		}
		.data-area span {
			font-size: 1.5em;
			display: block;
		}
	.box-route dl:after {
		content: '';
		display: block;
		clear: both;
	}
	.box-route dl {
		box-sizing: border-box;
		padding: 5px;
	}
	.box-route dt {
		width: 5em;
		color: #ffffff;
		background: #666666;
		border-radius: 3px;
		float: left;
		text-align: center;
	}
	.box-route dd + dt {
		clear: both;
	}
	.box-route dd {
		float: left;
		margin-left: 1em;
	}
	.data-price {
		color: #ff0000;
		font-weight: bold;
		line-height: 1;
	}
		.data-price span {
			font-size: 20px;
		}
	
.box-attention:after {
	content: '';
	display: block;
	clear: both;
}
.box-attention {
	box-sizing: border-box;
	border: 1px solid #ec647f;
	border-radius: 3px;
	width: 96%;
	margin: 0 auto;
	font-size: 12px;
}
	.box-attention h2 {
		background: #ec647f;
		color: #ffffff;
		padding: 5px;
	}
	.box-attention ul {
		padding: 5px;
	}
	.box-attention li {
		text-indent: -1em;
		margin-left: 1em;
	}

/* CPN End
--------------------------------------------------------- */
.end {
	background: #FFFF00;
	color: #ff0000;
	margin: 0 auto 1em;
	border: 1px solid #ff0000;
	width: 96%;
	padding: 0.5em 1em;
	font-size: 1.2em;
}



article	h2{
	margin-bottom:0;
}


.btn-reserve:before {
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -10px;
    font-weight: bold;
}


td.plan-title{
	width:40%;
}
.plan-price{
	width: 30%;
}
td.plan-reserve{
	width: 30%;
}
.plan-price span{
	font-size: 32px;
}
.plan-price span:after{
	content: "円～";
	font-size: 13px;
	margin-left: 2px;
}



.plan-tbl{
	 background: #f1faff;
}
@media only screen and (max-width: 767px) {
td.plan-title,
.plan-price,
td.plan-reserve{
	width: 100%;
}
.plan-price span{
	font-size: 26px;
}
td.plan-title{
	background: #f1faff;
	border-top: 2px solid #29adf5;
}
}