@charset "UTF-8";
/* Scss Document */
.text-link:hover {
  text-decoration: underline; }

.img-parallax {
  clip: rect(0, auto, auto, 0);
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; }

.img-parallax img {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  object-fit: cover;
  z-index: 0;
  transform: translateZ(0) !important; }

.box-parallax {
  position: relative; }

@media screen and (max-width: 767px) {
  .box-parallax .img-parallax-pc {
    position: relative; }
  .box-parallax .img-parallax-pc img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%; } }

@media screen and (max-width: 767px) {
  .pc {
    display: none; } }
.padd_wrap {
  padding-left: 8%;
  padding-right: 8%; }

@media screen and (min-width: 768px) {
  .txt-vertical-pc {
    cursor: vertical-text;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    word-wrap: break-word; }

  .txt-vertical-pc .int {
    writing-mode: lr-tb;
    -o-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    -moz-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    line-height: 1; }

  .txt-vertical-pc .txt-latin {
    direction: rtl;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right; }

  .txt-vertical-pc .txt-dot {
    cursor: vertical-text;
    direction: ltr;
    writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    -moz-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    line-height: 1;
    position: relative;
    left: -2px; }

  .none_hover {
    pointer-events: none; }

  .sp {
    display: none !important; }

  .img-parallax-pc {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; }

  .img-parallax-pc img {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0) !important; } }
.ham-img {
  cursor: pointer;
  position: fixed;
  z-index: 1001;
  top: 0px;
  right: 0px;
  width: 70px; }
  .ham-img img {
    width: 100%;
    height: auto; }
    .ham-img img.on {
      position: absolute;
      top: 0%;
      left: 0%;
      z-index: 2;
      opacity: 0; }
  .ham-img.is-active img {
    opacity: 0; }
    .ham-img.is-active img.on {
      opacity: 1; }
  @media screen and (min-width: 768px) {
    .ham-img {
      width: 128px;
      top: 0;
      right: 0; } }

.hamburger {
  position: relative;
  z-index: 1001;
  box-sizing: border-box;
  cursor: pointer;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 26px; }
  .hamburger:before {
    content: '';
    width: 30px;
    background-color: #fff;
    height: 2px;
    position: absolute;
    top: 21px;
    left: 20px; }
  @media screen and (min-width: 768px) {
    .hamburger:hover {
      opacity: 0.8; } }
  .hamburger:after {
    content: 'MENU';
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 17px;
    line-height: 1;
    display: block;
    font-size: 13px;
    letter-spacing: 0; }
  .hamburger span {
    height: 14px;
    width: 30px;
    position: relative;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease; }
    .hamburger span:before, .hamburger span:after {
      content: '';
      background-color: #fff;
      height: 2px;
      width: 100%;
      position: absolute;
      top: 0px;
      margin: 0 auto;
      display: block;
      transition: all .3s ease;
      -moz-transition: all .3s ease;
      -webkit-transition: all .3s ease; }
    .hamburger span:after {
      top: auto;
      bottom: 0; }
  .hamburger.is-active:after {
    content: 'CLOSE'; }
  .hamburger.is-active:before {
    opacity: 0; }
  .hamburger.is-active span:before {
    transform: translate3d(0, 5px, 0) rotate(45deg); }
  .hamburger.is-active span:after {
    transform: translate3d(0, -6px, 0) rotate(-45deg); }

@media screen and (max-width: 767px) {
  img {
    width: 100%;
    height: auto; } }
.fc-form [class^='error'] {
  position: static; }

.f_cl1 {
  color: #1a4472; }

.txt_r {
  text-align: right; }

i {
  font-style: normal; }

/*
::-webkit-scrollbar {
width:4px;


}
::-webkit-scrollbar-thumb {
background:#999	;
}
::-webkit-scrollbar * {
background:rgba(0,0,0,0);
}
*/
.d-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.brk-in {
  display: inline-block; }

.box-shadown {
  box-shadow: 2px 5px 13px -5px rgba(0, 0, 0, 0.58);
  -webkit-box-shadow: 2px 5px 13px -5px rgba(0, 0, 0, 0.58);
  -moz-box-shadow: 2px 5px 13px -5px rgba(0, 0, 0, 0.58); }

.img-shadown {
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3); }

header .btn-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  z-index: 9;
  cursor: pointer; }
  header .btn-close:hover {
    opacity: 0.8; }
  header .btn-close img {
    width: 100%;
    height: auto; }

section .padd_wrap {
  padding-left: 5%;
  padding-right: 5%; }
section .wrap {
  box-sizing: border-box;
  padding-left: 5%;
  padding-right: 5%; }
  @media screen and (min-width: 768px) {
    section .wrap {
      padding-left: 0;
      padding-right: 0; } }

.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box; }
  .wrap > * {
    box-sizing: border-box; }

main {
  position: relative; }

#navigation {
  background-color: #000;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  -moz-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; }
  #navigation .gr {
    position: relative; }
  #navigation .group {
    padding: 10vw 5% 100px;
    text-align: center; }
  #navigation .tog-nav {
    position: relative; }
    #navigation .tog-nav li {
      padding-bottom: 20px; }
      #navigation .tog-nav li a {
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.1em;
        padding: 10px;
        position: relative; }
        #navigation .tog-nav li a:before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          border-top: 2px solid;
          opacity: 0;
          transition: opacity .3s ease;
          -moz-transition: opacity .3s ease;
          -webkit-transition: opacity .3s ease; }
      #navigation .tog-nav li.active a:before, #navigation .tog-nav li:hover a:before {
        opacity: 1; }
  #navigation .contact {
    border-top: 1px solid #4d4d4d;
    padding: 15vw 5%; }
    #navigation .contact .tel {
      font-size: 16px;
      padding: 20px 0; }
      #navigation .contact .tel span {
        letter-spacing: 0.05em; }
      #navigation .contact .tel .num {
        font-size: 18px; }
        #navigation .contact .tel .num span {
          font-size: 26px; }
    #navigation .contact .bnr {
      padding: 5px;
      border: 1px solid #7e162d;
      margin: 0 5%; }

          #navigation .contact .bnr span {
         margin-left: -8px; }


      #navigation .contact .bnr a {
        background: url("../img/shared/bg1.jpg") repeat 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        padding: 20px 15px;
        gap: 10px;
        position: relative; }
        #navigation .contact .bnr a img {
          width: 20px;
          height: auto;
          opacity: 1 !important; }
    #navigation .contact .sns {
      justify-content: center;
      font-size: 16px;
      gap: 15px;
      align-items: center;
      padding: 20px 0 0; }
      #navigation .contact .sns img {
        width: 30px;
        height: auto; }
      #navigation .contact .sns a:last-child {
        position: relative;
        line-height: 1; }
      #navigation .contact .sns a:last-child img {
        width: 100px; }
  @media screen and (min-width: 768px) {
    #navigation {
      display: block;
      width: 100%;
      position: relative;
      padding: 0;
      height: 100px;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto;
      margin: 0;
      overflow: visible; }
      #navigation .group {
        padding: 0;
        text-align: left; }
      #navigation .tog-nav {
        position: relative;
        gap: 16px;
        display: flex;
        padding: 31px 36px 0; }
        #navigation .tog-nav li {
          padding-bottom: 0px; }
          #navigation .tog-nav li a {
            font-size: 16px;
            letter-spacing: 0.05em;
            padding: 0; }
            #navigation .tog-nav li a:before {
              bottom: -5px; }
      #navigation .contact {
        border: none;
        padding: 0;
        position: absolute;
        right: 9px;
        top: 14px;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px; }
        #navigation .contact .tel {
          font-size: 15px;
          padding: 0px 0 6px;
          letter-spacing: 0.05em;
          line-height: 27px; }
          #navigation .contact .tel .num {
            font-size: 17px; }
            #navigation .contact .tel .num span {
              font-size: 22px; }
        #navigation .contact .bnr {
          padding: 5px;
          border: 1px solid #7e162d;
          margin: 0;
          width: 179px; }
          #navigation .contact .bnr a {
            font-size: 17px;
            padding: 10px 0 14px;
            gap: 10px; }
            #navigation .contact .bnr a:hover {
              opacity: 0.8; }
            #navigation .contact .bnr a img {
              width: 27px; }
        #navigation .contact .sns {
          display: none; } }

.ft-active .pagetop {
  opacity: 0; }

.navOpen {
  	/*
  
    .ft-bnr-fixed {
     
  opacity: 0 !important;
     visibility: hidden !important;
      pointer-events: none;
      li {
        
   
        &.ham-img {
           pointer-events: auto;
          opacity: 1;
          visibility: visible;
        }
      }
    }
    */ }
  .navOpen .pagetop {
    opacity: 0 !important;
    pointer-events: none; }
  .navOpen #navigation {
    opacity: 1;
    pointer-events: auto; }

header {
  background: url("../img/index/key_bg.jpg") repeat center 0;
  position: relative; }
  header h1 {
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    z-index: 10;
    position: absolute;
    top: 10px;
    left: 5%;
    right: 5%;
    z-index: 1; }
  header .logo {
    position: absolute;
    top: 12vw;
    left: 5%;
    right: 5%;
    z-index: 9;
    padding: 0 10%; }
    header .logo img {
      width: 100%;
      height: auto; }
  @media screen and (min-width: 768px) {
    header h1 {
      white-space: nowrap;
      color: #fff;
      font-size: 13px;
      letter-spacing: 0.1em;
      text-align: center;
      top: 200px;
      left: auto;
      right: 29px;
      bottom: 0; }
      header h1 span {
        letter-spacing: 0.1em; } }
  @media screen and (min-width: 768px) and (max-width: 1220px) {
    header h1 {
      right: 15px; } }
  @media screen and (min-width: 768px) {
    header .logo {
      top: 39px;
      left: 41px;
      right: auto;
      width: 492px;
      padding: 0; }
    header .hd-pc .tog-nav {
      position: absolute;
      top: 153px;
      left: 50px;
      z-index: 2;
      height: 300px; }
      header .hd-pc .tog-nav li {
        margin-right: 22px; }
        header .hd-pc .tog-nav li a {
          font-size: 18px;
          letter-spacing: 0.05em;
          cursor: pointer;
          position: relative; }
          header .hd-pc .tog-nav li a:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            border-left: 1px solid;
            opacity: 0; }
          header .hd-pc .tog-nav li a:hover:before, header .hd-pc .tog-nav li a.active:before {
            opacity: 1; }
    header .hd-pc .contact {
      gap: 10px;
      display: flex;
      position: absolute;
      right: 23px;
      top: 34px;
      z-index: 9; }
      header .hd-pc .contact .tel {
        font-size: 16px;
        padding: 10px 0 0;
        line-height: 32px;
        letter-spacing: 0.05em; }
        header .hd-pc .contact .tel span {
          letter-spacing: 0.05em; }
        header .hd-pc .contact .tel .num {
          font-size: 18px; }
          header .hd-pc .contact .tel .num span {
            font-size: 24px; }
      header .hd-pc .contact .bnr {
        padding: 5px;
        border: 1px solid #7e162d;
        width: 271px; }
        header .hd-pc .contact .bnr a {
          background: url("../img/shared/bg1.jpg") repeat 0 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 18px;
          padding: 18px 15px 20px;
          gap: 10px;
          position: relative;
          line-height: 30px; }
          header .hd-pc .contact .bnr a img {
            width: 28px;
            height: auto; }
          header .hd-pc .contact .bnr a:hover {
            opacity: 0.8; }
      header .hd-pc .contact .sns {
        justify-content: center;
        font-size: 16px;
        gap: 15px;
        align-items: center;
        padding: 16px 0 0; }
        header .hd-pc .contact .sns img {
          width: 30px;
          height: auto; }
        header .hd-pc .contact .sns a:last-child {
          position: relative;
          line-height: 1;}
        header .hd-pc .contact .sns a:last-child img {
        width: 100px; }
          header .hd-pc .contact .sns a:last-child:hover:after {
            opacity: 0; } }

footer {
  background: #000 url("../img/shared/ft_bg.jpg") repeat-x center 0/auto 30px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.04em;
  font-size: 15px;
  line-height: 30px;
  position: relative;
  padding: 100px 5% 120px; }
  footer .logo {
    width: 75%;
    margin: 0 auto 10vw; }
  footer .shop {
    border-bottom: 1px solid #4d4d4d;
    padding-bottom: 20px;
    margin-bottom: 20px; }
  footer .contact .tel {
    font-size: 16px;
    padding: 20px 0; }
    footer .contact .tel span {
      letter-spacing: 0.05em; }
    footer .contact .tel .num {
      font-size: 18px; }
      footer .contact .tel .num span {
        font-size: 26px; }
  footer .contact .bnr {
    padding: 5px;
    border: 1px solid #7e162d;
    margin: 0 5%; }
    footer .contact .bnr a {
      background: url("../img/shared/bg1.jpg") repeat 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      padding: 20px 15px;
      gap: 10px;
      position: relative; }
      footer .contact .bnr a img {
        width: 20px;
        height: auto; }
  footer .contact .sns {
    justify-content: center;
    font-size: 16px;
    gap: 15px;
    align-items: center;
    padding: 20px 0 0; }
    footer .contact .sns img {
      width: 30px;
      height: auto; }
    footer .contact .sns a:last-child {
      position: relative;
      line-height: 1; }
    footer .contact .sns a:last-child img {
        width: 100px; }
      footer .contact .sns a:last-child:hover:after {
        opacity: 0; }

  footer .tbl-info {
    padding: 30px 0 0 5%; }
    footer .tbl-info .icomap img {
      width: 16px;
      height: auto;
      margin-right: 2px; }
    footer .tbl-info .icomap:hover {
      text-decoration: underline; }
    footer .tbl-info dl {
      display: table;
      width: 100%;
      text-align: left;
      font-size: 13px;
      line-height: 24px;
      padding-bottom: 10px; }
      footer .tbl-info dl dt, footer .tbl-info dl dd {
        display: table-cell; }
      footer .tbl-info dl dt {
        width: 80px; }
  footer .btn-copy {
    padding: 10px 0 0px;
    line-height: 1; }
    footer .btn-copy span {
      text-decoration: underline; }
    footer .btn-copy a:hover span {
      text-decoration: none; }
    footer .btn-copy a:after {
      content: '';
      background: url("../img/shared/copy.png") no-repeat 0 0/100%;
      display: inline-block;
      width: 15px;
      height: 20px;
      margin-left: 10px;
      position: relative;
      vertical-align: text-bottom; }
  footer .cookies_link a {
    text-decoration: underline; }
    footer .cookies_link a:hover {
      text-decoration: none; }
  footer .socialbuttons {
    padding: 20px 0; }
  footer .ft-bottom {
    padding-bottom: 20px; }
  @media screen and (min-width: 767px) {
    footer {
      background-size: auto;
      padding: 113px 0 0; }
      footer .logo {
        width: 284px;
        margin: 0 0 0 -5px; }
        footer .logo img {
          width: 100%;
          height: auto; }
      footer .shop {
        padding-bottom: 44px;
        margin-bottom: 35px;
        display: flex; }
      footer .contact {
        width: 270px;
        margin: 0 54px 0 118px; }
        footer .contact .tel {
          font-size: 16px;
          padding: 8px  0 11px; }
          footer .contact .tel span {
            letter-spacing: 0.05em; }
          footer .contact .tel .num {
            font-size: 18px; }
            footer .contact .tel .num span {
              font-size: 24px; }
        footer .contact .bnr {
          margin: 0; }
          footer .contact .bnr a {
            font-size: 18px;
            padding: 20px 0px;
            gap: 10px; }
            footer .contact .bnr a img {
              width: 28px;
              height: auto; }
            footer .contact .bnr a:hover {
              opacity: 0.8; }
        footer .contact .sns {
          font-size: 16px;
          gap: 15px;
          padding: 16px 0 0; }
          footer .contact .sns img {
            width: 30px; }
      footer .tbl-info {
        padding: 7px 0 0;
        width: 560px; }
        footer .tbl-info .icomap img {
          width: 16px;
          margin-right: 2px; }
        footer .tbl-info dl {
          font-size: 16px;
          line-height: 30px;
          padding-bottom: 21px; }
          footer .tbl-info dl dt {
            width: 93px; }
      footer .tog-nav {
        justify-content: center;
        display: flex;
        gap: 23px;
        padding: 0 0px 34px 0px;
        font-size: 18px; }
        footer .tog-nav li a {
          letter-spacing: 0.05em; }
          footer .tog-nav li a:hover {
            opacity: 0.8; }
        footer .tog-nav li.ext {
          font-size: 16px; }
      footer .gr {
        display: flex;
        justify-content: center; }
        footer .gr:last-child {
          gap: 52px;
          letter-spacing: 0.1em; }
      footer .btn-copy {
        padding: 0 18px 21px 0; }
        footer .btn-copy a:after {
          width: 12px;
          height: 14px;
          margin-left: 10px; }
      footer .socialbuttons {
        padding: 0px 0; }
      footer .ft-bottom {
        padding: 21px 0 66px;
        font-size: 15px; } }

#key {
  position: relative; }

.pagetop {
  cursor: pointer;
  font-weight: 500;
  color: #fff;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.05em;
  position: relative;
  padding: 30px 0 0;
  z-index: 9999; }
  .pagetop:before {
    content: '';
    width: 20px;
    height: 20px;
    border-left: 1px solid;
    border-top: 1px solid;
    top: 20px;
    left: calc(50% - 11px);
    position: absolute;
    transform: rotate(45deg); }
  @media screen and (max-width: 767px) {
    .pagetop {
      opacity: 1 !important;
      visibility: visible !important; } }
  @media screen and (min-width: 768px) {
    .pagetop {
      position: fixed;
      bottom: 50px;
      right: 50px;
      font-size: 14px; }
      .pagetop:hover {
        opacity: 0.8 !important; } }

#belt {
  position: fixed;
  z-index: 1000; }
  @media screen and (min-width: 768px) {
    #belt {
      background-color: #fff;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none; }
      #belt > * {
        pointer-events: none; } }

/*========layout pc===========*/
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
    line-height: 40px; }

  section .padd_wrap {
    padding-left: 0;
    padding-right: 0; }

  .has-nav header .hd-fixed {
    opacity: 1;
    visibility: visible; } }
.has-nav .ft-bnr-fixed {
  opacity: 1;
  visibility: visible; }
.has-nav header .hd-js {
  pointer-events: none;
  opacity: 0 !important; }
@media screen and (min-width: 768px) {
  .has-nav #belt {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }
    .has-nav #belt > * {
      pointer-events: auto; } }

/*content*/
.remodal button {
  cursor: pointer; }
  .remodal button:hover {
    opacity: 0.6; }

.remodal.ext {
  vertical-align: top; }

.remodal-close {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  position: sticky;
  margin-left: auto;
  margin-bottom: 0px;
  width: 30px;
  font-size: 40px;
  top: 5px;
  right: 0px;
  box-sizing: border-box;
  line-height: 1;
  text-align: right;
  /* font-size: 20px; */ }
  .remodal-close img {
    width: 100%;
    height: auto; }
  @media screen and (min-width: 768px) {
    .remodal-close {
      margin: 0px 5px 24px 0;
      width: auto;
      font-size: 50px; }
      .remodal-close img {
        width: 52px; } }

.remodal-cancel {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  margin: 20px auto 0;
  letter-spacing: 0.1em;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center; }
  .remodal-cancel span {
    font-size: 25px; }
  .remodal-cancel:hover {
    opacity: 0.7  !important; }
  @media screen and (min-width: 768px) {
    .remodal-cancel {
      font-size: 28px;
      padding: 0;
      margin: 0; }
      .remodal-cancel span {
        font-size: 43px; } }

.remodal-wrapper {
  padding: 10px; }
  @media screen and (min-width: 768px) {
    .remodal-wrapper {
      padding: 20px; } }

.remodal-wrapper, .remodal-wrapper-ext {
  text-align: center; }

.remodal {
  max-width: 1200px;
  padding: 0px 0;
  box-sizing: border-box; }

.remodal-overlay {
  background-color: rgba(0, 0, 0, 0.5); }

@media screen and (min-width: 768px) {
  .has-nav .hamburger {
    opacity: 1;
    visibility: visible; } }
.ft-bnr-fixed {
  border-top: 1px solid #8e8e8e;
  background: #000;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  font-weight: 600; }
  .ft-bnr-fixed li {
    position: relative;
    font-weight: bold;
    width: 70px; }
    .ft-bnr-fixed li img {
      width: auto;
      display: block;
      height: 24px;
      margin: 0px auto 7px; }
    .ft-bnr-fixed li img:hover {
      opacity: 1 !important; }
    .ft-bnr-fixed li a {
      text-align: center;
      display: block;
      font-size: 13px;
      line-height: 1.3;
      letter-spacing: 0;
      padding: 10px 0 0;
      height: 100%;
      font-weight: bold; }
    .ft-bnr-fixed li:nth-child(2):before, .ft-bnr-fixed li:nth-child(3):before {
      content: '';
      border-left: 1px solid #8e8e8e;
      position: absolute;
      top: 0px;
      bottom: 15px;
      right: 0; }
    .ft-bnr-fixed li:nth-child(1) {
      width: calc(100% - 210px);
      background: url("../img/shared/bg1.jpg") repeat center 0; }
      .ft-bnr-fixed li:nth-child(1) img {
        margin: 0;
        display: inline;
        margin-right: 8px;
        position: relative;
        top: -3px; }
      .ft-bnr-fixed li:nth-child(1) a {
        padding-top: 20px;
        font-weight: 400; }

@keyframes mymove {
  0% {
    filter: grayscale(100%); }
  100% {
    filter: grayscale(0%); } }
.fade_photo[style*="visible"] img {
  animation-name: mymove;
  animation-duration: .3s;
  animation-delay: 1s;
  animation-fill-mode: backwards; }

.photo_on {
  position: relative; }
  .photo_on .on {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0 !important;
    transition: opacity .8s ease 0.7s !important;
    -moz-transition: opacity .8s ease 0.7s !important;
    -webkit-transition: opacity .8s ease 0.7s !important; }
  .photo_on[style*="visible"] .on {
    opacity: 1 !important; }

@keyframes textshow {
  0% {
    clip-path: inset(0 100% 0 0); }
  100% {
    clip-path: inset(0 0 0 0); } }
@keyframes textshow1 {
  0% {
    clip-path: inset(0% 0 100% 0); }
  100% {
    clip-path: inset(0 0 0 0); } }
.h2222[style*="visible"] .t, .h2222[style*="visible"] .ani {
  animation: textshow 1s ease-out forwards; }
.h2222.txt-vertical[style*="visible"] .t {
  animation: textshow1 1s ease-out forwards; }

.bnr-shared {
  border: 1px solid #000;
  padding: 5px; }
  .bnr-shared a {
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 500;
    display: block;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 0.05em;
    padding: 17px 10px;
    position: relative; }
    .bnr-shared a:before {
      content: '';
      background: url("../img/shared/arow_w.png") no-repeat center/100%;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 20px;
      width: 36px;
      z-index: 1; }
    .bnr-shared a.unsmooth {
      padding-right: 0; }
      .bnr-shared a.unsmooth:before {
        width: 20px;
        background: url("../img/yakiniku/ico.png") no-repeat center/100%; }
  .bnr-shared.white {
    border: 1px solid #fff; }
    .bnr-shared.white a {
      background: url("../img/shared/bd_bg.jpg") repeat center;
      color: #000; }
      .bnr-shared.white a:before {
        background: url("../img/shared/arow.png") no-repeat center/100%; }
  @media screen and (min-width: 768px) {
    .bnr-shared a {
      font-size: 20px;
      padding: 28px 28px 31px 0; }
      .bnr-shared a:before {
        width: 46px;
        right: 30px;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease; }
      .bnr-shared a:hover:before {
        right: 10px; }
      .bnr-shared a.unsmooth:before {
        width: 22px;
        right: 33px; }
      .bnr-shared a.unsmooth:hover {
        opacity: 0.8; } }

h2, h3, h4 {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500; }

.bg2 {
  background: url("../img/shared/bg2.jpg") repeat center 0; }

.popup-shared {
  background: url("../img/shared/bd_bg.jpg") repeat center 0;
  padding: 0 5% 80px;
  font-size: 13px;
  line-height: 30px; }
  .popup-shared h2 {
    font-size: 7vw;
    line-height: 1.4;
    padding-bottom: 5vw; }
  .popup-shared .menu-shared {
    padding: 30px 0;
    letter-spacing: 0.05em; }
    .popup-shared .menu-shared.boder {
      border-top: 1px solid;
      padding: 30px 0 0 !important;
      margin-top: 10px; }
  .popup-shared .menu-list {
    font-size: 14px;
    line-height: 26px;
    padding-bottom: 30px;
    text-align: left; }
    .popup-shared .menu-list h3, .popup-shared .menu-list h4 {
      font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-weight: normal; }
    .popup-shared .menu-list h3 {
      background-color: #000;
      color: #fff;
      line-height: 40px;
      font-size: 16px;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 10px; }
    .popup-shared .menu-list h4 {
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.05em;
      padding-bottom: 10px; }
    .popup-shared .menu-list p {
      padding-top: 10px; }
    .popup-shared .menu-list .col:not(:last-child) {
      padding-bottom: 30px; }
    .popup-shared .menu-list .gr-ext {
      text-align: left; }
      .popup-shared .menu-list .gr-ext .col {
        padding-bottom: 0; }
        .popup-shared .menu-list .gr-ext .col p {
          padding: 0 0 15px; }
    .popup-shared .menu-list dl {
      padding: 8px 0;
      background: url("../img/yakiniku/dot.png") repeat-x 0 bottom;
      letter-spacing: 0.05em; }
      .popup-shared .menu-list dl:after {
        content: "." !important;
        clear: both !important;
        display: block !important;
        height: 0 !important;
        visibility: hidden !important; }
      .popup-shared .menu-list dl dt {
        float: left; }
      .popup-shared .menu-list dl dd {
        float: right;
        text-align: right; }
      .popup-shared .menu-list dl .photo {
        text-align: left;
        float: none;
        clear: both;
        padding-bottom: 15px; }
  @media screen and (min-width: 768px) {
    .popup-shared {
      padding: 20px 20px 70px;
      font-size: 16px;
      line-height: 30px; }
      .popup-shared h2 {
        font-size: 30px;
        line-height: 1.4;
        padding-bottom: 27px;
        letter-spacing: 0.08em; }
      .popup-shared .menu-shared {
        padding: 30px 0 20px;
        justify-content: space-between;
        display: flex; }
        .popup-shared .menu-shared.boder {
          padding-top: 40px !important; }
      .popup-shared .col {
        width: calc((100% - 40px)/3);
        padding-bottom: 0; }
      .popup-shared .w_100 {
        width: 100%; }
        .popup-shared .w_100 .gr {
          gap: 38px;
          display: flex;
          justify-content: center; }
        .popup-shared .w_100 .gr-ext {
          display: flex;
          justify-content: center;
          padding: 36px 0px 0px 0;
          gap: 40px; }
          .popup-shared .w_100 .gr-ext .col {
            width: auto; }
            .popup-shared .w_100 .gr-ext .col p {
              padding-bottom: 32px; }
      .popup-shared .menu-list {
        font-size: 15px;
        line-height: 30px;
        padding-bottom: 50px;
        text-align: left; }
        .popup-shared .menu-list .f-note {
          text-align: center;
          padding: 8px 0 20px; }
        .popup-shared .menu-list .gr-ext {
          padding-top: 20px; }
        .popup-shared .menu-list h3 {
          line-height: 43px;
          font-size: 18px;
          margin-bottom: 22px; }
        .popup-shared .menu-list h4 {
          font-size: 18px; }
        .popup-shared .menu-list p {
          padding-top: 20px; }
        .popup-shared .menu-list dl {
          padding: 9px 0; }
          .popup-shared .menu-list dl .photo {
            padding-bottom: 26px; } }