@charset "UTF-8";
/* RESET */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
  font-style: inherit;
  font-weight: inherit;
}

del,
ins {
  text-decoration: none;
}

li {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: baseline;
}

sub {
  vertical-align: baseline;
}

legend {
  color: #000;
}

input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

input,
button,
textarea,
select {
  *font-size: 100%;
}

/* RESET HTML5 */
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/*---------------------------------------------
POPUP
---------------------------------------------*/
.mfp-wrap {
  user-select: none;
}

.mfp-bg {
  transition: all 0.3s ease-out;
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;
  background-color: #fff;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.98;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-figure:after {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mfp-figure.show:after {
  opacity: 1;
}

.mfp-img {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mfp-img.show {
  opacity: 1;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  right: 20px;
  top: 20px;
  color: #000;
}

.mfp-arrow-left:before {
  display: none;
}

.mfp-arrow-left:after {
  display: none;
}

.mfp-arrow-right:before {
  display: none;
}

.mfp-arrow-right:after {
  display: none;
}

button.mfp-arrow-left {
  background-image: url("../images/arr_left.png");
  background-repeat: no-repeat;
  background-size: 12px auto;
  background-position: left 25px center;
}

button.mfp-arrow-right {
  background-image: url("../images/arr_right.png");
  background-repeat: no-repeat;
  background-size: 12px auto;
  background-position: right 25px center;
}

.slick-dots {
  bottom: -35px;
}
.slick-dots li {
  width: 7px;
}
.slick-dots li button {
  width: 7px;
}
.slick-dots li button:before {
  width: 7px;
}

/*---------------------------------------------
MOTION
---------------------------------------------*/
.fadeSimple {
  transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
}
.fadeSimple.active {
  opacity: 1;
}

.fade {
  transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  position: relative;
  top: 20px;
}
.fade.active {
  opacity: 1;
  top: 0;
}

.fadeLeft {
  transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  position: relative;
  left: -20px;
}
.fadeLeft.active {
  opacity: 1;
  left: 0;
}

.fadeRight {
  transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  position: relative;
  right: -20px;
}
.fadeRight.active {
  opacity: 1;
  right: 0;
}

.fadeDelay1 {
  transition-delay: 0s;
}

.fadeDelay2 {
  transition-delay: 0.4s;
}

.fadeDelay3 {
  transition-delay: 0.8s;
}

.fadeDelay4 {
  transition-delay: 0.9s;
}

.maskRight {
  clip-path: inset(0 100% 0 0);
  transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.maskRight.active {
  clip-path: inset(0 0% 0 0);
}

.maskLeft {
  clip-path: inset(0 0 0 100%);
  transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.maskLeft.active {
  clip-path: inset(0 0% 0 0);
}

.maskTop {
  clip-path: inset(0 0 100% 0);
  transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.maskTop.active {
  clip-path: inset(0 0% 0 0);
}

.maskBottom {
  clip-path: inset(100% 0 0 0);
  transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.maskBottom.active {
  clip-path: inset(0 0% 0 0);
}

/* ------------------------------------------
smartphone
------------------------------------------ */
@media screen and (max-width: 719px) {
  .mfp-image-holder .mfp-close,
  .mfp-iframe-holder .mfp-close {
    right: 3px;
    top: 10px;
  }
  .mfp-container {
    padding-left: 35px;
    padding-right: 35px;
  }
  button.mfp-arrow-left {
    background-position: left 15px center;
  }
  button.mfp-arrow-right {
    background-position: right 15px center;
  }
}
#button_container {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 20;
  display: block;
  height: 60px;
  z-index: 40;
  width: 60px;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  visibility: visible;
  opacity: 1;
  cursor: pointer;
}
#button_container.hide {
  visibility: none;
  opacity: 0;
}
#button_container.blackMode #toggle span {
  background-color: #fff;
}

#toggle {
  position: absolute;
  left: 14px;
  top: 21px;
  width: 34px;
  z-index: 300;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  mix-blend-mode: difference;
  background-blend-mode: difference;
}
#toggle:hover {
  opacity: 0.7;
}
#toggle.active span {
  background-color: #000;
}
#toggle span {
  background-color: #000;
  border: none;
  height: 1px;
  width: 34px;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}
#toggle span:nth-of-type(2) {
  top: 8px;
}
#toggle span:nth-of-type(3) {
  top: 16px;
}

#toggle.active .top {
  transform: translateY(8px) translateX(0) rotate(45deg);
}

#toggle.active .middle {
  transform: translateY(26px) translateX(0) rotate(0);
}

#toggle.active .bottom {
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 39;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#overlay.open {
  visibility: visible;
  opacity: 1;
}
#overlay.open #overlayBox {
  opacity: 1;
}
#overlay #overlayBox {
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.25s;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.overlay-menu {
  position: absolute;
  width: 100%;
  height: 100%;
  height: calc(100% - 120px);
  left: 0;
  top: 100px;
}

ul.lineList {
  position: relative;
  width: 100%;
  height: 100%;
}
ul.lineList > li {
  height: 11.1111111111%;
  max-height: 60px;
  position: relative;
}
ul.lineList > li > a {
  font-size: 16px;
  color: #000;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 90%;
  padding-left: 90px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
ul.lineList > li.sns {
  padding-left: 88px;
}

/* ------------------------------------------
smartphone
------------------------------------------ */
@media screen and (max-width: 719px) {
  #button_container {
    top: 0;
  }
}
/*---------------------------------------------
DESIGN TOKENS
デザインカンプは PC = 20260819/pc.pdf（1280px 幅・前回 Whim_1.pdf と座標一致）、
SP = 20260819/sp.pdf（320px 幅）。
PC はレイアウト vw ／ 文字 px。SP は文字も vw（下限だけ max() で敷く）。
---------------------------------------------*/
/*---------------------------------------------
写真の天地に引く黒罫（メインビジュアル・フッター写真）

カンプでは罫の中心が写真の縁に乗っている（＝写真に半分重なる）。
border で外に足すと写真の高さが変わり 16:10 / 4:5 が崩れるので、
枠の内側に絶対配置で重ねる。高さは一切増えない。
---------------------------------------------*/
html.hidden,
body.hidden {
  overflow: hidden;
}

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  width: 60px;
  height: 60px;
  text-align: left;
  text-indent: -9999px;
  background-size: 19px auto;
  background-position: center center;
  padding-right: 0;
  right: 0;
  top: 0;
}

.mfp-counter {
  color: #666;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background-color: #fff;
  color: #000;
  position: relative;
  font-size: 14px;
  font-feature-settings: "palt";
  font-weight: 400;
  font-style: normal;
  font-family: "garamond-premier-pro-display", "Noto Serif JP", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

/* GENERAL */
a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: none;
}

a {
  outline: none;
}

strong {
  font-weight: bold;
}

img {
  vertical-align: bottom;
  user-select: none;
  width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

.topSlider div {
  vertical-align: top;
}

.pcSlider div {
  vertical-align: top;
}

/*---------------------------------------------
slick 初期化前の高さを確定させる

slick は初期化されるまで .slide を縦に積むため、
初期化前後でページ全体の高さが 4000px 以上変わる。
その状態で waypoint のオフセットが計算されると
フェードインの発動位置がずれるので、
初期化されるまでは1枚目だけを表示して
初期化後とまったく同じ高さにしておく。
---------------------------------------------*/
.topSlider:not(.slick-initialized) .slide:not(:first-child),
.pcSlider:not(.slick-initialized) .slide:not(:first-child) {
  display: none;
}

.onlyPc {
  display: block !important;
}

.onlyPc2 {
  display: flex !important;
}

.onlySp {
  display: none !important;
}

.onlySp2 {
  display: none !important;
}

.disable {
  pointer-events: none;
}

/*---------------------------------------------
MAIN
---------------------------------------------*/
#whim2026fw {
  /*---------------------------------------------
  メインビジュアルの上に置く白余白。
  .mainVisual の margin-top ではなく親の padding-top で取る
  （先頭の子の margin は親をすり抜けて body 側へ抜けてしまうため）。
  ---------------------------------------------*/
  padding-top: 7.578125vw;
  /*---------------------------------------------
  header（白帯 + 黒ロゴ）
  ---------------------------------------------*/
  /*---------------------------------------------
  header
  ページ上部にスペースは取らず、メインビジュアルを通り過ぎたら
  上から降りてくる固定ヘッダー（common.js が .show を付け外し）
  ---------------------------------------------*/
}
#whim2026fw .htHeader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 5.625vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8.203125vw;
  /*---------------------------------------------
  白い板は敷かない。
  ヘッダーが出ている区間の 41.8% は写真に重なり、その写真は
  ロゴが乗る左端の輝度が中央値 49/255（27点中22点が暗い）。
  黒ロゴをそのまま置くと読めないので、difference で背景から反転させる。

    ロゴ画像を invert(1) で白にする
      → 白い余白の上： |255-255| = 0 → 黒（カンプどおり）
      → 暗い写真の上： |暗-255|  → 明るく抜ける
    PNG の透明部分は alpha 0 のまま合成に参加しないので背景は素通り。

  ※ 祖先（#whim2026fw / body）に transform・filter・opacity・isolation が
     無いことを確認済み。付くと blend が閉じ込められてこの仕掛けが死ぬ。
  ---------------------------------------------*/
  mix-blend-mode: difference;
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .htHeader.show {
  transform: translateY(0);
}
#whim2026fw .htHeader h1.logo {
  line-height: 0;
}
#whim2026fw .htHeader h1.logo img {
  width: 9.375vw;
  filter: invert(1);
}
#whim2026fw {
  /*---------------------------------------------
  パララックス用フレーム
  .pBox … 切り抜き枠（アスペクト比固定・overflow hidden）
  .pBox > * … JS が translate3d(0, ±n%, 0) scale(--pxScale) を書き込む要素

  ★調整はこの --pxScale だけ。common.js が読み取って移動量を自動計算します。

    --pxScale   移動量    上端の最大トリミング
    1.20        ±9.00%    19.0%
    1.15        ±6.75%    14.25%   ← 旧設定。全カットで顔を割っていた
    1.10        ±4.50%     9.5%
    1.08        ±3.60%     7.6%
    1.06        ±2.70%     5.7%    ← 旧設定
    1.05        ±2.25%     4.75%
    1           0          0       ← 現在（トリミングなし＝パララックス停止）

  上端のトリミングは「静止時 (scale-1)/2 ＋ 移動量」で最大になる。
  写真は全点 1200×1500 で枠と同じ 4:5 なので、切れるのは scale の分だけ。
  つまり 1 以外にすると必ずカンプより寄った画になる。

  ※ 動かす余白は scale で作った拡大分しかないので、
     「拡大せずに動かす」はできない（隙間が出る）。トリミングを止める＝動きも止まる。
     復活させたいときは 1.05〜1.08 あたりを入れれば、
     common.js が --pxScale から移動量を計算して再び動き出す。
  ---------------------------------------------*/
}
#whim2026fw .pBox {
  --pxScale: 1;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/5;
}
#whim2026fw .pBox > * {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) scale(var(--pxScale));
}
#whim2026fw .pBox picture {
  display: block;
  width: 100%;
  height: 100%;
}
#whim2026fw .pBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#whim2026fw {
  /*---------------------------------------------
  mainVisual（全幅 + 白ロゴ中央オーバーレイ）
  ---------------------------------------------*/
}
#whim2026fw .mainVisual {
  position: relative;
}
#whim2026fw .mainVisual.active .visualLogo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#whim2026fw .visualLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 34.0625vw;
  line-height: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.03);
  transition: opacity 1.6s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .mainVisual .pBox {
  aspect-ratio: 16/10;
}
#whim2026fw .topSlider {
  /*---------------------------------------------
  黒罫は .mainVisual ではなくフェードする .topSlider 側に付ける。
  同じ要素の opacity に乗るので、写真とまったく同じ 2.6s で一緒に立ち上がる。
  （.mainVisual.active はロゴ用で 1.4s 遅れて付くため、そちらでは間に合わない）
  ---------------------------------------------*/
  position: relative;
}
#whim2026fw .topSlider::before, #whim2026fw .topSlider::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 0.4296875vw;
  background-color: #000;
  pointer-events: none;
}
#whim2026fw .topSlider::before {
  top: 0;
}
#whim2026fw .topSlider::after {
  bottom: 0;
}
#whim2026fw .topSlider {
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .topSlider.active {
  opacity: 1;
}
#whim2026fw .topSlider.active img.img {
  transform: scale(1);
}
#whim2026fw .topSlider img.img {
  transform: scale(1.08);
  transition: transform 2.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw {
  /*---------------------------------------------
  conceptBox
  ---------------------------------------------*/
}
#whim2026fw .conceptBox {
  text-align: center;
  padding-top: 4.0625vw;
  padding-bottom: 11.328125vw;
}
#whim2026fw .conceptBox .season {
  line-height: 0;
  margin-bottom: 0.6640625vw;
}
#whim2026fw .conceptBox .season img {
  width: 32.03125vw;
  aspect-ratio: 8.4132653061;
}
#whim2026fw .conceptBox .conceptTtl {
  line-height: 0;
  margin-bottom: 3.4375vw;
  transition-delay: 0.25s;
}
#whim2026fw .conceptBox .conceptTtl img {
  width: 23.4375vw;
  aspect-ratio: 4.4981273408;
}
#whim2026fw .conceptBox .concept {
  font-size: 17.7px;
  line-height: 1.442;
  font-weight: 400;
}
#whim2026fw .conceptBox .concept .line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .conceptBox .concept.active .line {
  opacity: 1;
  transform: none;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(1) {
  transition-delay: 0.55s;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(2) {
  transition-delay: 0.69s;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(3) {
  transition-delay: 0.83s;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(4) {
  transition-delay: 0.97s;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(5) {
  transition-delay: 1.11s;
}
#whim2026fw .conceptBox .concept.active .line:nth-child(6) {
  transition-delay: 1.25s;
}
#whim2026fw {
  /*---------------------------------------------
  写真セクション
  ---------------------------------------------*/
}
#whim2026fw .sec {
  padding-bottom: 15.625vw;
}
#whim2026fw .contentBox {
  margin: 0 auto;
}
#whim2026fw .contentBox.contentBox1 {
  width: 40.625vw;
}
#whim2026fw .contentBox.contentBox2 {
  width: 83.59375vw;
}
#whim2026fw .photoList {
  display: flex;
  gap: 2.34375vw;
  justify-content: center;
  width: 100%;
}
#whim2026fw .photoList li {
  width: 100%;
  line-height: 0;
}
#whim2026fw .contentBox2 .photoList li {
  width: 40.625vw;
}
#whim2026fw {
  /*---------------------------------------------
  PC 2カラムは左右へわずかに振ってから定位置へ。
  opacity と .active の付与（waypoint）は .fadeSimple のまま。
  ここで足すのは transform だけ。

  .pBox の中身は common.js が毎フレーム transform を書き換えるので、
  振りは必ず li（パララックスが触らない階層）に掛ける。
  付与は 2カラム（PC専用）だけなので SP では出番がない。
  ---------------------------------------------*/
}
#whim2026fw .photoList li.fromLeft, #whim2026fw .photoList li.fromRight {
  transition: opacity 1.6s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .photoList li.fromLeft {
  transform: translateX(-18px);
}
#whim2026fw .photoList li.fromRight {
  transform: translateX(18px);
}
#whim2026fw .photoList li.fromLeft.active, #whim2026fw .photoList li.fromRight.active {
  transform: none;
}
#whim2026fw .captionBox {
  position: relative;
}
#whim2026fw .captionBox .caption {
  position: absolute;
  width: 100%;
}
#whim2026fw .caption {
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  padding-top: 1.40625vw;
  font-weight: 400;
  /*---------------------------------------------
  点数が多いスタイルは短い行をまとめて 1 行に載せる（PC 5 行 / SP 4 行が上限）。
  どこで折り返すかは index.html の br が決める。
    <br />              PC・SP とも改行
    <br class="brPc" /> PC だけ改行（SP は前の行に続ける）
    <br class="brSp" /> SP だけ改行（PC は前の行に続ける）

  1リンク = block だと必ず 1 行になるので inline-block にする。
  nowrap は「1点の途中で折り返して 'SCARF ¥17,600 /（Hoaw.）' のように割れる」
  のを防ぐため。幅が足りないときは点と点の間で折り返す＝元の 1行1点に戻るだけ。
  ---------------------------------------------*/
  word-spacing: 0.75em;
}
#whim2026fw .caption a {
  display: inline-block;
  white-space: nowrap;
  word-spacing: normal;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .caption .brPc {
  display: inline;
}
#whim2026fw .caption .brSp {
  display: none;
}
#whim2026fw .caption .disable .name {
  text-decoration: none;
}
#whim2026fw .caption .name {
  text-decoration: underline;
  margin-right: 0.3em;
}
#whim2026fw .captionBox.active .caption a {
  opacity: 1;
  transform: none;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(1) {
  transition-delay: 0.3s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(2) {
  transition-delay: 0.39s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(3) {
  transition-delay: 0.48s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(4) {
  transition-delay: 0.57s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(5) {
  transition-delay: 0.66s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(6) {
  transition-delay: 0.75s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(7) {
  transition-delay: 0.84s;
}
#whim2026fw .captionBox.active .caption a:nth-of-type(8) {
  transition-delay: 0.93s;
}
#whim2026fw {
  /*---------------------------------------------
  footer
  ---------------------------------------------*/
}
#whim2026fw .ftBox {
  position: relative;
}
#whim2026fw .ftBox .creditBox {
  transition-duration: 0.8s;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 60%;
  transform: translate(0, -50%);
  width: 100%;
  color: #fff;
}
#whim2026fw .ftBox .creditBox .season {
  line-height: 0;
  margin-bottom: 2.96875vw;
}
#whim2026fw .ftBox .creditBox .season img {
  width: 15.46875vw;
  aspect-ratio: 16.6458333333;
}
#whim2026fw .ftBox .creditBox .conceptTtl {
  line-height: 0;
  margin-bottom: 4.453125vw;
}
#whim2026fw .ftBox .creditBox .conceptTtl img {
  width: 22.96875vw;
  aspect-ratio: 4.4981273408;
}
#whim2026fw .ftBox .bg {
  position: relative;
}
#whim2026fw .ftBox .bg::before, #whim2026fw .ftBox .bg::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 0.4296875vw;
  background-color: #000;
  pointer-events: none;
}
#whim2026fw .ftBox .bg::before {
  top: 0;
}
#whim2026fw .ftBox .bg::after {
  bottom: 0;
}
#whim2026fw .ftBox .bg {
  line-height: 0;
}
#whim2026fw .ftBox .bg .pBox {
  aspect-ratio: 16/10;
}
#whim2026fw .creditList li {
  margin-bottom: 0.4296875vw;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#whim2026fw .creditList li:last-child {
  margin-bottom: 0;
}
#whim2026fw .creditList li .job {
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  margin-bottom: 2px;
}
#whim2026fw .creditList li .name {
  font-size: 14.3px;
  line-height: 1;
}
#whim2026fw .creditBox.active .creditList li {
  opacity: 1;
  transform: none;
}
#whim2026fw .creditBox.active .creditList li:nth-child(1) {
  transition-delay: 0.15s;
}
#whim2026fw .creditBox.active .creditList li:nth-child(2) {
  transition-delay: 0.26s;
}
#whim2026fw .creditBox.active .creditList li:nth-child(3) {
  transition-delay: 0.37s;
}
#whim2026fw .creditBox.active .creditList li:nth-child(4) {
  transition-delay: 0.48s;
}
#whim2026fw .creditBox.active .creditList li:nth-child(5) {
  transition-delay: 0.59s;
}
#whim2026fw .creditBox.active .creditList li:nth-child(6) {
  transition-delay: 0.7s;
}
#whim2026fw .ftLogo {
  height: 12.078125vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#whim2026fw .ftLogo .snsList {
  justify-content: center;
  gap: 1.484375vw;
  margin-bottom: 2.296875vw;
  line-height: 0;
}
#whim2026fw .ftLogo .snsList img {
  width: 2.203125vw;
  height: auto;
}
#whim2026fw .ftLogo .logo {
  line-height: 0;
}
#whim2026fw .ftLogo .logo img {
  width: 14.53125vw;
}

/* ------------------------------------------
smartphone

カンプ（sp.pdf）は 320px 幅。実測値はすべて「幅に対する %」= vw で持つ。
文字サイズだけ max() で下限を敷いている。カンプの比率をそのまま px に
落とすと 320px 幅の端末で 8px 前後になり実機で読めないため。
下限を踏んでも行が折り返さないことは各所のコメントに残した。
------------------------------------------ */
@media screen and (max-width: 719px) {
  .onlyPc {
    display: none !important;
  }
  .onlyPc2 {
    display: none !important;
  }
  .onlySp {
    display: block !important;
  }
  .onlySp2 {
    display: flex !important;
  }
  #whim2026fw {
    /*---------------------------------------------
    SP はブロックの並びが PC と違う（sp.pdf）。
    DOM は PC の並び（sec1 → sec14）のまま置き、ここで order だけ差し替える。
    SP 用にもう一度マークアップを書き出すより DOM が軽く、差分も追いやすい。

      1 sec1(01)   2 sec2(03)   3 sec3(04)    4 sec5(08)    5 sec4_1(06)
      6 sec4_2(07) 7 sec6(09)   8 sec7(11)    9 sec8(13→12) 10 sec9(14)
     11 sec10(15) 12 sec11(16) 13 sec14(21)  14 sec13(19)  15 sec12(18)

    ※ カンプに出てこない 02 / 05 / 10 / 17 / 20 と _2 系は PC 専用。
       .onlyPc2 で消しているだけなので、SP でも出したくなったら
       .onlySp2 側の ul に足すだけで戻せる。
    ---------------------------------------------*/
    padding-top: 15.625vw;
    display: flex;
    flex-direction: column;
  }
  #whim2026fw > * {
    flex: none;
  }
  #whim2026fw .mainVisual {
    order: 1;
  }
  #whim2026fw .conceptBox {
    order: 2;
  }
  #whim2026fw #sec1 {
    order: 11;
  }
  #whim2026fw #sec2 {
    order: 12;
  }
  #whim2026fw #sec3 {
    order: 13;
  }
  #whim2026fw #sec5 {
    order: 14;
  }
  #whim2026fw #sec4_1 {
    order: 15;
  }
  #whim2026fw #sec4_2 {
    order: 16;
  }
  #whim2026fw #sec6 {
    order: 17;
  }
  #whim2026fw #sec7 {
    order: 18;
  }
  #whim2026fw #sec8 {
    order: 19;
  }
  #whim2026fw #sec9 {
    order: 20;
  }
  #whim2026fw #sec10 {
    order: 21;
  }
  #whim2026fw #sec11 {
    order: 22;
  }
  #whim2026fw #sec14 {
    order: 23;
  }
  #whim2026fw #sec13 {
    order: 24;
  }
  #whim2026fw #sec12 {
    order: 25;
  }
  #whim2026fw footer {
    order: 90;
    position: relative;
  }
  #whim2026fw .htHeader {
    height: 13vw;
    padding-left: 5.95vw;
  }
  #whim2026fw .htHeader h1.logo img {
    width: 20vw;
  }
  #whim2026fw .visualLogo {
    width: 62.3vw;
  }
  #whim2026fw .mainVisual .pBox {
    aspect-ratio: 4/5;
  }
  #whim2026fw .topSlider::before, #whim2026fw .topSlider::after,
  #whim2026fw .ftBox .bg::before,
  #whim2026fw .ftBox .bg::after {
    height: 0.86vw;
  }
  #whim2026fw .conceptBox {
    padding-top: 14.5vw;
    padding-bottom: 14.6vw;
  }
  #whim2026fw .conceptBox .season {
    margin-bottom: 1.2vw;
  }
  #whim2026fw .conceptBox .season img {
    width: 59.3vw;
  }
  #whim2026fw .conceptBox .conceptTtl {
    margin-bottom: 5.7vw;
  }
  #whim2026fw .conceptBox .conceptTtl img {
    width: 42.7vw;
  }
  #whim2026fw .conceptBox .concept {
    font-size: max(10px, 2.49vw);
    line-height: 1.442;
    padding: 0 4vw;
  }
  #whim2026fw .sec {
    padding-bottom: 37vw;
  }
  #whim2026fw .contentBox.contentBox1, #whim2026fw .contentBox.contentBox2 {
    width: 88.1vw;
  }
  #whim2026fw .contentBox.isBig .photoList {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  #whim2026fw .photoList {
    gap: 0;
  }
  #whim2026fw .photoList li {
    width: 100%;
  }
  #whim2026fw .contentBox2 .photoList li {
    width: 100%;
  }
  #whim2026fw .caption {
    font-size: max(11px, 3.08vw);
    line-height: 1.4;
    padding-top: 2.8vw;
    text-align: center;
  }
  #whim2026fw .caption .brPc {
    display: none;
  }
  #whim2026fw .caption .brSp {
    display: inline;
  }
  #whim2026fw {
    /*---------------------------------------------
    footer
    PC は「写真の上にクレジット → 下に白帯＋ロゴ」。
    SP は上下が入れ替わり「写真の上にロゴ → 下の白地にクレジット」になる。
    DOM は PC のまま、creditBox を静的に落として order で入れ替え、
    白帯だった .ftLogo を写真の上に重ねている。
    ---------------------------------------------*/
  }
  #whim2026fw .ftBox {
    display: flex;
    flex-direction: column;
  }
  #whim2026fw .ftBox .creditBox {
    order: 2;
    position: static;
    transform: none;
    color: #000;
    padding-top: 7.2vw;
    padding-bottom: 11.9vw;
  }
  #whim2026fw .ftBox .creditBox .season img,
  #whim2026fw .ftBox .creditBox .conceptTtl img {
    filter: invert(1);
  }
  #whim2026fw .ftBox .creditBox .season {
    margin-bottom: 4.2vw;
  }
  #whim2026fw .ftBox .creditBox .season img {
    width: 21.7vw;
  }
  #whim2026fw .ftBox .creditBox .conceptTtl {
    margin-bottom: 6.3vw;
  }
  #whim2026fw .ftBox .creditBox .conceptTtl img {
    width: 31.9vw;
  }
  #whim2026fw .ftBox .creditBox .snsList {
    justify-content: center;
    gap: 3.53vw;
    margin-top: 7.2vw;
    line-height: 0;
  }
  #whim2026fw .ftBox .creditBox .snsList img {
    width: 5.22vw;
    height: auto;
  }
  #whim2026fw .ftBox .bg {
    order: 1;
  }
  #whim2026fw .creditList li {
    margin-bottom: 1.06vw;
  }
  #whim2026fw .creditList li .job {
    font-size: max(11px, 2.5vw);
    margin-bottom: 1px;
  }
  #whim2026fw .creditList li .name {
    font-size: max(12px, 2.8vw);
  }
  #whim2026fw .ftLogo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 62.5vw;
    pointer-events: none;
  }
  #whim2026fw .ftLogo .logo img {
    width: 34.4vw;
    filter: invert(1);
  }


  .all_btn {
    font-size: 21px;
    text-align: center;
    display: block;
    border: 1px solid;
    width: fit-content;
    margin: 80px auto 40px;
    padding: 10px 120px;
}
.all_btn {
    font-size: 16px;
    text-align: center;
    display: block;
    border: 1px solid;
    width: fit-content;
    margin: 30px auto 20px;
    padding: 7px 17vw;
}/*# sourceMappingURL=style.css.map */
}

@media screen and (min-width: 720px) {
  .all_btn {
    font-size: 21px;
    text-align: center;
    display: block;
    border: 1px solid;
    width: fit-content;
    margin: 80px auto 40px;
    padding: 10px 120px;
}
}