/**
 * 共通コンポーネント
 *
 * theme.css の後に読み込まれる。ページをまたいで使い回す部品をまとめる。
 * 色や角丸は theme.css の :root で定義したトークンを参照する。
 *
 * 1. ボタン
 * 2. リスト
 * 3. タグ / バッジ
 * 4. テーブル
 * 5. 定義リスト
 * 6. 補足ボックス
 */


/* ---------------------------------------------------------------
   1. ボタン

   基底の .button は theme.css で定義済み（緑の角丸ピル）。
   ここでは色とサイズの派生のみを持たせる。
   --------------------------------------------------------------- */

.button--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--navy);
}

.button--outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.button--navy {
  background: var(--navy);
  color: var(--white);
}

.button--navy:hover {
  background: #16305c;
}

.button--ghost {
  min-height: 0;
  padding: 6px 0;
  background: transparent;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.button--ghost:hover {
  background: transparent;
  opacity: .7;
  transform: none;
}

.button--sm {
  min-height: 44px;
  padding: 8px 20px;
  font-size: .86rem;
}

.button--lg {
  min-height: 68px;
  padding: 12px 40px;
  font-size: 1.05rem;
}

.button--full {
  display: flex;
  width: 100%;
}

.button[disabled],
.button.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* アイコンを併記する場合の間隔。 */
.button svg,
.button img {
  width: 1.1em;
  height: 1.1em;
  margin-left: .6em;
}

/* ボタンを横並びにする入れ物。 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}


a.smb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 1em;
  border-radius: 999px;
  background: var(--haudi-green);
  border: 1px solid var(--haudi-green);
  color: var(--white);
  font-weight: bold;
  white-space: nowrap;
  transition: transform .3s ease, background .3s ease;
}

a.smb-btn:hover {
  background: var(--white);
  color: var(--haudi-green);

}

@media (any-hover: hover) {
  .smb-btn:hover {
    filter: unset !important;
  }
}



.home a.smb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 999px;
  background: #50A69F;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 15px;
  box-shadow: 0 12px 30px -14px rgba(80, 166, 159, .85);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, background .4s;
}

.home a.smb-btn:hover::before {
  transform: translateX(120%);
}

.home a.smb-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.home a.smb-btn::after {
  content: "→";
  position: relative;
  right: 0;
  top: 50%;
  font-family: 'Space Mono', monospace;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.home a.smb-btn:hover::after {
  transform: translateX(5px);
  color: var(--white);
}

.home a.smb-btn:hover {
  transform: translateY(-3px);
  background: #3C837D;
  box-shadow: 0 18px 40px -12px rgba(60, 131, 125, .85);
  color: var(--white);
}


.home .is-style-ghost a.smb-btn {
  border: 1px solid var(--haudi-green);
  background: transparent;
  color: var(--haudi-green);
}

.home .is-style-ghost a.smb-btn:hover {
  background: var(--haudi-green);
  color: var(--white);
}

/* ---------------------------------------------------------------
   2. リスト
   --------------------------------------------------------------- */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}

.list li+li {
  margin-top: .5em;
}

.list--ordered {
  list-style: decimal;
}

/* 記号を消して字下げも解除する。 */
.list--plain {
  padding-left: 0;
  list-style: none;
}

/* 横並び。区切り線は付けない。 */
.list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.list--inline li+li {
  margin-top: 0;
}

/* チェックマーク付き。疑似要素で描画するため画像は不要。 */
.list--check {
  padding-left: 0;
  list-style: none;
}

.list--check li {
  position: relative;
  padding-left: 1.9em;
}

.list--check li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: .15em;
  width: 1.05em;
  height: .5em;
  border-left: 2px solid var(--haudi-green);
  border-bottom: 2px solid var(--haudi-green);
  transform: rotate(-45deg);
}

/* 番号を丸で囲む。 */
.list--steps {
  counter-reset: step;
  padding-left: 0;
  list-style: none;
}

.list--steps li {
  position: relative;
  padding-left: 3em;
  min-height: 2em;
}

.list--steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--haudi-green);
  color: var(--navy);
  font: 600 .85rem/1 "Space Grotesk", sans-serif;
}

/*--- 投稿ページ ---*/
.entry-content ul {
  line-height: 1.8;
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
  list-style: none;
}

.entry-content ul li {
  position: relative;
  padding-left: 1em;
}

.entry-content ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}




/* ---------------------------------------------------------------
   3. タグ / バッジ
   --------------------------------------------------------------- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border: 1px solid rgba(41, 45, 52, .18);
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1.7;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

a.tag:hover {
  border-color: var(--haudi-green);
  color: var(--haudi-green-dark);
}

.tag--filled {
  border-color: transparent;
  background: var(--haudi-green);
  color: var(--navy);
  font-weight: 600;
}

a.tag--filled:hover {
  background: #9ceadd;
  color: var(--navy);
}

.tag--navy {
  border-color: transparent;
  background: var(--navy);
  color: var(--white);
}


/* ---------------------------------------------------------------
   4. テーブル

   横に長い表は .table-scroll で包むと、ページ全体ではなく
   表だけが横スクロールする。
   --------------------------------------------------------------- */

table {
  border-color: inherit;
  border-collapse: collapse;
}

table th,
table td {
  border-style: unset !important;
  padding: 16px 32px !important;
  border-top: solid 1px #CBCBCB !important;
  border-bottom: solid 1px #CBCBCB !important;
  vertical-align: top !important;
  font-weight: normal !important;
}

@media screen and (max-width: 768px) {

  table th,
  table td {
    padding: 8px 16px !important;
  }

  table.is-stacked-on-mobile th {
    border-bottom: unset !important;
    border-top: unset !important;
    padding: 8px 16px !important;
    background-color: #ededed !important;
  }

  table.is-stacked-on-mobile td {
    padding: 8px 16px !important;
    border-top: unset !important;
    border-bottom: unset !important;
  }
}



/* ---------------------------------------------------------------
   5. 定義リスト

   <dl><div><dt>項目</dt><dd>内容</dd></div></dl> の形で使う。
   dt と dd を div で包むことで、行ごとの罫線を引けるようにしている。
   --------------------------------------------------------------- */

dl {
  margin: 0;
}

dl>div {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 8px 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(41, 45, 52, .12);
}

dl dt,
dl dd {
  margin: 0;
}

dl dt {
  color: var(--navy);
  font-weight: 600;
}



/* ---------------------------------------------------------------
   7. タイトル
   --------------------------------------------------------------- */


h1.entry-title {
  font-size: 40px;
  font-weight: 700;
  padding-bottom: 0.5em;
  position: relative;
  margin-bottom: 2.4rem;
}

@media (max-width: 767.98px) {
  h1.entry-title {
    font-size: 28px;
  }
}

h1.entry-title::before {
  content: "";
  width: 56px;
  height: 4px;
  background: var(--haudi-green);
  position: absolute;
  bottom: 0;
  left: 0;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  padding-left: 0.7em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin-top: 3rem;
  margin-bottom: 2rem;
  border-left: 6px solid var(--haudi-green);
}

@media (max-width: 767.98px) {
  .entry-content h2 {
    font-size: 20px;
  }
}

h3 {
  font-size: 24px;
}

body.home .entry-content h3 {
  padding-bottom: 0.2em;
  border-bottom: 2px solid var(--haudi-green);
}


@media (max-width: 767.98px) {
  h3 {
    font-size: 18px;
  }
}

h4 {
  font-size: 20px;
}

h5,
h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

@media (max-width: 767.98px) {

  h4 {
    font-size: 18px;
  }

  h5,
  h6 {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------
   7. 補足ボックス
   --------------------------------------------------------------- */

.notice {
  padding: 18px 22px;
  border-left: 4px solid var(--haudi-green);
  border-radius: 14px;
  background: rgba(80, 166, 159, .09);
}

.notice--warn {
  border-left-color: #d98324;
  background: rgba(217, 131, 36, .09);
}

.notice--error {
  border-left-color: #c0392b;
  background: rgba(192, 57, 43, .08);
}

.notice> :first-child {
  margin-top: 0;
}

.notice> :last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------
   8. 言語別表示

   日本語ページでは .item-ja（.item-jp も可）だけ、英語ページでは .item-en だけを表示する。
   <html lang> は翻訳プラグインがページの言語に合わせて切り替える。

   隠す側だけを指定し、表示する側に display: block は付けない。付けると PC/スマホの
   出し分け（.rxt-fig-sp { display: none } など）より強くなり、隠すはずの要素まで出てしまう。
   --------------------------------------------------------------- */

html[lang="ja"] .item-en {
  display: none;
}

html[lang="en"] :is(.item-ja, .item-jp) {
  display: none;
}


/* ---------------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------------- */

@media (max-width: 720px) {
  .button--full-sp {
    display: flex;
    width: 100%;
  }

  .dl>div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .table tbody th {
    width: auto;
  }
}