/* =====================================
   基本定義（375px を 100vw に換算）
===================================== */
:root {
  --base-width: 375; /* モバイル基準横幅 */
  --base-font-size: 16; /* デフォルトフォントサイズ */
  --base-width-sp: 375;
  --base-width-pc: 1440;

  --hero-v-height: calc(694 / var(--base-width) * 100vw);
  --hero-v-top: calc(60 / var(--base-width) * 100vw);
  --hero-h-aspect: 1440 / 619;
}

@font-face {
  font-family: 'DS-Digital';
  src: url('../fonts/ds-digi.woff2') format('woff2');
  font-display: swap;
}

html, body {
  touch-action: manipulation;
  overscroll-behavior: none;
}


#main {
  background-color: #f5f5f5;
}
.section-spacer {
  height: calc(40 / var(--base-width-sp) * 100vw);
  background-color:#f5f5f5;
}

#search-detail-container {
  transition: opacity 0.3s ease;
}
#search-detail-container.fade-out {
  opacity: 0;
  pointer-events: none;
}
#search-detail-container.fade-in {
  opacity: 1;
}


.search-sort-buttons {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.search-sort-buttons .sort-button {
  padding: 4px 10px;
  background-color: #f0f0f0;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: pointer;
}

/* =====================================
   Heroセクション（縦長）
===================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: var(--hero-v-height);
  overflow: hidden;
  margin-top: calc(50 / 375 * 100vw);
}

.hero-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: calc(530 / var(--base-width) * 100vw);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.hero-countup {
  font-size: calc(90 / var(--base-width) * 100vw);
  font-weight: 700;
  color: #C40A09;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.count-number {
  font-family: 'DS-Digital', monospace;
  letter-spacing: 0.1em;
}


@media screen and (min-aspect-ratio: 1/1) {

  section-spacer {
    height: calc(60 / var(--base-width-pc) * 100vw);
    background-color:#f5f5f5;
  }

  .hero-section {
    aspect-ratio: 1440 / 619;
    height: auto;
    margin-top: calc(50 / 1440 * 100vw); /* ← PC用メニューの高さ */
  }

  .hero-overlay {
    top: calc(440 / var(--base-width-pc) * 100vw);
    left: 50%
  }

  .hero-countup {
    font-size: calc(110 / var(--base-width-pc) * 100vw);
  }

  .section-spacer {
    height: calc(50 / var(--base-width-pc) * 100vw);
    background-color:#f5f5f5;
  }
}

/* =====================================
   検索セクション（縦長）
===================================== */
.search-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(40 / var(--base-width-sp) * 100vw);
  gap: calc(25 / var(--base-width-sp) * 100vw);
  background-color: #f5f5f5;
}

.search-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  width: calc(301 / var(--base-width-sp) * 100vw);
}

.search-line.line-1 {
  font-family: 'Oswald', sans-serif;
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  letter-spacing: 0.15em;
  color: #231815;
}

.search-line.line-2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(24 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: 1.5;
  color: #231815;
}

/* 縦長（モバイル）ベース */
.search-keyword-form {
  display: flex;
  flex-direction: column;
  gap: calc(6.9 / var(--base-width-sp) * 100vw);
  width: calc(325 / var(--base-width-sp) * 100vw);
}

.keyword-form {
  display: flex;
  flex-direction: column;
  gap: calc(6.9 / var(--base-width-sp) * 100vw);
}

.search-input-group {
  display: flex;
  align-items: center;
  padding: 0 calc(17.25 / var(--base-width-sp) * 100vw);
  height: calc(55 / var(--base-width-sp) * 100vw);
  background: #fff;
  border: 2px solid #231815;
  box-sizing: border-box;
}

.keyword-input {
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  line-height: 1px !important;
  color: #bbb;
  border: none !important;
  outline: none;
  background: none;
  text-align: center;
}

input[type="text"],
input[type="search"],
.keyword-input {
  font-size: initial !important;
  font-size: calc(14 / var(--base-width-sp) * 100vw) !important;
  line-height: 3;
  letter-spacing: 0.05em;
  color: #231815;
  font-weight: 500;
}


.keyword-input::placeholder {
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  line-height: 1px !important;
  letter-spacing: 0.05em;
  color: #bbb;
  text-align: center;
}

.search-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(55 / var(--base-width-sp) * 100vw);
  background: #231815;
  border: 2px solid #231815;
  box-sizing: border-box;
}

/* -----------------------------
   共通：検索ボタンベース
----------------------------- */
.btn-search {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: calc(11.5 / var(--base-width-sp) * 100vw);
  width: calc(325 / var(--base-width-sp) * 100vw);
  height: calc(55 / var(--base-width-sp) * 100vw);
  background-color: #231815;
  border: calc(2 / var(--base-width-sp) * 100vw) solid #231815;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: calc(16 / var(--base-width-sp) * 100vw) !important;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
}

/* ==========================
   選択ボタンブロック（共通）
   ========================== */
#search-select-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  width: calc(325 / var(--base-width-sp) * 100vw);
  /*margin-top: calc(20 / var(--base-width-sp) * 100vw);*/
  align-items: center;
}

.option-row {
  display: flex;
  flex-direction: column;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  width: 100%;
}

.search-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  width: 100%;
  height: calc(55 / var(--base-width-sp) * 100vw);
  background-color: #fee600;
  color: #231815;
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 calc(20 / var(--base-width-sp) * 100vw);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

/* アイコン部 */
.search-option-btn i {
  min-width: 1.2em;
  display: inline-block;
  font-size: 1em;
  margin-right: calc(6 / var(--base-width-sp) * 100vw);
  vertical-align: middle;
  line-height: 1;
  width: 1em;
  text-align: center;
}

/* アクティブ時 */
.search-option-btn.active {
  background-color: #ffffff;
  color: #231815;
  border-color: #231815;
}

.search-option-btn:hover {
  filter: brightness(110%);
}

/* 任意：フェードアウト用初期スタイル（削除対象に効かせる） 
.select-parts-section,
#addresssearch-wrapper,
#mapsearch-wrapper,
.station-search-section,
#pricesearch-wrapper,
#search-result-section {
  transition: opacity 1.3s ease;
}
*/

/* 横長レイアウト用調整 */
@media screen and (min-aspect-ratio: 1/1) {

  .search-section {
    padding-top: calc(50 / var(--base-width-pc) * 100vw);
    gap: calc(50 / var(--base-width-pc) * 100vw);
  }

  .search-line.line-1 {
    font-size: calc(16 / var(--base-width-pc) * 100vw);
  }

  .search-line.line-2 {
    font-size: calc(36 / var(--base-width-pc) * 100vw);
  }

  .search-keyword-form {
    width: calc(869.9 / var(--base-width-pc) * 100vw);
    display: block; /* wrapperはblockでOK */
  }

  .keyword-form {
    display: flex;
    flex-direction: row;
    gap: calc(6.9 / var(--base-width-pc) * 100vw);
  }

  .search-input-group {
    width: calc(633 / var(--base-width-pc) * 100vw);
    height: calc(60 / var(--base-width-pc) * 100vw);
    padding: 0 calc(17.25 / var(--base-width-pc) * 100vw);
    text-align: left;
  }

  .keyword-input {
    font-size: calc(20 / var(--base-width-pc) * 100vw);
    text-align: left;
  }

  .keyword-input::placeholder {
    font-size: calc(20 / var(--base-width-pc) * 100vw); /* base-width-sp は上書き済み */
    text-align: left;
  }

  input[type="text"],
  input[type="search"],
  .keyword-input {
    font-size: initial !important;
    font-size: calc(20 / var(--base-width-pc) * 100vw) !important;
    line-height: 1px !important;
    letter-spacing: 0.05em;
    color: #231815;
    font-weight: 500;
  }

  .search-button-group {
    width: calc(230 / var(--base-width-pc) * 100vw);
    height: calc(60 / var(--base-width-pc) * 100vw);
  }

  .btn-search {
    gap: calc(11.5 / var(--base-width-pc) * 100vw);
    width: calc(230 / var(--base-width-pc) * 100vw);
    height: calc(60 / var(--base-width-pc) * 100vw);
    border-width: calc(2 / var(--base-width-pc) * 100vw) !important;
    font-size: calc(20 / var(--base-width-pc) * 100vw) !important;
  }

  #search-select-buttons {
    width: calc(1010 / var(--base-width-pc) * 100vw);
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .option-row {
    flex-direction: row;
    justify-content: center;
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .search-option-btn {
    width: calc(500 / var(--base-width-pc) * 100vw);
    height: calc(60 / var(--base-width-pc) * 100vw);
    font-size: calc(20 / var(--base-width-pc) * 100vw);
  }

  .search-option-btn i {
    margin-right: calc(6 / var(--base-width-pc) * 100vw);           /* アイコンと文字の間隔 */
  }
}