/* ===== Base / Variables ===== */
:root{
  --pink:#f8cfe0;
  --pink-light:#fdeaf3;
  --pink-dark:#e59abf;
  --gray-100:#fafafa;
  --gray-200:#f2f2f2;
  --gray-300:#e5e5e5;
  --gray-500:#999;
  --gray-700:#555;
  --gray-900:#222;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.05);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;}
html{font-size:16px;}
body{
  margin:0;
  padding:0;
  background:var(--gray-100);
  color:var(--gray-900);
  font-family:var(--font-sans);
  line-height:1.6;
}

a{color:var(--pink-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}

/* ===== Header ===== */
header{
  background:var(--pink-light);
  padding:.8rem 1rem;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

header h1{
  margin:0;
  font-size:1.3rem;
  line-height:1;
}
header h1 a{
  text-decoration:none;
  color:var(--gray-900);
}

/* 右側ナビ */
.global-nav{
  display:flex;
  gap:10px;
  margin:0;
  white-space:nowrap;
  justify-content:flex-end; /* 右寄せ */
  flex:0 0 auto;            /* 伸ばさない */
  margin-left:auto;         /* 見た目右側に寄せる */
}
.global-nav a{
  font-size:.88rem;
  color:var(--pink-dark);
  background:#fff;
  border:1px solid var(--gray-300);
  border-radius:999px;
  padding:4px 10px;
  text-decoration:none;
}
.global-nav a:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

/* 検索フォーム */
.search-form{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto; /* 伸ばさない（右寄せのまま） */
}
.search-form input[type="search"]{
  border:1px solid var(--gray-300);
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:.9rem;
  min-width:0;
  width:clamp(220px, 38vw, 560px);
  outline:none;
}
.search-form button{
  background:var(--pink-dark);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:6px 12px;
  font-size:.88rem;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width:540px){
  header{ flex-wrap:wrap; }
  header h1{ flex:1 1 auto; }
  .global-nav{
    width:100%;
    gap:8px;
  }
  .search-form input[type="search"]{ width:clamp(150px, 60vw, 360px); }
}

@media (min-width:540px){
  header{
    background:var(--pink-light);
    padding:.8rem 5rem;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
}

/* main {
  padding: 0 1rem;
} */

button{
  background:var(--pink-dark);
  color:#fff;
  border:none;
  padding:.5rem .8rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:opacity .15s;
  font-size:.9rem;
}
button:hover{opacity:.85;}
button:disabled{opacity:.5;cursor:not-allowed;}

/* 共通カード/グリッド */
.grid{
  display:grid;
  gap:14px;
}
@media (min-width:480px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}
@media (max-width:479px){
  .grid{grid-template-columns:repeat(3, 1fr);}
}

.card{
  background:#fff;
  border-radius:8px;
  padding:10px;
  text-align:center;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.card img{
  border-radius:var(--radius);
  object-fit:cover;
  max-width:120px;
  margin:0 auto .5rem;
}
.card p{
  margin:.4rem 0;
  font-size:.85rem;
  color:var(--gray-700);
}
.card p:first-of-type{
  font-weight:600;
  color:var(--gray-900);
}

/* ページネーション */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:2rem 0 1rem;
  flex-wrap:wrap;
}
.pagination a{
  padding:6px 12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  background:#fff;
}
.pagination span{
  font-size:.85rem;
  color:var(--gray-700);
}

/* 記事詳細 */
article h2{ margin-top:0; }
article ul{
  list-style:none;
  padding:0;
  margin:.5rem 0 1.2rem;
  color:var(--gray-700);
  font-size:.9rem;
}
article ul li{ margin-bottom:.2rem; }

/* Utilities */
.text-center{text-align:center;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}




/* --- ヘッダーの狭幅最適化（iPhone等） --- */
@media (max-width: 540px){
  /* 1) ナビ自体は折り返し許可 */
  .global-nav{
    flex-wrap: wrap;           /* ← これで2段にできる */
    justify-content: flex-end; /* 右寄せのまま */
    gap: 8px;
  }

  /* 2) 検索フォームは1行フル幅に */
  .global-nav .search-form{
    order: 1;                  /* 上段 */
    flex: 1 1 100%;
    max-width: none;
  }
  .global-nav .search-form input[type="search"]{
    width: 100%;               /* 収まり優先 */
    min-width: 0;
  }

  /* 3) 「ジャンル一覧」は下段の小さめチップとして */
  .global-nav > a:first-child{
    order: 2;                  /* 下段 */
    flex: 0 0 auto;
    padding: 3px 8px;          /* 小さめ */
    font-size: .82rem;
    line-height: 1;
    max-width: 100%;
  }

  /* 4) さらに極小端末での保険 */
  @media (max-width: 360px){
    .global-nav > a:first-child{
      padding: 3px 6px;
      font-size: .8rem;
    }
  }
}