@charset "UTF-8";

/* LP は全幅。テンプレの wrapper の最大幅・左右余白を解除する */
#new-contents.wrapper {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

#id26awlook10 {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  background: transparent;
  color: #443733;
  font-family: "Noto Sans JP", sans-serif;
}
#id26awlook10 *,
#id26awlook10 *::before,
#id26awlook10 *::after { box-sizing: border-box; }
#id26awlook10 section,
#id26awlook10 h2,
#id26awlook10 p { margin: 0; padding: 0; }
#id26awlook10 a { text-decoration: none; }
/* 背景はこの帯の中だけに描く。固定に見せる処理は .js のときだけ行う（下） */
#id26awlook10 .lb-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* JSが無いときの代替。帯の外には出ない */
  pointer-events: none;
}

/* 固定背景はJSでこの帯の見えている範囲だけに切り抜く。
   初回の切り抜き前に共通ヘッダー・フッターを覆わないよう、初期状態は非表示にする。 */
.js #id26awlook10 .lb-bg {
  position: fixed;
  background-attachment: scroll;
  clip-path: inset(0 0 100% 0);
}
#id26awlook10 .lb-inner { width: var(--w); margin-inline: auto; position: relative; height: 100%; }
#id26awlook10 .lb-photo { position: absolute; display: block; overflow: hidden; }
#id26awlook10 .lb-group { position: absolute; display: block; }
#id26awlook10 a.lb-photo img,
#id26awlook10 a.lb-group img { transition: opacity .3s; }
#id26awlook10 a.lb-photo:hover img,
#id26awlook10 a.lb-group:hover img { opacity: .7; }
/* 画像共通の display: block（詳細度1,1,1）に勝つよう、出し分けを1,2,1に上げる。 */
#id26awlook10 .lb-photo img.lb-img--sp { display: none; }
#id26awlook10 .lb-photo img,
#id26awlook10 video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#id26awlook10 .lb-photo video { pointer-events: none; }
#id26awlook10 .lb-vi {
  position: absolute;
  right: calc(15 * var(--u));
  bottom: calc(15 * var(--u));
  width: calc(102 * var(--u));
  height: calc(26 * var(--u));
  border: 1px solid rgba(255,255,255,.855);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12 * var(--u));
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color .3s, border-color .3s;
}
#id26awlook10 .lb-vi svg { flex: none; width: calc(15 * var(--u)); height: calc(9 * var(--u)); }
#id26awlook10 a:hover .lb-vi,
#id26awlook10 a:focus-visible .lb-vi { background: #A38888; border-color: #A38888; }
#id26awlook10 .lb-lead { position: relative; width: 100%; background: rgba(123,103,103,.5); color: #fff; text-align: center; }
#id26awlook10 .lb-lead h2 { position: absolute; width: 100%; font-family: "Poppins", sans-serif; font-weight: 500; line-height: 1.3; letter-spacing: .2em; text-indent: .2em; }
#id26awlook10 .lb-lead p { position: absolute; width: 100%; font-weight: 400; }
#id26awlook10 .lb-other p { position: absolute; text-align: center; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; white-space: nowrap; line-height: 2.5; letter-spacing: .25em; text-indent: .25em; }

@media (min-width:769px) {
#id26awlook10 { --w: min(1400px, calc(100vw - 40px)); --u: calc(var(--w) / 1400); }
#id26awlook10 .lb-bg { background-image: url("../img/bg/bg-pc.webp"); }
#id26awlook10 .lb-mv { width: 100%; aspect-ratio: 1600/971; }
#id26awlook10 .lb-mv__pc { display: block; }
#id26awlook10 .lb-mv__sp { display: none; }
#id26awlook10 .lb-lead { height: calc(313 * var(--u)); }
/* Figmaの箱は文字ぴったりのため、行送りの余白分を引いて文字の位置を合わせた。 */
#id26awlook10 .lb-lead h2 { top: calc(91 * var(--u)); font-size: calc(30 * var(--u)); }
#id26awlook10 .lb-lead p { top: calc(151 * var(--u)); font-size: calc(14 * var(--u)); line-height: 2.2; letter-spacing: .25em; text-indent: .25em; }
#id26awlook10 .lb-look--01 { margin-top: calc(229 * var(--u)); height: calc(1540 * var(--u)); }
#id26awlook10 .lb-look--02 { margin-top: calc(300 * var(--u)); height: calc(1540 * var(--u)); }
#id26awlook10 .lb-other { margin-top: calc(300 * var(--u)); height: calc(684 * var(--u)); }
#id26awlook10 .lb-look--03 { margin-top: calc(294 * var(--u)); height: calc(2087 * var(--u)); }
#id26awlook10 .lb-look--04 { margin-top: calc(300 * var(--u)); height: calc(1540 * var(--u)); }
#id26awlook10 .lb-movie { margin-top: calc(300 * var(--u)); height: calc(486 * var(--u)); }
#id26awlook10 .lb-look--05 { margin-top: calc(300 * var(--u)); height: calc(782 * var(--u)); }
#id26awlook10 .lb-closing { margin-top: calc(300 * var(--u)); height: calc(320 * var(--u)); }
#id26awlook10 .footer { margin-top: calc(300 * var(--u)); }
#id26awlook10 .lb-look--01 .lb-photo--a { left: calc(640 * var(--u)); top: calc(0 * var(--u)); width: calc(760 * var(--u)); height: calc(1141 * var(--u)); }
#id26awlook10 .lb-look--01 .lb-photo--b { left: calc(0 * var(--u)); top: calc(820 * var(--u)); width: calc(480 * var(--u)); height: calc(720 * var(--u)); }
#id26awlook10 .lb-look--02 .lb-photo--a { left: calc(0 * var(--u)); top: calc(0 * var(--u)); width: calc(760 * var(--u)); height: calc(1140 * var(--u)); }
#id26awlook10 .lb-look--02 .lb-photo--b { left: calc(920 * var(--u)); top: calc(820 * var(--u)); width: calc(480 * var(--u)); height: calc(720 * var(--u)); }
#id26awlook10 .lb-other .lb-photo { left: calc(460 * var(--u)); top: calc(0 * var(--u)); width: calc(480 * var(--u)); height: calc(320 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--a { left: calc(320 * var(--u)); top: calc(0 * var(--u)); width: calc(760 * var(--u)); height: calc(1141 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-group--bc { left: calc(420 * var(--u)); top: calc(1341 * var(--u)); width: calc(560 * var(--u)); height: calc(746 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--b { left: 0; top: 0; width: calc(560 * var(--u)); height: calc(373 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--c { left: 0; top: calc(373 * var(--u)); width: calc(560 * var(--u)); height: calc(373 * var(--u)); }
#id26awlook10 .lb-look--04 .lb-photo--a { left: calc(640 * var(--u)); top: calc(0 * var(--u)); width: calc(760 * var(--u)); height: calc(1141 * var(--u)); }
#id26awlook10 .lb-look--04 .lb-photo--b { left: calc(0 * var(--u)); top: calc(820 * var(--u)); width: calc(480 * var(--u)); height: calc(720 * var(--u)); }
#id26awlook10 .lb-movie .lb-photo { left: calc(300 * var(--u)); top: calc(0 * var(--u)); width: calc(800 * var(--u)); height: calc(486 * var(--u)); }
#id26awlook10 .lb-look--05 .lb-photo--a { left: calc(180 * var(--u)); top: calc(0 * var(--u)); width: calc(521 * var(--u)); height: calc(782 * var(--u)); }
/* Figmaでは a=782 / b=780 と下端が2pxずれているため、八百指示（2026-10-11）で b を 782 にして下端をそろえた。 */
#id26awlook10 .lb-look--05 .lb-photo--b { left: calc(700 * var(--u)); top: calc(0 * var(--u)); width: calc(520 * var(--u)); height: calc(782 * var(--u)); }
#id26awlook10 .lb-closing .lb-photo { left: calc(460 * var(--u)); top: calc(0 * var(--u)); width: calc(480 * var(--u)); height: calc(320 * var(--u)); }
/* Figmaの箱は文字ぴったりのため、行送りの余白分を引いて文字の位置を合わせた。 */
#id26awlook10 .lb-other p { left: calc(565 * var(--u)); top: calc(604 * var(--u)); width: calc(270 * var(--u)); font-size: calc(20 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--c .lb-vi { width: calc(73 * var(--u)); height: calc(18 * var(--u)); font-size: calc(8.6 * var(--u)); right: calc(11 * var(--u)); bottom: calc(11 * var(--u)); padding: 0 calc(9 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--c .lb-vi svg { width: calc(3 * var(--u)); height: calc(6 * var(--u)); }
}

@media (max-width:768px) {
#id26awlook10 { --w: 100%; --u: calc(100vw / 393); }
#id26awlook10 .lb-bg { background-image: url("../img/bg/bg-sp.webp"); }
#id26awlook10 .lb-mv { width: 100%; aspect-ratio: 393/590; }
#id26awlook10 .lb-mv__pc { display: none; }
#id26awlook10 .lb-mv__sp { display: block; }
#id26awlook10 .lb-lead { height: calc(228 * var(--u)); }
/* Figmaの箱は文字ぴったりのため、行送りの余白分を引いて文字の位置を合わせた。 */
#id26awlook10 .lb-lead h2 { top: calc(68 * var(--u)); font-size: calc(24 * var(--u)); }
/* Figmaの箱は文字ぴったりのため、行送りの余白分を引いて文字の位置を合わせた。 */
#id26awlook10 .lb-lead p { top: calc(114 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.8; letter-spacing: .15em; text-indent: .15em; }
#id26awlook10 .lb-look--01 { margin-top: calc(96 * var(--u)); height: calc(875 * var(--u)); }
#id26awlook10 .lb-look--02 { margin-top: calc(100 * var(--u)); height: calc(875 * var(--u)); }
#id26awlook10 .lb-other { margin-top: calc(100 * var(--u)); height: calc(299 * var(--u)); }
#id26awlook10 .lb-look--03 { margin-top: calc(100 * var(--u)); height: calc(980 * var(--u)); }
#id26awlook10 .lb-look--04 { margin-top: calc(100 * var(--u)); height: calc(875 * var(--u)); }
#id26awlook10 .lb-movie { margin-top: calc(100 * var(--u)); height: calc(194 * var(--u)); }
#id26awlook10 .lb-look--05 { margin-top: calc(100 * var(--u)); height: calc(842 * var(--u)); }
#id26awlook10 .lb-closing { margin-top: calc(100 * var(--u)); height: calc(153 * var(--u)); }
#id26awlook10 .footer { margin-top: calc(100 * var(--u)); }
#id26awlook10 .lb-look--01 .lb-photo--a { left: calc(52 * var(--u)); top: calc(0 * var(--u)); width: calc(321 * var(--u)); height: calc(482 * var(--u)); }
#id26awlook10 .lb-look--01 .lb-photo--b { left: calc(24 * var(--u)); top: calc(530 * var(--u)); width: calc(230 * var(--u)); height: calc(345 * var(--u)); }
#id26awlook10 .lb-look--02 .lb-photo--a { left: calc(20 * var(--u)); top: calc(0 * var(--u)); width: calc(321 * var(--u)); height: calc(482 * var(--u)); }
#id26awlook10 .lb-look--02 .lb-photo--b { left: calc(139 * var(--u)); top: calc(530 * var(--u)); width: calc(230 * var(--u)); height: calc(345 * var(--u)); }
#id26awlook10 .lb-other .lb-photo { left: calc(81 * var(--u)); top: calc(0 * var(--u)); width: calc(231 * var(--u)); height: calc(153 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--a { left: calc(56 * var(--u)); top: calc(0 * var(--u)); width: calc(281 * var(--u)); height: calc(420 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-group--bc { left: calc(24 * var(--u)); top: 0; width: calc(345 * var(--u)); height: calc(460 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--b { left: 0; top: 0; width: calc(345 * var(--u)); height: calc(230 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--c { left: 0; top: calc(230 * var(--u)); width: calc(345 * var(--u)); height: calc(230 * var(--u)); }
#id26awlook10 .lb-look--04 .lb-photo--a { left: calc(52 * var(--u)); top: calc(0 * var(--u)); width: calc(321 * var(--u)); height: calc(482 * var(--u)); }
#id26awlook10 .lb-look--04 .lb-photo--b { left: calc(24 * var(--u)); top: calc(530 * var(--u)); width: calc(230 * var(--u)); height: calc(345 * var(--u)); }
#id26awlook10 .lb-movie .lb-photo { left: calc(36 * var(--u)); top: calc(0 * var(--u)); width: calc(321 * var(--u)); height: calc(194 * var(--u)); }
#id26awlook10 .lb-look--05 .lb-photo--a { left: calc(24 * var(--u)); top: calc(0 * var(--u)); width: calc(270 * var(--u)); height: calc(405 * var(--u)); }
#id26awlook10 .lb-look--05 .lb-photo--b { left: calc(99 * var(--u)); top: calc(437 * var(--u)); width: calc(270 * var(--u)); height: calc(405 * var(--u)); }
#id26awlook10 .lb-closing .lb-photo { left: calc(81 * var(--u)); top: calc(0 * var(--u)); width: calc(231 * var(--u)); height: calc(153 * var(--u)); }
#id26awlook10 .lb-other p { left: calc(24 * var(--u)); top: calc(223 * var(--u)); width: calc(345 * var(--u)); font-size: calc(15 * var(--u)); }
#id26awlook10 .lb-look__g1 { position: relative; height: calc(420 * var(--u)); }
#id26awlook10 .lb-look__g2 { position: relative; height: calc(460 * var(--u)); margin-top: calc(100 * var(--u)); }
/* SPでも画像共通の display: block より詳細度を上げ、PC/SP画像を確実に切り替える。 */
#id26awlook10 .lb-photo img.lb-img--pc { display: none; }
#id26awlook10 .lb-photo img.lb-img--sp { display: block; }
#id26awlook10 .lb-vi { width: calc(80 * var(--u)); height: calc(24 * var(--u)); font-size: calc(9.5 * var(--u)); right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); padding: 0 calc(9 * var(--u)); }
#id26awlook10 .lb-vi svg { width: calc(4 * var(--u)); height: calc(7 * var(--u)); }
#id26awlook10 .lb-look--03 .lb-photo--c .lb-vi { width: calc(80 * var(--u)); height: calc(24 * var(--u)); font-size: calc(9.5 * var(--u)); right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); padding: 0 calc(9 * var(--u)); }
}

/* ============================================================
   フッターのInstagram帯（Figma 198:566 内の GROUP footer / 1600×285）
   PC実値: 帯 #F6F3F5 / コンテナ 800×125（1600の中央）/ 上下パディング 80
           ロゴ 116×116、右ブロックとの間 40、右ブロック幅 644
           ハンドル Noto Sans JP 700 24px lh24 #222
           本文     Noto Sans JP 400 16px lh25.6 #222（ハンドルから40）
           リンク   Noto Sans JP 400 16px lh16 下線（ハンドルから108）
   ※SPはデザイン未提供のため、PCの体裁を縦積みにして流用している
   ============================================================ */
#id26awlook10 .footer { width: 100%; background-color: #F6F3F5; }
#id26awlook10 .footer__ig-icon { display: none; }
#id26awlook10 .footer__ig-text--sp { display: none; }

#id26awlook10 .footer__ig-inner {
  display: flex;
  align-items: flex-start;
}
#id26awlook10 .footer__ig-logo { max-width: none; border-radius: 50%; }
#id26awlook10 .footer__ig-body { display: block; }
#id26awlook10 .footer__ig-handle {
  display: block;
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
#id26awlook10 .footer__ig-at { font-weight: 700; }
#id26awlook10 .footer__ig-text {
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
#id26awlook10 .footer__ig-link {
  display: inline-block;
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (min-width: 769px) {
  #id26awlook10 .footer__inner { width: calc(800 * var(--u)); margin-inline: auto; padding: calc(80 * var(--u)) 0; }
  #id26awlook10 .footer__ig-logo { width: calc(116 * var(--u)); height: calc(116 * var(--u)); }
  #id26awlook10 .footer__ig-inner { gap: calc(40 * var(--u)); }
  #id26awlook10 .footer__ig-body { width: calc(644 * var(--u)); }
  #id26awlook10 .footer__ig-handle { font-size: calc(24 * var(--u)); line-height: 1; }
  #id26awlook10 .footer__ig-text { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.6; }
  #id26awlook10 .footer__ig-link { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1; }
  #id26awlook10 .footer__ig-text--sp { display: none; }
}

@media (max-width: 768px) {
  #id26awlook10 .footer__inner { width: 100%; padding: calc(40 * var(--u)) calc(24 * var(--u)); }
  #id26awlook10 .footer__ig-inner { flex-direction: column; align-items: center; gap: calc(16 * var(--u)); text-align: center; }
  #id26awlook10 .footer__ig-logo { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
  #id26awlook10 .footer__ig-body { width: 100%; }
  #id26awlook10 .footer__ig-handle { font-size: calc(18 * var(--u)); line-height: 1; }
  #id26awlook10 .footer__ig-text { margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.8; }
  #id26awlook10 .footer__ig-text--pc { display: none; }
  #id26awlook10 .footer__ig-text--sp { display: block; }
  #id26awlook10 .footer__ig-link { margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; }
}

/* ============================================================
   26awlook10 出現アニメーション
   出現アニメーションの値:
     フェード  … opacity 0→1 のみ（移動なし） / 1s ease
     スライド  … translateX(-20px / +20px)→0 + opacity 0→1 / 1s ease
     マスク    … clip-path inset(0 100% 0 0)→inset(0 0 0 0) / 1.2s cubic-bezier(.25,.46,.45,.94)
     発火位置  … 要素の上端が画面の85%に来たら（once）
   JS無効時は常に表示（.js が付いた時だけ初期状態を隠す）
   ============================================================ */

#id26awlook10 {
  --anim-dur: 1s;
  --anim-ease: ease;
  /* マスクは1.2s。イージングは二次のイーズアウト（power1.out 相当）。
     その実際の動きに合わせ、CSSでは下記のベジェ曲線を使う。 */
  --mask-dur: 1.2s;
  --mask-ease: cubic-bezier(.25, .46, .45, .94);
  --slide: 20px;   /* 左右スライドの移動量 */
}

/* ---- 初期状態（JSあり & 未出現のときだけ） ---- */
.js #id26awlook10 [data-anim]:not(.is-inview) { opacity: 0; }

.js #id26awlook10 [data-anim] {
  transition:
    opacity var(--anim-dur) var(--anim-ease),
    transform var(--anim-dur) var(--anim-ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

/* マスクと不透明度を同じ duration・ease で動かす。
   写真が透明なうちにマスクだけ開ききり、ワイプが見えなくなることを防ぐ。 */
.js #id26awlook10 [data-anim="wipe"] {
  transition: opacity var(--mask-dur) var(--mask-ease);
  transition-delay: var(--d, 0s);
}

/* 🔴 clip-path は「中の画像」に当てる。監視している要素自体を幅0に切ると
   IntersectionObserver の交差面積が0になり、発火しなくなる */
.js #id26awlook10 [data-anim="wipe"] > img,
.js #id26awlook10 [data-anim="wipe"] > video {
  transition: clip-path var(--mask-dur) var(--mask-ease);
  transition-delay: var(--d, 0s);
  will-change: clip-path;
}

/* fade は共通の opacity のみで登場（移動なし） */
/* 左から右へマスクで登場 */
.js #id26awlook10 [data-anim="wipe"]:not(.is-inview) > img,
.js #id26awlook10 [data-anim="wipe"]:not(.is-inview) > video { clip-path: inset(0 100% 0 0); }
.js #id26awlook10 [data-anim="wipe"] > img,
.js #id26awlook10 [data-anim="wipe"] > video { clip-path: inset(0 0 0 0); }
/* 左/右へ20pxずらした位置からスライド */
.js #id26awlook10 [data-anim="slide-l"]:not(.is-inview) { transform: translateX(calc(var(--slide) * -1)); }
.js #id26awlook10 [data-anim="slide-r"]:not(.is-inview) { transform: translateX(var(--slide)); }

.js #id26awlook10 .is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js #id26awlook10 [data-anim] { transition: none; }
  .js #id26awlook10 [data-anim]:not(.is-inview) { opacity: 1; transform: none; }
  .js #id26awlook10 [data-anim="wipe"]:not(.is-inview) > img,
  .js #id26awlook10 [data-anim="wipe"]:not(.is-inview) > video { clip-path: none; transition: none; }
}

/* 左右スライドを使うのは .lb-look（01・02・04はPC/SP、05はSP）のみのため、ここだけ帯の外を切って横スクロールを防ぐ。
   .lb-other・.lb-movie・.lb-closing はフェードのみで切る必要がなく、切ると .lb-other の本文が見切れる。 */
.js #id26awlook10 .lb-look { overflow: clip; }