@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
/* 続々更新中 */
.zokuzoku {
	padding: 0 10px;
	color: #000;
	position: relative;
}

.zokuzoku::before {
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-14deg);
}

.zokuzoku::after {
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(14deg);
}

/* アローボタン */
.btn-arrow a {
	display: inline-block;
	padding: .6em 1.5em .6em 2.5em;
	background-image: url(/products/common/images/chevron-right-solid.svg);
	background-repeat: no-repeat;
	background-position: left .8em top .8em;
	background-size: auto 1em;
	text-decoration: none;
	transition: all .2s;
}

.btn-arrow.maru a {
	background-color: #fff;
	color: #000;
	border: solid 1px #000;
	border-radius: 10rem;
}

.btn-arrow.kadomaru a {
	background-color: #fff;
	color: #000;
	border: solid 1px #000;
	border-radius: .8rem;
}

/* 動画リスト */
ul.list-movie .ttl {
	font-weight: 500;
}

ul.list-movie .text {
	color: #535353;
}

ul.list-movie .category {
	display: inline-block;
	padding: 0 .5em;
	color: #535353;
	border: solid 1px #D9D9D9;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {
	article {
		padding-bottom: 4rem;
	}

	/* メインビジュアル */
	.main-visual {
		padding: 2rem 0 3rem;
		background-image: url(images/bg-main_sp.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	.mv-text {
		text-align: center;
	}

	.mv-img {
		margin-top: 2rem;
	}

	.main-title {
		margin-bottom: 2rem;
		font-size: 3rem;
		line-height: 1.4;
		text-align: center;
	}

	.main-text {
		font-size: 1.5rem;
		line-height: 1.8;
		text-align: left;
	}

	/* 続々更新中 */
	.zokuzoku {
		display: inline-block;
		font-size: 1.4rem;
	}

	.mv-img .movie {
		border: solid 7px #FFB7B7;
		box-shadow: 10px 10px 0px 0px #E6000D;
	}

	/* ページナビ */
	.page-navi {
		margin-top: 4rem;
	}

	ul.list-page-navi {
		display: block;
	}

	ul.list-page-navi li {
		width: 80%;
		margin: 0 auto 1em;
	}

	ul.list-page-navi li a {
		display: block;
		padding: .8em 2em .8em 1em;
		font-size: 1.4rem;
		font-weight: bold;
		background-color: #FFB7B7;
		background-image: url(images/chevron-down-solid.svg);
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 1em auto;
		box-shadow: 6px 6px 0px 0px #E6000D;
		text-align: center;
		text-decoration: none;
	}

	ul.list-page-navi li a br {
		display: none;
	}

	/* サブセクション */
	.sub-section {
		margin-top: 5rem;
	}

	.sub-section:first-of-type {
		margin-top: 0;
		padding-top: 5rem;
	}

	.sub-section .line {
		padding-top: 4rem;
		border-top: solid 1px #ccc;
	}

	.sub-title {
		margin-bottom: 4rem;
		font-size: 2.4rem;
		text-align: center;
	}

	/* 動画一覧 */
	.movie-container {
		position: relative;
	}

	.movie-container[data-new="new"]::after {
		content: 'NEW';
		display: flex;
		justify-content: center;
		align-items: center;
		width: 4rem;
		height: 4rem;
		font-size: 1.2rem;
		background-color: #E6000D;
		color: #fff;
		border-radius: 10rem;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
	}

	.movie {
		border: solid 5px #FFB7B7;
	}

	.movie a {
		display: block;
		position: relative;
	}

	.movie a::after {
		content: '';
		width: 50px;
		padding-top: 50px;
		background-image: url(images/play.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	ul.list-movie {
		padding: 0 1rem;
	}

	ul.list-movie li {
		margin-top: 4rem;
	}

	ul.list-movie li:first-child {
		margin-top: 0;
	}

	ul.list-movie .day {
		width: 5em;
		margin: 1em 0 .5em;
		font-size: 1.4rem;
		border-bottom: solid 2px #E6000D;
	}

	ul.list-movie .ttl {
		font-size: 1.6rem;
		line-height: 1.4;
	}

	ul.list-movie .text {
		margin-top: 1em;
		font-size: 1.4rem;
	}

	ul.list-movie .category {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	/* 関連 */
	.relation {
		margin-top: 4rem;
	}

	.relation .line {
		margin-bottom: 4rem;
	}

	.relation .img-container {
		font-size: 1.4rem;
		color: #535353;
	}

	.relation .text {
		margin-top: 1em;
		font-size: 1.2rem;
	}

}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 767px) and (max-width: 1023px) {

	/* サブセクション */
	.sub-section {
		margin-top: 6rem;
	}

	.sub-section:first-of-type {
		margin-top: 0;
		padding-top: 6rem;
	}

	/* 動画一覧 */
	ul.list-movie {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	ul.list-movie li {
		width: 47%;
	}

	ul.list-movie li:nth-child(-n+2) {
		margin-top: 0;
	}
}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {
	article {
		padding-bottom: 8rem;
	}

	/* メインビジュアル */
	.main-visual {
		padding: 11rem 0 5rem;
		background-image: url(images/bg-main.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	.mv-container {
		display: flex;
		align-items: center;
		padding: 0 5rem;
	}

	.mv-text {
		width: 430px;
		position: relative;
	}

	.zokuzoku {
		position: absolute;
		top: -3rem;
		left: 0;
		transform: translate(-20px, 0) rotate(-8deg);
	}

	.mv-img {
		flex: 1;
		padding-left: 5%;
	}

	.main-title {
		margin-bottom: 4rem;
		font-size: 4.5rem;
		line-height: 1.4;
	}

	.main-text {
		font-size: 1.5rem;
		line-height: 1.8;
	}

	.mv-img .movie {
		border: solid 7px #FFB7B7;
		box-shadow: 10px 10px 0px 0px #E6000D;
	}

	/* ページナビ */
	.page-navi {
		margin-top: 10rem;
	}

	ul.list-page-navi {
		display: flex;
		justify-content: space-between;
	}

	ul.list-page-navi li {
		width: 32%;
	}

	ul.list-page-navi li a {
		display: block;
		padding: 1em 2.5em 1em 1em;
		font-size: 1.8rem;
		font-weight: bold;
		background-color: #FFB7B7;
		background-image: url(images/chevron-down-solid.svg);
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 1.5em auto;
		box-shadow: 6px 6px 0px 0px #E6000D;
		text-align: center;
		text-decoration: none;
	}

	/* サブセクション */
	.sub-section {
		margin-top: 10rem;
	}

	.sub-section:first-of-type {
		margin-top: 0;
		padding-top: 10rem;
	}

	.sub-section .line {
		padding-top: 8rem;
		border-top: solid 1px #ccc;
	}

	.sub-title {
		margin-bottom: 8rem;
		font-size: 3rem;
		text-align: center;
	}

	/* 動画一覧 */
	.movie-container {
		position: relative;
	}

	.movie-container[data-new="new"]::after {
		content: 'NEW';
		display: flex;
		justify-content: center;
		align-items: center;
		width: 5rem;
		height: 5rem;
		font-size: 1.4rem;
		background-color: #E6000D;
		color: #fff;
		border-radius: 10rem;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
	}

	.movie {
		border: solid 5px #FFB7B7;
	}

	.movie a {
		display: block;
		position: relative;
	}

	.movie a::after {
		content: '';
		width: 80px;
		padding-top: 80px;
		background-image: url(images/play.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	ul.list-movie {
		display: flex;
		flex-wrap: wrap;
		padding: 0 2.5rem;
	}

	ul.list-movie li {
		width: 30%;
		margin-top: 6rem;
		margin-left: 5%;
	}

	ul.list-movie li:nth-child(-n+3) {
		margin-top: 0;
	}

	ul.list-movie li:nth-child(3n-2) {
		margin-left: 0;
	}

	ul.list-movie .day {
		width: 5em;
		margin: 1em 0 .5em;
		border-bottom: solid 2px #E6000D;
	}

	ul.list-movie .ttl {
		font-size: 2rem;
		line-height: 1.4;
	}

	ul.list-movie .text {
		margin-top: 1em;
		font-size: 1.5rem;
	}

	ul.list-movie .category {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	/* 関連 */
	.relation {
		margin-top: 8rem;
	}

	.relation .line {
		margin-bottom: 8rem;
	}

	.relation .img-container {
		width: 580px;
		font-size: 1.4rem;
		color: #535353;
	}

	.relation .text {
		margin-top: 1em;
	}

}