@charset 'utf-8';

footer{
	padding-bottom: 95px !important;
}
#contents{
	padding: 0 0 20px;
	#visual{
		z-index: 1;
		position: relative;
		line-height: 0;
		margin: 0 auto 40px;
		padding: 0;
		h1{
			line-height: 0;
			text-align: center;
			color: #fff;
			margin: 0 auto;
			border: none;
			position: relative;
			z-index: 2;
			&::before {
					content: '';
					width: 50%;
					height: 100%;
					background: #ecbe0a;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
			}
		}
		.main{
			background: url('../img/main_bg.jpg') 0 0 repeat-x;
			line-height: 0;
			text-align: center;
			margin: 0 auto 20px;
			p.img{
				line-height: 0;
				text-align: center;
			}
		}
		p.cp{
			font-size: 3rem;
			line-height: 140%;
			text-align: right;
			margin: 0 auto;
			padding: 0;
			border: none;
		}
	}
	ul.images{
		display: block;
		letter-spacing: -0.4em;
		text-align: center;
		line-height: 0;
		li{
			display: inline-block;
			letter-spacing: normal;
			vertical-align: top;
			margin: 0 60px 0 0;
			&:last-child{
				margin-right: 0;
			}
		}
	}
	.concept{
		margin: 0 auto 80px;
		h2{
			font-size: 4.6rem;
			line-height: 120%;
			background: #ecbe0a;
			color: #fff;
			padding: 10px 10px 14px;
			text-shadow: 2px 2px 2px #333;
			border: none;
			margin: 0 auto 20px;
			text-align: center;
		}
		.column{
			display: block;
			letter-spacing: -0.4em;
			text-align: left;
			line-height: 0;
			margin: 0 auto 60px;
			.text,
			p.img{
				display: inline-block;
				letter-spacing: normal;
				vertical-align: top;
				line-height: 0;
			}
			.text{
				max-width: 682px;
				margin: 0 131px 0 0;
				padding: 40px 0 0;
				p{
					font-size: 1.9rem;
					line-height: 160%;
				}
			}
			&.v2{
				p.img{
					margin: 0 auto;
				}
				.text{
					text-align: center;
					width: 450px;
					margin: 0 auto;
					padding: 0;
					.box{
						display: inline-block;
						margin: 0 auto 20px;
						text-align: left;
						border: 1px solid #333;
						border-radius: 20px;
						padding: 15px 40px;
						p{
							font-size: 2.4rem;
							line-height: 160%;
							margin: 0 auto;
						}
						ol{
							display: block;
							margin: 0 auto;
							padding: 0;
							li{
								display: block;
								font-size: 2.4rem;
								line-height: 160%;
								position: relative;
								padding: 0 0 0 1em;
								&::before{
									content: '・';
									position: absolute;
									top: 0;
									left: 0;
								}
							}
						}
					}
					p{
						text-align: center;
					}
				}
			}
		}
	}
	.cap{
		background: url(../img/cap_bg.jpg) 0 0 repeat;
		padding: 40px 0;
		margin: 0 auto 80px;
		h3{
			font-size: 4.2rem;
			line-height: 140%;
			color: #f40808;
			margin: 0 auto 40px;
			text-align: center;
			padding: 0;
		}
		p{
			font-size: 1.8rem;
			line-height: 180%;
			margin: 0 auto 40px;
			text-align: center;
			padding: 0;
			&.img{
				line-height: 0;
				margin: 0 auto 40px;
				text-align: center;
			}
			&.t{
				margin: 0 auto;
				font-size: 2.6rem;
			}
		}
	}
	.detail{
		line-height: 0;
		padding: 0;
		margin: 0 auto 200px;
		text-align: center;
		h2{
			line-height: 0;
			text-align: center;
			padding: 0;
			margin: 0 auto 40px;
		}
		p.t{
			line-height: 0;
			text-align: center;
			margin: 0 auto 40px;
		}
		p.tx{
			display: inline-block;
			font-size: 1.8rem;
			line-height: 160%;
			margin: 0 auto 80px;
			text-align: left;
		}
		table{
			width: auto !important;
			margin: 0 auto 0px;
			td{
				padding: 15px 30px;
				font-size: 1.8rem;
				border: 1px solid #333;
				&.new{
					position: relative;
					&::before{
						content: 'NEW';
						background: #eaf431;
						font-family: serif;
						font-size: 1.6rem;
						line-height: 100%;
						padding: 8px 15px;
						border-radius: 16px;
						position: absolute;
						top: 14px;
						left: -44px;
						transform: rotate(-18deg);
					}
				}
			}
		}
		p{
			font-size: 1.8rem;
			line-height: 160%;
			text-align: center;
			margin: 0 auto;
		}
	}
	.option{
		border-bottom: 7px solid #f2b02f;
		margin: 0 auto 60px;
		.title{
			padding: 0 0 40px;
			border-bottom: 1px solid #333;
			position: relative;
			margin: 0 auto 80px;
			&::before{
				content: '';
				width: 100%;
				height: 50%;
				background: linear-gradient(to bottom,  rgba(242,176,47,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				position: absolute;
				top: 110px;
				left: 0;
			}
			h2{
				line-height: 0;
				margin: -110px auto 10px;
				text-align: center;
				padding: 0;
			}
			.column{
				display: block;
				letter-spacing: -0.4em;
				text-align: left;
				line-height: 0;
				.text{
					display: inline-block;
					letter-spacing: normal;
					vertical-align: top;
					width: 718px;
					margin: 0 20px 0 0;
					p.tit{
						font-size: 3rem;
						line-height: 120%;
						padding: 0;
						margin: 0 auto 35px;
					}
					p.t{
						font-size: 1.8rem;
						line-height: 160%;
						padding: 0;
						margin: 0 auto 20px;
					}
					p.price{
						font-size: 2.4rem;
						line-height: 120%;
						margin: 0 auto 40px;
						span{
							position: relative;
							&::after{
								content: '';
								width: 100%;
								height: 2px;
								background: #ff0303;
								transform: rotate(10deg);
								position: absolute;
								bottom: 14px;
								left: 0;
							}
						}
						strong{
							font-size: 4rem;
							padding: 0 0 0 2em;
							position: relative;
							&::before{
								content: '→';
								font-size: 2.5rem;
								position: absolute;
								top: 19px;
								left: 1em;
							}
						}
					}
					p.t2{
						font-size: 1.8rem;
						line-height: 160%;
						padding: 0;
						margin: 0 auto;
					}
				}
				p.img{
					display: inline-block;
					letter-spacing: normal;
					vertical-align: top;
				}
			}
		}
		.plan{
			padding: 0 0 60px;
			line-height: 0;
			text-align: left;
			margin: 0 auto 60px;
			&:last-child{
				margin: 0 auto;
			}
			h2{
				font-size: 2.6rem;
				line-height: 120%;
				padding: 10px 20px;
				background: #000;
				color: #fff;
				border-bottom: 7px solid #f2b02f;
				margin: 0 auto 50px;
			}
			.column{
				display: block;
				letter-spacing: -0.4em;
				text-align: left;
				line-height: 0;
				
				h3{
					margin: 0 0 25px;
					font-size: 2.6rem;
					letter-spacing: normal;
					font-weight: bold;
					line-height: 120%;
					padding: 0;
					span{
						display: inline-block;
						line-height: 100%;
						position: relative;
						&::before{
							content: '';
							width: 100%;
							height: 4px;
							background: #f2b02f;
							position: absolute;
							bottom: -1px;
							left: 0;
							z-index: -1;
						}
					}
				}
				p.img{
					display: inline-block;
					letter-spacing: normal;
					vertical-align: top;
					line-height: 0;
				}
				.text{
					display: inline-block;
					letter-spacing: normal;
					vertical-align: top;
					width: 670px;
					margin: 0 0 0 40px;
					p{
						font-size: 1.8rem;
						line-height: 200%;
						margin: 0 auto 40px;
						&.b{
							font-size: 2.6rem;
							font-weight: bold;
							line-height: 120%;
							margin: 0 auto;
							small{
								font-size: 2rem;
							}
							span{
								font-size: 5rem;
								vertical-align: middle;
								padding: 0 15px;
								font-weight: normal;
							}
							strong{
								font-size: 4rem;
								color: #e72a25;
								vertical-align: middle;
							}
						}
						&.mb{
							margin-bottom: 100px;
						}
					}
				}
				&.v2{
					border-bottom: 2px solid #333;
					margin: 0 auto 40px;
					padding: 0 0 40px;
					.text{
						margin: 0 40px 0 0;
					}
				}
			}
		}
	}
	.outro{
		margin: 0 auto 100px;
		line-height: 0;
		padding: 0;
		p{
			font-size: 1.8rem;
			line-height: 160%;
			margin: 0 auto 1em;
			text-align: left;
			padding: 0;
		}
		.blog-youtube{
			padding: 40px 0 0;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 480px 570px;
			gap: 40px;
			place-content: center;
			place-items: center;
			&.v2{
				grid-template-columns: 565px 440px;
			}
			.item{
				width: auto;
				margin: 0;
				h3{
					font-size: 1.8rem;
					line-height: 120%;
					font-weight: bold;
					padding: 0;
					margin: 0 auto 10px;
				}
				a{
					display: block;
					text-decoration: none;
					line-height: 0;
					background-color: #000;
					color: #fff;
					position: relative;
					transform: translateY(20px);
					transition: .4s;
					&:hover{
						text-decoration: none;
						transform: translateY(0);
						opacity: .7;
					}
					img.youtube{
						width: 100%;
					}
					figure{
						width: 100%;
						height: auto;
						aspect-ratio: 2 / 1;
						overflow: hidden;
						margin: 0;
						img{
							width: 100%;
							height: calc(100% + 20px);
							object-fit: cover;
							transition: .4s;
							position: relative;
							transform: translateY(-20px);
						}
					}
					.text{
						padding: 10px 20px 15px;
						transition: .4s;
						p{
							color: #fff;
							font-size: 1.4rem;
							margin: 0 auto;
							.day {
								opacity: .7;
							}
							.category {
								margin-left: 10px;
								color: #f60;
							}
							&.title{
								font-size: 1.8rem;
								padding-top: 15px;
								line-height: 1.6;
								font-weight: bold;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								border-top: 1px solid #ccc;
								background: none;
								text-align: left;
								margin: 0 auto;
							}
						}
					}
				}
			}
		}
	}
}

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

}

@media screen and (max-width:767px){
	#contents{
		#visual{
			margin-bottom: 20px;
			p.cp{
				font-size: 2rem;
			}
		}
		.concept{
			h2{
				font-size: 2.6rem;
			}
			.column{
				margin: 0 auto 20px;
				.text{
					max-width: 100%;
					margin: 0 auto 20px;
					padding: 0;
					p{
						font-size: 1.6rem;
					}
				}
				&.v2{
					p.img{
						margin: 0 auto 20px;
					}
					.text{
						.box{
							p{
								font-size: 1.6rem;
							}
							ol{
								li{
									font-size: 1.6rem;
								}
							}
						}
					}
				}
			}
		}
		.column{
			p.img{
				display: block;
				margin: 0 auto 10px;
			}
			.text{
				display: block;
				max-width: 100%;
				margin: 0 auto;
				p{
					font-size: 1.4rem;
				}
			}
		}
		.cap{
			h3{
				font-size: 2.2rem;
			}
			p{
				font-size: 1.4rem;
				text-align: left;
				&.t{
					font-size: 1.6rem;
				}
			}
		}
		.detail{
			margin-bottom: 150px;
			p{
				font-size: 1.4rem;
			}
			p.t{
				margin-bottom: 20px;
			}
			p.tx{
				text-align: left;
				font-size: 1.4rem;
				margin: 0 auto 20px;
			}
			table{
				margin-left: 20px;
				td{
					padding: 10px;
					font-size: 1.4rem;
					&.new{
						padding-left: 40px;
						&::before{
							font-size: 1.2rem;
							top: 20px;
							left: -34px;
						}
					}
				}
			}
		}
		.option{
			.title{
				margin: 0 auto 40px;
				&::before{
					height: calc(100% - 100px);
					top: 40px;
				}
				.column{
					.text{
						display: block;
						width: auto;
						margin: 0 auto;
						p.t{
							font-size: 1.4rem;
						}
						p.t2{
							font-size: 1.4rem;
							margin: 0 auto 20px;
						}
						p.price{
							margin: 0 auto 20px;
							strong{
								display: block;
								font-size: 3.6rem;
								padding-top: 10px;
								&::before{
									top: 14px;
								}
								small{
									font-size: 2rem;
								}
							}
						}
					}
					p.img{
						display: block;
						width: auto;
						margin: 0 auto;
					}
				}
			}
			.plan{
				padding: 0 0 20px;
				margin: 0 auto 20px;
				h2{
					margin: 0 auto 20px;
				}
				.column{
					p.img{
						display: block;
						width: auto;
						margin: 0 auto 20px;
					}
					.text{
						display: block;
						width: auto;
						margin: 0 auto;
						p{
							font-size: 1.4rem;
							&.b{
								font-size: 1.9rem;
								line-height: 140%;
							}
							&.mb{
								margin-bottom: 20px;
							}
						}
					}
					&.v2{
						.text{
							margin: 0 auto;
						}
					}
				}
			}
		}
		
		.outro{
			p{
				font-size: 1.4rem;
			}
			.blog-youtube{
				grid-template-columns: 100%;
				gap: 10px;
				&.v2{
					grid-template-columns: 100%;
				}
			}
		}
	}
}