/* 案C「名刺」v3 生成器テンプレート 2026-10-03
   色は build.py が #1f4d34 / #2f6a49 / #d9e5dd / #eef4f0 を店の colors.deep/mid/pale/paler に置換する */
: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%;height:auto;display:block}
.num{text-orientation:upright}

/* 名刺幅(260px)をページ全体のグリッド単位に：390では名刺の左端(画面中央に260pxの名刺)に
   本文の見出し・本文の左端を揃える。50% - 130px は「中央 - 名刺幅の半分」で、
   ビューポート幅が変わっても常に名刺の左端と一致する */
.section-mark{
  display:block;
  width:24px;
  height:2px;
  background:var(--deep);
  margin-bottom:16px;
}

/* ヘッダー */
.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:8px 14px;
  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;
}
/* 屋号が10文字以上（420pxに収まらない時用。今回の3店では未使用） */
.meishi-brand.brand-sm .brand{font-size:37px}
.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:13px;
  line-height:1.2;
  color:#555;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.back-jobs li{
  font-size:34px;
  font-weight:700;
  font-family:"Zen Old Mincho",serif;
  padding:3px 0;
  line-height:1.25;
  word-break:keep-all;
}
.back-jobs li+li{border-top:.5px solid var(--pale)}
/* 頼める仕事が4つ以上の店はひとまわり小さく・詰めて（SPEC。420pxに収めるため行間も詰める） */
.back-jobs.small li{font-size:30px;line-height:1.02;padding:1px 0}
/* point（一点）は店ごとの第2主役：岩村「創業60余年」石津「戦前創業・80年以上」も必ず出す。
   仕事が4つ(small)の店は420pxに収めるため point の上下の余白をさらに詰める */
.back-cert{font-size:12px;line-height:1.1;color:#555;margin-top:6px}
.back-num{font-size:24px;line-height:1.1;font-weight:700;margin-top:3px}
.back-assoc{font-size:12px;color:#555;margin-top:2px;line-height:1.2}
.back-jobs.small ~ .back-cert{margin-top:4px}
.back-tagline{font-size:13px;line-height:1.3;margin-top:4px;word-break:keep-all;overflow-wrap:anywhere}

/* 裏面を見るボタン */
.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,.works h2,.areas h2,.about-sec h2{
  font-family:"Zen Old Mincho",serif;
  font-weight:700;
  font-size:28px;
  line-height:1.4;
  word-break:keep-all;
  margin-bottom:28px;
}

/* ===== グリッド整列（390）：名刺は画面中央に260px→左端は calc(50% - 130px)。
   本文の見出し・本文の左端をこれに揃える。右側は24pxの余白だけ取る ===== */
.jobs,.works,.areas,.about-sec,.office,.mini-card-area{
  padding-top:56px;
  padding-right:24px;
  padding-bottom:56px;
  padding-left:calc(50% - 130px);
}
.works,.areas,.about-sec,.office{border-top:1px solid var(--pale)}
.jobs,.works,.areas,.about-sec,.office,.mini-card-area{background:var(--paper)}
.jobs-inner,.works-inner,.areas-inner,.about-sec-inner,.office-inner,.mini-card-inner{
  max-width:420px;
  margin:0;
}

/* 頼める仕事 */
.job-list li{
  position:relative;
  padding:18px 0;
}
.job-list li::before{
  content:"";
  display:block;
  width:260px;
  max-width:100%;
  height:1px;
  background:var(--pale);
  margin-bottom:18px;
}
.job-list li:last-child{
  position:relative;
}
.job-list li:last-child::after{
  content:"";
  display:block;
  width:260px;
  max-width:100%;
  height:1px;
  background:var(--pale);
  margin-top:18px;
}
.job-name{font-size:22px;font-weight:700;word-break:keep-all}
.job-list.many .job-name{font-size:28px;line-height:1.35}
.job-list.many li{padding:14px 0}
/* 写真なし店（日光）：事実を写真の代わりの大きさで見せる。写真がある店は22pxのまま */
.job-xl{font-size:52px;line-height:1.3;display:block}
.job-lg{font-size:32px;line-height:1.3;display:block}
.job-list .job-tag{font-size:14px;font-weight:400;color:#555;margin-left:.3em}
.job-list .job-desc{font-size:15px;color:#555;line-height:1.7;margin-top:6px}
.point-block{margin-top:28px}
.point-label{font-size:15px;color:#555}
.point-main{font-size:24px;font-weight:700;margin-top:6px;word-break:keep-all}
.point-main-xl{font-size:40px;line-height:1.3;margin-top:14px}
.point-sub{font-size:15px;color:#555;margin-top:6px;line-height:1.7}

/* 写真（名刺の下・作業の様子）＝紙に貼った体裁。キャプションは写真の左に添える縦組みラベル */
.main-photo{background:var(--paper);padding:40px 24px 0 calc(50% - 130px)}
.main-photo-inner{
  max-width:420px;
  margin:0;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:10px;
}
.photo-cap{
  flex:0 0 auto;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Zen Old Mincho",serif;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.04em;
  color:#555;
  word-break:keep-all;
  padding:2px 0;
}
.main-photo-inner .hk-photo,.work-item .hk-photo{flex:1 1 auto;min-width:0}
.pasted-photo{
  border:1px solid var(--line);
  box-shadow:4px 4px 0 var(--pale);
  background:var(--paper);
  margin:0;
}
.works{padding-top:56px;padding-bottom:56px}
.works-grid{display:flex;flex-direction:column;gap:32px}
.work-item{display:flex;flex-direction:row;align-items:stretch;gap:10px}
.works-note{font-size:14px;color:#555;line-height:1.8;margin-top:24px}

/* 対応地域 */
.areas-list{font-size:17px;line-height:1.9;word-break:keep-all}

/* ご紹介 */
.about-sec p{font-size:17px;line-height:1.9}

/* 再名刺：事業所の直前に置く、幅280pxの静止した小さな名刺（横型・回転なし） */
.mini-card-area{padding-top:64px;padding-bottom:16px;border-top:1px solid var(--pale)}
.mini-card{
  width:310px;
  max-width:100%;
  min-height:180px;
  border:1px solid var(--line);
  box-shadow:4px 4px 0 var(--pale);
  background:var(--paper);
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.mini-brand{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:23px;line-height:1.3;word-break:keep-all}
.mini-corp{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;margin-bottom:3px;color:#555}
.mini-jobs{font-size:16px;color:#555;line-height:1.5;word-break:keep-all}
.mini-addr{font-size:13px;color:#555;line-height:1.5}

/* 事業所 */
.office-row{
  position:relative;
  display:grid;
  grid-template-columns:5.5em 1fr;
  gap:4px 16px;
  padding:14px 0;
}
.office-row::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:260px;
  max-width:100%;
  height:1px;
  background:var(--pale);
}
.office-row:first-child::before{display: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}

/* ご相談の窓口：相談直前の一枚。見出しの代わりに ask_line を明朝32px以上で大きく */
.contact{
  background:var(--pale2);
  padding-top:56px;
  padding-right:24px;
  padding-bottom:56px;
  padding-left:calc(50% - 130px);
}
.contact-inner{max-width:420px;margin:0}
.ask-line{
  font-family:"Zen Old Mincho",serif;
  font-weight:700;
  font-size:32px;
  line-height:1.4;
  word-break:keep-all;
  margin-bottom:14px;
}
.contact-lead{font-size:15px;color:#555;line-height:1.7;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 以上：名刺は左列にstickyで残り、右列に本文を流す。
   名刺(340px)と写真(520px)の間を80pxのcolumn-gapでつくる＝スマホの拡大型 ===== */
@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:340px 1fr;
    column-gap:80px;
    align-items:start;
  }
  .card-area{grid-column:1;grid-row:1 / -1}
  .main-photo{grid-column:2}
  .jobs{grid-column:2}
  .works{grid-column:2}
  .areas{grid-column:2}
  .about-sec{grid-column:2}
  .mini-card-area{grid-column:2}
  .office{grid-column:2}
  .main-photo,.jobs,.works,.areas,.about-sec,.mini-card-area,.office{border-top:none}
  .jobs-inner,.works-inner,.areas-inner,.about-sec-inner,.office-inner,.mini-card-inner{max-width:620px;margin:0;padding:0 40px 0 0}
  .jobs,.works,.areas,.about-sec,.office,.mini-card-area{padding-left:0;padding-right:0}
  .jobs{padding-top:64px;padding-bottom:28px}
  .main-photo{padding-top:0;padding-bottom:0;padding-left:0}
  .office{padding-top:28px;padding-bottom:64px}
  .mini-card-area{padding-top:40px;padding-bottom:0}

  /* 写真あり店＝名刺の右に写真520px（間は column-gap の80px） */
  .main-photo-inner{max-width:520px;margin:0;padding:0;gap:14px}
  .photo-cap{font-size:13px}

  /* 写真なし店（日光）＝名刺の右に仕事と番号の塊を巨大化 */
  .job-xl{font-size:56px;line-height:1.25}
  .job-lg{font-size:48px;line-height:1.25}
  .point-main-xl{font-size:40px}

  .card-stage{height:auto}
  .stage{position:sticky;top:112px;height:calc(100vh - 112px);padding:0}
  .card{width:340px;height:550px}
  .face{width:340px;height:550px}
  .meishi-brand .brand{font-size:50px}
  .meishi-brand.brand-sm .brand{font-size:46px}

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

  .contact{padding-bottom:40px;padding-top:56px;padding-left:0;padding-right:0;grid-column:1/-1}
  .contact-inner{max-width:1100px;margin:0 auto;padding:0 40px}
  .ask-line{font-size:38px}
}

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