/* ボタン設定画面 */
div.tab-contentA input[type="radio"] {
	display: none;
}
div.tab-contentB input[type="radio"] {
	display: none;
}
div.tab-contentC input[type="radio"] {
	display: none;
}
/* ボタンを選択するときの宣言 */
div.tab-contentA label {
	display: inline-block;
	padding: 6px;
	margin-bottom: 5px;
	font-weight: bold;
	color: #000;
	font-size: 14px;
	text-align: center;
	background-color: #FFF;
	cursor: pointer;
	border-radius: 5px;
	box-sizing: border-box;
	border: solid 1px #000;
	box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
}

div.tab-contentA label.long {
	width: 260px;
	padding: 6px;
}
div.tab-contentA label.short {
	width: 260px;
	padding: 6px;
}

div.tab-contentA label:hover {
	opacity: 0.8;
	background-color: #EFEFEF;
}
div.tab-contentA label:active {
	-webkit-transform: translateY(4px);
	-moz-transform: translateY(4px);
	-ms-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);/*影を小さく*/
	border-bottom: solid 1px #000;
}

/* ボタンが選択中のとき */
div.tab-contentA input[type="radio"]:checked + label {
	background-color: #E3F7F6;
}
div.tab-contentB input[type="radio"]:checked + label {
	background-color: #E3F7F6;
}
div.tab-contentC input[type="radio"]:checked + label {
	background-color: #E3F7F6;
}

div.tab-contentA .tab-boxA {
	padding-top: 20px;
	box-sizing: border-box;
}

/* ボタン選択前 */
div.tab-contentA .tab-boxA li {
	display: none;
}
div.tab-contentB .tab-boxB li {
	display: none;
}
div.tab-contentC .tab-boxC li {
	display: none;
}

/* 左幅がずれないようにと、点が付かないよう宣言する */
ul.noleft {
	list-style-type: none;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
}


/* 手順を選択するごとに次の手順を表示する */
#buttonA1:checked ~ .tab-boxA li.buttonA1 {
	display: block;
}
#buttonA2:checked ~ .tab-boxA li.buttonA2 {
	display: block;
}
#buttonA3:checked ~ .tab-boxA li.buttonA3 {
	display: block;
}
#buttonA4:checked ~ .tab-boxA li.buttonA4 {
	display: block;
}
#buttonA5:checked ~ .tab-boxA li.buttonA5 {
	display: block;
}
#buttonA6:checked ~ .tab-boxA li.buttonA6 {
	display: block;
}
#buttonA7:checked ~ .tab-boxA li.buttonA7 {
	display: block;
}
#buttonA8:checked ~ .tab-boxA li.buttonA8 {
	display: block;
}


#buttonB1:checked ~ .tab-boxB li.buttonB1 {
	display: block;
}
#buttonB2:checked ~ .tab-boxB li.buttonB2 {
	display: block;
}
#buttonB3:checked ~ .tab-boxB li.buttonB3 {
	display: block;
}
#buttonB4:checked ~ .tab-boxB li.buttonB4 {
	display: block;
}
#buttonB5:checked ~ .tab-boxB li.buttonB5 {
	display: block;
}
#buttonB6:checked ~ .tab-boxB li.buttonB6 {
	display: block;
}

#buttonC1:checked ~ .tab-boxC li.buttonC1 {
	display: block;
}
#buttonC2:checked ~ .tab-boxC li.buttonC2 {
	display: block;
}
#buttonC3:checked ~ .tab-boxC li.buttonC3 {
	display: block;
}
#buttonC4:checked ~ .tab-boxC li.buttonC4 {
	display: block;
}
#buttonC5:checked ~ .tab-boxC li.buttonC5 {
	display: block;
}
#buttonC6:checked ~ .tab-boxC li.buttonC6 {
	display: block;
}


/* テーブルを利用して表示 */
table.push {
	width: 500px;
	border-collapse:collapse;
	border-spacing: 0;
	margin: auto;
	margin-bottom: 20px;
}


img.recommend {
	width: 70px;
	height: 70px;
}

table.push td.imgicon {
	margin: 0;
	padding: 0;
	align:left;
	vertical-align: top;
	width: 70px;
	background: linear-gradient(135deg, #C5E2FF 24%, #FFF 25%);
	background: -moz-linear-gradient(135deg, #C5E2FF 24%, #FFF 25%);
	background: -webkit-linear-gradient(135deg, #C5E2FF 24%, #FFF 25%);

}

table.push td.btn {
	padding: 8px 8px 8px 30px;
	font-size: 12px;
	font-weight: bold;
	background: #C5E2FF;
}
table.push td.backcolor {
	background: #C5E2FF;
}


table.push div.title {
	margin-top: -10px;
	align:left;
	font-size: 20px;
	font-weight: bold;
}
table.push div.comment {
	margin: 10px 0 10px 10px;
	align:left;
	font-size: 12px;
	font-weight: bold;
}
table.push div.time {
	padding: 10px;
	margin-left: 10px;
	margin-right: 30px;
	font-size: 12px;
	font-weight: bold;
	background: #EAEAEA;
}
table.push span.smallfont {
	font-size: 10px;
}
table.push div.alltime {
	margin: 0 0 0 auto;
	border: 1px solid #888;
	text-align: center;
	width: 100px;
}


/* 空白部分 */
table.push td.space_x {
	width: 35px;
}
table.push td.space_y {
	height: 35px;
}
table.push td.space {
	height: 20px;
}



/* お問い合わせ遷移先ボタン */
.InquireButton a {
	margin: 10px;
	background: #0D2EA1;
	color: #FFF;
	padding: 10px;
	border-radius: 30px;
	position: relative;
	display: flex;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	justify-content: space-around;
	max-width: 180px;
	transition: 0.3s ease-in-out;
}
.InquireButton a:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 2rem;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: right 0.3s;
	width: 6px;
	height: 6px;
	border-top: solid 2px currentColor;
	border-right: solid 2px currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.InquireButton a:hover {
	background: #4D70F1;
}
.InquireButton a:hover:after {
	right: 1.5rem;
}

/* スマホ時表示方法 */
@media screen and (max-width: 510px) {
	table.push {
	width: 98%;
	}
	table.push div.title {
	margin-left: -10px !important;
	}
	table.push div.time {
	margin-right: 10px !important;
	margin-left: 0px !important;
	}
	table.push div.comment {
	margin-left: 0px !important;
	margin-right: 10px !important;
	}
}

@media screen and (max-width: 580px) {
	div.tab-contentA {
		margin-top: -25px !important;
	}
	div.tab-contentA label {
		font-size: 11px !important;
	}
	div.tab-contentA label.long {
		width: 49% !important;
		padding: 4px;
	}
	div.tab-contentA label.short {
		width: 49% !important;
		padding: 4px;
	}
	div.tab-contentB {
		margin-top: -25px !important;
	}
}
@media screen and (max-width: 450px) {
	div.tab-contentA label.short {
		width: 240px !important;
		padding: 4px;
	}
}

/* パソコンで見ているときのみ改行や表示を行う */
@media screen and (min-width: 540px) {
	div.pcdisplay { display: block; }
	div.spdisplay { display: none; }
}
/* スマートフォンで見ているときのみ改行や表示を行う */
@media screen and (max-width: 540px) {
	div.pcdisplay { display: none; }
	div.spdisplay { display: block; }
}