@charset "UTF-8";



	
/* pagetitle-features
------------------------------  */
#pagetitle-features {
	padding-top: 6vw;
}
	#pagetitle-features h1 {
		font-size: 2.6vw;
		font-weight: 700;
		text-align: center;
		line-height: 1.3em;
		margin-top: 5vw;
		margin-bottom: 1vw;
	}

	#pagetitle-features .txt-18 {
		text-align: center;
		padding: 0 14vw;
	}
	.jp #pagetitle-features .txt-18 {
		text-align: left;
	}
@media screen and (max-width: 767px) {
	#pagetitle-features {
		padding-top: 15vw;
	}
		#pagetitle-features h1 {
			font-size: 6.4vw;
			margin-top: 8vw;
			margin-bottom: 3vw;
		}

		#pagetitle-features .txt-18 {
			text-align: left;
			padding: 0;
		}
}



	
/* features
------------------------------  */
#features {
	padding-top: 5vw;
	overflow: hidden;
}
	#features .swiper-container {
		position: relative;
		padding: 0;
	}
		#features .swiper-container a.swiper-slide {
			display: block;
			padding: 0 1.5vw;
		}
			#features .swiper-container a.swiper-slide .pht {
				overflow: hidden;
				background: #000;
				border-radius: 1.5vw;
			}
				#features .swiper-container a.swiper-slide .pht img {
					opacity: 0.6;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#features .swiper-container a.swiper-slide.swiper-slide-active .pht img {
					opacity: 1;
				}

			#features .swiper-container a.swiper-slide .text {
				text-align: center;
				opacity: 0;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#features .swiper-container a.swiper-slide.swiper-slide-active .text {
				opacity: 1;
			}
				#features .swiper-container a.swiper-slide .text h3 {
					font-size: 1.8vw;
					font-weight: 700;
					line-height: 1.3em;
					margin-top: 2vw;
					margin-bottom: 0.5vw;
				}

				.jp #features .swiper-container a.swiper-slide .text .txt-18 {
					text-align: left;
				}

				#features .swiper-container a.swiper-slide .text .more {
					margin-top: 1vw;
					text-decoration: underline;
				}
				#features .swiper-container a.swiper-slide:hover .text .more {
					text-decoration: none;
				}

		#features .swiper-container .swiper-button-prev {
			display: block;
			width: 25%;
			height: 3vw;
			aspect-ratio: 1 / 1;
			background: url("../img/common/btn_prev_red.svg") no-repeat right center / auto 100%;
			margin: 0;
			padding-top: 0.5vw;
			padding-right: 4vw;
			font-size: 1.2vw;
			color: #AB3535;
			line-height: 3vw;
			white-space: nowrap;
			text-align: right;
			position: absolute;
			top: auto;
			top: 34vw;
			left: -2vw;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			z-index: 2;
		}
		#features .swiper-container .swiper-button-prev:before {
			content: "Previous";
			font-size: 1.0vw;
			line-height: 1;
			position: absolute;
			top: 0.4vw;
			right: 4vw;
		}
		.jp #features .swiper-container .swiper-button-prev:before {
			content: "戻る";
			top: 0.3vw;
		}

		#features .swiper-container .swiper-button-next {
			display: block;
			width: 25%;
			height: 3vw;
			aspect-ratio: 1 / 1;
			background: url("../img/common/btn_next_red.svg") no-repeat left center / auto 100%;
			margin: 0;
			padding-top: 0.5vw;
			padding-left: 4vw;
			font-size: 1.2vw;
			color: #AB3535;
			line-height: 3vw;
			white-space: nowrap;
			position: absolute;
			top: 34vw;
			right: -2vw;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			z-index: 2;
		}
		#features .swiper-container .swiper-button-next:before {
			content: "Next";
			font-size: 1.0vw;
			line-height: 1;
			position: absolute;
			top: 0.4vw;
			left: 4vw;
		}
		.jp #features .swiper-container .swiper-button-next:before {
			content: "次へ";
			top: 0.3vw;
		}

		#features .swiper-container .swiper-button-next:after,
		#features .swiper-container .swiper-button-prev:after {
			display: none;
		}
		#features .swiper-container .swiper-button-prev:hover,
		#features .swiper-container .swiper-button-next:hover {
			opacity: 0.7;
		}
@media screen and (max-width: 767px) {
	#features {
		padding-top: 10vw;
	}
		#features .swiper-container a.swiper-slide {
			padding: 0 3vw;
		}
			#features .swiper-container a.swiper-slide .pht {
				border-radius: 3vw;
			}
	
			#features .swiper-container a.swiper-slide .text {
				display: none;
			}
			#features .swiper-container a.swiper-slide.swiper-slide-active .text {
				display: block;
			}
				#features .swiper-container a.swiper-slide .text h3 {
					font-size: 5.8vw;
					margin-top: 6vw;
					margin-bottom: 2vw;
				}

				#features .swiper-container a.swiper-slide .text .txt-18 {
					text-align: left;
				}

				#features .swiper-container a.swiper-slide .text .more {
					margin-top: 2vw;
				}

		#features .swiper-container .swiper-button-prev {
			width: 6vw;
			height: 6vw;
			padding-top: 0;
			padding-right: 0;
			line-height: 1;
			top: 56vw;
			left: -3%;
			border-radius: 0;
			overflow: hidden;
		}

		#features .swiper-container .swiper-button-next {
			width: 6vw;
			height: 6vw;
			padding-top: 0;
			padding-left: 0;
			line-height: 1;
			top: 56vw;
			right: -3%;
			border-radius: 0;
			overflow: hidden;
		}
		#features .swiper-container .swiper-button-prev:before,
		#features .swiper-container .swiper-button-next:before {
			display: none;
		}
}



	
/* detail
------------------------------  */
#detail {
	padding-top: 5vw;
}
	#detail .sidenav {
		width: 25%;
	}
		#detail .sidenav .read-more {
			height: -webkit-calc(100vh - 7vw);
			height: calc(100vh - 7vw);
			padding-bottom: 3vw;
			padding-right: 1vw;
			overflow-y: scroll;
			position: sticky;
			top: 7vw;
			right: 0;
		}
		#detail .sidenav .read-more::-webkit-scrollbar {
			width: 5px;
			height: 5px;
		}
		#detail .sidenav .read-more::-webkit-scrollbar-track {
			background: #fff;
		}
		#detail .sidenav .read-more::-webkit-scrollbar-thumb {
			background: #eeeeee;
		}
			#detail .sidenav .read-more h3 {
				line-height: 1.3em;
			}

			#detail .sidenav .read-more a.linkbox {
				display: block;
				border-top: solid 1px #ddd;
				margin-top: 1.5vw;
				padding-top: 1.5vw;
			}
				#detail .sidenav .read-more a.linkbox .pht {
					border-radius: 1vw;
					margin-bottom: 1vw;
				}

	#detail .contents {
		width: 65%;
	}
		#detail .cell {
			margin-bottom: 4vw;
		}
		#detail .cell:nth-last-child(1) {
			margin-bottom: 0;
		}
			#detail .cell h1 {
				font-size: 2.6vw;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 1vw;
			}

			#detail .cell h2 {
				font-size: 1.8vw;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 1.5vw;
			}

			#detail .cell .pht {
				border-radius: 1.5vw;
				overflow: hidden;
				margin-bottom: 1.5vw;
			}

			#detail .cell .credit {
				margin-bottom: 1vw;
				text-align: right;
				line-height: 1.4em;
			}

			#detail .cell .details {
				margin-top: 1vw;
			}

			#detail .cell.first .txt-18 {
				padding-bottom: 1vw;
			}

			#detail .cell .txt-18 {
				margin-bottom: 0.5vw;
			}

			#detail .cell a.link {
				display: inline-block;
				margin-top: 0.5vw;
				text-decoration: underline;
			}
			#detail .cell a.link:hover {
				text-decoration: none;
			}

		#detail .flow {
			position: relative;
		}
		#detail .flow:before {
			content: "";
			width: 1px;
			height: 100%;
			border-left: dashed 1px #AB3535;
			position: absolute;
			top: 0;
			left: 1vw;
		}
			#detail .flow .circle {
				content: "";
				width: 2.2vw;
				height: 2.2vw;
				border-radius: 50%;
				background: #AB3535;
				border: solid 1px #AB3535;
				position: sticky;
				top: 8vw;
				left: 0;
				z-index: 1;
			}

			#detail .flow .timebox {
				padding-left: 3.5vw;
				padding-bottom: 3vw;
				position: relative;
			}
			#detail .flow .timebox.start {
				margin-top: -2.2vw;
			}
			#detail .flow .timebox:nth-last-child(1) {
				padding-bottom: 0;
			}
			#detail .flow .timebox:before {
				content: "";
				width: 2vw;
				height: 2vw;
				border-radius: 50%;
				background: #fff;
				border: solid 1px #AB3535;
				position: absolute;
				top: 0;
				left: 0;
			}
			#detail .flow .timebox:nth-last-child(1):before {
				top: -0.1vw;
			}
				#detail .flow .timebox h2.tit {
					font-weight: 400;
					line-height: 1.3em;
					margin-bottom: 1.2vw;
				}
				#detail .flow .timebox.end h2.tit {
					padding-top: 0.25vw;
				}
					#detail .flow .timebox h2.tit span {
						font-weight: 700;
					}
					#detail .flow .timebox h2.tit a {
						text-decoration: underline;
					}
					#detail .flow .timebox h2.tit a:hover {
						text-decoration: none;
					}

				#detail .flow .timebox h2.head {
					line-height: 1.3em;
					padding-top: 0.5vw;
				}

				#detail .flow .timebox .pht {
					margin-bottom: 1.2vw;
					border-radius: 1.5vw;
					overflow: hidden;
				}

				#detail .flow .timebox .credit {
					margin-bottom: 1vw;
					text-align: right;
					line-height: 1.4em;
				}
@media screen and (max-width: 767px) {
	#detail {
		padding-top: 10vw;
	}
		#detail .inner {
		}
		#detail .sidenav {
			display: none;
		}

		#detail .contents {
			width: 100%;
		}
			#detail .cell {
				margin-bottom: 8vw;
			}
				#detail .cell h1 {
					font-size: 6.4vw;
					margin-top: 8vw;
					margin-bottom: 3vw;
				}

				#detail .cell h2 {
					font-size: 4.8vw;
					margin-bottom: 2.5vw;
				}

				#detail .cell .pht {
					border-radius: 3vw;
					margin-bottom: 3.5vw;
				}

			#detail .cell .credit {
				margin-bottom: 2vw;
			}

				#detail .cell .details {
					margin-top: 2.5vw;
				}

				#detail .cell.first .txt-18 {
					padding-bottom: 4vw;
				}

			#detail .cell .txt-18 {
				margin-bottom: 1vw;
			}

				#detail .cell a.link {
					margin-top: 1vw;
				}

			#detail .flow:before {
				left: 3.5vw;
			}
				#detail .flow .circle {
					width: 7.4vw;
					height: 7.4vw;
					top: 30vw;
				}
				#detail .flow .timebox {
					padding-left: 10vw;
					padding-bottom: 8vw;
				}
				#detail .flow .timebox.start {
					margin-top: -7.4vw;
				}
				#detail .flow .timebox:before {
					width: 7vw;
					height: 7vw;
				}
				#detail .flow .timebox:nth-last-child(1):before {
					top: -1vw;
				}
					#detail .flow .timebox h2.tit {
						margin-bottom: 3.5vw;
					}
					#detail .flow .timebox.end h2.tit {
						padding-top: 0.9vw;
					}

					#detail .flow .timebox h2.head {
						padding-top: 1.4vw;
					}

					#detail .flow .timebox .pht {
						margin-bottom: 3vw;
						border-radius: 3vw;
					}

					#detail .flow .timebox .credit {
						margin-bottom: 2vw;
					}
}