/* ==============================
   Feature Banner Modal Base CSS
   （全モーダル共通構造）
============================== */

/* ===== コンテナ＆画像 ===== */
.feature-container {
  max-width: 920px;
  margin: 0 0 8px 0;
}

/* バナー全体（PCでは中央寄せに） */
.feature-banner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.feature-left {
  width: 48%;
  text-align: left;
}

.feature-right {
  width: 48%;
  text-align: right;
}

.feature-image {
  width: 100%;
  max-width: 450px;
  cursor: pointer;
  transition: filter 0.15s ease-in-out;
}

.feature-image:hover {
  filter: brightness(1.2);
}

/* ===== モーダル背景 ===== */
.feature-modal {
  display: none !important; /* ← 初期状態は必ず非表示 */
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

/* モーダルが開いているときのみ表示 */
.feature-modal.is-open {
  display: flex !important;
}

/* ===== モーダル本体 ===== */
.feature-modal-content {
  position: relative;
  background-color: #fff;
  width: 90%;
  max-width: 900px;
  height: 80vh;
  margin: 5vh auto;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  text-align: left;
  word-wrap: break-word;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== 閉じるボタン ===== */
.feature-close {
  color: #333;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}

.feature-close:hover {
  color: #d00;
}

/* ===== モーダル開いている間は背景固定 ===== */
body.feature-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ===== ステップフロー（共通パターン用） ===== */
.feature-steps {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.feature-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  column-gap: 16px;
  align-items: start;
  margin-bottom: 28px;
  position: relative;
  --c-this: #00c9ff;
  --c-next: #00e676;
}

.feature-rail {
  position: relative;
  width: 100px;
  min-height: 40px;
}

.feature-step-label {
  display: block;
  width: 80px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  background: var(--c-this);
  margin-left: 10px;
  font-size: 0.9rem;
}

/* 縦線をつなぐ */
.feature-rail-line {
  position: absolute;
  top: 34px;
  left: 46px;
  width: 8px;
  height: calc(100% + 44px);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--c-this), var(--c-next));
  z-index: 0;
}

/* テキスト */
.feature-step-content h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
}
.feature-step-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
}

/* カラー設定 */
.feature-step1 { --c-this:#00C9FF; --c-next:#00E676; }
.feature-step2 { --c-this:#00E676; --c-next:#FFD600; }
.feature-step3 { --c-this:#FFD600; --c-next:#FF7043; }
.feature-step4 { --c-this:#FF7043; }
.feature-step:last-child .feature-rail-line { display: none; }

/* --- タブレット --- */
@media (min-width: 600px) and (max-width: 1023px) {
  .feature-step {
    grid-template-columns: 95px 1fr;
    column-gap: 14px;
  }
  .feature-step-label {
    width: 78px;
    height: 30px;
    line-height: 30px;
    font-size: 0.9rem;
  }
  .feature-step-content h3 {
    font-size: 1.05rem;
  }
}

/* --- PC（1024px以上） --- */
@media (min-width: 1024px) {

  /* ===============================
     画像を中央寄せ・高さ60pxに変更・横並び固定
  =============================== */
  .feature-banner {
    justify-content: center;  /* 中央寄せ */
    align-items: center;
    gap: 32px;                /* ← 余白を広げる */
    flex-wrap: nowrap;        /* ← 横並び固定（縦落ち防止） */
  }

  .feature-left,
  .feature-right {
    width: auto;
    text-align: center;
  }

  .feature-image {
    height: 75px!important;      /* ← 高さをさらに削減（80px → 60px） */
    width: auto;       /* 比率維持 */
    max-width: none;   /* 幅制限解除 */
    display: block;
  }

  /* そのほか既存のPCレイアウト */
  .feature-step {
    grid-template-columns: 110px 1fr;
    column-gap: 20px;
  }

  .feature-step-label {
    width: 90px;
    height: 36px;
    line-height: 36px;
    font-size: 1rem;
  }

  .feature-rail-line {
    left: 52px;
    width: 8px;
    top: 40px;
  }

  .feature-step-content h3 {
    font-size: 1.2rem;
  }

  .feature-step-content p {
    font-size: 1rem;
    line-height: 1.8;
  }
}


/* ===== ul/ol上書き ===== */
.entry-content ol.feature-steps,
.entry-content ul.feature-steps,
.item-description ol.feature-steps,
.item-description ul.feature-steps,
.feature-modal-content ol.feature-steps,
.feature-modal-content ul.feature-steps {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* --- モバイル（599px以下） --- */
@media (max-width: 599px) {
  .feature-modal-content {
    width: 90%;
    max-width: 420px;
    height: 65vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px !important;
    text-align: left;
    position: relative;
    margin: 0; /* flex中央配置で制御 */
  }

  .feature-close {
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
  }

  .feature-step {
    grid-template-columns: 74px 1fr;
    column-gap: 8px;
    margin-bottom: 20px;
  }
  .feature-step-label {
    width: 64px;
    height: 26px;
    line-height: 26px;
    font-size: 0.8rem;
    margin-left: 6px;
  }
  .feature-rail-line {
    left: 36px;
    width: 5px;
    top: 28px;
  }
  .feature-step-content h3 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
  .feature-step-content p {
    font-size: 0.85rem;
    line-height: 1.6;
  }
}