@charset "UTF-8";
.remodal {
  padding: 2rem;
}

/* ============================================================
/* module
============================================================ */
/* clearfix */
.m-clearfix:before, .m-clearfix:after {
  content: " ";
  display: table;
}
.m-clearfix:after {
  clear: both;
}

/* align */
.m-ar {
  text-align: right !important;
}

.m-ac {
  text-align: center !important;
}

.m-al {
  text-align: left !important;
}

.m-aj {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* display */
.m-inlineblock {
  display: inline-block !important;
}

/* margin padding
============================================================ */
.pd0 {
  padding: 0 !important;
}

.mg0 {
  margin: 0 !important;
}

/* over
============================================================ */
.m-over {
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.m-over:hover {
  opacity: 0.7;
}
a.m-over {
  text-decoration: none;
}

button.m-over {
  outline: none;
  text-decoration: none;
}

.m-imgover {
  display: block;
  overflow: hidden;
}
.m-imgover img {
  transition: transform 0.5s ease;
}
.m-imgover:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* font
============================================================ */
/* icon
============================================================ */
.m-icon-arrow, .m-icon-close, .m-icon-bars {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.m-icon-arrow:before, .m-icon-close:before, .m-icon-bars:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.m-icon-bars:before {
  background-image: url(../img/common/icon-bars.svg);
}

.m-icon-close:before {
  background-image: url(../img/common/icon-close.svg);
}

.m-icon-arrow:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon-arrow.svg");
  mask-image: url("../img/common/icon-arrow.svg");
  background: currentColor;
}

/* button
============================================================ */
.m-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
  text-decoration: none !important;
}
.disable.m-btn {
  pointer-events: none;
  background: #999 !important;
}

.m-btn {
  width: 31.5rem;
  height: 4rem;
  border: 1px solid;
  border-radius: 4rem;
  font-weight: bold;
}
a.m-btn {
  color: inherit;
  text-decoration: none;
}

.m-btn em {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  font-size: 0.6rem;
  transform: translateY(-50%);
}

/* arrow
============================================================ */
.m-arrow-u, .m-arrow-d, .m-arrow-r {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
}
.m-arrow-u:after, .m-arrow-d:after, .m-arrow-r:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.m-arrow-r:after {
  border-top: 0.1rem solid;
  border-right: 0.1rem solid;
}

.m-arrow-d:after {
  margin-top: -0.25rem;
  border-bottom: 0.1rem solid;
  border-right: 0.1rem solid;
}

.m-arrow-u:after {
  margin-top: 0.25rem;
  border-top: 0.1rem solid;
  border-left: 0.1rem solid;
}

/* text
============================================================ */
.m-text-underline {
  text-decoration: underline;
}
a.m-text-underline:hover {
  text-decoration: none;
}

.m-nowrap {
  white-space: nowrap;
}

.m-indent1 {
  padding-left: 1em;
  text-indent: -1em;
}
.m-indent1 > * {
  text-indent: 0;
}
.m-indent2 {
  padding-left: 2em;
  text-indent: -1em;
}
.m-indent-disc {
  padding-left: 1em;
  text-indent: -1em;
}
.m-indent-disc:before {
  content: "●";
  display: inline-block;
  transform: scale(0.8);
  text-indent: 0;
}
.m-indent-kome {
  padding-left: 1em;
  text-indent: -1em;
}
.m-indent-kome:before {
  content: "※";
  display: inline-block;
  text-indent: 0;
}

/* ============================================================
/* js
============================================================ */
/* accordion
============================================================ */
.js-accordion__content {
  display: none;
}
.js-accordion .m-arrow-d {
  transform: translateY(-30%);
}
.js-accordion.opened .m-arrow-d {
  transform: translateY(30%) scale(1, -1);
}

/* slider
============================================================ */
.js-slider :focus {
  outline: none;
}

/* inview
============================================================ */
.js-inview-fadeup {
  opacity: 0;
  transform: translateY(50px);
}
.js-inview-fadeup.inviewed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
}

.js-inview-fade {
  opacity: 0;
}
.js-inview-fade.inviewed {
  opacity: 1;
  transition: opacity 1s ease;
}

.js-inview-delay1.inviewed {
  transition-delay: 0.25s;
}

/* remodal
============================================================ */
.remodal-wrapper {
  padding: 0;
}

.remodal {
  font-family: Noto Sans JP, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "palt";
  background: transparent;
}

/* ============================================================
/* layout
============================================================ */
html {
  font-size: 20px;
}
@media screen and (max-width: 750px) {
  html {
    font-size: 2.67vw;
  }
}

body {
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  overflow-x: hidden;
}

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

@media (hover: none) {
  a:hover img {
    opacity: 1;
  }
}
figure {
  margin: 0;
}

#page {
  overflow: hidden;
}

#btn-f-top {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  width: 60px;
}

@media (max-width: 750px) {
  #btn-f-top {
    width: 10vw;
    right: 0.5em;
    bottom: 0.5em;
  }
}
#pageContents {
  position: relative;
  padding-bottom: 1px;
  font-family: Noto Sans JP, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 1.3rem;
  color: #000;
  line-height: 1.8;
  background-attachment: fixed;
  -ms-font-feature-settings: "normal";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;
}
#pageContents, #pageContents * {
  box-sizing: border-box;
}

.l-inner {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

#btn-f-top {
  position: fixed;
  z-index: 1000;
  right: 4px;
  bottom: 4px;
  width: 61px;
}

#gfooter .inner .btn {
  background: #f788bd;
}

/* ============================================================
/* page-layout
============================================================ */

#main{
  position: relative;
}
#main .main-ttl{
  position: absolute;
  top: 8.5%;
  left: 0;
}
#main .main-date{
  position: absolute;
  top: 67.8%;
  left: 0;
}

#lead{
  position: relative;
}
#lead .lead-txt{
  position: absolute;
  top: -13.4%;
  left: 0;
}

#nav{
  margin: 9px auto 0;
}
#nav p{
  width: 660px;
  margin: 0 auto;
}
#nav p:nth-child(2){
  margin: 34px auto 0;
}

#contents01{
  margin-top: 53px;
  padding-top: 50px;
}

.shop{
  position: relative;
  margin: 118px auto 0;
}
.shop-first{
  margin: 46px auto 0;
}
.shop-main{
  position: relative;
  z-index: 10;
  width: 654px;
  margin: 0 auto;
}
.shop-name{
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 0 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background-color: #fff;
  border-top-right-radius: 16px;
}
.shop-copy{
  position: absolute;
  top: 24px;
  right: 21px;
  margin: 0 auto;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
#contents01 .shop-name{
  color: #0076e4;
}
#contents02 .shop-name{
  color: #5cbfb3;
}
.shop-copy{
  position: absolute;
  top: 24px;
  right: 21px;
  margin: 0 auto;
  padding: 12px 6px 4px 4px;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  color: #fff;
}
.shop-copy .dot{
  vertical-align: 0.25em;
  line-height: 0;
}
.shop-copy .quotation-first{
  letter-spacing: -0.5em;
  vertical-align: 0.05em;
  line-height: 0;
}
.shop-copy .quotation-last{
  letter-spacing: -0.4em;
  vertical-align: -0.25em;
  line-height: 0;
}
.shop-copy .and{
  vertical-align: 0.1em;
  line-height: 0;
}
.shop-copy-bottom{
  padding: 12px 5px 14px 4px;
}
.shop-copy-2sentence{
  right: 73px;
}
#contents01 .shop-copy{
  background-color: #0076e4;
}
#contents02 .shop-copy{
  background-color: #5cbfb3;
}
.shop-txt{
  position: relative;
  z-index: 10;
  width: 550px;
  margin: 30px auto 0 44px;
  font-size: 26px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.shop-txt p{
  line-height: 1.6;
}
.shop-txt .shop-attention{
  padding-top: 2px;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.shop-txt .shop-txt-color{
  color: #5cbfb3;
}

.shop-back01{
  position: absolute;
  bottom: -120px;
  right: 18px;
  width: 290px;
}
.shop-back02{
  position: absolute;
  bottom: -228px;
  left: 0;
  width: 750px;
  z-index: 1;
}
.shop-back02-last{
  bottom: -310px;
}

#contents02{
  margin-top: 52px;
  padding-top: 50px;
}

.shop-name-space{
  letter-spacing: 0.02em;
}
.shop-name-space-min{
  font-size: 28px;
  letter-spacing: 0;
}

.page-information{
  margin: 110px auto 0;
}
.page-information .l-sns{
  display: flex;
  justify-content: space-between;
  width: 404px;
  margin: 0 auto;
}
.page-information .l-sns li{
  width: 105px;
}
.page-information .l-attention{
  width: 676px;
  margin: 92px auto 22px;
  font-size: 23px;
}


@media screen and (max-width: 750px) {
  #nav{
    margin: 1.2vw auto 0;
  }
  #nav p{
    width: 88vw;
    margin: 0 auto;
  }
  #nav p:nth-child(2){
    margin: 4.53334vw auto 0;
  }
  
  #contents01{
    margin-top: 7.067vw;
    padding-top: 6.667vw;
  }
  
  .shop{
    margin: 15.73334vw auto 0;
  }
  .shop-first{
    margin: 6.13334vw auto 0;
  }
  .shop-main{
    position: relative;
    z-index: 10;
    width: 87.2vw;
    margin: 0 auto;
  }
  .shop-name{
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 74.667vw;
    margin: 0 auto;
    padding: 1.067vw 2.133vw 0 0;
    font-size: 4vw;
    border-top-right-radius: 2.133vw;
  }
  .shop-copy{
    position: absolute;
    top: 3.2vw;
    right: 2.8vw;
    margin: 0 auto;
  }
  .shop-copy{
    position: absolute;
    top: 3.2vw;
    right: 2.8vw;
    margin: 0 auto;
    padding: 1.6vw 0.8vw 0.533vw 0.533vw;
    font-size: 3.867vw;
  }
  .shop-copy .dot{
    vertical-align: 0.25em;
    line-height: 0;
  }
  .shop-copy .quotation-first{
    letter-spacing: -0.5em;
    vertical-align: 0.05em;
    line-height: 0;
  }
  .shop-copy .quotation-last{
    letter-spacing: -0.4em;
    vertical-align: -0.25em;
    line-height: 0;
  }
  .shop-copy .and{
    vertical-align: 0.1em;
    line-height: 0;
  }
  .shop-copy-bottom{
    padding: 1.6vw 0.667vw 1.867vw 0.533vw;
  }
  .shop-copy-2sentence{
    right: 9.733vw;
  }
  .shop-txt{
    position: relative;
    z-index: 10;
    width: 73.333vw;
    margin: 4vw auto 0 5.86667vw;
    font-size: 3.467vw;
  }
  .shop-txt p{
    line-height: 1.6;
  }
  .shop-txt .shop-attention{
    padding-top: 0.267vw;
    font-size: 3.2vw;
    letter-spacing: 0.06em;
  }
  
  .shop-back01{
    position: absolute;
    bottom: -16vw;
    right: 2.4vw;
    width: 38.667vw;
  }
  .shop-back02{
    position: absolute;
    bottom: -30.4vw;
    left: 0;
    width: 100vw;
    z-index: 1;
  }
  .shop-back02-last{
    bottom: -41.3334vw;
  }
  
  #contents02{
    margin-top: 6.933vw;
    padding-top: 6.667vw;
  }
  
  .shop-name-space{
    letter-spacing: 0.02em;
  }
  .shop-name-space-min{
    font-size: 3.733vw;
    letter-spacing: 0;
  }
  
  .page-information{
    margin: 14.6667vw auto 0;
  }
  .page-information .l-sns{
    width: 53.867vw;
    margin: 0 auto;
  }
  .page-information .l-sns li{
    width: 14vw;
  }
  .page-information .l-attention{
    width: 90.133vw;
    margin: 12.26667vw auto 22px;
    font-size: 3.067vw;
  }
  
}