@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
article {
	overflow: hidden;
}

main {
	background: transparent linear-gradient(270deg, #EAEAEA 0%, #FFFFFF 43%, #FFFFFF 57%, #EAEAEA 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
}

/* サブセクション */
.sub-title {
	font-weight: 700;
}

.sub-title-text {
	display: inline-block;
	/* border: 4px solid #D02D20; */
	padding: 0.2rem 5%;
	font-weight: 500;
	color: #fff;
	background-color: #D02D20;
}

.sub-title-text .nam {
	color: #fff;
	font-weight: 700;
}

.sub-title-container {
	text-align: center;
}

.img-text .bg-red {
	color: #D02D20;
}

.img-text {
	text-align: center;
	font-weight: 500;
}

/* MOVIEセクション */
.movie-title-container {
	text-align: center;
}

#movie {
	background: #D33636;
	color: #fff;
}

#movie .movie-title-text {
	display: inline-block;
	background-color: #ffffff;
	color: #D33636;
	padding: 0 5%;
}

#movie .movie-title {
	font-weight: 300;
}

ul.list-figures.list-movie .movie-container .text-item {
	text-align: center;
}

ul.list-figures.fix-bottom-img .movie-item {
	min-height: 0%;
	margin-top: auto;
	padding-top: 1rem;
}

ul.list-figures.fix-bottom-img .movie-container {
	display: flex;
	flex-direction: column;
}

/* 製品 */
.product-link a {
	display: inline-block;
	/* width: 100%; */
	padding: 0.1em 0;
	font-weight: 500;
	background: #D02D20;
	color: #fff;
	border-radius: 0.5rem;
	text-align: center;
	text-decoration: none;
}

.product-link a::before {
	content: '→';
	margin-right: 0.25em;
}

/* ラインコンテナ */
.line-contaner {
	max-width: 100%;
	overflow: hidden;
	font-size: 2.6rem;
	line-height: 1.4;
}

.line-red {
	background: #D02D20;
	width: 100vw;
	margin: 0 calc(50% - 94vw);
	font-weight: 500;
}

.line-gray {
	background: #E4E4E4;
	width: 100vw;
	margin: 0 calc(50% - 6vw);
	font-weight: 500;
}

.line-contaner .has-arrow-up:before {
	padding: 0 0 0 2em;
	background-image: url(images/yajirushi01.svg);
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	background-size: contain;
	vertical-align: inherit;
	background-position: center;
}

.line-contaner .has-arrow-down:before {
	padding: 0 0 0 2em;
	background-image: url(images/yajirushi02.svg);
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	background-size: contain;
	vertical-align: inherit;
	background-position: center;
}

.line-contaner .line-gray a:hover {
	color: #fff;
	/* text-decoration: none; */
}

.line-contaner .line-red a:hover {
	color: #fff;
	/* text-decoration: none; */
}

.line-red .ttl {
	opacity: 0.5;
}

.line-contaner a {
	text-decoration: none;
}

.caption-section {
	padding-bottom: 6rem;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {
	article {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.maxw860 {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}

	#slider1 .slider-outer,
	#slider2 .slider-outer,
	#slider3 .slider-outer {
		padding: 0 0;
	}

	/* メインビジュアル */
	#mainVisual {
		width: 100%;
		height: 90vw;
		overflow: hidden;
		position: relative;
	}

	#mainVisual .visual {
		width: 100%;
		height: 100%;
	}

	/* メインセクション */
	.main-section {
		padding: 4rem 0 8rem;
	}

	.main-sub-title {
		font-size: 1.6rem;
	}

	.main-title {
		font-size: 2.6rem;
		line-height: 1.8;
	}

	/* サブセクション */
	.products-section {
		padding: 5rem 0 0;
	}

	.sub-title-text {
		font-size: 1.8rem;
	}

	.sub-title {
		font-size: 4.8rem;
		margin-top: 3rem;
		line-height: 1.4;
		padding-bottom: 6rem;
	}

	.sub-text {
		padding-top: 0rem;
		font-size: 1.6rem;
		line-height: 2;
	}

	.sub-text p:nth-child(2) {
		margin-top: 1.4em;
	}

	.sub-inner-box {
		padding-left: 5%;
		padding-right: 5%;
	}

	.sub-title-text .nam {
		font-size: 2.3rem;
		position: relative;
		top: .1rem;
		margin-left: 1rem;
		line-height: 1.4;
	}

	.sub-section {
		padding: 12rem 0 12rem;
	}

	.img-container {
		margin-top: 3rem;
	}

	.img-text {
		margin-top: 9rem;
		font-size: 1.8rem;
	}

	/* MOVIEセクション */
	#movie {
		padding: 9rem 0 10rem;
	}

	#movie .movie-title-text {
		font-size: 1.8rem;
	}

	#movie .movie-title {
		font-size: 2.8rem;
		margin-top: 2rem;
	}

	#movie .list-movie {
		margin-top: 8rem;
	}

	/* 動画 */
	ul.list-figures.list-movie li {
		width: 100%;
		margin-left: 0;
	}

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

	ul.list-figures.list-movie .movie-container:first-of-type {
		margin-top: 0;
	}

	ul.list-figures.list-movie .movie-container .text-item {
		width: 100%;
	}

	ul.list-figures.list-movie .movie-container .text-item .text {
		font-size: 2.2rem;
		line-height: 1.4;
	}

	.btn-detail.more {
		margin-top: 3rem;
		text-align: center;
		font-size: 1.4rem;
	}

	/* 製品 */
	.product-container {
		display: flex;
		justify-content: center;
		padding: 4rem 0 12rem;
	}

	.product-item {
		width: 33.33%;
		border-right: solid 1px #a0a0a0;
		text-align: center;
		display: flex;
		flex-direction: column;
		font-size: 1.4rem;
	}

	.img-type-container {
		min-height: 0%;
		width: 100%;
		margin-top: auto;
	}

	.product-item:first-of-type {
		border-left: solid 1px #a0a0a0;
	}

	.product-text {
		padding: 0 10% 2%;
		font-size: 1.8rem;
		line-height: 1.6;
	}

	.product-item .img {
		padding: 0 10%;
	}

	.product-link a {
		display: inline-block;
		padding: 0.1em 1.2em;
		font-weight: 500;
		background: #D02D20;
		color: #fff;
		border-radius: 0.5rem;
	}

	.products-title {
		margin: 6rem auto 6rem;
		padding: 0.2em 0;
		font-size: 2.8rem;
		font-weight: 400;
		text-align: center;
		line-height: 1.6;
	}

	.products-text {
		margin: 0 auto 6rem;
		padding: 0.2em 0;
		font-size: 1.6rem;
		text-align: center;
	}

	/* ラインコンテナ */
	.line-contaner {
		font-size: 3vw;
	}

	.line1 .line-red .ttl {
		padding: 0 0 0 45vw;
		color: #fff;
	}

	.line1 .line-gray .ttl {
		padding: 0 0 0 28vw;
		color: #fff;
	}

	.line2 .line-red .ttl {
		padding: 0 0 0 45vw;
		color: #fff;
	}

	.line2 .line-gray .ttl {
		padding: 0 0 0 10vw;
		color: #fff;
	}

	.line-contaner .has-arrow-up:before {
		width: 2.2vw;
		height: 2.2vw;
	}

	.line-contaner .has-arrow-down:before {
		width: 2.2vw;
		height: 2.2vw;
	}
}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {
	article {
		font-size: 2.667vw;
	}

	/* メインビジュアル */

	/* サブセクション */
	.sub-section {
		padding: 8rem 0 8rem;
	}

	.products-section {
		padding: 4rem 0 0rem;
	}

	.maxw860 {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}

	/* メインセクション */
	.main-sub-title {
		font-size: 1.4em;
	}

	.main-title {
		font-size: 2em;
	}

	.btn-arrow {
		width: 100%;
	}

	.btn-arrow a {
		font-size: 1.3em;
	}

	/* サブセクション */
	.sub-title-text {
		font-size: 1.8rem;
	}

	.sub-title-text .nam {
		font-size: 2rem;
		position: relative;
		top: .1rem;
		margin-left: .6rem;
		line-height: 1.4;
	}

	.sub-title {
		font-size: 3.2rem;
		margin-top: 2rem;
		line-height: 1.4;
		padding-bottom: 4rem;
	}

	.sub-text {
		font-size: 1.5rem;
		padding-top: 0rem;
	}

	.img-text {
		margin-top: 5rem;
		font-size: 1.6rem;
	}

	.img-container {
		margin-top: 1.6rem;
	}

	/* MOVIEセクション */
	#movie.movie-section {
		padding: 5rem 0 8rem;
	}

	#movie .movie-title-text {
		font-size: 1.6rem;
	}

	#movie .movie-title {
		font-size: 1.8rem;
		margin-top: 1.2rem;
		line-height: 1.4;
	}

	#movie .list-movie {
		margin-top: 3rem;
	}

	/* 動画 */
	ul.list-figures.list-movie li {
		width: 100%;
		margin-left: 0;
	}

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

	ul.list-figures.list-movie .movie-container:first-of-type {
		margin-top: 0;
	}

	ul.list-figures.list-movie .movie-container .text-item {
		width: 100%;
	}

	ul.list-figures.list-movie .movie-container .text-item .text {
		font-size: 2.2rem;
		line-height: 1.4;
	}

	/* 製品 */
	.product-container {
		display: inherit;
		justify-content: center;
		padding: 0rem 0 4rem;
	}

	.product-item {
		width: 100%;
		padding: 2rem 0;
		border-top: solid 1px #a0a0a0;
		border-right: none;
		text-align: center;
		font-size: 1.4em;
	}

	.product-item .product-link {
		margin-top: 0.2em;
	}

	.product-item .img {
		padding: 0 20%;
	}

	.product-item:last-of-type {
		border-bottom: solid 1px #a0a0a0;
	}

	.products-title {
		font-size: 1.8rem;
		line-height: 1.5;
		margin: 2rem auto 3rem;
	}

	.product-text {
		padding: 0 0 2%;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}


	/* 製品2 */
	.product-item:first-of-type {
		border-top: none;
	}

	.img-type-container {
		display: flex;
		justify-content: center;
		padding: 0 0;
	}

	.img-type-container .img {
		width: 50%;
		padding: 0 5% 0 0;
	}

	.img-type-container .type {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		width: 120px;
	}

	.product-item:first-of-type {
		border-left: none;
	}

	.product-link a {
		display: inline-block;
		padding: 0.1rem 0;
		font-weight: 500;
		background: #D02D20;
		color: #fff;
		border-radius: 0.5rem;
		text-align: center;
		text-decoration: none;
		width: 120px;
		font-size: 1.5rem;
	}

	/* ラインコンテナ */
	.line-contaner {
		font-size: 4.4vw;
		line-height: 1.4;
	}

	.has-arrow-up {
		padding: 0 0 0 1em;
		background-position: left 44vw top .55em;
		background-size: auto .8em;
	}

	.has-arrow-down {
		padding: 0 0 0 1em;
		background-position: left 21vw top .55em;
		background-size: auto .8em;
	}

	.line1 .line-red .ttl {
		padding: 0 0 0 30vw;
		color: #fff;
	}

	.line1 .line-gray .ttl {
		padding: 0 0 0 27vw;
		color: #fff;
	}

	.line1 .line-red {
		background: #D02D20;
		width: 100vw;
		margin-left: -30vw;
	}

	.line1 .line-gray {
		background: #E4E4E4;
		width: 100vw;
		margin-left: 30vw;
	}

	.line2 .has-arrow-up {
		padding: 0 0 0 1em;
		background-position: left 35vw top .6em;
		background-size: auto .6em;
	}

	.line2 .has-arrow-down {
		padding: 0 0 0 1em;
		background-position: left 8vw top .6em;
		background-size: auto .6em;
	}

	.line2 .line-red .ttl {
		padding: 0 0 0 30vw;
		color: #fff;
	}

	.line2 .line-gray .ttl {
		padding: 0 0 0 0vw;
		color: #fff;
	}

	.line2 .line-red {
		background: #D02D20;
		width: 100vw;
		margin-left: -30vw;
		/* margin-bottom: 1rem;  */
	}

	.line2 .line-gray {
		background: #E4E4E4;
		width: 100vw;
		margin-left: 30vw;
	}

	.line-contaner .has-arrow-up:before {
		width: 3vw;
		height: 3vw;
	}

	.line-contaner .has-arrow-down:before {
		width: 3vw;
		height: 3vw;
	}

	.sub-title-text {
		padding: 0.5% 8%;
	}

	#movie .movie-title-text {
		padding: 0.5% 14%;
	}

	.caption-section {
		padding-bottom: 6rem;
	}
}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {
	article {
		font-size: 1.6rem;
		line-height: 2;
	}

	/* メインビジュアル */
	#mainVisual {
		width: 100%;
		height: calc(100vh - 159px);
		overflow: hidden;
	}

	/* メインセクション */
	.main-section {
		padding: 8rem 0 18rem;
		text-align: center;
	}

	.main-sub-title {
		font-size: 2.4rem;
	}

	.main-title {
		font-size: 4rem;
		line-height: 1.8;
	}

	/* サブセクション */
	.sub-title-text {
		font-size: 1.8rem;
	}

	.sub-title {
		font-size: 6rem;
		margin-top: 3rem;
		line-height: 1.4;
		padding-bottom: 6rem;
	}

	.sub-text {
		padding-top: 0;
		font-size: 1.6rem;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.sub-title-text .nam {
		font-size: 2.4rem;
		position: relative;
		top: .1rem;
		margin-left: 1rem;
		line-height: 1.4;
	}

	.sub-text p:nth-child(2) {
		margin-top: 1.4em;
	}

	.sub-section {
		padding: 18rem 0 18rem;
	}

	.img-container {
		margin-top: 4rem;
		padding: 0 10%;
	}



	.img-text {
		margin-top: 9rem;
		font-size: 1.8rem;
	}

	/* MOVIEセクション */
	#movie {
		padding: 8rem 0 10rem;
	}

	#movie .movie-title-text {
		font-size: 1.8rem;
	}

	#movie .movie-title {
		font-size: 2.8rem;
		margin-top: 1rem;
	}

	#movie .list-movie {
		margin-top: 7.5rem;
	}

	/* 動画 */
	ul.list-figures {
		display: flex;
		flex-wrap: wrap;
	}

	/* ul.list-figures.list-movie li {
		width: 31%;
		margin-left: 3.5%;
	}
	 ul.list-figures.list-movie li:nth-of-type(n+4) {
		margin-top: 3rem;
	}
	ul.list-figures.list-movie li:nth-child(3n-2) {
		margin-left: 0;
	}  */
	ul.list-figures.list-movie li {
		width: 48%;
		margin-left: 4%;
	}

	ul.list-figures.list-movie li:nth-of-type(n+3) {
		margin-top: 6rem;
	}

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

	ul.list-figures.list-movie .movie-container .text-item {
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.4;
	}

	ul.list-figures.list-movie .movie-container .text-item .text {
		font-size: 2.2rem;
		line-height: 1.4;
	}

	.btn-detail.more {
		margin-top: 3rem;
		text-align: center;
		font-size: 1.4rem;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container.half {
		justify-content: space-between;
	}

	.flex-container.half>.flex-item.right {
		width: 60%;
	}

	.flex-container.half>.flex-item.left {
		width: 40%;
	}

	/* フレックスコンテナ：3カラム */
	.flex-container.col3 {
		justify-content: space-between;
	}

	.flex-container.col3>.flex-item {
		width: 30.47%;
	}

	/* 製品 */
	.products-section {
		padding: 6rem 0 0;
	}

	.product-container {
		display: flex;
		justify-content: center;
		padding: 4rem 0 12rem;
	}

	.product-item {
		width: 33.33%;
		border-right: solid 1px #a0a0a0;
		text-align: center;
	}

	.product-item:first-of-type {
		border-left: solid 1px #a0a0a0;
	}

	.product-text {
		font-size: 2rem;
		line-height: 1.6;
	}

	.type-text {
		font-size: 2rem;
	}

	.product-item .img {
		padding: 5% 10%;
	}

	.product-link {
		width: 9em;
		margin: 0 auto;
	}

	.product-link a {
		display: inline-block;
		padding: 0.1em 1.2em;
		font-weight: 500;
		background: #D02D20;
		color: #fff;
		border-radius: 0.5rem;
	}

	.products-title {
		margin: 10rem auto 6rem;
		padding: 0.2em 0;
		font-size: 2.8rem;
		font-weight: 400;
		text-align: center;
		line-height: 1.6;
	}

	.products-text {
		margin: 0 auto 6rem;
		padding: 0.2em 0;
		font-size: 1.6rem;
		text-align: center;
	}

	/*  */
}

/* ====================================
	768-1023px専用スタイル
===================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {}

/* ====================================
	1024-1199px専用スタイル
===================================== */
@media screen and (min-width: 1024px) and (max-width: 1199px) {

	/* ラインコンテナ */
	.line1 .line-red .ttl {
		padding: 0 0 0 45vw;
		color: #fff;
	}

	.line1 .line-gray .ttl {
		padding: 0 0 0 29vw;
		color: #fff;
	}

	.line2 .line-red .ttl {
		padding: 0 0 0 45vw;
		color: #fff;
	}

	.line2 .line-gray .ttl {
		padding: 0 0 0 12vw;
		color: #fff;
	}

	.line2 .has-arrow-up {
		padding: 0 0 0 1em;
		background-position: left 45vw top .65em;
		background-size: auto .8em;
	}
}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {

	/* ラインコンテナ */
	.line1 .line-red .ttl {
		padding: 0 0 0 47vw;
		color: #fff;
	}

	.line1 .line-gray .ttl {
		padding: 0 0 0 33vw;
		color: #fff;
	}

	.line2 .line-red .ttl {
		padding: 0 0 0 47vw;
		color: #fff;
	}

	.line2 .line-gray .ttl {
		padding: 0 0 0 19vw;
		color: #fff;
	}
}