@charset "UTF-8";
/* =========================================================
   北海道フェア（雲仙みかどホテル）
   デザイン：20261015_北海道フェアページ.ai
   PC：アートボード1600px の数値を px でそのまま使用（本文カラム980px）
   SP：アートボード750px の数値 × var(--u)（= 100cqw / 750）で画面幅に比例
   ※ 既存サイトのCSSと衝突しないよう .hf 配下に限定
   ========================================================= */

.hf {
  --gold: #b69541;
  --text: #313131;
  --sans: "Noto Sans JP", sans-serif;
  --serif: "Noto Serif JP", serif;
  display: block;
  container-type: inline-size;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
/* リセット：詳細度を (0,1,0) にそろえる。
   既存サイトの要素指定（p, h2 など）には勝ち、後に書く各パーツの指定には負ける */
.hf, .hf :where(*), .hf :where(*)::before, .hf :where(*)::after { box-sizing: border-box; }
.hf :where(h1, h2, h3, p, ul, li, figure, picture) {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;
}
/* 既存サイトの class.css は section / article / div / a などに font-weight: normal を指定しているため、
   中間の要素で本文の太さ(500)が400に戻らないよう継承させる */
.hf :where(section, article, div, a, span) { font-weight: inherit; }
.hf :where(h1, h2, h3, p, li)::before, .hf :where(h1, h2, h3, p, li)::after { content: none; }
.hf :where(ul) { list-style: none; }
.hf :where(img) { display: block; max-width: 100%; height: auto; border: 0; }
.hf :where(a) { display: block; color: inherit; text-decoration: none; }
.hf .sp { display: none; }

.hf-txt,
.hf-lead, .hf-sub, .hf-band, .hf-dish__ttl {
  font-feature-settings: "palt";
  line-break: strict;
  overflow-wrap: anywhere;
  letter-spacing: var(--ls);
}
/* 中央揃えの行は末尾の字間ぶん左に寄るため、同じ量を左に足して中心を合わせる */
.hf-intro__txt, .hf-lead, .hf-sub, .hf-band, .hf-dish__ttl, .hf-dish__body .hf-txt {
  padding-left: var(--ls);
}

/* ---------- KV ---------- */
.hf-kv img { width: 100%; }

/* ---------- 本文エリア（和紙背景） ---------- */
.hf-body {
  position: relative;
  overflow: hidden;
  background: #f9f6ee url(../../event/images/bg_washi.jpg) repeat;
  background-size: 810.694px 575.455px;
  background-position: 0 -51.365px;
  padding-bottom: 100px;
}
.hf-body > * { position: relative; }

/* 透かしロゴ（白40%） */
.hf .hf-wm {
  position: absolute;
  width: 380.59px;
  height: 307.01px;
  color: #fff;
  opacity: .4;
  pointer-events: none;
}
.hf-wm--r { top: 869px;  left: calc(50% - 490px + 993.53px); }
.hf-wm--l { top: 2521px; left: calc(50% - 490px - 380.47px); }

.hf-intro, .hf-shop {
  width: 980px;
  max-width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
}

/* 共通：みかどアイコン */
.hf-icon { width: 64px; margin: 0 auto; }

/* 共通：本文 16px / 行送り36px */
.hf-txt {
  font-size: 16px;
  line-height: 36px;
  --ls: .05em;
}

/* ---------- イントロ ---------- */
.hf-intro { padding-top: 109.4px; text-align: center; }
.hf-lead {
  margin-top: 19.74px;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  --ls: .2em;
}
.hf-intro__txt { margin-top: 14.46px; }

.hf-shops {
  display: flex;
  justify-content: space-between;
  margin-top: 72.9px;
}
.hf-shops li { width: calc((100% - 20px) / 2); }
.hf-shops a { transition: opacity .3s; }
.hf-shops a:hover { opacity: .8; }
.hf-shops img { width: 100%; }

/* ---------- 店舗見出し帯 ---------- */
.hf-shop { margin-top: 119px; }
.hf-shop--sennagi { margin-top: 114.9px; }
.hf-band {
  height: 60px;
  background: var(--gold);
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 54.4px;
  --ls: .22em;
}

/* ---------- 写真（金枠・角丸） ---------- */
.hf-photo {
  position: relative;
  overflow: hidden;
  width: calc(100% + 2px);
  margin-left: -1px;
  border: 2px solid var(--gold);
  border-radius: 21px;
  background: #dcdddd;
}
.hf-photo img {
  /* デザインと同じく、写真は線の中心まで敷いて上から線を重ねる（線の内側に縮めない） */
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
}
.hf-photo--course { margin-top: 39px; aspect-ratio: 982 / 736; }

.hf-sub {
  margin-top: 33.67px;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  --ls: .2em;
  text-align: center;
}
.hf-course__txt { margin-top: 14.45px; }

/* ---------- せんなぎ：料理 ---------- */
.hf-dishes { margin-top: 39px; }
.hf-dish {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hf-dish + .hf-dish { margin-top: 38px; }
.hf-dish--rev { flex-direction: row-reverse; }
.hf-dish .hf-photo {
  flex: none;
  width: calc(48.979% + 2px);
  margin: 0 -1px;
  aspect-ratio: 482 / 362;
}
.hf-dish__body {
  width: 46.939%;
  padding-top: 48.44px;  /* 写真枠の外側上端からアイコンまで（デザイン値） */
  text-align: center;
}
.hf-dish__body--low { padding-top: 58.44px; }
.hf-dish__ttl {
  margin-top: 14.79px;
  color: #000;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  --ls: .095em;
}
.hf-dish__body .hf-txt { margin-top: 28.45px; }



/* ---------- 予約ボタン（TOPのInstagramボタン .boxLinkBtn を踏襲） ---------- */
/* 見た目・ホバー・矢印は base.css の .boxLinkBtn をそのまま使い、ここでは長いラベル用の幅と余白だけ調整する */
.hf .hf-btn {
  margin-top: 50px;
  line-height: 1;
  letter-spacing: .05em;
  font-feature-settings: "palt";
}
.hf .hf-btn a {
  width: 420px;
  max-width: 100%;
}

/* =========================================================
   SP（〜768px）：750pxアートボードの数値 × --u
   ========================================================= */
@media screen and (max-width: 1000px) {
  .hf { --u: calc(100vw / 750); }
  @supports (container-type: inline-size) {
    .hf > * { --u: calc(100cqw / 750); }
  }
  .hf .sp { display: inline; }
  .hf br.sp { display: initial; }
  .hf .pc { display: none; }

  .hf-body {
    background-size: calc(810.694 * var(--u)) calc(575.455 * var(--u));
    background-position: calc(95.696 * var(--u)) calc(-51.365 * var(--u));
    padding-bottom: calc(150 * var(--u));
  }
  .hf .hf-wm { display: none; }

  .hf-intro, .hf-shop {
    width: calc(670 * var(--u));
    max-width: none;
  }
  .hf-shop { margin-left: calc(39.5 * var(--u)); }   /* デザインのカラム位置 39.5〜709.5 */

  .hf-icon { width: calc(96 * var(--u)); height: calc(77.92 * var(--u)); object-fit: cover; object-position: top; }

  .hf-txt {
    font-size: calc(32 * var(--u));
    line-height: calc(58 * var(--u));
    --ls: .05em;
  }

  .hf-intro { padding-top: calc(122.08 * var(--u)); }
  .hf-lead {
    margin-top: calc(52.29 * var(--u));
    font-size: calc(48 * var(--u));
    line-height: calc(60 * var(--u));
    --ls: .2em;
  }
  .hf-intro__txt { margin-top: calc(45.05 * var(--u)); }

  .hf-shops {
    display: block;
    margin-top: calc(147.87 * var(--u));
  }
  .hf-shops li { width: 100%; }
  .hf-shops li + li { margin-top: calc(61.4 * var(--u)); }

  .hf-shop { margin-top: calc(181.6 * var(--u)); }
  .hf-shop--sennagi { margin-top: calc(154.84 * var(--u)); }
  .hf-band {
    height: calc(60 * var(--u));
    font-size: calc(36 * var(--u));
    line-height: calc(56 * var(--u));
    --ls: .1em;
    padding-left: calc(var(--ls) + 11 * var(--u));   /* デザインでは文字が5.5px右寄り */
  }

  .hf-photo {
    width: calc(674 * var(--u));
    margin-left: calc(-2 * var(--u));
    border-width: calc(4 * var(--u));
    border-radius: calc(22 * var(--u));
  }
  .hf-photo img {
    top: calc(-2 * var(--u));
    left: calc(-2 * var(--u));
    width: calc(100% + 4 * var(--u));
    height: calc(100% + 4 * var(--u));
  }
  .hf-photo--course { margin-top: calc(58 * var(--u)); aspect-ratio: 674 / 506; }

  .hf-sub {
    width: calc(750 * var(--u));      /* デザイン上 670px 枠をはみ出す行があるため全幅 */
    margin-left: calc(-40 * var(--u));
    margin-top: calc(54.3 * var(--u));
    font-size: calc(48 * var(--u));
    line-height: calc(60 * var(--u));
    --ls: .2em;
  }
  .hf-course__txt { margin-top: calc(44.92 * var(--u)); }

  .hf-dishes { margin-top: calc(58 * var(--u)); }
  .hf-dish,
  .hf-dish--rev { display: block; }
  /* 料理同士の間隔はデザイン上で不揃い（実測値どおり） */
  .hf-dish:nth-child(2) { margin-top: calc(85.83 * var(--u)); }
  .hf-dish:nth-child(3) { margin-top: calc(85.83 * var(--u)); }
  .hf-dish:nth-child(4) { margin-top: calc(87.83 * var(--u)); }
  .hf-dish:nth-child(5) { margin-top: calc(83.83 * var(--u)); }
  .hf-dish .hf-photo {
    width: calc(674 * var(--u));
    margin: 0 0 0 calc(-2 * var(--u));
    aspect-ratio: 674 / 506;
  }
  .hf-dish__body,
  .hf-dish__body--low {
    width: calc(750 * var(--u));
    margin-left: calc(-40 * var(--u));
    padding-top: 0;
  }
  .hf-dish__body .hf-icon { margin-top: calc(64.08 * var(--u)); }
  .hf-dish__ttl {
    margin-top: calc(52.27 * var(--u));
    font-size: calc(48 * var(--u));
    line-height: calc(60 * var(--u));
    --ls: -.005em;
  }
  .hf-dish__body .hf-txt { margin-top: calc(43.95 * var(--u)); }


  /* 予約ボタン：既存SP（base.css）の余白 35px を踏襲。長いラベルは折り返し可 */
  .hf .hf-btn { margin-top: 35px; }
  .hf .hf-btn a { width: min(100%, 420px); padding: 15px 18px 15px 22px; }
  .hf .hf-btn a span.boxLinkBtnLabel {
    position: static;
    transform: none;
    flex: 1;
    padding-left: 22px;                /* 右の矢印と同じ幅だけ左を空けて、文字を中央に見せる */
    text-align: center;
    font-size: clamp(13px, 4vw, 16px);     /* 375pxで15px、414px以上で16px（既存SPと同じ1rem） */
    line-height: 1.4;
    white-space: normal;
  }
  .hf .hf-btn a span.iconArrow { width: 22px; flex: none; }
}

/* =========================================================
   既存サイト（prd）との接続用
   ========================================================= */
/* footer の上余白（base.css: 150px）。本文の和紙背景がそのままフッターに接する */
body#pageEvent footer { margin-top: 0; }