/* ===================================
   company.css - 会社概要ページ固有スタイル
   =================================== */

:root {
  --navy: #0E2F72;
  --cyan: #5DC2D0;
  --white: #FFFFFF;
}

/* -----------------------------------
   英語小見出し
   ----------------------------------- */
.section-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: var(--cyan);
  line-height: 1.95;
  margin-bottom: 8px;
}

/* -----------------------------------
   会社情報セクション
   ----------------------------------- */
.company-info {
  padding: 72px 0 80px;
}

.company-table {
  width: 100%;
}

.company-table__row {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--cyan);
  font-size: 16px;
  font-weight: 500;
  gap: 0;
}

.company-table__row:first-child {
  border-top: 1px dashed var(--cyan);
}

.company-table dt {
  min-width: 178px;
  flex-shrink: 0;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.75;
}

.company-table dd {
  color: var(--navy);
  font-weight: 500;
  line-height: 1.75;
}

.company-table dd a {
  color: var(--cyan);
  text-decoration: underline;
}

/* -----------------------------------
   サロン案内セクション
   ----------------------------------- */
.salon-section {
  padding: 80px 0;
  background: #f8fbff;
}

.salon-section__header {
  margin-bottom: 48px;
}

.salon-section__title {
  font-family: 'M PLUS 1', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 4px;
}

/* -----------------------------------
   サロンナビゲーション
   ----------------------------------- */
.salon-nav {
  margin-bottom: 56px;
}

.salon-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.salon-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 30px 6px 40px;
  border: 1px solid var(--cyan);
  border-radius: 400px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cyan);
  font-family: 'M PLUS 1', sans-serif;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.salon-nav__btn:hover {
  background: var(--cyan);
  color: var(--white);
}

.salon-nav__arrow {
  font-size: 10px;
  display: inline-block;
  transform: rotate(180deg);
}

/* -----------------------------------
   サロンコンポーネント
   ----------------------------------- */
.salon {
  padding: 60px 0;
  border-top: 1px dashed var(--cyan);
}

.salon:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* サロン上部: 写真 + 情報 */
.salon__top {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.salon__photo {
  width: 247px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.salon__photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.salon__info {
  flex: 1;
}

.salon__name {
  font-family: 'M PLUS 1', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 24px;
}

.salon__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.salon__detail-row {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
}

.salon__detail-row dt {
  min-width: 104px;
  flex-shrink: 0;
  line-height: 1.75;
}

.salon__detail-row dd {
  line-height: 1.75;
}

/* サロン下部: マップ + 実写 */
.salon__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 240px;
}

.salon__map {
  border-radius: 10px;
  overflow: hidden;
}

.salon__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.salon__realphoto {
  border-radius: 10px;
  overflow: hidden;
}

.salon__realphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ストリートビュー（マップ右側） */
.salon__streetview {
  border-radius: 10px;
  overflow: hidden;
}

.salon__streetview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -----------------------------------
   サロン バリエーション
   ----------------------------------- */

/* 建物写真なし: info全幅 */
.salon__top--noimage {
  display: block;
}
.salon__top--noimage .salon__info {
  width: 100%;
}

/* マップのみ: modifier クラスだがサイズ変更は行わない（将来拡張用に HTML 側は残す） */

/* -----------------------------------
   レスポンシブ: 1100px
   ----------------------------------- */
@media (max-width: 1100px) {
  .salon__top {
    gap: 32px;
  }

  .salon__photo {
    width: 200px;
  }

  .salon__name {
    font-size: 22px;
  }
}

/* -----------------------------------
   レスポンシブ: 767px
   ----------------------------------- */
@media (max-width: 767px) {
  .company-info {
    padding: 48px 0 60px;
  }

  .company-table dt {
    min-width: 100px;
  }

  .salon-section {
    padding: 48px 0;
  }

  .salon-section__title {
    font-size: 22px;
  }

  .salon__top {
    flex-direction: column;
    gap: 20px;
  }

  .salon__photo {
    width: 100%;
  }

  .salon__photo img {
    height: 200px;
  }

  .salon__name {
    font-size: 20px;
  }

  .salon__bottom {
    grid-template-columns: 1fr;
    height: auto;
  }

  .salon__map {
    height: 200px;
  }

  .salon__streetview {
    height: 200px;
  }


  .salon__realphoto {
    height: 180px;
  }

  .salon-nav__list {
    gap: 10px;
  }
}