@charset "UTF-8";

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

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

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

@media (min-width:768px){
body{
min-width: 900px;
}
}

.container{
width: 90%;
margin: 0 auto;
}

@media (min-width:768px){
.container{
width: 800px;
}
}

header{
/*background-color: #82494A;*/
padding-top: 40px;
}
h1{
width: 300px;
margin: 0 auto;
}
@media (min-width:768px){
h1{
width: 360px;
}
}

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

@media (min-width:768px){
nav ul{
flex-wrap: nowrap;
}
}
nav li{
width: 33.33%;
}
nav a{
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
text-align: center;
}

@media (min-width:768px){
nav li{
width: auto;
}
}

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

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

.main-visual h2{
font-size: 32px;
}

@media (min-width:768px){
.main-visual h2{
font-size: 72px
}
.main-visual p{
font-size: 24px;
}
}

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

main{
/*background-color: #C7EDA0;*/
}
section{
padding: 80px 0;
}
section h2{
text-align: center;
font-family: serif;
margin-bottom: 60px;
}

@media (min-width:768px){
section h2{
font-size: 48px;
}
}

section h2 span{
display: block;
font-size: 14px;
font-weight: normal;
}

section h3{
font-size: 20px;
margin: 10px 0;
}
@media (min-width:768px){
section h3{
font-size: 21px;
}
}

@media (min-width:768px){
.concept-card{
display: flex;
justify-content: space-between;
align-items: center;
}
.concept-card__image{
width: 400px;
}
.concept-card__text{
width: 360px;
}
}
.concept{
/*background-color: #CC8BF2;*/
}

.menu{
background-color: #1C143C;
background-image: url("../images/menu_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.menu ul{
display: flex;
list-style-type: none;
flex-wrap: wrap;
justify-content: space-between;
}

.menu li{
/*background-color: #E9F574;*/
width: 46%;
margin-bottom: 20px;
}
@media (min-width:768px){
.menu li{
width: 30%;
}
}
.floor-map{
/*background-color: #A5F1B5;*/
}
@media (min-width:768px){
.floor-map p{
text-align: center;
}
}
.profile{
background-color: #003;
background-image: url("../images/profile_bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

@media (min-width:768px){
.profile-card{
display: flex;
justify-content: space-between;
align-items: center;
}
}
.profile-card__image{
width: 40%;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
@media (min-width:768px){
.profile-card__image{
width: 280px;
margin: 0;
}
.profile-card__text{
width: 480px;
}
}
.shop{
/*background-color: #D89495;*/
}
/*
table,tbody,tr,th,td{
display: block;
}

@media (min-width:768px){
table{display: table;}
tbody{display: table-row-group;}
tr{display: table-row;}
th,td{display: table-cell}
}*/

@media (max-width:767px){
table,tbody,tr,th,td{
display: block;
}
}

table{
border-collapse: collapse;
width: 100%;}
th{
background-color: rgba(180,180,255,0.25);
}
th,td{
padding: 10px 20px
}

@media (min-width:768px){
th,td{
border: 1px solid #fff;
}
}

footer{
/*background-color: #A4DCA1;*/
border-top: 1px solid #fff;
text-align: center;
padding: 20px;
}
.footer__logo{
width: 300px;
margin: 20px auto;
}