@charset "UTF-8";
html {
  font-size: 62.5%; }

body {
  color: #111;
  font-size: 1.4rem;
  font-family: "Poppins", "Noto Sans JP", Verdana, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.05em;
  font-weight: 400;
  position: relative; }

img {
  max-width: 100%;
  height: auto;
  transition: all 0.5s linear; }

@media screen and (max-width: 640px) {
  .wrap {
    width: 100%; }

  .pco {
    display: none; }

  a:hover {
    color: inherit; }

  #home .wrap {
    width: 100%; } }
@media screen and (min-width: 641px) {
  .wrap {
    width: 93%;
    margin: 0 auto;
    max-width: 1100px; }

  .spo {
    display: none; }

  .flex {
    display: flex; }

  .box50 {
    width: 50%; } }
.copy {
  font-size: .9rem;
  padding: 4rem 6.25%; }
  @media screen and (min-width: 641px) {
    .copy {
      padding: 8rem 0 4rem; } }

@media screen and (max-width: 980px) {
  header {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 800; }
    header nav {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      padding: 0 6.25% 4rem;
      box-sizing: border-box;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      z-index: 1000;
      display: none; }
      header nav h1 {
        padding: 3rem 0 0 0;
        margin: 0; }
        header nav h1 img {
          display: block;
          height: 2rem; }
      header nav ul {
        display: block;
        padding: 8rem 0 0 0;
        margin: 0; }
      header nav li {
        display: inline; }
        header nav li a {
          display: block;
          font-size: 1.6rem;
          padding: 1.6rem 0;
          color: #111;
          text-decoration: none; }
          header nav li a img {
            width: 20px;
            height: auto;
            padding: 10px 0; }
        header nav li a:hover {
          color: #fff; }
    header .spheader {
      position: absolute;
      top: 0;
      width: 100%;
      height: 4rem;
      z-index: 1000;
      padding: 0 3.5%;
      box-sizing: border-box; } }
    @media screen and (max-width: 980px) and (max-width: 640px) {
      header .spheader {
        padding: 0 6.25%; } }
@media screen and (max-width: 980px) {
      header .spheader p {
        position: absolute;
        top: 3rem;
        height: 3rem;
        z-index: 800;
        margin: 0; }
        header .spheader p img {
          display: block;
          height: 2rem; }
      header .spheader .spmenu {
        position: absolute;
        top: 3.2rem;
        right: 1.6rem;
        width: 4rem;
        height: 4rem;
        z-index: 1000;
        cursor: pointer; }
        header .spheader .spmenu span {
          display: block;
          width: 3.2rem;
          height: .2rem;
          position: absolute;
          background: #111;
          transition: all 0.5s ease-in; }
        header .spheader .spmenu span:nth-child(2) {
          top: .8rem;
          width: 2.4rem;
          transition: all 0.1s ease-in; }
        header .spheader .spmenu span:nth-child(3) {
          top: 1.6rem; }
      header .spheader .spmenu.close span {
        transform: rotate(225deg);
        top: .4rem; }
      header .spheader .spmenu.close span:nth-child(2) {
        opacity: 0; }
      header .spheader .spmenu.close span:nth-child(3) {
        transform: rotate(-225deg);
        top: .4rem; } }
@media screen and (min-width: 981px) {
  header {
    margin: 40px auto;
    height: 40px; }
    header nav {
      position: relative; }
      header nav h1 {
        display: inline-block;
        margin: 0;
        line-height: 40px;
        font-size: 1.4rem; }
        header nav h1 img {
          width: auto;
          height: 20px;
          padding: 0 30px 0 0;
          vertical-align: -1px; }
      header nav ul {
        margin: 0;
        padding: 0;
        display: inline; }
      header nav li {
        display: inline; }
        header nav li a {
          display: inline-block;
          font-size: 1.4rem;
          line-height: 40px;
          margin: 0 13px;
          color: #111;
          text-decoration: none;
          transition: all 0.3s linear;
          border-bottom: #fff 1px solid; }
        header nav li a:hover {
          border-bottom: #111 1px solid;
          color: #111; }
      header nav li:last-child a {
        position: absolute;
        right: 0; }
        header nav li:last-child a img {
          width: 20px;
          height: 20px;
          vertical-align: -3px; }

  #home header {
    display: none; }

  .spheader {
    display: none; } }
#home main {
  height: 100vh;
  padding: 12rem 0 0;
  box-sizing: border-box; }
  @media screen and (min-width: 641px) {
    #home main {
      padding: 0; } }
#home .flex {
  max-width: 800px;
  margin: 0 auto; }
#home .box50 {
  position: relative; }
@media screen and (max-width: 980px) {
  #home .box50 {
    width: 100%; } }
#home #homenav {
  width: 300px;
  padding: 0 0 0 12%; }
  #home #homenav h1 {
    font-size: 1rem;
    margin: 3rem 0 0 0;
    padding: 0; }
    #home #homenav h1 img {
      width: 136px;
      height: auto; }
  #home #homenav ul {
    display: block;
    padding: 30px 0 0 0;
    margin: 0; }
  #home #homenav li {
    display: block;
    padding: 0;
    margin: 0; }
    #home #homenav li a {
      display: inline-block;
      font-size: 1.6rem;
      line-height: 40px;
      color: #111;
      text-decoration: none; }
      #home #homenav li a img {
        padding: 20px 0 0 0;
        width: 20px;
        height: 20px; }
  #home #homenav a {
    transition: all 0.2s linear; }
  #home #homenav a:hover {
    padding-left: 3px; }
#home .slidebox {
  position: relative;
  width: 100%;
  height: calc(100vh - 12rem);
  overflow: hidden; }
  @media screen and (min-width: 641px) {
    #home .slidebox {
      margin: 6rem 0;
      width: 100%;
      box-sizing: border-box; } }
  #home .slidebox span {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    position: absolute;
    top: 0;
    right: 0;
    display: none; }
    @media screen and (max-width: 980px) {
      #home .slidebox span {
        background-position: center; } }
#home .charactor {
  position: absolute;
  bottom: 5vh;
  right: 12%;
  width: 65px;
  height: auto;
  z-index: 500; }
#home .copy {
  position: absolute;
  bottom: 0;
  z-index: 100; }
@media screen and (min-width: 641px) {
  #home .charactor {
    animation: charactormove 1.5s linear 0s infinite normal none running; }
  #home .charactor.act {
    animation: charactormove2 1.5s linear 0s infinite normal none running; } }
@media screen and (max-width: 640px) {
  #home #homenav {
    display: none; } }

#load {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 1000;
  font-size: 4rem; }
  #load img,
  #load span {
    display: block;
    position: absolute;
    width: 30px;
    height: auto;
    top: calc(50%);
    left: calc(50% - 15px);
    animation: charactormove .5s linear 0s infinite normal none running; }

@keyframes charactormove {
  100% {
    transform: rotate(360deg); } }
.page {
  min-height: 65vh;
  margin: 0 auto;
  padding: 12rem 0 0; }
  .page h1,
  .page p.ptitle {
    margin: 0 0 4rem 0;
    font-size: 2.4rem;
    letter-spacing: 0.05em; }
    .page h1 span,
    .page p.ptitle span {
      display: block;
      font-size: 1.2rem; }
  .page h1 + h2 {
    font-size: 1.5rem;
    letter-spacing: 0.05em; }
  .page p, .page span {
    font-size: 1.4rem;
    line-height: 2.85; }
  @media screen and (max-width: 640px) {
    .page {
      width: 87.5%;
      min-width: 87.5%; }
      .page h1 {
        margin: 0 0 2.4rem 0; }
      .page h1 + h2 {
        text-align: center; }
      .page p, .page span {
        line-height: 2.1; } }

.pagebtn {
  margin: 80px 0; }
  .pagebtn a {
    color: #111;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em;
    margin: 0 1em;
    border-bottom: #fff 1px solid;
    transition: all 0.2s linear; }
  .pagebtn a:hover {
    border-bottom: #111 1px solid; }

.paging {
  padding: 40px 0;
  text-align: center; }
  .paging span, .paging a {
    display: inline-block;
    padding: 0 0.3em;
    margin: 0 0.7em;
    text-decoration: none;
    color: #111;
    line-height: 2;
    border-bottom: #fff 1px solid; }
  .paging span {
    border-bottom: #111 1px solid; }
  @media screen and (min-width: 641px) {
    .paging a {
      transition: all 0.2s linear; }
    .paging a:hover {
      border-bottom: #111 1px solid; } }

#stores .page ul {
  display: block; }
#stores .page li {
  display: flex;
  margin: 0;
  padding: 1em 0;
  border-bottom: #eee 1px solid; }
  #stores .page li h2 {
    width: 30%;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    line-height: 2.85;
    margin: 0; }
  #stores .page li h2 + p {
    width: 48%;
    padding: 0 1%;
    margin: 0; }
  #stores .page li p + p {
    width: 20%;
    text-align: right;
    margin: 0; }
  #stores .page li a {
    color: #111;
    text-decoration: none; }
@media screen and (max-width: 640px) {
  #stores .page li {
    flex-direction: column; }
    #stores .page li h2, #stores .page li h2 + p, #stores .page li p + p {
      width: 100%;
      padding: 0;
      text-align: left;
      line-height: 2; }
    #stores .page li h2 {
      font-size: 1.6rem;
      padding-bottom: 5px; }
    #stores .page li a {
      display: inline-block;
      padding: 0.3em 1em;
      margin: 0.5em 0 0 0;
      border: #eee 1px solid; }
    #stores .page li a::before {
      content: "TEL: ";
      font-size: 0.9em; } }

#contact .page form {
  width: 478px;
  margin: 0 auto; }
#contact label {
  font-weight: 400;
  position: relative; }
#contact label span:first-of-type {
  position: absolute;
  top: 20px;
  z-index: 100; }
#contact label.mes span:first-of-type {
  left: 1em;
  top: 30px; }
#contact .page input,
#contact .page textarea {
  width: 100%;
  padding: 0 0 0 100px;
  margin: 20px 0;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  border-radius: 0;
  border: none;
  border-bottom: #111 1px solid;
  line-height: 2.1; }
#contact .page textarea {
  height: 300px;
  padding: 3em 1em 1em 1em;
  line-height: 2;
  border: #111 1px solid; }
#contact input[type="submit"] {
  display: block;
  width: 120px;
  margin: 20px auto;
  height: 50px;
  padding: 0;
  border: #111 1px solid;
  font-size: 1.6rem;
  color: #111;
  font-weight: 400; }
@media screen and (min-width: 641px) {
  #contact input[type="submit"] {
    transition: all 0.2s linear; }
  #contact input[type="submit"]:hover {
    background: #111;
    color: #fff; } }
#contact .thankyou {
  padding: 40px 0;
  text-align: center; }
@media screen and (max-width: 640px) {
  #contact .page form {
    width: 100%; }
  #contact label {
    margin: 20px 0; }
  #contact label span:first-of-type {
    position: static; }
  #contact label.mes span:first-of-type {
    position: absolute; }
  #contact .page input {
    padding-left: 0;
    margin: 0 auto; }
  #contact .thankyou p {
    text-align: left; }
  #contact .thankyou br {
    display: none; }
  #contact .thankyou a {
    text-transform: uppercase;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: #111 1px solid;
    color: #111;
    text-decoration: none; } }
#contact .wpcf7-response-output {
  display: none !important; }

#archive .posts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem; }
  @media screen and (min-width: 641px) {
    #archive .posts > * {
      flex: 1 32rem; } }
  #archive .posts img {
    border-radius: 2.4rem; }
  #archive .posts > * a {
    color: #111;
    text-decoration: none; }
  #archive .posts > * .date {
    font-size: 1.2rem; }
  #archive .posts > * h2 {
    font-size: 1.6rem;
    margin: 0; }

.categories,
.tags {
  margin: .8rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem; }
  .categories::before,
  .tags::before {
    content: "Category /";
    font-size: 1.2rem;
    font-weight: normal; }
  .categories ul,
  .tags ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem; }
    .categories ul a,
    .tags ul a {
      color: #111;
      text-decoration: none;
      font-size: 1.2rem;
      border-bottom: #111 1px solid; }

.tags {
  margin: 1.2rem 0 0; }
  .tags::before {
    display: none; }
  .tags a {
    color: #111;
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: .3rem .8rem;
    border: #111 1px solid;
    border-radius: .2rem; }

.contents {
  margin: 4rem 0 0; }
  .contents figure {
    margin: 1.6rem 0; }
    .contents figure img {
      border-radius: 2.4rem; }
  .contents iframe {
    max-width: 100%; }
  .contents p {
    line-height: 2.1; }
  .contents ul {
    list-style: disc;
    padding: 1.6rem 0; }
  .contents ol {
    list-style: decimal;
    padding: 1.6em 0; }
  .contents h2 {
    font-size: 2rem; }
  .contents h3 {
    font-size: 1.8rem; }
  .contents h4 {
    font-size: 1.6rem; }
  .contents hr {
    border: none;
    border-bottom: #111 1px solid; }

#single .page .date {
  display: block;
  font-size: 1.1rem; }

.reservation {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  border-radius: 100%;
  width: 12rem;
  height: 12rem;
  transition: .3s;
  mix-blend-mode: difference;
  background: #fff; }
  @media (hover: hover) {
    .reservation:hover {
      filter: invert(100%); } }
  .reservation__text {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 5s linear infinite; }
@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg); } }
  .reservation__icon {
    display: block;
    width: 40%;
    height: 40%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

/*# sourceMappingURL=common.css.map */