@charset "UTF-8";

/**************************************************
 * 0. ユーティリティ
 **************************************************/

/* --- スマホ用改行（PCでは非表示） --- */
.sp-br {
  display: none;
}


/**************************************************
 * 1. タイトル・テキスト装飾
 **************************************************/

/* --- セクション背景色 --- */
article.article .entry-content section {
  background-color: var(--bg-1);
}

/* --- H3 --- */
.article .ttl-3-lg {
  margin-bottom: 32px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  position: relative;
}

/* --- H4 --- */
.article .ttl-4-md {
  margin-bottom: 16px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* --- H5 --- */
.article .ttl-5-sm {
  margin-bottom: 16px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/**************************************************
 * 2. セクションA（.txt）
 **************************************************/
.txt {
  margin-bottom: 80px;
  text-align: center;
}

.txt p {
  line-height: var(--lh-base);
}


/**************************************************
 * 3. 左右カラムレイアウト（.row）
 **************************************************/
.row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 50px;
}

.row .left {
  height: 500px;
}

.row .left img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row .right {
  text-align: left;
}

/* セクションC（列逆順） */
#sec_c .row {
  flex-direction: row-reverse;
}


/**************************************************
 * 4. アクセスエリア（.map_in）
 **************************************************/
.map_in {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 400px;
  background-color: var(--bg-1);
}

/* --- 左側（住所・ロゴ） --- */
.map_in .left {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 50%;
  margin-right: 40px;
}

.map_in .left .access_box {
  width: 500px;
}

.map_in .left .access_box ul {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.map_in .left .access_box .logo img {
  display: block;
  width: auto;
  height: 82px;
  margin-right: 24px;
}

.map_in .left .access_box .add p {
  line-height: 1.8;
}

/* --- テーブル --- */
.access_box table {
  width: 90%;
  border: solid 1px var(--clr-border);
  border-collapse: collapse;
}

table th,
table td {
  position: relative;
  padding: 0.8em;
}

.access_box table th {
  min-width: 120px;
  background-color: var(--bg-4);
  font-weight: var(--fw-bold);
  text-align: left;
}

.access_box table td {
  font-weight: normal;
}

/* --- 右側（Googleマップ） --- */
.map_in .right {
  width: 50%;
}

.map_in .right iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
}


/**************************************************
 * 3. レスポンシブ (max-width: 767px)
 **************************************************/
@media screen and (max-width: 767px) {

  /* --- ユーティリティ --- */
  .sp-br {
    display: block;
  }

  /* --- セクション共通 --- */
  article.article .entry-content section {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  /* --- タイトル --- */
  .article .ttl-2-xl {
    padding-bottom: 16px;
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
  }

  .article .ttl-3-lg {
    margin-bottom: 24px;
    font-size: var(--fs-lg);
    line-height: var(--lh-heading);
  }

  .article .ttl-3-lg span {
    display: inline;
    background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .article .ttl-3-lg span::after {
    display: none;
  }

  .article .ttl-4-md {
    font-size: var(--fs-base);
  }

  .article .ttl-5-sm {
    font-size: var(--fs-base);
  }

  .article .ttl-6-xs {
    font-size: var(--fs-base);
  }

  /* --- カラム落ち --- */
  .row {
    grid-template-columns: 1fr;
    margin: 40px 0 64px;
  }

  .row .left {
    max-width: 500px;
    height: auto;
    aspect-ratio: 500 / 350;
  }

  .row .right {
    margin: 0;
    text-align: left;
  }

  /* --- アクセス (.map_in) --- */
  .map_in {
    flex-wrap: wrap;
    min-height: auto;
    margin-top: 40px;
  }

  .map_in .left {
    justify-content: center;
    width: 100%;
    margin-right: 0;
    padding: 40px 20px;
  }

  .map_in .left .access_box ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .map_in .left .access_box .logo {
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
  }

  .map_in .left .access_box .logo img {
    margin: 0 auto;
  }

  .map_in .left .access_box .add {
    width: 100%;
    text-align: left;
  }

  .access_box table {
    width: 100%;
    margin: 0 auto;
  }

  .map_in .right {
    width: 100%;
    height: 300px;
  }

  .map_in .right iframe {
    min-height: 300px;
  }
}