/*
 * WELUCA 制作事例テンプレート
 * このファイルを変更すると、page-case-study.php を使う全事例へ一括反映される。
 */

/* 埋め込みURLがない事例の見出し */
.case-study .seo-detail-head{position:relative;text-align:left;margin-bottom:42px;padding:28px 0 42px;border:0;border-bottom:1px solid #eadbd6;border-radius:0;background:transparent;box-shadow:none}
.case-study .seo-detail-head::before{display:none}
.case-study .seo-detail-head::after{content:"";position:absolute;right:0;bottom:24px;width:86px;height:1px;background:#d6a8a1;box-shadow:0 7px 0 rgba(214,168,161,.42)}
.case-study .seo-detail-head .kicker{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:#9f312c;font-size:11px;letter-spacing:.24em}
.case-study .seo-detail-head .kicker::before{content:"";width:30px;height:1px;background:#c92727}
.case-study-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin:0 0 18px;color:#514747}
.case-study-client,.case-study-date{display:flex;align-items:center;gap:12px;margin:0}
.case-study-client span,.case-study-date span{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border:1px solid #e5beb8;border-radius:999px;background:rgba(255,255,255,.76);color:#a43b34;font-size:10px;font-weight:800;letter-spacing:.16em}
.case-study-client strong,.case-study-date strong{font-size:15px;font-weight:750;letter-spacing:.035em}
.case-study-date{position:relative;padding-left:28px}
.case-study-date::before{content:"";position:absolute;left:0;width:1px;height:24px;background:#dfc6c1}
.case-study-date small{color:#887b79;font-size:10px;letter-spacing:.08em}
.case-study .seo-detail-head h1{max-width:720px;margin:0;color:#322d2d;font-size:40px;line-height:1.38;letter-spacing:.015em}
.case-study .seo-detail-lead{max-width:690px;margin:24px 0 0;padding-top:22px;border-top:1px solid rgba(170,112,104,.25);color:#5d5553;font-size:16px;line-height:1.95}

/* 実サイトと案件情報を一体化した可変FV */
.case-study-fv{--case-page-bg:#fff9f5;margin:0 0 72px}
.case-study-fv-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:0 0 13px;border-bottom:1px solid #d9cfcc}
.case-study-fv-top .kicker{display:flex;align-items:center;gap:11px;margin:0;color:#9f312c;font-size:10px;font-weight:850;letter-spacing:.22em}
.case-study-fv-top .kicker::before{content:"";width:28px;height:1px;background:#c92727}
.case-site-preview{position:relative;width:100%;aspect-ratio:16/10;margin:0;overflow:hidden;border:0;border-radius:10px;background:var(--case-page-bg)}
.case-site-clip-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.case-site-preview-frame{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border:0;border-radius:0;background:#fff;-webkit-clip-path:url(#case-site-fv-shape);clip-path:url(#case-site-fv-shape)}
.case-site-preview iframe{position:absolute;left:0;top:0;display:block;width:200%;height:200%;border:0;background:#fff;transform:scale(.5);transform-origin:0 0}
.case-study-fv-copy{--case-meta-tier-height:clamp(42px,4.4vw,54px);position:absolute;z-index:3;right:0;bottom:0;display:flex;align-items:flex-end;box-sizing:border-box;width:max-content;min-width:56%;max-width:94%;height:auto;padding:8px 40px 0 48px;border-radius:0;background:transparent}
.case-study .case-study-fv-date{position:absolute;right:0;bottom:calc(100% + var(--case-meta-tier-height));display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;height:var(--case-meta-tier-height);margin:0;padding:0 34px;color:#9f312c;font-size:10px;font-weight:850;letter-spacing:.14em;white-space:nowrap}
.case-study .case-study-fv-date strong{color:#554a49;font-size:14px;letter-spacing:.06em}
.case-study .case-study-fv-client{position:absolute;right:0;bottom:100%;display:flex;align-items:center;justify-content:center;width:max-content;height:var(--case-meta-tier-height);margin:0;padding:0 42px;border-radius:0;background:transparent;color:#9f312c;font-size:15px;font-weight:850;letter-spacing:.08em;white-space:nowrap}
.case-study-fv-copy h1{margin:0;color:#292525;font-size:30px;font-weight:820;line-height:1.42;letter-spacing:.015em;white-space:nowrap}

/* 共通データから生成する制作概要表 */
.case-study .seo-detail-content .case-overview{width:100%;margin:34px 0 52px;border:0;border-collapse:collapse;background:transparent;font-size:inherit}
.case-study .case-overview tr{border-top:1px solid #d9cfcc}
.case-study .case-overview tr:last-child{border-bottom:1px solid #d9cfcc}
.case-study .case-overview th,.case-study .case-overview td{border:0;background:transparent;text-align:left;vertical-align:top}
.case-study .case-overview th{width:142px;padding:21px 24px 21px 0;color:#8f332f;font-size:11px;font-weight:850;letter-spacing:.13em;line-height:1.6;white-space:nowrap}
.case-study .case-overview td{padding:18px 0 19px;color:#373231;font-size:15px;line-height:1.8}
.case-study .case-overview tr:first-child{border-top:0}
.case-study .case-overview tr:first-child td{padding:24px 0 25px;color:#292525;font-size:19px;font-weight:800;line-height:1.6;text-align:left;white-space:nowrap}
.case-study .case-overview a{display:inline;border:0;border-bottom:1px solid #c88f89;border-radius:0;background:transparent;color:#98332f;font-size:14px;font-weight:750;text-decoration:none;word-break:break-all}
.case-study .case-overview a:hover{border-bottom-color:#c92727;color:#c92727}

@media (max-width:600px){
  .case-study .seo-detail-head{padding:20px 0 34px;border-radius:0}
  .case-study .seo-detail-head::after{right:0;bottom:18px;width:56px}
  .case-study .seo-detail-head .kicker{margin-bottom:20px}
  .case-study-meta{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:17px}
  .case-study-client,.case-study-date{gap:9px}
  .case-study-date{padding-left:0}
  .case-study-date::before{display:none}
  .case-study-client strong,.case-study-date strong{font-size:14px}
  .case-study .seo-detail-head h1{font-size:28px;line-height:1.45}
  .case-study .seo-detail-lead{margin-top:19px;padding-top:18px;font-size:15px;line-height:1.9}
  .case-study-fv{margin-bottom:52px}
  .case-study-fv-top{margin-bottom:13px}
  .case-site-preview{aspect-ratio:auto;overflow:visible;border-radius:8px}
  .case-site-preview-frame{position:relative;width:100%;height:auto;aspect-ratio:16/10;border-radius:8px;-webkit-clip-path:none;clip-path:none}
  .case-site-preview iframe{width:100%;height:100%;transform:none}
  .case-study-fv-copy{position:relative;display:block;width:100%;min-width:0;max-width:none;height:auto;padding:24px 0 0;border-radius:0}
  .case-study .case-study-fv-date{position:static;display:flex;width:100%;height:auto;margin:0 0 8px;padding:0;gap:8px;font-size:9px}
  .case-study .case-study-fv-date strong{font-size:11px}
  .case-study .case-study-fv-client{position:static;display:block;width:100%;height:auto;margin:0 0 8px;padding:0;border-radius:0;background:transparent;font-size:10px}
  .case-study-fv-copy h1{font-size:24px;line-height:1.5;white-space:normal}
  .case-study .case-overview{margin:28px 0 44px}
  .case-study .case-overview th{width:92px;padding:17px 12px 17px 0;font-size:10px;white-space:normal}
  .case-study .case-overview td{padding:14px 0 15px;font-size:14px;line-height:1.75}
  .case-study .case-overview tr:first-child td{padding:20px 0 21px;font-size:17px}
  .case-study .case-overview a{font-size:12px}
}