@charset "UTF-8";

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}

body{
min-width: 900px;
background-image: url("../images/bg.jpg");
background-color:#003;
color: #fff;
line-height: 2;
font-family: sans-serif;
}

@media (max-width:767px){
body{
min-width: 100%;
}
}

.container{
width:800px;
margin: 0 auto;
}

@media (max-width:767px){
.container{
width: 90%;
}
}

header{
padding-top:40px; 
/*background-color: #f9c;*/
}

h1{
width:320px;
margin: 0 auto;
}

nav ul{
display: flex;
list-style: none;
justify-content: center;
}

@media (max-width:767px){
nav ul{
flex-wrap: wrap;
}
nav li{
width:33.33%;
text-align:center;
}
}

nav a{
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
}

nav a:hover{
background-color: rgba(180,180,255,0.25);
}

.main-visual{
background-image: url("../images/main-visual.jpg");
background-color: #003;
height: 70vh;
min-height: 540px;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-shadow: 0 0 10px #0cf;
}

@media (max-width:767px){
.main-visual{
background-image: url("../images/main-visual_sp.jpg");
}
}

.main-visual h2{
font-size: 72px;
}
@media (max-width:767px){
.main-visual h2{
font-size:32px;
}
}

.main-visual p{
font-size: 24px;
}
@media (max-width:767px){
.main-visual p{
font-size:16px;
}
}

main{
/*background-color: #9fc;*/
}

section{
padding: 80px 0;
}

section h2{
font-size: 48px;
text-align: center;
margin-bottom: 60px;
font-family: serif;
}
@media (max-width:767px){
section h2{
font-size: 24px;
}
}

section h2 span{
font-size: 14px;
font-weight: normal;
display: block;
}
section h3{
font-size:21px;
margin-top: 10px;
margin-bottom: 10px;
}
@media (max-width:767px){
section h3{
font-size: 18px;
}
}

section p{
margin-bottom: 20px;
}
@media (max-width:767px){
section p{
font-size: 14px;
}
}
.concept{
/*background-color: #f6c;*/
}

.conceptCard{
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width:767px){
.conceptCard{
/*display: block;*/
flex-direction: column;
}
}
.conceptCard__image{
width: 400px;
}
@media (max-width:767px){
.conceptCard__image{
width: auto;
}
}
.conceptCard__text{
width:360px;
}
@media (max-width:767px){
.conceptCard__text{
width: auto;
}
}

.menu{
background-color: #003;
background-image: url("../images/menu_bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.menu-grid{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}

.menu-grid li{
width:240px;
margin-bottom: 20px;
}
@media (max-width:767px){
.menu-grid li{
width:46%;
}
}

.floor-map{
text-align: center;
/*background-color: #fc6;*/
}
@media (max-width:767px){
.floor-map{
text-align: left;
}
}

.profile{
background-color: #003;
background-image: url("../images/profile_bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.profileCard{
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width:767px){
.profileCard{
display: block;
}
}

.profileCard__image{
width: 280px;
border-radius: 50%;
overflow: hidden;
}
@media (max-width:767px){
.profileCard__image{
width:40%;
margin: 0 auto;
}
}
.profileCard__text{
width: 480px;
}
@media (max-width:767px){
.profileCard__text{
width:auto;
}
}
.shop{
/*background-color: #6cf;*/
}

table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid #ddd;
padding: 10px 20px;
}
th{
background-color: rgba(180,180,255,0.25);
}
@media (max-width:767px){
table,tbody,tr,th,td{
display: block;
border:none;
}
}


footer{
/*background-color: #9cf;*/
border-top:1px solid #fff;
text-align: center;
padding: 20px;
}

.footer__logo{
width: 320px;
margin: 20px auto;
}