/* ===================================
   LINTO デモサイト 共通スタイル【v4 / ティール配色版】
   ミニマル・シャープ・大型タイポ・余白大胆
   ベース：白 / アクセント：ティール #0097B2（竹本様名刺カラー） / テキスト：ダークグレー
=================================== */
:root {
  --navy:    #1A1F2E;
  --text:    #222831;
  --muted:   #6B7280;
  --accent:  #0097B2;
  --accent2: #00768C;
  --accent3: #E0F2F4;
  --bg:      #FFFFFF;
  --bg2:     #FAFAFA;
  --bg3:     #F5F6F8;
  --border:  #E5E7EB;
  --border2: #1A1F2E;
  --yellow:  #F5E000;
  /* 旧変数の互換用エイリアス（既存HTMLのインラインstyleを壊さない） */
  --coral:   #0097B2;
  --golden:  #00768C;
  --cream:   #FFFFFF;
  --cream2:  #FAFAFA;
  --peach:   #E0F2F4;
  --green:   #1B7A3E;
  --border-old: #E5E7EB;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* PC専用の手動改行：スマホでは改行を解除して文章を自然に流す（全ページ共通） */
.pc-only { display: inline; }
@media (max-width: 700px) {
  .pc-only { display: none; }
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent2); }

/* ===== HEADER（シンプル・薄ボーダー） ===== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 76px;
}

/* ===== HAMBURGER BUTTON (デフォルト非表示。900px以下で表示) ===== */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 110;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px auto;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.logo {
  font-size: 24px; font-weight: 900; color: var(--navy);
  text-decoration: none; letter-spacing: .02em;
}
.logo em { color: var(--accent); font-style: normal; }
nav { display: flex; gap: 32px; align-items: center; }
nav a {
  font-size: 14px; color: var(--text); text-decoration: none;
  font-weight: 600; transition: color .2s;
  letter-spacing: .02em;
}
nav a:hover, nav a.active { color: var(--accent); }
.nav-cta {
  background: var(--accent); color: #fff !important;
  padding: 12px 26px; border-radius: 100px;
  font-weight: 700 !important; font-size: 14px !important;
  transition: background .15s !important;
}
.nav-cta:hover { background: var(--accent2); color: #fff !important; }

main { padding-top: 76px; }

/* ===== 旧 .wc-blob (水彩) は完全に無効化 ===== */
.wc-blob, .wc-sun, .wc-peach, .wc-cream, .wc-sun-1, .wc-sun-2,
.wc-blob1, .wc-blob2, .wc-cta, .geom-1, .geom-2 {
  display: none !important;
}

/* ===== SECTION BASE ===== */
.section { padding: 120px 40px; }
.container { max-width: 1200px; margin: 0 auto; }
.section-label {
  font-size: 13px; font-weight: 800; letter-spacing: .4em;
  color: var(--accent); margin-bottom: 20px;
  text-transform: uppercase;
}
.section-title {
  font-size: 44px; font-weight: 800; color: var(--navy);
  line-height: 1.4; margin-bottom: 24px;
  letter-spacing: .01em;
}
.section-lead {
  font-size: 17px; color: var(--text); max-width: 700px;
  line-height: 2.05; margin-bottom: 64px; font-weight: 500;
}
/* 中央揃えの見出し・見せ場で、最後の1〜2文字だけ行から飛び出るのを防ぐ
   ※左寄せの本文（リード文・説明文）には適用しない＝幅いっぱいで自然に折り返す */
h1, h2, h3,
.section-title,
.page-hero h1, #page-hero h1,
.hero-title, .cta-inner h2,
.statement-title, .statement-text,
.values-title,
.mission-statement, .meaning,
.sub-block h3, .ms-title-wrap h2 {
  text-wrap: balance;
}

/* ===== CARD（影控えめ・ボーダー基調） ===== */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px 28px;
  transition: border-color .2s, transform .2s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ===== BUTTON（角丸控えめ・シャープ） ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 34px; border-radius: 100px;
  font-weight: 700; font-size: 17px; text-decoration: none;
  transition: all .15s;
  letter-spacing: .04em;
}
.btn-coral, .btn-accent {
  background: var(--accent); color: #fff;
}
.btn-coral:hover, .btn-accent:hover {
  background: var(--accent2); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,151,178,.25);
}
.btn-navy {
  background: var(--navy); color: #fff;
}
.btn-navy:hover { background: #000; color: #fff; }
.btn-outline {
  border: 1.5px solid var(--navy); color: var(--navy);
  padding: 14.5px 30.5px;
  background: transparent;
}
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ===== CTA（全ページ共通） ===== */
#cta {
  padding: 48px 40px !important; background: var(--navy); color: #fff;
  text-align: center;
  position: relative; overflow: hidden;
}
#cta::before { display: none !important; }
.cta-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.cta-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .4em;
  color: var(--accent); margin-bottom: 24px;
  text-transform: uppercase;
}
.cta-inner h2 {
  font-size: 44px; font-weight: 800; color: #fff;
  line-height: 1.5; margin-bottom: 24px;
}
.cta-inner h2 em { color: var(--accent); font-style: normal; }
.cta-inner p {
  font-size: 17px; color: rgba(255,255,255,.7); line-height: 2;
  margin-bottom: 28px !important;
}
.cta-eyebrow { margin-bottom: 18px !important; }
.cta-inner h2 { margin-bottom: 18px !important; }
@media (max-width: 900px) {
  #cta { padding: 72px 24px; }
  .cta-inner h2 { font-size: 30px; }
}

/* ===== FOOTER ===== */
footer {
  background: var(--navy); color: rgba(255,255,255,.6);
  padding: 80px 40px 32px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 1fr auto; gap: 60px;
  margin-bottom: 56px; padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo {
  font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 12px;
  letter-spacing: .02em;
}
.footer-logo em { color: #2BB8C8; font-style: normal; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.95; }
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 12px 32px; align-content: flex-start;
  max-width: 440px;
}
.footer-nav a {
  font-size: 14px; color: rgba(255,255,255,.88); text-decoration: none;
  font-weight: 500;
}
.footer-nav a:hover { color: #fff; }
.footer-bottom { font-size: 12px; text-align: center; letter-spacing: .05em; }

/* ===== DEMO BADGE ===== */
.demo-badge {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 10px 18px; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ===== UTILITY ===== */
.text-accent { color: var(--accent); }
.text-coral  { color: var(--accent); }
.text-navy   { color: var(--navy); }
.text-muted  { color: var(--muted); }
.bg-white    { background: #fff; }
.bg-grey     { background: var(--bg2); }
.bg-grey2    { background: var(--bg3); }
.bg-cream    { background: var(--bg); }
.bg-cream2   { background: var(--bg2); }
.bg-peach    { background: var(--accent3); }
.bg-navy     { background: var(--navy); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.mt8 { margin-top: 8px; }  .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; } .mt40 { margin-top: 40px; }
.mt64 { margin-top: 64px; } .mt96 { margin-top: 96px; }

/* ===== RESPONSIVE ===== */
/* タブレット横 (1024px以下) */
@media (max-width: 1024px) {
  .header-inner { padding: 0 28px; }
  .section-title { font-size: 36px; }
  .section { padding: 96px 32px; }
}

/* タブレット縦・大スマホ (900px以下) */
@media (max-width: 900px) {
  .header-inner { padding: 0 20px; height: 64px; }
  .logo { font-size: 20px; }
  main { padding-top: 64px; }

  /* ハンバーガーアイコンを表示 */
  .hamburger { display: block; }

  /* ナビをフルスクリーンオーバーレイに */
  header nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px !important;
    z-index: 105 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    padding: 90px 24px 40px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  header nav.is-open {
    opacity: 1;
    visibility: visible;
  }
  header nav a {
    font-size: 20px !important;
    padding: 8px 16px !important;
    display: block;
    color: var(--navy) !important;
  }
  header nav a.nav-cta {
    margin-top: 16px;
    font-size: 16px !important;
    padding: 14px 32px !important;
    color: #fff !important;
  }

  .section { padding: 72px 24px; }
  .section-title { font-size: 30px; line-height: 1.4; }
  .section-lead { font-size: 15px; margin-bottom: 40px; line-height: 1.95; }

  .grid2, .grid3 { grid-template-columns: 1fr; gap: 20px; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-nav { max-width: none; }

  /* 共通ページヒーロー */
  .page-hero, #page-hero { padding: 96px 24px 56px !important; }
  .page-hero h1, #page-hero h1 { font-size: 32px !important; line-height: 1.4 !important; }
  .page-hero p { font-size: 15px !important; line-height: 1.95 !important; }

  /* about: profile */
  .profile-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .profile-photo { max-width: 320px; margin: 0 auto; }

  /* service: メイン要素 */
  .ms-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ms-title-wrap h2 { font-size: 30px !important; line-height: 1.1 !important; }
  .ms-title-wrap h2 em { font-size: 15px !important; max-width: none !important; }
  .ms-features { grid-template-columns: 1fr !important; }
  .ms-features li { border-right: none !important; border-bottom: 1px solid var(--border); padding: 20px 0 !important; }
  .ms-features li:last-child { border-bottom: none; }
  .ms-visual { aspect-ratio: 16/10; }
  .ms-visual .icon-xl { font-size: 100px !important; }

  /* service: サブ要素 */
  .svc-block, .sub-block { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 0 !important; margin-bottom: 56px !important; }
  .svc-block.reverse .svc-visual, .sub-block.reverse .sub-visual { order: 0 !important; }
  .sub-block h3 { font-size: 30px !important; }
  .sub-visual { aspect-ratio: 16/10; }

  /* service: 構造図 */
  .structure { grid-template-columns: 1fr !important; padding: 24px !important; text-align: center; gap: 16px !important; }
  .structure-arrow { transform: rotate(90deg); }

  /* index: ヒーロー */
  .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hero-title { font-size: 36px !important; line-height: 1.3 !important; }
  .hero-lead { font-size: 15px !important; }
  .hero-lead .strong-line { font-size: 17px !important; }
  .hero-card { padding: 24px 22px !important; }

  /* index: statement / services / cases */
  #statement, #approach, #services, #cases, #rep, #voices, #blog, #cta, #service-preview, #case-preview, #blog-preview, #intro, #main-service, #sub-services, #total-msg, #price-note { padding: 72px 24px !important; }
  .statement-title { font-size: 26px !important; line-height: 1.6 !important; }
  .total-msg-inner { padding: 40px 28px !important; }
  .total-msg-inner h2 { font-size: 24px !important; }
  .price-note-inner { grid-template-columns: 1fr !important; gap: 16px; padding: 24px; text-align: center; }
  .price-note-icon { margin: 0 auto; }

  /* index/共通: rep */
  .rep-grid { grid-template-columns: 1fr !important; gap: 40px !important; text-align: center; }
  .rep-photo { max-width: 260px; margin: 0 auto; }
  /* 文章はaboutの代表紹介と同じく左寄せ（写真は中央のまま） */
  .rep-body { text-align: left; }

  /* index/共通: voices, blog */
  .voice-grid { grid-template-columns: 1fr !important; }
  .blog-row { grid-template-columns: 1fr !important; gap: 8px; }
  .blog-arrow { text-align: left !important; }

  /* index: cta */
  .cta-inner h2 { font-size: 30px !important; }

  /* 他ページ共通 */
  .case-grid { grid-template-columns: 1fr !important; }
  .blog-layout { grid-template-columns: 1fr !important; }
  .step { grid-template-columns: 60px 1fr !important; }
  .price-grid { grid-template-columns: 1fr !important; }
  .contact-layout { grid-template-columns: 1fr !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* スマホ (600px以下) */
@media (max-width: 600px) {
  .header-inner { height: 56px; padding: 0 14px; }
  .logo { font-size: 18px; }
  main { padding-top: 56px; }
  .cta-inner p { text-align: center; line-height: 1.9; }
  .origin-body p, .rep-text p { text-align: left; }
  /* スマホのハンバーガーメニュー文字サイズ調整 */
  header nav a { font-size: 18px !important; }
  header nav a.nav-cta { font-size: 15px !important; }

  .section { padding: 56px 18px; }
  .section-title { font-size: 24px; line-height: 1.45; }
  .section-lead { font-size: 14px; margin-bottom: 32px; line-height: 1.9; }
  .section-label, .page-hero-eyebrow { font-size: 11px !important; letter-spacing: .3em !important; }

  .btn { padding: 14px 22px; font-size: 13px; }

  .demo-badge { font-size: 10px; padding: 7px 12px; bottom: 12px; right: 12px; }

  /* ヒーロー */
  .page-hero, #page-hero { padding: 64px 18px 44px !important; }
  .page-hero h1, #page-hero h1 { font-size: 26px !important; line-height: 1.45 !important; margin-bottom: 16px !important; }
  .page-hero p { font-size: 14px !important; }

  /* index ヒーロー */
  .hero-title { font-size: 28px !important; line-height: 1.4 !important; }
  .hero-lead { font-size: 14px !important; }
  .hero-lead .strong-line { font-size: 16px !important; }

  /* service ヒーロー */
  .ms-title-wrap h2 { font-size: 24px !important; }
  .sub-block h3 { font-size: 24px !important; }
  .sub-block p.lead, .ms-lead { font-size: 14px !important; }

  /* 各種セクション */
  #statement, #approach, #services, #cases, #rep, #voices, #blog, #cta, #service-preview, #case-preview, #blog-preview, #intro, #main-service, #sub-services, #total-msg, #price-note { padding: 56px 18px !important; }
  .statement-title { font-size: 22px !important; }
  .total-msg-inner h2 { font-size: 20px !important; }
  .cta-inner h2 { font-size: 24px !important; }
  .ms-features-wrap { margin-top: 4px !important; padding-top: 0 !important; }
  .ms-features-title { font-size: 14px !important; }

  /* フッター */
  footer { padding: 56px 20px 24px; }
  .footer-logo { font-size: 22px; }
  .footer-tagline { font-size: 13px; }
  .footer-nav a { font-size: 13px; }
}

/* ===== 文中強調 (--golden) を黄色マーカー化 ===== */
strong[style*="--golden"], strong[style*="golden"] {
  color: var(--navy) !important;
  background: linear-gradient(transparent 60%, #FFE98A 60%);
  padding: 0 4px;
  font-weight: 700;
  border-radius: 1px;
}
/* IN SHORT 等のセクション小ラベル(--coral指定)はグレーに */
div[style*="letter-spacing"][style*="--coral"],
div[style*="letter-spacing"][style*="coral"] {
  color: var(--muted) !important;
}
/* スマホでも「セクションの本文・リード文」を17pxに統一（PCと同じ大きさ）
   ※カード内の細かい注釈・価格の細字・Q&A回答などは対象外のまま */
@media (max-width: 900px) {
  .section-lead,
  .page-hero p, #page-hero p,
  .ms-lead, .sub-block p.lead,
  .values-text, .statement-text,
  .cta-inner p, .cta-row p,
  .step-body p, .case-section-lead,
  .pricing-cta p, .pricing-header p, .pricing-lead,
  .faq-link-header p, .recruit-hero p,
  .hero-lead, .recruit-closing p {
    font-size: 17px !important;
  }
}