@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
	color: #222;
}
#container{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
}
section{max-width:700px; margin: 0 auto;text-align: center;line-height:2;}
h1{
	font-size:2rem;
	line-height: 1.5;
	color:#aaa;
	padding-bottom:30px;
	font-weight: 700;
}
h2{
	font-size:1.7rem;
	line-height: 1.5;
	color:#aaa;
	padding-bottom:30px;
	font-weight: 700;
}
a{text-decoration: none;}
.icon-color{ color:#C06060; }
.en,.en2{font-family:'Jost', sans-serif; font-size:1.2rem;color:#aaa;}
.en2{font-size:1rem;}
.mainVisual{
	position: relative;
	margin: 0 auto;
	text-align: center;
	max-width: 700px;
}
.mainTtl-l{
	/**/
	position: absolute;
	left: -30px;
   /*transform: rotate(-25deg);*/
    color:#aaa;
	font-family: 'Luckiest Guy', cursive;
   }
.Ttl1{ top:-30px;}
.Ttl2{top:40px;}
.Ttl1,.Ttl2{
	border: solid 2px #aaa;
	margin-bottom: 5px;
	padding: .4rem .7rem;
	font-size: 2.2rem;
	background-color: #fff;
	text-align: left;
}
.mainImg{
	margin-top: 50px;
	position: relative;
}
.mainTtl-r{
	position: absolute;
	color:#aaa;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 1.7rem;
}
.Ttl3{top:-10px;
transform: rotate(20deg);
	right: -20px;
}
.Ttl4{
	right: -130px;
	transform: rotate(90deg);
	top:40%;
}
.text{
	padding: 30px 20px;
	text-align: left;
}
#lineup{
	display: flex;
	/**/
	flex-wrap: wrap;
}
.item1{
	flex-basis:33.3%;
	background-color:#aaa; 
	height: 200px;
	display: grid;
	place-items:center;
	font-size: 2rem;
	color:#fff;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
}
.item{flex-basis:50%;}
.item2,.item3,.item4,.item5,.item6{position: relative;}
.item2{
	height: 200px;
	flex-basis:66.7%;
	background-image: url("../img/m1.jpg");
	 background-size: cover;
}
.item3{
	height: 200px;
	flex-basis:50%;
	background-image: url("../img/m2.jpg");
	 background-size: cover;
}
.item4{
	height: 200px;
	flex-basis:50%;background-image:url("../img/m3.jpg");
 background-size: cover;}
.item5{
	height: 200px;flex-basis:50%;background-image:url("../img/m4.jpg");
 background-size: cover;}
.item6{
	height: 200px;
	flex-basis:50%;
	background-image: url("../img/m5.jpg");
	 background-size: cover;
}
.btn{background-color:#aaa; 
	display: grid;
	place-items:center;
	font-size: 1.2rem;
    color:#fff;
	width: 100px;
	border-radius: 30px;
	position: absolute;
	right: 5%;
	top:25%;
	font-weight: 500;
}
.btn a{color:#fff;text-decoration:none;}
.ttl{
	padding: 50px 0;
}
.line{
	padding-top: 1rem;
	margin: 0 auto;
	text-align: center;
	width: 150px;
	border-bottom: solid 1px #aaa;
}
.view,.goods{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	 justify-content: center;
}
.g1{
	text-align: left;
	flex-basis:45%;
	padding-left: 5%;
	padding-right: 0;
}
.gv{flex-basis:33.3%;}
.gv2{flex-basis: 50%;}
.gv3{flex-basis:25%;}
.gvtext{
	text-align: center;
	padding: 0 20px 50px 20px;
}
.gvtext p{
	text-align: left;
	display: inline-block;
	padding-bottom: 20px;
}
.btn2{
	background-color: #aaa;
	font-size: 1.2rem;
	border-radius: 30px;
	display: grid;
	align-items: center;
	width: 40%;
	text-align: center;
	margin: 0 auto;
	font-weight: 600;
}
.btn2 a{color:#fff;}
.space{padding-top:90px;}

.bt{
	margin:0 auto;
	text-align:center;
	width:300px;
	background-color:#306090;
	color:#FFFFFF;
	padding:20px;
	font-size:1.2rem;
	font-weight:700;
	border-radius:40px;
	margin-bottom:50px;
	}
.cp{/*color:#C12E30;*/font-size:.8rem; position: relative;
  background: linear-gradient(transparent 40%, yellow 40%); display: none;}
.priceDown{color:#EB2024;/*position: relative;
  background: linear-gradient(transparent 40%, yellow 40%);*/display: none;}
/*-----------------------site-header---------------------*/
.site-header{
    background: #333;
    display: none;
    padding: 10px;
    position: absolute;
    justify-content: space-between;
	z-index: 99999;
    
}
.gnav__menu{
	
	justify-content: space-between;
	align-items: center;
	
}
.gnav__menu__item{
	padding: 20px 10px;
	list-style: none; 
	
}
.gnav__menu__item a{color:#fff;}
.site-header.show{
	 display:flex;
    position: fixed;
    bottom: 0;
	z-index: 99999;
}
.space2{padding-top: 20px;}


/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter .fLinkList li a {
    padding: 29px;
    display: block;
    color: #666;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    background-color: #e2e2e2;
}
#gFooter .fLinkList li a:hover {
    opacity: 0.7;
}
#gFooter address {
    padding: 35px 5px 56px;
    color: #666;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-family: "Helvetica Neue" , Helvetica , Arial , sans-serif;
    background-color: #D9D9D9;
}

#gFooter{
	
	bottom:0;

	}

@media all and (max-width: 749px) {
	.mainVisual{
		width:80vw;
	}
	.Ttl1,.Ttl2{
	margin-bottom: 5px;
	padding: .3rem .4rem;
	font-size: 1.1rem;
	
}
	.Ttl1{ top:-30px;}
.Ttl2{top:15px;}
	.Ttl4{right:-100px;top:55%;}
	.mainTtl-r{font-size:1.1rem;}
	.text{font-size: 1.1rem;font-weight: 500;}
	section{width: 90vw;}
	.item2,.item3,.item4,.item5,.item6,.item1{height: 100px;font-size: 1.2rem;}
	.btn{font-size: 1rem;top:50%;}
	.goods{
		font-size: .8rem;
	}
	.btn2{font-size: 1rem;border-radius: 20px;width: 50%;}
	.gnav__menu{
		display: flex;
		width:98vw;
	}

	.gnav__menu__item{
		padding: 20px 15px;
		margin: 0;
	font-size: .8rem;
		
	}
	.site-header{padding: 1vw;}
	h1{font-size: 1.3rem;}
	.bt{padding:10px;}
	.g1{text-align: center;
	flex-basis:90%;
	padding:2% 5%;
	}

}

/*-----------------------shpe---------------------*/
.triangle {
  position: relative;
  background: #aaa;
  height: .7vh;
}

.triangle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #aaa transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}