@charset "UTF-8";
@font-face {
font-family: 'use-NasuJP';
  src: url('font/Nasu.otf') format('opentype');
}

a {
text-decoration: none;
}
body {
	margin: 0;
	font-family: 'use-NasuJP';
/*	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
*/
}
.msg{
	font-family: "use-NasuJP";
	font-size: 14px;
}

/* 基本 */
.warrap *{
	margin: 0;
}
.warrap{
	width:100%;
	vertical-align:bottom;
}
/* グリッド */
.warrap {
	display: grid;
	grid-template-columns:  1fr 400px 400px 1fr;
	grid-template-rows:  10px 60px 45px 380px 70px 500px 500px 500px 600px 100px 30px 20px 10px;
	/*隙間(10px)　写真とロゴの差(60px)　ロゴ(45px) 写真(380px) メニュー (70px) (500px) (500px) (500px) (500px) (500px) 隙間(30px) コピーライト(20px) 隙間(10px)  */
	/* 800 -> 400*/
	/* 1200 -> 600 */
	padding:0;
	grid-row-gap: 0; /*行と行の間の余白 */
	font-family: "use-NasuJP";
	font-size: 16px;
}

.logo{
	grid-column: 2/4;
	grid-row: 3/4;
	text-align:right;
	padding:0px 100px;
	vertical-align:bottom;
	z-index:500;
}
.topPage{
	grid-column: 2/4;
	grid-row: 2/5;
	z-index:200;
}

.msg{
	grid-column: 3/4;
	grid-row: 4/5;
	z-index:400;
	padding-top:80px;
	text-align:center;
}


.menus{
	grid-column: 2/4;
	grid-row: 5/6;
	text-align:left;
}
.about{
	grid-column: 2/4;
	grid-row: 6/7;
	text-align:left;
	width: auto;
	height: 100%;
}
.topics{
	grid-column: 2/4;
	grid-row: 7/8;
	text-align:left;
	width: auto;
	height: 100%;
}
.contacts{
	grid-column: 2/4;
	grid-row: 8/9;
	text-align:left;
	width: auto;
	height: 100%;
}
.shops{
	grid-column: 2/4;
	grid-row: 9/10;
	text-align:left;
	width: auto;
	height: 100%;
}

.bottoms{
	grid-column: 1/-1;
	grid-row: -3/-2;
	text-align:center;
}





.logo img{
	width: auto;
	height: 100%;
	z-index:500;
}

.topPage img{
	width: 100%;
	height: auto;
	z-index:200;
}
.menus img{
	width: auto;
	height: 100%;
	z-index:500;
	margin: 0px 40px;
}


.rtop {
	width:		50px;
	height:		50px;
	position:	fixed;
	right:		100px;
	bottom:		60px;
	border:		1px solid rgba(0,0,0,0.4);
	box-shadow:	1px 1px 1px #ccc;
	border-radius:	50%;
	background-color:rgba(0,0,0,0.4);
	display:	block; /* 使用数ときは none にする */
}
.rtop:after, .sample4-2:hover:after {
	content:	"";
	width:		16px;
	height:		16px;
	top:		19px;
	left:		13px;
	transform:	rotate(-45deg);
	position:	absolute;
}
.rtop:after {
	border-top:	8px solid #fff;
	border-right:	8px solid #fff;
}
.rtop:hover:after {
	border-top:	8px solid #f00;
	border-right:	8px solid #f00;
}

.btnstky {
	display: inline-block;
	padding: 0.1em 0.3em;
	text-decoration: none;
	background: #f7f7f7;
	border-left: solid 6px #ff7c5c;/*左線*/
	color: #ff7c5c;/*文字色*/
	font-weight: bold;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btnstky:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
.day{
}