@charset "utf-8";

/*----------------------------------------------------------------------> ▼ general <--*/

.plan_cover {
	height: 400px;
	margin-bottom: 50px;
}

@media (width <= 767px) {
	.plan_cover {
		height: 300px;
		margin-bottom: 0;
	}
}

/*----------------------------------------------------------------------> ▼ general <--*/

.wrap_plan_header {
	margin-top: 0px;
}

.plan_header {
	padding: 30px 0;
	border-radius: var(--border_radius);
	background: rgba(255, 255, 255, 1.95);
}

.plan_header .title {
	font-family: YakuHan-R, YuGo-R;
	font-size: 45px;
	text-align: center;
}

@media (width <= 767px) {
	.plan_header {
		padding: 30px 0 0;
	}
	
	.plan_header .title {
		font-size: 26px;
		text-align: left;
	}
}

/*----------------------------------------------------------------------> ▼ general <--*/

.plan_menu {
	display: flex;
	justify-content: center;
	margin: 50px 0;
	border-bottom: 1px solid var(--theme);
}

.plan_menu div {
	padding: 15px 50px;
	border: 1px solid var(--theme);
	border-bottom: 0;
	border-radius: 5px 15px 0 0;
	color: var(--theme);
	cursor: pointer;
}

.plan_menu div:nth-child(n + 2) {
	margin-left: 5px;
}


.plan_menu div.active {
	background: var(--theme);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.plan_menu div {
		transition: var(--transition);
	}
	
	.plan_menu div:hover {
		background: var(--theme);
		color: #fff;
	}
}

/*----------------------------------------------------------------------> ▼ general <--*/

.plan_body {
	padding: ;
	background: url(/asset/image/general/lattice_15_fff_50.png), #f0f0f0;
	background: none;
}

@media (width <= 767px) {
	.plan_body {
		display: flex;
		flex-wrap: wrap;
	}
}

/*----------------------------------------------------------------------> ▼ general <--*/



.plan_left,
.plan_right {
	width: calc((100% - 100px) / 2);
}

.plan_right {
	margin-left: 100px;
}

@media (width <= 767px) {
	.plan_left,
	.plan_right {
		width: 100%;
	}
	
	.plan_right {
		margin-top: 0px;
		margin-left: 0;
	}
}




.plan_slider_main {
	aspect-ratio: 16 / 10;
	border-radius: var(--border_radius);
}

.plan_slider_list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	background: #f0f0f0;
}

.plan_slider_list a {
	width: calc((100% - 4px) / 5);
	aspect-ratio: 16 / 12;
	cursor: pointer;
}

.plan_slider_list a:nth-child(n + 2):not(:nth-child(5n + 1)) {
	margin-left: 1px;
}

.plan_slider_list a:nth-child(n + 6) {
	margin-top: 15px;
}

@media (width <= 767px) {
	.plan_slider_main {
		border-radius: 0;
	}
	
	.plan_slider_list {
		margin-top: 5px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.plan_body {
		transition: var(--transition);
	}
}


.overview_title {
	font-size: 32px;
}

@media (width <= 767px) {
	.overview_title {
		font-size: 24px;
	}
}

.overview_price {
	display: flex;
}

.overview_price div {
	font-family: Helvetica-M;
	font-size: 50px;
	color: #f80;
}

.overview_price .low::after {
	content: '～';
	padding: 0 15px;
	font-size: 36px;
	color: #444;
}

.overview_price div span {
	padding-left: 5px;
	font-family: NotoSans-B;
	font-size: 24px;
	color: #444;
}


.overview_point {
	margin: 30px 0 15px;
	background: url(/asset/image/plan/point2.png) no-repeat left center / contain;
}

.overview_point div {
	padding-left: 60px;
	line-height: 50px;
	font-size: 24px;
	color: #090;
}

.overview_point div::before {
	content: '＼';
}

.overview_point div::after {
	content: '／';
}

.point {
	padding-bottom: 30px;
	border-bottom: 1px dashed #ccc;
}

.overview_tag {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 30px;
	border-bottom: 1px dashed #ccc;
}

.overview_tag a {
	margin: 10px 15px 0 0;
	padding: 5px 0px 3px;
	border: 0px solid #f90;
	border-radius: 9999px;
	font-size: 18px;
	color: #f90;
}

.overview_tag a::before {
	content: '#';
}

.overview_tag a:nth-child(n + 2) {
	
}

@media (width <= 767px) {
	.overview_tag a {
		margin: 10px 6px 0 0;
		font-size: 14px;
	}
}

/*----------------------------------------------------------------------> ▼ .detail <--*/

table.plan {
	width: 100%;
}

table.plan tr {
	border-top: 1px solid #ccc;
}

table.plan th,
table.plan td { 
	padding: 30px;
}

table.plan th {
	width: 300px;
	background: #f6f6f6;
}

table.plan td {
	width: calc(100% - 300px);
}

/*----------------------------------------------------------------------> ▼ .schedule <--*/

table.schedule {
	width: 100%;
}

.plan_body table.schedule:not(:first-child) {
	margin-top: 75px;
}

table.schedule tr {
	border-top: 1px solid #ccc;
}

table.schedule th {
	padding: 15px 0;
	text-align: center;
	background: #ddf;
}

table.schedule td {
	padding: 15px;
}

table.schedule th,
table.schedule td {
	border: 1px solid var(--theme);
	font-size: 18px;
}

table.schedule .mark {
	width: 60px;
	padding: 10px;
}

table.schedule .place {
	width: 250px;
}

table.schedule .time {
	width: 100px;
	text-align: center;
}

table.schedule .body {
	width: calc(100% - 710px);
}

table.schedule .note {
	width: 300px;
}

.summary_title::before {
	content: '＜';
}

.summary_title::after {
	content: '＞';
}

ul.summary {
	display: flex;
}

ul.summary li:nth-child(n + 2) {
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid #ccc; 
}