/* Service の棚（site/service/index.html から。#service の中だけに効く） */

  #service .service{padding:96px 24px 120px}
  #service .head{max-width:1120px;margin:0 auto 40px}
  #service .label{font:600 13px/1 'Outfit',sans-serif;letter-spacing:.32em;color:var(--sub)}
  #service .label::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-left:8px;vertical-align:middle}
  #service h2{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:.06em;margin-top:14px}
  #service .lead{margin-top:14px;font-size:14px;line-height:1.9;letter-spacing:.06em;color:var(--sub)}

  #service /* 棚：生成りの壁に白い棚板2段。寸法は棚の幅（cqw）で決める */
  .shelf{max-width:1120px;margin:0 auto;background:var(--cream);border-radius:28px;padding:48px 4% 28px;container-type:inline-size;
    box-shadow:0 30px 60px rgba(21,26,89,.08)}
  #service /* 1段＝3列。上の行に説明、下の行に品物（棚板の上に乗る）。説明と品物は列の中央でそろえる（2026-10-20 本人） */
  .tier{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;column-gap:2cqw;row-gap:3cqw;padding:0 1cqw;position:relative;z-index:1}
  #service .tier + .board + .tier{margin-top:6cqw}
  #service .tier > .cap{grid-row:1;align-self:start;justify-self:center}
  #service .tier > .item, #service .tier > .poster-set{grid-row:2;align-self:end;justify-self:center}
  #service .board{height:2.2cqw;min-height:12px;background:linear-gradient(#fff,#f3efe9);border-radius:6px;margin:0 -2cqw;position:relative;
    box-shadow:0 1.6cqw 2.4cqw rgba(21,26,89,.10),0 1px 0 rgba(21,26,89,.05)}

  #service /* 品物（クリックで詳しいページへ） */
  .item{position:relative;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  #service .item img{display:block;width:100%;height:auto;position:relative;z-index:1}
  #service .item::after{content:'';position:absolute;left:12%;right:12%;bottom:-.6cqw;height:1.6cqw;border-radius:50%;background:radial-gradient(rgba(21,26,89,.28),rgba(21,26,89,0) 70%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
  #service .item:hover, #service .item:focus-visible{transform:translateY(-1cqw)}
  #service .item:hover::after, #service .item:focus-visible::after{transform:translateY(1cqw) scale(1.15);opacity:.6}
  #service /* 画像が届くまでの枠（画像スロット） */
  .item.slot{border:1.5px dashed #b9bccd;border-radius:10px;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font:500 12px/1.5 'Outfit',sans-serif;color:#8a8ea8;text-align:center}
  #service .item.slot img{display:none}

  #service .laptop{width:36cqw;aspect-ratio:3/2}
  #service .phone{width:8.5cqw;aspect-ratio:2/3.4}
  #service .poster-set{position:relative;display:block}
  #service .poster{width:16cqw;aspect-ratio:2/3}
  #service .flyer{width:9cqw;aspect-ratio:2/3;position:absolute!important;right:-5cqw;bottom:0}   #service /* 額の中心を列の中央に。チラシは右に添える */
  .cards{width:20cqw;aspect-ratio:3/2}
  #service .pamphlet{width:18cqw;aspect-ratio:3/2}
  #service .logo-block{width:12cqw;aspect-ratio:1}
  #service .item:not(.slot){aspect-ratio:auto}   #service /* 画像が届いたら、画像の縦横比のまま */

  .cap{text-align:center;min-width:0}
  #service .cap b{display:block;font-size:clamp(13px,1.7cqw,17px);letter-spacing:.06em}
  #service .cap span{display:block;margin-top:.6em;font-size:clamp(11px,1.15cqw,13px);line-height:1.7;color:var(--sub);letter-spacing:.04em}
  #service .cap a{display:inline-block;margin-top:1em;font:500 clamp(11px,1.15cqw,13px)/1 'Outfit',sans-serif;letter-spacing:.14em;border:1px solid var(--navy);border-radius:99px;padding:.7em 1.2em}
  #service .cap a:hover{background:var(--navy);color:#fff}

  #service /* 棚まるごと＝開業コンプリートパック */
  .pack{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4cqw -2cqw 0;padding:2.4cqw 3cqw;border-top:1px dashed #d8d2c8}
  #service .pack p{font-size:clamp(13px,1.5cqw,16px);letter-spacing:.06em;line-height:1.7}
  #service .pack p small{display:block;color:var(--sub);font-size:.82em}
  #service .pack a{flex:none;background:var(--navy);color:#fff;border-radius:99px;padding:14px 22px;font:500 14px/1 'Outfit',sans-serif;letter-spacing:.12em}
  #service .pack a i{font-style:normal;color:var(--coral)}

  #service /* 置かれる動き（棚が画面に入ったら） */
  .tier .item, #service .tier .poster-set{opacity:0;transform:translateY(-6cqw)}
  #service .shelf.in .tier .item, #service .shelf.in .tier .poster-set{animation:put .62s calc(var(--i) * .09s) both}
  #service .shelf .tier .poster-set .item{opacity:1;transform:none;animation:none}   #service /* 額とチラシは組（poster-set）ごと置く */
  .shelf .tier .poster-set .item:hover{transform:translateY(-1cqw)}
  #service .shelf.in .tier .item:hover{animation:none;opacity:1;transform:translateY(-1cqw)}
  @keyframes put{0%{opacity:0;transform:translateY(-6cqw)}55%{opacity:1;transform:translateY(0) scale(1.03,.95)}72%{transform:translateY(-1.2cqw) scale(.99,1.02)}100%{opacity:1;transform:none}}

  #service /* スマホ：段は1列のまま品物を小さく並べ、説明文は隠して名前とボタンだけ */
  @container (max-width: 640px){
    #service .tier{column-gap:2cqw;row-gap:4cqw;padding:0}
    #service .laptop{width:30cqw}#service .phone{width:10cqw}#service .poster{width:20cqw}#service .flyer{width:12cqw;right:-6cqw}
    #service .cards{width:30cqw}#service .pamphlet{width:27cqw}#service .logo-block{width:18cqw}
    #service .cap span{display:none}
    #service .cap b{font-size:11.5px;letter-spacing:0;word-break:keep-all}
    #service .cap a{font-size:11px;padding:.6em .9em;letter-spacing:.06em}
    #service .pack{flex-direction:column;align-items:flex-start;padding:5cqw 4cqw}
  }
  @media (prefers-reduced-motion: reduce){#service .tier .item, #service .tier .poster-set{opacity:1!important;transform:none!important;animation:none!important}}
  #service .shelf.still .tier .item, #service .shelf.still .tier .poster-set{opacity:1!important;transform:none!important;animation:none!important}