/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 04 2025 | 06:32:25 */
<style>
    /* ─── カスタムプロパティ: PC/モバイル用オーバーレイ画像サイズ ─── */
    :root {
      --overlay-pc-width-top-right: 200px;
      --overlay-pc-width-center: 25%;
      --overlay-pc-width-bottom-left: 25%;
      --overlay-pc-width-bottom-right: 25%;
      --overlay-mobile-width: 50%;
      --overlay-mobile-width-bottom-left: 40%;
    }

    /* ─── リセット ─── */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
      width: 100%;
      overflow: visible;
      background-color: #f5f2e1;
      font-family: 'Zen Antique Soft','Noto Sans JP','Montserrat',sans-serif;
      color: #fff;
    }
    a {
      color: inherit;
      text-decoration: none;
    }

    /* ─── フェードイン設定 ─── */
    .section, .hero-section {
      opacity: 0;
      transition: opacity 1.3s ease-in-out;
    }
    .section.visible, .hero-section.visible {
      opacity: 1;
    }

    /* ─── ローディング画面 ─── */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #f5f2e1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 3000;
    }
    #loader .loader-logo {
      width: 120px;
      height: auto;
      margin-bottom: 24px;
    }
    .spinner {
      border: 8px solid rgba(0,0,0,0.1);
      border-top: 8px solid #b03c20;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #loader.fade-out {
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    /* ─── 全体レイアウト ─── */
    .wrapper {
      display: flex;
      height: 100%;
      width: 100%;
    }

    /* ─── モバイルヘッダー ─── */
    .mobile-header {
      display: none;
    }
    .mobile-header img.logo {
      height: 75px;
      width: auto;
      margin-right: 12px;
      margin-top: 50px;
    }

    /* ─── サイドバー ─── */
    .sidebar {
      background: url('https://cdn.shopify.com/s/files/1/0605/4002/7067/files/DSC00342.jpg?v=1746331285') center/cover no-repeat;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-shrink: 0;
      position: relative;
    }
    .sidebar .sidebar-logo {
      display: none;
      position: absolute;
      top: 16px;
      right: 16px;
      width: 240px;
      height: auto;
      z-index: 1001;
    }
    .vertical-text {
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
      text-shadow: 0 0 4px rgba(0,0,0,0.7);
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%) rotate(-90deg);
    }
    .menu {
      list-style: none;
      margin-left: auto;
      margin-right: 40px;
    }
    .menu li + li {
      margin-top: 16px;
    }
    .menu a {
      font-size: 16px;
      font-weight: 400;
      color: #eee;
      text-shadow: 0 0 4px rgba(0,0,0,0.7);
    }
    .menu a:hover {
      color: #fff;
    }
    .sidebar-footer {
      text-align: right;
      font-size: 12px;
      color: #eee;
      margin-right: 20px;
      text-shadow: 0 0 4px rgba(0,0,0,0.7);
    }

    /* ─── コンテンツスクロール ─── */
    .content-wrapper {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      padding-bottom: 56px;
    }
    .hero-section, .section {
      scroll-snap-align: start;
      width: 100%;
      height: 100vh;
    }
    .hero-section img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .section {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #f5f2e1;
      color: #000;
      padding: 40px 60px;
    }

    /* ─── セクション共通 ─── */
    .section-title {
      font-size: 40px;
      font-weight: 500;
      color: #fff;
      -webkit-text-stroke: 1px #b03c20;
      margin-top: 0;
      margin-bottom: 0;
      text-align: left;
    }
    .section h1 {
      font-size: 12px;
      line-height: 1.5;
      margin-top: 16px;
      margin-bottom: 16px;
    }
    .section-image {
      display: none;
      margin-top: 12px;
      width: 100%;
      height: 50%;
      object-fit: cover;
      border: 10px solid #b03c20;
    }

    /* ─── セクション--city（画像オーバーレイ） ─── */
    .section--city {
      position: relative;
      background: #f5f2e1;
      padding: 80px 60px;
      color: #000;
      overflow: hidden;
    }
    .section--city h1 {
      font-size: 12px;
      line-height: 1.5;
      margin-top: 16px;
      margin-bottom: 16px;
    }
    .section--city .overlay {
      position: absolute;
      object-fit: cover;
      cursor: pointer;
      border: 8px solid #b03c20;
      box-shadow: 0 4px 10px rgba(0,0,0,0.9);
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
    @keyframes drift-top-right {
      0%   { transform: translate(0,0); }
      50%  { transform: translate(-15px, 10px); }
      100% { transform: translate(0,0); }
    }
    @keyframes drift-center {
      0%   { transform: translate(-50%, -50%) translate(0,0); }
      50%  { transform: translate(-50%, -50%) translate(20px, -20px); }
      100% { transform: translate(-50%, -50%) translate(0,0); }
    }
    @keyframes drift-bottom-left {
      0%   { transform: translate(0,0); }
      50%  { transform: translate(10px, -15px); }
      100% { transform: translate(0,0); }
    }
    @keyframes drift-bottom-right {
      0%   { transform: translate(0,0); }
      50%  { transform: translate(-10px, -10px); }
      100% { transform: translate(0,0); }
    }
    .overlay.top-right {
      top: 30%;
      right: 2%;
      width: var(--overlay-pc-width-top-right);
      animation-name: drift-top-right;
      animation-duration: 12s;
      animation-delay: 2s;
    }
    .overlay.center {
      top: 40%;
      left: 50%;
      width: var(--overlay-pc-width-center);
      transform: translate(-50%, -50%);
      animation-name: drift-center;
      animation-duration: 14s;
      animation-delay: 0s;
    }
    .overlay.bottom-left {
      top: 65%;
      left: 65%;
      width: 32%;
      animation-name: drift-bottom-left;
      animation-duration: 11s;
      animation-delay: 1s;
    }
    .overlay.bottom-right {
      top: 32%;
      right: 67%;
      width: var(--overlay-pc-width-bottom-right);
      animation-name: drift-bottom-right;
      animation-duration: 13s;
      animation-delay: 3s;
    }

    /* ─── セクション--map（アクセス） ─── */
    .section--map .map-container {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      position: relative;
      margin-top: 16px;
      margin-bottom: 16px;
    }
    .section--map .map-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .section--map p {
      font-size: 14px;
      color: #000;
      margin-top: 8px;
    }

    /* ─── モーダル ─── */
    .modal {
      display: none;
      opacity: 0;
      position: fixed;
      z-index: 2000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      transition: opacity 0.4s ease-in-out;
    }
    .modal.show {
      display: flex;
      opacity: 1;
    }
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: 32px;
      color: #fff;
      cursor: pointer;
      z-index: 2001;
    }
    .modal-card {
      background: #fff;
      border-radius: 8px;
      border: 10px solid #b03c20;
      max-width: 90%;
      width: 400px;
      padding: 24px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      text-align: left;
      position: relative;
    }
    .modal-card img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .modal-card h3 {
      margin: 0 0 8px 0;
      font-size: 24px;
      color: #333;
    }
    .modal-card p {
      margin: 0;
      font-size: 16px;
      color: #555;
    }

    /* ─── 固定フッター ─── */
    .fixed-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 56px;
      background: transparent;
      display: flex;
      align-items: center;
      padding: 0 16px;
      justify-content: flex-end;
      z-index: 1000;
    }
    .footer-logo {
      height: 65px;
      width: auto;
      margin-bottom: 30px;
    }
    .footer-links {
      display: none;
      align-items: center;
    }
    .footer-links a {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #fff;
      margin-right: 16px;
    }
    .footer-icon {
      width: 32px;
      height: auto;
      margin-right: 6px;
    }

    /* ─── ページカウンター ─── */
    .page-counter {
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-size: 32px;
      color: #000;
      background: transparent;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 700;
      z-index: 1000;
    }

    /* ─── PC レイアウト ─── */
    @media screen and (min-width: 769px) {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 40%;
        border-right: 10px solid #b03c20;
      }
      .sidebar .sidebar-logo {
        display: block;
      }
      .content-wrapper {
        margin-left: 40%;
      }
      .hero-section {
        display: none !important;
      }
      .page-counter {
        display: block;
      }
      .section-title {
        font-size: 43px;
      }
      .section-image {
        display: block;
      }
      .section h1 {
        font-size: 16px;
      }

      /* フッターロゴを左寄せ */
      .fixed-footer {
        justify-content: flex-start;
        padding-left: 16px;
      }
      /* Instagramリンクを画面右上に固定表示 */
      .footer-links {
        display: flex;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 2000;
      }
    }

    /* ─── モバイルレイアウト ─── */
    @media screen and (max-width: 768px) {
      .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        padding: 0 16px;
        z-index: 2;
      }
      .sidebar {
        display: none;
      }
      .hero-section {
        display: block;
        position: relative;
        margin-top: -56px;
        z-index: 1;
      }
      .wrapper {
        flex-direction: column;
        height: 100%;
      }
      .content-wrapper {
        margin: 0;
        padding-top: 56px;
        padding-bottom: 56px;
      }
      .section h1 {
        font-size: 12px;
      }
      .section-image {
        display: block;
        order: 0;
        margin-bottom: 16px;
        height: 30%;
      }
      .page-counter {
        display: block;
        position: fixed;
        top: 16px;
        right: 16px;
        font-size: 24px;
        color: #000;
        background: transparent;
        padding: 6px 12px;
        border-radius: 4px;
        font-weight: 700;
        z-index: 1001;
      }
      .section:first-of-type {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .section:first-of-type header {
        order: 0;
        margin-bottom: 8px;
      }
      .section:first-of-type .section-title {
        order: 1;
        margin-bottom: 0;
      }
      .section:first-of-type h1 {
        order: 2;
        margin-top: 0;
      }
      .section:first-of-type footer {
        display: none;
      }
      .section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;
      }
      .section h1 {
        text-align: left;
        margin: 0;
      }
      .section-title {
        font-size: 20px;
        margin-bottom: 16px;
      }

      .section--city .overlay {
        border: 6px solid #b03c20;
        box-shadow: 0 2px 6px rgba(0,0,0,0.9);
        max-width: var(--overlay-mobile-width);
        height: auto;
      }
      .section--city .overlay.top-right {
        top: 10%;
        right: 16px;
        max-width: var(--overlay-mobile-width);
      }
      .section--city .overlay.center {
        top: 20%;
        left: 20%;
        max-width: var(--overlay-mobile-width);
      }
      .section--city .overlay.bottom-left {
        top: 70%;
        left: 10%;
        max-width: var(--overlay-mobile-width-bottom-left);
      }
      .section--city .overlay.bottom-right {
        top: 70%;
        right: 10%;
        max-width: var(--overlay-mobile-width);
      }

      .section--city .section-title {
        text-align: left !important;
      }
      .section--map .map-container {
        margin-top: 12px;
        margin-bottom: 12px;
      }

      .fixed-footer {
        justify-content: space-between;
      }
      .footer-links {
        display: flex;
      }
      .fixed-footer img.footer-logo {
        margin-bottom: 30px;
      }
    }
  </style>