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


@import url(reset.css);
img { vertical-align: bottom; }

/*---------------------・SP・---------------------*/


/*===============・アニメーション　ロード時・==================*/


.load-up{
	opacity: 0; transform: translateY(50px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;
	}
.load-up.done{
	opacity : 1; transform : translate(0, 0);
	}

/*==============・アニメーション　スクロール時・===============*/


.element {
 	opacity: 0; transform: translateY(50px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;
}

/* フェードイン時に入るクラス */
.is-fadein {
	opacity : 1; transform : translate(0, 0);
	}






/*====================・ボディ・=======================*/

body {
  font-size: 14px;
  letter-spacing: .07em;
	font-weight: 200;
	 background-color: #FAFAFA;
	 line-height: 30px;
}



/*====================・ヘッダ・=======================*/

header {
	width: 100%;
	min-height: 70px;
	background-color: white;
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 100;
	}

header p.logo {
	text-align: center;
	margin-top: -10px;
}
header p.logo img {
	width: auto;
	height: 100px;
	z-index: 200;
}


/*==================・ファーストビュー・=====================*/

section.first_v {
	margin-top: 0;
	background-color: #002912;
	height: 110vh;
	width: 100%;
}

p.catch_copy {
	text-align: center;
}
p.catch_copy img {
	padding-top: 42vh;
	width: 300px;
	height: auto;
}




/*====================・メイン・======================*/

div.main1 {
	background-color: white;
/*	padding-bottom: 50px;*/
}


/*====================・説明・======================*/

section.explanation {
	text-align: center;
	padding-top: 80px;
}
section.explanation h1 {
	font-size: 46px;
}
section.explanation p {
	padding-top: 50px;
	font-size: 18px;
	line-height: 26px;
}


/*====================・バナー・======================*/

section.banner p.banner {
	padding-top: 100px;
}
section.banner p.banner img {
	width: 100%;
	height: auto;
}


/*====================・お知らせ1・======================*/

section.notice p.notice {
	padding-top: 80px;
}
section.notice p.notice img {
	width: 100%;
	height: auto;
}


/*====================・商品1・======================*/


section.merchandise {
	padding-top: 0px;
}

section.merchandise.bg_1 {
	background-color: #810000;
}

section.merchandise.bg_2 {
	background-color: #F4EBDF;
}

section.merchandise p.merchandise {
	padding: 50px 14px 0 14px;
	max-width: 860px;
	margin: 0 auto;
}


section.merchandise p.merchandise img {	
	width: 100%;
	height: auto;
}






/*====================・商品2・======================*/

section.merchandise2 h1.ttl2 {
	text-align: center;
	font-size: 28px;
	padding: 28px;
}

section.merchandise2 h1.ttl2.pc.co_1 {
	display: none;
}
section.merchandise2 h1.ttl2.sp.co_1 {
	text-align: center;
	font-size: 28px;
	padding: 28px;
}

section.merchandise2 h1.ttl2.co_1 {
	color: white;
}
section.merchandise2 {
	background-color: white;
	padding-bottom: 50px;
}

section.merchandise2.bg_1 {
	background-color: #810000;
	padding-bottom: 50px;
}

section.merchandise2.bg_2 {
	background-color: #F4EBDF;
	padding-bottom: 50px;
}




section.merchandise2 .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 0 15px;
}

section.merchandise2 .container3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 0 15px;
}


section.merchandise2 .container .item {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.merchandise2 .container3 .item {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.merchandise2 .container .item.last img {
	display: none;
}


section.merchandise2 .container .item img {
	width: 30vw;
	height: auto;
	max-width: 100%;
 	max-height: 100%;
}

section.merchandise2 .container3 .item img {
	width: 30vw;
	height: auto;
	max-width: 100%;
 	max-height: 100%;
}

div.main2 {
	background-color: white;
	padding-top: 50px;
}


/*====================・お知らせ2・======================*/

section.notice2 p.notice2 img {
	margin-top: 80px;
	width: 100%;
	height: auto;
}


/*====================・お知らせ3・======================*/

section.notice3 {
	padding-bottom: 200px;
}

section.notice3 p.notice3 img {
	margin-top: 10px;
	width: 100%;
	height: auto;
}


/*====================・フッタ・======================*/

footer {
	height: 40px;
	text-align: center;
	background-color: #F7F5EF;
	color: black;
	font-size: 12px;
	line-height: 40px;
}







/*---------------------・PC・---------------------*/


@media only screen and (min-width:680px){


/*==================・ファーストビュー・=====================*/
p.catch_copy img {
	padding-top: 22vh;
	width: 600px;
	height: auto;
}


/*==================・バナー・=====================*/

section.banner p.banner {
	max-width: 860px;
	margin: 0 auto;
}

/*==================・お知らせ1・=====================*/

section.notice p.notice {
	max-width: 860px;
	margin: 0 auto;
}


/*==================・商品1・=====================*/

section.merchandise {
	padding-top: 50px;
}


section.merchandise p.merchandise img {	
	width: 100vw;
	max-width: 860px;
	height: auto;
}


/*==================・商品2・=====================*/

section.merchandise2 h1.ttl2 {
	padding-top: 60px;
	text-align: center;
	font-size: 28px;
}

section.merchandise2 h1.ttl2.pc.co_1 {
	display: block;
	padding-top: 60px;
	text-align: center;
	font-size: 28px;
}
section.merchandise2 h1.ttl2.sp.co_1 {
	display: none;
}





section.merchandise2 .container {
    grid-template-columns: repeat(5, 1fr); 
	max-width: 860px;
	margin: 0 auto;
	padding: 30px 0 50px 0;
  }

section.merchandise2 .container3 {
    grid-template-columns: repeat(3, 1fr); 
	max-width: 520px;
	margin: 0 auto;
	padding: 30px 0 50px 0;
	display: grid;
  }
  


section.merchandise2 .container .item img {
	width: 18vw;
	height: auto;
}

section.merchandise2 .container3 .item img {
	width: 168px;
	height: auto;
}

section.merchandise2 .container .item.last img {
	display: inline;
}

/*====================・お知らせ2・======================*/

section.notice2 p.notice2 {
	max-width: 860px;
	margin: 0 auto;
}


/*====================・お知らせ3・======================*/

section.notice3 p.notice3 {
	max-width: 860px;
	margin: 0 auto;
}



/*====================・フッタ・======================*/

footer {
	font-size: 16px;
}


}