/* =========================================
   TSUNAGU-LAB 会社概要ページ ― ReFactor 2025-08-06
   インデント: 2 スペース
   目的  :
     1. どの幅でも左右余白を均一にする（全セクション）
     2. レイアウト関連の重複 / 競合を解消
     3. 可読性向上とスコープの最小化
========================================= */

/* ---------- Design Tokens ---------- */
:root{
  --primary:#1E88E5;
  --primary-dark:#1565C0;
  --primary-light:#42A5F5;
  --accent:#FF9A1F;
  --gradient-start:var(--primary);
  --gradient-end:var(--primary-light);
  --gradient-accent:linear-gradient(135deg,#FF9A1F 0%,#FFB74D 100%);
  --shadow-xs:0 2px 8px rgba(0,0,0,.06);
  --shadow-sm:0 4px 12px rgba(0,0,0,.08);
  --shadow-md:0 8px 20px rgba(30,136,229,.15);
  --shadow-lg:0 12px 40px rgba(30,136,229,.25);
  --ink:#333;
  --caption:#777;
  --glass-bg:rgba(255,255,255,.85);
  --glass-br:16px;
  --container-max:1100px;
  --section-pad-block:80px;
  --container-pad-inline:16px; /* ★ NEW 共通左右余白 */
}

/* ---------- Base ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.7;
  color:var(--ink);
  background:#fff;
}

.about-wrapper{overflow-x:hidden;}

/* ---------- Layout Utilities ---------- */
.section{
  padding-block:var(--section-pad-block);
  position:relative;
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad-inline); /* ★ NEW 常に左右16px */
}

/* >=768px で block padding 拡大 & container 内側余白を 20px に */
@media(min-width:768px){
  :root{--section-pad-block:120px;--container-pad-inline:20px;}
}

/* ---------- Hero ---------- */
.about-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:450px;
  padding:120px var(--container-pad-inline) 80px;
  text-align:center;
  background:
    url("../img/about/hero-top.jpg") center/cover no-repeat,
    linear-gradient(135deg,#f7faff 0%,#e3f2fd 100%);
}
@media(min-width:768px){.about-hero{min-height:500px;}}

/* ★ 背景レイヤーを最背面へ */
.about-hero .hero-background{position:absolute;inset:0;z-index:0;}

.about-hero::after{ /* 半透明ホワイトで文字可読性確保 */
  content:"";
  position:absolute;inset:0;
  background:rgba(255,255,255,.45); /* 適度に薄める (元 .55) */
  pointer-events:none;
  z-index:1;
}

/* ★ テキスト等を最前面に固定 */
.about-hero .container,
.about-hero .scroll-indicator{
  position:relative; /* stacking context */
  z-index:2;
}

/* スクロールインジケータ */
.scroll-indicator{
  position:absolute;left:50%;bottom:-80px;translate:-50% 0;
  width:30px;height:50px;border:2px solid var(--primary);border-radius:25px;opacity:.7;
}
.scroll-indicator span{
  position:absolute;left:50%;top:8px;translate:-50% 0;
  width:6px;height:6px;border-radius:50%;background:var(--primary);
  animation:scroll-down 2s infinite;
}

@keyframes scroll-down{
  0%{transform:translateY(0);opacity:0}
  40%{opacity:1}
  80%{transform:translateY(20px);opacity:0}
  100%{opacity:0}
}

/* ---------- Common Elements ---------- */
.gradient-text{
  background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-end) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.section-title{
  margin:0 0 48px;
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  text-align:center;
  position:relative;
}
.section-title::after{
  content:"";
  position:absolute;left:50%;bottom:-16px;translate:-50% 0;
  width:60px;height:4px;
  background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-end) 100%);
  border-radius:2px;
}

/* GlassCard */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--glass-br);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:.3s;
}
.glass-card:hover{translate:0 -5px;box-shadow:var(--shadow-md);}

/* CTA Button */
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 32px;border-radius:50px;font-weight:700;font-size:16px;
  color:#fff;text-decoration:none;position:relative;overflow:hidden;
  transition:.3s;
}
.cta-btn.primary-gradient{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));box-shadow:var(--shadow-md);}
.cta-btn.secondary-gradient{background:var(--gradient-accent);box-shadow:0 8px 20px rgba(255,154,31,.25);}
.cta-btn:hover{translate:0 -3px;box-shadow:var(--shadow-lg);}
.cta-btn .btn-icon{transition:transform .3s;}
.cta-btn:hover .btn-icon{transform:translateX(5px);}

/* ---------- 基本情報 (Table) ---------- */
.about-table dl{
  display:grid;grid-template-columns:160px 1fr;gap:20px 24px;margin:0;
}
.about-table dt{
  font-weight:700;color:var(--primary-dark);padding-left:12px;position:relative;
}
.about-table dt::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:4px;height:20px;background:var(--gradient-accent);border-radius:2px;
}
.about-table dd{margin:0;color:#555;}
@media(min-width:768px){.about-table dl{grid-template-columns:220px 1fr;padding:40px;}}

/* ---------- PVM Cards ---------- */
.pvm-grid{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); /* ★ NEW 自動段組み */
  justify-content:center; /* ★ NEW 余白を左右均等に */
}
.pvm-card{
  position:relative;overflow:hidden;
  border-radius:var(--glass-br);
  padding:32px;
  background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);
  box-shadow:var(--shadow-sm);
  transition:.3s;
}
.pvm-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));
}
.pvm-card:hover{translate:0 -8px;box-shadow:var(--shadow-lg);}
.card-icon{
  width:64px;height:64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));
  color:#fff;
}
.pvm-card h3{margin:0 0 16px;font-size:24px;color:var(--primary-dark);}
.pvm-card p{color:#666;line-height:1.8;}

/* ---------- 代表挨拶 ---------- */
.message-body .wp-content{font-size:16px;line-height:1.9;}
.placeholder{color:var(--caption);text-align:center;font-style:italic;}

/* ---------- 沿革 (Timeline) ---------- */
.timeline-progress{
  width:100%;height:4px;background:#e0e0e0;border-radius:2px;margin-bottom:48px;overflow:hidden;
}
.progress-bar{height:100%;width:0;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));}
.history-timeline{
  list-style:none;margin:0;padding-inline-start:40px;position:relative;
}
.history-timeline::before{
  content:"";position:absolute;left:46px;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gradient-start),var(--gradient-end));border-radius:2px;
}
.history-timeline li{
  position:relative;margin-bottom:48px;padding-left:40px;
}
.history-timeline li::before{
  content:"";position:absolute;left:-2px;top:.3em;width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid var(--primary);box-shadow:var(--shadow-xs);
  transition:.3s;
}
.history-timeline li:hover::before{scale:1.2;border-color:var(--accent);}
.history-timeline time{font-weight:700;font-size:18px;margin-right:16px;color:var(--primary-dark);}
.history-timeline .event{font-size:16px;color:#555;}

/* ---------- アクセス ---------- */
.access-grid{
  display:grid;gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); /* ★ NEW */
  justify-content:center;                                   /* ★ NEW */
}
.address-text{font-size:18px;font-weight:500;color:var(--primary-dark);margin-bottom:20px;}
.access-info .note{color:var(--caption);font-size:14px;line-height:1.8;margin-bottom:24px;}
.map-container{padding:8px;}
.map-container iframe{width:100%;height:100%;border-radius:8px;}
@media(max-width:768px){.map-container iframe{height:260px;}}

/* ---------- Contact CTA ---------- */
.about-contact-cta{
  background:linear-gradient(135deg,#f7faff 0%,#e3f2fd 100%);
  padding-block:100px;
}
.about-contact-cta .emphasize{max-width:600px;margin-inline:auto;text-align:center;}
.about-contact-cta .lead{font-size:clamp(18px,4vw,22px);margin:0 0 32px;color:#555;}
.about-contact-cta .lead a{font-weight:700;}

/* ---------- Animations / States ---------- */
[data-aos]{transition-property:transform,opacity;}

.loading{opacity:0;transition:opacity .3s;}
.loaded{opacity:1;}

@media print{
  .wave-divider,.animated-grid,.scroll-indicator{display:none;}
  .glass-card{background:#fff;box-shadow:none;border:1px solid #ddd;}
}

/* ---------- Decorations ---------- */
/* 波線をページ上部だけに使用。高解像度での滲み軽減のため 80px に増高可 */
.wave-divider{position:absolute;left:0;width:100%;overflow:hidden;line-height:0;}
.wave-divider.top{top:-1px;}
.wave-divider.top::before{
  content:"";display:block;width:calc(100% + 1.3px);height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23f7faff'/%3E%3C/svg%3E") no-repeat center/cover;
}

/* ---------- Hero Grid Animation (オプション軽量化) ---------- */
.animated-grid{
  position:absolute;width:200%;height:200%;
  background-image:
    linear-gradient(rgba(30,136,229,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,136,229,.03) 1px,transparent 1px);
  background-size:50px 50px;
  animation:grid-move 20s linear infinite;
}
@keyframes grid-move{to{transform:translate(50px,50px);}}

/* <=768px では非表示でパフォーマンス改善 */
@media(max-width:768px){.animated-grid{display:none;}}