@charset "utf-8";

/* header */
header {
  width: 100%;
  padding-block: var(--space-md);
}

header .container {
  width: 100%;
  max-width: var(--wrapper-xl);
  /* padding-top: var(--space-md); */
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-xs);
}

@media (min-width: 48rem) /* 768px */{
  header .container {
    flex-direction: row;         /* 横に並べる */
    justify-content: space-between; /* ★ロゴを左、ナビを右端へ */
    align-items: center;         /* 垂直方向の中央揃え */
    gap: var(--space-xs);        /* 万が一重なった時の最低限の隙間 */
  }
}

header h1 {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

header h1 img {
  width: clamp(15rem, 18vw, 21rem);
  height: auto;
  display: block;
}

header nav ul {
  display: flex;
  /* gap: var(--space-md); */
  gap: 0;
  align-items: center;

  letter-spacing: 0.06em;
  font-weight: 700;
}

header nav ul li a {
  display: block;
  padding: var(--space-sm);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.4s ease;
  padding-block: var(--space-xs);

  background: linear-gradient(#ecfb11, #ecfb11);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s ease;
}

nav ul li a:hover {
  color: var(--color-link-100);
  text-decoration: none;
  background-size: 100% 100%;
}

@media (min-width: 48rem) /* 768px */{
  header nav ul li a {
    margin-top: var(--space-xs);
  }
}

/*  */
.home h2 {
  color: var(--color-text-drk-100);
  animation: colorChange 12s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%    { color: var(--color-text-drk-200); }
  50%  { color: var(--color-text-drk-200); }
  55%  { color: #03bbb7; }
  60%  { color: #0363bb; }
  65%  { color: #8903bb; }
  70%  { color: #ecfb11; }
  75%  { color: var(--color-text-drk-200); }
  100% { color: var(--color-text-drk-200); }
}

/*  */
.container-home-works {
  padding-bottom: var(--space-xl);
}

/* footer */

footer {
  padding: var(--space-lg) 0 var(--space-md);
}

footer p {
  text-align: center;
  color: var(--color-text-drk-200);
}

header,
footer,
main {
    background: var(--color-bg-lgt-200);
}

/* 4. Privacy / 404 / Search / reCAPTCHAバッジ */

/* privacy */
.container-privacy {
  width: var(--wrapper-md);
}

.container-privacy h2 {
  font-size: var(--fs-lg);
  text-align: left;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* 404 */
.page-404 {
    padding: var(--space-xl) 0;
    text-align: center;
}
.page-404__inner {
    max-width: 600px;
    margin: 0 auto;
}
.page-404__title {
    font-size: clamp(4rem, 10vw, 8rem); line-height: 1;
    color: var(--color-main);
    margin-bottom: var(--space-xs);
}
.page-404__lead {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}
.page-404__text {
    line-height: var(--lh-md);
    margin-bottom: var(--space-xl);
}
.page-404__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* search */
/* search */
.search-header {
  width: 100%;
  max-width: var(--wrapper-md);
  margin: var(--space-xl) auto;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border-100);
}

.search-header h1 {
  display: flex;
  justify-content: center;
  align-items: baseline; /* 文字の下端を揃える */
  gap: 0.5em;
  font-size: var(--fs-lg);
  margin: 0;
}

/* 検索キーワード（span）のスタイル */
.search-title span {
  font-size: var(--fs-md); /* 0件の部分は少し小さくする */
  color: var(--color-text-drk-200);
  font-weight: 400;
}

/* 検索窓全体のラッパー */
.search-form-wrapper {
    width: 100%;
    margin-bottom: var(--space-xl);
    text-align: center;
}

/* WordPressのデフォルトformに対する指定 */
.search-form-wrapper form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* 検索入力欄（input）のスタイル */
.search-form-wrapper input[type="text"],
.search-form-wrapper input[type="search"] {
  -webkit-appearance: none;
  width: 60%;
  max-width: 400px;
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-bottom: 1px solid var(--color-border-100);
  background: transparent;
  outline: none;
  font-size: var(--fs-md);
  transition: border-color 0.3s;
}

.search-form-wrapper input[type="text"]:focus,
.search-form-wrapper input[type="search"]:focus {
  border-bottom-color: var(--color-text-drk-200);
}

/* 検索ボタン（submit）のスタイル */
.search-form-wrapper input[type="submit"] {
  background: none;
  border: 1px solid var(--color-border-100);
  padding: 6px var(--space-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-text-drk-200);
  transition: all 0.3s;
}

.search-form-wrapper input[type="submit"]:hover {
  color: var(--color-text-lgt-100);
  background: var(--color-text-drk-200);
  border-color: var(--color-text-drk-200);
}

/* 0件の時の表示 */
.search-none {
  text-align: center;
  padding: var(--space-lg) 0;
}

/** reCAPTCHAバッジと警告文を非表示化 */
.grecaptcha-badge {
    visibility: hidden;
}