@charset "utf-8";

/*サイト共通パーツ設定*/

.animation {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s;
	transition: all .3s;
}

.animation:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	-webkit-transition: all .3s;
	transition: all .3s;
}



/*緑のボタン*/
.bt_01 {
	border-width: 1px;
	-moz-border-radius: 1%;
	-webkit-border-radius: 0%/3%;
	border-radius: 0%/3%;
	border-style: solid;
	-moz-box-shadow: 2px 2px 0px rgb(0, 174, 193);
	-webkit-box-shadow: 2px 2px 0px rgb(0, 174, 193);
	box-shadow: 2px 2px 0px rgb(0, 174, 193);
	transition: 0.5s;
	display: block;
	border-color: rgb(0, 174, 193);
	background-color: rgb(255, 255, 255);
	color: #00AEC1 !important;
	padding: 18px 90px;
	text-align: center;
}

.bt_01:hover {
	background-color: #00AEC1;
	color: #FFF !important;
}

/* SP用 */
@media screen and (max-width: 740px) {
	.bt_01 {
		padding: 18px;
		text-align: center;
	}
}


.p-btn-column {
	display: none;
	position: fixed;
	bottom: 250px;
	right: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 20px;
	font-weight: bold;

	background: #01a7e5;
	color: #FFF !important;
	padding: 2em .5em 1.5em .5em;
	border-radius: 8px 0 0 8px;

	z-index: 5;
	transition: background 0.3s, color 0.3s, transform 0.3s;

}

.p-btn-column {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 1s ease-out 0.3s forwards;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.p-btn-column:hover {
	background: #008fc1;
	color: #fff !important;
	transform: translateY(0) scale(1.15);
}

@media (min-width: 980px) {
	.p-btn-column {
		display: block;
	}
}



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

	/* テーブル全体のラッパー（HTMLに追加が必要） */
	.price_wrapper {
		overflow-x: auto;
		display: block;
	}

	.demo03 {
		display: flex;
		/* table要素をflexにして横に並べる */
		width: 100%;
	}

	.demo03 thead {
		flex-shrink: 0;
		/* 見出し列は縮めない */
	}

	.demo03 tbody {
		display: flex;
		overflow-x: auto;
		/* データ部分を横スクロール可能に */
		white-space: nowrap;
		/* テキストの折り返しを防ぐ */
		-webkit-overflow-scrolling: touch;
		/* iOSのスクロールを滑らかに */
	}

	.demo03 tr {
		display: flex;
		flex-direction: column;
		/* 縦方向に並べる（1枚のカード状にする） */
	}

	/* 各セルの高さを揃えるための設定 */
	.demo03 th,
	.demo03 td {
		display: block;
		height: 120px;
		/* 全てのセルの高さを統一（調整してください） */
		width: 150px;
		/* 横幅を固定（調整してください） */
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		white-space: normal;
		/* セル内は改行を許可 */
		padding: 10px;
		text-align: center;
	}

	/* 1列目の見出しだけ背景色を変える等の調整 */
	.demo03 thead th {
		background: #f4f4f4;
		font-weight: bold;
		width: 100px;
		/* 見出し列の幅を少し狭く */
	}
}