/*
Theme Name: 系統用蓄電池情報局
Theme URI: 
Author: 株式会社スタートセカンド @ H.H
Author URI: 
Description: 系統用蓄電池に関する情報を発信し、新着物件情報や収益シミュレーションを提供するポータルサイト用オリジナルテーマです。高速な表示と、Paid Memberships Pro等のプラグインを用いた会員限定機能への拡張に対応しています。
Version: 1.3.2
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: bess-info
Tags: 系統用蓄電池情報局, 情報サイト
*/

/* ==============================================
統一スタイル
============================================== */
:root {
  --max-width: 1150px;
  --transition: 0.3s;
  --color-primary: #e7e1d5;
  --color-primary-rgb: 231, 225, 213;
  --color-bg: #F1F1F7;
  --color-text: #121212;
  --color-text-rgb: 18, 18, 18;
  --color-white: #ffffff;
  --color-glay: #8a8a8a;
  --color-lime: #CEFF1A;
  --color-orange: #FF6D00;
  --color-green: #84CF0B;
  --color-lite-green: #F5FFCF;
  --color-border: #e4e4e4;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

body.gray-bg {
  background: var(--color-bg);
}

body.white-bg {
  background: var(--color-white);
}

p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  p {
    font-size: 15px;
  }
}

a {
  text-decoration: none;
  color: var(--color-text);
}

h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
}

.container {
  max-width: var(--max-width);
  width: 90%;
  margin: 150px auto 0;
}

.site--btn {
  margin-top: 50px;
  text-align: right;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  transition: var(--transition);
}

.button:hover {
  color: var(--color-primary);
}

.button__icon {
  width: 1.8em;
  height: auto;
}

@media screen and (max-width: 768px) {
  .site--btn {
    margin-top: 20px;
  }
}

/* h2共通タイトル */
.site__subTitle {
  color: var(--color-text);
  font-family: "EB Garamond", serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 2px;
}

.site__title {
  color: var(--color-text);
  font-family: "Zen Old Mincho", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.7px;
  margin-top: 5px;
}

.site__title--color {
  color: var(--color-white);
}

.site__title--center {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    max-width: var(--max-width);
    width: 84%;
    margin: 60px auto 0;
  }

  .site__subTitle {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 0;
  }

  .site__title {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}

/* ==============================================
ヘッダー
============================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background var(--transition) ease, top var(--transition) ease;
}

.header--scrolled {
  background: rgba(var(--color-text-rgb), 0.6);
  animation: slideDown 0.5s ease;
}

@keyframes slideDown {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

.header__inner {
  max-width: 100%;
  margin: 10px auto;
  padding: 0 40px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo--img {
  width: 180px;
  height: auto;
}

.header__nav {
  display: flex;
  align-items: center;
}

.header__logo-fallback {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Nav ── */
.header__nav-list-pc {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 36px;
  margin-right: 32px;
}

.header__nav-list-pc>li {
  position: relative;
}

.header__nav-list-pc a {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: opacity 0.15s ease;
}

.header__nav-list-pc a:hover {
  opacity: 0.75;
}

/* Caret for menu items with dropdowns */
.header__nav-list-pc .menu-item-has-children>a::after {
  content: "";
  display: inline-block;
  margin-left: 2px;
  margin-top: 2px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-white);
  transition: transform 0.2s ease;
}

.header__nav-list-pc .menu-item-has-children:hover>a::after {
  transform: rotate(180deg);
}

/* Dropdown Sub-menu */
.header__nav-list-pc .sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  /* 隙間18px */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-white);
  border-top: 2px solid var(--color-orange);
  box-shadow: 0px 1px 10px var(--color-bg);
  min-width: 200px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 100;
  list-style: none;
}

/* ホバー隙間を埋める擬似要素 */
.header__nav-list-pc .sub-menu::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 18px;
  background: transparent;
}

/* オレンジ色の矢印（上向きカレット） */
.header__nav-list-pc .sub-menu::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-orange);
}

.header__nav-list-pc .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Dropdown inner links */
.header__nav-list-pc .sub-menu a {
  display: block;
  padding: 13px 20px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-bottom: 1px solid var(--color-glay);
}

.header__nav-list-pc .sub-menu li:last-child a {
  border-bottom: none;
}

.header__nav-list-pc .sub-menu a:hover {
  background-color: var(--color-bg);
  color: var(--color-orange);
}

/* ── Buttons ── */
.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  font-family: inherit;
}

/* ログイン – outlined */
.btn--outline {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-orange);
  color: var(--color-orange);
}

.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

/* 会員登録 – filled */
.btn--fill {
  background-color: var(--color-orange);
  border: 1.5px solid var(--color-orange);
  color: var(--color-white);
}

.btn--fill:hover {
  background-color: #d96a00;
  border-color: #d96a00;
}


.header__nav-item a:hover {
  color: var(--color-glay);
}

/* ハンバーガー */
.header__toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: #121212;
  cursor: pointer;
  position: relative;
  z-index: 1100;
  box-shadow: none;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.header__toggle:hover {
  background: #000;
}

.header__toggle span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  display: block;
  background: #ffffff;
  border-radius: 999px;
  transform: translateX(-50%);
  transform-origin: center;
  transition:
    top 0.32s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.2s ease,
    background-color 0.2s ease;
  -webkit-transform: translateX(-50%) translateZ(0);
  backface-visibility: hidden;
}

.header__toggle span:nth-child(1) {
  top: 14px;
}

.header__toggle span:nth-child(2) {
  top: 21px;
}

.header__toggle span:nth-child(3) {
  top: 28px;
}

/* 開いた時：三本線 → バツ */
.header__toggle--active span:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

.header__toggle--active span:nth-child(2) {
  opacity: 0;
}

.header__toggle--active span:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

.header__toggle:focus {
  outline: none;
}

.header__toggle::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* SPオーバーレイナビ */
.header__overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--color-white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 80px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 999;
  overflow-y: auto;
}

.header__overlay--active {
  transform: translateX(0);
}

.header__nav-list {
  list-style: none;
  padding: 0 0 32px;
}

.header__nav-list>li {
  border-bottom: 1px solid #f0f0f0;
}

.header__nav-list>li>a {
  display: block;
  padding: 18px 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, color 0.15s ease;
}

.header__nav-list>li>a:hover {
  background: #f8f8f8;
  color: var(--color-orange);
}

/* WordPress SP Sub Menu styling */
.header__nav-list .sub-menu {
  list-style: none;
  background-color: #fafafa;
}

.header__nav-list .sub-menu li {
  border-bottom: 1px dashed #e8e8e8;
}

.header__nav-list .sub-menu li:last-child {
  border-bottom: none;
}

.header__nav-list .sub-menu a {
  display: block;
  padding: 14px 28px 14px 44px;
  /* indent */
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.header__nav-list .sub-menu a:hover {
  color: var(--color-orange);
}

.header__overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 28px 40px;
}

.header__overlay-actions .btn {
  width: 100%;
  justify-content: center;
  height: 44px;
  font-size: 14px;
  border-radius: 6px;
}

@media screen and (max-width: 768px) {
  .header__nav {
    display: none;
  }

  .header__toggle {
    display: flex;
  }

  .header__logo--img {
    width: 85px;
  }

  .header__inner {
    height: 65px;
    padding: 0 20px;
    margin: 0 auto;
  }

  .header__nav-list {
    display: inline-block;
    gap: 35px;
    list-style: none;
    text-align: center;
  }

  li.header__nav-item {
    margin: 25px;
  }
}

@media screen and (max-width: 1024px) {
  .header__inner {
    padding: 0 24px;
  }

  .header__logo--img {
    width: 150px;
  }

  .header__nav {
    gap: 20px;
    margin-right: 20px;
  }

  .header__actions {
    gap: 8px;
  }

  .header__actions .btn {
    padding: 0 14px;
    font-size: 13px;
    height: 36px;
  }
}

@media screen and (max-width: 768px) {
  .header__inner {
    height: 64px;
    padding: 0 16px;
  }

  .header__logo--img {
    width: 140px;
  }

  .header__actions {
    display: none;
  }

  .header__overlay {
    width: min(320px, 88vw);
    padding-top: 64px;
  }

  .header__overlay-actions {
    padding: 8px 20px 28px;
  }

  .header__nav-list {
    width: 100%;
    padding-bottom: 20px;
  }

  li.header__nav-item {
    margin: 0;
  }

  li.header__nav-item a {
    padding: 16px 20px;
    font-size: 14px;
  }
}


/* ==============================================
  下層ページ用ヘッダー (.header--subpage)
============================================== */

.header--subpage {
  background: var(--color-white);
  border-bottom: 1px solid #e8e8e8;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header--subpage.header--scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ナビリンク: 白 → ダーク */
.header--subpage .header__nav-list-pc a {
  color: var(--color-text);
}

.header--subpage .header__nav-list-pc .menu-item-has-children:hover>a {
  opacity: 0.6;
}

/* カレット（∨マーク）: 白 → ダーク */
.header--subpage .header__nav-list-pc .menu-item-has-children>a::after {
  border-top-color: var(--color-text);
}

/* ハンバーガーのライン: 白 → ダーク（SP用） */
.header--subpage .header__toggle span {
  background: var(--color-white);
}

/* ログインボタン: 下層でも同じオレンジ枠 */
.header--subpage .btn--outline {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-orange);
  color: var(--color-orange);
}

.header--subpage .btn--outline:hover {
  background-color: rgba(255, 109, 0, 0.06);
}

/* =============================
       Footer Wrapper
    ============================= */
.footer__wrapper {
  padding: 24px 24px 0;
}

/* =============================
       Footer Main (dark rounded box)
    ============================= */
.footer__main {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 52px 60px 48px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* =============================
       Left: Company Info
    ============================= */
.footer__company {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Logo img tag — src を後から入れてください */
.footer__logo {
  width: 220px;
  height: auto;
  display: block;
}

.footer__company--name {
  font-size: 13px;
  font-weight: 400;
  color: #ccc;
  letter-spacing: 0.04em;
}

.footer__company--address {
  font-size: 12px;
  font-weight: 400;
  color: #999;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* SNS Icons */
.footer__sns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.footer__sns--link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #555;
  color: #ccc;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.footer__sns--link:hover {
  border-color: #c6f135;
  color: #c6f135;
}

.footer__sns--link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =============================
       Right: Nav Links
    ============================= */
.footer__nav {
  flex: 1;
  display: flex;
  gap: 0;
  justify-content: flex-end;
}

.footer__nav--col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 200px;
}

.footer__nav--heading {
  font-size: 14px;
  font-weight: 700;
  color: #c6f135;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.footer__nav--link,
.footer__nav--col ul li a {
  font-size: 13px;
  font-weight: 400;
  color: #ccc;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
  display: block;
}

.footer__nav--link:hover,
.footer__nav--col ul li a:hover {
  color: var(--color-white);
}

.footer__nav--col ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =============================
       Footer Bottom (copyright)
    ============================= */
.footer__bottom {
  text-align: center;
  padding: 24px 0 20px;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 1024px) {
  .footer__wrapper {
    padding: 20px 20px 0;
  }

  .footer__main {
    flex-direction: column;
    gap: 36px;
    padding: 40px 32px 36px;
  }

  .footer__company {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .footer__nav {
    width: 100%;
    justify-content: flex-start;
    gap: 32px;
    flex-wrap: wrap;
  }

  .footer__nav--col {
    flex: 0 0 calc(50% - 16px);
    max-width: none;
  }
}

@media screen and (max-width: 768px) {
  .footer__wrapper {
    padding: 16px 16px 0;
  }

  .footer__main {
    gap: 28px;
    padding: 28px 20px 24px;
    border-radius: 16px;
  }

  .footer__logo {
    width: 170px;
  }

  .footer__company {
    gap: 14px;
  }

  .footer__company--address {
    font-size: 11px;
    line-height: 1.8;
  }

  .footer__sns {
    gap: 10px;
  }

  .footer__sns--link {
    width: 34px;
    height: 34px;
  }

  .footer__nav {
    display: none;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer__nav--col {
    flex: none;
    width: 100%;
    gap: 12px;
  }

  .footer__nav--col ul {
    gap: 12px;
  }

  .footer__nav--heading {
    font-size: 13px;
    margin-bottom: 0;
  }

  .footer__nav--link,
  .footer__nav--col ul li a {
    font-size: 12px;
  }

  .footer__bottom {
    padding: 18px 0 16px;
    font-size: 11px;
    line-height: 1.6;
  }
}


/* ==============================================
トップページ
============================================== */
/* ファーストビュー */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.section__firstview--slider {
  position: relative;
  z-index: 1;
}

.swiper-slide {
  position: relative;
  overflow: hidden;
}

.mySwiper1 .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--color-text-rgb), 0.3) 0%, rgba(var(--color-primary-rgb), 0) 100%);
  pointer-events: none;
}

.firstview__catchcopy_title {
  position: absolute;
  display: inline-block;
  color: var(--color-white);
  top: 38%;
  right: 0;
  left: 5%;
  margin: 0 auto;
  text-align: left;
  z-index: 2;
}

.firstview__catchcopy_title h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(25px, 5vw, 50px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: normal;
  color: var(--color-lime);
}

.firstview__catchcopy_title div {
  font-family: "Inter", sans-serif;
  font-size: clamp(11px, 2vw, 18px);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

.firstview__news {
  position: absolute;
  width: 100%;
  max-width: 480px;
  color: var(--color-text);
  top: 68%;
  right: 3%;
  margin: 0 auto;
  text-align: left;
  z-index: 2;
  background: var(--color-bg);
  padding: 20px 25px;
  border-radius: 10px;
}

.mySwiperNews {
  height: 24px;
  overflow: hidden;
}

.mySwiperNews .swiper-slide {
  height: 24px !important;
  display: flex !important;
  align-items: center;
}

.news {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  width: 100%;
  height: 100%;
}

.news-date {
  font-size: 0.75rem;
  color: var(--color-orange);
  flex-shrink: 0;
}

.news-title {
  font-size: 0.85rem;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news:hover {
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .firstview__catchcopy_title {
    top: 34%;
    left: 24px;
    right: 24px;
  }

  .firstview__news {
    top: auto;
    bottom: 32px;
    right: 24px;
    left: 24px;
    max-width: 520px;
    margin-left: auto;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .swiper-slide img {
    width: 100%;
    height: 100svh;
    min-height: 620px;
    object-fit: cover;
  }

  .mySwiper1 .swiper-slide::after {
    background: linear-gradient(to bottom,
        rgba(var(--color-text-rgb), 0.42) 0%,
        rgba(var(--color-text-rgb), 0.18) 45%,
        rgba(var(--color-primary-rgb), 0) 100%);
  }

  .firstview__catchcopy_title {
    top: 25%;
    left: 16px;
    right: 16px;
  }

  .firstview__catchcopy_title h2 {
    font-size: clamp(30px, 10vw, 44px);
    line-height: 1.15;
    letter-spacing: 0.03em;
  }

  .firstview__catchcopy_title div {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.8;
    max-width: 30ch;
  }

  .firstview__news {
    top: auto;
    right: 16px;
    bottom: 70px;
    left: 16px;
  }

  .news {
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    align-items: flex-start;
  }

  .news-date {
    font-size: 11px;
    padding-top: 2px;
  }

  .news-title {
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
}




/* =============================
       section__about--container
    ============================= */
.section__about--container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: -100px;

  /* ▼ 背景画像を差し替える場合はここを変更 */
  background: url("./assets/img/bg_green.png") center center no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 背景画像がない場合のフォールバック（デザインに近いグラデーション） */
  background-color: #a8e85c;
}

/* 背景画像がないときのグラデーション用オーバーレイ（差し替え後は削除可） */
.section__about--container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 200, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(200, 255, 100, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #d4f56a 0%, #7ee82a 40%, #4dd900 100%);
  z-index: 0;
}

/* ノイズテクスチャ（デザインのグレイン感を再現） */
.section__about--container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.section__about--container__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 40px;
  text-align: center;
  margin-top: 100px;
}

/* =============================
   Heading
============================= */
.section__about--container__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.section__about--container__subtitle {
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 400;
  color: #222;
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin-bottom: 72px;
}

/* =============================
   Flow Row
============================= */
.flow-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 72px;
  flex-wrap: nowrap;
}

.flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex: 1;
  max-width: 220px;
}

/* Stretch arrows to full column height, center arrow icon within circle height */
.flow-arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  align-self: stretch;
}

.flow-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  /* same as circle height */
}

/* Circle icon */
.flow-item__circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.flow-item__circle img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.flow-item__label {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.flow-item__desc {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  line-height: 1.8;
  letter-spacing: 0.01em;
}



/* =============================
   Button
============================= */
.cta-wrap {
  display: flex;
  justify-content: center;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease;
  outline: none;
  min-width: 280px;
  justify-content: space-between;
}

.cta-btn:hover {
  background: #333;
}

.cta-btn__text {
  flex: 1;
  text-align: center;
}

/* Arrow icon circle */
.cta-btn__arrow {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.cta-btn__arrow svg {
  color: #1a1a1a;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

/* Hover: arrow slides right then reappears from left */
.cta-btn:hover .cta-btn__arrow svg {
  transform: translateX(6px);
}


/* ════════════════════════════════
       スティッキーラッパー
    ════════════════════════════════ */
.pin-wrap {
  height: 350vh;
  position: relative;
  padding-top: 50px;
}

.pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38% 62%;
}

/* ════ 左ペイン ════ */
.left-pane {
  padding: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.service-heading {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 0.92;
  color: var(--color-lime);
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.service-heading.in {
  opacity: 1;
  transform: none;
}

.service-sub {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 0.15s ease, transform 0.7s 0.15s ease;
}

.service-sub.in {
  opacity: 1;
  transform: none;
}

.service-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text);
  /* max-width: 28ch; */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 0.25s ease, transform 0.7s 0.25s ease;
}

.service-body.in {
  opacity: 1;
  transform: none;
}

/* ════ 右ペイン ════ */
.right-pane {
  position: relative;
  overflow: hidden;
}

/* PILLARS 固定装飾テキスト */
.pillars-text {
  position: absolute;
  top: clamp(2rem, 5vh, 4rem);
  right: 0;
  transform-origin: right top;
  transform: rotate(-90deg) translateX(-100%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.06);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
}

/* スクロールで動くコンテナ */
.right-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
  z-index: 1;
}

/* ── サービスアイテム ── */
.service-item {
  padding: clamp(1.2rem, 3vh, 2.4rem) clamp(1.5rem, 3vw, 3rem) 0;
}

.service-item:last-child {
  padding-bottom: clamp(1.2rem, 3vh, 2.4rem);
}

/* 画像 */
.item-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
}

.item-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.item-image-wrap:hover img {
  transform: scale(1.04);
}

/* 情報行 */
.item-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(0.9rem, 2.5vh, 1.6rem) 0;
  border-bottom: 1px solid var(--color-line);
}

/* 大きな番号 */
.item-number {
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-text);
}

/* タイトル＋説明 */
.item-title {
  font-size: clamp(0.78rem, 1.1vw, 0.88rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.item-desc {
  font-size: clamp(0.7rem, 0.95vw, 0.78rem);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.65;
}

/* CTA */
.item-cta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}

.item-cta-label {
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.item-cta-btn {
  width: clamp(2rem, 3.2vw, 2.5rem);
  height: clamp(2rem, 3.2vw, 2.5rem);
  border-radius: 50%;
  background: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.item-cta:hover .item-cta-btn {
  background: var(--color-lime);
  transform: scale(1.08);
}

.item-cta-btn svg {
  width: 44%;
  height: 44%;
}

@media screen and (max-width: 1024px) {
  .section__about--container {
    min-height: auto;
    margin-top: -60px;
  }

  .section__about--container__inner {
    padding: 100px 24px 72px;
  }

  .section__about--container__subtitle {
    margin-bottom: 56px;
  }

  .flow-item {
    max-width: 180px;
  }

  .flow-item__circle {
    width: 130px;
    height: 130px;
  }

  .flow-item__circle img {
    width: 86px;
    height: 86px;
  }

  .flow-arrow-wrap {
    width: 32px;
  }

  .flow-arrow-icon {
    height: 130px;
  }
}

@media screen and (max-width: 768px) {
  /* .section__about--container {
        min-height: auto;
        margin-top: 0;
      } */

  .section__about--container__inner {
    padding: 72px 20px 64px;
    margin-top: 0;
  }

  .section__about--container__title {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 16px;
    margin-top: 30px;
  }

  .section__about--container__subtitle {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 42px;
  }

  .flow-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 42px;
  }

  .flow-item {
    max-width: 100%;
    width: 100%;
    gap: 14px;
  }

  .flow-item__circle {
    width: 120px;
    height: 120px;
  }

  .flow-item__circle img {
    width: 78px;
    height: 78px;
  }

  .flow-item__label {
    font-size: 17px;
  }

  .flow-item__desc {
    font-size: 13px;
    line-height: 1.7;
  }

  .flow-arrow-wrap {
    width: auto;
    align-self: auto;
  }

  .flow-arrow-icon {
    height: auto;
    transform: rotate(90deg);
  }

  .section__about--container .cta-btn {
    width: min(100%, 320px);
    min-width: 0;
    padding: 16px 18px 16px 24px;
    font-size: 14px;
  }

  .section__about--container .cta-btn__arrow {
    width: 34px;
    height: 34px;
  }
}

@media screen and (max-width: 1024px) {
  .pin-wrap {
    height: auto;
    padding-top: 0;
  }

  .pin-inner {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }

  .left-pane {
    padding: 80px 24px 32px;
  }

  .right-pane {
    overflow: visible;
  }

  .pillars-text {
    display: none;
  }

  .right-scroll {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none !important;
  }

  .service-item {
    padding: 0 24px 32px;
  }

  .item-info {
    grid-template-columns: auto 1fr;
    gap: 14px 18px;
  }

  .item-cta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 4px;
  }
}

@media screen and (max-width: 768px) {
  .pin-wrap {
    height: auto;
  }

  .pin-inner {
    display: block;
    height: auto;
  }

  .left-pane {
    padding: 56px 16px 24px;
  }

  .service-heading {
    font-size: clamp(46px, 18vw, 72px);
    margin-bottom: 12px;
  }

  .service-sub {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .service-body {
    font-size: 14px;
    line-height: 1.8;
  }

  .right-scroll {
    position: relative;
    transform: none !important;
  }

  .service-item {
    padding: 0 16px 26px;
  }

  .item-image-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }

  .item-info {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0 0;
  }

  .item-number {
    font-size: 52px;
  }

  .item-title {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .item-desc {
    font-size: 13px;
    line-height: 1.75;
  }

  .item-cta {
    width: 100%;
    justify-content: space-between;
    margin-top: 2px;
    border-radius: 10px;
    padding: 5px 10px;
    background: var(--color-white);
  }

  .item-cta-label {
    font-size: 13px;
  }

  .item-cta-btn {
    width: 33px;
    height: 33px;
  }
}



/* =============================
       Section　新着物件情報
    ============================= */
.section__property--container {
  width: 100%;
  min-height: 100vh;
  background-color: #e8e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}

.section__property--inner {
  width: 100%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* =============================
       Title
    ============================= */
.section__property--title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: #2a2a2a;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 52px;
}

/* =============================
       Cards Grid
    ============================= */
.property-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-bottom: 52px;
}

/* Individual Card (clickable link) */
.property-card {
  display: block;
  text-decoration: none;
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px 24px 0 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.property-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ── Card Header ── */
.property-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  color: #fff;
}

.badge--high {
  background-color: #8bc34a;
  /* 高圧：黄緑 */
}

.badge--low {
  background-color: #ff9800;
  /* 低圧：オレンジ */
}

.property-card__name {
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
  letter-spacing: 0.02em;
}

/* ── Card Stats ── */
.property-card__stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 20px;
}

.stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.stat-col+.stat-col {
  border-left: 1px solid #e0e0e0;
}

.stat-col__label {
  font-size: 12px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.stat-col__value {
  font-size: 15px;
  font-weight: 700;
  color: #ff9800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Card Footer (locked) ── */
.property-card__footer {
  margin: 0 -24px;
  background: #f2f2f2;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.property-card__footer--icon {
  font-size: 13px;
  color: #999;
  flex-shrink: 0;
}

.property-card__footer--text {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.02em;
}

/* =============================
       CTA Button
    ============================= */
.cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px 20px 40px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease;
  min-width: 360px;
  justify-content: space-between;
}

.cta-btn:hover {
  background: #333;
}

.cta-btn__text {
  flex: 1;
  text-align: center;
}

.cta-btn__arrow {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-btn__arrow svg {
  color: #1a1a1a;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn:hover .cta-btn__arrow svg {
  transform: translateX(5px);
}

/* =============================
       Login Link
    ============================= */
.login-link {
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.login-link:hover {
  color: #555;
}

@media screen and (max-width: 1024px) {
  .section__property--container {
    min-height: auto;
    padding: 72px 24px;
  }

  .property-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .section__property--title {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .section__property--container {
    min-height: auto;
    padding: 56px 16px;
  }

  .section__property--title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .property-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }

  .property-card {
    padding: 20px 18px 0;
    border-radius: 14px;
  }

  .property-card__header {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }

  .property-card__name {
    font-size: 14px;
    line-height: 1.6;
  }

  .property-card__stats {
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
  }

  .stat-col {
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }

  .stat-col+.stat-col {
    border-left: none;
    border-top: 1px solid #e0e0e0;
  }

  .stat-col__label,
  .stat-col__value {
    white-space: normal;
  }

  .property-card__footer {
    margin: 0 -18px;
    padding: 10px 14px;
  }

  .section__property--container .cta-wrap {
    width: 100%;
    gap: 18px;
  }

  .section__property--container .cta-btn {
    width: 100%;
    min-width: 0;
    padding: 16px 16px 16px 22px;
    font-size: 14px;
  }

  .section__property--container .cta-btn__arrow {
    width: 36px;
    height: 36px;
  }

  .login-link {
    font-size: 13px;
  }
}


/* =============================
       Section　ニュース
    ============================= */
.section__news--container {
  width: 100%;
  min-height: 100vh;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vw, 5rem);
}

.section__news--inner {
  width: 100%;
  max-width: 1260px;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* =============================
       Left: Heading
    ============================= */
.news__heading {
  flex-shrink: 0;
  padding-top: 8px;
}

.news__heading--title {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 900;
  color: #c6f135;
  line-height: 1;
  margin-bottom: 16px;
}

.news__heading--sub {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.04em;
}

/* =============================
       Right: List + Button
    ============================= */
.news__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =============================
       News Item
    ============================= */
.news-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 12px;
  border-bottom: 1px solid #e8e8e8;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  border-radius: 4px;
}

.news-item:first-child {
  border-top: 1px solid #e8e8e8;
}

.news-item:hover {
  background: #f8f8f8;
}

.news-item:hover .news-item__title {
  color: #7ab800;
}

/* Date */
.news-item__date {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 2px;
  flex-shrink: 0;
  width: 90px;
}

/* Badge */
.news-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.badge--notice {
  background: #1a1a1a;
  color: #fff;
}

.badge--column {
  background: #ff8c00;
  color: #fff;
}

.badge--member {
  background: #aaa;
  color: #fff;
}

/* Body */
.news-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.news-item__title {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.news-item__title--locked::before {
  content: '🔒 ';
  font-size: 13px;
}

.news-item__excerpt {
  font-size: 12px;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.news-item__excerpt--member {
  color: #bbb;
}

/* =============================
       CTA Button
    ============================= */
.news__cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px 18px 36px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease;
  white-space: nowrap;
}

.cta-btn:hover {
  background: #333;
}

.cta-btn__arrow {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-btn__arrow svg {
  color: #1a1a1a;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn:hover .cta-btn__arrow svg {
  transform: translateX(5px);
}

@media screen and (max-width: 1024px) {
  .section__news--container {
    min-height: auto;
    padding: 72px 24px;
  }

  .section__news--inner {
    flex-direction: column;
    gap: 32px;
  }

  .news__heading {
    padding-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .section__news--container {
    min-height: auto;
    padding: 56px 16px;
  }

  .section__news--inner {
    gap: 24px;
  }

  .news__heading {
    width: 100%;
    text-align: center;
  }

  .news__heading--title {
    font-size: clamp(44px, 16vw, 72px);
    margin-bottom: 10px;
  }

  .news__heading--sub {
    font-size: 18px;
  }

  .news-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
    border-radius: 0;
  }

  .news-item__date {
    width: auto;
    font-size: 12px;
    padding-top: 0;
  }

  .news-item__badge {
    min-width: 0;
    width: fit-content;
  }

  .news-item__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .news-item__title {
    font-size: 14px;
    line-height: 1.7;
  }

  .news-item__excerpt {
    font-size: 12px;
    line-height: 1.7;
  }

  .news__cta {
    margin-top: 24px;
  }

  .news__cta .cta-btn {
    width: 100%;
    min-width: 0;
    padding: 16px 16px 16px 22px;
    font-size: 14px;
  }

  .news__cta .cta-btn__arrow {
    width: 36px;
    height: 36px;
  }
}


/* =============================
       Section コンタクト
    ============================= */
.section__contact--container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  overflow: hidden;

  /* 背景画像を差し替える場合はここを変更 */
  /*background-image: url('YOUR_BACKGROUND_IMAGE.jpg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #a8e82a;
}

/* グラデーションオーバーレイ（背景画像がない場合のフォールバック） */
.section__contact--container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 55%, rgba(255, 255, 180, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(200, 255, 80, 0.4) 0%, transparent 50%),
    linear-gradient(130deg, #d8f56e 0%, #7ee82a 45%, #3dd100 100%);
  z-index: 0;
}

/* ノイズテクスチャ */
.section__contact--container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.section__contact--inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* =============================
       Heading
    ============================= */
.contact__title {
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  margin-bottom: 20px;
}

.contact__subtitle {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 56px;
}

/* =============================
       Cards Grid
    ============================= */
.contact__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}

.contact__cards.contact__cards--single {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}

.contact-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 48px 52px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.contact__cards {
  align-items: stretch;
}

.contact-card__text {
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  color: #2a2a2a;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.03em;
}

/* =============================
       Buttons
    ============================= */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 36px;
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  min-width: 320px;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.cta-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* 黄緑ボタン */
.cta-btn--green {
  background: #c6f135;
  color: #1a1a1a;
}

/* オレンジボタン */
.cta-btn--orange {
  background: #ff8c00;
  color: var(--color-white);
}

.cta-btn__text {
  flex: 1;
  text-align: center;
}

/* 矢印丸 */
.cta-btn__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-btn--green .cta-btn__arrow {
  background: #1a1a1a;
}

.cta-btn--orange .cta-btn__arrow {
  background: var(--color-white);
}

.cta-btn__arrow svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn--green .cta-btn__arrow svg {
  stroke: var(--color-white);
}

.cta-btn--orange .cta-btn__arrow svg {
  stroke: #ff8c00;
}

.cta-btn:hover .cta-btn__arrow svg {
  transform: translateX(5px);
}

@media screen and (max-width: 1024px) {
  .section__contact--container {
    min-height: auto;
    padding: 72px 24px;
  }

  .contact__cards {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .section__contact--container {
    min-height: auto;
    padding: 56px 16px;
  }

  .contact__title {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 1;
  }

  .contact__subtitle {
    font-size: 16px;
    line-height: 1.7;
  }

  .contact__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-card {
    padding: 24px 18px;
  }

  .contact-card__text {
    font-size: 14px;
    line-height: 1.8;
  }

  .contact-card .cta-btn {
    width: 100%;
    min-width: 0;
    padding: 16px 16px 16px 20px;
    font-size: 14px;
  }

  .contact-card .cta-btn__arrow {
    width: 36px;
    height: 36px;
  }
}



/* =============================================
       Placeholder header spacer
       (実際のページでは .header--subpage が固定表示されるため)
    ============================================= */
.header-spacer {
  height: 80px;
}

@media screen and (max-width: 768px) {
  .header-spacer {
    height: 64px;
  }
}

/* =============================================
       HERO
    ============================================= */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 370px;
  padding: 64px 60px 40px;
  overflow: hidden;

  /* ▼ 背景画像を入れる場合はここを変更 */
  background-image: url('./assets/img/hero_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 画像がない場合のフォールバック */
}

/* グラデーション＋ノイズ（背景画像がない場合のフォールバック） */
/* .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E") center/200px 200px,
        linear-gradient(135deg, #d8f56e 0%, #7ee82a 50%, #3dd100 100%);
      pointer-events: none;
      z-index: 0;
    } */

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
}

.page-hero__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.page-hero__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(52px, 8vw, 88px);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
}

.page-hero__text {
  font-size: clamp(12px, 8vw, 15px);
  color: var(--color-glay);
  margin-bottom: 32px;
}

/* =============================================
       BREADCRUMB（ヒーロー内）
    ============================================= */

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 14px;
  color: var(--color-text);
}

.breadcrumb__item a {
  color: #333;
  transition: color .2s;
}

.breadcrumb__item a:hover {
  color: #000;
}

.breadcrumb__sep {
  color: #555;
}

@media screen and (max-width: 1024px) {
  .page-hero {
    min-height: auto;
    padding: 56px 32px 36px;
  }

  .page-hero__inner {
    width: 100%;
  }

  .page-hero__label {
    font-size: 13px;
  }

  .page-hero__title {
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.25;
  }

  .page-hero__text {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.9;
  }

  .breadcrumb__list {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

@media screen and (max-width: 767px) {
  .page-hero {
    min-height: auto;
    padding: 44px 20px 28px;
  }

  .page-hero__label {
    font-size: 12px;
  }

  .page-hero__title {
    font-size: 26px;
    line-height: 1.3;
  }

  .page-hero__text {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.85;
  }

  .breadcrumb__list {
    gap: 6px;
  }

  .breadcrumb__item,
  .breadcrumb__sep {
    font-size: 12px;
    line-height: 1.6;
  }
}

/* =============================================
       SECTION: 系統用蓄電池とは？
    ============================================= */
.section__intro {
  padding: 72px 60px 80px;
  max-width: calc(var(--max-w) + 120px);
  margin: 0 auto;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 670px;
  gap: 60px;
  align-items: start;
}

/* Left text */

.intro__h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.intro__body {
  font-size: 14px;
  line-height: 2;
  color: #333;
  letter-spacing: 0.03em;
  margin-bottom: 40px;
}

.intro__h3 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  color: var(--color-orange);
}

/* Right image */
.intro__img-wrap {
  position: relative;
}

.intro__img-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 1024px) {
  .section__intro {
    padding: 56px 32px 64px;
  }

  .intro__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .intro__img-wrap {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }

  .intro__h2 {
    font-size: 32px;
    line-height: 1.4;
  }

  .intro__h3 {
    font-size: 22px;
    line-height: 1.6;
  }

  .intro__body {
    font-size: 15px;
    line-height: 2;
  }
}

@media screen and (max-width: 767px) {
  .section__intro {
    padding: 44px 20px 52px;
  }

  .intro__grid {
    gap: 24px;
  }

  .intro__h2 {
    font-size: 24px;
    line-height: 1.5;
  }

  .intro__h3 {
    font-size: 18px;
    line-height: 1.65;
  }

  .intro__body {
    font-size: 14px;
    line-height: 1.9;
  }

  .intro__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* =============================================
       SECTION: 3つの市場から収益を得る
    ============================================= */
.section__markets {
  padding: 0 40px 80px;
  max-width: calc(var(--max-w) + 80px);
  margin: 0 auto;
}

.markets__card {
  background: var(--color-white);
  border-radius: 24px;
  padding: 64px 52px 56px;
}

.markets__title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.markets__subtitle {
  font-size: 12px;
  color: #888;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin-bottom: 52px;
}

/* ── 4 column grid（独立ボックス） ── */
.markets__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
  .section__markets {
    padding: 0 32px 64px;
  }

  .markets__card {
    border-radius: 20px;
    padding: 32px 24px;
  }

  .markets__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .markets__details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .market-col {
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .section__markets {
    padding: 0 20px 52px;
  }

  .markets__card {
    border-radius: 16px;
    padding: 24px 16px;
  }

  .markets__cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .markets__details {
    gap: 14px;
    margin-top: 18px;
  }

  .market-col {
    padding: 20px 16px;
  }

  .market-col img {
    max-width: 64px;
    height: auto;
  }
}


.market-col {
  padding: 28px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
}

.market-col__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--lime);
  color: #1a1a1a;
}

.market-col__badge.source {
  background: #F5FFCF;
  color: var(--color-green);
}

.market-col__badge--sum {
  background: #ffe5c8;
  color: var(--color-orange);
}

.market-col__name {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.03em;
}

/* Icon placeholder */
.market-col__icon {
  width: 72px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-col__icon img {
  width: 72px;
  height: 60px;
  object-fit: contain;
}

.market-col__desc {
  font-size: 12px;
  color: #555;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* ── 3 detail cards ── */
.markets__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.detail-card {
  background: #f5fad8;
  border-radius: 14px;
  padding: 28px 24px;
}

.detail-card__icon {
  margin-bottom: 10px;
}

.detail-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* lightbulb placeholder */
.detail-card__icon-svg {
  width: 28px;
  height: 28px;
  color: var(--lime);
}

.detail-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.detail-card__body {
  font-size: 12px;
  color: #555;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* =============================================
       SECTION WRAPPER
    ============================================= */
.section__market {
  position: relative;
  width: 100%;
  min-height: 680px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: url('./assets/img/market_bg.png');
}

/* =============================================
       LEFT: 緑背景エリア
    ============================================= */
.market__left {
  position: relative;
  overflow: hidden;
  clip-path: ellipse(110% 110% at -10% 50%);
  overflow: visible;
  /* ▼ 背景画像を入れる場合はここを変更 */
  background-image: url('./assets/img/bg_green.png');
  /* ← 画像URLをここに */
  background-size: cover;
  background-position: center;
  /* 画像がない場合のフォールバック */
  background-color: #7ee82a;
  z-index: 2;
}

/* フォールバック用グラデーション（画像設定後は削除可） */
.market__left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 40%, rgba(255, 255, 180, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #d8f56e 0%, #8ee830 40%, #4dd900 100%);
  z-index: 0;
}


.market__left__inner {
  position: relative;
  z-index: 3;
  padding: 80px 60px 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.market__heading {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.market__body {
  font-size: 14px;
  line-height: 2;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  margin-bottom: 48px;
}

/* イラスト */
.market__illust {
  display: flex;
  align-items: flex-end;
}

.market__illust img {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =============================================
       RIGHT: 背景写真エリア
    ============================================= */
.market__right {
  position: relative;
  overflow: hidden;

  /* ▼ 背景写真を入れる場合はここを変更 */
  background-size: cover;
  background-position: center;
  z-index: 1;
}


.market__right__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 80px 60px 60px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =============================================
       STAT CIRCLES GRID
    ============================================= */
.stat-grid-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}

.stat-ring {
  position: absolute;
  width: 332px;
  height: 332px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  justify-items: center;
  align-items: center;
}

.stat-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;

  /* アニメーション初期状態 */
  opacity: 0;
  transform: scale(0.85);
}

/* ふわっと出るアニメーション */
@keyframes fadeInCircle {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  60% {
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-circle.is-visible {
  animation: fadeInCircle 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* 各円の delay */
.stat-circle.is-visible:nth-child(1) {
  animation-delay: 0s;
}

.stat-circle.is-visible:nth-child(2) {
  animation-delay: 0.18s;
}

.stat-circle.is-visible:nth-child(3) {
  animation-delay: 0.36s;
}

.stat-circle.is-visible:nth-child(4) {
  animation-delay: 0.54s;
}

.stat-circle__value {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.stat-circle__label {
  font-size: 11px;
  font-weight: 400;
  color: #444;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.stat-circle__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.stat-circle__tag--orange {
  color: var(--color-orange);
}

.stat-circle__tag--green {
  color: #3aaa35;
}

/* 注釈 */
.market__note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  letter-spacing: 0.03em;
  text-align: right;
}

@media screen and (max-width: 1024px) {
  .section__market {
    grid-template-columns: 1fr;
  }

  .market__right {
    order: -1;
  }

  .market__left__inner,
  .market__right__inner {
    padding: 40px 32px;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  .section__market {
    grid-template-columns: 1fr;
  }

  .market__left__inner,
  .market__right__inner {
    padding: 32px 20px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .market__left h2,
  .market__left h3 {
    line-height: 1.5;
    color: var(--color-white);
  }

  .market__left p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--color-white)
  }

  .market__body {
    margin-bottom: 0;
  }

  .stat-circle {
    width: 160px;
    height: 160px;
  }

  .market__left::before {
    background: none;
  }

  .market__left {
    background: none;
  }

  .market__illust {
    display: none;
  }
}

/* =============================================
       カード全体
    ============================================= */
.section__onestop {
  background: var(--color-white);
  border-radius: 20px;
  max-width: 1100px;
  margin: 50px auto;
  padding: 64px 60px 52px;
}

/* =============================================
       タイトル
    ============================================= */
.onestop__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  color: #1a1a1a;
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.onestop__subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 56px;
}

/* =============================================
       フローアイテム列
    ============================================= */
.onestop__flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
}

/* フローアイテム */
.flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  width: 120px;
  text-align: center;
}

/* 白い円 */
.flow-item__circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* 最後の円（緑塗り） */
.flow-item__circle--green {
  background: #7ec922;
}

/* アイコン画像 */
.flow-item__circle img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* テキスト */
.flow-item__label {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.03em;
}

.flow-item__desc {
  font-size: 12px;
  font-weight: 400;
  color: #555;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* 矢印 */
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  flex: 1;
  align-self: flex-start;
}

.flow-arrow svg {
  flex-shrink: 0;
}

/* =============================================
       注記バナー
    ============================================= */
.onestop__note {
  background: #f0fad4;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.onestop__note strong {
  font-weight: 700;
  color: #1a1a1a;
}

@media screen and (max-width: 1024px) {
  .section__onestop {
    margin-left: 32px;
    margin-right: 32px;
    padding: 40px 24px;
  }

  .onestop__flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 14px;
  }

  .flow-item {
    width: min(100%, 250px);
    margin: 0 auto;
  }

  .flow-arrow {
    transform: rotate(90deg);
    align-self: center;
  }
}

@media screen and (max-width: 767px) {
  .section__onestop {
    margin-left: 20px;
    margin-right: 20px;
    padding: 32px 16px;
    border-radius: 16px;
  }

  .onestop__flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .flow-item {
    width: 100%;
    min-width: 0;
  }

  .flow-item__circle {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
  }

  .flow-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .section__onestop {
    margin-left: 20px;
    margin-right: 20px;
    padding: 32px 16px;
    border-radius: 16px;
  }

  .onestop__flow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .flow-item {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "icon label"
      "icon desc";
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
  }

  .flow-item__circle {
    grid-area: icon;
    width: 64px;
    height: 64px;
    margin: 0;
    justify-self: center;
    align-self: center;
  }

  .flow-item__label {
    grid-area: label;
    margin: 0;
    line-height: 1.5;
    align-self: end;
  }

  .flow-item__desc {
    grid-area: desc;
    margin: 0;
    line-height: 1.7;
    align-self: start;
  }

  .flow-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 767px) {
  .section__onestop {
    margin-left: 20px;
    margin-right: 20px;
    padding: 32px 16px;
    border-radius: 16px;
  }

  .onestop__flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .flow-item {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "icon label"
      "icon desc";
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
  }

  .flow-item {
    width: min(100%, 250px);
    margin: 0 auto;
  }

  .flow-item__circle {
    grid-area: icon;
    width: 64px;
    height: 64px;
    margin: 0;
    justify-self: center;
    align-self: center;
  }

  .flow-item__label {
    grid-area: label;
    margin: 0;
    line-height: 1.5;
    align-self: end;
  }

  .flow-item__desc {
    grid-area: desc;
    margin: 0;
    line-height: 1.7;
    align-self: start;
  }

  .flow-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}


/* =============================================
       Section
    ============================================= */
.section__compare {
  padding: 72px 60px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

/* =============================================
       タイトル
    ============================================= */
.compare__title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  color: #1a1a1a;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.compare__subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 48px;
}

/* =============================================
       テーブル
    ============================================= */
.compare__table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  font-size: 14px;
}

/* ── ヘッダー行 ── */
.compare__table thead tr th {
  padding: 14px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 比較項目ヘッダー */
.th-label {
  background: #888;
  color: var(--color-white);
  width: 200px;
  text-align: center;
}

/* 高圧ヘッダー */
.th-high {
  background: #7ec922;
  color: var(--color-white);
}

/* 低圧ヘッダー */
.th-low {
  background: var(--color-orange);
  color: var(--color-white);
}

/* ── ボディ行 ── */
.compare__table tbody tr td {
  padding: 14px 24px;
  border-bottom: 1px solid #e8e8e8;
  vertical-align: middle;
  line-height: 1.7;
}

/* 行ラベル列（左端） */
.td-label {
  background: #f5f5f5;
  font-weight: 700;
  font-size: 13px;
  color: #333;
  width: 200px;
  border-right: 1px solid #e0e0e0;
}

/* 高圧列 */
.td-high {
  background: var(--color-white);
  text-align: center;
  color: #333;
  font-size: 13px;
}

/* 低圧列 */
.td-low {
  background: #fdfff0;
  text-align: center;
  color: #333;
  font-size: 13px;
}

/* colspan（共通行） */
.td-common {
  background: var(--color-white);
  text-align: center;
  color: #555;
  font-size: 13px;
}

/* 偶数行の薄いストライプ */
.compare__table tbody tr:nth-child(even) .td-high {
  background: #f9f9f9;
}

/* ハイライトテキスト（低圧の強調） */
.highlight-orange {
  color: var(--color-orange);
  font-weight: 700;
}

.highlight-green {
  color: #5aaa00;
  font-weight: 700;
}

/* チェックマーク付き強調 */
.check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #1a1a1a;
}

.check::before {
  content: '✓';
  color: var(--color-orange);
  font-weight: 900;
  font-size: 15px;
}

.check--green::before {
  color: var(--color-green);
}

/* 太字ラベル列 */
.td-label--bold {
  font-weight: 900;
}

/* =============================================
       注記
    ============================================= */
.compare__note {
  font-size: 12px;
  color: #666;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

@media screen and (max-width: 1024px) {
  .section__compare {
    padding: 56px 32px 64px;
  }

  .compare__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare__table {
    min-width: 860px;
  }
}

@media screen and (max-width: 767px) {
  .section__compare {
    padding: 44px 20px 52px;
  }

  .compare__table-wrap {
    margin-top: 20px;
  }

  .compare__table {
    min-width: 760px;
  }

  .compare__table th,
  .compare__table td {
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
  }
}

/* =============================================
       Section
    ============================================= */
.section__choose {
  width: 100%;
  background: var(--color-white);
  padding: 72px 60px 80px;
}

.section__choose__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* =============================================
       吹き出しタイトル
    ============================================= */
.choose__balloon {
  position: relative;
  background: #e8e8f0;
  border-radius: 40px;
  padding: 16px 48px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 0;
}

/* 下向き三角 */
.choose__balloon::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 20px solid #e8e8f0;
}

/* =============================================
       2カラムカード
    ============================================= */
.choose__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  margin-top: 56px;
  margin-bottom: 40px;
}

.choose-card {
  border-radius: 16px;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 高圧カード */
.choose-card--high {
  background: #f4fde0;
  border: 2px solid #7ec922;
}

/* 低圧カード */
.choose-card--low {
  background: #fff5ee;
  border: 2px solid var(--color-orange);
}

/* カードタイトル */
.choose-card__title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  text-align: center;
}

.choose-card__lead {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-align: center;
  letter-spacing: 0.03em;
  margin-top: -10px;
}

/* リストボックス */
.choose-card__list-box {
  background: var(--color-white);
  border-radius: 10px;
  padding: 24px 28px;
  width: 100%;
}

.choose-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choose-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* チェックマーク */
.choose-card__list li::before {
  content: '✓';
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.choose-card--high .choose-card__list li::before {
  color: #7ec922;
}

.choose-card--low .choose-card__list li::before {
  color: var(--color-orange);
}

/* =============================================
       詳しく見るボタン
    ============================================= */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 16px 36px;
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  min-width: 240px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.cta-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cta-btn--green {
  background: #c6f135;
  color: #1a1a1a;
}

.cta-btn--orange {
  background: var(--color-orange);
  color: var(--color-white);
}

.cta-btn__arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-btn--green .cta-btn__arrow {
  background: #1a1a1a;
}

.cta-btn--orange .cta-btn__arrow {
  background: var(--color-white);
}

.cta-btn__arrow svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-btn--green .cta-btn__arrow svg {
  stroke: var(--color-white);
}

.cta-btn--orange .cta-btn__arrow svg {
  stroke: var(--color-orange);
}

.cta-btn:hover .cta-btn__arrow svg {
  transform: translateX(5px);
}

/* =============================================
       下部の問い合わせボタン
    ============================================= */
.choose__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 20px 44px;
  background: #1a1a1a;
  color: var(--color-white);
  border: none;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  min-width: 480px;
  transition: background 0.25s ease, transform 0.2s ease;
}

.choose__contact-btn:hover {
  background: #333;
  transform: translateY(-1px);
}

.choose__contact-btn__arrow {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.choose__contact-btn__arrow svg {
  stroke: #1a1a1a;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.choose__contact-btn:hover .choose__contact-btn__arrow svg {
  transform: translateX(5px);
}

@media screen and (max-width: 1024px) {
  .section__choose {
    padding: 56px 32px 64px;
  }

  .choose__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .choose__balloon {
    max-width: 100%;
    text-align: center;
  }

  .choose-card--high,
  .choose-card--low {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .section__choose {
    padding: 44px 20px 52px;
  }

  .choose__cards {
    gap: 18px;
  }

  .choose__balloon {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
  }

  .choose-card--high,
  .choose-card--low {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .choose-card--high h3,
  .choose-card--low h3 {
    font-size: 20px;
    line-height: 1.5;
  }

  .choose-card--high p,
  .choose-card--low p {
    font-size: 14px;
    line-height: 1.85;
  }

  .choose__contact-btn {
    min-width: 370px;
    font-size: 13px;
  }
}

/* ==============================================
Blog
============================================== */
.blog__lowerPage {
  max-width: 775px;
  margin: 0 auto;
}

.blog__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 60px;
}

.blog__pagination-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-text);
  text-decoration: none;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: var(--color-text);
  transition: background-color var(--transition) ease, color var(--transition) ease;
}

.blog__pagination-prev,
.blog__pagination-next {
  width: auto;
  padding: 0 30px;
}

.blog__pagination-link:hover {
  background-color: rgba(var(--color-text-rgb), 0.05);
}

/* ==============================================
POST PAGE
============================================== */

.post__inner {
  margin: 0 auto;
  width: 80%;
  text-align: center;
}

.post__contents {
  position: absolute;
  display: inline-block;
  color: var(--color-white);
  top: 38%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 80%;
  text-align: left;
  z-index: 2;
}

.post__contents h2 {
  font-size: 28px;
  color: var(--color-white);
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5em;
}

.post__meta {
  color: var(--color-white);
  font-size: 16px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-top: 10px;
}

.post__thumbnail img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.post__content {
  margin-top: 60px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .post__inner {
    width: 100%;
  }

  .post__thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .post__content {
    margin-top: 30px;
  }

  .post__meta {
    font-size: 14px;
  }

  .post__contents h2 {
    font-size: 18px;
  }
}

@media screen and (max-width: 1024px) {
  .post__inner {
    width: min(100%, 92%);
  }

  .post__contents {
    width: min(100%, 92%);
    top: 32%;
  }

  .post__thumbnail img {
    height: 380px;
  }

  .post__content {
    margin-top: 48px;
  }
}

@media screen and (max-width: 767px) {
  .post__inner {
    width: calc(100% - 32px);
  }

  .post__contents {
    position: static;
    width: 100%;
    margin-top: 20px;
    color: var(--color-text);
    text-align: left;
  }

  .post__thumbnail img {
    height: 220px;
    border-radius: 12px;
  }

  .post__content {
    margin-top: 28px;
  }
}

/* ==============================================
エラー404
============================================== */

.error404 {
  margin-bottom: -150px;
}

.error404__bg {
  position: relative;
}

.error404 img {
  width: 100%;
  height: 100svh;
  object-fit: cover;
}

.error404 {
  height: 100svh;
}

.error404__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-white);
  z-index: 2;
}

.error404__code {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.error404__title {
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

.error404__message {
  margin-top: 50px;
}

@media screen and (max-width: 768px) {
  .error404 {
    margin-bottom: -60px;
  }

  .error404__code {
    font-size: 80px;
  }

  .error404__title {
    font-size: 14px;
  }

  .error404__message {
    margin-top: 30px;
  }
}

.sp-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sp-scrim--active {
  display: block;
  opacity: 1;
}

/* =============================================
       ローダー本体
    ============================================= */
#loader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #222222;
  /* ← ここだけ変更 */
}

/* ── ノイズテクスチャ ── */
#loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

/* =============================================
       バッテリー本体
    ============================================= */
.battery-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.battery {
  position: relative;
  width: 80px;
  height: 140px;
}

/* バッテリー端子（上） */
.battery__terminal {
  width: 28px;
  height: 10px;
  background: #333;
  border-radius: 4px 4px 0 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* バッテリー外枠 */
.battery__body {
  width: 80px;
  height: 130px;
  border: 3px solid #444;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
}

/* 充電ゲージ（下から伸びる） */
.battery__fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--lime) 0%, var(--green) 100%);
  border-radius: 0 0 5px 5px;
  animation: batteryCharge 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes batteryCharge {
  0% {
    height: 0%;
  }

  20% {
    height: 25%;
  }

  50% {
    height: 60%;
  }

  80% {
    height: 85%;
  }

  100% {
    height: 100%;
  }
}

/* 充電中のパルス光 */
.battery__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(206, 255, 26, 0.3) 0%,
      transparent 60%);
  animation: glowPulse 1.2s ease-in-out infinite;
  animation-delay: 0.3s;
  opacity: 0;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}



/* =============================================
       パーセント数字
    ============================================= */
.loader__percent {
  font-family: 'Poppins', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: -0.02em;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(206, 255, 26, 0.5));
  position: relative;
  z-index: 1;
}

.loader__percent span {
  font-size: 28px;
  font-weight: 700;
  opacity: 0.7;
}

/* =============================================
       ロゴ・テキスト
    ============================================= */
.loader__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  margin-top: -16px;
}

/* =============================================
       プログレスバー（下部）
    ============================================= */
.loader__bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #1e1e1e;
  z-index: 1;
}

.loader__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--lime), var(--orange));
  background-size: 200% 100%;
  animation:
    barProgress 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    barShimmer 1.2s linear infinite;
  animation-delay: 0.3s, 0.3s;
}

@keyframes barProgress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes barShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* =============================================
       背景の放射光
    ============================================= */
.loader__radial {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(132, 207, 11, 0.08) 0%,
      transparent 70%);
  animation: radialPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes radialPulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* =============================================
       パーティクル（飛び散る粒子）
    ============================================= */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  animation: particleFly 2.4s ease-out forwards;
  z-index: 0;
}

@keyframes particleFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: var(--tx) scale(0);
  }
}

/* =============================================
       フェードアウト（ロード完了後）
    ============================================= */
#loader.is-done {
  animation: loaderFadeOut 0.6s ease forwards;
  pointer-events: none;
}

@keyframes loaderFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* =============================================
       Page Wrapper
    ============================================= */
.page-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* =============================================
       ① 会員限定バナー
    ============================================= */
.page-wrap.mb {
  padding: 0 24px;
  margin-top: 50px;
}

.member-banner {
  background: var(--color-orange);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  border-radius: 10px;
}

.member-banner__text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.member-banner__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.member-banner__icon svg {
  vertical-align: middle;
}

.member-banner__btn {
  background: #fff;
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: opacity .2s;
}

.member-banner__btn:hover {
  opacity: .85;
}

@media screen and (max-width: 1024px) {
  .member-banner {
    padding: 14px 18px;
    gap: 12px;
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .member-banner {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    margin-bottom: 18px;
  }

  .member-banner * {
    text-align: left;
  }

  .member-banner__text {
    display: block;
  }
}

/* =============================================
       ② 絞り込み検索
    ============================================= */
.search-box {
  background: var(--color-white);
  border-radius: 12px;
  padding: 24px 28px 28px;
  margin-bottom: 28px;
}

.search-box__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-glay);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.search-box__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap: 12px;
  align-items: end;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-field__label {
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
}

.search-field select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 32px 10px 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  width: 100%;
}

.search-field select:focus {
  outline: none;
  border-color: var(--color-orange);
}

.btn-search {
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.04em;
  transition: filter .2s;
  height: 46px;
}

.btn-search:hover {
  filter: brightness(1.05);
}

.btn-reset {
  background: var(--color-white);
  color: var(--color-glay);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.04em;
  transition: border-color .2s;
  height: 46px;
}

.btn-reset:hover {
  border-color: #aaa;
}

@media screen and (max-width: 1024px) {
  .search-box {
    padding: 22px 20px 24px;
    margin-bottom: 24px;
  }

  .search-box__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .search-box__label {
    margin-bottom: 12px;
  }

  .search-field {
    gap: 5px;
  }

  .btn-search,
  .btn-reset {
    width: 100%;
    padding: 12px 16px;
  }
}

@media screen and (max-width: 767px) {
  .search-box {
    padding: 18px 16px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
  }

  .search-box__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .search-box__label {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .search-field__label {
    font-size: 12px;
  }

  .btn-search,
  .btn-reset {
    width: 100%;
    height: 44px;
    font-size: 14px;
  }
}


/* =============================================
       ③ 件数 & ソート
    ============================================= */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.list-header__count {
  font-size: 14px;
  color: var(--color-glay);
  letter-spacing: 0.03em;
}

.list-header__count strong {
  color: var(--color-text);
  font-weight: 700;
}

.list-header__sort select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 36px 8px 14px;
  font-size: 13px;
  color: var(--color-text);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .list-header {
    gap: 12px;
    margin-bottom: 18px;
  }
}

@media screen and (max-width: 767px) {
  .list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .list-header__count,
  .list-header__sort {
    width: 100%;
  }

  .list-header__count {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* =============================================
       ④ カードグリッド
    ============================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

@media screen and (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
  }
}

@media screen and (max-width: 767px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }
}


/* ── 通常カード ── */
.prop-card {
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
  cursor: pointer;
}

.prop-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}

/* サムネイル */
.prop-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #ccc;
}

.prop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* バッジ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--low {
  background: var(--color-orange);
  color: #fff;
}

.badge--high {
  background: var(--color-green);
  color: #fff;
}

.prop-card__thumb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.prop-card__thumb-new {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

/* 受付状況 */
.prop-card__status {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* カード本文 */
.prop-card__body {
  padding: 16px 16px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prop-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.prop-card__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-glay);
}

.prop-card__location::before {
  content: '📍';
  font-size: 11px;
}

/* スタッツグリッド */
.prop-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat-box {
  background: var(--color-bg);
  border-radius: 6px;
  padding: 8px 12px;
}

.stat-box__label {
  font-size: 10px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.stat-box__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.stat-box__value--orange {
  color: var(--color-orange);
}

.stat-box__unit {
  font-size: 11px;
  font-weight: 400;
}

/* カードフッター（価格＋矢印） */
.prop-card__footer {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.prop-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.prop-card__price strong {
  font-size: 20px;
}

.prop-card__price-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-glay);
}

.prop-card__arrow {
  color: var(--color-orange);
  font-size: 18px;
  transition: transform .2s;
}

.prop-card:hover .prop-card__arrow {
  transform: translateX(4px);
}

/* ── 会員限定カード ── */
.prop-card--locked .prop-card__thumb {
  position: relative;
}

.prop-card--locked .locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, .65);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.locked-overlay__icon {
  font-size: 36px;
  color: #fff;
  opacity: .9;
}

.locked-overlay__btn {
  background: var(--color-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

/* ぼかしテキスト */
.blurred {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  color: transparent;
  background: #bbb;
  border-radius: 4px;
}

.blurred-value {
  filter: blur(4px);
  user-select: none;
}

@media screen and (max-width: 1024px) {
  .prop-card__body {
    padding: 14px 14px 0;
    gap: 8px;
  }

  .prop-card__name {
    font-size: 16px;
    line-height: 1.5;
  }

  .prop-card__location {
    font-size: 13px;
    line-height: 1.6;
  }

  .prop-card__stats {
    gap: 8px;
  }

  .stat-box {
    padding: 8px 10px;
  }

  .prop-card__footer {
    padding: 12px 14px;
  }
}

@media screen and (max-width: 767px) {
  .prop-card {
    border-radius: 10px;
  }

  .prop-card__thumb {
    aspect-ratio: 16 / 10;
  }

  .prop-card__body {
    padding: 14px 14px 0;
    gap: 8px;
  }

  .prop-card__thumb-badge,
  .prop-card__thumb-new,
  .prop-card__status {
    font-size: 11px;
  }

  .prop-card__name {
    font-size: 15px;
    line-height: 1.5;
  }

  .prop-card__location {
    font-size: 12px;
    line-height: 1.6;
  }

  .prop-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stat-box {
    padding: 8px 10px;
  }

  .stat-box__label {
    font-size: 11px;
  }

  .stat-box__value {
    font-size: 18px;
    line-height: 1.2;
  }

  .prop-card__footer {
    padding: 12px 14px;
    gap: 10px;
  }

  .prop-card__price {
    font-size: 18px;
    line-height: 1.3;
  }

  .prop-card__price-note {
    font-size: 11px;
  }

  .prop-card__arrow {
    flex-shrink: 0;
  }
}

@media screen and (max-width: 767px) {
  .prop-card--locked .locked-overlay {
    padding: 16px 12px;
  }

  .locked-overlay__btn {
    width: 100%;
    max-width: 160px;
    margin: 10px auto 0;
    text-align: center;
  }
}

/* =============================================
       ⑤ もっと見るバナー
    ============================================= */
.more-banner {
  background: var(--color-white);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.more-banner__left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.more-banner__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.more-banner__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.more-banner__title strong {
  color: var(--color-orange);
}

.more-banner__desc {
  font-size: 12px;
  color: var(--color-glay);
  letter-spacing: 0.03em;
  line-height: 1.7;
}

.more-banner__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.more-banner__btn {
  background: var(--color-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: filter .2s;
}

.more-banner__btn:hover {
  filter: brightness(1.08);
}

.more-banner__login {
  font-size: 12px;
  color: var(--color-glay);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media screen and (max-width: 1024px) {
  .more-banner {
    padding: 20px;
    gap: 16px;
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 767px) {
  .more-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 14px;
    margin-bottom: 28px;
  }

  .more-banner__left,
  .more-banner__right {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .more-banner__title,
  .more-banner__desc {
    text-align: left;
  }

  .more-banner__btn,
  .more-banner__login {
    width: 70%;
    justify-content: center;
  }
}

/* =============================================
       ⑥ ページネーション
    ============================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.page-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-glay);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}

.page-btn:hover {
  border-color: var(--color-lime);
  color: var(--color-text);
}

.page-btn--active {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-text);
  font-weight: 900;
}

.page-btn--arrow {
  border-color: var(--color-border);
  color: var(--color-glay);
}

.page-dots {
  font-size: 13px;
  color: var(--color-glay);
  padding: 0 4px;
}

@media screen and (max-width: 767px) {
  .pagination {
    gap: 6px;
    flex-wrap: wrap;
  }

  .page-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .page-dots {
    font-size: 12px;
  }
}

/* =============================================
       物件情報詳細ページ detail
    ============================================= */
.page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px 80px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-glay);
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--color-glay);
}

.breadcrumb a:hover {
  color: var(--color-text);
}

.breadcrumb__sep {
  color: #bbb;
}

.breadcrumb__current {
  color: var(--color-orange);
}

/* 2カラム */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

@media screen and (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media screen and (max-width: 767px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =============================================
       LEFT COLUMN
    ============================================= */
.detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media screen and (max-width: 1024px) {
  .detail-main {
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 767px) {
  .detail-main {
    width: 100%;
    min-width: 0;
  }
}

/* ── ヒーローカルーセル ── */
.hero-wrap {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #111;
}

/* カルーセルトラック */
.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.hero-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* バッジ（画像の上に重ねる） */
.carousel__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* 左右矢印ボタン */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(4px);
}

.carousel__btn:hover {
  background: rgba(255, 255, 255, 1);
}

.carousel__btn--prev {
  left: 12px;
}

.carousel__btn--next {
  right: 12px;
}

/* サムネイル（画像下中央） */
.carousel__thumbs {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.carousel__thumb {
  width: 60px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
  flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
  .hero-wrap {
    border-radius: 12px;
  }

  .carousel__thumbs {
    gap: 8px;
    margin-top: 10px;
  }
}

@media screen and (max-width: 767px) {
  .hero-wrap {
    border-radius: 10px;
  }

  .carousel__track img,
  .carousel img {
    width: 100%;
    height: auto;
    display: block;
  }

  .carousel__badges {
    gap: 6px;
    flex-wrap: wrap;
  }

  .carousel__thumbs {
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .carousel__thumbs img {
    flex-shrink: 0;
  }
}

.carousel__thumb:hover {
  opacity: 0.9;
}

.carousel__thumb.is-active {
  opacity: 1;
  border-color: var(--color-lime);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge--low {
  background: var(--color-orange);
  color: #fff;
}

.badge--status {
  background: var(--color-green);
  color: #fff;
}

.badge--new {
  background: #e53935;
  color: #fff;
}

/* ── タイトルエリア ── */
.prop-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prop-number {
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.06em;
}

.prop-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.prop-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--color-glay);
}

.prop-location svg {
  flex-shrink: 0;
}

/* タグ */
.prop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tag {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
}

/* ── ステータスボックス群 ── */
.stat-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-box {
  background: var(--color-bg);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.12),
    -4px -4px 10px rgba(255, 255, 255, 0.8);
}

.stat-box__label {
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
}

.stat-box__value {
  font-size: 24px;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stat-box__value .unit {
  font-size: 14px;
  font-weight: 500;
}

.stat-box__value--orange {
  color: var(--color-orange);
}

.stat-box__note {
  font-size: 10px;
  color: var(--color-glay);
  letter-spacing: 0.03em;
}

@media screen and (max-width: 1024px) {
  .stat-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media screen and (max-width: 767px) {
  .stat-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stat-box {
    padding: 10px 10px;
  }

  .stat-box__label {
    font-size: 11px;
  }

  .stat-box__value {
    font-size: 18px;
    line-height: 1.2;
  }
}

/* ── セクションカード ── */
.section-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 28px 32px;
}

.section-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.section-card__num {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-card__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* テーブル */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table tr {
  border-bottom: 1px solid var(--color-border);
}

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

.info-table th {
  width: 160px;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-glay);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.info-table td {
  padding: 14px 0 14px 16px;
  font-size: 13px;
  color: var(--color-text);
  vertical-align: top;
}

.td-green {
  color: var(--color-green);
  font-weight: 700;
}

.td-orange {
  color: var(--color-orange);
  font-weight: 700;
}

.td-link {
  color: var(--color-green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 注記 */
.section-note {
  background: #f8fde8;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--color-glay);
  line-height: 1.8;
  margin-top: 16px;
}

@media screen and (max-width: 1024px) {
  .section-card {
    padding: 24px 20px;
  }
}

@media screen and (max-width: 767px) {
  .section-card {
    padding: 18px 14px;
    border-radius: 12px;
  }

  .section-card__header {
    gap: 10px;
    margin-bottom: 14px;
  }

  .section-card__header h2,
  .section-card__header h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .info-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .info-table th,
  .info-table td {
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
  }
}

/* ── 会員バナー ── */
.member-cta {
  background: var(--color-white);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.member-cta__left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.member-cta__text-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-orange);
  margin-bottom: 4px;
}

.member-cta__text-desc {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.7;
}

.member-cta__btn {
  background: var(--color-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter .2s;
}

.member-cta__btn:hover {
  filter: brightness(1.08);
}

@media screen and (max-width: 1024px) {
  .member-cta {
    gap: 20px;
    padding: 24px 20px;
  }
}

@media screen and (max-width: 767px) {
  .member-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 14px;
    border-radius: 12px;
  }

  .member-cta .btn,
  .member-cta .btn--fill,
  .member-cta .btn--outline {
    width: 100%;
    justify-content: center;
  }

  .member-cta__btn {
    text-align: center;
  }
}

/* =============================================
       RIGHT SIDEBAR
    ============================================= */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 96px;
}

@media screen and (max-width: 1024px) {
  .detail-sidebar {
    position: static;
    top: auto;
    gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  .detail-sidebar {
    position: static;
    top: auto;
    gap: 14px;
  }
}

/* ── お問い合わせカード ── */
.sidebar-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 24px;
}

.sidebar-card__eyebrow {
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.sidebar-card__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
}

.sidebar-card__desc {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* 受付状況バッジ */
.prop-tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media screen and (max-width: 1024px) {
  .prop-tags {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media screen and (max-width: 767px) {
  .prop-tags {
    flex-wrap: wrap;
    gap: 6px;
  }

  .prop-tags>* {
    font-size: 11px;
    line-height: 1.5;
  }
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-glay);
  background: var(--color-bg);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}

/* CTAボタン */
.btn-cta-full {
  display: block;
  width: 100%;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 900;
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  transition: filter .2s;
}

.btn-cta-full:hover {
  filter: brightness(1.06);
}

.btn-download {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--color-glay);
  padding: 8px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border);
  transition: border-color .2s;
}

.btn-download:hover {
  border-color: #aaa;
}

/* ── 物件サマリー ── */
.sidebar-card--summary {
  background: #F9FFE4;
}

.summary-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
}

.summary-table tr {
  border-bottom: 1px solid var(--color-border);
}

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

.summary-table th {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-glay);
  text-align: left;
  width: 45%;
}

.summary-table td {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  color: var(--color-text);
}

.summary-table .td-lime {
  color: var(--color-lime);
  font-weight: 900;
  font-size: 14px;
}

.summary-table .td-green {
  color: var(--color-green);
  font-weight: 700;
}

.summary-table .td-orange {
  color: var(--color-orange);
  font-weight: 700;
}

/* ── 関連物件 ── */
.related-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e1e1e;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: opacity .2s;
}

.related-item:hover {
  opacity: .85;
}

.related-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.related-info {
  flex: 1;
  min-width: 0;
}

.related-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

@media screen and (max-width: 767px) {
  .sidebar-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .btn-cta-full,
  .btn-download {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }

  .related-item {
    padding: 12px 14px;
  }

  .related-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* ── 収益シミュレーション ── */
.sim-card {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 20px;
}

.sim-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-lime);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.sim-table {
  width: 100%;
  border-collapse: collapse;
}

.sim-table tr {
  border-bottom: 1px solid #2e2e2e;
}

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

.sim-table th {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  text-align: left;
}

.sim-table td {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: #fff;
}

.sim-table .td-lime {
  color: var(--color-lime);
  font-size: 16px;
}

.sim-table .td-orange {
  color: var(--color-orange);
  font-size: 16px;
}

.sim-note {
  font-size: 10px;
  color: #555;
  line-height: 1.8;
  margin-top: 12px;
}

@media screen and (max-width: 1024px) {
  .sim-card {
    padding: 20px;
  }
}

@media screen and (max-width: 767px) {
  .sim-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .sim-table th,
  .sim-table td {
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 0;
  }
}

/* ==============================================
  会員登録バナー（物件詳細ページ下部）
============================================== */
.member-register-wrap {
  width: 100%;
}

/* 緑グラデーションバナー */
.member-register-banner {
  background: linear-gradient(135deg, #d8f56e 0%, #7ee82a 50%, #3dd100 100%);
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-radius: 20px;
}

.member-register-banner__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-register-banner__title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
}

.member-register-banner__desc {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* チェックリスト */
.member-register-banner__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin-top: 4px;
}

.member-register-banner__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.member-register-banner__list li svg {
  flex-shrink: 0;
}

/* 右側ボタン群 */
.member-register-banner__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.member-register-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 900;
  padding: 16px 32px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 220px;
  transition: filter 0.2s ease;
}

.member-register-banner__btn:hover {
  filter: brightness(0.96);
}

.member-register-banner__login {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}

.member-register-banner__login:hover {
  opacity: 0.7;
}

/* 免責注記 */
.member-register-disclaimer {
  padding: 20px 60px;
  font-size: 12px;
  color: #666;
  line-height: 1.9;
  letter-spacing: 0.03em;
  border-top: 1px solid #e8e8e8;
}

@media screen and (max-width: 768px) {
  .member-register-banner {
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
  }

  .member-register-banner__right {
    width: 100%;
  }

  .member-register-banner__btn {
    width: 100%;
  }

  .member-register-disclaimer {
    padding: 16px 24px;
  }
}

/* ==============================================
  ニュース一覧ページ (news-list.html)
============================================== */

.news-list-wrap {
  max-width: 860px;
  margin: 40px auto;
  padding: 30px 24px;
  background: var(--color-white);
  border-radius: 20px;
}

/* =============================================
   カテゴリタブ
============================================= */
.news-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.news-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-glay);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}

.news-tab:hover {
  border-color: #aaa;
  color: var(--color-text);
}

.news-tab--active {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-text);
  font-weight: 700;
}

.news-tab--member {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.news-tab--member:hover {
  background: rgba(255, 109, 0, 0.06);
  color: var(--color-orange);
  border-color: var(--color-orange);
}

/* =============================================
   件数＆ソート
============================================= */
.news-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.news-list-header__count {
  font-size: 13px;
  color: var(--color-glay);
  letter-spacing: 0.03em;
}

.news-list-header__count strong {
  color: var(--color-text);
  font-weight: 700;
}

.news-list-header__sort select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 7px 30px 7px 12px;
  font-size: 13px;
  color: var(--color-text);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
}

/* =============================================
   記事リスト
============================================= */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
}

.news-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.news-item:first-child {
  border-top: 1px solid var(--color-border);
}

.news-item:hover {
  opacity: 0.8;
}

/* サムネイル */
.news-item__thumb {
  width: 160px;
  height: 108px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #d0d0d8;
  position: relative;
}

.news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ロックサムネイル */
.news-item__thumb--locked {
  background: #888;
}

/* ぼかし画像 */
.news-item__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(6px);
  transform: scale(1.05);
  /* blur端の白抜けを防ぐ */
}

.news-item__thumb-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.news-item__thumb-lock span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
}

/* 本文 */
.news-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-item__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* タグ */
.news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news-tag--notice {
  background: #e8f4ff;
  color: #1565c0;
}

.news-tag--column {
  background: #e8f5e9;
  color: #2e7d32;
}

.news-tag--market {
  background: #fff3e0;
  color: #e65100;
}

.news-tag--invest {
  background: #f3e5f5;
  color: #6a1b9a;
}

.news-tag--member-only {
  background: rgba(255, 109, 0, 0.12);
  color: var(--color-orange);
  border: 1px solid rgba(255, 109, 0, 0.3);
}

.news-item__date {
  font-size: 12px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
}

.news-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.news-item__excerpt {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.8;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================
   会員限定バナー（リスト中間）
============================================= */
.news-member-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff5ee;
  border: 1.5px solid rgba(255, 109, 0, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 28px;
}

.news-member-banner__left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.news-member-banner__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.news-member-banner__link {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-member-banner__desc {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.news-member-banner__btn {
  background: var(--color-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.2s;
  text-decoration: none;
}

.news-member-banner__btn:hover {
  filter: brightness(1.08);
}

/* =============================================
   ページネーション（既存と共用）
============================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
}

.page-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-glay);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.page-btn:hover {
  border-color: var(--color-lime);
  color: var(--color-text);
}

.page-btn--active {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-text);
  font-weight: 900;
}

.page-dots {
  font-size: 13px;
  color: var(--color-glay);
  padding: 0 4px;
}

/* =============================================
   下部バナー（緑グラデーション）
============================================= */
.news-bottom-banner {
  background: linear-gradient(135deg, #d8f56e 0%, #7ee82a 55%, #3dd100 100%);
  border-radius: 16px;
  padding: 40px 48px;
}

.news-bottom-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.news-bottom-banner__title {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.news-bottom-banner__desc {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.news-bottom-banner__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.news-bottom-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 14px 28px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s;
}

.news-bottom-banner__btn:hover {
  background: #333;
}

.news-bottom-banner__login {
  font-size: 12px;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.news-bottom-banner__login:hover {
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .news-bottom-banner {
    padding: 32px 28px;
    border-radius: 14px;
  }

  .news-bottom-banner__inner {
    gap: 24px;
  }

  .news-bottom-banner__title {
    font-size: 18px;
    line-height: 1.5;
  }

  .news-bottom-banner__desc {
    font-size: 13px;
    line-height: 1.8;
  }

  .news-bottom-banner__right {
    align-items: flex-end;
  }

  .news-bottom-banner__btn {
    padding: 13px 22px;
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .news-bottom-banner {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .news-bottom-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .news-bottom-banner__left,
  .news-bottom-banner__right {
    width: 100%;
  }

  .news-bottom-banner__title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .news-bottom-banner__desc {
    font-size: 12px;
    line-height: 1.8;
  }

  .news-bottom-banner__desc br {
    display: none;
  }

  .news-bottom-banner__right {
    align-items: stretch;
    gap: 10px;
  }

  .news-bottom-banner__btn {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
  }

  .news-bottom-banner__login {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.6;
  }
}


/* ==============================================
  ニュース詳細ページ (news-detail.html)
============================================== */

.news-detail-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* 2カラムレイアウト */
.news-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}


/* =============================================
   記事本文
============================================= */
.news-detail-main {
  min-width: 0;
}

.news-detail__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.news-detail__date {
  font-size: 12px;
  color: var(--color-glay);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.news-detail__title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

/* アイキャッチ */
.news-detail__eyecatch {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #ccc;
  margin-bottom: 28px;
  aspect-ratio: 16 / 9;
}

.news-detail__eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* リード文 */
.news-detail__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-bottom: 32px;
}

.news-detail__lead strong {
  font-weight: 700;
}

/* セクション */
.news-detail__section {
  margin-bottom: 36px;
}

/* h2 */
.news-detail__h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 14px 18px;
  border-left: 4px solid var(--color-lime);
  background: var(--color-white);
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}

/* h3（緑テキスト） */
.news-detail__h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* 本文 */
.news-detail__body {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.news-detail__body strong {
  font-weight: 700;
}

/* リンク */
.news-detail__link {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* リスト */
.news-detail__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.news-detail__list li {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.03em;
  padding-left: 18px;
  position: relative;
}

.news-detail__list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-green);
  font-weight: 700;
}

/* ポイントボックス */
.news-detail__point {
  background: #f0fad4;
  border-left: 3px solid var(--color-green);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin-top: 14px;
}

.news-detail__point p {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* 注記ボックス */
.news-detail__note {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 14px;
}

.news-detail__note p {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
  .news-detail-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .news-detail-sidebar {
    position: static;
    top: auto;
    gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .news-detail-sidebar {
    position: static;
    top: auto;
    gap: 14px;
  }

  .news-detail-main,
  .news-detail-sidebar {
    width: 100%;
    min-width: 0;
  }
}


/* =============================================
   著者プロフィール
============================================= */
.news-detail__author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #1e1e1e;
  border-radius: 12px;
  padding: 24px;
  margin-top: 40px;
  margin-bottom: 32px;
}

.news-detail__author-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #333;
  overflow: hidden;
  flex-shrink: 0;
}

.news-detail__author-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-detail__author-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-detail__author-eyebrow {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.06em;
}

.news-detail__author-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

.news-detail__author-desc {
  font-size: 12px;
  color: #999;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* =============================================
   一覧へ戻るボタン
============================================= */
.news-detail__back-wrap {
  display: flex;
  justify-content: center;
}

.news-detail__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 100px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s;
}

.news-detail__back-btn:hover {
  background: #333;
}

/* =============================================
   サイドバー共通カード
============================================= */
.news-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 96px;
}

.news-sidebar-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 20px;
}

.news-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* カテゴリリスト */
.news-sidebar__category-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.news-sidebar__category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color 0.2s;
  letter-spacing: 0.02em;
}

.news-sidebar__category-list li:last-child .news-sidebar__category-item {
  border-bottom: none;
}

.news-sidebar__category-item:hover {
  color: var(--color-green);
}

.news-sidebar__category-item--member {
  color: var(--color-orange);
}

.news-sidebar__category-count {
  background: var(--color-bg);
  color: var(--color-glay);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.news-sidebar__category-count--orange {
  background: var(--color-orange);
  color: #fff;
}

/* =============================================
   会員登録CTAカード（ダーク）
============================================= */
.news-sidebar-cta {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.news-sidebar-cta__title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

.news-sidebar-cta__link {
  color: var(--color-lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-sidebar-cta__desc {
  font-size: 12px;
  color: #888;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.news-sidebar-cta__btn {
  display: block;
  width: 100%;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 900;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: filter 0.2s;
  margin-top: 4px;
}

.news-sidebar-cta__btn:hover {
  filter: brightness(1.06);
}

.news-sidebar-cta__login {
  font-size: 12px;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.news-sidebar-cta__login:hover {
  color: #aaa;
}

/* =============================================
   関連記事
============================================= */
.news-sidebar__related-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.news-sidebar__related-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-sidebar__related-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.news-sidebar__related-list .news-sidebar__related-item:last-child {
  border-bottom: none;
}

.news-sidebar__related-item:hover {
  opacity: 0.75;
}

.news-sidebar__related-thumb {
  width: 64px;
  height: 44px;
  border-radius: 5px;
  overflow: hidden;
  background: #ccc;
  flex-shrink: 0;
}

.news-sidebar__related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-sidebar__related-date {
  font-size: 11px;
  color: var(--color-glay);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.news-sidebar__related-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-wrap-detail {
  margin-top: 40px;
}

@media screen and (max-width: 1024px) {
  .page-wrap.page-wrap-detail {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 767px) {
  .page-wrap-detail {
    margin-top: 5px;
  }

  .page-wrap.page-wrap-detail {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 1024px) {
  .news-detail__tags {
    flex-wrap: wrap;
    gap: 8px;
  }

  .news-detail__title {
    font-size: 32px;
    line-height: 1.45;
  }

  .news-detail__date {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .news-detail__tags {
    flex-wrap: wrap;
    gap: 6px;
  }

  .news-tag {
    font-size: 11px;
    padding: 6px 10px;
  }

  .news-detail__date {
    font-size: 12px;
    line-height: 1.6;
  }

  .news-detail__title {
    font-size: 24px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 1024px) {
  .news-detail__section {
    margin-top: 40px;
  }

  .news-detail__h2 {
    font-size: 24px;
    line-height: 1.5;
  }

  .news-detail__h3 {
    font-size: 18px;
    line-height: 1.6;
  }

  .news-detail__body,
  .news-detail__list li {
    font-size: 15px;
    line-height: 2;
  }
}

@media screen and (max-width: 767px) {
  .news-detail__section {
    margin-top: 32px;
  }

  .news-detail__h2 {
    font-size: 20px;
    line-height: 1.55;
  }

  .news-detail__h3 {
    font-size: 17px;
    line-height: 1.6;
  }

  .news-detail__body,
  .news-detail__list li {
    font-size: 14px;
    line-height: 1.9;
  }

  .news-detail__list {
    padding-left: 1.2em;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-main img {
    max-width: 100%;
    height: auto;
  }

  .news-detail-main table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .news-detail-main iframe {
    max-width: 100%;
  }
}

@media screen and (max-width: 1024px) {

  .news-detail__point,
  .news-detail__note {
    padding: 18px 20px;
  }
}

@media screen and (max-width: 767px) {

  .news-detail__point,
  .news-detail__note {
    padding: 16px 14px;
    border-radius: 10px;
  }
}

@media screen and (max-width: 767px) {
  .news-detail__author {
    padding: 16px 14px;
  }

  .news-detail__author-name {
    font-size: 15px;
  }

  .news-detail__author-desc {
    font-size: 13px;
    line-height: 1.8;
  }
}

@media screen and (max-width: 767px) {
  .news-detail__back-wrap {
    margin-top: 28px;
  }

  .news-detail__back-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 1024px) {
  .news-sidebar-cta {
    padding: 20px;
  }
}

@media screen and (max-width: 767px) {
  .news-sidebar-cta {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .news-sidebar-cta a,
  .news-sidebar-cta .cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .news-sidebar__related-list {
    gap: 12px;
  }

  .news-sidebar__related-item {
    padding: 12px 0;
  }
}


/* ==============================================
  お問い合わせページ (contact.html)
============================================== */

.contact-page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.contact-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

/* =============================================
   カード共通
============================================= */
.contact-card.base {
  background: var(--color-white);
  border-radius: 16px;
  padding: 32px 32px 36px;
  margin-bottom: 20px;
  align-items: baseline;
}

.contact-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.contact-card__num {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* =============================================
   種別選択
============================================= */
.contact-type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.contact-type-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.contact-type-item input[type="radio"] {
  display: none;
}

/* カスタムラジオボタン */
.contact-type-item__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}

.contact-type-item__radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-orange);
  opacity: 0;
  transition: opacity .2s;
}

.contact-type-item--selected {
  border-color: var(--color-orange);
  background: #fff8f3;
}

.contact-type-item--selected .contact-type-item__radio {
  border-color: var(--color-orange);
}

.contact-type-item--selected .contact-type-item__radio::after {
  opacity: 1;
}

.contact-type-item:hover:not(.contact-type-item--selected) {
  border-color: #ccc;
  background: #fafafa;
}

.contact-type-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-type-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.contact-type-item__desc {
  font-size: 12px;
  color: var(--color-glay);
  letter-spacing: 0.02em;
}

/* =============================================
   フォーム
============================================= */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form__row {
  display: flex;
  gap: 16px;
}

.contact-form__row--half>.contact-form__field {
  flex: 1;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* 必須・任意バッジ */
.contact-form__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  background: var(--color-border);
  color: var(--color-glay);
}

.contact-form__badge--required {
  background: #ffece0;
  color: var(--color-orange);
}

.contact-form__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.contact-form__input:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);
}

.contact-form__input::placeholder {
  color: #bbb;
}

.contact-form__textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  resize: vertical;
  min-height: 160px;
  line-height: 1.8;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.contact-form__textarea:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255, 109, 0, .1);
}

.contact-form__textarea::placeholder {
  color: #bbb;
}

/* セレクト */
.contact-form__select-wrap {
  position: relative;
}

.contact-form__select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #888;
  pointer-events: none;
}

.contact-form__select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}

.contact-form__select:focus {
  border-color: var(--color-orange);
}

/* ヒントテキスト */
.contact-form__hint {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* プライバシーポリシー同意 */
.contact-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.contact-form__privacy-check {
  display: none;
}

.contact-form__privacy-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  background: var(--color-white);
  position: relative;
}

.contact-form__privacy-check:checked+.contact-form__privacy-custom {
  background: var(--color-lime);
  border-color: var(--color-lime);
}

.contact-form__privacy-check:checked+.contact-form__privacy-custom::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border-left: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  transform: rotate(-45deg) translate(0px, -2px);
}

.contact-form__privacy-text {
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.contact-form__privacy-link {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 送信ボタン */
.contact-form__submit {
  display: block;
  width: 100%;
  background: var(--color-lime);
  color: var(--color-text);
  border: none;
  border-radius: 10px;
  padding: 20px;
  font-size: 17px;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition: filter .2s;
  margin-top: 4px;
}

.contact-form__submit:hover {
  filter: brightness(1.06);
}

.contact-form__submit-note {
  font-size: 12px;
  color: var(--color-glay);
  text-align: center;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* =============================================
   サイドバー
============================================= */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 96px;
}

.contact-sidebar-card {
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
}

.contact-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-glay);
  letter-spacing: 0.04em;
}

/* 会社情報 */
.contact-company-info {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-company-info__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.contact-company-info__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-company-info__row dt {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-glay);
  letter-spacing: 0.05em;
}

.contact-company-info__row dd {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
}

.contact-company-info__sub {
  font-size: 11px;
  color: var(--color-glay);
}

/* Google マップ */
.contact-map {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-map__placeholder {
  font-size: 13px;
  color: #888;
  letter-spacing: 0.04em;
}

/* よくある質問 */
.contact-faq {
  padding: 0 20px;
}

.contact-faq__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-faq__item--last {
  border-bottom: none;
}

.contact-faq__q {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}

.contact-faq__a {
  font-size: 12px;
  color: var(--color-glay);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* 会員カード */
.contact-member-card {
  background: #2a2a2a;
  border-radius: 14px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.contact-member-card__icon {
  margin-bottom: 4px;
}

.contact-member-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.contact-member-card__accent {
  color: var(--color-lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-member-card__desc {
  font-size: 12px;
  color: #aaa;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.contact-member-card__btn {
  display: block;
  width: 100%;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 900;
  padding: 13px;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-top: 4px;
  transition: filter .2s;
}

.contact-member-card__btn:hover {
  filter: brightness(1.06);
}

.contact-member-card__login {
  font-size: 12px;
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width: 768px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
  }

  .contact-sidebar {
    position: static;
  }

  .contact-form__row--half {
    flex-direction: column;
  }
}

/* ==============================================
  お問い合わせ確認ページ (contact-confirm.html)
============================================== */

/* ステップインジケーター */
.contact-confirm-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 0 4px;
}

.contact-confirm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.contact-confirm-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-border);
  color: var(--color-glay);
  border: 2px solid var(--color-border);
  transition: all .2s;
}

.contact-confirm-step__label {
  font-size: 11px;
  color: var(--color-glay);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* 完了ステップ */
.contact-confirm-step--done .contact-confirm-step__num {
  background: #f0fad4;
  border-color: var(--color-lime);
  color: var(--color-text);
}

.contact-confirm-step--done .contact-confirm-step__label {
  color: var(--color-text);
}

/* アクティブステップ */
.contact-confirm-step--active .contact-confirm-step__num {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-text);
  font-weight: 900;
}

.contact-confirm-step--active .contact-confirm-step__label {
  color: var(--color-text);
  font-weight: 700;
}

/* 接続ライン */
.contact-confirm-step__line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin-bottom: 16px;
  min-width: 32px;
}

.contact-confirm-step__line--done {
  background: var(--color-lime);
}

/* リード文 */
.contact-confirm__lead {
  font-size: 13px;
  color: var(--color-glay);
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

/* =============================================
   確認テーブル
============================================= */
.prop-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

@media screen and (max-width: 1024px) {
  .prop-title-wrap {
    gap: 14px;
  }
}

@media screen and (max-width: 767px) {
  .prop-title-wrap {
    gap: 10px;
  }

  .prop-title-wrap h1,
  .prop-title-wrap .prop-title {
    font-size: 24px;
    line-height: 1.45;
  }
}

.contact-confirm-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
  width: 100%;
}

.contact-confirm-table__row {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  min-height: 52px;
}

.contact-confirm-table__row:first-child {
  border-top: 1px solid var(--color-border);
}

.contact-confirm-table__label {
  display: flex;
  align-items: flex-start;
  padding: 16px 16px 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-glay);
  letter-spacing: 0.02em;
  border-right: 1px solid var(--color-border);
}

.contact-confirm-table__value {
  display: flex;
  align-items: flex-start;
  padding: 16px 0 16px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.contact-confirm-table__value--empty {
  color: var(--color-glay);
  font-style: italic;
}

.contact-confirm-table__value--textarea {
  line-height: 1.85;
  white-space: pre-wrap;
}

/* プライバシー確認 */
.contact-confirm-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 28px;
}

.contact-confirm-privacy svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-confirm-privacy span {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* =============================================
   ボタン群
============================================= */
.contact-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-confirm-actions__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-glay);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}

.contact-confirm-actions__back:hover {
  border-color: #aaa;
  color: var(--color-text);
}

.contact-confirm-actions__submit {
  flex: 1;
  display: block;
  background: var(--color-lime);
  color: var(--color-text);
  border: none;
  border-radius: 10px;
  padding: 20px;
  font-size: 17px;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition: filter .2s;
}

.contact-confirm-actions__submit:hover {
  filter: brightness(1.06);
}

@media screen and (max-width: 768px) {
  .contact-confirm-table__row {
    grid-template-columns: 1fr;
  }

  .contact-confirm-table__label {
    padding: 12px 0 4px;
    border-right: none;
    border-bottom: none;
  }

  .contact-confirm-table__value {
    padding: 0 0 12px;
  }

  .contact-confirm-actions {
    flex-direction: column-reverse;
  }

  .contact-confirm-actions__back {
    width: 100%;
    justify-content: center;
  }
}

/* ==============================================
  お問い合わせ完了ページ (contact-complete.html)
============================================== */

.contact-complete-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 40px 48px;
  gap: 16px;
}

.contact-complete__icon {
  margin-bottom: 8px;
}

.contact-complete__title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.contact-complete__desc {
  font-size: 14px;
  color: var(--color-glay);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.contact-complete__desc strong {
  color: var(--color-text);
  font-weight: 700;
}

.contact-complete__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.contact-complete__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-lime);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s;
}

.contact-complete__btn-primary:hover {
  filter: brightness(1.06);
}

.contact-complete__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s;
}

.contact-complete__btn-secondary:hover {
  border-color: #aaa;
}

.page-container {
  max-width: 1080px;
  margin: 40px auto;
  padding: 20px 24px 80px;
  background: var(--color-white);
  border-radius: 20px;
}


/* =============================================
       Section merits
    ============================================= */
.section__merits {
  width: 100%;
  padding: 80px 40px;
}

.section__merits__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =============================================
       タイトル
    ============================================= */
.merits__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: #121212;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 14px;
}

.merits__subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #8a8a8a;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 52px;
}

/* =============================================
       カードグリッド
    ============================================= */
.merits__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 70px;
}

/* 個別カード */
.merit-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 36px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* アイコンラッパー */
.merit-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.merit-card__icon svg {
  width: 32px;
  height: 32px;
  fill: var(--color-white);
}

/* タイトル */
.merit-card__title {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 900;
  color: #121212;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

/* 説明 */
.merit-card__desc {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
  .merits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
  }

  .merit-card {
    padding: 28px 18px 24px;
    border-radius: 14px;
    gap: 14px;
  }

  .merit-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
  }

  .section__merit-card-icon {
    max-width: 100%;
    height: auto;
  }

  .merit-card__title {
    font-size: 18px;
    line-height: 1.5;
  }

  .merit-card__desc {
    font-size: 13px;
    line-height: 1.8;
  }
}

@media screen and (max-width: 767px) {
  .merits__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
  }

  .merit-card {
    padding: 24px 16px 22px;
    border-radius: 12px;
    gap: 12px;
  }

  .merit-card__icon {
    width: 64px;
    height: 64px;
  }

  .merit-card__title {
    font-size: 17px;
    line-height: 1.5;
  }

  .merit-card__desc {
    font-size: 12px;
    line-height: 1.75;
  }
}

/* ========================================
   section__battery__merits
   ======================================== */
.section__battery__merits {
  padding: 78px 20px 96px;
  background: var(--color-white);
}

.section__battery__merits-inner {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.section__battery__merits-heading {
  text-align: center;
}

.merits__title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.merits__title-line {
  width: 64px;
  height: 3px;
  margin: 14px auto 10px;
  background: var(--color-orange);
  border-radius: 999px;
}

.merits__title-line.gr {
  background: var(--color-green);
}

.merits__subtitle {
  margin: 0;
  color: #a4a4a4;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
}

.section__battery__merits-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 72px;
  margin-top: 82px;
}

.section__battery__merits-item {
  text-align: center;
}

.section__battery__merits-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

.section__battery__merits-number.gr {
  background: var(--color-green);
}

.section__battery__merits-item-title {
  margin: 46px 0 18px;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.section__battery__merits-item-text {
  margin: 0;
  color: var(--color-glay);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__merits {
    padding: 68px 20px 88px;
  }

  .section__battery__merits-list {
    column-gap: 40px;
    margin-top: 68px;
  }

  .section__battery__merits-item-title {
    font-size: 24px;
    white-space: normal;
  }

  .section__battery__merits-item-text {
    font-size: 14px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__merits {
    padding: 56px 20px 72px;
  }

  .merits__title {
    font-size: 20px;
  }

  .merits__title-line {
    margin: 12px auto 14px;
  }

  .merits__subtitle {
    font-size: 11px;
    line-height: 1.9;
  }

  .section__battery__merits-list {
    grid-template-columns: 1fr;
    row-gap: 52px;
    margin-top: 56px;
  }

  .section__battery__merits-number {
    width: 54px;
    height: 54px;
    font-size: 19px;
  }

  .section__battery__merits-item-title {
    margin: 28px 0 14px;
    font-size: 24px;
    line-height: 1.45;
  }

  .section__battery__merits-item-text {
    font-size: 14px;
    line-height: 1.95;
  }
}

/* ========================================
   section__battery__flow
   ======================================== */
.section__battery__flow {
  padding: 44px 20px;
  background: var(--color-white);
}

.section__battery__flow-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__flow-panel {
  background: #f6f6fb;
  border-radius: 24px;
  padding: 44px 52px 28px;
}

.section__battery__flow-heading {
  text-align: center;
}

.section__battery__flow-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.section__battery__flow-subtitle {
  margin: 10px 0 0;
  color: #b8b8c3;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.section__battery__flow-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: nowrap;
}

.section__battery__flow-item {
  width: 118px;
  text-align: center;
  flex: 0 0 118px;
}

.section__battery__flow-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 50%;
}

.section__battery__flow-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.section__battery__flow-arrow {
  color: var(--color-orange);
  font-family: "Inter", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  margin-top: 22px;
  flex: 0 0 auto;
}

.section__battery__flow-arrow.gr {
  color: var(--color-green);
}

.section__battery__flow-item-title {
  margin: 14px 0 6px;
  color: #3e3e46;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.section__battery__flow-item-text {
  margin: 0;
  color: #66666f;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.section__battery__flow-item--final .section__battery__flow-icon-wrap--final {
  background: var(--color-orange);
}

.section__battery__flow-item--final .section__battery__flow-icon-wrap--final.gr {
  background: var(--color-green);
}

.section__battery__flow-icon-wrap--final {
  width: 82px;
  height: 82px;
}

.section__battery__flow-year {
  color: var(--color-white);
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.section__battery__flow-note {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.section__battery__flow-note-text {
  margin: 0;
  padding: 10px 28px;
  background: #ffe2cc;
  border-radius: 6px;
  color: #444;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
}

.section__battery__flow-note-text span {
  color: var(--color-orange);
}

/* tablet */
@media (max-width: 1100px) {
  .section__battery__flow-panel {
    padding: 40px 28px 28px;
  }

  .section__battery__flow-list {
    gap: 10px;
  }

  .section__battery__flow-item {
    width: 100px;
    flex-basis: 100px;
  }

  .section__battery__flow-icon-wrap,
  .section__battery__flow-icon-wrap--final {
    width: 74px;
    height: 74px;
  }

  .section__battery__flow-icon {
    width: 38px;
    height: 38px;
  }

  .section__battery__flow-item-title {
    font-size: 14px;
  }

  .section__battery__flow-item-text {
    font-size: 11px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__flow {
    padding: 32px 16px 0;
  }

  .section__battery__flow-panel {
    padding: 32px 20px 24px;
    border-radius: 20px;
  }

  .section__battery__flow-title {
    font-size: 20px;
  }

  .section__battery__flow-subtitle {
    font-size: 11px;
    line-height: 1.7;
  }

  .section__battery__flow-list {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
  }

  .section__battery__flow-item {
    width: 100%;
    max-width: 220px;
    flex: none;
  }

  .section__battery__flow-arrow {
    margin-top: 0;
    transform: rotate(90deg);
    font-size: 28px;
  }

  .section__battery__flow-item-title {
    margin-top: 12px;
  }

  .section__battery__flow-note {
    margin-top: 24px;
  }

  .section__battery__flow-note-text {
    padding: 12px 14px;
    font-size: 11px;
    line-height: 1.7;
  }
}

/* ========================================
   section__battery__revenue
   ======================================== */
.section__battery__revenue {
  padding: 42px 20px 56px;
  background: #7b7785;
}

.section__battery__revenue-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__revenue-heading {
  text-align: center;
}

.section__battery__revenue-title {
  margin: 0;
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.section__battery__revenue-title-line {
  width: 82px;
  height: 2px;
  margin: 12px auto 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
}

.section__battery__revenue-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.section__battery__revenue-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.section__battery__revenue-card {
  min-height: 152px;
  padding: 26px 24px 22px;
  background: #34353d;
  border-radius: 18px;
  text-align: center;
}

.section__battery__revenue-card-label {
  margin: 0;
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.section__battery__revenue-card-title {
  margin: 8px 0 12px;
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.section__battery__revenue-card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.section__battery__revenue-summary {
  margin-top: 28px;
  padding: 40px 34px 26px;
  background: #fcfcfd;
  border-radius: 18px;
}

.section__battery__revenue-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

.section__battery__revenue-metrics.high {
  grid-template-columns: repeat(3, 1fr);
}

.section__battery__revenue-metric {
  text-align: center;
}

.section__battery__revenue-metric-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  height: 22px;
  padding: 0 16px;
  background: #edf1f7;
  border-radius: 999px;
  color: #2f2f35;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.section__battery__revenue-metric-value {
  margin: 18px 0 0;
  color: #202020;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.section__battery__revenue-metric-prefix,
.section__battery__revenue-metric-suffix {
  color: #202020;
}

.section__battery__revenue-metric-accent {
  color: var(--color-orange);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.section__battery__revenue-metric-accent.gr {
  color: var(--color-green);
}

.section__battery__revenue-note {
  margin-top: 30px;
  text-align: center;
}

.section__battery__revenue-note-text {
  margin: 0;
  color: #9a9aa3;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__revenue {
    padding: 40px 20px 52px;
  }

  .section__battery__revenue-cards {
    gap: 16px;
  }

  .section__battery__revenue-card {
    padding: 24px 18px 20px;
  }

  .section__battery__revenue-summary {
    padding: 32px 24px 24px;
  }

  .section__battery__revenue-metrics {
    gap: 12px;
  }

  .section__battery__revenue-metric-label {
    min-width: 100%;
    padding: 0 12px;
    font-size: 10px;
  }

  .section__battery__revenue-metric-value {
    font-size: 28px;
  }

  .section__battery__revenue-metric-accent {
    font-size: 46px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__revenue {
    padding: 36px 16px 44px;
  }

  .section__battery__revenue-title {
    font-size: 20px;
  }

  .section__battery__revenue-title-line {
    width: 70px;
    margin: 10px auto 12px;
  }

  .section__battery__revenue-subtitle {
    font-size: 11px;
    line-height: 1.8;
  }

  .section__battery__revenue-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 34px;
  }

  .section__battery__revenue-card {
    min-height: auto;
  }

  .section__battery__revenue-summary {
    margin-top: 20px;
    padding: 24px 16px 20px;
    border-radius: 16px;
  }

  .section__battery__revenue-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }

  .section__battery__revenue-metric-label {
    min-width: 100%;
    height: 24px;
    font-size: 10px;
  }

  .section__battery__revenue-metric-value {
    margin-top: 14px;
    font-size: 24px;
  }

  .section__battery__revenue-metric-accent {
    font-size: 40px;
  }

  .section__battery__revenue-note {
    margin-top: 22px;
  }

  .section__battery__revenue-note-text {
    font-size: 10px;
    line-height: 1.75;
  }
}

/* ========================================
   section__battery__compare
   ======================================== */
.section__battery__compare {
  padding: 54px 20px 28px;
  background: var(--color-white);
}

.section__battery__compare-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__compare-heading {
  text-align: center;
}

.section__battery__compare-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.section__battery__compare-subtitle {
  margin: 14px 0 0;
  color: #b1b1b1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.section__battery__compare-table-wrap {
  margin-top: 30px;
  overflow-x: auto;
}

.section__battery__compare-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--color-white);
}

.section__battery__compare-col--label {
  width: 22%;
}

.section__battery__compare-col--high {
  width: 34%;
}

.section__battery__compare-col--low {
  width: 44%;
}

.section__battery__compare-table th,
.section__battery__compare-table td {
  border: 1px solid #dcdcdc;
  padding: 8px 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #4a4a4a;
  vertical-align: middle;
}

.section__battery__compare-head {
  padding: 10px 12px;
  color: var(--color-white) !important;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.section__battery__compare-head--label {
  background: #a9a9b1;
}

.section__battery__compare-head--high {
  background: #7ed500;
}

.section__battery__compare-head--low {
  background: var(--color-orange);
}

.section__battery__compare-item {
  background: #fafafa;
  text-align: left;
  font-weight: 500;
}

.section__battery__compare-table td {
  text-align: center;
  font-weight: 400;
}

.section__battery__compare-accent {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
}

.section__battery__compare-checkcell {
  font-weight: 700 !important;
  color: #222 !important;
}

.section__battery__compare-check {
  display: inline-block;
  margin-right: 6px;
  color: var(--color-orange);
  font-size: 11px;
  font-weight: 700;
  transform: translateY(-1px);
}

.section__battery__compare-check.gr {
  color: var(--color-green);
}

.section__battery__compare-accent-text {
  color: #222 !important;
}

.section__battery__compare-merged {
  text-align: center;
}

.section__battery__compare-note {
  margin: 10px 0 0;
  color: #555;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__compare {
    padding: 48px 20px 24px;
  }

  .section__battery__compare-title {
    font-size: 21px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__compare {
    padding: 42px 16px 20px;
  }

  .section__battery__compare-title {
    font-size: 20px;
  }

  .section__battery__compare-subtitle {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.75;
  }

  .section__battery__compare-table-wrap {
    margin-top: 24px;
  }

  .section__battery__compare-note {
    font-size: 10px;
    line-height: 1.7;
  }
}

/* ========================================
   section__battery__spec
   ======================================== */
.section__battery__spec {
  padding: 58px 20px 56px;
  background: #f3f3f6;
}

.section__battery__spec-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__spec-heading {
  text-align: center;
}

.section__battery__spec-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.section__battery__spec-title-line {
  width: 68px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--color-orange);
  border-radius: 999px;
}

.section__battery__spec-title-line.gr {
  background: var(--color-green);
}

.section__battery__spec-main-title {
  margin: 62px 0 36px;
  color: var(--color-orange);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
}

.section__battery__spec-main-title.gr {
  color: var(--color-green);
}

.section__battery__spec-table {
  width: min(100%, 670px);
  margin: 0 auto;
}

.section__battery__spec-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 22px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.95);
}

.section__battery__spec-label,
.section__battery__spec-value {
  color: #2f2f35;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.section__battery__spec-label {
  font-weight: 700;
}

.section__battery__spec-value {
  font-weight: 500;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__spec {
    padding: 52px 20px 50px;
  }

  .section__battery__spec-main-title {
    margin: 52px 0 32px;
    font-size: 19px;
  }

  .section__battery__spec-table {
    width: min(100%, 720px);
  }

  .section__battery__spec-row {
    grid-template-columns: 145px 1fr;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__spec {
    padding: 44px 16px 42px;
  }

  .section__battery__spec-title {
    font-size: 20px;
  }

  .section__battery__spec-title-line {
    width: 62px;
  }

  .section__battery__spec-main-title {
    margin: 42px 0 24px;
    font-size: 18px;
    line-height: 1.7;
  }

  .section__battery__spec-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 14px 0;
    min-height: auto;
  }

  .section__battery__spec-label,
  .section__battery__spec-value {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ========================================
   section__battery__faq
   ======================================== */
.section__battery__faq {
  padding: 60px 20px 70px;
  background: var(--color-white);
}

.section__battery__faq-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__faq-heading {
  text-align: center;
}

.section__battery__faq-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.section__battery__faq-title-line {
  width: 70px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--color-orange);
  border-radius: 999px;
}

.section__battery__faq-title-line.gr {
  background: var(--color-green);
}

.section__battery__faq-list {
  width: min(100%, 890px);
  margin: 54px auto 0;
}

.section__battery__faq-item+.section__battery__faq-item {
  margin-top: 26px;
}

.section__battery__faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 12px 18px 12px 16px;
  background: #ffe7d6;
  border-radius: 4px;
}

.section__battery__faq-question.gr {
  background: var(--color-lite-green);
}

.section__battery__faq-question-mark {
  flex: 0 0 22px;
  color: var(--color-orange);
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 31px;
  font-weight: 800;
  line-height: 1;
}

.section__battery__faq-question-mark.gr {
  color: var(--color-green);
}

.section__battery__faq-question-text {
  margin: 0;
  color: #2c2c2c;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.section__battery__faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px 0 16px;
}

.section__battery__faq-answer-mark {
  flex: 0 0 22px;
  color: #b3b3bc;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 31px;
  font-weight: 800;
  line-height: 1;
}

.section__battery__faq-answer-text {
  margin: 0;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.58;
  letter-spacing: 0.01em;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__faq {
    padding: 54px 20px 64px;
  }

  .section__battery__faq-list {
    margin-top: 46px;
  }

  .section__battery__faq-question-text,
  .section__battery__faq-answer-text {
    font-size: 14px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__faq {
    padding: 44px 16px 52px;
  }

  .section__battery__faq-title {
    font-size: 20px;
  }

  .section__battery__faq-title-line {
    width: 64px;
  }

  .section__battery__faq-list {
    margin-top: 36px;
  }

  .section__battery__faq-item+.section__battery__faq-item {
    margin-top: 22px;
  }

  .section__battery__faq-question {
    gap: 12px;
    padding: 12px 14px;
  }

  .section__battery__faq-answer {
    gap: 12px;
    padding: 12px 14px 0;
  }

  .section__battery__faq-question-mark,
  .section__battery__faq-answer-mark {
    flex-basis: 20px;
    font-size: 28px;
  }

  .section__battery__faq-question-text,
  .section__battery__faq-answer-text {
    font-size: 14px;
    line-height: 1.65;
  }
}

/* ========================================
   section__battery__case
   ======================================== */
.section__battery__case {
  padding: 58px 20px 50px;
  background: #f8f8f8;
}

.section__battery__case-inner {
  width: min(100%, 1150px);
  margin: 0 auto;
}

.section__battery__case-heading {
  text-align: center;
}

.section__battery__case-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.section__battery__case-title-line {
  width: 70px;
  height: 3px;
  margin: 12px auto 14px;
  background: var(--color-orange);
  border-radius: 999px;
}

.section__battery__case-title-line.gr {
  background: var(--color-green);
}

.section__battery__case-subtitle {
  margin: 0;
  color: #b1b1b1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.section__battery__case-card {
  display: grid;
  grid-template-columns: 328px 1fr;
  gap: 56px;
  margin-top: 30px;
  padding: 36px 40px;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.section__battery__case-media {
  align-self: start;
}

.section__battery__case-image {
  display: block;
  width: 100%;
  aspect-ratio: 328 / 235;
  object-fit: cover;
  background: #d9d9d9;
}

.section__battery__case-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section__battery__case-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 22px;
  padding: 0 12px;
  border: 1px solid #8d8d95;
  border-radius: 999px;
  color: #4a4a4f;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

.section__battery__case-name {
  margin: 10px 0 14px;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.section__battery__case-info {
  width: 100%;
  background: #f1f2f7;
  padding: 14px 14px 10px;
}

.section__battery__case-info-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: center;
}

.section__battery__case-info-row+.section__battery__case-info-row {
  margin-top: 8px;
}

.section__battery__case-info-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 8px;
  background: #41414b;
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.section__battery__case-info-body {
  color: #55555c;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.section__battery__case-notes {
  margin-top: 12px;
}

.section__battery__case-notes p {
  margin: 0;
  color: #9a9aa0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.75;
}

.section__battery__case-notes p+p {
  margin-top: 2px;
}

.section__battery__case-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 348px;
  height: 42px;
  margin-top: 18px;
  padding: 0 12px 0 22px;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}

.section__battery__case-btn.gr {
  background: var(--color-green);
}

.section__battery__case-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.section__battery__case-btn-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.section__battery__case-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  flex-shrink: 0;
}

/* tablet */
@media (max-width: 1024px) {
  .section__battery__case-card {
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 30px 28px;
  }

  .section__battery__case-btn {
    min-width: 320px;
  }
}

/* mobile */
@media (max-width: 767px) {
  .section__battery__case {
    padding: 46px 16px 42px;
  }

  .section__battery__case-title {
    font-size: 20px;
  }

  .section__battery__case-card {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .section__battery__case-name {
    font-size: 15px;
  }

  .section__battery__case-info {
    padding: 12px;
  }

  .section__battery__case-info-row {
    grid-template-columns: 70px 1fr;
    gap: 10px;
  }

  .section__battery__case-info-head {
    font-size: 10px;
  }

  .section__battery__case-info-body {
    font-size: 11px;
  }

  .section__battery__case-notes p {
    font-size: 10px;
  }

  .section__battery__case-btn {
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 0 10px 0 16px;
  }

  .section__battery__case-btn-text {
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
  }
}



@media screen and (max-width: 767px) {
  .markets__card {
    display: flex;
    flex-direction: column;
  }

  .markets__cols,
  .markets__details {
    display: contents;
  }

  .markets__cols .market-col:nth-child(1) {
    order: 1;
  }

  .markets__details .detail-card:nth-child(1) {
    order: 2;
  }

  .markets__cols .market-col:nth-child(2) {
    order: 3;
  }

  .markets__details .detail-card:nth-child(2) {
    order: 4;
  }

  .markets__cols .market-col:nth-child(3) {
    order: 5;
  }

  .markets__details .detail-card:nth-child(3) {
    order: 6;
  }

  .markets__cols .market-col,
  .markets__details .detail-card {
    width: 100%;
  }

  .markets__details .detail-card {
    margin-top: -4px;
    margin-bottom: 16px;
    margin-top: 10px;
  }

  .markets__cols .market-col:last-of-type,
  .markets__details .detail-card:last-of-type {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .markets__card {
    display: flex;
    flex-direction: column;
  }

  .markets__cols,
  .markets__details {
    display: contents;
  }

  .markets__cols .market-col:nth-child(1) {
    order: 1;
    width: 100%;
  }

  .markets__details .detail-card:nth-child(1) {
    order: 2;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .markets__cols .market-col:nth-child(2) {
    order: 3;
    width: 100%;
  }

  .markets__details .detail-card:nth-child(2) {
    order: 4;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .markets__cols .market-col:nth-child(3) {
    order: 5;
    width: 100%;
  }

  .markets__details .detail-card:nth-child(3) {
    order: 6;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .markets__cols .market-col:nth-child(4) {
    order: 99;
    width: 100%;
    margin-top: 8px;
  }
}

@media screen and (max-width: 767px) {
  .market__left {
    order: 1;
  }

  .market__right {
    order: 2;
  }
}

@media screen and (max-width: 1024px) {
  .contact-page-layout {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .contact-form-col,
  .contact-sidebar {
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 767px) {
  .contact-page-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-page-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .contact-form-col,
  .contact-sidebar {
    width: 100%;
    min-width: 0;
  }
}

/* ==============================================
   Tinymce / Editor WYSIWYG Formatted styles (.editor-formatted)
   ============================================== */
.editor-formatted h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 14px 18px;
  border-left: 4px solid var(--color-lime);
  background: var(--color-white);
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
  margin-top: 32px;
}

.editor-formatted h2:first-child {
  margin-top: 0;
}

.editor-formatted h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  margin-top: 24px;
}

.editor-formatted h3:first-child {
  margin-top: 0;
}

.editor-formatted h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  margin-top: 20px;
}

.editor-formatted p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.editor-formatted strong {
  font-weight: 700;
}

.editor-formatted a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editor-formatted a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.editor-formatted ul,
.editor-formatted ol {
  font-size: 14px;
  line-height: 1.9;
  padding-left: 1.5em;
  margin-bottom: 16px;
  color: var(--color-text);
}

.editor-formatted ul li,
.editor-formatted ol li {
  margin-bottom: 4px;
}

.editor-formatted img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 16px 0;
}

.editor-formatted iframe {
  max-width: 100%;
  border: none;
}

.editor-formatted blockquote {
  border-left: 4px solid #ddd;
  padding-left: 16px;
  margin: 16px 0;
  color: #666;
  font-style: italic;
}

@media screen and (min-width: 768px) {
  .editor-formatted h2 {
    font-size: 20px;
    padding: 16px 20px;
  }

  .editor-formatted h3 {
    font-size: 18px;
  }

  .editor-formatted p,
  .editor-formatted ul,
  .editor-formatted ol {
    font-size: 15px;
  }
}

/* ==============================================
Cookie Consent Modal
============================================== */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  z-index: 10000; /* 最前面 */
  pointer-events: none;
  
  /* Material UI style popup animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-consent__content {
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 2px solid var(--color-green);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: inherit;
}

.cookie-consent__text {
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

.cookie-consent__link {
  color: var(--color-green);
  text-decoration: underline;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.cookie-consent__link:hover {
  opacity: 0.7;
}

.cookie-consent__btn {
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cookie-consent__btn:hover {
  background-color: #333333;
}
.cookie-consent__btn:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  .cookie-consent__content {
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-width: 1px;
    border-radius: 10px;
  }
  
  .cookie-consent__text {
    font-size: 13px;
    text-align: left;
  }
  
  .cookie-consent__btn {
    width: 100%;
    padding: 14px 24px;
  }
  
  .cookie-consent .hidden-sp {
    display: none;
  }
}