@charset "UTF-8";
/* --------------------------------------------------
   _utils.scss
   ユーティリティ向けの共通変数・関数・mixin定義
   （rem変換・ブレークポイント制御）
-------------------------------------------------- */
/* ==========================================================================
   _breakpoints.scss
   各ブレークポイントの管理用マップ
   - メディアクエリの条件指定（mq() mixin など）と連携して使用
   ========================================================================== */
/* ------------------------------
   rem変換用のルートフォントサイズ
------------------------------ */
/* ------------------------------
   px → rem 変換関数
   使用例：u.rem(16) → 1rem
------------------------------ */
/* ------------------------------
   メディアクエリ用 mixin
   min-width 専用
   ブレークポイントは abstracts/breakpoints を参照
   使用例：@include mq(sm) { ... }
------------------------------ */
/* ------------------------------
   メディアクエリ用 mixin
   max-width 専用
   指定ブレークポイント未満用
   ブレークポイントは abstracts/breakpoints を参照
   使用例：@include mq-down(sm) { ... }
------------------------------ */
/* ==================================================
   Kominka LP page styles
================================================== */
.page-kominka {
  --kominka-bg-soft: #f7f4ee;
  --kominka-card-bg: #fbf8f3;
  --kominka-quiet-bg: #f3f0ea;
  --kominka-marker-bg: rgba(215, 153, 77, 0.3);
  --kominka-overlay-strong: rgb(0 0 0 / 0.42);
  --kominka-overlay-mid: rgb(0 0 0 / 0.18);
  --kominka-overlay-none: rgb(0 0 0 / 0);
  --kominka-text-on-image: #fff;
  --kominka-text-shadow: 0 2px 10px rgb(0 0 0 / 0.38);
  --kominka-stay-panel-inset: 50px;
  --kominka-stay-panel-max: 42rem;
  --kominka-flow-arrow-start: 23px;
  --kominka-flow-arrow-end: -10px;
  --kominka-flow-arrow-color: var(--color-text-sub, #666);
  --kominka-flow-arrow-opacity: 0.6;
  --kominka-sp-button-max: 272px;
  --kominka-card-media-min: 220px;
  --marker-bg: var(--kominka-marker-bg, rgba(215, 153, 77, 0.3));
  /* ------------------------------------------
     Header override
     - site-header--drawer-wide 前提
     - 1430px未満はdrawer維持
  ------------------------------------------ */
  /* 古民家：header見た目だけ調整 */
  /* ------------------------------------------
     MV
  ------------------------------------------ */
  /* ------------------------------------------
     Rooms
  ------------------------------------------ */
  /* ------------------------------------------
     Quiet section background
  ------------------------------------------ */
  /* ------------------------------------------
     Guide
  ------------------------------------------ */
  /* ------------------------------------------
     Stay
     - panel box removed globally
     - 1101px以上: image overlaid text
     - 1100px以下: 1column + text below image
  ------------------------------------------ */
  /* ------------------------------------------
     Feature quiet
  ------------------------------------------ */
  /* ------------------------------------------
     Flow
  ------------------------------------------ */
  /* ------------------------------------------
      Reserve
  ------------------------------------------ */
  /* ------------------------------------------
     SP (<=480)
  ------------------------------------------ */
}
.page-kominka .site-title,
.page-kominka .site-title__link {
  white-space: nowrap;
}
.page-kominka .site-title {
  flex-shrink: 0;
}
.page-kominka .site-header.site-header--drawer {
  --nav-panel-bg: var(--color-surface, #fff);
}
@media screen and (max-width: 1429px) {
  .page-kominka .site-header.site-header--drawer .site-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    max-width: 920px;
    margin-inline: auto;
    padding-bottom: var(--dist-24, 24px);
  }
  .page-kominka .site-header.site-header--drawer .site-nav a {
    white-space: normal;
  }
  .page-kominka .site-header.site-header--drawer .site-nav a.site-nav__cta {
    width: clamp(220px, 48vw, 420px);
    min-block-size: var(--touch-target-lg, 56px);
  }
}
@media screen and (min-width: 1430px) {
  .page-kominka .site-header.site-header--drawer .site-nav ul {
    column-gap: clamp(8px, 1vw, 20px);
  }
  .page-kominka .site-header.site-header--drawer .site-nav a {
    white-space: nowrap;
    padding-inline: clamp(6px, 0.7vw, 12px);
  }
}
.page-kominka .mv-links,
.page-kominka .c-cta-block__actions,
.page-kominka .u-force-flex {
  flex-wrap: wrap;
}
.page-kominka .mv-links .c-button,
.page-kominka .c-cta-block__actions .c-button {
  min-inline-size: 0;
}
.page-kominka #rooms.l-section.is-bg-soft {
  background: var(--kominka-bg-soft, #f7f4ee);
}
.page-kominka #rooms .c-card {
  background: var(--kominka-card-bg, #fbf8f3);
}
@media (max-width: 1535px) {
  .page-kominka .l-grid.l-grid--cards-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 999px) {
  .page-kominka .c-points {
    grid-template-columns: 1fr;
  }
  .page-kominka .l-grid.l-grid--cards-3 {
    grid-template-columns: 1fr;
  }
}
.page-kominka .section-quiet {
  background-color: var(--kominka-quiet-bg, #f3f0ea);
  background-image: url("../../img/kominka-wallpaper2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.page-kominka #guide .c-points--guide {
  max-inline-size: var(--measure-wide, 1600px);
  margin-inline: auto;
}
.page-kominka #guide .c-points__title,
.page-kominka #reasons .c-points__title,
.page-kominka #flow .flow-list__title {
  margin: 0;
}
.page-kominka #stay .c-scene {
  --scene-panel-bg: transparent;
  --scene-panel-shadow: none;
}
.page-kominka #stay .c-scene__media {
  position: relative;
  overflow: hidden;
}
.page-kominka #stay .c-scene__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--kominka-overlay-strong) 0%, var(--kominka-overlay-mid) 36%, var(--kominka-overlay-none) 70%);
  pointer-events: none;
  z-index: 1;
}
.page-kominka #stay .c-scene__panel {
  position: absolute !important;
  inset: auto auto var(--dist-50, 50px) var(--dist-50, 50px) !important;
  z-index: 2 !important;
  display: block !important;
  gap: 0 !important;
  inline-size: auto !important;
  max-inline-size: var(--kominka-stay-panel-max) !important;
  min-inline-size: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.page-kominka #stay .c-scene.is-copy-right .c-scene__panel {
  inset: auto var(--dist-50, 50px) var(--dist-50, 50px) auto !important;
}
.page-kominka #stay .c-scene__panel::before,
.page-kominka #stay .c-scene__panel::after {
  content: none !important;
  display: none !important;
}
.page-kominka #stay .c-scene__panel .text-sub,
.page-kominka #stay .c-scene__panel .c-scene__title,
.page-kominka #stay .c-scene__panel .c-scene__text {
  color: var(--kominka-text-on-image) !important;
  text-shadow: var(--kominka-text-shadow);
}
.page-kominka #stay .c-scene__panel .text-sub {
  margin-bottom: var(--dist-6, 6px);
}
.page-kominka #stay .c-scene__panel .c-scene__title {
  margin: 0 0 var(--dist-10, 10px);
}
.page-kominka #stay .c-scene__panel .c-scene__text {
  line-height: 1.65;
}
@media screen and (max-width: 1100px) {
  .page-kominka #stay .c-scene {
    grid-template-columns: 1fr;
    gap: var(--dist-16, 16px);
  }
  .page-kominka #stay .c-scene__media,
  .page-kominka #stay .c-scene__panel {
    width: 100%;
    max-width: none;
    grid-column: auto;
  }
  .page-kominka #stay .c-scene__media {
    aspect-ratio: 3/2;
    border-radius: var(--ui-radius-16, 16px) var(--ui-radius-16, 16px) 0 0;
  }
  .page-kominka #stay .c-scene__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-kominka #stay .c-scene__media::after {
    content: none;
  }
  .page-kominka #stay .c-scene__panel {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    padding: var(--dist-18, 18px) var(--dist-18, 18px) var(--dist-20, 20px) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 0 var(--ui-radius-16, 16px) var(--ui-radius-16, 16px) !important;
    text-shadow: none !important;
  }
  .page-kominka #stay .c-scene__panel .text-sub,
  .page-kominka #stay .c-scene__panel .c-scene__title,
  .page-kominka #stay .c-scene__panel .c-scene__text {
    color: inherit !important;
    text-shadow: none !important;
  }
  .page-kominka #stay .text-sub {
    margin-bottom: 6px;
  }
  .page-kominka #stay .c-scene__title {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .page-kominka #stay .c-scene__text {
    line-height: 1.7;
  }
}
@media (max-width: 979px) {
  .page-kominka .c-feature.is-quiet {
    grid-template-columns: 1fr;
  }
  .page-kominka .c-feature.is-quiet .c-feature__body {
    padding-inline-start: 0;
    max-inline-size: none;
  }
  .page-kominka .c-feature.is-quiet .c-feature__text {
    max-inline-size: none;
  }
}
.page-kominka #flow .flow-list__item {
  position: relative;
}
.page-kominka #flow .flow-list__item:not(:last-child)::after {
  position: absolute;
  inset-inline-start: var(--kominka-flow-arrow-start);
  inset-block-end: var(--kominka-flow-arrow-end);
  font-size: 1rem;
  line-height: 1;
  color: var(--kominka-flow-arrow-color);
  opacity: var(--kominka-flow-arrow-opacity);
  content: "↓";
}
@media screen and (min-width: 1024px) {
  .page-kominka #flow .flow-list {
    grid-template-columns: 1fr;
    column-gap: 0;
    border-top: 1px solid var(--line, #e5e7eb);
  }
  .page-kominka #flow .flow-list__item:nth-child(-n+2) {
    border-top: 0;
  }
}
.page-kominka #reserve .c-cta-block__actions {
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .page-kominka .site-header.site-header--drawer .site-nav ul {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .page-kominka .site-header.site-header--drawer .site-nav li:last-child {
    grid-column: auto;
  }
  .page-kominka .mv-links,
  .page-kominka .c-cta-block__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: stretch;
  }
  .page-kominka .mv-links .c-button,
  .page-kominka .c-cta-block__actions .c-button {
    inline-size: min(100%, var(--kominka-sp-button-max));
    max-inline-size: var(--kominka-sp-button-max);
    justify-content: center;
  }
  .page-kominka #rooms .l-grid.l-grid--cards-3 {
    grid-template-columns: 1fr;
    gap: var(--dist-24, 24px);
  }
  .page-kominka #rooms .c-card {
    height: auto;
  }
  .page-kominka #rooms .c-card__media {
    aspect-ratio: 4/3;
  }
  .page-kominka #rooms .c-card--xxl {
    max-inline-size: none;
    min-block-size: auto;
    padding: var(--dist-20, 20px);
    border-radius: var(--ui-radius-16, 16px);
    --card-pad: 20px;
    --card-media-ratio: 1.5;
    --card-media-min: var(--kominka-card-media-min);
  }
  .page-kominka #rooms .c-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-kominka #rooms .c-card__body {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--dist-16, 16px) var(--dist-18, 18px) var(--dist-22, 22px);
  }
  .page-kominka #rooms .text-sub {
    margin-bottom: 6px;
  }
  .page-kominka #rooms .c-card__title {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .page-kominka #rooms .c-card__text {
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
    line-height: 1.65;
  }
  .page-kominka #stay .c-scene {
    gap: 16px;
  }
  .page-kominka #stay .c-scene__media {
    aspect-ratio: 3/2;
  }
  .page-kominka #stay .c-scene__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .page-kominka #stay .c-scene__text {
    line-height: 1.7;
  }
}

/*# sourceMappingURL=kominka-minshuku.css.map */