@charset "utf-8";

#contents{
	padding-top: 0;
	.main{
		position: relative;
		line-height: 0;
		margin: 0 auto;
		text-align: center;
		&::before{
			content: '';
			width: 50%;
			height: 100%;
			background: #ecbe0a;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		img{
			position: relative;
			z-index: 2;
		}
	}
	h2.mainimg{
		line-height: 0;
		margin: 0 auto 20px;
		padding: 0;
		background: url(../img/main_bg.jpg) 0 0 repeat-x;
		text-align: center;
	}
	p.limit{
		font-size: 2rem;
		line-height: 140%;
		margin: 0 auto 30px;
		padding: 0;
		text-align: right;
		font-family: serif;
		font-weight: bold;
	}
	h3.ff{
		background: #ecbe0a;
		color: #fff;
		font-size: 4.2rem;
		font-weight: bolder;
		text-shadow: 2px 2px 4px #333;
		line-height: 100%;
		padding: 8px 0 14px;
		text-align: center;
	}
	.cols{
		display: block;
		letter-spacing: -0.4em;
		text-align: left;
		line-height: 0;
		margin: 0 auto 80px;
		.tx{
			display: inline-block;
			letter-spacing: normal;
			vertical-align: top;
			width: 660px;
			font-size: 1.8rem;
			line-height: 160%;
			padding: 20px 0 0;
		}
		.img{
			display: inline-block;
			letter-spacing: normal;
			vertical-align: top;
			text-align: right;
			width: 540px;
			margin: -30px 0 0;
		}
	}
	.cols2{
		display: block;
		letter-spacing: -0.4em;
		text-align: left;
		line-height: 0;
		margin: 0 auto 80px;
		.img{
			display: inline-block;
			letter-spacing: normal;
			vertical-align: top;
			text-align: right;
			width: 750px;
			margin: 0 60px 0 0;
		}
		.tx{
			display: inline-block;
			letter-spacing: normal;
			vertical-align: top;
			width: 390px;
			font-size: 1.8rem;
			line-height: 160%;
			p{
				font-size: 1.6rem;
				line-height: 140%;
			}
			.box{
				display: inline-block;
				border: 1px solid #333;
				border-radius: 10px;
				padding: 20px 50px 20px 40px;
				margin: 0 auto 20px;
				p{
					font-size: 2rem;
					line-height: 200%;
				}
			}
		}
	}
	.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 140px;
		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;
		}
		table{
			width: auto !important;
			margin: 0 auto 30px;
			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: calc(100% - 140px);
				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.3rem;
							font-weight: bold;
							line-height: 120%;
							margin: 0 auto;
						}
						&.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){
	#title h1 {
			font-size: 1.9rem;
	}
	#contents{
		p.limit{
			font-size: 1.6rem;
		}
		h3.ff{
			font-size: 2.4rem;
		}
		.cols{
			margin: 0 auto 60px;
			.tx{
				display: block;
				width: auto;
				margin: 0 auto 20px;
				font-size: 1.4rem;
			}
			p.img{
				width: auto;
				margin: 0 auto;
			}
		}
		.cols2{
			margin: 0 auto 60px;
			.tx{
				display: block;
				width: auto;
				margin: 0 auto;
				p{
					font-size: 1.4rem;
				}
				.box{
					display: block;
					padding: 20px 40px;
					p{
						font-size: 1.6rem;
					}
				}
			}
			p.img{
				width: auto;
				margin: 0 auto 20px;
			}
		}
		.cap{
			h3{
				font-size: 2.2rem;
			}
			p{
				font-size: 1.4rem;
				text-align: left;
				&.t{
					font-size: 1.6rem;
				}
			}
		}
		.detail{
			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%;
				}
			}
		}
	}
}