/* ==========================================================
   tanapen 全ページ用カスタムCSS 安定版 v2
   TOP / 施工事例 / お問い合わせ / 業務内容 / tanapenについて / 会社案内
   2026-07-13
========================================================== */

/* ==========================================================
   01. 共通設定
========================================================== */
:root {
  --accent: #7E95A6;
  --text: #222;
  --muted: #666;
  --bg: #F7F8F9;
  --line: #E5E7EB;
}

body {
  color: var(--text);
  font-size: 18px;
  line-height: 2;
}

p,
li,
td,
th {
  font-size: 18px !important;
  line-height: 2 !important;
}

a {
  color: var(--accent);
}

.contents-top {
  max-width: 1100px;
  margin: 0 auto;
}

.col-md-3 {
  display: none !important;
}

.col-md-9 {
  width: 100% !important;
}

.txt-center {
  text-align: center !important;
}

.top-title,
.content-title--bl,
.content-title--bbd,
.content-title--bb,
.content-title--bb2,
.content-title--bdacc,
.content-subtitle {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.content-title--bl::before,
.content-title--bl::after,
.content-title--bbd::before,
.content-title--bbd::after,
.content-title--bb::before,
.content-title--bb::after,
.content-title--bb2::before,
.content-title--bb2::after,
.content-title--bdacc::before,
.content-title--bdacc::after,
.content-subtitle::before,
.content-subtitle::after {
  display: none !important;
  content: none !important;
}

.section-heading {
  text-align: center;
  margin: 90px 0 45px;
}

.section-heading h2 {
  margin: 0 0 14px;
  color: var(--accent) !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 42px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-family: "Yu Gothic", "游ゴシック", sans-serif;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: .16em;
}

.section-heading h2,
.section-heading p,
.content-title--bl,
.content-title--bbd,
.content-title--bb,
.top-title,
.case-section h2,
.case-note h2,
.contact-info h2 {
  color: var(--accent) !important;
}

.btn,
.btn-top_contact {
  display: inline-block;
  min-width: 230px;
  margin-top: 8px !important;
  padding: 14px 34px !important;
  color: var(--text) !important;
  background: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 999px !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: .25s ease;
}

.btn:hover,
.btn-top_contact:hover {
  color: #fff !important;
  background: var(--accent) !important;
  transform: translateY(-2px);
}

/* ==========================================================
   02. HEADER
========================================================== */
.btn-conversion--tel a {
  color: #222 !important;
  background: #fff !important;
  border: 1px solid var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
}

.btn-conversion--mail a {
  color: #fff !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
}

.sp-conversion-list li a {
  padding: 16px 10px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.header-info {
  margin-bottom: 40px !important;
}

.header-info .tel img {
  display: none !important;
}

.header-info .tel a {
  display: flex !important;
  gap: 12px;
  align-items: center;
  background: none !important;
  text-decoration: none !important;
}

.header-info .tel a::before {
  content: "☎ 090-4052-8121";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 58px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
}

.header-info .tel a::after {
  content: "✉ お問い合わせ";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 58px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.bg-global-nav,
.global-nav {
  background: #fff !important;
  border: none !important;
}

.global-nav {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-bottom: 10px !important;
}

#menu-header {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 68px !important;
}

#menu-header li {
  position: relative;
  padding: 0 !important;
  border: none !important;
}

#menu-header li a {
  display: block;
  padding: 18px 0 24px !important;
  text-decoration: none !important;
  transition: .25s ease;
}

.global-nav-label--ja {
  display: block;
  margin-bottom: 7px;
  color: #222 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
}

.global-nav-label--en {
  display: block;
  color: var(--accent) !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#menu-header li a:hover {
  opacity: .65;
}

#menu-header > li > .sub-menu,
#menu-header > li > .sub-menu--header {
  display: none !important;
}

#menu-header > li:nth-child(4):hover > .sub-menu,
#menu-header > li:nth-child(4):focus-within > .sub-menu,
#menu-header > li:nth-child(4):hover > .sub-menu--header,
#menu-header > li:nth-child(4):focus-within > .sub-menu--header {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  z-index: 9999;
  min-width: 220px !important;
  padding: 18px 0 !important;
  background: rgba(255,255,255,.96) !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transform: translateX(-50%) !important;
}

#menu-header > li:nth-child(4) > .sub-menu li a,
#menu-header > li:nth-child(4) > .sub-menu--header li a {
  display: block !important;
  padding: 12px 24px !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  white-space: nowrap;
}

#menu-header > li:nth-child(4) > .sub-menu li a:hover,
#menu-header > li:nth-child(4) > .sub-menu--header li a:hover {
  color: var(--accent) !important;
  background: var(--bg) !important;
}

.headertop-copy {
  position: relative;
}

.single .headertop-copy {
  color: transparent !important;
}

.single .headertop-copy::before {
  content: "横浜市港北区、都筑区、青葉区で外壁塗装・屋根塗装・店舗塗装はtanapen（タナペン）へ";
  position: absolute;
  top: 0;
  left: 0;
  color: #222;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ==========================================================
   03. HERO
========================================================== */
.wrapper-top-contents .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.top-contents {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}

.top-contents img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0 !important;
}

.home .wrapper-top-contents,
.home .top-contents,
.home .contents-top,
.home .contents-main-left {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.home .wrapper-top-contents + *,
.home .top-contents + *,
.home .contents-top:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .contents-top > .home-problem:first-child {
  margin-top: 0 !important;
}

/* ==========================================================
   04. TOP：こんなお悩みありませんか？
========================================================== */
.home-problem {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 80px !important;
  padding: 144px 40px 72px;
  box-sizing: border-box;
  background: #f7f9fa;
}

.home-problem .section-heading {
  margin: 0 0 32px;
}

.home-problem-lead {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.home-problem-lead p {
  color: #2f3537;
  font-size: 15px;
  line-height: 2;
}

.home-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}

.home-problem-item {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid #e4eaed;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(38, 50, 56, 0.045);
}

.home-problem-item span {
  display: block;
  margin-bottom: 14px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.home-problem-item h3 {
  margin: 0 0 12px;
  color: #202426;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.home-problem-item p {
  margin: 0;
  color: #596368;
  font-size: 14px;
  line-height: 1.9;
}

.home-problem-message {
  max-width: 760px;
  margin: 46px auto 0;
  padding: 30px 34px;
  color: #fff;
  background: #8fa4ad;
  border-radius: 22px;
  text-align: center;
}

.home-problem-message p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

/* ==========================================================
   05. TOP：WORKS
========================================================== */
.home-works {
  margin: 160px auto 80px;
  padding: 0 20px;
}

.home-works-lead {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.home-works-lead p {
  margin: 0;
  color: #2f3537;
  font-size: 15px;
  line-height: 2;
}

.home-works-grid {
  max-width: 1080px;
  margin: 0 auto;
}

.home-works-item {
  margin-bottom: 28px;
}

.home-works-item .toppr-image {
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 22px 22px 0 0;
}

.home-works-item .toppr-image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.home-works-item .works-text {
  min-height: 220px;
  padding: 28px 24px 30px;
  background: #fff;
  border: 1px solid #e4eaed;
  border-top: none;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 16px 40px rgba(38, 50, 56, 0.045);
}

.home-works-item .works-en {
  display: inline-block;
  margin-bottom: 12px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.home-works-item h3 {
  margin: 0 0 14px;
  color: #202426;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.home-works-item .works-text p {
  margin: 0;
  color: #596368;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}

.home-works-sub {
  max-width: 760px;
  margin: 18px auto 34px;
  padding: 18px 24px;
  background: #f7f9fa;
  border: 1px solid #e4eaed;
  border-radius: 18px;
  text-align: center;
}

.home-works-sub p {
  margin: 0;
  color: #596368;
  font-size: 14px;
  line-height: 1.8;
}

.works-wrap {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px !important;
}

.works-wrap .col-sm-4 {
  width: 31.5% !important;
  float: none !important;
  margin: 0 !important;
}

.toppr-image {
  overflow: hidden;
  margin-bottom: 16px !important;
}

.toppr-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: .35s ease;
}

.works-en,
.service-en {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25em;
}

.works-wrap strong {
  display: block;
  margin: 0 0 20px !important;
  color: var(--text);
  font-size: 24px !important;
  line-height: 1.5;
  letter-spacing: .08em;
}

.works-wrap + .txt-center {
  margin-top: 20px !important;
}

/* ==========================================================
   TOP：WHY TANAPEN
   .home が付かない環境でも効く版
========================================================== */

.why-tanapen {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 88px 24px !important;
  background: #f7f9fa !important;
  box-sizing: border-box !important;
}

.why-tanapen,
.why-tanapen *,
.why-tanapen *::before,
.why-tanapen *::after {
  box-sizing: border-box !important;
}

.why-tanapen__inner {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.why-tanapen__heading {
  max-width: 760px !important;
  margin: 0 auto 52px !important;
  text-align: center !important;
}

.why-tanapen__en {
  margin: 0 0 14px !important;
  color: #8fa4ad !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.13em !important;
}

.why-tanapen__heading h2 {
  margin: 0 !important;
  color: #202426 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.03em !important;
}

.why-tanapen__lead {
  margin: 24px 0 0 !important;
  color: #596368 !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

.why-tanapen__steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.why-tanapen__step {
  overflow: hidden !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e4ecef !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(38, 50, 56, 0.055) !important;
}

.why-tanapen__image {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  background: #edf2f4 !important;
}

.why-tanapen__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.why-tanapen__number {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  color: #fff !important;
  background: rgba(52, 66, 71, 0.86) !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.why-tanapen__content {
  padding: 26px 22px 28px !important;
}

.why-tanapen__keyword {
  margin: 0 0 8px !important;
  color: #8fa4ad !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.16em !important;
}

.why-tanapen__content h3 {
  margin: 0 0 14px !important;
  color: #202426 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.why-tanapen__content p:last-child {
  margin: 0 !important;
  color: #596368 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

@media screen and (max-width: 1024px) {
  .why-tanapen__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 768px) {
  .why-tanapen {
    padding: 64px 18px !important;
  }

  .why-tanapen__heading {
    margin-bottom: 38px !important;
  }

  .why-tanapen__en {
    font-size: 34px !important;
    letter-spacing: 0.11em !important;
  }

  .why-tanapen__heading h2 {
    font-size: 20px !important;
    line-height: 1.7 !important;
  }

  .why-tanapen__lead {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .why-tanapen__steps {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .why-tanapen__step {
    border-radius: 18px !important;
  }

  .why-tanapen__content {
    padding: 24px 22px 26px !important;
  }
}

/* ==========================================================
   07. TOP：CASE STUDY
========================================================== */
.home-case {
  margin: 80px auto;
  padding: 40px 20px 56px;
  background: #fff;
}

.home-case .section-heading {
  margin: 0 0 28px;
}

.home-case-lead {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.home-case-lead p {
  margin: 0 !important;
  color: #2f3537 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0 !important;
}

.home-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto 34px;
}

.home-case-grid > p:not(:has(.home-case-card)),
.home-case-grid > br {
  display: none !important;
}

.home-case-grid > p:has(.home-case-card) {
  display: contents !important;
}

.home-case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebee;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(38,50,56,.05);
  transition: .3s;
}

.home-case-card:hover {
  box-shadow: 0 22px 48px rgba(38,50,56,.09);
  transform: translateY(-4px);
}

.home-case-image {
  display: block;
  overflow: hidden;
  text-decoration: none !important;
}

.home-case-image img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: .5s;
}

.home-case-card:hover .home-case-image img {
  transform: scale(1.04);
}

.home-case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.home-case .case-category {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  color: #7f98a5;
  background: #eef4f6;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.4 !important;
  letter-spacing: .14em;
}

.home-case-body h3 {
  margin: 0 0 12px;
  color: #202426 !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.home-case-body p {
  margin: 0 !important;
  color: #596368 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
}

.home-case .case-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  color: #7f98a5 !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.6 !important;
  letter-spacing: .05em;
  text-decoration: none !important;
  transition: .2s;
}

.home-case .case-link:hover {
  color: #20282c !important;
}

.home-case .btn-top_contact {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .home-case {
    margin: 56px auto;
    padding: 36px 20px 48px;
  }

  .home-case-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-case-image img {
    height: 220px;
  }

  .home-case-body {
    padding: 22px;
  }

  .home-case-body h3 {
    font-size: 16px !important;
  }

  .home-case-lead {
    text-align: left;
  }
}


/* WHY TANAPEN下からCASE STUDY前後の余白調整 */
.home-reason {
  margin: 0 auto 36px !important;
  padding: 72px 40px 36px !important;
}

.home-case {
  margin: 36px auto 72px !important;
  padding: 24px 20px 56px !important;
}

.home-case .section-heading {
  margin: 0 0 24px !important;
}

.home-case-lead {
  margin: 0 auto 30px !important;
}

@media (max-width: 768px) {
  .home-reason {
    margin: 40px auto 28px !important;
    padding: 52px 20px 32px !important;
  }

  .home-case {
    margin: 28px auto 56px !important;
    padding: 24px 20px 48px !important;
  }
}



/* ==========================================================
   07-2. TOP：LATEST CASE STUDY（既存NEWSを施工事例風に変更）
========================================================== */
.topnews {
  width: 100vw !important;
  max-width: none !important;
  margin: 72px calc(50% - 50vw) !important;
  padding: 72px 20px !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
  border-radius: 0 !important;
}

.topnews > .top-title {
  margin: 0 0 48px !important;
  padding: 0 !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.topnews > .top-title::before {
  content: "LATEST CASE STUDY";
  display: block !important;
  color: var(--accent) !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
}

.topnews > .top-title::after {
  content: "最新の施工事例";
  display: block !important;
  margin-top: 14px !important;
  color: #666 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .12em !important;
}

.topnews .top-infos,
.topnews .top-infos-news,
.topnews .topnews-outer {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.topnews .topnews-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.topnews .topnews-list li {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #e3e9ec !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 36px rgba(38, 50, 56, .045) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.topnews .topnews-list li:first-child {
  grid-column: span 2 !important;
}

.topnews .topnews-list li:hover {
  transform: translateY(-4px) !important;
  border-color: #cedae0 !important;
  box-shadow: 0 22px 48px rgba(38, 50, 56, .085) !important;
}

.topnews .topnews-list li a,
.topnews .topnews-list li > a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 28px !important;
  color: #202426 !important;
  text-decoration: none !important;
}

.topnews .topnews-bg {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  width: auto !important;
  margin: 0 0 20px !important;
  padding: 7px 13px !important;
  color: #78909c !important;
  background: #eaf1f3 !important;
  border: 1px solid #dce6ea !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .12em !important;
}

.topnews .of-hidden {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.topnews .topnews-date {
  display: block !important;
  margin: 0 0 12px !important;
  color: #98a2a7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .05em !important;
}

.topnews .topnews-title {
  display: block !important;
  margin: 0 !important;
  color: #202426 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: .01em !important;
}

.topnews .topnews-list li:first-child .topnews-title {
  font-size: 22px !important;
  line-height: 1.65 !important;
}

.topnews .topnews-title::after {
  content: "VIEW CASE  →";
  display: block !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e7ecef !important;
  color: #829aa5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .13em !important;
  transition: color .2s ease, letter-spacing .2s ease !important;
}

.topnews .topnews-list li:hover .topnews-title::after {
  color: #526c78 !important;
  letter-spacing: .16em !important;
}

.topnews .topnews-list li::before,
.topnews .topnews-list li::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================
   07-3. TOP：代表メッセージ
========================================================== */
.home-message {
  width: 100vw;
  margin: 56px calc(50% - 50vw) !important;
  padding: 56px 20px !important;
  box-sizing: border-box;
  background: #f7f9fa;
}

.home-message .section-heading {
  margin: 0 0 34px !important;
}

.home-message-inner {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

.home-message-image {
  position: relative;
}

.home-message-image::before {
  display: none !important;
  content: none !important;
}

.home-message-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: none !important;
}

.home-message-content,
.home-message-content h3,
.home-message-content p,
.home-message-sign {
  text-align: left !important;
}

.home-message-label {
  display: none !important;
}

.home-message-content {
  padding: 0;
}

.home-message-content h3 {
  margin: 0 0 20px !important;
  color: #202426 !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.home-message-content p:not(.home-message-label) {
  margin: 0 0 14px !important;
  color: #4f5a5f !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  letter-spacing: 0 !important;
}

.home-message-sign {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #dfe6e9;
}

.home-message-sign span,
.home-message-sign strong {
  display: block;
}

.home-message-sign span {
  margin-bottom: 4px;
  color: #6a757a;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.home-message-sign strong {
  color: #202426;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.6 !important;
}

/* ==========================================================
   08. TOP：AREA
========================================================== */
.home-area,
.section-area {
  width: 100vw;
  margin: 56px calc(50% - 50vw) !important;
  padding: 56px 20px !important;
  box-sizing: border-box;
  background: #fff;
}

.home-area .section-heading,
.section-area .section-heading {
  margin: 0 0 34px !important;
}

.home-area-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 44px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.home-area-text,
.home-area-text p,
.home-area-text h3 {
  text-align: left !important;
}

.home-area-label {
  margin: 0 0 12px !important;
  color: #8fa4ad !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .16em !important;
}

.home-area h3 {
  margin: 0 0 20px !important;
  color: #202426 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.home-area-text p {
  margin: 0 0 14px !important;
  color: #596368 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  letter-spacing: 0 !important;
}

.home-area-box {
  margin-top: 24px !important;
  padding: 22px 24px !important;
  background: #f7f9fa;
  border: 1px solid #e4eaed;
  border-left: 4px solid #8fa4ad;
  border-radius: 10px;
}

.home-area-box strong {
  display: block;
  margin: 0 0 8px !important;
  color: #202426;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.home-area-box p {
  margin: 0 !important;
}

.home-area-map {
  overflow: hidden;
  border: 1px solid #e4eaed;
  border-radius: 18px;
  box-shadow: none !important;
}

.home-area-map iframe {
  display: block;
  width: 100% !important;
  height: 320px !important;
  border: none !important;
}

.area-block {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.area-lead {
  margin-bottom: 34px !important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 2 !important;
  letter-spacing: .04em !important;
}

.area-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 920px;
  margin: 0 auto 28px !important;
  padding: 0;
  list-style: none;
}

.area-list li {
  padding: 14px 10px !important;
  color: #222;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.6 !important;
  letter-spacing: .05em;
}

.area-note {
  color: #666;
  font-size: 13px !important;
  line-height: 1.8 !important;
  letter-spacing: .04em;
}

/* ==========================================================
   09. 施工事例ページ
========================================================== */
.contents-main-left:has(.content-blog-box),
.col-md-9.contents-main-left:has(.content-blog-box) {
  width: 100% !important;
  max-width: 960px !important;
  float: none !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contents-main-left:has(.content-blog-box) + .col-md-3,
body.category-works .col-md-3,
body.category .col-md-3,
body.blog .col-md-3,
body.archive .col-md-3 {
  display: none !important;
}

.contents-main-left:has(.content-blog-box) .content-blog-box,
body.category-works .content-blog-box,
body.category .content-blog-box,
body.blog .content-blog-box,
body.archive .content-blog-box {
  overflow: hidden !important;
  margin: 0 0 28px !important;
  padding: 34px 36px !important;
  background: #fff !important;
  border: 1px solid #e4eaed !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 46px rgba(38, 50, 56, 0.055) !important;
}

.contents-main-left:has(.content-blog-box) .content-subtitle,
body.category-works .content-subtitle,
body.category .content-subtitle,
body.blog .content-subtitle,
body.archive .content-subtitle {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #496f80 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

.contents-main-left:has(.content-blog-box) .content-subtitle a,
body.category-works .content-subtitle a,
body.category .content-subtitle a,
body.blog .content-subtitle a,
body.archive .content-subtitle a {
  color: #496f80 !important;
  text-decoration: none !important;
}

.contents-main-left:has(.content-blog-box) .case-post,
body.category-works .case-post,
body.category .case-post,
body.blog .case-post,
body.archive .case-post {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.contents-main-left:has(.content-blog-box) .case-label,
body.category-works .case-label,
body.category .case-label,
body.blog .case-label,
body.archive .case-label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 0 14px !important;
  padding: 6px 14px !important;
  color: #617a86 !important;
  background: #f4f7f8 !important;
  border: 1px solid #dce5e9 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .14em !important;
}

.contents-main-left:has(.content-blog-box) .case-lead,
body.category-works .case-lead,
body.category .case-lead,
body.blog .case-lead,
body.archive .case-lead {
  margin: 0 0 16px !important;
  color: #2f3537 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

.single .case-post {
  max-width: 820px;
  margin: 0 auto;
  color: #222;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, sans-serif;
}

.single .case-label {
  display: inline-block;
  margin: 0 0 18px !important;
  color: #8ea3b5;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.single .case-lead {
  margin: 0 0 48px !important;
  font-size: 18px !important;
  font-weight: 500;
  line-height: 2 !important;
}

.single .case-section,
.single .case-photo-block {
  margin: 56px 0;
}

.single .case-section h2,
.single .case-section h3,
.single .case-photo-block h2,
.single .case-photo-block h3 {
  margin: 0 0 24px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
  font-size: 22px !important;
  line-height: 1.5 !important;
}

.single .case-section p,
.single .case-note p,
.single .case-photo-block p {
  margin: 0 0 22px !important;
  font-size: 16px !important;
  line-height: 2 !important;
}

.case-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

.case-gallery img {
  display: block;
  width: calc(33.333% - 10px);
  aspect-ratio: 4/3;
  margin: 0 !important;
  border-radius: 6px;
  object-fit: cover;
}

.single .case-post table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  font-size: 15px;
}

.single .case-post th,
.single .case-post td {
  padding: 14px 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

.single .case-post th {
  width: 28%;
  background: #f7f7f7;
  font-weight: 700;
}

.single .case-post > .case-section:has(+ .case-note) {
  margin: 70px 0 !important;
  padding: 40px 50px !important;
  background: linear-gradient(135deg,#f7f8f9 0%,#fff 100%) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}

.single .case-post > .case-section:has(+ .case-note)::before {
  content: "PROFESSIONAL VIEW";
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
}

.single .case-post > .case-note {
  margin: 70px 0 !important;
  padding: 40px 50px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-left: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.04) !important;
}

.single .case-post > .case-section:has(+ .case-note) h2,
.single .case-post > .case-note h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.5 !important;
}

/* ==========================================================
   10. お問い合わせ
========================================================== */
.page-id-2591 .entry-content {
  color: #23282a;
  line-height: 1.9;
}

.page-id-2591 .contact-page {
  max-width: 960px;
  margin: 0 auto 64px;
  padding: 12px 0 32px;
}

.page-id-2591 .contact-page p {
  margin: 0;
}

.page-id-2591 .contact-lead {
  position: relative;
  overflow: hidden;
  margin-bottom: 42px;
  padding: 42px 44px;
  background: linear-gradient(135deg, #f7f8f6 0%, #eef3f5 100%);
  border: 1px solid #e1e7ea;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(38, 50, 56, .06);
}

.page-id-2591 .contact-lead::before {
  content: "CONTACT";
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  color: #263238;
  background: #fff;
  border: 1px solid #dce5e9;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.page-id-2591 .contact-lead p {
  max-width: 760px;
  color: #2f3537;
  font-size: 1.03rem;
}

.page-id-2591 .contact-lead p + p {
  margin-top: 12px;
}

.page-id-2591 .contact-info {
  margin-bottom: 34px;
  padding: 38px;
  background: #fff;
  border: 1px solid #e4eaed;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(38,50,56,.055);
}

.page-id-2591 .contact-info h2 {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e7ea;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.5;
}

.page-id-2591 .contact-info h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 86px;
  height: 2px;
  background: #8fa4ad;
}

.page-id-2591 .contact-tel {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
  padding: 26px 30px;
  color: #fff;
  background: #20282c;
  border-radius: 20px;
}

.page-id-2591 .contact-tel-label {
  color: #dbe5e9;
  font-size: .9rem;
  font-weight: 700;
}

.page-id-2591 .contact-tel-number {
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .03em;
}

.page-id-2591 .contact-tel-number a {
  color: #fff;
  text-decoration: none;
}

.page-id-2591 .contact-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.page-id-2591 .contact-table th,
.page-id-2591 .contact-table td {
  padding: 17px 0;
  border-bottom: 1px solid #e7ecef;
  font-size: .98rem;
  text-align: left;
  vertical-align: top;
}

.page-id-2591 .contact-table th {
  width: 150px;
  color: #202426;
  font-weight: 700;
}

.page-id-2591 .contact-note {
  margin-bottom: 48px;
  padding: 20px 24px;
  color: #586368;
  background: #f7f9fa;
  border: 1px solid #e4eaed;
  border-radius: 18px;
  font-size: .95rem;
}

.page-id-2591 .entry-content form,
.page-id-2591 .entry-content .wpcf7,
.page-id-2591 .entry-content .mw_wp_form {
  max-width: 960px;
  margin: 42px auto 0;
}

.page-id-2591 input[type="text"],
.page-id-2591 input[type="email"],
.page-id-2591 input[type="tel"],
.page-id-2591 textarea,
.page-id-2591 select {
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  color: #202426;
  background: #fff;
  border: 1px solid #ccd8de;
  border-radius: 12px;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.6;
  transition: .2s ease;
}

.page-id-2591 input[type="submit"],
.page-id-2591 input[type="button"],
.page-id-2591 button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 50px;
  padding: 13px 32px;
  color: #fff;
  background: #20282c;
  border: 1px solid #20282c;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}

.page-id-2591 input[type="submit"]:hover,
.page-id-2591 input[type="button"]:hover,
.page-id-2591 button:hover {
  background: #7f98a5;
  border-color: #7f98a5;
  transform: translateY(-1px);
}

/* ==========================================================
   10-2. TOP：既存NEWS/会社案内の整え直し
========================================================== */
.topnews {
  margin: 56px calc(50% - 50vw) 64px !important;
  padding: 56px 20px 72px !important;
}

.topnews > .top-title {
  margin: 0 0 34px !important;
}

.topnews > .top-title::before {
  content: "LATEST CASE STUDY" !important;
}

.topnews > .top-title::after {
  content: "最新の施工事例" !important;
}

.topnews .topnews-list {
  max-width: 1040px !important;
  margin: 0 auto !important;
  gap: 18px !important;
}

.topnews .topnews-list li {
  border: none !important;
  box-shadow: 0 12px 32px rgba(38, 50, 56, .045) !important;
}

.topnews .topnews-list li:hover {
  border: none !important;
}

.top-info-company {
  width: 100% !important;
  max-width: 920px !important;
  margin: 72px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.top-info-company > .top-title {
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.top-info-company > .top-title::before {
  content: "COMPANY";
  display: block !important;
  color: var(--accent) !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
}

.top-info-company > .top-title::after {
  content: "会社案内";
  display: block !important;
  margin-top: 12px !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .12em !important;
}

.table-company-top {
  width: 100% !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  border: none !important;
  background: #fff !important;
}

.table-company-top th,
.table-company-top td {
  padding: 16px 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid #e4eaed !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  text-align: left !important;
  vertical-align: top !important;
}

.table-company-top th {
  width: 170px !important;
  color: #202426 !important;
  font-weight: 700 !important;
}

.top-info-company .txt-center {
  margin-top: 28px !important;
}

/* ==========================================================
   11. レスポンシブ
========================================================== */
@media screen and (max-width: 767px), (max-width: 768px) {
  body {
    font-size: 16px;
  }

  p,
  li,
  td,
  th {
    font-size: 16px !important;
  }

  .contents-top {
    max-width: 92%;
  }

  .section-heading {
    margin: 70px 0 35px;
  }

  .section-heading h2 {
    font-size: 34px !important;
    letter-spacing: .12em;
  }

  .section-heading p {
    font-size: 15px !important;
  }

  .header-info .tel a {
    display: block !important;
  }

  .header-info .tel a::before,
  .header-info .tel a::after {
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
  }

  #menu-header {
    gap: 22px !important;
  }

  .works-wrap,
  .point-wrap {
    display: block !important;
  }

  .works-wrap .col-sm-4,
  .pointcontents {
    width: 100% !important;
    margin-bottom: 34px !important;
  }

  .home-problem {
    width: 100vw;
    margin: 0 calc(50% - 50vw) 56px !important;
    padding: 104px 20px 52px;
    box-sizing: border-box;
  }

  .home-problem-grid,
  .home-reason-grid,
  .home-case-grid,
  .area-list {
    grid-template-columns: 1fr;
  }

  .home-problem-lead,
  .home-problem-message,
  .home-works-lead,
  .home-works-sub,
  .home-reason-lead,
  .home-case-lead {
    text-align: left;
  }

  .home-problem-item,
  .home-reason-item {
    padding: 24px 22px;
    border-radius: 18px;
  }

  .home-works {
    margin: 112px auto 56px;
    padding: 0 18px;
  }

  .home-works-item .toppr-image img,
  .home-case-image img {
    height: 220px;
  }

  .home-works-item .works-text,
  .home-case-body {
    min-height: auto;
    padding: 24px 22px;
  }

  .home-case {
    margin: 60px auto;
    padding: 56px 20px;
  }

  .home-case-grid {
    gap: 20px;
  }

  .home-case-body h3 {
    font-size: 18px;
  }

  .section-area {
    padding: 70px 24px 80px;
  }

  .case-gallery img {
    width: calc(50% - 8px);
  }

  .single .case-post {
    padding: 0 18px;
  }

  .single .case-lead {
    font-size: 16px !important;
  }

  .single .case-section h2,
  .single .case-section h3,
  .single .case-photo-block h2,
  .single .case-photo-block h3 {
    font-size: 20px !important;
  }

  .single .case-post > .case-section:has(+ .case-note),
  .single .case-post > .case-note {
    margin: 50px 0 !important;
    padding: 28px 22px !important;
  }

  .single .case-post th,
  .single .case-post td {
    display: block;
    width: 100%;
  }

  .single .case-post th {
    border-bottom: none;
  }

  .page-id-2591 .contact-page {
    margin-bottom: 44px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .page-id-2591 .contact-lead,
  .page-id-2591 .contact-info {
    padding: 26px 22px;
    border-radius: 20px;
  }

  .page-id-2591 .contact-tel {
    display: block;
    padding: 24px;
    border-radius: 18px;
  }

  .page-id-2591 .contact-tel-number {
    font-size: 1.62rem;
  }

  .page-id-2591 input[type="submit"],
  .page-id-2591 input[type="button"],
  .page-id-2591 button {
    width: 100%;
    max-width: 320px;
  }
}


/* ==========================================================
   11-2. レスポンシブ補正
========================================================== */
@media screen and (max-width: 768px) {
  .home-message {
    margin: 44px calc(50% - 50vw) !important;
    padding: 46px 20px !important;
  }

  .home-message-inner,
  .home-area-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .home-message .section-heading,
  .home-area .section-heading,
  .section-area .section-heading {
    margin-bottom: 28px !important;
  }

  .home-message-image {
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .home-area,
  .section-area {
    margin: 44px calc(50% - 50vw) !important;
    padding: 46px 20px !important;
  }

  .home-area-map iframe {
    height: 260px !important;
  }

  .topnews {
    margin: 44px calc(50% - 50vw) 52px !important;
    padding: 46px 18px 58px !important;
  }

  .topnews > .top-title::before,
  .top-info-company > .top-title::before {
    font-size: 28px !important;
    letter-spacing: .12em !important;
  }

  .topnews .topnews-list,
  .area-list {
    grid-template-columns: 1fr !important;
  }

  .topnews .topnews-list li:first-child {
    grid-column: auto !important;
  }

  .topnews .topnews-list li a,
  .topnews .topnews-list li > a {
    padding: 22px 20px !important;
  }

  .topnews .topnews-list li:first-child .topnews-title,
  .topnews .topnews-title {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .top-info-company {
    margin-top: 54px !important;
  }

  .table-company-top th,
  .table-company-top td {
    display: block !important;
    width: 100% !important;
    padding: 12px 10px !important;
  }

  .table-company-top th {
    padding-bottom: 4px !important;
    border-bottom: none !important;
  }
}


/* ==========================================================
   12. TOP下部セクション最終調整
   背景・余白・NEWS/COMPANY調整
========================================================== */
:root {
  --section-space-pc: 64px;
  --section-space-sp: 46px;
}

/* CASE STUDY：背景グレー */
.home-case {
  width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: var(--section-space-pc) 20px !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
}

.home-case .section-heading {
  margin: 0 0 28px !important;
}

.home-case-lead {
  margin: 0 auto 34px !important;
}

.home-case-grid {
  margin-bottom: 34px !important;
}

/* MESSAGE：背景なし、上の余白を詰める */
.home-message {
  width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 48px 20px var(--section-space-pc) !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

.home-message .section-heading {
  margin: 0 0 30px !important;
}

.home-message-inner {
  gap: 42px !important;
}

/* AREA：背景グレー、上の余白を確保 */
.home-area,
.section-area {
  width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: var(--section-space-pc) 20px !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
}

.home-area .section-heading,
.section-area .section-heading {
  margin: 0 0 34px !important;
}

/* 最新の施工事例：背景なし */
.topnews {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: var(--section-space-pc) 20px 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}

.topnews > .top-title {
  margin: 0 0 34px !important;
}

.topnews .top-infos,
.topnews .top-infos-news,
.topnews .topnews-outer {
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list li,
.topnews .topnews-list li:hover,
.topnews .topnews-list li a,
.topnews .topnews-list li > a {
  border: none !important;
  outline: none !important;
}

.topnews .topnews-list li {
  box-shadow: 0 12px 30px rgba(38, 50, 56, .045) !important;
}

/* 会社案内：背景グレー */
.top-info-company {
  width: 100vw !important;
  max-width: none !important;
  margin: var(--section-space-pc) calc(50% - 50vw) 0 !important;
  padding: var(--section-space-pc) 20px !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
}

.top-info-company > .top-title {
  margin: 0 0 32px !important;
}

.table-company-top {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: none !important;
  border-collapse: collapse !important;
}

.top-info-company .txt-center {
  max-width: 920px !important;
  margin: 28px auto 0 !important;
}

/* 下部セクション内の不要な余白リセット */
.home-case + .home-message,
.home-message + .home-area,
.home-message + .section-area,
.home-area + .topnews,
.section-area + .topnews {
  margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
  .home-case,
  .home-area,
  .section-area {
    padding: var(--section-space-sp) 18px !important;
  }

  .home-message {
    padding: 38px 18px var(--section-space-sp) !important;
  }

  .topnews {
    padding: var(--section-space-sp) 18px 0 !important;
  }

  .top-info-company {
    margin-top: var(--section-space-sp) !important;
    padding: var(--section-space-sp) 18px !important;
  }

  .home-message .section-heading,
  .home-area .section-heading,
  .section-area .section-heading,
  .topnews > .top-title,
  .top-info-company > .top-title {
    margin-bottom: 28px !important;
  }
}


/* ==========================================================
   13. TOP下部 背景・余白 最終補正 v4
   スクショ確認後の強制調整
========================================================== */
.home .home-case,
.home .home-message,
.home .home-area,
.home .section-area,
.home .topnews,
.home .top-info-company {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.home .home-case {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
}

.home .home-message {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 52px 20px 64px !important;
  background: #fff !important;
}

.home .home-area,
.home .section-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
}

.home .topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px 0 !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.home .top-info-company {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
  border: none !important;
  box-shadow: none !important;
}

.home .home-case .section-heading,
.home .home-message .section-heading,
.home .home-area .section-heading,
.home .section-area .section-heading,
.home .topnews > .top-title,
.home .top-info-company > .top-title {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

.home .home-case > *,
.home .home-message > *,
.home .home-area > *,
.home .section-area > *,
.home .topnews > *,
.home .top-info-company > * {
  position: relative;
  z-index: 1;
}

/* 最新施工事例カードまわりの外枠を完全に消す */
.home .topnews .top-infos,
.home .topnews .top-infos-news,
.home .topnews .topnews-outer,
.home .topnews .topnews-list,
.home .topnews .topnews-list li,
.home .topnews .topnews-list li a,
.home .topnews .topnews-list li > a {
  border: none !important;
  outline: none !important;
}

.home .topnews .topnews-outer,
.home .topnews .topnews-list {
  background: transparent !important;
  box-shadow: none !important;
}

.home .topnews .topnews-list li {
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(38, 50, 56, .045) !important;
}

/* 会社案内はグレー帯の中で白い表にする */
.home .top-info-company .table-company-top {
  background: #fff !important;
}

@media screen and (max-width: 768px) {
  .home .home-case,
  .home .home-area,
  .home .section-area,
  .home .top-info-company {
    padding: 46px 18px !important;
  }

  .home .home-message {
    padding: 38px 18px 46px !important;
  }

  .home .topnews {
    padding: 46px 18px 0 !important;
  }

  .home .home-case .section-heading,
  .home .home-message .section-heading,
  .home .home-area .section-heading,
  .home .section-area .section-heading,
  .home .topnews > .top-title,
  .home .top-info-company > .top-title {
    margin-bottom: 28px !important;
  }
}


/* ==========================================================
   14. TOP下部 背景・余白 最終補正 v5
   .homeに依存しない実表示ベースの調整
========================================================== */
.home-case,
.home-message,
.home-area,
.section-area,
.topnews,
.top-info-company {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* CASE STUDY：グレー背景 */
.home-case {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
}

.home-case .section-heading {
  margin: 0 0 28px !important;
}

.home-case-lead {
  margin: 0 auto 32px !important;
}

/* MESSAGE：白背景。上の余白を詰める */
.home-message {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 44px 20px 64px !important;
  background: #fff !important;
}

.home-message .section-heading {
  margin: 0 0 28px !important;
}

.home-message-inner {
  max-width: 1040px !important;
  gap: 42px !important;
}

/* AREA：グレー背景。上の余白はMESSAGEと同じ基準にする */
.home-area,
.section-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
}

.home-area .section-heading,
.section-area .section-heading {
  margin: 0 0 32px !important;
}

.home-area-inner {
  max-width: 1040px !important;
}

/* LATEST CASE STUDY：白背景。上下余白を統一 */
.topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px 0 !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.topnews > .top-title {
  margin: 0 0 32px !important;
}

/* 最新施工事例の外枠線を完全に削除 */
.topnews,
.topnews * {
  outline: none !important;
}

.topnews .top-infos,
.topnews .top-infos-news,
.topnews .topnews-outer,
.topnews .topnews-list,
.topnews .topnews-list li,
.topnews .topnews-list li a,
.topnews .topnews-list li > a {
  border: 0 !important;
}

.topnews .top-infos,
.topnews .top-infos-news,
.topnews .topnews-outer,
.topnews .topnews-list {
  background: transparent !important;
  box-shadow: none !important;
}

.topnews .topnews-list li {
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(38, 50, 56, .045) !important;
}

/* COMPANY：グレー背景 */
.top-info-company {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
  border: none !important;
  box-shadow: none !important;
}

.top-info-company > .top-title {
  margin: 0 0 32px !important;
}

.top-info-company .table-company-top {
  max-width: 920px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: none !important;
}

/* 隣接セクションの余白の足し算を防ぐ */
.home-case + .home-message,
.home-message + .home-area,
.home-message + .section-area,
.home-area + .topnews,
.section-area + .topnews,
.topnews + .top-info-company {
  margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
  .home-case,
  .home-area,
  .section-area,
  .top-info-company {
    padding: 46px 18px !important;
  }

  .home-message {
    padding: 36px 18px 46px !important;
  }

  .topnews {
    padding: 46px 18px 0 !important;
  }

  .home-case .section-heading,
  .home-message .section-heading,
  .home-area .section-heading,
  .section-area .section-heading,
  .topnews > .top-title,
  .top-info-company > .top-title {
    margin-bottom: 26px !important;
  }
}


/* ==========================================================
   15. TOP背景 最終統一 v6
   FIRST STEP / WHY TANAPEN / MESSAGE / LATEST CASE STUDY をグレー背景へ統一
========================================================== */
.home-problem,
.home-reason,
.home-message,
.topnews,
.home .home-problem,
.home .home-reason,
.home .home-message,
.home .topnews {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
  border-radius: 0 !important;
}

/* FIRST STEP */
.home-problem,
.home .home-problem {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 104px 40px 72px !important;
}

/* WHY TANAPEN */
.home-reason,
.home .home-reason {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 40px !important;
}

/* MESSAGE */
.home-message,
.home .home-message {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
}

/* LATEST CASE STUDY */
.topnews,
.home .topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  background: #f7f9fa !important;
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list,
.home .topnews .topnews-list {
  background: transparent !important;
  box-shadow: none !important;
}

.topnews .topnews-list li,
.home .topnews .topnews-list li {
  background: #fff !important;
}

.home-problem .section-heading,
.home-reason .section-heading,
.home-message .section-heading,
.topnews > .top-title,
.home .home-problem .section-heading,
.home .home-reason .section-heading,
.home .home-message .section-heading,
.home .topnews > .top-title {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

@media screen and (max-width: 768px) {
  .home-problem,
  .home .home-problem {
    padding: 82px 18px 52px !important;
  }

  .home-reason,
  .home-message,
  .topnews,
  .home .home-reason,
  .home .home-message,
  .home .topnews {
    padding: 46px 18px !important;
  }

  .home-problem .section-heading,
  .home-reason .section-heading,
  .home-message .section-heading,
  .topnews > .top-title,
  .home .home-problem .section-heading,
  .home .home-reason .section-heading,
  .home .home-message .section-heading,
  .home .topnews > .top-title {
    margin-bottom: 26px !important;
  }
}


/* ==========================================================
   16. TOP背景 最終統一 v7
   グレー：FIRST STEP / WHY TANAPEN / MESSAGE / LATEST CASE STUDY
   白：それ以外のTOPセクション
========================================================== */
:root {
  --tanapen-section-gray: #f7f9fa;
  --tanapen-section-white: #fff;
}

/* まずTOP主要セクションを白に戻す */
.home-works,
.home-case,
.home-area,
.section-area,
.top-info-company,
.home .home-works,
.home .home-case,
.home .home-area,
.home .section-area,
.home .top-info-company {
  background: var(--tanapen-section-white) !important;
}

/* グレーにしたい4セクションだけ固定 */
.home-problem,
.home-reason,
.home-message,
.topnews,
.home .home-problem,
.home .home-reason,
.home .home-message,
.home .topnews {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  background: var(--tanapen-section-gray) !important;
  border-radius: 0 !important;
}

/* FIRST STEP */
.home-problem,
.home .home-problem {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 104px 40px 72px !important;
}

/* WHY TANAPEN */
.home-reason,
.home .home-reason {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 40px !important;
}

/* MESSAGE */
.home-message,
.home .home-message {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
}

/* LATEST CASE STUDY */
.topnews,
.home .topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
  border: none !important;
  box-shadow: none !important;
}

/* 白背景セクションもフル幅帯として整える */
.home-works,
.home-case,
.home-area,
.section-area,
.top-info-company,
.home .home-works,
.home .home-case,
.home .home-area,
.home .section-area,
.home .top-info-company {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.home-works,
.home .home-works {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 80px 20px !important;
}

.home-case,
.home .home-case {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
}

.home-area,
.section-area,
.home .home-area,
.home .section-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
}

.top-info-company,
.home .top-info-company {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 64px 20px !important;
}

/* セクション内カードや表は白のまま */
.home-problem-item,
.home-reason-item,
.home-case-card,
.topnews .topnews-list li,
.top-info-company table,
.top-info-company .table-company-top,
.top-info-company .table-company--top,
.home .topnews .topnews-list li {
  background: #fff !important;
}

/* LATEST CASE STUDYの外側はグレー、リスト外枠は透明 */
.topnews .topnews-list,
.topnews .topnews-outer,
.topnews .top-infos,
.topnews .top-infos-news,
.home .topnews .topnews-list,
.home .topnews .topnews-outer,
.home .topnews .top-infos,
.home .topnews .top-infos-news {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.home-problem .section-heading,
.home-reason .section-heading,
.home-message .section-heading,
.topnews > .top-title,
.home-works .section-heading,
.home-case .section-heading,
.home-area .section-heading,
.section-area .section-heading,
.top-info-company > .top-title,
.home .home-problem .section-heading,
.home .home-reason .section-heading,
.home .home-message .section-heading,
.home .topnews > .top-title,
.home .home-works .section-heading,
.home .home-case .section-heading,
.home .home-area .section-heading,
.home .section-area .section-heading,
.home .top-info-company > .top-title {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

@media screen and (max-width: 768px) {
  .home-problem,
  .home .home-problem {
    padding: 82px 18px 52px !important;
  }

  .home-reason,
  .home-message,
  .topnews,
  .home-works,
  .home-case,
  .home-area,
  .section-area,
  .top-info-company,
  .home .home-reason,
  .home .home-message,
  .home .topnews,
  .home .home-works,
  .home .home-case,
  .home .home-area,
  .home .section-area,
  .home .top-info-company {
    padding: 46px 18px !important;
  }

  .home-problem .section-heading,
  .home-reason .section-heading,
  .home-message .section-heading,
  .topnews > .top-title,
  .home-works .section-heading,
  .home-case .section-heading,
  .home-area .section-heading,
  .section-area .section-heading,
  .top-info-company > .top-title,
  .home .home-problem .section-heading,
  .home .home-reason .section-heading,
  .home .home-message .section-heading,
  .home .topnews > .top-title,
  .home .home-works .section-heading,
  .home .home-case .section-heading,
  .home .home-area .section-heading,
  .home .section-area .section-heading,
  .home .top-info-company > .top-title {
    margin-bottom: 26px !important;
  }
}


/* ==========================================================
   17. TOP背景 最終統一 v8
   セクション背景を交互に固定

   グレー：FIRST STEP / WHY TANAPEN / MESSAGE / LATEST CASE STUDY
   白　　：WORKS / CASE STUDY / AREA / COMPANY
========================================================== */
:root {
  --tanapen-section-gray: #f7f9fa;
  --tanapen-section-white: #fff;
}

/* 共通：TOP内セクションをフル幅の帯として扱う */
.home-problem,
.home-works,
.home-reason,
.home-case,
.home-message,
.home-area,
.section-area,
.topnews,
.top-info-company,
.home .home-problem,
.home .home-works,
.home .home-reason,
.home .home-case,
.home .home-message,
.home .home-area,
.home .section-area,
.home .topnews,
.home .top-info-company {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* グレー背景にするセクション */
.home-problem,
.home-reason,
.home-message,
.topnews,
.home .home-problem,
.home .home-reason,
.home .home-message,
.home .topnews {
  background: var(--tanapen-section-gray) !important;
}

/* 白背景にするセクション */
.home-works,
.home-case,
.home-area,
.section-area,
.top-info-company,
.home .home-works,
.home .home-case,
.home .home-area,
.home .section-area,
.home .top-info-company {
  background: var(--tanapen-section-white) !important;
}

/* 余白：各セクションの高さを揃える */
.home-problem,
.home .home-problem {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 104px 40px 72px !important;
}

.home-works,
.home-reason,
.home-case,
.home-message,
.home-area,
.section-area,
.topnews,
.top-info-company,
.home .home-works,
.home .home-reason,
.home .home-case,
.home .home-message,
.home .home-area,
.home .section-area,
.home .topnews,
.home .top-info-company {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px 20px !important;
}

/* 中身の最大幅はセクション内で保つ */
.home-problem > *,
.home-works > *,
.home-reason > *,
.home-case > *,
.home-message > *,
.home-area > *,
.section-area > *,
.topnews > *,
.top-info-company > *,
.home .home-problem > *,
.home .home-works > *,
.home .home-reason > *,
.home .home-case > *,
.home .home-message > *,
.home .home-area > *,
.home .section-area > *,
.home .topnews > *,
.home .top-info-company > * {
  position: relative;
  z-index: 1;
}

/* 見出し余白を統一 */
.home-problem .section-heading,
.home-works .section-heading,
.home-reason .section-heading,
.home-case .section-heading,
.home-message .section-heading,
.home-area .section-heading,
.section-area .section-heading,
.topnews > .top-title,
.top-info-company > .top-title,
.home .home-problem .section-heading,
.home .home-works .section-heading,
.home .home-reason .section-heading,
.home .home-case .section-heading,
.home .home-message .section-heading,
.home .home-area .section-heading,
.home .section-area .section-heading,
.home .topnews > .top-title,
.home .top-info-company > .top-title {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

/* カード・表は背景帯に埋もれないよう白で固定 */
.home-problem-item,
.home-reason-item,
.home-case-card,
.topnews .topnews-list li,
.top-info-company table,
.top-info-company .table-company-top,
.top-info-company .table-company--top,
.home .topnews .topnews-list li {
  background: #fff !important;
}

/* LATEST CASE STUDYの外枠は消して、カードだけ見せる */
.topnews,
.topnews .top-infos,
.topnews .top-infos-news,
.topnews .topnews-outer,
.topnews .topnews-list,
.home .topnews,
.home .topnews .top-infos,
.home .topnews .top-infos-news,
.home .topnews .topnews-outer,
.home .topnews .topnews-list {
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list,
.topnews .topnews-outer,
.topnews .top-infos,
.topnews .top-infos-news,
.home .topnews .topnews-list,
.home .topnews .topnews-outer,
.home .topnews .top-infos,
.home .topnews .top-infos-news {
  background: transparent !important;
}

@media screen and (max-width: 768px) {
  .home-problem,
  .home .home-problem {
    padding: 82px 18px 52px !important;
  }

  .home-works,
  .home-reason,
  .home-case,
  .home-message,
  .home-area,
  .section-area,
  .topnews,
  .top-info-company,
  .home .home-works,
  .home .home-reason,
  .home .home-case,
  .home .home-message,
  .home .home-area,
  .home .section-area,
  .home .topnews,
  .home .top-info-company {
    padding: 46px 18px !important;
  }

  .home-problem .section-heading,
  .home-works .section-heading,
  .home-reason .section-heading,
  .home-case .section-heading,
  .home-message .section-heading,
  .home-area .section-heading,
  .section-area .section-heading,
  .topnews > .top-title,
  .top-info-company > .top-title,
  .home .home-problem .section-heading,
  .home .home-works .section-heading,
  .home .home-reason .section-heading,
  .home .home-case .section-heading,
  .home .home-message .section-heading,
  .home .home-area .section-heading,
  .home .section-area .section-heading,
  .home .topnews > .top-title,
  .home .top-info-company > .top-title {
    margin-bottom: 26px !important;
  }
}


/* ==========================================================
   18. AREA / LATEST CASE STUDY 余白補正 v9
   AREA後のグレー余白を詰め、LATEST下に余白を足す
========================================================== */

/* AREAは最後まで白。下に余計なグレー帯が出ないよう余白を整える */
.home-area,
.section-area,
.home .home-area,
.home .section-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 56px !important;
  background: #fff !important;
}

/* LATESTは上を詰めて、下を広めにする */
.topnews,
.home .topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 46px !important;
  padding-bottom: 78px !important;
  background: #f7f9fa !important;
}

.topnews > .top-title,
.home .topnews > .top-title {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

.topnews .topnews-list,
.home .topnews .topnews-list {
  margin-bottom: 0 !important;
}

/* LATESTの次に来るCOMPANYは白背景で、上に余計な隙間を作らない */
.top-info-company,
.home .top-info-company {
  margin-top: 0 !important;
  background: #fff !important;
}

@media screen and (max-width: 768px) {
  .home-area,
  .section-area,
  .home .home-area,
  .home .section-area {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
  }

  .topnews,
  .home .topnews {
    padding-top: 34px !important;
    padding-bottom: 58px !important;
  }
}


/* ==========================================
   TOP：CONTACT / COMPANY
   テーマ自動出力HTML用

   対象HTML：
   .top-info-company
   h2.top-title.txt-center
   table.table.table-company--top
   p.txt-center
========================================== */

.top-info-company {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 64px 20px !important;
  box-sizing: border-box !important;
  background: #f7f9fa !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================
   CONTACT
   HTML上は最後にある p.txt-center を上へ移動
========================================== */

.top-info-company > p.txt-center {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  order: 1;
  width: 100%;
  max-width: 920px;
  overflow: hidden;
  margin: 0 auto 64px !important;
  padding: 56px 32px !important;
  box-sizing: border-box;
  background: linear-gradient(135deg, #a9bac2 0%, #8fa4ad 100%) !important;
  border: none !important;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(71, 91, 101, 0.12);
  text-align: center !important;
}

.top-info-company > p.txt-center::before {
  content: "CONTACT";
  display: block;
  margin: 0 0 18px;
  color: #fff;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
}


.top-info-company > p.txt-center .btn-top_contact {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 54px;
  margin: 0 0 30px !important;
  padding: 12px 34px !important;
  color: #43545c !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(45, 62, 70, 0.12);
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.top-info-company > p.txt-center .btn-top_contact:hover {
  color: #fff !important;
  background: #526b76 !important;
  border-color: #526b76 !important;
  box-shadow: 0 14px 32px rgba(45, 62, 70, 0.18);
  transform: translateY(-2px);
}

/* ==========================================
   COMPANY
========================================== */

.top-info-company > h2.top-title,
.top-info-company > .top-title {
  order: 2;
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 34px !important;
  padding: 0 !important;
  color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.top-info-company > h2.top-title::before,
.top-info-company > .top-title::before {
  content: "COMPANY";
  display: block !important;
  width: 100% !important;
  color: #8fa4ad !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 42px !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-align: center !important;
}

.top-info-company > h2.top-title::after,
.top-info-company > .top-title::after {
  content: "会社案内";
  display: block !important;
  width: 100% !important;
  margin-top: 12px;
  color: #4f585c !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center !important;
}

.top-info-company > table.table-company--top,
.top-info-company > table.table-company-top,
.top-info-company > .table-company--top,
.top-info-company > .table-company-top {
  order: 3;
  width: 100% !important;
  max-width: 920px !important;
  overflow: hidden;
  margin: 0 auto !important;
  background: #fff !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(38, 50, 56, 0.045);
}

.top-info-company table.table-company--top th,
.top-info-company table.table-company--top td,
.top-info-company table.table-company-top th,
.top-info-company table.table-company-top td {
  padding: 18px 24px !important;
  color: #596368 !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid #e7ecef !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  text-align: left !important;
  vertical-align: top !important;
}

.top-info-company table.table-company--top tr:last-child th,
.top-info-company table.table-company--top tr:last-child td,
.top-info-company table.table-company-top tr:last-child th,
.top-info-company table.table-company-top tr:last-child td {
  border-bottom: none !important;
}

.top-info-company table.table-company--top th,
.top-info-company table.table-company-top th {
  width: 190px !important;
  color: #344247 !important;
  background: #f7f9fa !important;
  font-weight: 700 !important;
}

.top-info-company table.table-company--top td p,
.top-info-company table.table-company-top td p {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.top-info-company table.table-company--top a,
.top-info-company table.table-company-top a {
  color: #657f8a !important;
  text-decoration: none !important;
}

.top-info-company table.table-company--top a:hover,
.top-info-company table.table-company-top a:hover {
  text-decoration: underline !important;
}

/* ==========================================
   スマホ
========================================== */

@media screen and (max-width: 768px) {
  .top-info-company {
    padding: 46px 18px !important;
  }

  .top-info-company > p.txt-center {
    margin-bottom: 52px !important;
    padding: 44px 22px !important;
    border-radius: 20px;
  }

  .top-info-company > p.txt-center::before {
    margin-bottom: 16px;
    font-size: 30px;
    letter-spacing: 0.12em;
  }


  .top-info-company > p.txt-center .btn-top_contact {
    width: 100%;
    max-width: 300px;
    min-width: 0;
    margin-bottom: 26px !important;
  }

  .top-info-company > h2.top-title,
  .top-info-company > .top-title {
    margin-bottom: 28px !important;
  }

  .top-info-company > h2.top-title::before,
  .top-info-company > .top-title::before {
    font-size: 30px !important;
    letter-spacing: 0.12em;
  }

  .top-info-company > h2.top-title::after,
  .top-info-company > .top-title::after {
    font-size: 13px !important;
  }

  .top-info-company > table.table-company--top,
  .top-info-company > table.table-company-top,
  .top-info-company table.table-company--top tbody,
  .top-info-company table.table-company-top tbody,
  .top-info-company table.table-company--top tr,
  .top-info-company table.table-company-top tr,
  .top-info-company table.table-company--top th,
  .top-info-company table.table-company-top th,
  .top-info-company table.table-company--top td,
  .top-info-company table.table-company-top td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .top-info-company > table.table-company--top,
  .top-info-company > table.table-company-top {
    border-radius: 18px;
  }

  .top-info-company table.table-company--top tr,
  .top-info-company table.table-company-top tr {
    border-bottom: 1px solid #e7ecef;
  }

  .top-info-company table.table-company--top tr:last-child,
  .top-info-company table.table-company-top tr:last-child {
    border-bottom: none;
  }

  .top-info-company table.table-company--top th,
  .top-info-company table.table-company-top th {
    padding: 16px 20px 6px !important;
    border-bottom: none !important;
  }

  .top-info-company table.table-company--top td,
  .top-info-company table.table-company-top td {
    padding: 0 20px 16px !important;
    border-bottom: none !important;
  }
}


/* ==========================================================
   19. TOP背景 + COMPANY 統合最終補正 v10
   v9で消えたcompanyデザインを復元し、交互背景を維持
========================================================== */
:root {
  --tanapen-section-gray: #f7f9fa;
  --tanapen-section-white: #fff;
}

/* グレー背景 */
.home-problem,
.home-reason,
.home-message,
.topnews,
.home .home-problem,
.home .home-reason,
.home .home-message,
.home .topnews {
  background: var(--tanapen-section-gray) !important;
}

/* 白背景 */
.home-works,
.home-case,
.home-area,
.section-area,
.top-info-company,
.home .home-works,
.home .home-case,
.home .home-area,
.home .section-area,
.home .top-info-company {
  background: var(--tanapen-section-white) !important;
}

/* AREAとLATESTの境界調整 */
.home-area,
.section-area,
.home .home-area,
.home .section-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 52px !important;
  background: #fff !important;
}

.topnews,
.home .topnews {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 52px !important;
  padding-bottom: 82px !important;
  background: #f7f9fa !important;
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list,
.topnews .topnews-outer,
.topnews .top-infos,
.topnews .top-infos-news,
.home .topnews .topnews-list,
.home .topnews .topnews-outer,
.home .topnews .top-infos,
.home .topnews .top-infos-news {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.topnews .topnews-list li,
.home .topnews .topnews-list li {
  background: #fff !important;
}

/* COMPANYは白背景に固定しつつ、CTAとテーブルデザインは維持 */
.top-info-company,
.home .top-info-company {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 72px 20px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.top-info-company > p.txt-center,
.home .top-info-company > p.txt-center {
  order: 1 !important;
}

.top-info-company > h2.top-title,
.top-info-company > .top-title,
.home .top-info-company > h2.top-title,
.home .top-info-company > .top-title {
  order: 2 !important;
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

.top-info-company > table.table-company--top,
.top-info-company > table.table-company-top,
.top-info-company > .table-company--top,
.top-info-company > .table-company-top,
.home .top-info-company > table.table-company--top,
.home .top-info-company > table.table-company-top,
.home .top-info-company > .table-company--top,
.home .top-info-company > .table-company-top {
  order: 3 !important;
  background: #fff !important;
}

/* COMPANY見出し中央固定 */
.top-info-company > h2.top-title::before,
.top-info-company > .top-title::before,
.top-info-company > h2.top-title::after,
.top-info-company > .top-title::after,
.home .top-info-company > h2.top-title::before,
.home .top-info-company > .top-title::before,
.home .top-info-company > h2.top-title::after,
.home .top-info-company > .top-title::after {
  width: 100% !important;
  text-align: center !important;
}

@media screen and (max-width: 768px) {
  .home-area,
  .section-area,
  .home .home-area,
  .home .section-area {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
  }

  .topnews,
  .home .topnews {
    padding-top: 38px !important;
    padding-bottom: 62px !important;
  }

  .top-info-company,
  .home .top-info-company {
    padding: 46px 18px !important;
  }
}


/* ==========================================================
   下層ページ：業務内容 / tanapenについて / 会社案内
========================================================== */

/* =========================================
   事業内容ページ
========================================= */

.service-page {
  color: #2f383c;
  line-height: 1.9;
}

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

.service-page img {
  max-width: 100%;
  height: auto;
}


/* =========================================
   HERO
========================================= */

.service-page .service-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 82px 40px 96px;
  text-align: center;
}

.service-page .service-hero-en {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.service-page .service-hero h1 {
  margin: 0 0 32px;
  color: #20282c;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.service-page .service-hero-copy {
  margin: 0 0 30px;
  color: #263238;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.03em;
}

.service-page .service-hero-text {
  max-width: 760px;
  margin: 0 auto;
  color: #596368;
  font-size: 15px;
  line-height: 2.1;
}


/* =========================================
   共通見出し
========================================= */

.service-page .service-section-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.service-page .service-section-en {
  margin: 0 0 12px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.service-page .service-section-heading h2 {
  margin: 0 0 22px;
  color: #20282c;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.service-page .service-section-lead {
  margin: 0;
  color: #596368;
  font-size: 15px;
  line-height: 2;
}


/* =========================================
   TANAPENの仕事
========================================= */

.service-page .service-concept {
  padding: 88px 40px;
  background: #f6f8f9;
}

.service-page .service-concept-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 72px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.service-page .service-concept-copy h3 {
  margin: 0 0 28px;
  color: #20282c;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
}

.service-page .service-concept-copy p {
  margin: 0 0 18px;
  color: #505b60;
  font-size: 15px;
  line-height: 2;
}

.service-page .service-concept-copy p:last-child {
  margin-bottom: 0;
}

.service-page .service-process {
  padding: 34px;
  background: #fff;
  border: 1px solid #e1e8eb;
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.06);
}

.service-page .service-process-item {
  padding: 20px 22px;
  background: #f8fafb;
  border: 1px solid #e5ebee;
  border-radius: 16px;
}

.service-page .service-process-item span {
  display: block;
  margin-bottom: 7px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.service-page .service-process-item h3 {
  margin: 0 0 6px;
  color: #20282c;
  font-size: 18px;
  font-weight: 700;
}

.service-page .service-process-item p {
  margin: 0;
  color: #647075;
  font-size: 13px;
  line-height: 1.8;
}

.service-page .service-process-arrow {
  padding: 7px 0;
  color: #9cb0b8;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}


/* =========================================
   SERVICE LIST
========================================= */

.service-page .service-list-section {
  padding: 96px 40px;
}

.service-page .service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  max-width: 1120px;
  margin: 0 auto;
}

.service-page .service-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8eb;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(38, 50, 56, 0.05);
}

.service-page .service-card-image {
  overflow: hidden;
  height: 280px;
}

.service-page .service-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-page .service-card:hover .service-card-image img {
  transform: scale(1.035);
}

.service-page .service-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      135deg,
      #dce7ea 0%,
      #b9cbd2 100%
    );
}

.service-page .service-card-image-placeholder span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.service-page .service-card-body {
  padding: 34px 34px 38px;
}

.service-page .service-card-number {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.service-page .service-card h3 {
  margin: 0 0 16px;
  color: #20282c;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.service-page .service-card-copy {
  margin: 0 0 18px !important;
  color: #39474d !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.8 !important;
}

.service-page .service-card-body > p {
  margin: 0 0 20px;
  color: #596368;
  font-size: 14px;
  line-height: 1.95;
}

.service-page .service-card ul {
  margin: 0 0 28px;
  padding: 20px 22px 20px 42px;
  background: #f7f9fa;
  border-radius: 16px;
}

.service-page .service-card li {
  margin: 4px 0;
  color: #596368;
  font-size: 13px;
  line-height: 1.75;
}

.service-page .service-card-link {
  display: inline-flex;
  align-items: center;
  color: #68838f !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.04em;
}

.service-page .service-card-link::after {
  content: "→";
  margin-left: 9px;
  transition: transform 0.2s ease;
}

.service-page .service-card-link:hover::after {
  transform: translateX(5px);
}


/* =========================================
   FLOW
========================================= */

.service-page .service-flow-section {
  padding: 92px 40px;
  background: #f6f8f9;
}

.service-page .service-flow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
}

.service-page .service-flow-item {
  padding: 28px 22px;
  background: #fff;
  border: 1px solid #e2e8eb;
  border-radius: 20px;
}

.service-page .service-flow-item span {
  display: block;
  margin-bottom: 14px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.service-page .service-flow-item h3 {
  margin: 0 0 12px;
  color: #20282c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.service-page .service-flow-item p {
  margin: 0;
  color: #626d72;
  font-size: 13px;
  line-height: 1.85;
}


/* =========================================
   MESSAGE
========================================= */

.service-page .service-message {
  padding: 100px 40px;
}

.service-page .service-message-inner {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.service-page .service-message-image {
  position: relative;
}

.service-page .service-message-image::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100%;
  height: 100%;
  background: #dce7ea;
  border-radius: 26px;
}

.service-page .service-message-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.1);
}

.service-page .service-message-content h2 {
  margin: 0 0 28px;
  color: #20282c;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.6;
}

.service-page .service-message-content > p:not(.service-section-en):not(.service-message-sign) {
  margin: 0 0 17px;
  color: #566166;
  font-size: 15px;
  line-height: 2;
}

.service-page .service-message-sign {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid #e0e6e9;
  color: #687378;
  font-size: 13px;
  line-height: 1.8;
  text-align: right;
}

.service-page .service-message-sign strong {
  color: #20282c;
  font-size: 17px;
}


/* =========================================
   CTA
========================================= */

.service-page .service-cta {
  max-width: 1080px;
  margin: 0 auto 100px;
  padding: 66px 48px;
  background:
    linear-gradient(
      135deg,
      #a6b8c0 0%,
      #879fa9 100%
    );
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14);
}

.service-page .service-cta-en {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.service-page .service-cta h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.55;
}

.service-page .service-cta > p:not(.service-cta-en) {
  max-width: 720px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 2;
}

.service-page .service-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  min-height: 54px;
  padding: 13px 32px;
  color: #485d66 !important;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(48, 64, 72, 0.13);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.service-page .service-cta-button:hover {
  color: #fff !important;
  background: #526b76;
  border-color: #526b76;
  transform: translateY(-2px);
}


/* =========================================
   タブレット
========================================= */

@media screen and (max-width: 991px) {
  .service-page .service-concept-inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .service-page .service-process {
    max-width: 680px;
    margin: 0 auto;
  }

  .service-page .service-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-page .service-message-inner {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 48px;
  }

  .service-page .service-cta {
    margin-right: 24px;
    margin-left: 24px;
  }
}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width: 768px) {
  .service-page .service-hero {
    padding: 54px 20px 68px;
    text-align: left;
  }

  .service-page .service-hero h1 {
    font-size: 30px;
  }

  .service-page .service-hero-copy {
    font-size: 23px;
    line-height: 1.7;
  }

  .service-page .service-hero-text {
    font-size: 14px;
  }

  .service-page .service-section-heading {
    margin-bottom: 38px;
    text-align: left;
  }

  .service-page .service-section-heading h2 {
    font-size: 26px;
  }

  .service-page .service-section-lead {
    font-size: 14px;
  }

  .service-page .service-concept {
    padding: 62px 20px;
  }

  .service-page .service-concept-copy h3 {
    font-size: 24px;
  }

  .service-page .service-concept-copy p {
    font-size: 14px;
  }

  .service-page .service-process {
    padding: 22px;
    border-radius: 20px;
  }

  .service-page .service-list-section {
    padding: 68px 18px;
  }

  .service-page .service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-page .service-card {
    border-radius: 20px;
  }

  .service-page .service-card-image {
    height: 220px;
  }

  .service-page .service-card-body {
    padding: 26px 22px 30px;
  }

  .service-page .service-card h3 {
    font-size: 21px;
  }

  .service-page .service-card-copy {
    font-size: 15px !important;
  }

  .service-page .service-flow-section {
    padding: 66px 20px;
  }

  .service-page .service-flow-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-page .service-message {
    padding: 72px 20px;
  }

  .service-page .service-message-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .service-page .service-message-image {
    max-width: 400px;
    margin: 0 auto;
  }

  .service-page .service-message-image::before {
    top: 13px;
    left: -13px;
    border-radius: 21px;
  }

  .service-page .service-message-image img {
    border-radius: 21px;
  }

  .service-page .service-message-content h2 {
    font-size: 23px;
  }

  .service-page .service-message-content > p:not(.service-section-en):not(.service-message-sign) {
    font-size: 14px;
  }

  .service-page .service-message-sign {
    text-align: left;
  }

  .service-page .service-cta {
    margin: 0 18px 72px;
    padding: 48px 22px;
    border-radius: 22px;
    text-align: left;
  }

  .service-page .service-cta h2 {
    font-size: 23px;
  }

  .service-page .service-cta > p:not(.service-cta-en) {
    font-size: 14px;
  }

  .service-page .service-cta-button {
    width: 100%;
    min-width: 0;
  }
}




/* =========================================
   tanapenについて
========================================= */

.about-page {
  color: #2f383c;
  line-height: 1.9;
}

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

.about-page img {
  max-width: 100%;
  height: auto;
}


/* =========================================
   HERO
========================================= */

.about-page .about-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 82px 40px 98px;
  text-align: center;
}

.about-page .about-hero-en {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.about-page .about-hero h1 {
  margin: 0 0 32px;
  color: #20282c;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.about-page .about-hero-copy {
  margin: 0 0 30px;
  color: #263238;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.03em;
}

.about-page .about-hero-text {
  max-width: 780px;
  margin: 0 auto;
  color: #596368;
  font-size: 15px;
  line-height: 2.1;
}


/* =========================================
   共通見出し
========================================= */

.about-page .about-section-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.about-page .about-section-en {
  margin: 0 0 12px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.about-page .about-section-heading h2 {
  margin: 0 0 22px;
  color: #20282c;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.about-page .about-section-lead {
  margin: 0;
  color: #596368;
  font-size: 15px;
  line-height: 2;
}


/* =========================================
   PHILOSOPHY
========================================= */

.about-page .about-philosophy {
  padding: 90px 40px;
  background: #f6f8f9;
}

.about-page .about-philosophy-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 72px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-page .about-philosophy-copy h3 {
  margin: 0 0 28px;
  color: #20282c;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
}

.about-page .about-philosophy-copy p {
  margin: 0 0 18px;
  color: #505b60;
  font-size: 15px;
  line-height: 2;
}

.about-page .about-philosophy-copy p:last-child {
  margin-bottom: 0;
}

.about-page .about-philosophy-message {
  padding: 42px 38px;
  background:
    linear-gradient(
      135deg,
      #a8bac2 0%,
      #8fa4ad 100%
    );
  border-radius: 26px;
  box-shadow: 0 22px 52px rgba(57, 78, 87, 0.13);
}

.about-page .about-philosophy-label {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.about-page .about-philosophy-main {
  margin: 0 0 24px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.about-page .about-philosophy-message p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: 14px;
  line-height: 2;
}


/* =========================================
   VALUES
========================================= */

.about-page .about-values {
  padding: 98px 40px;
}

.about-page .about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
}

.about-page .about-value-card {
  padding: 32px 25px 34px;
  background: #f7f9fa;
  border: 1px solid #e3e9ec;
  border-radius: 22px;
}

.about-page .about-value-number {
  margin: 0 0 16px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.about-page .about-value-card h3 {
  margin: 0 0 14px;
  color: #20282c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
}

.about-page .about-value-card > p:last-child {
  margin: 0;
  color: #5d686d;
  font-size: 14px;
  line-height: 1.9;
}


/* =========================================
   REPRESENTATIVE
========================================= */

.about-page .about-representative {
  padding: 96px 40px;
  background: #f6f8f9;
}

.about-page .about-representative-inner {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.about-page .about-representative-image {
  position: relative;
}

.about-page .about-representative-image::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100%;
  height: 100%;
  background: #dce7ea;
  border-radius: 26px;
}

.about-page .about-representative-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.1);
}

.about-page .about-representative-label {
  margin: 0 0 16px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.about-page .about-representative-content h3 {
  margin: 0 0 28px;
  color: #20282c;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.65;
}

.about-page .about-representative-content > p:not(.about-representative-label) {
  margin: 0 0 17px;
  color: #566166;
  font-size: 15px;
  line-height: 2;
}

.about-page .about-representative-sign {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #dce4e7;
  text-align: right;
}

.about-page .about-representative-sign span,
.about-page .about-representative-sign strong {
  display: block;
}

.about-page .about-representative-sign span {
  margin-bottom: 4px;
  color: #687378;
  font-size: 13px;
}

.about-page .about-representative-sign strong {
  color: #20282c;
  font-size: 17px;
  font-weight: 700;
}


/* =========================================
   TEAMWORK
========================================= */

.about-page .about-teamwork {
  padding: 98px 40px;
}

.about-page .about-teamwork-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  gap: 68px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-page .about-teamwork-copy h3 {
  margin: 0 0 26px;
  color: #20282c;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.65;
}

.about-page .about-teamwork-copy p {
  margin: 0 0 18px;
  color: #566166;
  font-size: 15px;
  line-height: 2;
}

.about-page .about-teamwork-copy p:last-child {
  margin-bottom: 0;
}

.about-page .about-teamwork-flow {
  padding: 30px;
  background: #f7f9fa;
  border: 1px solid #e2e8eb;
  border-radius: 24px;
}

.about-page .about-teamwork-item {
  padding: 21px 22px;
  background: #fff;
  border: 1px solid #e3e9ec;
  border-radius: 16px;
}

.about-page .about-teamwork-item span {
  display: block;
  margin-bottom: 7px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.about-page .about-teamwork-item h3 {
  margin: 0 0 7px;
  color: #20282c;
  font-size: 18px;
  font-weight: 700;
}

.about-page .about-teamwork-item p {
  margin: 0;
  color: #637075;
  font-size: 13px;
  line-height: 1.8;
}

.about-page .about-teamwork-arrow {
  padding: 8px 0;
  color: #9eb1b9;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}


/* =========================================
   BUILDINGS
========================================= */

.about-page .about-buildings {
  padding: 96px 40px;
  background: #f6f8f9;
}

.about-page .about-buildings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.about-page .about-building-item {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid #e2e8eb;
  border-radius: 20px;
}

.about-page .about-building-item span {
  display: block;
  margin-bottom: 13px;
  color: #8fa4ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.about-page .about-building-item h3 {
  margin: 0 0 9px;
  color: #20282c;
  font-size: 18px;
  font-weight: 700;
}

.about-page .about-building-item p {
  margin: 0;
  color: #647075;
  font-size: 13px;
  line-height: 1.8;
}


/* =========================================
   CASE LINK
========================================= */

.about-page .about-case-link {
  padding: 94px 40px;
}

.about-page .about-case-link-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 48px;
  background: #f7f9fa;
  border: 1px solid #e2e8eb;
  border-radius: 26px;
  text-align: center;
}

.about-page .about-case-link h2 {
  margin: 0 0 22px;
  color: #20282c;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.65;
}

.about-page .about-case-link-inner > p:not(.about-section-en) {
  max-width: 680px;
  margin: 0 auto 28px;
  color: #596368;
  font-size: 15px;
  line-height: 2;
}

.about-page .about-case-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 52px;
  padding: 12px 30px;
  color: #fff !important;
  background: #7f98a5;
  border: 1px solid #7f98a5;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.about-page .about-case-button:hover {
  background: #617985;
  border-color: #617985;
  transform: translateY(-2px);
}


/* =========================================
   CTA
========================================= */

.about-page .about-cta {
  max-width: 1080px;
  margin: 0 auto 100px;
  padding: 66px 48px;
  background:
    linear-gradient(
      135deg,
      #a6b8c0 0%,
      #879fa9 100%
    );
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14);
}

.about-page .about-cta-en {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.about-page .about-cta h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.55;
}

.about-page .about-cta > p:not(.about-cta-en) {
  max-width: 720px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 2;
}

.about-page .about-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  min-height: 54px;
  padding: 13px 32px;
  color: #485d66 !important;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(48, 64, 72, 0.13);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.about-page .about-cta-button:hover {
  color: #fff !important;
  background: #526b76;
  border-color: #526b76;
  transform: translateY(-2px);
}


/* =========================================
   タブレット
========================================= */

@media screen and (max-width: 991px) {
  .about-page .about-philosophy-inner,
  .about-page .about-teamwork-inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .about-page .about-philosophy-message,
  .about-page .about-teamwork-flow {
    max-width: 680px;
    margin: 0 auto;
  }

  .about-page .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .about-representative-inner {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 48px;
  }

  .about-page .about-cta {
    margin-right: 24px;
    margin-left: 24px;
  }
}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width: 768px) {
  .about-page .about-hero {
    padding: 54px 20px 68px;
    text-align: left;
  }

  .about-page .about-hero h1 {
    font-size: 30px;
  }

  .about-page .about-hero-copy {
    font-size: 23px;
    line-height: 1.7;
  }

  .about-page .about-hero-text {
    font-size: 14px;
  }

  .about-page .about-section-heading {
    margin-bottom: 38px;
    text-align: left;
  }

  .about-page .about-section-heading h2 {
    font-size: 26px;
  }

  .about-page .about-section-lead {
    font-size: 14px;
  }

  .about-page .about-philosophy {
    padding: 64px 20px;
  }

  .about-page .about-philosophy-copy h3 {
    font-size: 24px;
  }

  .about-page .about-philosophy-copy p {
    font-size: 14px;
  }

  .about-page .about-philosophy-message {
    padding: 32px 25px;
    border-radius: 21px;
  }

  .about-page .about-philosophy-main {
    font-size: 22px;
  }

  .about-page .about-values {
    padding: 68px 20px;
  }

  .about-page .about-values-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .about-page .about-value-card {
    padding: 25px 22px;
    border-radius: 18px;
  }

  .about-page .about-representative {
    padding: 68px 20px;
  }

  .about-page .about-representative-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .about-page .about-representative-image {
    max-width: 400px;
    margin: 0 auto;
  }

  .about-page .about-representative-image::before {
    top: 13px;
    left: -13px;
    border-radius: 21px;
  }

  .about-page .about-representative-image img {
    border-radius: 21px;
  }

  .about-page .about-representative-content h3 {
    font-size: 23px;
  }

  .about-page .about-representative-content > p:not(.about-representative-label) {
    font-size: 14px;
  }

  .about-page .about-representative-sign {
    text-align: left;
  }

  .about-page .about-teamwork {
    padding: 70px 20px;
  }

  .about-page .about-teamwork-copy h3 {
    font-size: 23px;
  }

  .about-page .about-teamwork-copy p {
    font-size: 14px;
  }

  .about-page .about-teamwork-flow {
    padding: 22px;
    border-radius: 20px;
  }

  .about-page .about-buildings {
    padding: 68px 20px;
  }

  .about-page .about-buildings-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-page .about-building-item {
    padding: 23px 21px;
    border-radius: 17px;
  }

  .about-page .about-case-link {
    padding: 68px 18px;
  }

  .about-page .about-case-link-inner {
    padding: 44px 22px;
    border-radius: 21px;
    text-align: left;
  }

  .about-page .about-case-link h2 {
    font-size: 23px;
  }

  .about-page .about-case-link-inner > p:not(.about-section-en) {
    font-size: 14px;
  }

  .about-page .about-case-button {
    width: 100%;
  }

  .about-page .about-cta {
    margin: 0 18px 72px;
    padding: 48px 22px;
    border-radius: 22px;
    text-align: left;
  }

  .about-page .about-cta h2 {
    font-size: 23px;
  }

  .about-page .about-cta > p:not(.about-cta-en) {
    font-size: 14px;
  }

  .about-page .about-cta-button {
    width: 100%;
    min-width: 0;
  }
}



/* =========================================
   会社概要ページ
========================================= */

.company-page {
  color: #2f383c;
  line-height: 1.9;
}

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

.company-page img {
  max-width: 100%;
  height: auto;
}


/* =========================================
   HERO
========================================= */

.company-page .company-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 82px 40px 98px;
  text-align: center;
}

.company-page .company-hero-en {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.company-page .company-hero h1 {
  margin: 0 0 32px;
  color: #20282c;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.company-page .company-hero-copy {
  margin: 0 0 30px;
  color: #263238;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.03em;
}

.company-page .company-hero-text {
  max-width: 780px;
  margin: 0 auto;
  color: #596368;
  font-size: 15px;
  line-height: 2.1;
}


/* =========================================
   共通見出し
========================================= */

.company-page .company-section-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.company-page .company-section-en {
  margin: 0 0 12px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.company-page .company-section-heading h2 {
  margin: 0 0 22px;
  color: #20282c;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.company-page .company-section-lead {
  margin: 0;
  color: #596368;
  font-size: 15px;
  line-height: 2;
}


/* =========================================
   COMPANY INFORMATION
========================================= */

.company-page .company-information {
  padding: 90px 40px;
  background: #f6f8f9;
}

.company-page .company-information-inner {
  max-width: 960px;
  margin: 0 auto;
}

.company-page .company-table {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e8eb;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.055);
}

.company-page .company-table th,
.company-page .company-table td {
  padding: 23px 28px;
  border: none;
  border-bottom: 1px solid #e6ecef;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
}

.company-page .company-table tr:last-child th,
.company-page .company-table tr:last-child td {
  border-bottom: none;
}

.company-page .company-table th {
  width: 210px;
  color: #344247;
  background: #f8fafb;
  font-weight: 700;
}

.company-page .company-table td {
  color: #596368;
  background: #fff;
}

.company-page .company-table a {
  color: #657f8a;
  font-weight: 700;
  text-decoration: none;
}

.company-page .company-table a:hover {
  text-decoration: underline;
}

.company-page .company-business-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-page .company-business-list li {
  margin: 0;
  padding: 7px 12px;
  color: #596368;
  background: #f1f5f6;
  border: 1px solid #e0e8eb;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
}


/* =========================================
   CONTACT INFORMATION
========================================= */

.company-page .company-contact {
  padding: 98px 40px;
}

.company-page .company-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.company-page .company-contact-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 32px 28px;
  color: #2f383c !important;
  background: #fff;
  border: 1px solid #e2e8eb;
  border-radius: 22px;
  text-decoration: none !important;
  box-shadow: 0 18px 42px rgba(38, 50, 56, 0.045);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.company-page .company-contact-card:hover {
  transform: translateY(-4px);
  border-color: #cedbe0;
  box-shadow: 0 24px 54px rgba(38, 50, 56, 0.085);
}

.company-page .company-contact-en {
  margin: 0 0 13px;
  color: #8fa4ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.company-page .company-contact-card h3 {
  margin: 0 0 14px;
  color: #20282c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.company-page .company-contact-value {
  margin: 0 0 16px;
  color: #43565e;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

.company-page .company-contact-mail {
  font-size: 17px;
  word-break: break-all;
}

.company-page .company-contact-note {
  flex: 1;
  margin: 0;
  color: #697479;
  font-size: 13px;
  line-height: 1.85;
}

.company-page .company-contact-link {
  display: block;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid #e5ebee;
  color: #76909b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.company-page .company-contact-link::after {
  content: " →";
}


/* =========================================
   ACCESS
========================================= */

.company-page .company-access {
  padding: 94px 40px;
  background: #f6f8f9;
}

.company-page .company-access-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 60px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.company-page .company-access-label {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.company-page .company-access-content h3 {
  margin: 0 0 20px;
  color: #20282c;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.company-page .company-access-address {
  margin: 0 0 22px;
  color: #34474f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}

.company-page .company-access-content > p:not(.company-access-label):not(.company-access-address) {
  margin: 0 0 28px;
  color: #596368;
  font-size: 14px;
  line-height: 2;
}

.company-page .company-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 24px;
  color: #fff !important;
  background: #7f98a5;
  border: 1px solid #7f98a5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.company-page .company-map-link:hover {
  background: #627b86;
  transform: translateY(-2px);
}

.company-page .company-access-map {
  overflow: hidden;
  border: 1px solid #dfe7ea;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.08);
}

.company-page .company-access-map iframe {
  display: block;
  width: 100%;
  height: 430px;
  border: none;
}


/* =========================================
   RELATED LINKS
========================================= */

.company-page .company-links {
  padding: 96px 40px;
}

.company-page .company-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.company-page .company-link-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 31px 28px;
  color: #2f383c !important;
  background: #f7f9fa;
  border: 1px solid #e2e8eb;
  border-radius: 21px;
  text-decoration: none !important;
  transition:
    background-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.company-page .company-link-card:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(38, 50, 56, 0.07);
}

.company-page .company-link-en {
  margin: 0 0 13px;
  color: #8fa4ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.company-page .company-link-card h3 {
  margin: 0 0 13px;
  color: #20282c;
  font-size: 19px;
  font-weight: 700;
}

.company-page .company-link-card > p:not(.company-link-en) {
  flex: 1;
  margin: 0;
  color: #626d72;
  font-size: 13px;
  line-height: 1.9;
}

.company-page .company-link-card span {
  display: block;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid #dfe6e9;
  color: #78929d;
  font-size: 12px;
  font-weight: 700;
}


/* =========================================
   CTA
========================================= */

.company-page .company-cta {
  max-width: 1080px;
  margin: 0 auto 100px;
  padding: 66px 48px;
  background:
    linear-gradient(
      135deg,
      #a6b8c0 0%,
      #879fa9 100%
    );
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14);
}

.company-page .company-cta-en {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.company-page .company-cta h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.55;
}

.company-page .company-cta > p:not(.company-cta-en) {
  max-width: 720px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 2;
}

.company-page .company-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  min-height: 54px;
  padding: 13px 32px;
  color: #485d66 !important;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(48, 64, 72, 0.13);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.company-page .company-cta-button:hover {
  color: #fff !important;
  background: #526b76;
  border-color: #526b76;
  transform: translateY(-2px);
}


/* =========================================
   タブレット
========================================= */

@media screen and (max-width: 991px) {
  .company-page .company-contact-grid,
  .company-page .company-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-page .company-access-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .company-page .company-access-content {
    max-width: 720px;
  }

  .company-page .company-cta {
    margin-right: 24px;
    margin-left: 24px;
  }
}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width: 768px) {
  .company-page .company-hero {
    padding: 54px 20px 68px;
    text-align: left;
  }

  .company-page .company-hero h1 {
    font-size: 30px;
  }

  .company-page .company-hero-copy {
    font-size: 23px;
    line-height: 1.7;
  }

  .company-page .company-hero-text {
    font-size: 14px;
  }

  .company-page .company-section-heading {
    margin-bottom: 38px;
    text-align: left;
  }

  .company-page .company-section-heading h2 {
    font-size: 26px;
  }

  .company-page .company-section-lead {
    font-size: 14px;
  }

  .company-page .company-information {
    padding: 64px 18px;
  }

  .company-page .company-table,
  .company-page .company-table tbody,
  .company-page .company-table tr,
  .company-page .company-table th,
  .company-page .company-table td {
    display: block;
    width: 100%;
  }

  .company-page .company-table {
    border-radius: 19px;
  }

  .company-page .company-table tr {
    border-bottom: 1px solid #e6ecef;
  }

  .company-page .company-table tr:last-child {
    border-bottom: none;
  }

  .company-page .company-table th {
    padding: 18px 20px 6px;
    border-bottom: none;
  }

  .company-page .company-table td {
    padding: 0 20px 18px;
    border-bottom: none;
  }

  .company-page .company-business-list {
    gap: 7px;
  }

  .company-page .company-business-list li {
    padding: 6px 10px;
    font-size: 11px;
  }

  .company-page .company-contact {
    padding: 68px 18px;
  }

  .company-page .company-contact-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .company-page .company-contact-card {
    padding: 25px 22px;
    border-radius: 18px;
  }

  .company-page .company-contact-value {
    font-size: 21px;
  }

  .company-page .company-contact-mail {
    font-size: 16px;
  }

  .company-page .company-access {
    padding: 68px 18px;
  }

  .company-page .company-access-content h3 {
    font-size: 23px;
  }

  .company-page .company-access-address {
    font-size: 15px;
  }

  .company-page .company-map-link {
    width: 100%;
  }

  .company-page .company-access-map {
    border-radius: 19px;
  }

  .company-page .company-access-map iframe {
    height: 320px;
  }

  .company-page .company-links {
    padding: 68px 18px;
  }

  .company-page .company-links-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .company-page .company-link-card {
    padding: 24px 21px;
    border-radius: 18px;
  }

  .company-page .company-cta {
    margin: 0 18px 72px;
    padding: 48px 22px;
    border-radius: 22px;
    text-align: left;
  }

  .company-page .company-cta h2 {
    font-size: 23px;
  }

  .company-page .company-cta > p:not(.company-cta-en) {
    font-size: 14px;
  }

  .company-page .company-cta-button {
    width: 100%;
    min-width: 0;
  }
}



/* ==========================================================
   下層ページ 安定補正 v2
   背景フル幅 / HTML崩れ耐性 / CTA復旧
========================================================== */

/* テーマ側の幅・はみ出し制限を解除 */
.contents-main-left,
.col-md-9,
.contents-top,
.row,
main {
  overflow: visible !important;
}

.service-page,
.about-page,
.company-page {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  color: #2f383c;
}

.service-page *,
.about-page *,
.company-page *,
.service-page *::before,
.about-page *::before,
.company-page *::before,
.service-page *::after,
.about-page *::after,
.company-page *::after {
  box-sizing: border-box;
}

.service-page img,
.about-page img,
.company-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* グレー背景セクションを画面幅いっぱいにする */
.service-page .service-concept,
.service-page .service-flow-section,
.about-page .about-philosophy,
.about-page .about-representative,
.about-page .about-buildings,
.company-page .company-information,
.company-page .company-access {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: #f6f8f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* 白背景セクションは白で固定 */
.service-page .service-hero,
.service-page .service-list-section,
.service-page .service-message,
.about-page .about-hero,
.about-page .about-values,
.about-page .about-teamwork,
.about-page .about-case-link,
.company-page .company-hero,
.company-page .company-contact,
.company-page .company-links {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.service-page p:empty,
.about-page p:empty,
.company-page p:empty,
.service-page br,
.about-page br,
.company-page br {
  display: none !important;
}

/* =========================================
   会社案内：問い合わせ先
   HTMLが崩れても読みやすいリスト型にする
========================================= */

.company-page .company-contact {
  padding: 92px 40px !important;
}

.company-page .company-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* 正しいHTMLのカードがある場合 */
.company-page .company-contact-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 32px 28px !important;
  color: #2f383c !important;
  background: #fff !important;
  border: 1px solid #e2e8eb !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  box-shadow: 0 18px 42px rgba(38, 50, 56, 0.045) !important;
}

/* HTMLがpでバラけた場合は、個別カード化せず整列だけする */
.company-page .company-contact-grid > p:not(.company-contact-card),
.company-page .company-contact-grid > div:not(.company-contact-card),
.company-page .company-contact-grid > a:not(.company-contact-card) {
  display: block !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  color: #566166 !important;
  background: #fff !important;
  border: 1px solid #e7ecef !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(38, 50, 56, 0.035) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
}

.company-page .company-contact-en,
.company-page .company-contact-grid > p:first-child {
  color: #8fa4ad !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
}

.company-page .company-contact-card h3,
.company-page .company-contact-grid h3 {
  margin: 0 0 12px !important;
  color: #20282c !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.company-page .company-contact-value,
.company-page .company-contact-mail {
  display: block !important;
  margin: 0 0 12px !important;
  color: #43565e !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.company-page .company-contact-value {
  font-size: 22px !important;
}

.company-page .company-contact-mail {
  font-size: 16px !important;
  word-break: break-all !important;
}

.company-page .company-contact-note {
  margin: 0 !important;
  color: #697479 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
}

.company-page .company-contact-link {
  display: inline-block !important;
  margin-top: 18px !important;
  color: #76909b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.company-page .company-contact-link::after {
  content: " →";
}

/* =========================================
   会社案内：もっと知る
   HTMLが崩れても読みやすいカード型にする
========================================= */

.company-page .company-links {
  padding: 92px 40px !important;
}

.company-page .company-links-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}

.company-page .company-link-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 31px 28px !important;
  color: #2f383c !important;
  background: #f7f9fa !important;
  border: 1px solid #e2e8eb !important;
  border-radius: 21px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.company-page .company-links-grid > p:not(.company-link-card),
.company-page .company-links-grid > div:not(.company-link-card),
.company-page .company-links-grid > a:not(.company-link-card) {
  display: block !important;
  margin: 0 !important;
  padding: 24px 26px !important;
  color: #566166 !important;
  background: #f7f9fa !important;
  border: 1px solid #e2e8eb !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
}

.company-page .company-link-en {
  display: block !important;
  margin: 0 0 12px !important;
  color: #8fa4ad !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.17em !important;
}

.company-page .company-link-card h3,
.company-page .company-links-grid h3 {
  margin: 0 0 12px !important;
  color: #20282c !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.company-page .company-link-card > p:not(.company-link-en) {
  margin: 0 !important;
  color: #626d72 !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
}

.company-page .company-link-card span,
.company-page .company-links-grid span {
  display: inline-block !important;
  margin-top: 18px !important;
  color: #78929d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* =========================================
   3ページ共通 CTA
========================================= */

.service-page .service-cta,
.about-page .about-cta,
.company-page .company-cta {
  display: block !important;
  width: auto !important;
  max-width: 1080px !important;
  margin: 0 auto 100px !important;
  padding: 66px 48px !important;
  background: linear-gradient(135deg, #a6b8c0 0%, #879fa9 100%) !important;
  border-radius: 28px !important;
  text-align: center !important;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14) !important;
  color: #fff !important;
}

.service-page .service-cta-en,
.about-page .about-cta-en,
.company-page .company-cta-en {
  display: block !important;
  margin: 0 0 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
}

.service-page .service-cta h2,
.about-page .about-cta h2,
.company-page .company-cta h2 {
  display: block !important;
  margin: 0 0 20px !important;
  color: #fff !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.service-page .service-cta > p:not(.service-cta-en),
.about-page .about-cta > p:not(.about-cta-en),
.company-page .company-cta > p:not(.company-cta-en) {
  display: block !important;
  max-width: 720px !important;
  margin: 0 auto 30px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

.service-page .service-cta-button,
.about-page .about-cta-button,
.company-page .company-cta-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 270px !important;
  min-height: 54px !important;
  padding: 13px 32px !important;
  color: #485d66 !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(48, 64, 72, 0.13) !important;
}

/* 会社概要テーブル内のp余白崩れ防止 */
.company-page .company-table th p,
.company-page .company-table td p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media screen and (max-width: 991px) {
  .company-page .company-contact-grid,
  .company-page .company-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-page .service-cta,
  .about-page .about-cta,
  .company-page .company-cta {
    margin-right: 24px !important;
    margin-left: 24px !important;
  }
}

@media screen and (max-width: 768px) {
  .company-page .company-contact-grid,
  .company-page .company-links-grid {
    grid-template-columns: 1fr !important;
  }

  .company-page .company-contact,
  .company-page .company-links {
    padding: 64px 20px !important;
  }

  .service-page .service-cta,
  .about-page .about-cta,
  .company-page .company-cta {
    margin: 0 20px 72px !important;
    padding: 48px 24px !important;
    border-radius: 24px !important;
  }

  .service-page .service-cta h2,
  .about-page .about-cta h2,
  .company-page .company-cta h2 {
    font-size: 23px !important;
  }

  .service-page .service-cta > p:not(.service-cta-en),
  .about-page .about-cta > p:not(.about-cta-en),
  .company-page .company-cta > p:not(.company-cta-en) {
    font-size: 14px !important;
  }

  .service-page .service-cta-button,
  .about-page .about-cta-button,
  .company-page .company-cta-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==========================================================
   会社案内ページ 完成版CSS
   company-page-complete-fixed.html 用
========================================================== */

.contents-main-left,
.col-md-9,
.contents-top,
.row,
main,
article {
  overflow: visible !important;
}

.company-page {
  width: 100%;
  overflow: visible !important;
  color: #2f383c;
  line-height: 1.9;
}

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

.company-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.company-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 82px 40px 96px;
  text-align: center;
  background: #fff;
}

.company-hero-en,
.company-section-en,
.company-contact-en,
.company-link-en,
.company-cta-en {
  margin: 0 0 12px;
  color: #8fa4ad;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.company-hero h1 {
  margin: 0 0 30px;
  color: #20282c;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.company-hero-copy {
  margin: 0 0 28px;
  color: #263238;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7;
}

.company-hero-text {
  max-width: 760px;
  margin: 0 auto;
  color: #596368;
  font-size: 15px;
  line-height: 2.1;
}

.company-full {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: 0;
  background: #f6f8f9;
}

.company-full-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 90px 40px;
}

.company-section-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.company-section-heading h2 {
  margin: 0 0 20px;
  color: #20282c;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}

.company-section-lead {
  margin: 0;
  color: #596368;
  font-size: 15px;
  line-height: 2;
}

.company-table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e8eb;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.055);
}

.company-table th,
.company-table td {
  padding: 23px 28px;
  border: none;
  border-bottom: 1px solid #e6ecef;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
}

.company-table tr:last-child th,
.company-table tr:last-child td {
  border-bottom: none;
}

.company-table th {
  width: 210px;
  color: #344247;
  background: #f8fafb;
  font-weight: 700;
}

.company-table td {
  color: #596368;
  background: #fff;
}

.company-table a {
  color: #657f8a;
  font-weight: 700;
  text-decoration: none;
}

.company-business-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-business-list li {
  margin: 0;
  padding: 7px 12px;
  color: #596368;
  background: #f1f5f6;
  border: 1px solid #e0e8eb;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
}

.company-contact,
.company-links {
  max-width: 1120px;
  margin: 0 auto;
  padding: 98px 40px;
  background: #fff;
}

.company-contact-grid,
.company-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.company-contact-card,
.company-link-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  text-decoration: none !important;
}

.company-contact-card {
  padding: 32px 28px;
  color: #2f383c !important;
  background: #fff;
  border: 1px solid #e2e8eb;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(38, 50, 56, 0.045);
}

.company-contact-card h3,
.company-link-card h3 {
  margin: 0 0 14px;
  color: #20282c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.company-contact-value,
.company-contact-mail {
  display: block;
  margin: 0 0 16px;
  color: #43565e;
  font-weight: 700;
  line-height: 1.5;
}

.company-contact-value {
  font-size: 23px;
}

.company-contact-mail {
  font-size: 17px;
  word-break: break-all;
}

.company-contact-note,
.company-link-card p:not(.company-link-en) {
  flex: 1;
  margin: 0;
  color: #697479;
  font-size: 13px;
  line-height: 1.85;
}

.company-contact-link,
.company-link-card span {
  display: block;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid #e5ebee;
  color: #76909b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.company-access-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 60px;
  align-items: center;
}

.company-access-label {
  margin: 0 0 14px;
  color: #8fa4ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.company-access-content h3 {
  margin: 0 0 20px;
  color: #20282c;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.company-access-address {
  margin: 0 0 22px;
  color: #34474f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}

.company-access-content > p:not(.company-access-label):not(.company-access-address) {
  margin: 0 0 28px;
  color: #596368;
  font-size: 14px;
  line-height: 2;
}

.company-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 24px;
  color: #fff !important;
  background: #7f98a5;
  border: 1px solid #7f98a5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

.company-access-map {
  overflow: hidden;
  border: 1px solid #dfe7ea;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(38, 50, 56, 0.08);
}

.company-access-map iframe {
  display: block;
  width: 100%;
  height: 430px;
  border: none;
}

.company-link-card {
  padding: 31px 28px;
  color: #2f383c !important;
  background: #f7f9fa;
  border: 1px solid #e2e8eb;
  border-radius: 21px;
}

.company-link-card h3 {
  font-size: 19px;
}

.company-cta {
  max-width: 1080px;
  margin: 0 auto 100px;
  padding: 66px 48px;
  background: linear-gradient(135deg, #a6b8c0 0%, #879fa9 100%);
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14);
}

.company-cta-en {
  color: rgba(255, 255, 255, 0.82);
}

.company-cta h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.55;
}

.company-cta > p:not(.company-cta-en) {
  max-width: 720px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  line-height: 2;
}

.company-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  min-height: 54px;
  padding: 13px 32px;
  color: #485d66 !important;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(48, 64, 72, 0.13);
}

@media screen and (max-width: 991px) {
  .company-contact-grid,
  .company-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-access-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}

@media screen and (max-width: 768px) {
  .company-hero {
    padding: 54px 20px 68px;
    text-align: left;
  }

  .company-full-inner,
  .company-contact,
  .company-links {
    padding: 64px 20px;
  }

  .company-section-heading {
    text-align: left;
    margin-bottom: 38px;
  }

  .company-contact-grid,
  .company-links-grid {
    grid-template-columns: 1fr;
  }

  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }

  .company-table th {
    padding: 18px 20px 6px;
    border-bottom: none;
  }

  .company-table td {
    padding: 0 20px 18px;
  }

  .company-access-map iframe {
    height: 320px;
  }

  .company-cta {
    margin: 0 20px 72px;
    padding: 48px 24px;
    border-radius: 24px;
  }

  .company-cta h2 {
    font-size: 23px;
  }

  .company-cta-button {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================
   WordPressエディタ対策：カード内リンク版HTML用の最終補正
========================================================== */

.company-contact-card > p,
.company-link-card > p,
.company-cta > p {
  margin-top: 0;
}

.company-contact-card > p:last-child,
.company-link-card > p:last-child,
.company-cta > p:last-child {
  margin-bottom: 0 !important;
}

.company-contact-link,
.company-link-card a {
  display: inline-block !important;
  color: #76909b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}

.company-contact-card > p:has(.company-contact-link),
.company-link-card > p:has(a) {
  margin-top: 25px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e5ebee !important;
}

.company-link-card {
  justify-content: flex-start !important;
}

.company-link-card > p:not(.company-link-en):not(:has(a)) {
  flex: 1 !important;
}

.company-cta > p:has(.company-cta-button) {
  margin: 0 !important;
}
/* 会社案内：グレー背景を画面幅いっぱいにする最終補正 */
.company-page .company-full {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  background: #f6f8f9 !important;
  overflow: visible !important;
}

.company-page .company-full-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.contents-main-left,
.col-md-9,
.contents-top,
.row,
main,
article {
  overflow: visible !important;
}

/* 会社案内：グレー背景を疑似要素で画面いっぱいに敷く */
.company-page .company-full {
  position: relative !important;
  background: transparent !important;
  z-index: 0 !important;
  overflow: visible !important;
}

.company-page .company-full::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background: #f6f8f9 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.company-page .company-full-inner {
  position: relative !important;
  z-index: 1 !important;
}
/* ==========================================================
   下層ページ 背景フル幅 最終統一版
   2026-07-13
   既存の複数指定をここで上書きする
========================================================== */

/* テーマ側の親要素で背景が切れないようにする */
html,
body,
.wrapper,
.wrap,
.container,
.row,
main,
article,
.contents,
.contents-top,
.contents-main,
.contents-main-left,
.col-md-9,
.col-md-9.contents-main-left,
.wrapper-top-contents,
.wrapper-top-contents .container {
  overflow: visible !important;
}

/* 下層ページ全体 */
.service-page,
.about-page,
.company-page {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  background: #fff !important;
}

/* グレー背景にしたい下層セクションをすべて同じ方法でフル幅化 */
.service-page .service-concept,
.service-page .service-flow-section,
.about-page .about-philosophy,
.about-page .about-representative,
.about-page .about-buildings,
.company-page .company-full,
.company-page .company-information,
.company-page .company-access {
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  background: #f6f8f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* 以前入れた疑似要素方式を完全に停止 */
.service-page .service-concept::before,
.service-page .service-flow-section::before,
.about-page .about-philosophy::before,
.about-page .about-representative::before,
.about-page .about-buildings::before,
.company-page .company-full::before,
.company-page .company-information::before,
.company-page .company-access::before {
  content: none !important;
  display: none !important;
}

/* フル幅セクションの中身は中央幅に戻す */
.service-page .service-concept-inner,
.service-page .service-flow-section > .service-section-heading,
.service-page .service-flow-grid,
.about-page .about-philosophy-inner,
.about-page .about-representative-inner,
.about-page .about-buildings > .about-section-heading,
.about-page .about-buildings-grid,
.company-page .company-full-inner,
.company-page .company-information-inner,
.company-page .company-information > .company-section-heading,
.company-page .company-access-inner,
.company-page .company-access > .company-section-heading {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 会社情報テーブルだけは読みやすい幅に */
.company-page .company-table {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 白背景セクションは本文幅で中央配置 */
.service-page .service-hero,
.service-page .service-list-section,

/* ==========================================================
   FINAL：tanapen CSS 整理版 v2
   2026-07-18
   /contact/ をLINE相談ページとして使う運用
========================================================== */

:root {
  --tanapen-gray: #f7f9fa;
  --tanapen-blue: #8fa4ad;
  --tanapen-blue-dark: #78909c;
  --tanapen-dark: #202426;
  --tanapen-text: #596368;
  --tanapen-border: #e3eaed;
  --tanapen-line: #06c755;
  --tanapen-line-hover: #05ad49;
}

/* ==========================================================
   TOP：背景フル幅・セクション余白
========================================================== */

html,
body,
.wrapper,
.wrapper-top-contents,
.wrapper-top-contents .container,
.contents-top,
.contents-main-left,
.col-md-9,
.col-md-9.contents-main-left,
.row,
main {
  overflow: visible !important;
}

.home .contents-top,
.home .wrapper-top-contents,
.home .wrapper-top-contents .container,
.home .contents-main-left,
.home .col-md-9,
.home .col-md-9.contents-main-left,
.home .row,
.home main {
  overflow: visible !important;
}

.home .home-problem,
.home .home-works,
.home .why-tanapen,
.home .home-case,
.home .home-message,
.home .home-area,
.home .topnews,
.home .top-info-company {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.home .home-problem,
.home .why-tanapen,
.home .home-message,
.home .topnews {
  background: var(--tanapen-gray) !important;
}

.home .home-works,
.home .home-case,
.home .home-area,
.home .top-info-company {
  background: #fff !important;
}

.home .home-problem,
.home .home-works,
.home .why-tanapen,
.home .home-case,
.home .home-message,
.home .home-area,
.home .topnews,
.home .top-info-company {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.home .home-problem > *,
.home .home-works > *,
.home .why-tanapen > *,
.home .home-case > *,
.home .home-message > *,
.home .home-area > *,
.home .topnews > *,
.home .top-info-company > * {
  max-width: 1120px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.home .home-problem {
  position: relative !important;
  z-index: 0 !important;
  overflow: visible !important;
}

.home .home-problem::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--tanapen-gray);
  z-index: -1;
}

/* ==========================================================
   WHY TANAPEN：h2を共通見出し下テキストと同じ見た目にする
========================================================== */

.why-tanapen .why-tanapen__heading h2,
.why-tanapen__heading h2 {
  margin: 0 !important;
  color: var(--accent) !important;
  font-family: "Yu Gothic", "游ゴシック", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
}

@media screen and (max-width: 768px) {
  .why-tanapen .why-tanapen__heading h2,
  .why-tanapen__heading h2 {
    font-size: 14px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
  }
}

/* ==========================================================
   TOP：LATEST CASE STUDY
   1件目だけ大きくなる古い指定を停止し、均等カードにする
========================================================== */

.home .topnews {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 92px !important;
  padding-bottom: 112px !important;
  background: var(--tanapen-gray) !important;
}

.home .topnews > .top-title {
  order: 1 !important;
  margin: 0 auto 48px !important;
  text-align: center !important;
}

.home .topnews .top-infos,
.home .topnews .top-infos-news,
.home .topnews .topnews-outer {
  order: 2 !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.home .topnews .topnews-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
}

.home .topnews .topnews-list li,
.home .topnews .topnews-list li:first-child {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(38, 50, 56, 0.055) !important;
  overflow: hidden !important;
}

.home .topnews .topnews-list li a,
.home .topnews .topnews-list li > a,
.home .topnews .topnews-list li:first-child a,
.home .topnews .topnews-list li:first-child > a {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 260px !important;
  padding: 34px 36px !important;
  color: var(--tanapen-dark) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.home .topnews .topnews-bg {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin: 0 0 26px !important;
  padding: 7px 14px !important;
  color: var(--tanapen-blue-dark) !important;
  background: #eef5f7 !important;
  border: 1px solid #dce8ec !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
}

.home .topnews .topnews-date {
  display: block !important;
  margin: 0 0 22px !important;
  color: #98a4aa !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.home .topnews .topnews-title,
.home .topnews .topnews-list li:first-child .topnews-title {
  display: block !important;
  margin: 0 !important;
  color: var(--tanapen-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
}

.home .topnews .topnews-title::after {
  content: "VIEW CASE  →" !important;
  display: block !important;
  margin-top: 30px !important;
  padding-top: 22px !important;
  border-top: 1px solid #e7ecef !important;
  color: var(--tanapen-blue-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.13em !important;
}

/* 古いTOP内LINE CTAは使わない */
.home .top-line-cta,
.home .topnews .top-line-cta {
  display: none !important;
}

/* ==========================================================
   TOP：COMPANY + 自動CTA
   CTAは会社情報の後ろへ。文章入りカードとして表示。
========================================================== */

.home .top-info-company {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 96px !important;
  padding-bottom: 104px !important;
  background: #fff !important;
}

.home .top-info-company > h2.top-title,
.home .top-info-company > .top-title {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 42px !important;
  padding: 0 !important;
  color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.home .top-info-company > h2.top-title::before,
.home .top-info-company > .top-title::before {
  content: "COMPANY" !important;
  display: block !important;
  width: 100% !important;
  color: var(--tanapen-blue) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
}

.home .top-info-company > h2.top-title::after,
.home .top-info-company > .top-title::after {
  content: "会社案内" !important;
  display: block !important;
  width: 100% !important;
  margin-top: 12px !important;
  color: #4f585c !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

.home .top-info-company > table.table-company--top,
.home .top-info-company > table.table-company-top,
.home .top-info-company > .table-company--top,
.home .top-info-company > .table-company-top {
  order: 2 !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 38px rgba(38, 50, 56, 0.045) !important;
  overflow: hidden !important;
}

/* 自動出力のp.txt-centerをLINE CTAカード化 */
.home .top-info-company > p.txt-center {
  order: 3 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(920px, calc(100vw - 40px)) !important;
  max-width: 920px !important;
  min-height: 360px !important;
  margin: 72px auto 0 !important;
  padding: 70px 44px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #a6b8c0 0%, #879fa9 100%) !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 58px rgba(67, 87, 96, 0.14) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.home .top-info-company > p.txt-center::before {
  content: "LINE\A\A LINEで気軽にご相談ください。" !important;
  display: block !important;
  margin: 0 auto 28px !important;
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.06em !important;
  white-space: pre-line !important;
}

.home .top-info-company > p.txt-center::after {
  content: "塗装が必要か分からない、他社の見積りが適正か知りたい、部分的な傷みを見てほしい。そんな段階でも気軽にご相談いただけます。" !important;
  order: 2 !important;
  display: block !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0.03em !important;
}

.home .top-info-company > p.txt-center .btn-top_contact {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 280px !important;
  min-height: 62px !important;
  margin: 36px auto 0 !important;
  padding: 16px 42px !important;
  color: #43545c !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(45, 62, 70, 0.12) !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.home .top-info-company > p.txt-center .btn-top_contact::before {
  content: none !important;
  display: none !important;
}

.home .top-info-company > p.txt-center .btn-top_contact::after {
  content: "LINEで問い合わせる" !important;
  display: inline !important;
  color: #43545c !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.home .top-info-company > p.txt-center .btn-top_contact:hover {
  color: #fff !important;
  background: var(--tanapen-line) !important;
  border-color: var(--tanapen-line) !important;
  text-decoration: none !important;
}

.home .top-info-company > p.txt-center .btn-top_contact:hover::after {
  color: #fff !important;
}

/* ==========================================================
   HEADER：お問い合わせ画像をLINE風ボタンに
   ※リンク先は /contact/ のまま
========================================================== */

.header-info .tel.hidden-tb,
.tel.hidden-tb {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.header-info .tel.hidden-tb a[href*="/contact"],
.tel.hidden-tb a[href*="/contact"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 0 !important;
}

.header-info .tel.hidden-tb a[href*="/contact"] img,
.tel.hidden-tb a[href*="/contact"] img {
  display: none !important;
}

.header-info .tel.hidden-tb a[href*="/contact"]::before,
.tel.hidden-tb a[href*="/contact"]::before {
  content: "☎ 090-4052-8121" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 250px !important;
  height: 58px !important;
  padding: 0 28px !important;
  color: var(--tanapen-dark) !important;
  background: #fff !important;
  border: 1px solid var(--tanapen-blue) !important;
  border-radius: 999px !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.header-info .tel.hidden-tb a[href*="/contact"]::after,
.tel.hidden-tb a[href*="/contact"]::after {
  content: "LINEでお問い合わせ" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  height: 58px !important;
  padding: 0 28px !important;
  color: #fff !important;
  background: var(--tanapen-line) !important;
  border: 1px solid var(--tanapen-line) !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ==========================================================
   お問い合わせページ：フォーム非表示 + LINEボタン
========================================================== */

.page-id-2591 form,
.page-id-2591 .mw_wp_form,
.page-id-2591 .wpcf7,
.page-id-2591 .contact-form,
.page-id-2591 .mailform,
.page-id-2591 .formTable,
.page-id-2591 .form-table,
.page-id-2591 table.mailform,
.page-id-2591 .privacy-policy,
.page-id-2591 .privacy {
  display: none !important;
}

.contact-line-button,
.contact-line-button:visited,
.contact-line-button:focus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  min-height: 56px !important;
  padding: 14px 34px !important;
  color: #fff !important;
  background: var(--tanapen-line) !important;
  border: 1px solid var(--tanapen-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 32px rgba(6, 199, 85, 0.24) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.contact-line-button:hover {
  color: #fff !important;
  background: var(--tanapen-line-hover) !important;
  border-color: var(--tanapen-line-hover) !important;
}

/* ==========================================================
   SP調整
========================================================== */

@media screen and (max-width: 768px) {
  .home .home-problem,
  .home .home-works,
  .home .why-tanapen,
  .home .home-case,
  .home .home-message,
  .home .home-area,
  .home .topnews,
  .home .top-info-company {
    padding-top: 64px !important;
    padding-bottom: 68px !important;
  }

  .home .topnews .topnews-list {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .home .topnews .topnews-list li a,
  .home .topnews .topnews-list li > a,
  .home .topnews .topnews-list li:first-child a,
  .home .topnews .topnews-list li:first-child > a {
    min-height: 220px !important;
    padding: 26px 22px !important;
  }

  .home .topnews .topnews-title,
  .home .topnews .topnews-list li:first-child .topnews-title {
    font-size: 17px !important;
  }

  .home .top-info-company > p.txt-center {
    width: calc(100vw - 36px) !important;
    min-height: auto !important;
    margin-top: 52px !important;
    padding: 48px 22px !important;
    border-radius: 22px !important;
  }

  .home .top-info-company > p.txt-center::before {
    font-size: 22px !important;
    line-height: 1.7 !important;
  }

  .home .top-info-company > p.txt-center::after {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .home .top-info-company > p.txt-center .btn-top_contact {
    width: 100% !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .header-info {
    margin-bottom: 16px !important;
  }

  .header-info .tel.hidden-tb,
  .tel.hidden-tb {
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .header-info .tel.hidden-tb a[href*="/contact"],
  .tel.hidden-tb a[href*="/contact"] {
    width: 100% !important;
    gap: 10px !important;
  }

  .header-info .tel.hidden-tb a[href*="/contact"]::before,
  .tel.hidden-tb a[href*="/contact"]::before {
    flex: 1 1 58% !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 12px !important;
    font-size: 20px !important;
  }

  .header-info .tel.hidden-tb a[href*="/contact"]::after,
  .tel.hidden-tb a[href*="/contact"]::after {
    flex: 1 1 42% !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 10px !important;
    content: "LINEで\Aお問い合わせ" !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: pre-line !important;
    text-align: center !important;
  }
}
/* ==========================================================
   FINAL FIX：LATEST CASE STUDY カード内テキスト幅
   右側の空白をなくす
========================================================== */

.home .topnews .topnews-list li .of-hidden,
.home .topnews .topnews-list li:first-child .of-hidden {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  overflow: visible !important;
}

.home .topnews .topnews-title,
.home .topnews .topnews-list li:first-child .topnews-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #202426 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-decoration: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.home .topnews .topnews-list li a,
.home .topnews .topnews-list li > a {
  text-decoration: none !important;
}

.home .topnews .topnews-list li a:hover .topnews-title,
.home .topnews .topnews-list li > a:hover .topnews-title {
  text-decoration: none !important;
}

/* カード内の余白も少し整える */
.home .topnews .topnews-list li a,
.home .topnews .topnews-list li > a,
.home .topnews .topnews-list li:first-child a,
.home .topnews .topnews-list li:first-child > a {
  padding: 34px 36px !important;
}

/* PCではタイトルが細くなりすぎないように */
@media screen and (min-width: 769px) {
  .home .topnews .topnews-title,
  .home .topnews .topnews-list li:first-child .topnews-title {
    max-width: 100% !important;
  }
}
/* ==========================================================
   FINAL FIX：WHY TANAPENをWORKSと完全にそろえる
========================================================== */

.home .why-tanapen .why-tanapen__en,
.why-tanapen .why-tanapen__en {
  margin: 0 0 14px !important;
  color: var(--accent) !important;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media screen and (max-width: 768px) {
  .home .why-tanapen .why-tanapen__en,
  .why-tanapen .why-tanapen__en {
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
  }
}

/* スマホ */
@media screen and (max-width: 768px) {
  .home .topnews .topnews-title,
  .home .topnews .topnews-list li:first-child .topnews-title {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
}
/* ==========================================================
   FINAL FIX：SPお問い合わせ導線
   ・ヘッダーの電話／LINEを非表示
   ・下部のメールボタンをLINEに変更
========================================================== */

@media screen and (max-width: 768px) {

  /* ヘッダー上部の電話・LINEを非表示 */
  .header-info .tel,
  .header-info .tel.hidden-tb,
  .tel.hidden-tb {
    display: none !important;
  }

  /* ヘッダー下の余白を調整 */
  .header-info {
    margin-bottom: 0 !important;
  }

  /* 下部固定CTA全体 */
  .sp-conversion-list {
    box-sizing: border-box !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding:
      10px 12px
      calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .sp-conversion-list li {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .sp-conversion-list li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: none !important;
  }

  /* 左：電話問い合わせ */
  .sp-conversion-list .btn-conversion--tel a {
    color: #202426 !important;
    background: #fff !important;
    border: 1px solid var(--accent) !important;
  }

  /* 右：既存文字を隠す */
  .sp-conversion-list .btn-conversion--mail a {
    color: #fff !important;
    background: #06c755 !important;
    border: 1px solid #06c755 !important;
    font-size: 0 !important;
  }

  /* 「メール問い合わせ」を「LINEで問い合わせ」に変更 */
  .sp-conversion-list .btn-conversion--mail a::after {
    content: "LINEで問い合わせ" !important;
    display: inline-block !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  /* 固定CTAでページ末尾が隠れないようにする */
  body {
    padding-bottom:
      calc(74px + env(safe-area-inset-bottom)) !important;
  }
}
/* ==========================================================
   FINAL FIX：SPヘッダーをコンパクト化
========================================================== */

@media screen and (max-width: 768px) {

  /* 地域・サービス説明をヘッダーから非表示 */
  .headertop-copy {
    display: none !important;
  }

  /* ロゴを約半分に縮小 */
  .header-info .logo img,
  .header-logo img,
  .site-logo img,
  header .logo img {
    width: 60px !important;
    max-width: 60px !important;
    height: auto !important;
  }

  /* 上部の電話・LINEを非表示 */
  .header-info .tel,
  .header-info .tel.hidden-tb,
  .tel.hidden-tb {
    display: none !important;
  }

  /* ヘッダー余白を縮小 */
  .header-info {
    margin: 0 !important;
  }
}
/* ==========================================================
   TOP：FIRST STEP
   現在のHTML専用。旧カード・旧CTA指定は使用しない。
========================================================== */

.home .home-first-step {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 104px 40px !important;
  overflow: visible !important;
  background: #f7f9fa !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.home .home-first-step::before {
  display: none !important;
  content: none !important;
}

.home .home-first-step__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr) !important;
  gap: 76px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.home .home-first-step__content {
  min-width: 0 !important;
}

.home .home-first-step .section-heading {
  max-width: none !important;
  margin: 0 0 44px !important;
  text-align: left !important;
}

.home .home-first-step .section-heading h2,
.home .home-first-step .section-heading p {
  text-align: left !important;
}

.home .home-first-step__list {
  max-width: 600px !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
}

.home .home-first-step__list p {
  position: relative !important;
  margin: 0 !important;
  padding: 16px 0 16px 32px !important;
  color: #30383c !important;
  border-bottom: 1px solid #dfe6e9 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
}

.home .home-first-step__list p:first-child {
  border-top: 1px solid #dfe6e9 !important;
}

.home .home-first-step__list p::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;
  width: 9px !important;
  height: 9px !important;
  background: #8fa4ad !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
}

.home .home-first-step__list p:empty,
.home .home-first-step__list p:has(br:only-child) {
  display: none !important;
}

.home .home-first-step__title {
  margin: 0 0 20px !important;
  color: #202426 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: .02em !important;
}

.home .home-first-step__text {
  max-width: 590px !important;
  margin: 0 !important;
  color: #596368 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: .02em !important;
}

.home .home-first-step__visual {
  position: relative !important;
  width: 100% !important;
  min-height: 500px !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #e8edef !important;
  border-radius: 26px !important;
}

.home .home-first-step__visual img {
  display: block !important;
  width: 100% !important;
  height: 500px !important;
  margin: 0 !important;
  object-fit: cover !important;
}

/* WORKS：専用ボタン。WordPressの共通.btn指定と分離 */
.home .home-works .home-works-link-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

.home .home-works a.home-works-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 230px !important;
  max-width: none !important;
  min-height: 54px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 12px 28px !important;
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #7e95a6 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: .25s ease !important;
}

.home .home-works a.home-works-link:hover {
  color: #fff !important;
  background: #7e95a6 !important;
  border-color: #7e95a6 !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

@media screen and (max-width: 960px) {
  .home .home-first-step__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr) !important;
    gap: 42px !important;
  }

  .home .home-first-step__visual,
  .home .home-first-step__visual img {
    height: 430px !important;
    min-height: 430px !important;
  }
}

@media screen and (max-width: 768px) {
  .home .home-first-step {
    padding: 64px 20px 68px !important;
  }

  .home .home-first-step__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 38px !important;
  }

  .home .home-first-step__content,
  .home .home-first-step__visual {
    width: 100% !important;
  }

  .home .home-first-step .section-heading {
    margin-bottom: 34px !important;
  }

  .home .home-first-step .section-heading h2 {
    font-size: 34px !important;
    letter-spacing: .12em !important;
  }

  .home .home-first-step .section-heading p {
    font-size: 14px !important;
    letter-spacing: .1em !important;
  }

  .home .home-first-step__list {
    margin-bottom: 30px !important;
  }

  .home .home-first-step__list p {
    padding: 14px 0 14px 27px !important;
    font-size: 14px !important;
  }

  .home .home-first-step__title {
    font-size: 20px !important;
  }

  .home .home-first-step__text {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .home .home-first-step__title br,
  .home .home-first-step__text br {
    display: none !important;
  }

  .home .home-first-step__visual,
  .home .home-first-step__visual img {
    height: 300px !important;
    min-height: 300px !important;
    border-radius: 20px !important;
  }

  .home .home-works a.home-works-link {
    min-width: 220px !important;
    min-height: 52px !important;
    font-size: 14px !important;
  }
}
/* FIRST STEP：人物が見える位置へ調整 */
.home .home-first-step__visual img {
  object-position: left center !important;
}