@charset "utf-8";
/* ===================== 変数 ===================== */
.acs-page{
  --acs-bg:#c4c0b4;          /* MV以外の背景色 */
  --acs-mv-bg:#153cb4;       /* MV画像の背景色に合わせる */
  --acs-text:#1a1a1a;
  --acs-sub:#3a3833;
  --acs-line:rgba(0,0,0,.18);
  --acs-gutter:16px;
  --acs-max:1200px;
  --acs-title-overlap:44px;  /* タイトルがMVへ飛び出す量 */
}
@media (min-width:768px){
  .acs-page{ --acs-gutter:40px; --acs-title-overlap:72px; }
}

/* ===================== ベース ===================== */
.acs-page,
.acs-page *{ box-sizing:border-box; }
.acs-page{
  margin:0; background:var(--acs-bg); color:var(--acs-text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:13px; line-height:1.9; letter-spacing:.06em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (min-width:768px){ .acs-page{ font-size:15px; } }
/* リセットは :where() で優先度を下げ、各クラスの余白指定が必ず効くようにする */
:where(.acs-page) img{ display:block; max-width:100%; height:auto; }
:where(.acs-page) a{ color:inherit; text-decoration:none; }
:where(.acs-page) p{ margin:0; }
:where(.acs-page) ul{ list-style:none; margin:0; padding:0; }
/* 見出し(h2)と同じフォント。h2画像で使用したフォント名に差し替え */
.acs-page{ --acs-head-font:"Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP",sans-serif; }

/* ===================== ヘッダー ===================== */
.acs-header{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 var(--acs-gutter);
  background:var(--acs-bg); border-bottom:1px solid var(--acs-line);
}
.acs-header__logo{ font-size:18px; font-weight:700; letter-spacing:.12em; }
.acs-header__nav{ display:flex; gap:20px; font-size:12px; }
.acs-header__nav a:hover{ opacity:.6; }

/* ===================== メインビジュアル ===================== */
.acs-mv{
  position:relative; overflow:hidden;
  height:100vh; height:100svh; min-height:480px;
  background:var(--acs-mv-bg);
  display:flex; align-items:center; justify-content:center;
}
.acs-mv{
  /* MV画像の一辺。SP：画面幅・画面高さ(ヘッダー分を除く)の小さい方 */
  --acs-mv-size:min(100vw, calc(100svh - var(--acs-header-h, 0px)));
}
/* テンプレートの固定ヘッダー(position:fixed)の下から始める。高さはscript.jsが計測 */
main.acs-page{ display:block; padding-top:var(--acs-header-h, 0px); }
.acs-page .acs-mv{ height:calc(100svh - var(--acs-header-h, 0px)); }
@media (min-width:1024px){
  /* PC：700px固定（画面の高さが足りない場合のみ縮小） */
  .acs-mv{ --acs-mv-size:min(700px, calc(100svh - var(--acs-header-h, 0px) - 80px)); }
}
.acs-mv__img{
  width:var(--acs-mv-size);
  aspect-ratio:1/1; object-fit:cover;
  position:relative; z-index:1;   /* 親のflexで上下左右中央 */
}
/* 小物PNG：MV画像に重ならない余白へ配置 */
.acs-mv__acc{ position:absolute; z-index:2; pointer-events:none; }
/* SP・タブレット縦：上下の余白に配置 */
.acs-mv__acc--1{ width:30vw; left:6%;  bottom:calc((100svh - var(--acs-mv-size)) / 2 * .12); }
.acs-mv__acc--2{ width:26vw; right:6%; top:calc((100svh - var(--acs-mv-size)) / 2 * .14); }
.acs-mv__acc--3{ width:22vw; right:10%; bottom:calc((100svh - var(--acs-mv-size)) / 2 * .18); }
/* PC未満で正方形に近い画面は余白がないため非表示 */
@media (max-width:1023px) and (min-aspect-ratio:9/10){
  .acs-mv__acc{ display:none; }
}
/* PC：左右の余白（画像の外側）の中央付近に配置 */
@media (min-width:1024px){
  /* 片側の余白幅（100%＝MVセクション幅。スクロールバー幅のズレを防ぐため100vwではなく%） */
  .acs-mv{ --acs-mv-gap:calc((100% - var(--acs-mv-size)) / 2); }
  .acs-mv__acc{ display:block; transform:translateX(-50%); }
  .acs-mv__acc--1{
    width:min(240px, calc(var(--acs-mv-gap) * .6));
    left:calc(var(--acs-mv-gap) / 2); right:auto; top:auto; bottom:16%;
  }
  .acs-mv__acc--2{
    width:min(200px, calc(var(--acs-mv-gap) * .5));
    left:calc(100% - var(--acs-mv-gap) / 2); right:auto; top:14%; bottom:auto;
  }
  .acs-mv__acc--3{
    width:min(180px, calc(var(--acs-mv-gap) * .45));
    left:calc(100% - var(--acs-mv-gap) / 2); right:auto; top:auto; bottom:14%;
  }
}

/* ----- MV 演出 -----
   1) 登場：メイン画像が少し引きながら現れ、小物が順にポンと出る
   2) 浮遊：小物がゆっくり上下に揺れ続ける
   JSが .acs-mv--anim を付けたときだけ動く（JSなしでも普通に表示される）
   位置合わせの transform と競合しないよう、個別プロパティ(scale/rotate/translate)で動かす */
.acs-mv--anim .acs-mv__img,
.acs-mv--anim .acs-mv__acc{ opacity:0; }
.acs-mv--anim.is-ready .acs-mv__img{
  animation:acs-mv-in 1.4s cubic-bezier(.22,1,.36,1) both;
}
.acs-mv--anim.is-ready .acs-mv__acc{
  animation:
    acs-acc-pop .9s cubic-bezier(.34,1.56,.64,1) both,
    acs-acc-float 4.5s ease-in-out infinite alternate;
}
/* 出る順番・揺れの周期を少しずつずらす */
.acs-mv--anim.is-ready .acs-mv__acc--1{ animation-delay:.7s, 1.6s; animation-duration:.9s, 4.6s; --acs-rot:-10deg; }
.acs-mv--anim.is-ready .acs-mv__acc--2{ animation-delay:.9s, 1.8s; animation-duration:.9s, 5.2s; --acs-rot:8deg; }
.acs-mv--anim.is-ready .acs-mv__acc--3{ animation-delay:1.1s, 2.0s; animation-duration:.9s, 4.0s; --acs-rot:-6deg; }
@keyframes acs-mv-in{
  from{ opacity:0; scale:1.08; }
  to  { opacity:1; scale:1; }
}
@keyframes acs-acc-pop{
  from{ opacity:0; scale:.55; rotate:var(--acs-rot, -8deg); }
  to  { opacity:1; scale:1;   rotate:0deg; }
}
@keyframes acs-acc-float{
  from{ translate:0 0; }
  to  { translate:0 -12px; }
}
@media (prefers-reduced-motion:reduce){
  .acs-mv--anim .acs-mv__img,
  .acs-mv--anim .acs-mv__acc{ opacity:1; animation:none !important; }
}

/* ===================== イントロ ===================== */
.acs-intro{
  max-width:800px; margin:0 auto; padding:0 var(--acs-gutter) 100px;
  text-align:center; position:relative; z-index:3;
}
.acs-intro__title{
  margin:calc(var(--acs-title-overlap) * -1) auto 0;  /* 上部をMVへ飛び出させる */
  width:min(100%, 640px);
}
.acs-intro__title img{ width:100%; }
.acs-intro__text{ margin-top:64px; font-weight:600; line-height:2.1; }
@media (min-width:768px){
  .acs-intro{ padding-bottom:160px; }
  .acs-intro__text{ margin-top:96px; }
}

/* ===================== セクション ===================== */
.acs-sec{
  max-width:var(--acs-max); margin:0 auto;
  padding:0 var(--acs-gutter) 110px;
}
/* 見出し画像：文字の大きさをそろえるため、元画像の幅(--w)に比例して表示幅を決める。
   いちばん長い見出し(2930px)が min(70%, 360px) になる */
.acs-sec__heading{ margin:0 auto 28px; width:calc(min(70%, 360px) * var(--w, 2930) / 2930); }
.acs-sec__heading img{ width:100%; }

/* スライド → テキストの縦並び（PC・SP共通） */
/* スライド・テキスト・アイテムの間隔はすべて --acs-body-gap で統一 */
.acs-sec{ --acs-body-gap:56px; }
.acs-sec__body{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--acs-body-gap);
  margin-bottom:var(--acs-body-gap);   /* テキスト → アイテムエリア */
}
.acs-sec__media{ width:100%; max-width:600px; }   /* スライド表示幅：最大600px */
.acs-sec__text{ display:flex; justify-content:center; }
.acs-sec__text-inner{
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
  height:14em; line-height:2.2; letter-spacing:.16em; font-weight:600;
}
.acs-sec__text-inner p + p{ margin-right:2.2em; }

/* 本文：段落ごとに、右から順にすっと入る（縦書きの読み順） */
.acs-sec__text.acs-fade{ opacity:1; transform:none; }   /* 外枠は動かさず、段落単位で動かす */
.acs-sec__text-inner p{
  opacity:0; transform:translateY(-14px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.acs-sec__text-inner p:nth-child(2){ transition-delay:.18s; }
.acs-sec__text-inner p:nth-child(3){ transition-delay:.36s; }
.acs-sec__text.is-show .acs-sec__text-inner p{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .acs-sec__text-inner p{ opacity:1; transform:none; transition:none; }
}

@media (min-width:768px){
  .acs-sec{ padding-bottom:160px; --acs-body-gap:72px; }
  .acs-sec__heading{ margin-bottom:48px; }
  .acs-sec__text-inner{ height:16em; }
}

/* ----- スライダー ----- */
.acs-slider{ position:relative; }
.acs-slider__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.acs-slider__track::-webkit-scrollbar{ display:none; }
.acs-slider__slide{
  flex:0 0 100%; scroll-snap-align:start;
  aspect-ratio:4/5;   /* 1200×1500px想定 */
  background:rgba(0,0,0,.08);
}
/* 画像全体を表示（比率が違う画像でも切り取らない） */
.acs-slider__slide img{ width:100%; height:100%; object-fit:contain; }
.acs-slider__credit{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px 1.2em;
  margin-top:10px; font-size:10px; line-height:1.7; letter-spacing:.04em; color:var(--acs-sub);
}
.acs-slider__credit span{ margin-right:.5em; opacity:.75; }
.acs-slider__credit a{ text-decoration:underline; text-decoration-color:rgba(0,0,0,.3); text-underline-offset:2px; }
.acs-slider__credit a:hover{ text-decoration-color:currentColor; color:var(--acs-text); }
.acs-slider__credit small{ font-size:1em; }
@media (min-width:768px){ .acs-slider__credit{ font-size:11px; } }
/* ページネーション：スライドの外（下）に配置。背景なし、見出しと同じフォント */
.acs-slider__nav{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-top:16px;
  font-family:var(--acs-head-font); font-weight:700; color:var(--acs-text);
}
.acs-slider__btn{
  padding:4px 6px; border:0; background:none; color:inherit;
  font:inherit; font-size:22px; line-height:1; cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.acs-slider__btn:hover{ opacity:.55; }
.acs-slider__btn--prev:hover{ transform:translateX(-3px); }
.acs-slider__btn--next:hover{ transform:translateX(3px); }
.acs-slider__count{ font-size:13px; letter-spacing:.14em; min-width:4.5em; text-align:center; }
.acs-slider__count b{ font-weight:inherit; }

/* ----- アイテムエリア ----- */
/* SP：1列・画面幅の75%・左右交互（奇数＝左寄せ、偶数＝右寄せ） */
.acs-items{
  display:grid; grid-template-columns:1fr; align-items:start;
  row-gap:44px;
}
.acs-item{ width:75%; }
.acs-item:nth-child(even){ margin-left:auto; }

/* PC：千鳥配置。左列＝1・3、右列＝2・4、アイテム幅380px */
@media (min-width:768px){
  .acs-items{
    grid-template-columns:1fr 1fr;
    --acs-item-w:min(380px, 44%);           /* 44%＝列幅の88%（狭い画面での保険） */
    row-gap:24px; max-width:1000px; margin:0 auto;
    padding-bottom:calc(var(--acs-item-w) * 1.4 + 96px);
  }
  .acs-items .acs-item{ width:min(380px, 88%); }   /* 88%＝列幅に対して */
  /* 横位置：列の中の空きスペースに対する割合（1＝右寄せ、0＝左寄せ） */
  .acs-item:nth-child(1){ margin-left:calc(100% - min(380px, 88%)); translate:none; }
  .acs-item:nth-child(2){ margin-left:calc((100% - min(380px, 88%)) * .2); translate:0 69%; }
  .acs-item:nth-child(3){ margin-left:0; translate:0 60%; }
  .acs-item:nth-child(4){ margin-left:calc((100% - min(380px, 88%)) * .7); translate:0 96%; }
  /* 3アイテムの場合：最後は左列の3なので下余白を詰める */
  .acs-items:has(> .acs-item:nth-child(3):last-child){ padding-bottom:calc(min(380px, 44%) * .9 + 72px); }
}
.acs-item__img{ display:block; overflow:hidden; aspect-ratio:4/5; background:rgba(0,0,0,.08); }
.acs-item__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.acs-item__img:hover img{ transform:scale(1.04); }
.acs-item__desc{ margin-top:14px; font-size:12px; font-weight:600; line-height:1.9; }
.acs-item__credit{ margin-top:10px; font-size:11px; color:var(--acs-sub); letter-spacing:.04em; line-height:1.6; }
.acs-item__credit li + li{ margin-top:6px; }
/* リンク：アイテム名＋矢印。ホバーで下線が伸び、矢印が少し動く */
.acs-credit__link{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--acs-text); font-weight:600;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .35s ease;
}
.acs-credit__link::after{ content:"→"; font-weight:400; transition:transform .25s ease; }
.acs-credit__link:hover{ background-size:100% 1px; }
.acs-credit__link:hover::after{ transform:translateX(3px); }
.acs-credit__text{ font-weight:600; }
/* 補足（近日発売・お問い合わせなど） */
.acs-credit__note{
  display:inline-block; margin-left:.6em; padding:0 .5em;
  border:1px solid currentColor; font-size:.85em; line-height:1.6; vertical-align:.08em;
}
@media (min-width:768px){
  .acs-item__desc{ font-size:13px; padding:0 4px; }
  .acs-item__credit{ font-size:11px; padding:0 4px; }
}

/* ----- リンクエリア ----- */
.acs-links{
  display:grid; grid-template-columns:1fr; gap:12px;
  max-width:640px; margin:48px auto 0;
}
@media (min-width:600px){ .acs-links{ grid-template-columns:1fr 1fr; } }
@media (min-width:768px){ .acs-links{ margin-top:64px; } }
.acs-links__btn{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border:1px solid var(--acs-text);
  font-size:13px; font-weight:600; transition:background .25s, color .25s;
}
.acs-links__btn::after{ content:"→"; }
.acs-links__btn:hover{ background:var(--acs-text); color:var(--acs-bg); }

/* ===================== フッター ===================== */
.acs-footer{
  border-top:1px solid var(--acs-line);
  padding:48px var(--acs-gutter) 32px; text-align:center;
}
.acs-footer__top{ display:inline-block; margin-bottom:28px; font-size:12px; letter-spacing:.2em; }
.acs-footer__nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px 24px; font-size:12px; }
.acs-footer__copy{ margin-top:28px; font-size:10px; color:var(--acs-sub); }

/* ===================== フェードイン ===================== */
.acs-fade{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.acs-fade.is-show{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .acs-fade{ opacity:1; transform:none; transition:none; }
  .acs-slider__track{ scroll-behavior:auto; }
}