/**
 * アクセスページ専用CSS
 * 
 * 設置場所: /wp-content/themes/monad_tcd110/template-parts/access-content.css
 * 読み込み: page-access.php 内で enqueue
 * 
 * 追記日: 2026/02/25
 * 追記者: 寿ラボ：上長
 * 
 * 注意: .post_content 内に配置されるため、テーマCSSとの詳細度競合を
 *       .post_content .access-page で上書きする
 */

/* ================================
   共通リセット（テーマ干渉対策）
   ================================ */
.post_content .access-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px 0;
}

/* テーマの ul/li スタイルをリセット */
.post_content .access-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post_content .access-page ul li {
  padding-left: 0;
  margin-bottom: 0;
}
.post_content .access-page ul li::before {
  content: none;
}

/* テーマの h2/h3 スタイルをリセット */
.post_content .access-page h2,
.post_content .access-page h3 {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* プレースホルダー（画像差し替え時に削除） */
.post_content .access-page .access-placeholder {
  background-color: #e0e0e0;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  min-height: 180px;
  border-radius: 4px;
}

/* ================================
   セクション見出し
   ================================ */
.post_content .access-page .access-section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.post_content .access-page .access-section-heading__en {
  display: block;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #006633;
  font-weight: 600;
  text-transform: uppercase;
}
.post_content .access-page .access-section-heading__ja {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin-top: 4px;
}

/* ================================
   事務所概要
   ================================ */
.post_content .access-page .access-overview {
  margin-bottom: 60px;
}

/* 定義リスト */
.post_content .access-page .access-overview__dl {
  margin: 0;
}
.post_content .access-page .access-overview__row {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 0;
}
.post_content .access-page .access-overview__row:first-child {
  border-top: 1px solid #e5e5e5;
}
.post_content .access-page .access-overview__row dt {
  width: 140px;
  flex-shrink: 0;
  font-weight: 600;
}
.post_content .access-page .access-overview__row dd {
  margin: 0;
}

/* 取扱業務リスト */
.post_content .access-page .access-overview__service-list li::before {
  content: "・" !important;
}

/* ================================
   アクセスセクション
   ================================ */
.post_content .access-page .access-directions {
  margin-bottom: 60px;
}

/* Google Map */
.post_content .access-page .access-map {
  margin-bottom: 40px;
  border-radius: 4px;
  overflow: hidden;
}
.post_content .access-page .access-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* 交通手段 */
.post_content .access-page .access-transport {
  margin-bottom: 30px;
}
.post_content .access-page .access-transport__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid #006633;
}
.post_content .access-page .access-transport__list li {
  padding: 6px 0 6px 20px;
  position: relative;
}
.post_content .access-page .access-transport__list li::before {
  content: "" !important;
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #006633;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.7em;
}
.post_content .access-page .access-transport__text {
  margin: 0;
}

/* ================================
   ルート案内
   ================================ */
.post_content .access-page .access-route {
  margin-bottom: 50px;
}
.post_content .access-page .access-route__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 3px solid #006633;
}
.post_content .access-page .access-route__steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.post_content .access-page .access-route__step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ルート番号 */
.post_content .access-page .access-route__number {
  flex-shrink: 0;
  width: 70px;
  text-align: center;
  padding-top: 4px;
}
.post_content .access-page .access-route__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #006633;
}
.post_content .access-page .access-route__num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #006633;
  line-height: 1.1;
}

/* ルート内容 */
.post_content .access-page .access-route__content {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.post_content .access-page .access-route__img-wrap {
  flex-shrink: 0;
  width: 280px;
  border-radius: 4px;
  overflow: hidden;
}
.post_content .access-page .access-route__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.post_content .access-page .access-route__desc {
  flex: 1;
  margin: 0;
}

/* ================================
   レスポンシブ
   ================================ */

/* タブレット */
@media screen and (max-width: 768px) {
  .post_content .access-page {
    padding: 40px 16px 60px;
  }
  .post_content .access-page .access-section-heading__ja {
    font-size: 24px;
  }

  /* 事務所概要 */
  .post_content .access-page .access-overview__row {
    flex-direction: column;
    gap: 4px;
  }
  .post_content .access-page .access-overview__row dt {
    width: auto;
  }

  /* ルート案内 縦積み */
  .post_content .access-page .access-route__step {
    flex-direction: column;
    gap: 8px;
  }
  .post_content .access-page .access-route__number {
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .post_content .access-page .access-route__label {
    display: inline;
  }
  .post_content .access-page .access-route__num {
    display: inline;
    font-size: 24px;
  }
  .post_content .access-page .access-route__content {
    flex-direction: column;
    gap: 12px;
  }
  .post_content .access-page .access-route__img-wrap {
    width: 100%;
  }
}

/* スマホ */
@media screen and (max-width: 480px) {
  .post_content .access-page {
    padding: 30px 14px 50px;
  }
  .post_content .access-page .access-section-heading__ja {
    font-size: 20px;
  }
  .post_content .access-page .access-map iframe {
    height: 280px;
  }
}