/*
 * Tailwind Preflight 上書き（Next.js 側のみ）
 * `app/globals.css` が読み込む Tailwind Preflight は img に `display: block` を適用するため、
 * WordPress テーマの CSS（`img { vertical-align: bottom }` 等がインライン前提）と競合し、
 * ヘッダーナビの ▽ 矢印（arrow_down_white.svg）がテキストの下に落ちる。
 * WP 側と同じレンダリングにするため、img はインライン扱いに戻す。
 */
img {
  display: inline-block;
}

/* 言語スイッチャーセレクトボックス (from style_add.css) */
.wpml-ls-item-toggle::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 10px;
  background-image: url("../img/arrow_down.svg");
  background-size: contain;
  background-repeat: no-repeat;
  border: 0 !important;
  border-top: 0 !important;
  top: calc(50% + .175em) !important;
}

.wpml-ls-legacy-dropdown {
  width: auto !important;
  margin-left: -6px;
}

.wpml-ls-legacy-dropdown .wpml-ls-item {
  margin-bottom: 2px !important;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-current-language > a {
  padding-left: 6px;
}

header > div .btn_110 {
  background-color: var(--main_color);
  width: 174px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-left: auto;
  position: relative;
}

header > div .btn_110 img {
  width: auto;
  height: 20px;
}

header > div .btn_110 a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

header > div .btn_110::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

header > div .btn_110:hover::after {
  opacity: 1;
}

footer > div > div > h3 {
  font-size: 1.17em;
  font-weight: bold !important;
}

footer > div > div:has(.calendar) .calendar table {
  font-size: inherit !important;
  /* color: inherit !important; */
}

footer > div > div:has(.calendar) .calendar table th,
footer > div > div:has(.calendar) .calendar table td {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: inherit !important;
}

footer > div > div:has(.calendar) > p span {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
}

footer .xo-event-calendar {
  font-family: Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo, MS PGothic, sans-serif;
  max-width: 500px;
  overflow: auto;
  position: relative;
}

footer .xo-event-calendar .xo-months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 15px;
  row-gap: 5px;
  margin: 8px 0 !important;
}

footer .xo-event-calendar .calendar.xo-month-wrap {
  background-color: #fff;
  padding: 5px 15px;
}

footer .xo-event-calendar table.xo-month {
  border: 1px solid #fff !important;
  /* border-right-width: 0 !important; */
  margin: 0 !important;
}

footer .xo-event-calendar table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: #333;
  table-layout: fixed !important;
  width: 100% !important;
}

footer .xo-event-calendar table.xo-month td,
footer .xo-event-calendar table.xo-month th {
  background-color: #fff !important;
  /* border: 1px solid #ccc !important; */
  padding: 0 !important;
  border: 1px solid #fff !important;
}

footer .xo-event-calendar table.xo-month .month-header {
  display: flex !important;
  flex-flow: wrap !important;
  justify-content: center !important;
  margin: 4px 0 !important;
  font-size: 0.9em;
  font-weight: bold;
}

footer .xo-event-calendar table.xo-month .month-header > span {
  text-align: left !important;
  flex-grow: 1 !important;
}

footer .xo-event-calendar table.xo-month > thead th {
  border-width: 0 1px 0 0 !important;
  color: #333 !important;
  font-size: 0.9em !important;
  font-weight: 700 !important;
  padding: 1px 0 !important;
  text-align: center !important;
  font-size: .8em !important;
}

footer .xo-event-calendar table.xo-month .month-dayname td div {
  font-size: 100% !important;
  line-height: 1.2em !important;
  padding: 4px !important;
  text-align: center !important;
  height: 1000px !important;
  font-size: .9em !important;
}

footer .xo-event-calendar table.xo-month .month-week {
  border: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

footer .xo-event-calendar table.xo-month .month-week table {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer .xo-event-calendar table.xo-month .month-dayname {
  border-width: 1px 0 0 1px !important;
  bottom: 0 !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

footer .xo-event-calendar table.xo-month .month-dayname td {
  border-width: 1px 1px 0 0 !important;
  padding: 0 !important;
}

footer .xo-event-calendar table.xo-month .month-dayname td div.other-month {
  opacity: 0.6 !important;
}
.xo-event-calendar table.xo-month .month-dayname td div.today {
  color: #00d;
  font-weight: 700;
}
footer .xo-event-calendar table.xo-month .month-dayname-space {
  height: 1.5em !important;
}

footer .xo-event-calendar table.xo-month .month-event-space {
  /* background-color: transparent !important; */
  height: 0.2em !important;
  border-collapse: separate;
  border-spacing: 0;
  color: #333;
}

footer .xo-event-calendar .holiday-all {
  color: #fff !important;
}

footer .xo-event-calendar .other-month {
  display: none !important;
}

footer .xo-event-calendar table.xo-month > thead th.saturday,
footer .xo-event-calendar table.xo-month > thead th.sunday {
  color: inherit !important;
}

footer .xo-event-calendar p.holiday-title {
  font-size: 90% !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  text-align: right !important;
}

footer .xo-event-calendar p.holiday-title span {
  border: 1px solid #ccc !important;
  margin: 0 6px 0 0 !important;
  padding: 0 0 0 18px !important;
}

@media (width < 1024px) {
  footer > div > div:has(.calendar) h3 {
    text-align: center !important;
    margin: 0 0 15px !important;
    font-size: 1.17em !important;
    font-weight:bold !important;
  }

  footer > div > div:has(.calendar) > div,
  footer > div > div:has(.calendar) > p {
    justify-content: center !important;
  }

  footer > div > div:has(.calendar) > div {
    gap: 0 2.5vw !important;
  }

  footer > div > div:has(.calendar) > p {
    margin: 10px 0 0 !important;
  }
}


/*
 * 検索フォーム関連（Next.js 側のみ）
 * WordPress テーマの common.css が 2026_03_12 以降 `.search-parts` / `.search-button` を持たなくなったため、
 * Next.js 側（品番検索 `NumberSearchForm` / 車型式検索 `CarModelSearchClient` / 適合車種検索 `CarTypeSearchForm`）の
 * `<div class="search-parts"><form class="relative">...</form></div>` 構造が
 * 枠線・タイトル帯・検索ボタン装飾を失って崩れる。旧 common.css（2026_03_12 テスト環境版）から復元。
 */
.search-parts {
  margin: 70px auto 0;
  padding: 0 0 20px;
  border-radius: 10px;
  border: 1px solid var( --main_color );
}
.search-parts > form > p {
  padding: 8px 20px 12px;
  margin: 0 0 20px;
  border-radius: 10px 10px 0 0;
  background: var(--main_color);
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
/*
 * バリデーションエラー文言（NumberSearchForm の `<p className="font-caution">`）は
 * 上の見出しルール（青背景・白文字・18px）の影響を受けてしまうため、明示的に上書きする。
 * 適合車種フォームのインラインエラー（dl.flex dd > .font-caution）と視覚を揃える。
 */
.search-parts > form > p.font-caution {
  margin: 4px 20px 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.3;
  color: var( --accent_color );
}
.search-parts > form > p + .flex {
  gap: 0 20px;
}
.search-parts > form > p + .flex > label {
  gap: 0 12px;
  cursor: pointer;
}
.search-parts > form input[type="search"] {
  width: 100%;
  max-width: 250px;
  margin: 0 0 0 10px;
  padding: 8px 20px;
  border-radius: 15px;
  border: 1px solid #b2b2b2;
}
.search-parts > form .absolute {
  top: .75em;
  right: 20px;
  color: #fff;
  padding: 0;
  line-height: 1;
}

.search-button {
  width: 4.25em;
  padding: 12px;
  border-radius: 8px;
  background: var( --main_color );
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background var( --transition-time ) var( --easing );
  display: flex;
  justify-content: center;
}
.search-button[type="submit"]:hover {
  background: #000;
}