@charset "UTF-8";
/* CSS Document */


/*==============================
メイン設定
==============================*/

/*------------------------------
メインフォト設定
------------------------------*/

/*メインフォト*/
.mainPhoto{
	width: 100%;
	height: 300px;
	background: url(../images/about/bg_main@2x.jpg) no-repeat center center / cover;
}

/*------------------------------
ごあいさつ設定
------------------------------*/

/*ごあいさつ全体*/
#greeting{
	margin: 0 auto 0;
	padding: 85px 0 150px;
	width: 640px;
}

/*ごあいさつ 日本語見出し*/
#greeting h2{
	font-family: 'Noto Serif JP', serif;
}

/*ごあいさつ 説明*/
#greeting .desc{
	margin: 30px auto 0;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
}

/*------------------------------
会社概要設定
------------------------------*/

/*会社概要全体*/
#company{
	padding: 120px 0;
	width: 100%;
	background: url(../images/about/bg_company@2x.jpg) no-repeat center center / cover;
}

/*会社概要 見出し*/
#company h2{
	color: #FFF;
}

/*会社概要 見出し日本語*/
#company h2::after{
	content: "- 会社概要 -";
	color: #FFF;
}

/*会社概要 table*/
#company table{
	margin: 60px auto 0;
	width: 600px;
}

/*会社概要 table行*/
#company tr{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*会社概要 table 見出し列*/
#company th{
	width: 214px;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: left;
}

/*会社概要 table 情報列*/
#company td{
	width: calc(100% - 214px);
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: justify;
}

/*会社概要 table 情報列 リンク*/
#company td a{
	color: #FFF;
	text-decoration: underline;
}

/*------------------------------
設定
------------------------------*/

/*沿革全体*/
#history{
	padding: 120px 0;
	width: 100%;
	background: url(../images/about/bg_histry_back01.svg) repeat-y top 0 left 10% / 170px 2700px;
	animation: wave1 40s infinite linear;
	position: relative;
}

#history::before,
#history::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#history::before{
	background: url(../images/about/bg_histry_back02.svg) repeat-y top 0 right 5% / 170px 2700px;
	animation: wave2 50s infinite linear;
	z-index: 0;
}

#history::after{
	background: #FFF;
	z-index: -1;
}

@keyframes wave1{
	0%{
		background: url(../images/about/bg_histry_back01.svg) repeat-y top 0 left 10% / 170px 2700px;
	}
	100%{
		background: url(../images/about/bg_histry_back01.svg) repeat-y top -2700px left 10% / 170px 2700px;
	}
}

@keyframes wave2{
	0%{
		background: url(../images/about/bg_histry_back02.svg) repeat-y top 0 right 5% / 170px 2700px;
	}
	100%{
		background: url(../images/about/bg_histry_back02.svg) repeat-y top -2700px right 5% / 170px 2700px;
	}
}

/*沿革全体 見出し日本語*/
#history h2::after{
	content: "- 沿革 -";
}

/*沿革リスト*/
.historyList{
	margin: 40px auto 0;
	width: 590px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*沿革リスト 見出し*/
.historyList dt{
	width: 55px;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
}

/*沿革リスト 見出し 装飾*/
.historyList dt span{
	padding: 2px 10px;
	background: #20304F;
	border-radius: 15px;
}

/*沿革リスト 説明*/
.historyList dd{
	width: calc(100% - 55px - 20px);
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: justify;
}

/*沿革写真1*/
#history .photoDeco01{
	width: 340px;
	height: 272px;
	background: url(../images/about/bg_history01@2x.jpg) center center / cover;
	position: absolute;
	top: -100px;
	left: 0;
}

/*沿革写真2*/
#history .photoDeco02{
	width: 224px;
	height: 180px;
	background: url(../images/about/bg_history02@2x.jpg) center center / cover;
	position: absolute;
	top: 160px;
	right: 0;
}

/*沿革写真3*/
#history .photoDeco03{
	width: 274px;
	height: 180px;
	background: url(../images/about/bg_history03@2x.jpg) center center / cover;
	position: absolute;
	top: 296px;
	left: 54px;
}

/*沿革写真4*/
#history .photoDeco04{
	width: 322px;
	height: 258px;
	background: url(../images/about/bg_history04@2x.jpg) center center / cover;
	position: absolute;
	top: 588px;
	left: 0;
}

/*沿革写真5*/
#history .photoDeco05{
	width: 290px;
	height: 230px;
	background: url(../images/about/bg_history05@2x.jpg) center center / cover;
	position: absolute;
	top: 510px;
	right: 0;
}

.bnrShopInsta{
	margin: 200px auto 0;
}

/*==============================
レスポンシブ設定
==============================*/

/*1300px以下の場合*/
@media screen and (max-width:1300px){

	/*沿革写真1*/
	#history .photoDeco01{
		width: 250px;
		height: 200px;
		top: -100px;
		left: 50px;
	}

	/*沿革写真2*/
	#history .photoDeco02{
		width: 200px;
		height: 180px;
		top: 160px;
	}

	/*沿革写真3*/
	#history .photoDeco03{
		width: 200px;
		height: 150px;
		top: 296px;
		left: 0;
	}

	/*沿革写真4*/
	#history .photoDeco04{
		width: 200px;
		height: 150px;
		top: 588px;
	}

	/*沿革写真5*/
	#history .photoDeco05{
		width: 200px;
		height: 150px;
		top: 510px;
	}

	
}

/*980px以下の場合*/
@media screen and (max-width:980px){
	
	#history .photo{
		margin: 100px auto 0;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	/*沿革写真1*/
	#history .photoDeco01{
		width: calc(100% / 3);
		height: 200px;
		background: url(../images/about/bg_history01@2x.jpg) center center / cover;
		position: static;
	}

	/*沿革写真2*/
	#history .photoDeco02{
		width: calc(100% / 3);
		height: 200px;
		background: url(../images/about/bg_history02@2x.jpg) center center / cover;
		position: static;
	}

	/*沿革写真3*/
	#history .photoDeco03{
		width: calc(100% / 3);
		height: 200px;
		background: url(../images/about/bg_history03@2x.jpg) center center / cover;
		position: static;
	}

	/*沿革写真4*/
	#history .photoDeco04{
		width: calc(100% / 2);
		height: 200px;
		background: url(../images/about/bg_history04@2x.jpg) center center / cover;
		position: static;
	}

	/*沿革写真5*/
	#history .photoDeco05{
		width: calc(100% / 2);
		height: 200px;
		background: url(../images/about/bg_history05@2x.jpg) center center / cover;
		position: static;
	}

}

/*768px以下の場合*/
@media screen and (max-width:768px){

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	メインフォト設定
	------------------------------*/

	/*メインフォト*/
	.mainPhoto{
		height: 250px;
	}

	/*------------------------------
	ごあいさつ設定
	------------------------------*/

	/*ごあいさつ全体*/
	#greeting{
		padding: 60px 0 120px;
		width: calc(100% - 80px);
	}

	/*ごあいさつ 説明*/
	#pgreeting .desc{
		margin: 40px 0 0 0;
	}

	/*------------------------------
	会社概要設定
	------------------------------*/

	/*会社概要全体*/
	#company{
		padding: 100px 0;
	}

	/*会社概要 table*/
	#company table{
		margin: 40px auto 0;
		width: 480px;
	}

	/*会社概要 table 見出し列*/
	#company th{
		width: 160px;
	}

	/*会社概要 table 情報列*/
	#company td{
		width: calc(100% - 160px);
	}

	/*------------------------------
	設定
	------------------------------*/

	/*沿革全体*/
	#history{
		padding: 100px 0 0;
		background: url(../images/about/bg_histry_back01.svg) repeat-y top 0 left 2% / 85px 1350px;
	}

	#history::before{
		background: none;
		animation: none;
	}

	@keyframes wave1{
		0%{
			background: url(../images/about/bg_histry_back01.svg) repeat-y top 0 left 2% / 85px 1350px;
		}
		100%{
			background: url(../images/about/bg_histry_back01.svg) repeat-y top -1350px left 2% / 85px 1350px;
		}
	}


	/*沿革リスト*/
	.historyList{
		width: 480px;
	}

	.bnrShopInsta{
		margin: 150px auto 0;
	}



}

/*480px以下の場合*/
@media screen and (max-width:480px){

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	メインフォト設定
	------------------------------*/

	/*メインフォト*/
	.mainPhoto{
		height: 150px;
	}

	/*------------------------------
	ごあいさつ設定
	------------------------------*/

	/*ごあいさつ全体*/
	#greeting{
		padding: 40px 0 60px;
		width: calc(100% - 40px);
	}

	/*ごあいさつ 説明*/
	#greeting .desc{
		margin: 30px 0 0 0;
		line-height: 26px;
		text-align: justify;
	}

	/*------------------------------
	会社概要設定
	------------------------------*/

	/*会社概要全体*/
	#company{
		padding: 60px 0;
	}

	/*会社概要 table*/
	#company table{
		margin: 20px auto 0;
		width: calc(100% - 40px);
	}

	/*会社概要 table 見出し列*/
	#company th{
		padding: 10px 0;
		width: 100%;
		line-height: 26px;
		border-bottom: 1px solid #FFF;
	}

	/*会社概要 table 情報列*/
	#company td{
		padding: 10px 0;
		width: 100%;
		line-height: 26px;
	}

	/*------------------------------
	設定
	------------------------------*/

	/*沿革全体*/
	#history{
		padding: 60px 0 0;
	}

	/*沿革リスト*/
	.historyList{
		margin: 10px auto 0;
		width: calc(100% - 40px);
	}

	/*沿革リスト 見出し*/
	.historyList dt{
		padding: 15px 0 0 0;
		width: 100%;
		text-align: left;
	}

	/*沿革リスト 説明*/
	.historyList dd{
		padding: 0 0 15px;
		width: 100%;
		line-height: 26px;
		border-bottom: 1px solid #4D4D4D;
	}

	#history .photo{
		margin: 60px auto 0;
	}

	/*沿革写真1*/
	#history .photoDeco01{
		height: 150px;
	}

	/*沿革写真2*/
	#history .photoDeco02{
		height: 150px;
	}

	/*沿革写真3*/
	#history .photoDeco03{
		height: 150px;
	}

	/*沿革写真4*/
	#history .photoDeco04{
		height: 150px;
	}

	/*沿革写真5*/
	#history .photoDeco05{
		height: 150px;
	}

	.bnrShopInsta{
		margin: 100px auto 0;
	}




}