/* =========================================================
   株式会社ピタニ コーポレートサイト 共通スタイル
   デザイン方針：紺(#1a3a5c)＋白の信頼感ベース。
   CTA・アクセントはLP由来のオレンジを継続使用（ブランド統一）。
   建設会社サイトの王道レイアウト（電話番号ヘッダー／写真ヒーロー）。
   ========================================================= */

:root{
  /* 基調：紺＋白 */
  --navy:#1a3a5c;
  --navy-deep:#12293f;
  --navy-mid:#244b73;
  --navy-line:#2e5680;
  --navy-pale:#eef2f6;   /* 薄い背景セクション */
  --navy-pale2:#e3e9f0;

  /* アクセント／CTA：LPのオレンジを継続 */
  --orange:#ff8a1e;
  --orange-deep:#f26a0f;
  --orange-darker:#c44d00;

  /* テキスト */
  --ink:#1f2d3a;
  --ink-soft:#54616f;
  --ink-mute:#8593a1;

  --bg:#ffffff;
  --line:#dde3ea;
  --footer-bg:#12293f;
  --footer-fg:#a9bccd;

  --radius:12px;
  --maxw:1080px;
  --maxw-narrow:760px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--orange-darker);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-weight:700;letter-spacing:.02em;line-height:1.5;color:var(--ink);}
p{margin-bottom:1em;}
.lead{color:var(--ink-soft);}

section{padding:80px 0;}
.section-cream{background:var(--navy-pale);}

/* セクション見出し */
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  color:var(--orange-deep);margin-bottom:14px;text-transform:uppercase;
}
.section-title{font-size:1.55rem;margin-bottom:30px;position:relative;color:var(--navy);}
.section-title::after{
  content:"";display:block;width:44px;height:3px;background:var(--orange);
  margin-top:16px;border-radius:2px;
}

/* =========================================================
   ヘッダー（共通）：上段=ロゴ＋電話＋CTA／下段=グローバルナビ
   ========================================================= */
.site-header{background:#fff;border-bottom:1px solid var(--line);}
.header-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 0;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.2rem;letter-spacing:.04em;color:var(--navy);
  text-decoration:none;flex:none;
}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none;}
/* 画像ロゴ：できる限り大きく目立たせる。縦横比は維持 */
.logo img{height:90px;width:auto;max-width:100%;display:block;}

.header-right{display:flex;align-items:center;gap:22px;}
.header-tel{display:flex;flex-direction:column;line-height:1.3;text-align:right;}
.header-tel .tel-label{font-size:.72rem;color:var(--ink-mute);letter-spacing:.04em;}
.header-tel .tel-num{
  font-size:1.7rem;font-weight:700;color:var(--navy);letter-spacing:.02em;
  text-decoration:none;
}
.header-tel .tel-hours{font-size:.72rem;color:var(--ink-soft);}
.btn-header{
  flex:none;background:var(--orange-deep);color:#fff;text-decoration:none;
  font-weight:700;font-size:.95rem;padding:13px 24px;border-radius:999px;
  transition:background .15s;
}
.btn-header:hover{background:var(--orange-darker);}

/* グローバルナビ（紺帯・スティッキー） */
.gnav{background:var(--navy);position:sticky;top:0;z-index:100;}
.gnav-inner{display:flex;gap:2px;}
.gnav a{
  color:#dbe5ee;text-decoration:none;font-size:.95rem;font-weight:500;
  padding:15px 20px;transition:background .15s,color .15s;
  border-bottom:3px solid transparent;
}
.gnav a:hover{background:var(--navy-mid);color:#fff;}
.gnav a.active{color:#fff;border-bottom-color:var(--orange);background:var(--navy-mid);}
.gnav a.gnav-lp{margin-left:auto;color:#fff;background:var(--orange);font-weight:700;}
.gnav a.gnav-lp:hover{background:var(--orange-deep,#cf6d26);color:#fff;}

@media(max-width:820px){
  .header-bar-inner{flex-wrap:wrap;gap:12px;}
  .header-tel .tel-label{display:none;}
  .header-tel .tel-num{font-size:1.4rem;}
  .gnav-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .gnav a{padding:13px 14px;white-space:nowrap;font-size:.88rem;}
}
@media(max-width:480px){
  .header-right{width:100%;justify-content:space-between;gap:10px;}
  .logo{font-size:1.05rem;}
  .logo img{height:64px;}
}

/* =========================================================
   ボタン
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-weight:700;font-size:1rem;
  padding:15px 32px;border-radius:999px;text-align:center;
  transition:transform .12s ease,box-shadow .12s ease,background .15s;
  border:none;cursor:pointer;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--orange-deep);color:#fff;
  box-shadow:0 6px 18px rgba(242,106,15,.3);
}
.btn-primary:hover{background:var(--orange-darker);}
.btn-outline{
  background:#fff;color:var(--navy);border:2px solid var(--navy);
}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-ghost{ /* 写真ヒーロー上の白フチボタン */
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);
}
.btn-ghost:hover{background:#fff;color:var(--navy);}
.btn-line{
  background:#06c755;color:#fff;box-shadow:0 6px 18px rgba(6,199,85,.3);
}
.btn-line:hover{background:#05a648;}
.btn .ico{width:20px;height:20px;flex:none;}

.btn-group{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
@media(max-width:480px){
  .btn-group{flex-direction:column;}
  .btn{width:100%;}
}

/* =========================================================
   ヒーロー（写真背景＋左寄せ白文字＋右に円形バッジ）
   背景写真 images/hero.jpg が未配置でも崩れないよう、
   紺系グラデーションをフォールバックとして重ねる。
   ========================================================= */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background-color:var(--navy-deep);
}
/* スライドショー：hero.jpg / hero2.jpg / hero3.jpg を6秒でクロスフェード＋Ken Burns */
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.hero-slide.is-active{opacity:1;}
/* 紺グラデーションのオーバーレイ（写真の上・文字の下） */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg, rgba(18,41,63,.86) 0%, rgba(26,58,92,.70) 55%, rgba(26,58,92,.45) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:96px 24px;min-height:520px;
}
.hero-copy{max-width:620px;flex:1 1 auto;}
.hero .catch{
  font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.55;
  font-weight:700;margin-bottom:24px;text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero .catch .hl{
  background:linear-gradient(transparent 62%, rgba(255,138,30,.55) 62%);
  padding:0 2px;
}
.hero .sub{
  font-size:1.05rem;color:#e7eef5;max-width:40em;margin-bottom:32px;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}

/* 円形バッジ4つ（右側にクラスター配置／少し重なる） */
.hero-badges{
  flex:none;display:grid;grid-template-columns:repeat(2,auto);
  gap:16px;justify-items:center;
}
.badge{
  width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.96);border:3px solid var(--orange);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--navy);font-weight:700;font-size:.92rem;line-height:1.45;
  padding:12px;box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.hero-badges .badge:nth-child(odd){margin-top:18px;} /* 段差で重なり感（reveal用にtransformは空ける） */
@media(max-width:900px){
  .hero-inner{flex-direction:column;align-items:flex-start;padding:72px 24px;min-height:0;}
  .hero-badges{margin-top:8px;}
  .hero-badges .badge:nth-child(odd){margin-top:0;}
}
@media(max-width:480px){
  .hero-badges{grid-template-columns:repeat(2,1fr);width:100%;}
  .badge{width:100%;max-width:160px;height:auto;aspect-ratio:1/1;justify-self:center;}
}

/* ページ下層用ヘッダー帯（紺） */
.page-head{
  background:linear-gradient(105deg,var(--navy-deep),var(--navy-mid));
  color:#fff;padding:56px 0;
}
.page-head h1{font-size:1.85rem;color:#fff;}
.page-head .page-lead{color:#d4dfea;margin-top:12px;margin-bottom:0;}
.breadcrumb{font-size:.8rem;color:#aebfce;margin-bottom:14px;}
.breadcrumb a{color:#aebfce;text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;color:#fff;}

/* =========================================================
   About Us（左テキスト／右写真）
   ========================================================= */
.about-inner{display:flex;gap:48px;align-items:center;}
.about-text{flex:1 1 0;min-width:0;}
.about-text p{color:var(--ink-soft);}
.about-media{flex:1 1 0;min-width:0;}
@media(max-width:820px){
  .about-inner{flex-direction:column;align-items:stretch;gap:28px;}
}

/* 写真枠（共通フォールバック付き）
   <img> が読めない場合 onerror で .is-missing が付き、プレースホルダ表示。 */
.img-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-pale2);border:1px solid var(--line);
  aspect-ratio:4/3;width:100%;
}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.img-frame .img-ph{
  display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;color:var(--navy);font-size:.82rem;font-weight:500;padding:16px;
  background:repeating-linear-gradient(45deg,#e4eaf1,#e4eaf1 12px,#dde5ee 12px,#dde5ee 24px);
}
.img-frame .img-ph svg{width:40px;height:40px;opacity:.5;}
.img-frame.is-missing .img-ph{display:flex;}

/* =========================================================
   お知らせ（News）
   ========================================================= */
.news-list{list-style:none;margin-top:8px;border-top:1px solid var(--line);}
.news-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding:18px 4px;border-bottom:1px solid var(--line);
}
.news-list time{color:var(--ink-mute);font-size:.9rem;flex:none;font-variant-numeric:tabular-nums;}
.news-list .news-cat{
  flex:none;font-size:.74rem;font-weight:700;color:var(--navy);
  background:var(--navy-pale);border:1px solid var(--navy-pale2);
  border-radius:999px;padding:2px 12px;
}
.news-list a{color:var(--ink);text-decoration:none;font-weight:500;}
.news-list a:hover{color:var(--orange-darker);text-decoration:underline;}

/* 記事ページ */
.news-meta{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.news-meta time{color:var(--ink-mute);font-size:.9rem;font-variant-numeric:tabular-nums;}
.news-back{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);}
.news-back a{color:var(--navy);font-weight:700;text-decoration:none;}
.news-back a:hover{text-decoration:underline;}

/* =========================================================
   カード（事業の3本柱）
   ========================================================= */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;margin-top:8px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;border-top:4px solid var(--navy);
}
.card h3{font-size:1.14rem;margin-bottom:12px;color:var(--navy);}
.card h3 .lead-no{
  display:block;font-size:.78rem;color:var(--orange-deep);font-weight:700;
  letter-spacing:.1em;margin-bottom:6px;
}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem;}

/* =========================================================
   約束（番号付きリスト）
   ========================================================= */
.promise-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin-top:8px;}
.promise-list li{
  display:flex;gap:18px;align-items:flex-start;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.promise-list li:last-child{border-bottom:none;padding-bottom:0;}
.promise-list .pnum{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;
}
.promise-list h3{font-size:1.1rem;margin-bottom:4px;color:var(--navy);}
.promise-list p{margin:0;color:var(--ink-soft);font-size:.95rem;}

/* =========================================================
   定義テーブル（会社概要・特商法）
   ========================================================= */
.info-table{width:100%;border-collapse:collapse;margin-top:8px;}
.info-table th,.info-table td{
  text-align:left;vertical-align:top;padding:16px 10px;
  border-bottom:1px solid var(--line);font-weight:400;
}
.info-table th{
  width:30%;color:var(--navy);font-weight:700;font-size:.92rem;white-space:nowrap;
}
.info-table td{color:var(--ink);}
@media(max-width:560px){
  .info-table th,.info-table td{display:block;width:100%;padding:10px 0;}
  .info-table th{border-bottom:none;padding-bottom:2px;}
  .info-table td{padding-top:0;padding-bottom:16px;}
}

/* =========================================================
   注記・本文・代表メッセージ
   ========================================================= */
.note{
  background:var(--navy-pale);border-left:4px solid var(--orange);
  padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-soft);font-size:.95rem;margin:24px 0;
}
.prose p{color:var(--ink);}
.prose h3{margin:36px 0 12px;font-size:1.18rem;color:var(--navy);}
.prose h3:first-child{margin-top:0;}
/* service：写真枠つき見出しブロック */
.service-figure{margin:0 0 16px;}

.message-body{max-width:var(--maxw-narrow);}
.message-body .msg-lead{
  font-size:1.32rem;font-weight:700;line-height:1.7;color:var(--navy);margin-bottom:28px;
}
.message-body p{font-size:1.02rem;color:var(--ink);}
.message-sign{text-align:right;margin-top:28px;font-weight:700;color:var(--navy);}

/* 連絡先ブロック */
.contact-block{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;margin-bottom:20px;background:#fff;border-top:4px solid var(--navy);
}
.contact-block h3{font-size:1.12rem;margin-bottom:8px;color:var(--navy);}
.contact-block .tel{
  font-size:2rem;font-weight:700;color:var(--navy);letter-spacing:.02em;
  text-decoration:none;display:inline-block;margin:4px 0;
}
.contact-block .hours{font-size:.9rem;color:var(--ink-soft);margin:0;}

/* CTA帯 */
.cta-band{
  background:linear-gradient(105deg,var(--navy-deep),var(--navy-mid));
  color:#fff;text-align:center;
}
.cta-band h2{font-size:1.5rem;margin-bottom:16px;color:#fff;}
.cta-band p{color:#d4dfea;margin-bottom:24px;}
.cta-band .btn-group{justify-content:center;}

/* =========================================================
   フッター（紺）
   ========================================================= */
.site-footer{
  background:var(--footer-bg);color:var(--footer-fg);
  padding:52px 0 32px;font-size:.88rem;line-height:1.9;
}
.site-footer .wrap{max-width:var(--maxw);}
.footer-top{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .fbrand{font-weight:700;color:#fff;font-size:1.15rem;margin-bottom:10px;}
.footer-brand p{margin:0;color:var(--footer-fg);font-size:.85rem;}
.footer-nav{display:flex;flex-wrap:wrap;gap:24px;}
.footer-nav ul{list-style:none;}
.footer-nav li{margin-bottom:0;}
.footer-nav a{color:var(--footer-fg);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.footer-nav a:hover{color:#fff;text-decoration:underline;}
.footer-bottom{
  padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center;
}
.footer-bottom .copyright{color:var(--footer-fg);opacity:.8;font-size:.8rem;}
.footer-bottom a{color:#ffcf7a;text-decoration:none;}
.footer-bottom a:hover{text-decoration:underline;}

/* =========================================================
   アニメーション（上品・控えめ）
   - JS有効時（html.has-js-anim）のみ初期状態を隠す → JS無効でも内容は見える
   - prefers-reduced-motion: reduce では一切動かさない
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  /* ヒーロー：アクティブな写真をゆっくりズームイン（Ken Burns） */
  .hero-slide.is-active{animation:heroKenburns 8s ease-out both;}

  /* スクロール出現：下から20pxふわっとフェードイン（0.6秒） */
  html.has-js-anim .eyebrow,
  html.has-js-anim .section-title,
  html.has-js-anim .lead,
  html.has-js-anim .note,
  html.has-js-anim .info-table,
  html.has-js-anim .contact-block,
  html.has-js-anim .card,
  html.has-js-anim .img-frame,
  html.has-js-anim .promise-list li,
  html.has-js-anim .news-list li,
  html.has-js-anim .prose > p,
  html.has-js-anim .prose > h3,
  html.has-js-anim .message-body > .msg-lead,
  html.has-js-anim .message-body > p,
  html.has-js-anim .message-sign,
  html.has-js-anim .about-text > p,
  html.has-js-anim .about-text .btn-group,
  html.has-js-anim .cta-band .btn-group,
  html.has-js-anim .page-head .wrap-narrow,
  html.has-js-anim .hero-badges .badge{
    opacity:0;transform:translateY(20px);
    transition:opacity .6s ease, transform .6s ease;
  }
  html.has-js-anim .is-visible{opacity:1 !important;transform:none !important;}

  /* 円形バッジ：少し時間差をつけて順に出現 */
  html.has-js-anim .hero-badges .badge:nth-child(1){transition-delay:.05s;}
  html.has-js-anim .hero-badges .badge:nth-child(2){transition-delay:.18s;}
  html.has-js-anim .hero-badges .badge:nth-child(3){transition-delay:.31s;}
  html.has-js-anim .hero-badges .badge:nth-child(4){transition-delay:.44s;}
  /* カード・約束リストの軽い段差 */
  html.has-js-anim .card:nth-child(2),
  html.has-js-anim .promise-list li:nth-child(2){transition-delay:.1s;}
  html.has-js-anim .card:nth-child(3),
  html.has-js-anim .promise-list li:nth-child(3){transition-delay:.2s;}
}
@keyframes heroKenburns{from{transform:scale(1.001);}to{transform:scale(1.08);}}