/* 採用案はアコーディオン。比較用レールは明示したURLから参照できる。 */
.demo-comparison{--gallery-gap:16px;--gallery-ease:cubic-bezier(.22,.8,.22,1);min-width:0}
.demo-comparison[hidden],.demo-comparison [hidden],.home-demo-grid[hidden]{display:none!important}
.gallery-comparison-tools{display:flex;align-items:center;justify-content:flex-end;gap:15px;margin:-12px 0 30px;font-size:12px;color:#687487}
.gallery-comparison-tools>div{display:flex;gap:4px;padding:4px;background:#f1f3f6;border-radius:9px}
.gallery-comparison-tools button{border:0;background:transparent;border-radius:6px;padding:8px 13px;font-size:12px;line-height:1.6;min-height:36px;color:#626973}
.gallery-comparison-tools button[aria-pressed="true"]{background:white;color:var(--ink);box-shadow:0 1px 5px #16263b12}
.gallery-comparison-tools button:hover{color:var(--blue)}
.gallery-rail{display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:6px 12px;scroll-padding-inline:0}
.gallery-rail::-webkit-scrollbar{display:none}
.gallery-rail-card{flex:0 0 min(760px,68%);min-width:0;scroll-snap-align:center}
.gallery-rail-preview{display:block;width:100%;position:relative;border:0;padding:0;overflow:hidden;border-radius:10px;background:#eef0f3;isolation:isolate;aspect-ratio:12/7;box-shadow:0 0 0 1px #1823320d}
.gallery-rail-preview>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:filter .35s}
.gallery-preview-prompt{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;background:#ffffffea;backdrop-filter:blur(8px);border:1px solid #fff;border-radius:6px;padding:10px 14px;font-size:13px;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s}
.gallery-preview-prompt svg,.gallery-elastic-open svg{width:18px;height:18px}
.gallery-rail-preview:hover .gallery-preview-prompt,.gallery-rail-preview:focus-visible .gallery-preview-prompt{opacity:1;transform:none}
.gallery-caption{min-width:0}
.gallery-rail-card>.gallery-caption{padding:22px 2px 0}
.gallery-meta{display:flex;align-items:center;gap:13px;font-size:12px;line-height:1.5;color:#697381;font-weight:500}
.gallery-meta>span+span{border-left:1px solid #d5dae1;padding-left:13px}
.home-content .gallery-caption h3{font-size:20px;font-weight:500;line-height:1.5;margin:9px 0 0;white-space:nowrap;text-wrap:initial}
.gallery-rail-footer{display:flex;align-items:center;justify-content:space-between;margin-top:25px;gap:20px}
.gallery-gesture{font-size:13px;color:#707985}
.gallery-pagination{display:flex;align-items:center;gap:10px;flex-shrink:0}
.gallery-pagination [data-rail-status]{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-right:18px;color:#677183}
.gallery-pagination button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #d9dfe6;border-radius:50%;background:#fff}
.gallery-pagination button:first-of-type svg{transform:rotate(180deg)}
.gallery-pagination button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.gallery-pagination button:disabled{opacity:.28}
.gallery-pagination svg{width:19px;height:19px}
.gallery-elastic{display:flex;gap:var(--gallery-gap);height:550px;max-width:1400px;margin-inline:auto;container-type:inline-size}
/* clipはフォーカス移動によるカード内部の意図しないスクロールも防ぐ。 */
.gallery-elastic-card{flex:1 1 0;min-width:0;position:relative;overflow:clip;isolation:isolate;border-radius:10px;background:#e9edf1;transition:flex-grow .65s var(--gallery-ease);box-shadow:0 0 0 1px #1823320d}
.gallery-elastic-card[data-active="true"]{flex-grow:4}
/* 展開幅に画像の全幅を合わせる。高さは等比で伸ばし、見切れるのはページ下端だけ。 */
.gallery-elastic-card>img{position:absolute;top:0;left:50%;width:calc((100cqw - 4 * var(--gallery-gap))/2);height:auto;max-width:none;transform:translateX(-50%)}
.gallery-elastic-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#1320330a 10%,#111a2920 48%,#101723d9 100%);opacity:.88;transition:opacity .5s}
.gallery-elastic-card[data-active="true"]::after{opacity:1;background:linear-gradient(180deg,transparent 44%,#1017231a 65%,#101723e0 100%)}
.gallery-elastic-toggle{position:absolute;inset:0;z-index:1;border:0;background:transparent;padding:0;color:#fff;overflow:hidden}
.gallery-elastic-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:-5px;border-radius:10px}
.gallery-collapsed-name{position:absolute;bottom:28px;left:50%;writing-mode:vertical-rl;white-space:nowrap;font-size:16px;line-height:1.4;font-weight:500;letter-spacing:.1em;transform:translateX(-50%);transition:opacity .2s}
.gallery-elastic-card[data-active="true"] .gallery-collapsed-name{opacity:0}
.gallery-elastic-content{position:absolute;z-index:2;inset:auto 24px 23px;display:flex;align-items:end;justify-content:space-between;gap:18px;opacity:0;transform:translateY(8px);pointer-events:none;color:#fff;transition:opacity .2s,transform .4s var(--gallery-ease);min-width:270px}
.gallery-elastic-card[data-active="true"] .gallery-elastic-content{opacity:1;transform:none;transition-delay:.22s;pointer-events:auto}
.gallery-elastic-content .gallery-meta{align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:13px;color:#ffffffe0}
.gallery-elastic-content .gallery-meta>span+span{border:0;padding:0}
.gallery-elastic-content .gallery-id{display:inline-flex;align-items:center;padding:3px 8px;background:#fff;color:var(--ink);border-radius:3px;line-height:1.4;white-space:nowrap}
.gallery-elastic-content .gallery-industry{white-space:nowrap}
.gallery-elastic-content .gallery-caption h3{font-size:22px;line-height:1.4}
.gallery-elastic-open{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff66;background:#ffffff14;backdrop-filter:blur(8px);color:white;border-radius:5px;min-height:42px;padding:8px 13px;white-space:nowrap;font-size:13px;flex-shrink:0}
.gallery-elastic-open svg{display:block;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.gallery-elastic-open:hover{background:white;color:var(--ink)}
@media(max-width:1100px){
  .gallery-elastic-content{inset-inline:18px;display:block;bottom:18px}
  .gallery-elastic-open{margin-top:13px;width:max-content}
  .gallery-elastic-content .gallery-caption h3{font-size:20px}
}
@media(max-width:767px){
  .gallery-comparison-tools{margin:0 0 24px;justify-content:flex-start;gap:12px}
  .gallery-comparison-tools>span{display:none}
  .gallery-comparison-tools button{font-size:12px;padding:9px 13px}
  .gallery-rail{gap:16px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .gallery-rail-card{flex-basis:88%}
  .gallery-rail-preview{border-radius:7px}
  .gallery-rail-card>.gallery-caption{padding-top:17px}
  .home-content .gallery-caption h3{font-size:18px;margin-top:7px}
  .gallery-meta{font-size:10px;gap:8px}
  .gallery-meta>span+span{padding-left:8px}
  .gallery-rail-footer{margin-top:18px;justify-content:flex-end}
  .gallery-gesture{display:none}
  .gallery-pagination button{width:40px;height:40px}
  .gallery-elastic{--gallery-open-ratio:1.2;flex-direction:column;height:auto;gap:9px}
  .gallery-elastic-card{flex:0 0 auto;height:62px;transition:height .55s var(--gallery-ease);border-radius:8px}
  /* 6:5を幅から計算し、比率と開閉中の高さアニメーションを両立する。 */
  .gallery-elastic-card[data-active="true"]{aspect-ratio:var(--gallery-open-ratio);height:calc(100cqw / var(--gallery-open-ratio))}
  .gallery-elastic-card>img{top:50%;width:100%;transform:translate(-50%,calc(-1 * clamp(145.7px,35.34vw,217px)));transition:top .55s var(--gallery-ease),transform .55s var(--gallery-ease)}
  .gallery-elastic-card[data-active="true"]>img{top:0;transform:translate(-50%,0)}
  .gallery-elastic-card::after{background:#13203370}
  .gallery-elastic-card[data-active="true"]::after{background:linear-gradient(180deg,transparent 30%,#1017231a 45%,#101723e6 100%)}
  .gallery-collapsed-name{writing-mode:horizontal-tb;transform:none;left:18px;bottom:20px;font-size:14px;letter-spacing:0}
  .gallery-elastic-toggle::after{content:"+";position:absolute;right:18px;bottom:17px;font-size:20px;font-weight:400;line-height:28px;transition:opacity .2s}
  .gallery-elastic-card[data-active="true"] .gallery-elastic-toggle::after{opacity:0}
  .gallery-elastic-content{min-width:0;inset:auto 18px 17px;display:flex;align-items:end;gap:8px}
  .gallery-elastic-content .gallery-meta{flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;line-height:1.5}
  .gallery-elastic-content .gallery-caption h3{font-size:17px}
  .gallery-elastic-open{font-size:11px;min-height:38px;padding:7px 9px;margin:0;gap:5px}
  .gallery-elastic-open svg{flex-basis:15px;width:15px;height:15px}
}
@media(max-width:359px){.gallery-elastic-content{display:block}.gallery-elastic-open{margin-top:10px;width:max-content}}
@media(min-width:768px) and (hover:hover) and (pointer:fine){.gallery-elastic-toggle{cursor:default}}
@media(prefers-reduced-motion:reduce){.demo-comparison *{scroll-behavior:auto!important;transition:none!important}}