@charset "UTF-8";

@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ==========================================================================
   CROSS FUNCTION 2026 Autumn Collection「Effortional」
   ========================================================================== */

.p-feature {
  --cf-bg: #d1cbb6;
  --cf-text: #1a1a1a;
  --cf-accent: #96744b;
  --cf-font-en: 'Roboto Condensed', var(--roboto), sans-serif;
  --cf-font-serif: 'Shippori Mincho', source-han-serif-japanese, serif;
  --cf-font-italic: 'Bodoni Moda', serif;

  background-color: var(--cf-bg);
  color: var(--cf-text);
  overflow: clip;
}

.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

.cf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- アニメーション（アニメーション指示書 = src/design-spec.pdf 準拠） ---------- */
/* 指示書の演出パターン:
   A. カバー反転 (紙色カバーが上/右にスルッと抜けて写真が現れる) → .cf-set__photo::after
   B. 透明+ズームインから、ゆっくり等倍に戻る → .cf-reveal-zoom
   C. 少し下+少し大きい+透明 から、ジワッと上へ上がりながら等倍に収まる → .cf-reveal-shrink
   D. 右から少しスライドしながらふわりと現れる → .cf-reveal-slide
   E. 下からふわりと現れる（ラベル・見出し・本文・商品リスト） → .cf-reveal-up
   いずれも起点は祖先の `.js-intersection` に付く `.is-active`（script.js の IntersectionObserver）。
   `--cf-delay` (インラインスタイル) で要素ごとの遅延を指定する。 */

@media (prefers-reduced-motion: reduce) {
  .p-feature * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* 汎用フェードアップ（単一要素・.js-intersection と同一要素に付与） */
.p-feature .fade-up {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .8s ease, transform .8s ease;
}

.p-feature .fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* E. 下からふわり（祖先 .js-intersection の is-active で発火・子要素を段階的に） */
.js-intersection .cf-reveal-up,
.js-intersection.cf-reveal-up  {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .8s ease var(--cf-delay, 0s), transform .8s ease var(--cf-delay, 0s);
}
.js-intersection.is-active .cf-reveal-up,
.js-intersection.is-active.cf-reveal-up {
  opacity: 1;
  transform: translateY(0);
}

/* 「Effortional」の斜体文字だけ下から立ち上がる動き（見出し内の他文字より大きめのリフト） */
.js-intersection.cf-reveal-rise {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.2em);
  transition: opacity 1s ease var(--cf-delay, 0s), transform 1s cubic-bezier(.25, .1, .25, 1) var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-reveal-rise {
  opacity: 1;
  transform: translateY(0);
}

/* D. 右から少しスライド＋フェード */
.js-intersection.cf-reveal-slide,
.js-intersection .cf-reveal-slide {
  opacity: 0;
  transform: translate(2rem, 1rem);
  transition: opacity .9s ease var(--cf-delay, 0s), transform .9s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-reveal-slide,
.js-intersection.is-active .cf-reveal-slide{
  opacity: 1;
  transform: translate(0, 0);
}

.js-intersection.cf-reveal-slide_reverse,
.js-intersection .cf-reveal-slide_reverse {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity .9s ease var(--cf-delay, 0s), transform .9s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-reveal-slide_reverse,
.js-intersection.is-active .cf-reveal-slide_reverse{
  opacity: 1;
  transform: translate(0, 0);
}

/* B. 透明＋ズームインから、ゆっくり等倍に戻る */
.js-intersection.cf-reveal-zoom,
.js-intersection .cf-reveal-zoom {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s ease var(--cf-delay, 0s), transform 1.1s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-reveal-zoom,
.js-intersection.is-active .cf-reveal-zoom {
  opacity: 1;
  transform: scale(1);
}

/* C. 少し下・少し大きい・透明 から、上へ上がりながら等倍に収まる（ズームアウト演出） */
.js-intersection.fadeup {
  opacity: 0;
  transform: translateY(3rem) ;
  transition: opacity 1s ease var(--cf-delay, 0s), transform 1s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.fadeup {
  opacity: 1;
  transform: translateY(0);
}


.js-intersection.cf-reveal-shrink,
.js-intersection .cf-reveal-shrink  {
  opacity: 0;
  transform: translateY(1.6rem) scale(1.06);
  transition: opacity 1s ease var(--cf-delay, 0s), transform 1s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-reveal-shrink,
.js-intersection.is-active .cf-reveal-shrink {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.js-intersection .fade,.js-intersection.fade  {
  opacity: 0;
  transition: opacity 1s;
}
.js-intersection.is-active .fade,.js-intersection.is-active.fade {
  opacity: 1;
}


/* A. カバー反転（紙色カバーが上/右にスルッと抜けて写真が現れる） */
.cf-set__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--cf-bg);
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.65, 0, .35, 1) var(--cf-delay, 0s);
}
.cf-set__photo--curtain-right::after {
  transform: translateX(0);
}
.js-intersection.is-active.cf-set__photo::after {
  transform: translateY(-102%);
}
.js-intersection.is-active.cf-set__photo--curtain-right::after {
  transform: translateX(102%);
}
/* B/C/D パターンを使う写真はカバー反転を使わないため無効化 */
.cf-set__photo--no-curtain::after {
  content: none;
}

/* ---------- メインビジュアル ---------- */
.project-mainvisual {
  line-height: 0;
  overflow: hidden;
}

/* ページを開いた瞬間から、少しズームイン＋ぼけた状態から、ゆっくり等倍に戻りながら現れる（焦点が合っていくような登場） */
@keyframes cf-mv-focus {
  0% { opacity: 0; transform: scale(1.06); filter: blur(6px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.project-mainvisual img {
  animation: cf-mv-focus 2.2s cubic-bezier(.25, .1, .25, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .project-mainvisual img {
    animation: none;
  }
}

/* ---------- リード文 ---------- */
.cf-lead {
  max-width: 80rem;
  margin: 10rem auto 0;
  padding: 0 2rem;
  text-align: center;
}

.cf-lead__brand {
  font-family: var(--cf-font-en);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

.cf-lead__catch {
  margin-top: 2rem;
  font-family: var(--cf-font-serif);
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: .11em;
}

.cf-lead__catch-en {
  font-family: var(--cf-font-italic);
  font-style: italic;
  color: var(--cf-accent);
    font-size: 2.6rem;
}

.cf-lead__body {
  margin-top: 2rem;
  font-family: var(--cf-font-serif);
  font-size: 1.5rem;
  line-height: 2.5;
  letter-spacing: .05em;
}

@media only screen and (max-width: 767px) {
  .cf-lead {
    max-width: none;
    width: calc(335 * (100vw / 375));
    margin-top: calc(50 * (100vw / 375));
    padding: 0;
  }

  .cf-lead__brand {
    font-size: calc(15 * (100vw / 375));
  }

  .cf-lead__catch {
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(15 * (100vw / 375));
  }
  .cf-lead__catch-en{
    font-size: calc(24* (100vw /375));
  }

  .cf-lead__body {
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }
}

/* ---------- LINE UP 共通 ---------- */
@media screen and (min-width: 768px){
  .cf-lineup {
    width: 140rem;
    margin: 10rem auto 0;
  }
}

.cf-set {
  position: relative;
  margin: 0 auto;
}

.cf-set + .cf-set {
  margin-top: 22rem;
}

.cf-set__photo {
  position: absolute;
  display: block;
  overflow: hidden;
}

.cf-set__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクロール中に写真の中身がゆっくり縦方向に流れる演出（js-parallax, script.js が --cf-parallax-y を更新） */
.cf-set__parallax {
  position: relative;
  width: 100%;
  height: 112%;
  margin-top: -6%;
  transform: translateY(var(--cf-parallax-y, 0px));
  will-change: transform;
}

.cf-set__info {
  position: absolute;
  font-family: var(--cf-font-en);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: .052em;
}

/* 商品リスト: 1行ずつ順番に下からふわりと現れる（写真のカバー反転が終わる頃から開始） */
.js-intersection.cf-set__info li {
  --cf-delay: .9s;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .6s ease var(--cf-delay, 0s), transform .6s ease var(--cf-delay, 0s);
}
.js-intersection.is-active.cf-set__info li {
  opacity: 1;
  transform: translateY(0);
}
.cf-set__info li:nth-child(2) { --cf-delay: 1.05s; }
.cf-set__info li:nth-child(3) { --cf-delay: 1.2s; }
.cf-set__info li:nth-child(4) { --cf-delay: 1.35s; }

.cf-set__info li + li {
  margin-top: .2rem;
}

.cf-set__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--cf-text);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.cf-set__buy {
  text-decoration: underline;
  /* text-underline-offset: .2em; */
}

.cf-set__soon {
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  .cf-lineup {
    margin-top: calc(50 * (100vw / 375));
  }

  .cf-set + .cf-set {
    margin-top: calc(100 * (100vw / 375));
  }

  .cf-set__info {
    font-size: calc(13 * (100vw / 375));
  }

  .cf-set__info li + li {
    margin-top: calc(2 * (100vw / 375));
  }

  .cf-set__link {
    gap: calc(10 * (100vw / 375));
  }
}

/* ---------- LINE UP: 01 ---------- */
/* PC: サイト共通のフルードrem（〜1200px幅でvwに連動、1200px以上はrem=10px固定）により
   コンテンツ幅120rem超のセクションは固定remだと画面幅を超えてしまうため、
   width:min(100%,Nrem) + aspect-ratio + 子要素%配置で画面内に収まるよう実装する。 */
.cf-set--01 {
  width: min(100%, 130rem);
  aspect-ratio: 1300 / 1569.3;
}
.cf-set--01 .cf-set__photo--main { left: 0%; top: 0%; width: 50%; height: 54.6295%; }
.cf-set--01 .cf-set__photo--a1 { left: 61.5385%; top: 26.8209%; width: 38.4615%; height: 42.4839%; }
.cf-set--01 .cf-set__photo--a2 { left: 30%; top: 61.7664%; width: 26.9231%; height: 38.2336%; }
.cf-set--01 .cf-set__info {
  left: 3.1769%;
  top: 56.1039%;
}
@media screen and (min-width: 768px){
.cf-set--01 {
  margin: 0;
}
}
@media only screen and (max-width: 767px) {
  .cf-set--01 {
    width: calc(375 * (100vw / 375));
    height: calc(1035.30 * (100vw / 375));
  }
  .cf-set--01 .cf-set__photo--main { left: 0; top: 0; width: calc(345 * (100vw / 375)); height: calc(455 * (100vw / 375)); }
  .cf-set--01 .cf-set__photo--a1 { left: calc(169 * (100vw / 375)); top: calc(569 * (100vw / 375)); width: calc(206 * (100vw / 375)); height: calc(274.70 * (100vw / 375)); }
  .cf-set--01 .cf-set__photo--a2 { left: 0; top: calc(788 * (100vw / 375)); width: calc(144.20 * (100vw / 375)); height: calc(247.30 * (100vw / 375)); }
  .cf-set--01 .cf-set__info { left: calc(20 * (100vw / 375)); top: calc(465 * (100vw / 375)); }
}

/* ---------- LINE UP: 02 ---------- */
.cf-set--02 {
  width: min(100%, 119.95rem);
  aspect-ratio: 1199.5 / 930.3;
}
.cf-set--02 .cf-set__photo--a1 { left: 0%; top: 0%; width: 37.5156%; height: 64.4953%; }
.cf-set--02 .cf-set__photo--main { left: 49.9792%; top: 14.9307%; width: 50.0208%; height: 85.0693%; }
.cf-set--02 .cf-set__info { left: 39.4249%; top: 95.4853%; }

@media only screen and (max-width: 767px) {
  .cf-set--02 {
    width: calc(375 * (100vw / 375));
    height: calc(914.30 * (100vw / 375));
  }
  .cf-set--02 .cf-set__photo--a1 { left: 0; top: 0; width: calc(270 * (100vw / 375)); height: calc(360 * (100vw / 375)); }
  .cf-set--02 .cf-set__photo--main { left: calc(32 * (100vw / 375)); top: calc(410 * (100vw / 375)); width: calc(342.90 * (100vw / 375)); height: calc(452.30 * (100vw / 375)); }
  .cf-set--02 .cf-set__info { left: calc(32 * (100vw / 375)); top: calc(872.30 * (100vw / 375)); }
}

/* ---------- LINE UP: 03 ---------- */
.cf-set--03 {
  width: min(100%, 130rem);
  aspect-ratio: 1300 / 1629.3;
}
.cf-set--03 .cf-set__photo--main { left: 30.7692%; top: 0%; width: 69.2308%; height: 30.6880%; }
.cf-set--03 .cf-set__photo--a1 { left: 0%; top: 36.8256%; width: 53.8462%; height: 56.6685%; }
.cf-set--03 .cf-set__info {
  left: 34.5154%;
    top: 94.9217%;
  }
@media screen and (min-width: 768px){
  .cf-set--03 {
      margin: 22rem 0 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .cf-set--03 {
    width: calc(375 * (100vw / 375));
    height: calc(768.50 * (100vw / 375));
  }
  .cf-set--03 .cf-set__photo--main { left: 0; top: 0; width: calc(375 * (100vw / 375)); height: calc(208.30 * (100vw / 375)); }
  .cf-set--03 .cf-set__photo--a1 { left: calc(30 * (100vw / 375)); top: calc(257.90 * (100vw / 375)); width: calc(315 * (100vw / 375)); height: calc(415.50 * (100vw / 375)); }
  .cf-set--03 .cf-set__info {
    left: calc(91 * (100vw / 375));
    width: calc(267 * (100vw / 375));
    top: calc(683 * (100vw / 375));
    text-align: left;
  }
}

/* ---------- LINE UP: 04 ---------- */
.cf-set--04 {
  width: min(100%, 100rem);
  aspect-ratio: 1000 / 1042.6;
}
.cf-set--04 .cf-set__photo--main { left: 0%; top: 0%; width: 60%; height: 75.9064%; }
.cf-set--04 .cf-set__photo--a1 { left: 54%; top: 41.1759%; width: 46%; height: 58.8241%; }
.cf-set--04 .cf-set__info { left: 0%; top: 77.8247%; }

@media screen and (min-width: 768px){
  .cf-set--04 {
    margin-top: 24rem !important;
  }
}
@media only screen and (max-width: 767px) {
  .cf-set--04 {
    width: calc(375 * (100vw / 375));
    height: calc(749.40 * (100vw / 375));
  }
  .cf-set--04 .cf-set__photo--main { left: 0; top: 0; width: calc(345 * (100vw / 375)); height: calc(455 * (100vw / 375)); }
  .cf-set--04 .cf-set__photo--a1 { left: calc(155 * (100vw / 375)); top: calc(404.40 * (100vw / 375)); width: calc(220 * (100vw / 375)); height: calc(293.30 * (100vw / 375)); }
  .cf-set--04 .cf-set__info {
    left: calc(83 * (100vw / 375));
    width: calc(277 * (100vw / 375));
    top: calc(707.40 * (100vw / 375));
    text-align: left;
  }
}

/* ---------- LINE UP: 05 ---------- */
.cf-set--05 {
  width: min(100%, 80rem);
  aspect-ratio: 800 / 1095.2;
}
.cf-set--05 .cf-set__photo--main { left: 0%; top: 0%; width: 100%; height: 96.3477%; }
.cf-set--05 .cf-set__info { right: 0; top: 98%; }

@media screen and (min-width: 768px){
  .cf-set--05 {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .cf-set--05 {
    width: calc(375 * (100vw / 375));
    height: calc(524.60 * (100vw / 375));
  }
  .cf-set--05 .cf-set__photo--main { left: 0; top: 0; width: calc(375 * (100vw / 375)); height: calc(494.60 * (100vw / 375)); }
  .cf-set--05 .cf-set__info { left: calc(20 * (100vw / 375)); top: calc(504.60 * (100vw / 375)); }
}

/* ---------- LINE UP: 06 ---------- */
.cf-set--06 {
  width: min(100%, 140.1rem);
  aspect-ratio: 1401 / 2122.2;
}
.cf-set--06 .cf-set__photo--a1 { left: 0%; top: 0%; width: 41.3990%; height: 36.0475%; }
.cf-set--06 .cf-set__photo--a2 { left: 58.6010%; top: 5.1032%; width: 41.3990%; height: 36.0475%; }
.cf-set--06 .cf-set__photo--main { left: 0%; top: 47.3565%; width: 57.1021%; height: 49.7220%; }
.cf-set--06 .cf-set__info { left: 48.8078%; top: 98.0209%; }

@media only screen and (max-width: 767px) {
  .cf-set--06 {
    width: calc(375 * (100vw / 375));
    height: calc(1319.30 * (100vw / 375));
  }
  .cf-set--06 .cf-set__photo--a1 { left: 0; top: 0; width: calc(270 * (100vw / 375)); height: calc(356.10 * (100vw / 375)); }
  .cf-set--06 .cf-set__photo--a2 { left: calc(105 * (100vw / 375)); top: calc(406.10 * (100vw / 375)); width: calc(270 * (100vw / 375)); height: calc(356.10 * (100vw / 375)); }
  .cf-set--06 .cf-set__photo--main { left: 0; top: calc(812.20 * (100vw / 375)); width: calc(345 * (100vw / 375)); height: calc(455 * (100vw / 375)); }
  .cf-set--06 .cf-set__info {
    left: calc(238 * (100vw / 375));
    top: calc(1277.30 * (100vw / 375));}
}

/* ---------- LINE UP: 07 ---------- */
.cf-set--07 {
  width: min(100%, 120rem);
  aspect-ratio: 1200 / 827;
}
.cf-set--07 .cf-set__photo--l { left: 0%; top: 0%; width: 50%; height: 92.5030%; }
.cf-set--07 .cf-set__photo--r { left: 49.9333%; top: 0%; width: 50%; height: 92.5030%; }
.cf-set--07 .cf-set__info { right: 0; top: 94.9214%; }

@media only screen and (max-width: 767px) {
  .cf-set--07 {
    width: calc(315 * (100vw / 375));
    height: calc(855.20 * (100vw / 375));
  }
  .cf-set--07 .cf-set__photo--l { left: 0; top: 0; width: calc(315 * (100vw / 375)); height: calc(401.60 * (100vw / 375)); }
  .cf-set--07 .cf-set__photo--r { left: 0; top: calc(401.60 * (100vw / 375)); width: calc(315 * (100vw / 375)); height: calc(401.60 * (100vw / 375)); }
  .cf-set--07 .cf-set__info {
    left: calc(65 * (100vw / 375));
    width: calc(257 * (100vw / 375));
    top: calc(816.2 * (100vw / 375));
    text-align: left;
  }
}

/* ---------- LINE UP: 08 ---------- */
.cf-set--08 {
  width: min(100%, 130.15rem);
  aspect-ratio: 1301.5 / 1312.4;
}
.cf-set--08 .cf-set__photo--main { left: 38.5325%; top: 0%; width: 61.4675%; height: 80.4023%; }
.cf-set--08 .cf-set__photo--a1 { left: 0%; top: 51.2344%; width: 36.8805%; height: 48.7656%; }
.cf-set--08 .cf-set__info { left: 38.4940%; top: 96.7998%; }
@media screen and (min-width: 768px){
  .cf-set--08 {
    margin: 23.7rem 0 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  .cf-set--08 {
    width: calc(374.60 * (100vw / 375));
    height: calc(841.50 * (100vw / 375));
  }
  .cf-set--08 .cf-set__photo--main { left: calc(29.60 * (100vw / 375)); top: 0; width: calc(345 * (100vw / 375)); height: calc(455 * (100vw / 375)); }
  .cf-set--08 .cf-set__photo--a1 { left: 0; top: calc(496.20 * (100vw / 375)); width: calc(220 * (100vw / 375)); height: calc(293.30 * (100vw / 375)); }
  .cf-set--08 .cf-set__info { left: calc(18.70 * (100vw / 375)); top: calc(799.50 * (100vw / 375)); }
}

/* ---------- LINE UP: 09 ---------- */
.cf-set--09 {
  width: min(100%, 80rem);
  aspect-ratio: 800 / 1095.2;
}
.cf-set--09 .cf-set__photo--main { left: 0%; top: 0%; width: 100%; height: 96.3477%; }
.cf-set--09 .cf-set__info { left: 0%; top: 98.2%;}
@media screen and (min-width: 768px){
  .cf-set--09 {
    margin: 22rem 0 0 10rem !important;
  }
}
@media only screen and (max-width: 767px) {
  .cf-set--09 {
    width: calc(375 * (100vw / 375));
    height: calc(524.40 * (100vw / 375));
  }
  .cf-set--09 .cf-set__photo--main { left: 0; top: 0; width: calc(375 * (100vw / 375)); height: calc(494.60 * (100vw / 375)); }
  .cf-set--09 .cf-set__info { left: calc(20 * (100vw / 375)); top: calc(504.40 * (100vw / 375)); }
}

/* ---------- LINE UP: 10 ---------- */
.cf-set--10 {
  width: min(100%, 130.1rem);
  aspect-ratio: 1301 / 2212.4;
}
.cf-set--10 .cf-set__photo--main { left: 23.1360%; top: 0%; width: 61.4912%; height: 47.6948%; }
.cf-set--10 .cf-set__photo--a2 { left: 53.8816%; top: 55.1980%; width: 46.1184%; height: 35.7711%; }
.cf-set--10 .cf-set__photo--a1 { left: 0%; top: 65.4222%; width: 44.5811%; height: 34.5778%; }
.cf-set--10 .cf-set__info { left: 23.1360%; top: 48.6078%; }
@media screen and (min-width: 768px){
.cf-set--10 {
    margin: 22rem 0 0 !important;
}
}
@media only screen and (max-width: 767px) {
  .cf-set--10 {
    width: calc(375 * (100vw / 375));
    height: calc(796.50 * (100vw / 375));
  }
  .cf-set--10 .cf-set__photo--main { left: calc(30 * (100vw / 375)); top: 0; width: calc(315 * (100vw / 375)); height: calc(415.50 * (100vw / 375)); }
  .cf-set--10 .cf-set__photo--a2 { left: calc(195.50 * (100vw / 375)); top: calc(511.50 * (100vw / 375)); width: calc(179.50 * (100vw / 375)); height: calc(239.30 * (100vw / 375)); }
  .cf-set--10 .cf-set__photo--a1 { left: 0; top: calc(578.50 * (100vw / 375)); width: calc(165.30 * (100vw / 375)); height: calc(218 * (100vw / 375)); }
  .cf-set--10 .cf-set__info { left: calc(30 * (100vw / 375)); top: calc(425.50 * (100vw / 375)); }
}

/* ---------- クレジット ---------- */
.cf-credit {
  max-width: 31.2rem;
  margin: 10rem auto 0;
  padding-bottom: 10rem;
  text-align: center;
  font-family: var(--cf-font-italic);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: .04em;
}
.cf-credit__text{
  font-style: italic;
  line-height: 1.85;
}
.cf-credit__link {
  display: inline-block;
  margin-top: 4.7rem;
  padding-bottom: .2rem;
  color: var(--cf-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media only screen and (max-width: 767px) {
  .cf-credit {
        max-width: none;
        width: calc(312 * (100vw / 375));
        margin-top: calc(43.44 * (100vw / 375));
        padding-bottom: calc(80 * (100vw / 375));
        font-size: calc(15 * (100vw / 375));
  }
  .cf-credit__link {
    margin-top: calc(27 * (100vw / 375));
  }
}