@charset "utf-8";
/* =============================================================
   kids/css/responsive.css  v2.0
   既存の固定幅レイアウト（700px基準）をレスポンシブ化する
   追加スタイルシート。既存CSS(set.css)の後に読み込む。
   ============================================================= */

/* =============================================================
   ■ ベース：全幅共通の上書き
   ============================================================= */

/* 横スクロール防止 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

#header02 .header2inner,
#main,
#gnavi {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
}

/* #header01 img の旧ルールは下部のロゴ専用ルールで上書き済み */

#header02 {
  background-size: auto 165px;
  background-position: center top;
  height: 165px;
  flex-shrink: 0;      /* body flex で縮まないよう固定 */
  align-self: flex-start;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
#header02 .header2inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 56px;   /* (165px - 53px) / 2 = 56px で縦中央 */
  padding-left: 10px;
  box-sizing: border-box;
}
#header02 .header2inner img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* tit_kids.svg — 詳細度を上げて height:auto を確実に上書き */
#header02 .header2inner img.tit-kids {
  height: 53px;
  width: auto;
  max-width: none;
}

#main {
  margin: 0 auto;
  padding: 0;
}

#content {
  width: 100%;
  box-sizing: border-box;
}

/* 全画像の溢れ防止 */
img {
  max-width: 100%;
  height: auto;
}

.indent2,
.side {
  width: auto;
  box-sizing: border-box;
}

.head {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
}

#credit {
  background-size: auto 67px;
}

/* Flashコンテナ */
#flashContent {
  width: 100% !important;
  max-width: 567px;
  height: auto;
}
#flashContent > * {
  width: 100% !important;
  height: auto !important;
}


/* =============================================================
   ■ タブレット〜SP共通 (〜 699px)
   ============================================================= */
@media screen and (max-width: 699px) {

  /* 固定幅要素を強制リセット */
  table {
    width: 100% !important;
    max-width: 100%;
  }
  td {
    width: auto !important;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* #main の padding は #gnavi には付けない */
  #main {
    padding-left: 0;
    padding-right: 0;
  }
  /* #gnavi 以外のコンテンツに余白を付ける */
  #content,
  .c-top,
  .photocase {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }
  /* メインイラストは全幅 */
  #mainIllust {
    padding: 0;
    width: 100%;
    max-width: none;
  }
  /* layout.css の width:700px 固定を上書き */
  #toppage #gnavi {
    width: 100% !important;
    margin: 0 !important;
  }

  #header02 {
    background-image: none;   /* head_bg.jpg を非表示 */
    background-color: #fff;
    height: auto;
    min-height: 0;
  }
  #header02 .header2inner {
    padding: 12px 0 12px 12px;
  }
  #header02 .header2inner img {
    width: auto;
  }
  #header02 .header2inner img.tit-kids {
    height: 44px;
    width: auto;
  }

  /* ---- 2カラム → 1カラム (#kidscate) タブレット ---- */
  .leftarea {
    float: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .rightarea {
    float: none !important;
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* ---- サイドナビ → 横型タグクラウド（タブレット） ---- */
  #tanenavi {
    background: none !important;
    width: 100% !important;
    display: block;
    padding: 6px 0 10px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 12px;
  }
  #tanenavi .tpbg,
  #tanenavi .b_bg {
    display: none !important;
  }
  #tanenavi .m_bg {
    background: none !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
  }
  #tanenavi .nyuuyoubox,
  #tanenavi .nikuyoubox,
  #tanenavi .umabox,
  #tanenavi .yagibox,
  #tanenavi .butabox,
  #tanenavi .menyoubox,
  #tanenavi .toribox {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 6px;
    margin: 0;
  }
  #tanenavi .nyuuyoubox p,
  #tanenavi .nikuyoubox p,
  #tanenavi .umabox p,
  #tanenavi .yagibox p,
  #tanenavi .butabox p,
  #tanenavi .menyoubox p,
  #tanenavi .toribox p {
    font-size: 11px;
    padding: 1px 5px;
    margin-bottom: 0 !important;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.6;
    flex: 0 0 auto;
  }
  #tanenavi .nyuuyoubox li,
  #tanenavi .nikuyoubox li,
  #tanenavi .umabox li,
  #tanenavi .yagibox li,
  #tanenavi .butabox li,
  #tanenavi .menyoubox li,
  #tanenavi .toribox li {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px;
    white-space: nowrap;
  }

  /* グローバルナビ：SVGボタン（SP/タブレット共通） */
  #gnavi {
    overflow-x: visible;
    padding: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  #gnavi ul {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  #gnavi li {
    float: none !important;
    height: auto !important;
    padding-top: 0 !important;
  }
  #gnavi li a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 2px 1px;
    background-image: none !important;
    background-color: transparent;
    border: none;
    margin: 0 !important;
    box-sizing: border-box;
  }
  #gnavi li a::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 50%;   /* viewBox比 71.52/143.03 ≈ 50% */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
  /* SVG 割り当て（/kototen/kids/image/ 絶対パス） */
  #gnavi li.milk   a::before { background-image: url(/kototen/kids/image/01milk_bot.svg); }
  #gnavi li.cow    a::before { background-image: url(/kototen/kids/image/02cattle_bot.svg); }
  #gnavi li.pig    a::before { background-image: url(/kototen/kids/image/03pig_bot.svg); }
  #gnavi li.chucky a::before { background-image: url(/kototen/kids/image/04chicken_bot.svg); }
  #gnavi li.horse  a::before { background-image: url(/kototen/kids/image/05horse_bot.svg); }
  #gnavi li.sheep  a::before { background-image: url(/kototen/kids/image/06sheep_bot.svg); }
  #gnavi li.sheep2 a::before { background-image: url(/kototen/kids/image/07goat_bot.svg); }
  /* テキストラベル */
  #gnavi li a span {
    display: block !important;
    font-size: 9px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
  }
  #gnavi li a:hover::before {
    opacity: 0.8;
  }

  #credit {
    background-image: none;
    padding-top: 16px;
  }
}


/* =============================================================
   ■ スマートフォン (〜 599px)
   ============================================================= */
@media screen and (max-width: 599px) {

  body {
    font-size: 14px;
  }

  /* ヘッダー */
  #header02 {
    background-image: none;   /* head_bg.jpg を非表示 */
    background-color: #fff;
    min-height: 0;
    height: auto;
    padding: 8px 0;
  }
  #header02 .header2inner {
    padding: 0 0 0 8px;
  }
  #header02 .header2inner img {
    width: 160px;
  }
  #header02 .header2inner img.tit-kids {
    height: 32px;
    width: auto;
  }

  /* ---- トップページ Flash エリア ---- */
  #flashContent {
    max-width: 100%;
  }

  /* ---- トップページ .photocase ボタン ---- */
  #toppage .photocase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }
  #toppage .photocase a {
    display: block;
  }
  #toppage .photocase .mar_L100 {
    margin-left: 0 !important;
  }

  /* ---- 動物トップ (#kidspagetop) ---- */
  /* 見出し・ヒーロー画像 */
  #kidspagetop #content h2 img,
  #kidspagetop #content h3 img {
    width: 100%;
    height: auto;
  }

  /* sbox カード：縦積みにする */
  .sboxfirst,
  .sbox,
  .sboxend {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 1px dashed #ccc;
    margin-bottom: 4px;
    box-sizing: border-box;
    padding: 6px;
  }
  .sboxfirst h3,
  .sbox h3,
  .sboxend h3 {
    margin-bottom: 6px;
  }
  .sboxfirst h3 img,
  .sbox h3 img,
  .sboxend h3 img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
  ul.sboxfirst li,
  ul.sbox li {
    display: inline-block !important;
    margin-right: 10px;
    background: url(../image/allow_02.gif) no-repeat 0 center;
    padding-left: 12px !important;
  }

  /* ---- 2カラム → 1カラム (#kidscate) ---- */
  .leftarea {
    float: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .rightarea {
    float: none !important;
    width: 100% !important;
    margin-bottom: 16px;
  }
  #kidscate .rightarea h2 {
    font-size: 120%;
  }
  #kidscate .rightarea h2 img {
    width: 100%;
    height: auto;
  }

  /* ---- サイドナビ → 横型タグクラウド ---- */
  #tanenavi {
    background: none !important;
    width: 100% !important;
    display: block;
    padding: 6px 0 10px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 12px;
  }
  #tanenavi .tpbg,
  #tanenavi .b_bg {
    display: none !important;
  }
  #tanenavi .m_bg {
    background: none !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
  }

  /* 各カテゴリブロック → ピル型インライン */
  .nyuuyoubox,
  .nikuyoubox,
  .umabox,
  .yagibox,
  .butabox,
  .menyoubox,
  .toribox {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 6px;
    margin: 0;
    text-align: left;
  }
  .nyuuyoubox p,
  .nikuyoubox p,
  .umabox p,
  .yagibox p,
  .butabox p,
  .menyoubox p,
  .toribox p {
    font-size: 11px;
    padding: 1px 5px;
    margin-bottom: 0 !important;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.6;
    flex: 0 0 auto;
  }
  .nyuuyoubox li,
  .nikuyoubox li,
  .umabox li,
  .yagibox li,
  .butabox li,
  .menyoubox li,
  .toribox li {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px;
    white-space: nowrap;
  }
  .nyuuyoubox li + li::before,
  .nikuyoubox li + li::before,
  .umabox li + li::before,
  .yagibox li + li::before,
  .butabox li + li::before,
  .menyoubox li + li::before,
  .toribox li + li::before {
    content: "・";
    font-size: 10px;
  }

  /* ---- float 画像をブロックに ---- */
  .imgR,
  .imgL {
    float: none !important;
    display: block !important;
    margin: 0 auto 12px !important;
    max-width: 100%;
  }

  .textcontent,
  .textcontent1 {
    overflow: hidden;
  }

  /* ---- attention.html ---- */
  .side {
    font-size: 13px;
    padding-left: 10px;
  }
  .indent2 {
    padding-left: 10px;
  }

  /* ---- ホネホネZOO鑑 ---- */
  #main > img {
    width: 100%;
    height: auto;
  }
  .top_menu,
  .top_menu > img {
    width: 100%;
    height: auto;
  }
  .top_menu2 ul.thumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    list-style: none;
    margin: 0;
  }
  .top_menu2 ul.thumb li {
    flex: 0 0 calc(50% - 3px);
    height: auto;
    float: none !important;
  }
  .top_menu2 ul.thumb li img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- フッター ---- */
  #credit {
    background-image: none !important;
    padding: 14px 10px 10px;
    margin-top: 20px;
  }
}


/* =============================================================
   ■ sbox見出し(btn_xx.gif) → テキスト表示（PC/SP共通）
   ============================================================= */

/* btn画像を常に非表示 */
h3.sbox-heading img {
  display: none !important;
}

/* data-label の値をテキスト見出しとして表示 */
h3.sbox-heading::before {
  content: attr(data-label);
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #444;
  background: #f0ebe0;
  border-left: 4px solid #8EC222;
  padding: 5px 8px;
  line-height: 1.4;
  border-radius: 0 2px 2px 0;
}



/* =============================================================
   ■ トップページ メインイラスト
   ============================================================= */

#mainIllust {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

#mainIllust img {
  width: 100%;
  height: auto;
  display: block;
}
/* =============================================================
   ■ フッター下寄せ（全ページ共通）
      body を min-height:100vh の flex コンテナにして
      #credit を末尾に押し出す
   ============================================================= */

#toppage,
#kidspagetop,
#kidscate {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#toppage #main,
#kidspagetop #main,
#kidscate #main {
  flex: 1 0 auto;
  /* width を明示して flex で横に伸びないようにする */
  width: 100%;
  align-self: flex-start;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

#credit {
  flex-shrink: 0;
  margin-top: auto;
}


/* =============================================================
   ■ header01 ロゴ（logo.svg）
   ============================================================= */

#header01 {
  background-color: #fff;
  /* flex-item として高さを固定。body の flex に影響されない */
  flex-shrink: 0;
  align-self: flex-start;
  width: 100%;
  /* 内部レイアウト */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 12px;
  box-sizing: border-box;
  min-height: 36px;
}

#header01 a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}

/* SVG ロゴ専用（#header01 img の旧ルールを上書き） */
#header01 img.site-logo,
.site-logo {
  height: 22px !important;
  width: auto !important;
  display: block;
  max-width: none;
}

/* =============================================================
   ■ 動物トップ c-top：#gnavi と同幅に揃える
   ============================================================= */

#kidspagetop .c-top {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#kidspagetop .c-top h2 img {
  width: 100%;
  height: auto;
}


/* =============================================================
   ■ ルビ（グループルビ）
   ============================================================= */

ruby {
  ruby-align: center;
}

rt {
  font-size: 0.55em;
  line-height: 1;
}