/* 案C「名刺」 有限会社日光自動車整備工場 2026-10-03 */
:root{
  --ink:#161616;
  --deep:#1f4d34;
  --mid:#2f6a49;
  --pale:#d9e5dd;
  --pale2:#eef4f0;
  --line:#bfc6c2;
  --paper:#fff;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:17px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;display:block}
.num{text-orientation:upright}

/* ヘッダー */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  height:52px;
  display:flex;
  align-items:center;
}
.site-header-inner{
  width:100%;
  padding:0 20px;
}
.shop-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.shop-name-full{font-weight:700}

/* 名刺の節 */
.card-area{position:relative}
.card-stage{
  height:200svh;
  position:relative;
}
.stage{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:6px;
  overflow:hidden;
  background:var(--paper);
}
.card-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.card{
  position:relative;
  width:260px;
  height:420px;
}
.face{
  position:absolute;
  inset:0;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:4px 4px 0 var(--pale);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  padding:10px 16px;
  display:flex;
}
.face.front{
  align-items:center;
  justify-content:center;
}

/* 表（縦書き） */
.meishi-text{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  height:100%;
}
.meishi-info{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:13px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--ink);
  height:100%;
  word-break:keep-all;
}
.meishi-info .sub{display:inline-block;margin-top:14px}
.meishi-brand{
  margin:0;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Zen Old Mincho",serif;
  font-weight:700;
  letter-spacing:.02em;
  height:100%;
}
.meishi-brand .suffix{
  display:block;
  font-size:14px;
  line-height:1;
  letter-spacing:.1em;
  margin-left:10px;
}
.meishi-brand .brand{
  font-size:40px;
  line-height:1;
  white-space:nowrap;
}
.meishi-mark{
  position:absolute;
  left:20px;
  bottom:22px;
  width:24px;
  height:2px;
  background:var(--deep);
}

/* 裏（横書き） */
.back-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.back-label{
  font-size:14px;
  color:#555;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.back-jobs li{
  font-size:40px;
  font-weight:700;
  font-family:"Zen Old Mincho",serif;
  padding:4px 0;
  line-height:1.3;
  word-break:keep-all;
}
.back-jobs li+li{border-top:1px solid var(--pale)}
.back-cert{font-size:14px;color:#555;margin-top:10px}
.back-num{font-size:20px;font-weight:700;margin-top:4px}
.back-assoc{
  white-space:nowrap;font-size:13px;color:#555;margin-top:4px;line-height:1.5}
.back-tagline{font-size:14px;line-height:1.6;margin-top:10px}

/* 裏面を見るボタン */
.flip-btn{
  min-height:44px;
  padding:0 21px;
  border:2px solid var(--deep);
  background:var(--paper);
  color:var(--deep);
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
}
.flip-btn:hover{background:var(--pale2)}
.flip-btn:active{transform:translateY(1px)}
.flip-btn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* 見出し共通（本文セクション） */
.jobs h2,.office h2,.contact h2{
  font-family:"Zen Old Mincho",serif;
  font-weight:700;
  font-size:28px;
  line-height:1.4;
  word-break:keep-all;
  margin-bottom:28px;
}

/* 頼める仕事 */
.jobs{background:var(--paper);padding:56px 20px}
.jobs-inner{max-width:560px;margin:0 auto}
.job-list li{
  padding:18px 0;
  border-top:1px solid var(--pale);
}
.job-list li:last-child{border-bottom:1px solid var(--pale)}
.job-name{font-size:22px;font-weight:700;word-break:keep-all}
.cert-block{margin-top:24px}
.cert-block p{font-size:17px;line-height:1.8;margin-top:6px}
.cert-block p:first-child{margin-top:0}

/* 事業所 */
.office{background:var(--paper);padding:56px 20px;border-top:1px solid var(--pale)}
.office-inner{max-width:560px;margin:0 auto}
.office-row{
  display:grid;
  grid-template-columns:5.5em 1fr;
  gap:4px 16px;
  padding:14px 0;
  border-top:1px solid var(--pale);
}
.office-row:first-child{border-top:none}
.office-row dt{font-size:15px;color:#555}
.office-row dd{font-size:17px;line-height:1.8}
.map-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  margin-top:26px;
  border:2px solid var(--deep);
  background:var(--paper);
  color:var(--deep);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
}
.map-btn:hover{background:var(--pale2)}
.map-btn:active{transform:translateY(1px)}
.map-btn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* ご相談の窓口 */
.contact{background:var(--pale2);padding:56px 20px}
.contact-inner{max-width:560px;margin:0 auto}
.contact-lead{font-size:17px;line-height:1.8;margin-bottom:28px}
.contact-buttons{display:flex;flex-direction:column;gap:12px}
.contact-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  background:var(--deep);
  color:#fff;
  font-size:17px;
  font-weight:700;
  text-decoration:none;
  border-radius:0;
  border:none;
}
.contact-btn:hover{background:var(--mid)}
.contact-btn:active{transform:translateY(2px)}
.contact-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.contact-demo-note{font-size:15px;color:#555;margin-top:14px}
.contact-assure{font-size:17px;line-height:1.8;margin-top:18px}

/* フッター */
footer{background:var(--paper);border-top:1px solid var(--pale)}
.ft-note{padding:28px 20px;font-size:13.5px;line-height:1.8;color:#555}
.ft-note b{color:var(--ink)}
.credit{
  padding:0 20px 28px;
  font-size:12.5px;
  color:#888;
  text-align:center;
}

/* ===== 名刺：JSなし／reduced-motion の既定＝縦に2枚並べて静止表示 ===== */
.card-stage{height:auto}
.stage{
  position:static;
  height:auto;
  padding:40px 0;
}
.card{position:static;width:260px;height:auto;margin:0 auto}
.card-wrap{padding:0 20px}
.face{
  position:static;
  width:260px;
  height:420px;
  margin:0 auto;
}
.face.back{margin-top:22px}
.flip-btn{display:none}

/* ===== JSあり：3D sticky flip を有効化 ===== */
html.js .card-stage{height:200svh}
html.js .stage{position:sticky;top:0;height:100svh;padding-top:6px}
html.js .card-wrap{padding:0}
html.js .card{
  position:relative;
  width:260px;
  height:420px;
  perspective:1200px;
  -webkit-perspective:1200px;
}
html.js .card-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
html.js .card-inner.card-anim{transition:transform .5s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: reduce){
  html.js .card-inner.card-anim{transition:none}
}
html.js .face{
  position:absolute;
  width:100%;
  height:100%;
  margin:0;
}
html.js .face.back{margin-top:0;transform:rotateY(180deg)}
html.js .flip-btn{display:inline-flex;align-items:center;justify-content:center}

/* reduced-motion は js クラスがあっても静止の2枚並び表示へ戻す */
@media (prefers-reduced-motion: reduce){
  html.js .card-stage{height:auto}
  html.js .stage{position:static;height:auto;padding:40px 0}
  html.js .card-wrap{padding:0 20px}
  html.js .card{position:static;width:260px;height:auto;margin:0 auto;perspective:none}
  html.js .card-inner{position:static;transform:none !important}
  html.js .face{position:static;width:260px;height:420px;transform:none !important;margin:0 auto}
  html.js .face.back{margin-top:22px}
  html.js .flip-btn{display:none}
}

/* 下の固定ボタン（高さ約56px）に重ならないよう最後のセクションに余白 */
.contact{padding-bottom:calc(56px + 56px)}

/* ===== 1024px 以上：名刺は左40%にstickyで残り、右60%に本文を流す ===== */
@media (min-width:1024px){
  .site-header{height:auto;padding:22px 0}
  .site-header-inner{padding:0 40px}
  .shop-name{font-size:44px;font-family:"Zen Old Mincho",serif;font-weight:700;line-height:1.15;white-space:normal}
  .shop-name-full{font-size:.36em;display:block;font-weight:400;margin-bottom:2px}

  #hero-wrap{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:40% 60%;
    column-gap:0;
    align-items:start;
  }
  .card-area{grid-column:1;grid-row:1 / 3}
  .jobs{grid-column:2;grid-row:1}
  .office{grid-column:2;grid-row:2}
  .jobs,.office{border-top:none}
  .jobs-inner,.office-inner{max-width:620px;margin:0;padding:0 40px}
  .jobs{padding-top:64px;padding-bottom:28px}
  .office{padding-top:28px;padding-bottom:64px}

  .card-stage{height:auto}
  .stage{position:sticky;top:112px;height:calc(100vh - 112px);padding:0}
  .card{width:360px;height:596px}
  .face{width:360px;height:596px}
  .meishi-brand .brand{font-size:48px}

  html.js .card-stage{height:auto}
  html.js .stage{
    position:sticky;
    top:112px;
    height:calc(100vh - 112px);
    padding:0;
  }
  html.js .card{width:360px;height:596px}
  html.js .face{width:100%;height:100%}

  .contact{padding-bottom:40px}
  .contact-inner{max-width:1100px;margin:0 auto;padding:0 40px}
}

@media (min-width:1024px) and (prefers-reduced-motion: reduce){
  html.js .stage{position:static;height:auto;padding:40px 0}
  html.js .card{width:360px;height:auto}
  html.js .face{width:360px;height:596px;position:static}
}

/* 見比べ用の切り替えバー（デモだけ） */
.hk-switch{position:fixed;top:0;left:0;right:0;z-index:9600;height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#111;color:#fff;font:600 13px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
.hk-switch span{color:#aaa;margin-right:4px;white-space:nowrap;font-weight:400}
.hk-switch a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:8px 0;border:1px solid #666}
.hk-switch a.on{background:#fff;color:#111;border-color:#fff}
body{padding-top:40px}
html.js .stage{top:40px !important;height:calc(100svh - 40px) !important}
@media (prefers-reduced-motion:reduce){ html.js .stage{position:static !important;height:auto !important} }

.meishi-brand .brand{font-size:37px}
@media (min-width:1024px){ html.js .stage{top:152px !important;height:calc(100vh - 152px) !important} .meishi-brand .brand{font-size:46px} }