/* kaname works 外向けホームページ（作り直し版）
   余白を広く、文字は少なく大きく、制作サンプルの画面を大きく見せる。角は丸めない。 */
:root{
  color-scheme:light;
  --bg:#FFFDFB;        /* ほぼ白 */
  --band:#FFF7F2;      /* ほんのり桜色がかった白 */
  --ink:#232323;       /* 墨色（本文） */
  --sub:#5A5754;       /* 補足の文字 */
  --line:#E2DCD6;      /* 細い線 */
  --accent:#D44E28;    /* 朱色 */
  --accent-deep:#B83F1E;
  --dark:#232323;      /* 最後の帯 */
  --on-dark:#FFFDFB;
  --head:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:"Jost","Zen Kaku Gothic New",sans-serif;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.9;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.35;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
p,dd,li{word-break:keep-all;overflow-wrap:anywhere}
.sp{display:none}
.inner{max-width:var(--wrap);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ヘッダー */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{font-family:var(--latin);font-weight:500;font-size:20px;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.logo span{width:7px;height:7px;background:var(--accent);display:inline-block}
.nav{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;position:relative;padding-block:6px}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--ink);padding:8px 20px!important;transition:background .25s,color .25s}
.nav-cta:hover{background:var(--ink);color:var(--bg)}
.nav-sp{display:none}
.menu-btn{display:none;width:48px;height:48px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:16px}.menu-btn span:nth-child(2){top:23px}.menu-btn span:nth-child(3){top:30px}
.is-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-open .menu-btn span:nth-child(2){opacity:0}
.is-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ボタン */
.btn{display:inline-flex;align-items:center;gap:18px;background:var(--accent-deep);color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:18px;padding:20px 34px;transition:background .25s,transform .25s var(--ease)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover{background:var(--ink)}
.btn:hover .arr{transform:translateX(6px)}
.btn-light{background:var(--on-dark);color:var(--ink)}
.btn-light:hover{background:var(--accent);color:#fff}

/* 最初の画面 */
.hero{padding-block:clamp(56px,9vw,120px) clamp(72px,10vw,150px)}
.hero-kicker{font-size:16px;font-weight:500;color:var(--sub);display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.hero-kicker::before{content:"";width:40px;height:1px;background:var(--ink)}
.kicker-name{font-family:var(--latin);font-size:19px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.kicker-role{padding-left:14px;border-left:1px solid var(--line)}
.hero h1{font-size:clamp(52px,8.4vw,122px);white-space:nowrap;font-weight:900;line-height:1.12;letter-spacing:.01em;margin-top:clamp(20px,3vw,36px)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;margin-top:clamp(32px,5vw,64px)}
.hero-lead{font-family:var(--head);font-weight:500;font-size:clamp(21px,2.5vw,30px);line-height:1.7}
.hero-action{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-note{font-size:15px;color:var(--sub)}

.showcase{position:relative;margin-top:clamp(56px,8vw,112px);padding-bottom:clamp(40px,9vw,120px)}
.shot{border:1px solid var(--line);background:#fff;overflow:hidden;will-change:transform}
.shot-a{width:74%}
.shot-b{position:absolute;right:0;bottom:0;width:46%;box-shadow:0 0 0 10px var(--bg)}
.showcase-cap{position:absolute;left:0;bottom:0;font-size:14px;color:var(--sub);max-width:46%}

/* 節の共通 */
.section{padding-block:clamp(80px,11vw,168px)}
.eyebrow{font-family:var(--latin);font-weight:500;font-size:14px;letter-spacing:.2em;color:var(--accent-deep);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent)}
.sec-head h2{font-size:clamp(34px,5.2vw,68px);font-weight:900;line-height:1.25;margin-top:18px}
.sec-lead{margin-top:28px;max-width:38em}

/* できること：いま → これから */
.shift{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--ink)}
.shift-labels,.shift-row{display:grid;grid-template-columns:minmax(0,5fr) 72px minmax(0,7fr);align-items:center;column-gap:clamp(16px,3vw,40px)}
.shift-labels{font-size:14px;font-weight:500;color:var(--sub);padding-block:14px;border-bottom:1px solid var(--line)}
.shift-row{padding-block:clamp(26px,3.6vw,44px);border-bottom:1px solid var(--line)}
.from{color:var(--sub);font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.to{font-family:var(--head);font-weight:500;font-size:clamp(24px,3.3vw,42px);line-height:1.4}
.to b{font-weight:900;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--accent) 26%,transparent) 68%)}
.to-arr{height:1px;background:var(--ink);position:relative;transform-origin:left}
.to-arr::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.service-after{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(24px,5vw,112px);align-items:start}
.promise{font-family:var(--head);font-weight:700;font-size:clamp(20px,2.1vw,26px);line-height:1.6}
.aside{font-size:16px;color:var(--sub)}

/* 制作サンプル */
.works{background:var(--band)}
.work{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(28px,5vw,80px);align-items:center}
.work:nth-of-type(even) .work-img{order:2}
.work-img{position:relative;border:1px solid var(--line);background:#fff;overflow:hidden}
.work-img img{width:100%;transition:transform 1.2s var(--ease)}
.work:hover .work-img img{transform:scale(1.015)}
.work-img video{display:block;width:100%;height:auto}
.work-body{display:grid;gap:24px}
.work-title{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.work h3{font-size:clamp(26px,3vw,38px);font-weight:900}
.more{font-weight:500;font-size:16px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-flex;gap:8px;transition:color .25s,border-color .25s}
.more:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.more .arr{transition:transform .3s var(--ease)}
.more:hover .arr{transform:translate(3px,-3px)}
.work dl{display:grid;gap:18px}
.work dd{word-break:normal}
.work dl div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:16px;padding-top:18px;border-top:1px solid var(--line)}
.work dt{font-weight:700;font-size:15px;color:var(--accent-deep);padding-top:3px}

/* ご相談の流れ */
.flow{margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.flow li{padding:28px 20px 0 0;position:relative}
.flow li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--accent)}
.flow .no{font-family:var(--latin);font-size:15px;letter-spacing:.1em;color:var(--sub)}
.flow h3{font-size:21px;margin-top:6px}
.flow p{font-size:16px;line-height:1.75;margin-top:10px;word-break:normal}
.flow em{font-style:normal;font-weight:700;font-size:14px;color:var(--accent-deep);display:block;margin-top:8px}
.flow-note{margin-top:clamp(32px,4vw,56px);font-size:16px;color:var(--sub)}

/* kaname works について */
.about{border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(24px,5vw,112px);align-items:start}
.about .sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.5}
.values{margin-top:36px;display:grid;gap:0;border-top:1px solid var(--line)}
.values li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6px 24px;padding-block:20px;border-bottom:1px solid var(--line)}
.values b{font-family:var(--head);font-size:18px}
.values span{font-size:16px;line-height:1.75}

/* お問い合わせ */
.contact{background:var(--dark);color:var(--on-dark);padding-block:clamp(88px,12vw,176px)}
.contact .eyebrow{color:var(--on-dark)}
.contact h2{font-size:clamp(34px,6vw,84px);font-weight:900;line-height:1.25;margin-top:18px}
.contact-lead{margin-top:24px;font-size:18px}
.contact .btn{margin-top:40px}
.contact-note{margin-top:28px;font-size:15px;opacity:.82}

.site-footer{background:var(--dark);color:var(--on-dark);font-size:14px}
.site-footer .inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:28px;border-top:1px solid color-mix(in srgb,var(--on-dark) 22%,transparent)}
.site-footer .logo{font-size:17px}

.to-top{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px;background:var(--bg);border:1px solid var(--ink);opacity:0;pointer-events:none;transition:opacity .3s,background .25s;z-index:15}
.to-top::before{content:"";position:absolute;left:50%;top:54%;width:11px;height:11px;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.to-top.is-shown{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--band)}

/* 動き：最初の画面は読み込み時に順番に出る。ほかはスクロールで出る */
@media (prefers-reduced-motion:no-preference){
  .hero-kicker,.hero h1,.hero-foot,.showcase{animation:rise .9s var(--ease) both}
  .hero h1{animation-delay:.08s}.hero-foot{animation-delay:.22s}.showcase{animation-delay:.36s}
  .hero-kicker::before{animation:draw .9s .2s var(--ease) both;transform-origin:left}
  .motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .motion .reveal.is-in{opacity:1;transform:none}
  .motion .shift-row .to-arr{transform:scaleX(0);transition:transform .9s .25s var(--ease)}
  .motion .shift-row.is-in .to-arr{transform:scaleX(1)}
  .motion .reveal-img{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .motion .reveal-img.is-in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* タブレット以下 */
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--ink);padding:4px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px));font-size:18px}
  .is-open .nav{display:flex}
  .site-header.is-open{border-bottom-color:var(--line);background:var(--bg)}
  .nav .nav-link{display:block;padding:18px 2px;border-bottom:1px solid var(--line)}
  .nav-link::after{display:none}
  .nav .nav-cta{margin-top:22px;padding:18px 20px!important;text-align:center;background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;font-family:var(--head);font-weight:700}
  .flow{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);margin-left:4px}
  .flow li{padding:0 0 30px 26px}
  .flow li:last-child{padding-bottom:0}
  .flow li::before{top:10px;left:-5px}
  .flow .no{display:inline-block;margin-right:10px}
  .flow h3{display:inline-block;margin-top:0}
  .flow em{display:inline-block;margin:0 0 0 8px}
  .about-grid,.service-after,.work{grid-template-columns:1fr}
  .work:nth-of-type(even) .work-img{order:0}
}
/* スマホ */
@media (max-width:640px){
  body{font-size:17px}
  .sp{display:inline}
  .inner{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .site-header .inner{height:62px}
  .kicker-role{flex-basis:100%;padding-left:0;border-left:0}
  .logo{font-size:18px}
  .hero h1{font-size:clamp(56px,17.5vw,84px);white-space:normal}
  .btn{width:100%;justify-content:space-between;padding:20px 24px}
  .hero-action{width:100%}
  .shot-a{width:92%}
  .shot-b{width:62%}
  .showcase{padding-bottom:104px}
  .showcase-cap{max-width:34%;font-size:13px;line-height:1.5}
  .shift-labels{display:none}
  .shift-row{grid-template-columns:1fr;row-gap:10px}
  .to-arr{width:1px;height:26px;margin-left:6px;background:var(--ink);transform-origin:top}
  .to-arr::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .motion .shift-row .to-arr{transform:scaleY(0)}
  .motion .shift-row.is-in .to-arr{transform:scaleY(1)}
  .to{font-size:27px}
  .work dl div{grid-template-columns:1fr;gap:4px}
  .values li{grid-template-columns:1fr}
}