#en {
    font-family: 'Amatic SC', cursive;
    font-size: 1.7rem;
}
#ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
}
body {
    line-height: 2;
    background-color: #83A5BA;
}
a {
    text-decoration: none;
    color: black;
}
img{
    width: 100%;
    height: auto;
}


/* dropdown*/
nav ul li a {
    padding: 30px;
    text-align: center;
    transition:all .3s;
}
nav ul li a:hover {
    color: #ffffff;
}
.nav-menu-inner {
    display: block;
    white-space: nowrap;
}
nav ul li {
    position: relative;
}
nav li.has-child .nav-menu-inner {
        /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
} 
.header-container {
    display: flex;
}
#dropdown.active {
    display: block;
}
.header-left {
    width: 30%;
    text-align: center;
    padding-top: 5%;
}
.header-left h1 {
    text-align: center;
}
.header-left h1 a img {
    max-width: 250px;
}
header nav ul {
    display: flex;
    justify-content: center;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
.contact {
    text-align: center;
}
.contact img{
    width: 50px;
}
.flag {
    margin-top: 50px;
}
.flag img{
    width: 70px;
}
.header-right {
    width: 70%;
}
.header-right img {
    width: 100%;
}
/* main */
main {
    text-align: center;
}
svg {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
.wrapper {
    margin: 0;
}
/* ID */
#welcome {
    background-color: #ffffff;
}
#booking {
    background-color: #ffffff;
    position: relative;
}
#about {
    color: #ffffff;
    position: relative;
}
#menu {
    background-color: #ffffff;
    position: relative;
}
#hours {
    color: #ffffff;
}
#instagram {
    color: #ffffff;
}
#location {
    background-color: #ffffff;
}
.menu-link-container {
    background-color: #ffffff;
}
section {
    padding: 100px 0;
}
h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}
/* welcome */
#welcome ul {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
#welcome ul li {
    padding: 0 1.5rem;
}
/* booking */
#booking {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#booking .booking-left {
    width: 50%;
}

/* menu */
#menu .menu-container {
    display: flex;
    justify-content: center;
}
.menu-inner {
    padding: 5%
}
.menu-inner a {
    padding: 10px 20px;
    border: 1px solid black;
}
.menu-inner a:hover {
    background-color: #83A5BA;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* instagram */
.instagram-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 100px;
}
.instagram-inner {
    width: 25%;
    margin: 0 10px;
}
#instagram .contact p a {
    color: #ffffff
}
/* footer */
footer {
    text-align: center;
    padding: 50px 0;
}
footer img {
    max-width: 100px;
}

/* pic */
.pic-right {
    width: 25%;
    position: absolute;
    top: -50%;
    right: 5%;
}
.pic-left {
    width: 25%;
    position: absolute;
    top: -40%;
    left: 5%;
}

@media screen and (max-width: 1000px) {
#en {
    font-size: 1.3rem;
}
#ja {
    font-size: 1rem;
}
iframe {
    width: 100%;
}

.header-container {
    display: block;
}
.header-left {
    width: 100%;
    padding: 0;
}
.header-left h1 img {
    width: 100px;
}

.header-left .contact {
    display: none;
}
.header-left .flag{
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 10px;
}
.header-left .flag a img {
    padding: 0 5px;
    width: 30px;
    display: block;
    margin: 0 5px;
}
.header-right {
    width: 100%;
}
/* pic */
.pic-right {
    width: 25%;
    position: absolute;
    top: -30%;
    right: 5%;
}
.pic-left {
    width: 25%;
    position: absolute;
    top: -20%;
    left: 5%;
}
header nav ul {
    width: 100%;
}
header nav ul li a {
    padding: 10px;
}
}

@media screen and (max-width: 600px) {
#ja {
    font-size: 0.7rem;
}
.header-left {
        justify-content: left;
    }
/* pic */
.pic-right {
    width: 25%;
    position: absolute;
    top: -20%;
    right: 5%;
}
.pic-left {
    width: 25%;
    position: absolute;
    top: -15%;
    left: 5%;
}
/* booking */
#booking {
    display: block;
}
#booking .booking-left {
    width: 100%;
}
#booking .booking-right {
    display: none;
}
}