@charset "UTF-8";

/* ---------------------------------------------------

	Second Page - Recommend

--------------------------------------------------- */

/* ---------------------------------------------------	

	Common

--------------------------------------------------- */
/* container */
#container {}
/* Link Area */
.rec-linkarea {
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	.rec-la-txt { text-align: center; }
		.rec-la-txt p { display: inline-block; }
	.rec-la-item {
		color: rgba(255, 255, 255, 1);
		position: relative;
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
		}
	.rec-la-item:after {
		background-image: url(/src/image/common/arrow/circle-white@2x.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		content: '';
		position: relative;
		}
	.rec-la-att { text-align: center; }
		.rec-la-att p {
			display: inline-block;
			text-align: left;
			}
	/* Link Area > Scheme */
	.rec-la-item.pink { background-color: rgba(229, 34, 134, 1); }
	.rec-la-item.green { background-color: rgba(30, 172, 75, 1); }
	.rec-la-item.blue { background-color: rgba(0, 180, 200, 1); }
	.rec-linkarea.upper { text-align: left; }
	.rec-linkarea.bottom { text-align: center; }
	.rec-la-item.att.ringbell { background-color: rgba(105, 80, 147, 1); }
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
/* container */
#container { padding-bottom: 100px; }
/* Link Area */
.rec-linkarea {}
	.rec-la-txt { padding: 20px; }
		.rec-la-txt p {
			font-size: 20px;
			line-height: 1.5;
			text-align: center;
			}
	.rec-la-item {
		font-size: 25px;
		left: 0;
		line-height: 25px;
		height: 70px;
		margin: 2%;
		padding: 0 20px 0 30px;
		top: 0;
		border-radius: 100px;
		transition: all .3s;
		}
	.rec-linkarea.col2 .rec-la-item { max-width: 46%; }
	.rec-la-item:after {
		height: 35px;
		width: 35px;
		transition: all .3s;
		}
	.rec-la-att p {
		font-size: 13px;
		line-height: 13px;
		}
	/* Link Area > Scheme */
	.rec-linkarea.upper { margin-top: 30px; }
	.rec-linkarea.bottom {
		margin-top: 60px;
		max-width: 1200px;
		}
	.rec-linkarea.bottom .rec-la-item {
		font-size: 35px;
		line-height: 35px;
		height: 100px;
		padding: 0 20px 0 50px;
		}
	_:-ms-lang(x)::-ms-backdrop, .rec-linkarea.bottom .rec-la-item { padding-top: 15px; }
	.rec-linkarea.bottom .rec-la-item:after {
		height: 50px;
		width: 50px;
		}
    /* Link Area > Hover */
    .rec-la-item:hover {
        left: 5px;
        top: 5px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
        }
    .rec-la-item:hover:after { transform: rotate(360deg); }
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
/* container */
#container { padding: 0 15px 60px; }
/* Link Area */
.rec-linkarea {}
	.rec-la-txt { padding: 20px; }
		.rec-la-txt p {
			font-size: 16px;
			line-height: 1.5;
			text-align: left;
			}
	.rec-la-item {
		font-size: 25px;
		line-height: 25px;
		margin: 2%;
		max-width: 46%;
		padding: 20px 20px 10px;
		border-radius: 20px;
		flex-direction: column;
		}
	.rec-la-item:after {
		height: 20px;
		margin-top: 15px;
		width: 20px;
		}
	/* Link Area > Scheme */
	.rec-linkarea.upper {
		margin-top: 20px;
		text-align: center;
		}
	.rec-linkarea.bottom { margin-top: 30PX; }
}

/* ---------------------------------------------------	

	Intro

--------------------------------------------------- */
#intro {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	}
#intro:before,
#intro:after {
	content: '';
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	}
#intro:before {
	background-color: rgba(0, 0, 0, .3);
	z-index: 0;
	}
#intro:after {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -1;
	}
	#int-inner {
		position: relative;
		text-align: center;
		z-index: 1;
		}
		#int-ttl {
			color: rgba(255, 255, 255, 1);
			text-align: center;
			}
			#int-ttl small { display: block; }
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
#intro { height: 300px; }
	#int-inner {}
		#int-ttl {
			font-size: 30px;
			line-height: 1.35;
			}
			#int-ttl small { font-size: 15px; }
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
#intro { height: 300px; }
	#int-inner {}
		#int-ttl {
			font-size: 25px;
			line-height: 1.35;
			}
			#int-ttl small { font-size: 13px; }
}

/* ---------------------------------------------------

	Outline

--------------------------------------------------- */
#outline {
	background-color: rgba(255, 255, 255, 1);
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	}
#recommend #outline {}
	#otl-thumb {}
		#otl-thumb img {
			max-width: 300px;
			box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
			}
	#otl-ttlarea {
		width: 100%;
		box-sizing: border-box;
		}
		#otl-ta-ttl {
			color: rgba(30, 172, 75, 1);
			text-align: center;
			}
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
#outline {
	margin-top: -50px;
	max-width: 800px;
	border-radius: 20px 20px 0 0;
	}
	#otl-thumb {}
		#otl-thumb img {}
	#otl-ttlarea { padding: 40px; }
		#otl-ta-ttl {
			font-size: 45px;
			line-height: 60px;
			}
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
#outline {
	margin-top: -50px;
	flex-wrap: wrap;
	border-radius: 20px 20px 0 0;
	}
	#otl-thumb {}
		#otl-thumb img { max-width: 200px; }
	#otl-ttlarea { padding: 30px 15px; }
		#otl-ta-ttl {
			font-size: 30px;
			line-height: 40px;
			}
}

/* ---------------------------------------------------

	Interview

--------------------------------------------------- */
#interview { margin: 0 auto; }
	#itv-ttlarea {}
		#itv-ta-ttl { color: rgba(30, 172, 75, 1); }
			#itv-ta-ttl span { display: block; }
			#itv-ta-ttl small {
				color: rgba(0, 0, 0, .5);
				display: block;
				}
		#itv-ta-txt { text-align: center; }
			#itv-ta-txt p { display: inline-block; }
	#itv-list {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		}
		#itv-lst-ttl {
			color: rgba(30, 172, 75, 1);
			display: block;
			font-family: "Times New Roman", Times,"游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
			margin: 0 auto;
			text-align: center;
			width: 100%;
			}
		#itv-lst-name {
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			}
			#itv-lst-name span {
				background-color: rgba(30, 172, 75, 1);
				color: rgba(255, 255, 255, 1);
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 100px;
				}
		#itv-lst-outline {
			margin: 0 auto;
			text-align: center;
			}
			#itv-lst-outline p {
				display: inline-block;
				text-align: left;
				}
			#itv-lst-outline p:last-child { margin-bottom: 0; }
		.itv-item {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			}
			.itv-itm-thumb { position: relative; }
				.itv-itm-thumb img {
					max-width: 400px;
					box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
					}
			.itv-itm-txt {}
				.itv-itm-note {
					color: rgba(200, 150, 0, 1);
					text-align: left;
					}
				.itv-itm-txt dl { text-align: left; }
				.itv-itm-txt dl:last-child { margin-bottom: 0px; }
					.itv-itm-txt dl dt { color: rgba(30, 172, 75, 1); }
					.itv-itm-txt dl dd {}
						.itv-itm-txt dl dd p {}
						.itv-itm-txt dl dd p:last-child { margin-bottom: 0px; }
		.itv-gallery {
			text-align: center;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			}
			.itv-gallery figure { box-sizing: border-box; }
			.itv-gallery figure img { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16); }
			.itv-gallery figure figcaption {
				display: inline-block;
				text-align: left;
				}
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
#interview {
	margin-top: 100px;
	max-width: 1200px;
	padding: 0 60px;
	}
	#itv-ttlarea { text-align: center; }
		#itv-ta-ttl {
			font-size: 50px;
			line-height: 1.2;
			}
			#itv-ta-ttl span { font-size: 30px; }
			#itv-ta-ttl small { font-size: 15px; }
		#itv-ta-txt { margin-top: 15px; }
			#itv-ta-txt p {
				font-size: 17px;
				line-height: 1.75;
				}
	#itv-list { margin-top: 60px; }
		#itv-lst-ttl {
			font-size: 35px;
			line-height: 1.75;
			margin-bottom: 10px;
			}
		#itv-lst-name { margin-bottom: 30px; }
			#itv-lst-name span {
				font-size: 17px;
				line-height: 1.5;
				padding: 5px 20px;
				}
		#itv-lst-outline {
			max-width: 820px;
			padding-bottom: 30px;
			}
			#itv-lst-outline p {
				font-size: 17px;
				line-height: 1.85;
				margin-bottom: 20px;
				/*
				max-width: 800px;
				*/
				}
		.itv-item { padding: 30px 0; }
			.itv-itm-thumb {}
				.itv-itm-thumb img { border-radius: 5px; }
			.itv-itm-txt { padding: 0 50px; }
				.itv-itm-note {
					font-size: 17px;
					margin-bottom: 30px;
					}
				.itv-itm-txt dl { margin-bottom: 40px; }
					.itv-itm-txt dl dt {
						font-size: 25px;
						line-height: 1.5;
						margin-bottom: 20px;
						}
					.itv-itm-txt dl dd {}
						.itv-itm-txt dl dd p {
							font-size: 16px;
							line-height: 1.85;
							margin-bottom: 20px;
							}
		.itv-gallery {}
			.itv-gallery figure { padding: 20px; }
			.itv-gallery figure img { border-radius: 5px; }
			.itv-gallery figure figcaption {
				font-size: 15px;
				margin-top: 10px;
				}
	/* Interview > Scheme */
	.itv-item:nth-child(odd) { flex-flow: row-reverse; }
}
/* ------------------------------------------------ */
@media screen and (min-width: 751px) and (max-width: 1000px) {
	.itv-item { flex-wrap: wrap; }
	.itv-item:nth-child(odd) { flex-wrap: wrap; }
		.itv-itm-thumb { margin-bottom: 30px; }
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
#interview { margin-top: 40px; }
	#itv-ttlarea { text-align: left; }
		#itv-ta-ttl {
			font-size: 30px;
			line-height: 30px;
			text-align: center;
			}
			#itv-ta-ttl span { font-size: 18px; }
			#itv-ta-ttl small { font-size: 15px; }
		#itv-ta-txt { margin-top: 15px; }
			#itv-ta-txt p {
				font-size: 15px;
				line-height: 1.75;
				}
	#itv-list { margin-top: 35px; }
		#itv-lst-ttl { font-size: 23px; }
		#itv-lst-name { margin-top: 10px; }
			#itv-lst-name span {
				font-size: 15px;
				line-height: 1.5;
				padding: 5px 15px;
				}
		#itv-lst-outline { padding-top: 20px; }
			#itv-lst-outline p {
				font-size: 15px;
				line-height: 1.85;
				margin-bottom: 20px;
				}
		.itv-item {
			padding: 30px 0;
			flex-wrap: wrap;
			}
			.itv-itm-thumb { margin-bottom: 10px; }
				.itv-itm-thumb img {
					width: 100%;
					border-radius: 5px;
					}
			.itv-itm-txt { padding: 0 10px; }
				.itv-itm-note {
					font-size: 16px;
					padding: 20px 0;
					}
				.itv-itm-txt dl { padding: 15px 0; }
					.itv-itm-txt dl dt {
						font-size: 20px;
						line-height: 1.5;
						margin-bottom: 15px;
						}
					.itv-itm-txt dl dd {}
						.itv-itm-txt dl dd p {
							font-size: 15px;
							line-height: 1.85;
							margin-bottom: 20px;
							}
		.itv-gallery { flex-wrap: wrap; }
			.itv-gallery figure { padding: 10px; }
			.itv-gallery figure img { border-radius: 5px; }
			.itv-gallery figure figcaption {
				font-size: 13px;
				margin-top: 10px;
				}
}

/* ---------------------------------------------------

	Gallery

--------------------------------------------------- */
.rec-gallery {}
	.rec-gly-ttl {
		color: rgba(30, 172, 75, 1);
		text-align: center;
		}
		.rec-gly-ttl small {
			display: block;
			color: rgba(0, 0, 0, .5);}
	.rec-gly-list {
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		box-sizing: border-box;
		}
		.rec-gly-list img {
			margin: 5px;
			border-radius: 3px;
			}
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
.rec-gallery {
	margin-top: 60px;
	/*padding-bottom: 60px;*/
	}
	.rec-gly-ttl {
		font-size: 40px;
		line-height: 1.2;
		}
		.rec-gly-ttl span { font-size: 25px; }
		.rec-gly-ttl small { font-size: 15px; }
	.rec-gly-list {
		max-width: 1300px;
		padding: 20px;
		}
		.rec-gly-list img {}
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
.rec-gallery {
	border-top: 1px solid rgba(0, 0, 0, .3);
	/*padding-bottom: 20px;*/
	padding-top: 40px;
	}
	.rec-gly-ttl { font-size: 23px; }
		.rec-gly-ttl span { font-size: 18px; }
		.rec-gly-ttl small { font-size: 15px; }
	.rec-gly-list { padding: 20px 5px; }
		.rec-gly-list img { max-width: 150px; }
}

/* ---------------------------------------------------

	Archives - List

--------------------------------------------------- */
.rec-archives-list {
	border: solid rgba(255, 222, 0, 1);
	margin: 0 auto;
	}
	.ravl-ttl {
		color: rgba(30, 172, 75, 1);
		text-align: center;
		}
		.ravl-ttl small {
			color: rgba(0, 0, 0, .5);
			display: block;
			}
	.ravl-list {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		}
		.ravl-lst-item {}
			.ravl-lst-link {
				display: block;
				text-align: center;
				}
				.ravl-lst-thumb {}
					.ravl-lst-thumb img {
						position: relative;
						box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
						}
				.ravl-lst-ttl {
					color: rgba(50, 50, 50, 1);
					display: inline-block;
					text-align: left;
					}
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
.rec-archives-list {
	border-width: 20px;
	margin: 80px 40px 0;
	padding: 40px 40px 0;
	/*max-width: 1000px;*/
	border-radius: 100px 10px 100px 10px;
	}
	.ravl-ttl {
		font-size: 50px;
		line-height: 1.2;
		}
		.ravl-ttl small { font-size: 15px; }
	.ravl-list { margin-top: 40px; }
		.ravl-lst-item {
			margin: 0 20px 40px;
			max-width: 200px;
			}
			.ravl-lst-link {}
				.ravl-lst-thumb {}
					.ravl-lst-thumb img {
						max-width: 200px;
						transition: all .3s;
						}
				.ravl-lst-ttl {
					margin-top: 15px;
					transition: all .3s;
					}
	/* Archives - List > Hover */
	a.ravl-lst-link:hover .ravl-lst-thumb img { transform: scale(1.05); }
	a.ravl-lst-link:hover .ravl-lst-ttl { color: rgba(30, 172, 75, 1); }
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
.rec-archives-list {
	border-width: 10px;
	margin: 50px -15px 0;
	padding: 40px 15px 0;
	border-radius: 50px 0 50px 0;
	}
	.ravl-ttl {
		font-size: 23px;
		line-height: 1.2;
		}
		.ravl-ttl small { font-size: 15px; }
	.ravl-list { margin-top: 30px; }
		.ravl-lst-item {
			margin: 0 5% 30px;
			max-width: 40%;
			}
			.ravl-lst-link {}
				.ravl-lst-thumb {}
					.ravl-lst-thumb img {}
				.ravl-lst-ttl {
					font-size: 13px;
					margin-top: 10px;
					}
}

/* ---------------------------------------------------

	Archives - Page

--------------------------------------------------- */
/* Label */
.rec-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	}
/* Intro */
#recommend_archives #intro { border: 10px solid rgba(255, 222, 0, 1); }
/* ------------------------------------------------ */
@media screen and (min-width: 751px) {
/* Label */
.rec-label {
	font-size: 20px;
	height: 50px;
	margin: 10px;
	width: 200px;
	}
}
/* ------------------------------------------------ */
@media screen and (max-width: 750px) {
/* Label */
.rec-label {
	font-size: 15px;
	height: 35px;
	margin: 10px;
	width: 150px;
	}
}