@charset "utf-8";
/* === reset === */
* {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
ol, ul {
  list-style: none;
}
a {
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: 0.5s;
}
html {
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea {
  font-family : inherit;
}

/* === scroll bar === */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) inset;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) inset;
}
:root {
  --font-color: #f53535;
  --main-color: #f53535;
  --sub-color: #1d2b64;
  --base-color: #f5e7e7;
}

/* === common === */
body {
  color: #222;
  /* font-family: "Noto Sans JP",sans-serif; */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
}
body::after {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../img/miyakoyatai-min.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* === header === */
.header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.header h1 {
  width: 30vw;
  margin-top: 6.5vw;
}
.header h1 img {
  width: 100%;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #f0f) drop-shadow(0 0 14px #f0f);
}
.header p a {
  display: block;
  font-size: 2vw;
  margin-top: 1.5vw;
  letter-spacing: 0.05em;
  color: #fff;
  font-family: "RocknRoll One", sans-serif;
  text-shadow: 0 0 3px #fff, 0 0 10px #f0f,0 0 20px #f0f,0 0 20px #f0f;
}

/* === header-sns === */
.header-sns {
  width: 22vw;
  margin-top: 2em;
}
.header-sns ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-sns .insta-icon img {
  width: 3vw;
}
.header-sns .tabelog-icon img {
  width: 15vw;
}


/* === nav === */
.nav {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 1em 0;
  background-color: #f53535;
}
.nav-inner {
  background-color: var(--sub-color);
  border-top: 9px solid #fff;
  border-bottom: 9px solid #fff;
}
.nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}
.nav ul li a {
  display: block;
  padding: 0.5em;
  font-weight: 500;
  font-size: 1.3em;
  font-family: "Stick", sans-serif;
  color: yellow;
}
.nav a:hover {
  color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 10px #fff;
}
.nav ul li a i {
  padding-right: 0.5em;
}

/* === section common === */
.section {
  padding: 160px 0;
  background-color: rgba(255, 255, 0, 0.629);
  background-color: #fff;
}
.inner {
  width: 80%;
  margin: 0 auto;
}
.section h2 {
  text-align: center;
  font-family: "Stick", sans-serif;
  letter-spacing: 0.03em;
  font-size: 2.5em;
  font-weight: normal;
  border: 3px solid var(--main-color);
  outline: 4px solid var(--main-color);
  outline-offset: 3px;
  margin: 0 auto 1.5em;
  width: 16em;
  color: var(--font-color);
}


/* === about === */
.section-about {
  background-color: var(--base-color);
}
.section-about p {
  font-size: 2em;
  text-align: center;
  line-height: 2;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: var(--sub-color);
}

/* === menu === */
.menu-box{
  margin: 60px auto 0;
}
.menu-box figure{
  margin-bottom: 2em;
}
.drink-box figure{
  width: 50%;
}
.menu-box figure img{
  width: 100%;
}
.drink-box{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* === info === */
.section-info {
  background-color: transparent;
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4));
  color: #fff;
}
.section-info h2 {
  border: none;
  outline: none;
  color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 10px #f0f,0 0 20px #f0f,0 0 20px #f0f;
  letter-spacing: 0.3em;
}
.section-info .flex-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* === map === */
.section-info .map {
  width: 40%;
}
.section-info .map p {
  text-align: center;
}
.section-info .map p a {
  color: #fff;
  font-weight: 700;
  border: #fff 2px solid;
  display: inline-block;
  padding: 0.25em 1.4em;
  border-radius: 2em;
}
.section-info .map p a:hover {
  text-shadow: 0 0 2px #fff, 0 0 5px #f0f,0 0 10px #f0f,0 0 10px #f0f;
}
.section-info .map-inner {
  width: 100%;
  padding-top: 70%;
  position: relative;
  margin-bottom: 1em;
}
.section-info .map-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* === address === */
.section-info .info {
  width: 25%;
  line-height: 1.5;
}
.section-info .info div {
  margin-bottom: 1em;
}
.section-info dt {
  font-weight: 600;
  text-shadow: 0 0 2px #fff, 0 0 5px #f0f,0 0 10px #f0f,0 0 10px #f0f;
  margin-bottom: 0.2em;
}
.section-info dd {
  padding-left: 1.2em;
}
.section-info dl .tel {
  color: #fff;
  font-size: 1.8em;
  font-weight: 700;
}
.section-info dl .tel i {
  font-size: 0.8em;
  padding-right: 0.3em;
}
.section-info h2::before,
.section-info h2::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #f0f) drop-shadow(0 0 14px #f0f);
}
.section-info h2::before {
  background-image: url(../img/yashi-white.svg);
  transform: translateY(10px) translateX(-20px);
}
.section-info h2::after {
  background-image: url(../img/iruka-white.svg);
  transform: translateY(13px) translateX(7px);
}

/* === insta === */
.section-info .insta {
  width: 30%;
}

/* === sns === */
.sns {
  background-color: #fff;
}
.sns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin: 0 auto;
  padding: 2em;
}
.sns ul li a {
  color: #222;
  font-size: 3em;
}
.sns ul li a:hover {
  color: #000;
  opacity: 0.5;
}
.sns ul li:last-child {
  text-align: center;
  width: 100%;
}
.sns ul li:last-child img {
  width: 25%;
}

/* === footer === */
.footer {
  background-color:  var(--main-color);
  text-align: center;
  padding: 2em 0;
  color: yellow;
  font-size: 1.5em;
}
.footer p a {
  color: yellow;
}
.footer p a:hover {
  text-shadow: 0 0 2px #fff, 0 0 5px #fff,0 0 10px #fff,0 0 10px #fff;
}
.footer p:last-child a {
  font-size: 0.8em;
}
.footer .topBack a {
  font-size: 2em;
}