/*↓CSSファイル用の文字コード*/
@charset "utf-8";


*{
	margin:0;
	padding:0;
}
/*背景色、文字色、文字*/
body{
	background-color:#194f73;
	color:white;
	line-height:1.5;
font-family: 'Georgia', sans-serif;
}

.wrapper{
	width:100%;
}

/*上部に固定*/
/*.menu{
	position:fixed;
	top:5%;
	left:5%; 
font-size: clamp(1rem, 2vw + 1rem, 3rem);
/*				 (最小サイズ, 推奨サイズ(vw), 最大サイズ)*/
/*}*/

.rogo img{
	position:fixed;
	top:3%;
	right:40%;
	width:15%;
}

/**/
/* ナビゲーション全体を上に固定 */
nav{
  position: fixed;
  top:5%;
  left:8%;
  z-index: 1000; /* コンテンツより前面に表示 */
}

.main-menu {
  list-style: none;
	font-size: clamp(1rem, 2vw + 1rem, 3rem);
}

.main-menu li {
  position: relative; /* 子要素の基準にする */

}

.main-menu a {
  display: block;
  padding-top: 5%;
  text-decoration: none;
  color: white;
}

/* --- ドロップダウンメニューの初期状態（隠す） --- */
.sub-menu {
  display: none; /* 非表示 */
  position: absolute;
  top: 100%; /* 親メニューの真下に配置 */
  list-style: none;
	min-width: 100px;
}

/* --- ホバー時に表示 --- */
.dropdown:hover .sub-menu {
  display: block; /* 表示 */
}

.sub-menu li a {
  padding: 10px 15px;
}



/*カーソル設定*/
a:link{
	color:white;
	text-decoration:none;
}

a:visited{
	color:white;
	text-decoration:none;
}

a:hover{
	color:white;
	opacity:0.5;
}

/*トップページ、背景画像*/

.top-page{
	width:100%;
	height:100%;
	margin:auto;
	margin-bottom:50px;
	color:#fff;
	background-color:#78a;
	background-image:url(img/long-ocean.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

h1{
	padding-top:25%;
	text-align:center;
	font-size: clamp(3rem, 6vw + 3rem, 9rem);
}

.box1{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	font-size: clamp(1rem, 1.5vw + 0.5rem, 2rem);
	padding-bottom:15%
}

/*アバウトページ*/


h2{
	padding-left:10%;
	margin-bottom:5%;
	font-size: clamp(2rem, 3vw + 2rem, 5rem);
}

.text{
	margin-left:5%;
	margin-bottom:1%;
}


.pct img{
	margin-top:5%;
	width:40%;
}


.pct1 img{
	float: right;
	margin-right:5%; 
}

.pct2 img{
	clear:both;
	margin-left:5%;
	margin-top:20%;
	margin-bottom:10%;
}


/*メニューページ*/


li{
	float:left;
	list-style:none;
	text-align:center;
	width:100%;
	padding-top:5%;
	padding-bottom:3%;
	font-size: clamp(0.8rem, 1.2vw + 0.4rem, 1.6rem);
}

.title{
	font-size: clamp(1.4rem, 2.1vw + 1.4rem, 3.5rem);
}

.under{
	padding-top:30%;
	padding-bottom:5%;

}

.lunch{
	background-image:url(img/1lunch.JPG);
	display:block;
	width:33.3333%;
	background-size:100%;
}

.dinner{
	background-image:url(img/2dinner.JPG);
	display:block;
	width:33.3333%;
	background-size:100%;
}

.drink{
	background-image:url(img/3drink.JPG);
	display:block;
	width:33.3333%;
	background-size:100%;
}

/*floatなし*/

.menu-text li{
	float:none;
}


/*アレルギーPDF*/
.clear{
	clear:both;
	text-align:right;
	padding:5%;
	font-size:10px;
}



/*カーソル設定*/

.under a:link{
	text-decoration:underline;
}




/*アクセスページ*/

.white{
	background-color:white;
	color:#194f73;
}

.white h2{
	padding-top:10%;
}

.map{
	float:left;
	width:40%;
	margin-bottom:5%;
	font-size: clamp(0.8rem, 1.2vw + 0.4rem, 1.6rem);
}

.map1{
	margin-left:8%;
	margin-right:8%;
	margin-top:5%;
}

.map img{
	width:100%;
}

.map p{
	margin-top:5%;
	color:black;
}

.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

/*フッター*/

footer{
	width:100%;
	height:100%;
	margin:auto;
	padding-bottom:5%;
	color:#fff;
	background-color:#78a;
	background-image:url(img/footer-ocean.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

.footer1{
	text-align:center;
	font-size: clamp(3rem, 6vw + 3rem, 9rem);
	padding-top:10%;
}

.footer2{
	float:left;
	width:40%;
	font-size: clamp(0.6rem, 0.9vw + 0.3rem, 1.2rem);
	text-align:center;
	margin:10% 5% 5%;
}

.fot2-1{
	font-size:clamp(2rem, 3vw + 1rem, 4rem);
}

.footer3{
	float:left;
	width:40%;
	font-size: clamp(0.6rem, 0.9vw + 0.3rem, 1.2rem);
	text-align:center;
	margin:10% 5% 5%;
	line-height:2;
}





/*レスポンシブ対応　ブレイクポイント*/

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

/*メニューのフロート解除*/
li{
	float:none;
}

.lunch,.dinner,.drink{
	width:90%;
	margin:auto;
	margin-bottom:10%;
}

/*アクセスのフロート解除*/

.map{
	float:none;
	width:90%;
	margin:auto;
}

.map1{
	font-size:20px;

}
/*画像を長いものに変更*/
footer{
	background-image:url(img/footer-ocean2.jpg);
}

.fot2-1{
	font-size:20px;
}

footer{
	padding-bottom:15%;
}



}