@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}




/* ================================================================================

	メインビジュアル

================================================================================ */

/* PC設定
----------------------------------------------- */
@keyframes main_top_animation_fade {
	0% { opacity: 0; }
	6% { opacity: 1; }
	34% { opacity: 1; }
	40%, 100% { opacity: 0; }
}

@keyframes main_top_animation_scale {
	0% { transform: scale(1); }
	40%, 100% { transform: scale(1.06); }
}

.box_main_top_image span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: center center;
	animation-name: main_top_animation_fade, main_top_animation_scale;
	animation-duration: 18s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	opacity: 0;
}

.box_main_top_image span:nth-of-type(1) {
	animation-delay: 0s; 
}

.box_main_top_image span:nth-of-type(2) {
	animation-delay: 6s; 
}

.box_main_top_image span:nth-of-type(3) {
	animation-delay: 12s; 
}


@media (min-width: 768px) {
	.main_text {
		font-weight: 500;
		font-size: 1.614vw;
		color: #fff;
		position: absolute;
		z-index: 1;
		bottom: 7.75vw;
		left: 6.1vw;
		letter-spacing: 0.2vw;
		text-align: left;
	}
	.main_text span {
		font-size: 0.806vw;
		display: block;
		margin-top: 0.25vw;
		letter-spacing: 0.14em;
	}
	
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
		width: 100%;
		height: 47.916vw;
	}

	/* 画像 */
	.box_main_top_image {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	.box_main_top_image::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.4;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	.box_main_top_image img {
		min-width: 100%;
		min-height: 100%;
		width: 100%;;
		height: auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	
	.bs_header .post_wrap {
		width: 40.6vw;
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: 0;
		background-color: rgba(17,17,17,0.8);
		font-size: 1.145vw;
		padding: 1vw 2vw 1.5vw;
	}
	
	.bs_header .post_wrap ul li {
		border-bottom: 1px solid #6b6b6b;
		padding: 0 0.46875vw;
		letter-spacing: 0.055em;
	}
	.bs_header .post_wrap ul li:not(:first-of-type) {
		margin-top: 0.6vw;
	}
	
	
	.bs_header .post_wrap,
	.bs_header .post_wrap a {
		color: #fff;
	}
	
	.bs_header .post_wrap .post_date {
		float: left;
		margin-right: 1.25vw;
	}
	
	.bs_header .post_wrap .post_title a {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_text {
		font-weight: 500;
		font-size: 5vw;
		color: #fff;
		position: absolute;
		z-index: 1;
		bottom: 20vw;
		left: 6.1vw;
		letter-spacing: 0.05em;
		text-align: left;
	}
	.main_text span {
		font-size: 2.4vw;
		display: block;
		margin-top: 0.05em;
		letter-spacing: 0.14em;
	}
	
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
		width: 100%;
	}

	/* 画像 */
	.box_main_top_image {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		height: 100vw;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}
	.box_main_top_image::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.4;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	.box_main_top_image img {
		min-width: 100%;
		min-height: 100%;
		width: 100%;;
		height: auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		object-position: -50vw 0vw;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}
	
	.bs_header .post_wrap {
		position: relative;
		z-index: 1;
		right: 0;
		bottom: 0;
		background-color: #111;
		padding: 4vw 6vw 4.5vw;
	}
	
	.bs_header .post_wrap ul li {
		border-bottom: 1px solid #6b6b6b;
		padding: 0 1vw 2vw;
		letter-spacing: 0.055em;
	}
	.bs_header .post_wrap ul li:not(:first-of-type) {
		margin-top: 2vw;
	}
	
	
	.bs_header .post_wrap,
	.bs_header .post_wrap a {
		color: #fff;
	}
	
	.bs_header .post_wrap .post_date {
	}
	
	.bs_header .post_wrap .post_title a {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	E-FLOWについて

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row01 {
		background: url(../img/bg_stripe.jpg) center -196px / auto no-repeat;
		padding-bottom: 140px;
	}
	
	.row01-01 {
		margin-top: 186px !important;
	}
	
	.row01_title01 {
		padding-top: 56px;
	}
	.row01_title01 h2 {
		position: relative;
		text-align: center;
		font-size: 32px;
		letter-spacing: 0.12em;
	}
	.row01_title01 span {
		display: block;
		font-size: 14px;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 19px;
		letter-spacing: 0.09em;
	}
	.row01_title01 h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 47px;
		height: 35px;
		top: -56px;
		left: 50%;
		margin-left: -23px;
	}
	
	.row01_text01 {
		font-size: 18px;
		text-align: center;
		margin-top: 45px;
		letter-spacing: 0.11em;
	}
	.row01_text01 p + * {
		margin-top: 1.95em;
	}
	
	.row01-02 {
		margin-top: 145px !important;
	}
	
	.row01_title02 {
		padding-left: 24px;
	}
	.row01_title02 h2 {
		font-size: 32px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		line-height: 1.65;
		letter-spacing: 0.06em;
		position: relative;
		height: 480px;
	}
	.row01_title02 h2 span {
		font-size: 14px;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		display: block;
		position: absolute;
		bottom: 23px;
		left: -28px;
		letter-spacing: 0.12em;
	}
	
	.row01_box {
		padding: 38px 48px;
	}
	.row01_box h3 {
		position: relative;
		font-size: 24px;
		letter-spacing: 0.13em;
	}
	
	.row01_box p {
		font-size: 18px;
		margin-top: 20px;
		line-height: 1.8;
		letter-spacing: 0.05em;
	}
	
	.box01 {
		background: url(../img/row01_box01_bg.jpg) center top / cover no-repeat;
		color: #ffffff;
		margin-top: 76px;
	}
	.box01 h3:after {
		position: absolute;
		content: '';
		height: 1px;
		width: 586px;
		top: 22px;
		right: 0;
		background-color: #fff;
	}
	.box02 {
		background-color: #cecece;
		margin: 22px 0 !important;
	}
	.box03 {
		background: url(../img/row01_box03_bg.jpg) center top / cover no-repeat;
	}
	.box02 h3:after,
	.box03 h3:after {
		position: absolute;
		content: '';
		height: 1px;
		width: 586px;
		top: 22px;
		right: 0;
		background-color: #111111;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row01 {
		background: url(../img/bg_stripe01.jpg) center -31vw / 155% repeat;
		padding-bottom: 18vw;
	}
	
	.row01-01 {
		margin-top: 18vw !important;
	}
	
	.row01_title01 {
		padding-top: 11vw;
	}
	.row01_title01 h2 {
		position: relative;
		text-align: center;
		font-size: 5vw;
		letter-spacing: 0.12em;
	}
	.row01_title01 span {
		display: block;
		font-size: 3vw;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 4vw;
		letter-spacing: 0.09em;
	}
	.row01_title01 h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 9vw;
		height: 7vw;
		top: -11vw;
		left: 50%;
		margin-left: -4.5vw;
	}
	
	.row01_text01 {
		text-align: center;
		margin-top: 6vw;
		letter-spacing: 0.11em;
		padding: 0 6vw;
	}
	.row01_text01 p + * {
		margin-top: 1.3em;
	}
	
	.row01-02 {
		margin-top: 18vw !important;
	}
	
	.row01_title02 {
		width: 16vw !important;
		margin: 0 auto;
	}
	.row01_title02 h2 {
		font-size: 5vw;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		line-height: 1.65;
		letter-spacing: 0.06em;
		position: relative;
		height: 77vw;
	}
	.row01_title02 h2 span {
		font-size: 3vw;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		display: block;
		position: absolute;
		bottom: 2vw;
		left: -7vw;
		letter-spacing: 0.12em;
	}
	
	.row01_box {
		padding: 8vw;
	}
	.row01_box h3 {
		position: relative;
		font-size: 5vw;
		letter-spacing: 0.13em;
	}
	
	.row01_box p {
		margin-top: 4vw;
		line-height: 1.8;
		letter-spacing: 0.05em;
	}
	
	.box01 {
		background: url(../img/row01_box01_bg.jpg) center top / cover no-repeat;
		color: #ffffff;
		margin: 8vw;
	}
	.box01 h3:after {
		position: absolute;
		content: '';
		height: 1px;
		width: 47vw;
		top: 4.5vw;
		right: 0;
		background-color: #fff;
	}
	.box02 {
		background-color: #cecece;
		margin: 6vw 8vw !important;
	}
	.box03 {
		background: url(../img/row01_box03_bg.jpg) center top / cover no-repeat;
		margin: 0 8vw;
	}
	.box02 h3:after,
	.box03 h3:after {
		position: absolute;
		content: '';
		height: 1px;
		width: 47vw;
		top: 4.5vw;
		right: 0;
		background-color: #111111;
	}
	
	
}





/* ================================================================================

	取扱品目

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row02 {
		background: url(../img/bg_cube.jpg) center top / 50px repeat;
		padding: 140px 0;
	}
	
	.row02_title {
		padding-top: 56px;
	}
	.row02_title h2 {
		position: relative;
		text-align: center;
		font-size: 32px;
		letter-spacing: 0.12em;
	}
	.row02_title span {
		display: block;
		font-size: 14px;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 19px;
		letter-spacing: 0.09em;
	}
	.row02_title h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 47px;
		height: 35px;
		top: -56px;
		left: 50%;
		margin-left: -23px;
	}
	
	.row02_content {
		margin-top: 34px !important;
	}
	
	.row02_box ul li {
		margin-bottom: 20px;
	}
	.row02_box ul li:last-of-type {
		margin-bottom: 0;
	}
	.row02_box ul li a {
		position: relative;
		color: #111111;
		font-size: 20px;
		display: block;
		padding: 19px 25px;
		letter-spacing: 0.05em;
	}
	.row02_box ul li a:after {
		position: absolute;
		content: '';
		background: url(../img/arrow01.png) center top / contain no-repeat;
		width: 12px;
		height: 15px;
		top: 50%;
		right: 21px;
		margin-top: -7.5px;
	}
	.row02_box ul li:nth-child(odd) a {
		background-color: #ededed;
	}
	.row02_box ul li:nth-child(even) a {
		background-color: #cecece;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row02 {
		background: url(../img/bg_cube.jpg) center top / 10% repeat;
		padding: 18vw 8vw;
	}
	
	.row02_title {
		padding-top: 11vw;
	}
	.row02_title h2 {
		position: relative;
		text-align: center;
		font-size: 5vw;
		letter-spacing: 0.12em;
	}
	.row02_title span {
		display: block;
		font-size: 3vw;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 4vw;
		letter-spacing: 0.09em;
	}
	.row02_title h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 9vw;
		height: 7vw;
		top: -11vw;
		left: 50%;
		margin-left: -4.5vw;
	}
	
	.row02_content {
		margin-top: 8vw !important;
	}
	
	.row02_box ul li {
		margin-bottom: 6%;
	}
	.row02_box ul li:last-of-type {
		margin-bottom: 0;
	}
	.row02_box ul li a {
		position: relative;
		color: #111111;
		font-size: 4.5vw;
		display: block;
		padding: 5vw 7vw;
		letter-spacing: 0.05em;
	}
	.row02_box ul li a:after {
		position: absolute;
		content: '';
		background: url(../img/arrow01.png) center top / contain no-repeat;
		width: 2.8vw;
		height: 4vw;
		top: 50%;
		right: 6vw;
		margin-top: -1.8vw;
	}
	.row02_box ul li:nth-child(odd) a {
		background-color: #ededed;
	}
	.row02_box ul li:nth-child(even) a {
		background-color: #cecece;
	}
	
	
}





/* ================================================================================

	E-FLOWへ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row03 {
		padding: 138px 0;
		background: url(../img/bg_stripe01.jpg) center -137px / auto no-repeat;
	}
	
	.row03_title {
		padding-top: 56px;
	}
	.row03_title h2 {
		position: relative;
		text-align: center;
		font-size: 32px;
		letter-spacing: 0.12em;
	}
	.row03_title span {
		display: block;
		font-size: 14px;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 19px;
		letter-spacing: 0.09em;
	}
	.row03_title h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 47px;
		height: 35px;
		top: -56px;
		left: 50%;
		margin-left: -23px;
	}
	
	.row03_content {
		margin-top: 40px !important;
	}
	
	.row03_btn {
		text-align: center;
	}
	.row03_btn a {
		position: relative;
		font-size: 24px;
		font-weight: bold;
		display: block;
		color: #111111;
		letter-spacing: 0.05em;
	}
	.row03_btn a div {
		margin-top: 18px;
		position: relative;
	}
	.row03_btn a div:after {
		position: absolute;
		content: '';
		background: url(../img/arrow01.png) center top / contain no-repeat;
		width: 11.5px;
		height: 15.1px;
		top: 50%;
		right: 11px;
		margin-top: -5.55px;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row03 {
		padding: 18vw 0;
		background: url(../img/bg_stripe01.jpg) center -31vw / 155% repeat;
	}
	
	.row03_title {
		padding-top: 11vw;
	}
	.row03_title h2 {
		position: relative;
		text-align: center;
		font-size: 5vw;
		letter-spacing: 0.12em;
	}
	.row03_title span {
		display: block;
		font-size: 3vw;
		font-family: 'Roboto Condensed', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		margin-top: 4vw;
		letter-spacing: 0.09em;
	}
	.row03_title h2:before {
		position: absolute;
		content: '';
		background: url(../img/icon.png) center top / contain no-repeat;
		width: 9vw;
		height: 7vw;
		top: -11vw;
		left: 50%;
		margin-left: -4.5vw;
	}
	
	.row03_content {
		margin: 8vw !important;
	}
	
	.row03_sp {
		margin: 8vw 0;
	}
	
	.row03_btn {
		text-align: center;
	}
	.row03_btn a {
		position: relative;
		font-size: 5vw;
		font-weight: bold;
		display: block;
		color: #111111;
		letter-spacing: 0.05em;
	}
	.row03_btn a div {
		margin-top: 4vw;
		position: relative;
	}
	.row03_btn a div:after {
		position: absolute;
		content: '';
		background: url(../img/arrow01.png) center top / contain no-repeat;
		width: 2.8vw;
		height: 4vw;
		top: 50%;
		right: 6vw;
		margin-top: -1.6vw;
	}
}





/* ================================================================================

	パララックス

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.parallax-bg {
		position: relative;
		background: url(../img/parallax01.jpg) center top / cover no-repeat fixed;
		width: 100%;
		height: 42.3vw;
	}
	.parallax-bg::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.4;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.parallax-bg {
		position: relative;
		background: url(../img/parallax01.jpg) -51vw top / cover no-repeat;
		width: 100%;
		height: 79vw;
	}
	.parallax-bg::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.4;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
}





/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}