@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */
:root {
  --base-pc-width:1500;
  --easeInQuad:cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad:cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuint:cubic-bezier(.25, .46, .45, .94);
  --easeOutSine:cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86 );
  --easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28);
  --easeInCirc:cubic-bezier(0.55, 0, 1, 0.45);
  --theme-color:#924249;
  --base-text-color:#222;
  --base-bg-color:#F6E3D2;
  --hanten:scale(-1, -1);
  --hantenX:scale(-1, 1);
  --hantenY:scaleY(-1); }

@media screen and (max-width: 800px) {
  :root {
    --fz9:clamp(9px,calc((9/390)*100vw),11px);
    --fz10:clamp(10px,calc((10/390)*100vw),12px);
    --fz11:clamp(11px,calc((10/390)*100vw),13px);
    --fz12:clamp(12px,calc((12/390)*100vw),15px);
    --fz13:clamp(13px,calc((13/390)*100vw),16px);
    --fz14:clamp(14px,calc((14/390)*100vw),17px);
    --fz15:clamp(15px,calc((15/390)*100vw),19px);
    --fz16:clamp(16px,calc((16/390)*100vw),18px);
    --fz17:clamp(17px,calc((17/390)*100vw),19px);
    --fz18:clamp(18px,calc((18/390)*100vw),20px);
    --fz19:clamp(19px,calc((19/390)*100vw),21px);
    --fz20:clamp(20px,calc((20/390)*100vw),22px);
    --fz21:clamp(21px,calc((21/390)*100vw),23px);
    --fz22:clamp(22px,calc((22/390)*100vw),24px);
    --fz24:clamp(24px,calc((24/390)*100vw),26px);
    --fz25:clamp(25px,calc((25/390)*100vw),27px);
    --fz26:clamp(26px,calc((26/390)*100vw),28px);
    --fz27:clamp(27px,calc((27/390)*100vw),29px);
    --fz28:clamp(28px,calc((28/390)*100vw),30px);
    --fz32:clamp(32px,calc((23/390)*100vw),35px);
    --fz35:clamp(35px,calc((25/390)*100vw),39px);
    --fz36:clamp(36px,calc((36/390)*100vw),40px);
    --fz38:clamp(38px,calc((38/390)*100vw),42px);
    --fz40:clamp(40px,calc((40/390)*100vw),44px);
    --fz45:clamp(45px,calc((45/390)*100vw),49px);
    --fz56:clamp(56px,calc((56/390)*100vw),60px); } }
/* ==========================================================================
	html
========================================================================== */
html.wf-active {
  visibility: visible; }

html {
  font-family: "Zen Kaku Gothic New", "Yu Gothic Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 62.5%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background-size: 8px 8px;
  color: var(--base-text-color);
  background: var(--base-bg-color);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: geometricPrecision;
  text-decoration-thickness: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  letter-spacing: 0.04em;
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-scroll-chaining: none;
  overscroll-behavior: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 500; }

body.nav-open {
  overflow: hidden; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%; }

a {
  color: var(--base-text-color);
  text-decoration: none;
  opacity: 1;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

a:hover,
.trns:hover {
  opacity: .7;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

input,
select,
textarea,
button,
*:before,
*:after {
  -webkit-transition: opacity 0.4s all var(--easeOutQuad);
  -webkit-transition: opacity 0.4s var(--easeOutQuad);
  transition: opacity 0.4s var(--easeOutQuad);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

img {
  width: 100%;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
  interpolation-mode: bicubic;
  -webkit-backface-visibility: hidden !Important; }

.pc_off {
  display: none !important; }

.sp_off {
  display: block !Important; }

img.preload {
  display: none; }

::-moz-selection {
  background: var(--theme-color); }

::selection {
  background: var(--theme-color); }

/* Safari */
::-moz-selection {
  background: var(--theme-color); }

.all_wrap {
  position: relative;
  overflow: hidden;
  z-index: 100; }

@media (min-width: 851px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.en {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em; }

.cls-1 {
  fill: var(--color) !important;
  -webkit-transition: all 0.3s var(--easeInQuad);
  transition: all 0.3s var(--easeInQuad); }

svg {
  width: 100%;
  height: auto; }

@media screen and (max-width: 800px) {
  .sp_off {
    display: none !Important; } }
/* ==========================================================================
	ヘッダー
========================================================================== */
.head {
  position: relative;
  width: 390px;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  z-index: 10;
  padding: 29px 30px 8px 25px;
  background: var(--base-bg-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  .head h1 {
    width: 335px;
    margin: 0 auto; }

@media screen and (max-width: 1050px) {
  .head {
    margin: 0; } }
@media screen and (max-width: 800px) {
  .head {
    max-width: 800px; } }
/* ==========================================================================
	aside_area
========================================================================== */
.aside_area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/main_bg.webp) center center;
  background-size: cover;
  z-index: 1; }
  .aside_area .l-side_area {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 35.5223880597%;
    max-width: 476px;
    -webkit-transform: translateX(calc(-100% - 195px));
            transform: translateX(calc(-100% - 195px)); }
    .aside_area .l-side_area h2 {
      width: 34.0336134454%; }
  .aside_area .r-side_area {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 35.5223880597%;
    max-width: 479px;
    -webkit-transform: translateX(195px);
            transform: translateX(195px); }
    .aside_area .r-side_area .inr {
      position: relative;
      width: 64.9159663866%;
      aspect-ratio: 618/818; }
    .aside_area .r-side_area a {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 77.6699029126%; }

@media screen and (max-width: 1050px) {
  .aside_area .l-side_area {
    display: none;
    position: absolute; }
  .aside_area .r-side_area {
    width: 479px;
    left: 390px;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@media screen and (max-width: 800px) {
  .aside_area {
    display: none; } }
/* ==========================================================================
	main
========================================================================== */
.main {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  z-index: 150;
  background: var(--base-bg-color); }
  .main .img {
    width: 100%; }
  .main .area {
    position: relative;
    margin: 0 auto; }
  .main .mv {
    position: relative;
    z-index: 50; }
    .main .mv a {
      display: block;
      position: absolute;
      width: calc((274/380)*100%);
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 50; }
  .main .review {
    background: var(--theme-color);
    padding-bottom: 80px;
    /* 疑似バー（中央560pxなど自由に） */ }
    .main .review .scroll-wrap::-webkit-scrollbar {
      display: none; }
    .main .review .drag-scroll {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 30px;
      overflow: scroll;
      cursor: -webkit-grab;
      cursor: grab;
      padding-bottom: 20px;
      padding-left: 30px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      scrollbar-width: none; }
      .main .review .drag-scroll::-webkit-scrollbar {
        display: none; }
      .main .review .drag-scroll.is-dragging {
        cursor: -webkit-grabbing;
        cursor: grabbing;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; }
      .main .review .drag-scroll .card {
        background: #fff;
        padding: 34px 30px 29px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 260px;
                flex: 0 0 260px;
        border-radius: 34px 24px 0 24px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .main .review .drag-scroll .card p {
          font-size: 15px;
          line-height: 32px;
          font-weight: 500; }
        .main .review .drag-scroll .card span {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          width: 99px;
          height: 28px;
          background: #f2f2f2;
          font-size: 13px;
          margin: 8px 0 0 auto;
          border-radius: 14px; }
    .main .review .fake-scrollbar {
      width: 70%;
      height: 4px;
      margin: 18px auto 0;
      background: #fff;
      border-radius: 999px;
      position: relative;
      cursor: pointer; }
    .main .review .fake-scrollbar .fake-thumb {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #FBB03B;
      border-radius: 16px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
  .main .point {
    background: var(--base-bg-color);
    /* 疑似バー（中央560pxなど自由に） */ }
    .main .point .scroll-wrap {
      position: relative; }
      .main .point .scroll-wrap:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 92.3076923077%;
        height: 100%;
        background: #fff;
        z-index: 1; }
      .main .point .scroll-wrap::-webkit-scrollbar {
        display: none; }
    .main .point .drag-scroll {
      position: relative;
      overflow: scroll;
      cursor: -webkit-grab;
      cursor: grab;
      padding-left: 18px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      scrollbar-width: none;
      z-index: 10; }
      .main .point .drag-scroll::-webkit-scrollbar {
        display: none; }
      .main .point .drag-scroll.is-dragging {
        cursor: -webkit-grabbing;
        cursor: grabbing;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; }
      .main .point .drag-scroll .img {
        width: 645px; }
        .main .point .drag-scroll .img img {
          -webkit-user-drag: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none; }
    .main .point .fake-scrollbar {
      position: relative;
      width: 70%;
      height: 4px;
      margin: 18px auto 0;
      background: #ccc;
      border-radius: 999px;
      position: relative;
      cursor: pointer;
      z-index: 10; }
    .main .point .fake-scrollbar .fake-thumb {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: var(--theme-color);
      border-radius: 16px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
  .main .store {
    padding-bottom: 80px;
    background: var(--theme-color); }
    .main .store .store-swiper {
      padding-left: 30px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .main .store .store-swiper .swiper-slide {
        width: 260px; }
      .main .store .store-swiper .card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 8px;
        color: #fff; }
      .main .store .store-swiper .thumb {
        width: 260px;
        aspect-ratio: 1/1;
        border-radius: 16px;
        overflow: hidden; }
      .main .store .store-swiper .ttl {
        font-size: 18px;
        line-height: 28px;
        font-weight: 500; }
      .main .store .store-swiper .txt {
        font-size: 16px;
        line-height: 28px; }
  .main .qa {
    background: var(--theme-color);
    padding-bottom: 80px; }
  .main .qa-list {
    width: 92.3076923077%;
    background: #fff;
    padding: 15px 19.4444444444% 68px 16.6666666667%;
    border-radius: 0 32px 32px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .main .qa-list .qa-box {
      position: relative;
      border-bottom: 1px solid #E6E6E6;
      padding: 30px 0 30px 12px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .main .qa-list .qa-box .c-button {
        cursor: pointer;
        display: block;
        width: 100%; }
        .main .qa-list .qa-box .c-button .q {
          position: absolute;
          font-size: 20px;
          font-weight: 600;
          left: -30px;
          top: 30px;
          color: var(--theme-color); }
        .main .qa-list .qa-box .c-button p {
          font-size: 16px;
          lighting-color: 24px;
          font-weight: 700; }
        .main .qa-list .qa-box .c-button .icon {
          display: block;
          position: absolute;
          right: -27px;
          top: 33px;
          width: 13px;
          -webkit-transition: -webkit-transform .4s ease;
          transition: -webkit-transform .4s ease;
          transition: transform .4s ease;
          transition: transform .4s ease, -webkit-transform .4s ease; }
          .main .qa-list .qa-box .c-button .icon.-y {
            -webkit-transform: rotate(-90deg);
                    transform: rotate(-90deg); }
        .main .qa-list .qa-box .c-button.active .icon {
          -webkit-transform: rotate(180deg);
                  transform: rotate(180deg); }
      .main .qa-list .qa-box .oc_area {
        display: none;
        padding-top: 15px; }
        .main .qa-list .qa-box .oc_area p {
          font-size: 14px;
          line-height: 24px;
          font-weight: 500; }
  .main .map_area {
    position: relative;
    width: 84.6153846154%;
    aspect-ratio: 660/600;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto; }
    .main .map_area iframe {
      display: block;
      width: 100%;
      height: 200%;
      position: absolute;
      top: -50%;
      left: 0; }
  .main .line_area {
    position: relative; }
    .main .line_area .btn01 {
      display: block;
      position: absolute;
      width: calc((163/380)*100%);
      left: calc((120/380)*100%);
      top: calc((450/1860)*100%);
      margin: auto;
      z-index: 10; }
    .main .line_area .btn02 {
      display: block;
      position: absolute;
      width: calc((260/380)*100%);
      left: 0;
      right: 0;
      bottom: calc((130/1860)*100%);
      margin: auto;
      z-index: 10; }

@media screen and (max-width: 1050px) {
  .main {
    margin: 0; } }
@media screen and (max-width: 800px) {
  .mv {
    position: relative; }
    .mv a {
      display: block;
      position: absolute;
      width: calc((274/380)*100%);
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 10;
      opacity: 1;
      -webkit-transition: opacity .28s ease;
      transition: opacity .28s ease;
      will-change: opacity; }

  .main {
    max-width: 800px; }
    .main .mv a {
      width: calc((329/380)*100%);
      opacity: 1; }
      .main .mv a.fix {
        position: fixed;
        -webkit-animation: entry-fade-in .8s ease both;
                animation: entry-fade-in .8s ease both;
        will-change: opacity; }

  @-webkit-keyframes entry-fade-in {
    from {
      opacity: 0; }
    to {
      opacity: 1; } }

  @keyframes entry-fade-in {
    from {
      opacity: 0; }
    to {
      opacity: 1; } } }
.footer {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  z-index: 5; }

@media screen and (max-width: 1050px) {
  .footer {
    margin: 0; } }
@media screen and (max-width: 800px) {
  .footer {
    padding-bottom: 16.8vw; } }

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