@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');


/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");




/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
		}

	}/*追加指定ここまで*/


body {
	margin: 0 auto;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;	/*フォント種類*/
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background-image:url("../img/bg.jpg");
	color: #000000;		/*文字色*/
	line-height: 1.8;		/*行間*/
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	overflow: hidden;
}

#container img {
	vertical-align: top;
}

main{
	width:80%;
	margin: 0 auto;
	overflow: hidden;
}

header{
	margin-top: 1%;
	text-align: center;
}

header img{
width: 100%;
}

.mainbox{
margin: 0 auto;
margin-left: 4%;
margin-top: 2%;
width:96%;
overflow: hidden;
}

.c-mainbox{
margin: 0 auto;
margin-top: 2%;
width:100%;
overflow: hidden;
}


.leftbox{
width:70%;
float:left;
}

.menu-leftbox{
overflow: hidden;
}

.menu-leftbox img{
width: 100%;
}

.menu01{
margin-right:1%;
width:49%;
float:left;
}

.menu02{
	margin-left:1%;
	width:49%;
float:left;
}
.menu02 img{
	width:100%;
}

.snack-imgbox{
clear:both;
width:100%;
margin: 4% 0 4% 0;
text-align: center;
overflow: hidden;
}

.snack-imgbox img{
width:90%;
}

.snack-titlebox {
clear:both;
width:95%;
margin: 0 auto;
}

.snack-titlebox img{
width:100%;
}

.snack-drinkebox {
clear:both;
width:100%;
margin: 0 auto;
}

.map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.newsbox-text2{
width:96%;
margin: 2%;
overflow: hidden;
}

.youtube {
	margin: 2% 2% 2% 2%;
  width: 96%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.newsbox{
clear:both;
	width:100%;
margin: 4% 0 4% 0;
border: solid 1px #000000;
background-color: #ffffff;
overflow: hidden;
}

.newsbox-img{
float: right;
width:46%;
margin: 2%;
}

.newsbox-img img{
width: 100%;
}


.newsbox-text{
float: right;
width:48%;
margin: 1%;
overflow: hidden;
}

.newstitle{
	margin-top: 5px;
text-align: center;
}

.newstitle img{
width: 30%;
}

.line {
	clear:both;
	margin: 1px 5px 5px 5px;
  border-top: 1px dotted #999999;
}

.ns-line {
	clear:both;
		padding-bottom: 15px;
  border-top: 1px dotted #999999;
}

.profilebox{
clear:both;
margin: 0 auto;
width:94%;
margin: 8% 3% 5% 3%;
overflow: hidden;
}

.c-title{
	margin-top: 5px;
text-align: center;
}

.c-title img{
width: 70%;
}

.coment{
	margin-top: 5px;
text-align: center;
}

.coment img{
width: 55%;
}

.profilebox-text{
width:100%;
margin: 5% 0 5% 0;
overflow: hidden;
font-size: 110%;
}

.ns-mainbox{
clear:both;
margin: 0 auto;
width:94%;
margin: 8% 3% 15% 3%;
overflow: hidden;
}

.ns-stitle{
	padding-top: 5%;
	padding-bottom: 2%;
font-weight: bold;
}

.ns-textbox{
	padding-left: 5px;
	padding-bottom: 10px;
}

.ns-imgbox{
	width: 50%;
	margin: 0 auto;
	text-align: center;
padding-bottom: 5%;
}

.ns-imgbox img{
	width: 90%;}

.banner {
	padding-top: 5%;
	padding-bottom: 5%;
width: 100%;
	text-align: center;
}

.banner img{
width: 80%;
}

.for-pc { display:block; }
.for-sp { display:none; }

.rightbox{
width:30%;
float:left;
}

.borderbox01{
width:95%;
margin: 1% 0% 5% 5%;
padding-top: 5%;
padding-bottom: 5%;
border: solid 1px #000000;
text-align: center;
background-color: #ffffff;}

.borderbox01 img{
width: 80%;
}

.borderbox02{
width:95%;
margin: 1% 0% 5% 5%;
padding-top: 5%;
padding-bottom: 5%;
border: solid 1px #000000;
text-align: center;
background-color: #ffffff;}

.borderbox02 img{
width: 50%;
}
/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
clear:both;
margin-top: 10px;
padding-bottom: 20px;
font-size: 0.7rem;
text-align: center;
}

@media screen and (max-width: 768px){

	main{
		width:90%;
		margin: 0 auto;
		overflow: hidden;
	}

}

@media screen and (max-width: 500px){


.leftbox{
width:100%;
clear:both;
}

.for-pc { display:none; }
.for-sp { display:block; }

.rightbox{
margin-left: 4%;
margin-top: 15px;
width:100%;
clear:both;
}

.borderbox01{
margin: 0 1% 0 0;
padding-top: 5%;
width:31%;
float: left;
border: solid 1px #000000;
background-color: #ffffff;}

.borderbox01 img{
width: 90%;
}

.borderbox02{
margin: 0 1% 0 0;
	padding-top: 5%;
	width:32%;
	float: left;
	border: solid 1px #000000;
	background-color: #ffffff;}

.borderbox02 img{
width: 90%;
}

}