@charset "UTF-8";
/*
  お問い合わせページ専用（inc/head.php が page id = contact のときだけ読む）
*/

/* ==========================================================
   ページの見出しの写真：左上の「Juniors tire」の看板が見えるように拡大して左上に寄せる
   （写真が 636×476 と小さいので粗くなるが、看板を見せるのを優先）
   ========================================================== */
.page-hero--contact {
  background-position: left top;
  background-size: 120% auto; /* 1280px 幅で約 2.4 倍。看板の楕円が見出しの右あたりに来る */
}
@media (max-width: 767px) {
  .page-hero--contact {
    background-position: -150px top;
    background-size: 300% auto; /* SP は固定ヘッダーの下に看板が出るよう大きめに */
  }
}

/* ==========================================================
   電話・LINE
   中央に 560px の列（見出しはアイコン＋文字、ボタンは幅 340px で中央）、PC は左右に六角形の写真を散らす
   ========================================================== */
.contact {
  position: relative;
  overflow: hidden;
  min-height: 720px; /* 六角形（右下の img04）が切れない高さ */
  padding: 70px 0 100px;
  /* 背景（bg_white）の敷き方は style.css の .bg-white */
}
.contact-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.contact-block + .contact-block {
  margin-top: 70px;
}

/* 見出し：左に 64px のアイコン、右に見出し・番号（まとまりごと中央に置き、中は左揃え） */
.contact-head {
  display: inline-block;
  text-align: left;
}
.contact-icon,
.contact-head-text {
  display: inline-block;
  vertical-align: middle;
}
.contact-icon {
  width: 64px;
  height: 64px;
  margin-right: 14px;
}
.contact-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* 電話のアイコンは白い受話器（SVG）を青い角丸の四角に入れる */
.contact-icon--tel {
  padding: 13px;
  border-radius: 12px;
  background: #2f85f1;
}
.contact-title {
  font-size: 28px;
  font-size: clamp(18px, 12.22px + 1.541vw, 28px); /* SP 18px 〜 PC 28px */
  font-weight: 900;
  line-height: 1.35;
}
.contact-block--tel .contact-title,
.contact-tel {
  color: #2f85f1;
}
.contact-block--line .contact-title,
.contact-line-id {
  color: #06b555;
}
.contact-tel-num,
.contact-line-id {
  font-size: 28px;
  font-size: clamp(20px, 15.38px + 1.233vw, 28px); /* SP 20px 〜 PC 28px */
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.contact-tel-num,
.contact-hours {
  display: inline-block;
  vertical-align: middle;
}
.contact-hours {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* ボタン：幅 340px、斜めに色を分けたツートン（電話は青、LINE は緑。デザインの色を実測） */
.contact-btn {
  display: block;
  width: 340px;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 12px 10px;
  color: #fff;
  font-size: 28px;
  font-size: clamp(22px, 18.53px + 0.925vw, 28px); /* SP 22px 〜 PC 28px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s;
}
.contact-btn:hover {
  opacity: 0.85;
}
/* 色の切り替え：右上の角と左下の角を結ぶ線で、左上と右下の直角三角形に分ける
   （「右下へ向かうグラデーション」を 50% で切り替えると、その線がちょうど角と角を結ぶ） */
.contact-btn--tel {
  background: #2f85f1;
  background: linear-gradient(to bottom right, #3c9ff2 50%, #2f85f1 50%);
}
.contact-btn--line {
  background: #06b555;
  background: linear-gradient(to bottom right, #4cb77f 50%, #06b555 50%);
}

/* 繋がらないとき用：小さな注記（緑の▼）＋白い角丸ボタン（緑の枠と下の影） */
.contact-sub-note {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
}
.contact-sub-note::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border-top: 8px solid #239615;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  vertical-align: 0.05em;
}
.contact-sub-btn {
  display: block;
  width: 330px;
  max-width: 100%;
  margin: 6px auto 0;
  padding: 5px 10px;
  border: 2px solid #239615;
  border-radius: 20px;
  box-shadow: 0 3px 0 #239615;
  background: #fff;
  color: #333333;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  text-decoration: none;
  transition: opacity 0.2s;
}
.contact-sub-btn:hover {
  opacity: 0.8;
}

/* LINE：「LINEする」の左に QR（ボタンは電話のボタンと同じ位置にそろえるので、QR は枠の外側に置く） */
.contact-line-row {
  position: relative;
  width: 340px;
  max-width: 100%;
  margin: 18px auto 0;
}
.contact-line-row .contact-btn {
  margin-top: 0;
}
.contact-line-qr {
  position: absolute;
  top: 0;
  right: 100%;
  width: 69px; /* 幅を決めないと、img の max-width: 100%（reset.css）で 0 に潰れる */
  margin-right: 10px;
}
.contact-line-qr img {
  display: block;
  width: 69px;
  height: 69px;
  background: #fff;
}

/* ---------- 六角形の写真（PC） ----------
   左上（1）と右上（3）は画面の端に付け、自分の幅の 10% だけ画面の外へはみ出させる。
   左下（2）と右下（4）は画面の中央を基準に置く（calc(50% ± 〇px)。画面幅 1280px のときデザインどおり） */
.contact-hexes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.contact-hex {
  position: absolute;
}
.contact-hex img {
  display: block;
  width: 100%;
  height: auto;
}
.contact-hex--1 { top: 40px;  left: -17px;  width: 165px; } /* 165 × 10% */
.contact-hex--2 { top: 230px; left: calc(50% - 590px); width: 270px; }
.contact-hex--3 { top: 66px;  right: -32px; width: 316px; } /* 316 × 10% */
.contact-hex--4 { top: 410px; left: calc(50% + 345px); width: 180px; }

/* 1024〜1199px：右上の六角形が本文にかからないよう小さく */
@media (min-width: 1024px) and (max-width: 1199px) {
  .contact-hex--3 {
    right: -25px; /* 250 × 10% */
    width: 250px;
  }
}

/* ---------- タブレット以下：六角形は本文の下に横並び ---------- */
@media (max-width: 1023px) {
  .contact {
    min-height: 0;
    padding: 56px 0 60px;
  }
  .contact-hexes {
    position: static;
    width: calc(100% - 40px);
    max-width: 600px;
    height: auto;
    margin: 48px auto 0;
    font-size: 0;
    text-align: center;
  }
  .contact-hex,
  .contact-hex--1,
  .contact-hex--2,
  .contact-hex--3,
  .contact-hex--4 {
    position: static;
    display: inline-block;
    width: 23%; /* 4つを同じ大きさで横並び（PC の個別の幅を上書き） */
    margin: 0 1%;
    vertical-align: middle;
  }
}
@media (max-width: 767px) {
  .contact {
    padding-top: 48px;
  }
  .contact-block + .contact-block {
    margin-top: 50px;
  }
  .contact-icon {
    width: 48px;
    height: 48px;
    margin-right: 10px;
  }
  .contact-icon--tel {
    padding: 10px;
    border-radius: 10px;
  }
  /* 営業時間は番号の下の行へ */
  .contact-hours {
    display: block;
    margin-left: 0;
  }
  /* SP では自分の画面の QR は読めないので出さない（「LINEする」で開ける） */
  .contact-line-qr {
    display: none;
  }
}