@charset "utf-8";

/* ===============================
   FV（このページ専用）
   =============================== */
.power-storage #wrap_noloader.service .header_globalf {
  background: url("../images/power-storage/power-storage_top_img.png") no-repeat 50% 50% / cover;
}

/* ===============================
   Power Storage - 蓄電池事業の分類（このページ専用）
   =============================== */

/* セクション余白 */
.power-storage .ps-classification {
  padding: 20px 0;
}

/* 器：幅とグリッド構成 */
.power-storage .ps-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin: 0 auto;
  padding: 0 25px;
}
@media (min-width: 768px) {
  .power-storage .ps-grid {
    max-width: 700px;
    padding: 0 50px;
  }
}
@media (min-width: 992px) {
  .power-storage .ps-grid {
    grid-template-columns: 320px minmax(0, 1fr); /* 左固定 / 右可変 */
    grid-template-rows: 360px 360px;              /* 行の高さを統一 */
    gap: 40px;
  }
}
@media (min-width: 1200px) {
  .power-storage .ps-grid {
    max-width: 1040px;
  }
}

/* 配置（PC時） */
@media (min-width: 992px) {
  .power-storage .psc-leftTop { grid-column: 1; grid-row: 1; }
  .power-storage .psc-leftBottom { grid-column: 1; grid-row: 2; }
  .power-storage .psc-right { grid-column: 2; grid-row: 1 / span 2; }
}

/* 左右カラム共通：高さ・配置制御 */
.power-storage .psc-leftTop,
.power-storage .psc-leftBottom {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.power-storage .psc-right {
  background: #f7f7f7;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
@media (min-width: 992px) {
  .power-storage .psc-right { padding: 32px; }
}

/* 左上：タイトル・リード */
.power-storage .psc-title {
  font-size: 28px;
  line-height: 1.3;
  margin: 20px 0 20px;
  font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", serif;
}
.power-storage .psc-lead {
  margin: 0;
  line-height: 1.9;
	    margin-bottom: 20px;
}

/* 画像タイトル（見出し） */
.power-storage .psc-img-heading {
  text-align: center;
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #222;
}

/* 各figure構成：見出し→画像の縦積み */
.power-storage .psc-hero,
.power-storage .psc-legacy,
.power-storage .psc-two__item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 画像体裁（枠線と背景） */
.power-storage .psc-hero img,
.power-storage .psc-legacy img,
.power-storage .psc-two__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

/* 右下：2カラム構成 */
.power-storage .psc-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  height: 100%;
}
@media (min-width: 768px) {
  .power-storage .psc-two {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* 右下2カラム画像サイズ指定 */
.power-storage .psc-rightBottom .psc-two__item img {
  height: 300px;
  object-fit: contain;
}

/* 左下（従来型蓄電池）のみ別サイズ指定 */
.power-storage .psc-leftBottom .psc-legacy img {
  height: 300px;
  object-fit: contain;
}

/* 768px以下で高さを解除し、marginでスペースを作る */
@media (max-width: 767px) {
  .power-storage .psc-leftTop,
  .power-storage .psc-leftBottom {
    height: auto;         /* ← 高さを解除 */
    margin-bottom: 24px;  /* ← 下に余白をつける */
  }

  /* 下段だけ少し余白を広くしたい場合（任意） */
  .power-storage .psc-leftBottom {
    margin-bottom: 32px;
  }
}

/* ===============================
   系統用蓄電池事業セクション
   =============================== */
.power-storage .ps-gridbattery {
  padding: 80px 0;
}

.power-storage .ps-gridbattery .wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 25px;
}

/* タイトル・説明 */
.power-storage .psg-head {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.power-storage .psg-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* ▼ タイトル下の長いライン（FV風） */
.power-storage .psg-title::after {
    content: "";
    display: block;
    width: 350px;
    height: 1px;
    background-color: #333;
    margin: 14px auto 0;
}

/* リード文 */
.power-storage .psg-lead {
  line-height: 1.8;
  color: #333;
  font-size: 18px;
}

/* メイン画像 */
.power-storage .psg-image {
  text-align: center;
  margin-bottom: 48px;
}
.power-storage .psg-image img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: inline-block;
}

/* 下部2カラム */
.power-storage .psg-bottom {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .power-storage .psg-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* 各カラム */
.power-storage .psg-col {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  text-align: left;
}

/* タイトルの囲い線 */
.power-storage .psg-col-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
}

/* テキスト */
.power-storage .psg-col-text {
  line-height: 1.8;
  color: #333;
  font-size: 18px;
}

/* 系統用蓄電池事業 見出しを FV と同じ系統に */
.power-storage .psg-title{
  font-size:32px;
  font-weight:400;
  letter-spacing:.08em;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  color:#000;
  margin-bottom:24px;
  display:inline-block;
  padding-bottom:12px;
  line-height:1.5;
  position:relative;
}
.power-storage .psg-title::after{
  content:"";
  display:block;
  width:220px;      /* FV相当。必要なら200–260pxで微調整 */
  height:1px;
  background:#000;
  margin:10px auto 0;
}

/* ===============================
   Power Storage 専用：下向き矢印（フェード付き）
   =============================== */
.power-storage .ps-arrow-down {
  width: 0;
  height: 0;
  margin: 60px auto; /* 少し広めにして中央配置 */
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 75px solid #bcbec0; /* グレー色 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

/* フェードインアニメーション */
.power-storage .ps-arrow-down.inview_fadeInUp.animated {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================
   Power Storage 専用：電力取引市場セクション
   =============================== */
.power-storage .ps-markets{ padding:80px 0; }
.power-storage .ps-markets .wrapper{ max-width:1040px; margin:0 auto; padding:0 25px; }

/* 見出し（FVと同トーン） */
.power-storage .psm-head{ text-align:center; margin-bottom:32px; }
.power-storage .psm-title{
  font-size:32px; font-weight:400; letter-spacing:.08em;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  color:#000; margin:0 0 20px; display:inline-block; padding-bottom:12px; line-height:1.5; position:relative;
}
.power-storage .psm-title::after{
  content:""; display:block; width:220px; height:1px; background:#000; margin:10px auto 0;
}
.power-storage .psm-lead{ text-align:center; line-height:1.9; color:#333; }

/* ▼（削除）3連サークル関連は全て削除
.power-storage .psm-venn{ ... }
.power-storage .psm-circle{ ... }
.power-storage .psm-c1{ ... }
.power-storage .psm-c2{ ... }
.power-storage .psm-c3{ ... }
*/

/* ビジネスモデル図 */
.power-storage .psm-figure{ text-align:center; margin:0 0 32px; }
.power-storage .psm-figure img{
  width:100%; max-width:760px; height:auto; display:inline-block;
}

/* 画像の直後に来るリード文だけ余白＆幅を調整 */
.power-storage .psm-figure + .psm-lead {
    margin: 0 auto 40px;
    max-width: 900px;
    font-size: 16px;
}

/* 市場カードのグリッド */
.power-storage .psm-grid{
  display:grid; gap:32px; grid-template-columns:1fr;
}
@media (min-width: 900px){
  .power-storage .psm-grid{ grid-template-columns:1fr 1fr; }
}

/* カード */
.power-storage .psm-card{
  background:#fff; border-radius:10px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.power-storage .psm-card-title{
  font-size:20px; font-weight:700; text-align:center; margin:0 0 16px;
  border:1px solid #333; border-radius:6px; padding:10px; line-height:1.6;
}
.power-storage .psm-card-title .psm-tag{
  display:inline-block; font-size:12px; font-weight:700; background:#eee; color:#666;
  border-radius:3px; padding:3px 6px; margin-right:8px;
}

.power-storage .psm-card-body{
  display:grid; gap:20px; grid-template-columns:1fr;
}
@media (min-width: 768px){
  .power-storage .psm-card-body{ grid-template-columns:1.2fr .8fr; align-items:center; }
}

.power-storage .psm-text p{ margin:0 0 12px; line-height:1.9; }
.power-storage .psm-bullets{ margin:8px 0 0 16px; padding:0; }
.power-storage .psm-bullets li{ margin:4px 0; }

/* 視覚要素（ダミー枠は残すならこのまま） */
.power-storage .psm-visual{ text-align:center; }
.power-storage .psm-map-circle{
  width:220px; height:220px; border-radius:50%;
  background:#cfcfd2; margin:0 auto; display:flex; align-items:center; justify-content:center;
  color:#666; font-weight:700;
}
.power-storage .psm-japan-box{
  background:#cfcfd2; color:#666; border-radius:6px; padding:24px; text-align:center;
  min-height:160px; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* 進行中バッジ */
.power-storage .psm-badge{
  display:inline-flex; flex-direction:column; gap:6px;
  border:1px solid #333; border-radius:999px; padding:10px 16px; text-align:center;
  margin-top:8px;
}
.power-storage .psm-badge > span{ font-weight:700; }
.power-storage .psm-badge > small{ font-size:12px; color:#666; }




/* ===============================
   Power Storage：容量市場タイトルブロック
   =============================== */

/* ブロック全体 */
.power-storage .ps-gridbattery {
  padding: 60px 0;
}
.power-storage .ps-gridbattery .wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 25px;
}

/* タイトルブロック（アイコン＋テキスト横並び） */
.power-storage .psm-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    margin-left: 40px;
    margin-right: 40px;
}

/* アイコン */
.power-storage .psm-icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  background: #bcbec0; /* グレー背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.power-storage .psm-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* タイトル群 */
.power-storage .psm-titlebox {
  display: flex;
  flex-direction: column;
}
.power-storage .psm-subtitle {
  font-size: 15px;
  color: #555;
  margin: 0 0 6px;
  letter-spacing: .05em;
}
.power-storage .psm-titleline {
  font-size: 28px;
  margin: 0;
  letter-spacing: .05em;
  line-height: 1.4;
font-family: 'Noto Serif JP', serif;
    font-weight: normal;
}

/* レスポンシブ対応（SPは縦積み） */
@media (max-width: 767px) {
  .power-storage .psm-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .power-storage .psm-icon {
    width: 48px;
    height: 48px;
  }
  .power-storage .psm-titleline {
    font-size: 22px;
  }
}
/* 説明文ブロック */
.power-storage .psm-desc {
  margin: 16px 0 40px;
  max-width: 900px;
}
.power-storage .psm-desc p {
  line-height: 1.9;
  margin: 0 0 12px;
  color: #333;
  font-size: 16px;
}
/* 画像ブロック */
.power-storage .psm-image {
  text-align: center;
  margin: 40px auto 60px;
}
.power-storage .psm-image img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: inline-block;
}

/* テキストの余白調整 */
.power-storage .psm-desc {
  margin: 16px auto 32px;
  max-width: 900px;
}
.power-storage .psm-desc p {
  line-height: 1.9;
  margin: 0 0 12px;
  color: #333;
  font-size: 16px;
}

/* ===============================
   Power Storage 専用：進行中プロジェクトブロック
   =============================== */

.power-storage .psm-project {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  margin: 32px auto 48px;
  max-width: 900px;
  font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", serif;
}

/* 左側のラベル（矢印型） */
.power-storage .psm-project__label {
  position: relative;
  border: 1px solid #333;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  background: #fff;
  min-width: 140px;
  text-align: center;
}

.power-storage .psm-project__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #fff;
  border-left-color: #fff;
  border: 1px solid #333;
  border-left-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 右側テキスト */
.power-storage .psm-project__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.power-storage .psm-project__text p {
  margin: 0;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .power-storage .psm-project {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .power-storage .psm-project__label::after {
    display: none; /* SPでは矢印非表示 */
  }
}

/* ===============================
   Power Storage：左タイトル＋右画像ブロック
   =============================== */
.power-storage .psm-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
  margin:24px 0 60px;
  font-family:"Hiragino Mincho ProN", YuMincho, "Yu Mincho", serif;
}
@media (min-width: 900px){
  .power-storage .psm-stats{
    grid-template-columns:300px minmax(0,1fr); /* 左固定/右可変 */
    gap:40px;
  }
}

/* 左コラム */
.power-storage .psm-stats__left{
  text-align:center;
}
.power-storage .psm-stats__title{
  font-size:28px;
  line-height:1.4;
  margin:0 0 8px;
  font-family: 'Noto Serif JP', serif;
  font-weight: normal; /* = 400 */
}
.power-storage .psm-stats__rule{
  border:0; height:1px; background:#222;
  width:86%; margin:10px auto;
}
.power-storage .psm-stats__label{
  margin:12px 0 6px;
  font-size:16px; color:#111; letter-spacing:.06em;
	    text-align: center;
}
.power-storage .psm-stats__count{
  margin:0 0 12px;
  font-size:22px; line-height:1.6;
	    text-align: center;
}
.power-storage .psm-stats__count strong{
  font-size:28px; font-weight:700; padding:0 .25em;
}

/* Power Storage 専用：蓄電所ステータス（画像のみ） */
.power-storage .psm-stats{
  display:block;           /* 左右グリッドを解除 */
  margin: 24px auto 60px;  /* セクション間の余白 */
  max-width: 1040px;       /* 既存wrapperに合わせる */
  padding: 0 25px;
}
@media (min-width: 768px){
  .power-storage .psm-stats{ padding: 0 50px; }
}
.power-storage .psm-stats__visual{
  margin:0;
  text-align:center;
}
.power-storage .psm-stats__visual img{
  width:100%;
  max-width: 900px;  /* 必要に応じて調整 */
  height:auto;
  display:inline-block;
}

/* ===============================
   Power Storage：自社物件 画像グリッド
   =============================== */
.power-storage .data_images {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 横2 */
  gap: 16px;
  margin: 32px auto 48px; /* ←中央寄せ */
  max-width: 1040px;      /* ←他のコンテンツと同じ幅に統一 */
  padding: 0 25px;        /* ←左右に少し余白を確保（wrapperと同じ） */
  justify-content: center; /* ←グリッド全体を中央寄せ */
}

@media (min-width: 768px) {
  .power-storage .data_images {
    gap: 24px;
  }
}

.power-storage .data_images figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.power-storage .data_images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* このページ専用の余白ラッパー */
.power-storage__contact-space {
  margin-top: 80px;
}