@charset "UTF-8";
/* ---------- 色（デザイン画像から） ---------- */
/* 本文・見出しの文字 */
/* 日付・タグ・小さい文字 */
/* ロゴ風の灰色がかった茶色・アイコン */
/* ボタン・PICK UP の丸 */
/* 「もっと見る」・リンク・ラベルの文字 */
/* ラベルの下線・ボタンの枠 */
/* フッター・検索パネルの背景 */
/* SELECT のカード背景 */
/* 区切り線 */
/* ---------- 書体 ---------- */
/* ---------- 文字サイズ ----------
 基準幅 1366px のときに $px になり、画面が狭くなると小さくなる。
 一番小さいときは「$px - 2px」（ただし12px以上。もともと12px以下はそのまま）
-------------------------------- */
/*-------------
 タブレット（1000px以下）
---------------*/
@media screen and (max-width: 1000px) {
  .gr-feat-list,
  .gr-sel-list {
    flex-wrap: wrap;
    gap: 1.6rem 2%;
  }
  .gr-feat-item,
  .gr-sel-item {
    flex-basis: 32%;
    width: 32%;
  }
  .gr-jnl-list {
    gap: 2.2rem 2%;
  }
  .gr-jnl-item {
    flex-basis: 32%;
    width: 32%;
  }
  .gr-ing-item {
    flex-basis: 32%;
    width: 32%;
  }
  .gr-ing-img {
    flex-basis: 14%;
    width: 14%;
  }
  .gr-ing-txt {
    flex-basis: 82%;
    width: 82%;
  }
  /* 下層ページ：サイドバーは本文の下へ */
  .gr-lower-row {
    flex-wrap: wrap;
    gap: 3.5rem 0;
  }
  .gr-lower-main,
  .gr-lower-side {
    flex-basis: 100%;
    width: 100%;
  }
  .gr-ml-row {
    flex-wrap: wrap;
    gap: 2.4rem 3%;
  }
  .gr-ml-col {
    flex-basis: 48.5%;
    width: 48.5%;
  }
}
/*-------------
 スマホ（767px以下）
---------------*/
@media screen and (max-width: 767px) {
  /* header */
  html {
    scroll-padding-top: 5.5rem;
  }
  #gr-header-in {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .gr-header-row {
    gap: 0 4%;
  }
  .gr-logo-box {
    flex-basis: 56%;
    width: 56%;
  }
  .gr-logo {
    max-width: 170px;
  }
  .gr-logo-copy {
    max-width: 170px;
    margin-top: 0.3rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .gr-header-tools {
    flex-basis: 40%;
    width: 40%;
    justify-content: flex-end;
    gap: 0 6%;
  }
  .gr-tool-btn img,
  .gr-tool-link img {
    width: 72%;
  }
  /* スマホは上の段のメニューを隠して、ハンバーガーメニューにまとめる */
  .gr-gnav-box {
    display: none;
  }
  .gr-hsearch.is-open {
    width: 70vw;
  }
  /* 一番上のテーマタブ：スマホは5つを横いっぱいに */
  .gr-topbar-list {
    gap: 0;
  }
  .gr-topbar-item {
    flex-basis: 20%;
    width: 20%;
  }
  .gr-topbar-item a {
    letter-spacing: 0;
  }
  .gr-arc-search {
    width: 100%;
  }
  .gr-noresult-list {
    gap: 0.8rem 4%;
  }
  .gr-noresult-item {
    flex-basis: 48%;
    width: 48%;
  }
  .gr-search-label {
    flex-basis: 76%;
    width: 76%;
  }
  .gr-search-submit {
    flex-basis: 22%;
    width: 22%;
  }
  /* メイン画像 */
  .gr-hero-in {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .gr-hero-lead {
    margin-top: 1.4rem;
  }
  .gr-hero-btn {
    margin-top: 2rem;
  }
  /* テーマ5つ */
  .gr-theme-list {
    padding-top: 1.2rem;
    padding-bottom: 1rem;
  }
  .gr-theme-icon img {
    width: 30px;
  }
  .gr-theme-name {
    margin-top: 0.4rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* 見出し */
  .gr-sec-more {
    position: static;
    display: block;
    margin-top: 0.6rem;
    text-align: right;
    transform: none;
  }
  /* FEATURE・JOURNAL・SELECT（2列） */
  .gr-feature-in,
  .gr-journal-in,
  .gr-select-in {
    padding-top: 3.2rem;
  }
  .gr-feat-list,
  .gr-sel-list {
    gap: 1.4rem 4%;
    margin-top: 1.4rem;
  }
  .gr-feat-item,
  .gr-sel-item {
    flex-basis: 48%;
    width: 48%;
  }
  .gr-jnl-list {
    gap: 2rem 4%;
    margin-top: 1.4rem;
  }
  .gr-jnl-item {
    flex-basis: 48%;
    width: 48%;
  }
  .gr-feat-txt {
    padding: 0.8rem 7% 1rem;
  }
  .gr-sel-card {
    padding-bottom: 1.4rem;
  }
  .gr-sel-name,
  .gr-sel-desc {
    padding-left: 6%;
    padding-right: 6%;
  }
  .gr-sel-badge {
    top: 0.8rem;
    width: 36px;
    height: 36px;
  }
  .gr-sel-btn a {
    width: 80%;
  }
  /* 下層ページ */
  .gr-lower-main .gr-jnl-list {
    gap: 2rem 4%;
  }
  .gr-lower-main .gr-jnl-item,
  .gr-lower-main .gr-rel-list .gr-jnl-item {
    flex-basis: 48%;
    width: 48%;
  }
  .gr-concern-others .gr-side-chip {
    flex-basis: 32%;
    width: 32%;
  }
  .gr-postnav {
    flex-wrap: wrap;
    gap: 0.8rem 0;
  }
  .gr-postnav-item {
    flex-basis: 100%;
    width: 100%;
  }
  .gr-ml-col {
    flex-basis: 100%;
    width: 100%;
  }
  /* INGREDIENT（2列） */
  .gr-ingred-in {
    padding-top: 3.2rem;
  }
  .gr-ing-list {
    gap: 0 4%;
  }
  .gr-ing-item {
    flex-basis: 48%;
    width: 48%;
  }
  .gr-ing-img {
    flex-basis: 22%;
    width: 22%;
  }
  .gr-ing-txt {
    flex-basis: 74%;
    width: 74%;
  }
  /* footer */
  .gr-footer-in {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .gr-footer-row {
    flex-wrap: wrap;
    gap: 2.5rem 2%;
  }
  .gr-ft-brand {
    flex-basis: 100%;
    width: 100%;
  }
  .gr-ft-col {
    flex-basis: 32%;
    width: 32%;
  }
  .gr-ft-bottom-in {
    padding-bottom: 5rem;
  }
  .gr-ft-legal {
    flex-wrap: wrap;
    gap: 0.4rem 3%;
  }
  .gr-totop {
    bottom: 1.2rem;
  }
}