@charset "UTF-8";

/*
 * layout.css — ヘッダー、グローバルナビ、ドロワー、フッター、
 *              2カラムの骨格、サイドバー、記事カードの共通部品
 *
 * ページ固有の見た目は front.css / single.css / archive.css が担当する。
 */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ================================================================ ヘッダー */

.siteHeader {
  color: var(--on-navy);
  background: var(--navy);
}

.siteHeader_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 82px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.siteLogo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.siteLogo_link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--on-navy);
}

.siteLogo_mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--navy);
  background: var(--neon);
}

.siteLogo_mark svg {
  width: 30px;
  height: auto;
}

.siteLogo_text {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  white-space: nowrap;
  /* サイト名は小文字で登録されていても英字ロゴとして大文字で見せる */
  text-transform: uppercase;
}

/* サイト名の後半だけシアンにする。テーマの目印になる部分。 */
.siteLogo_text em {
  font-style: normal;
  color: var(--neon);
}

/* 管理画面からロゴ画像を設定した場合はそちらを優先する */
.siteLogo_image {
  max-height: 46px;
  width: auto;
}

.siteLogo_tagline {
  font-size: 12px;
  letter-spacing: .08em;
  color: #8fc4d4;
}

.siteHeader_tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.siteSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 226px;
  padding: 9px 14px;
  background: rgba(0, 255, 255, .09);
  border: 1px solid rgba(0, 255, 255, .3);
}

.siteSearch svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.siteSearch_field {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  color: var(--on-navy);
  background: transparent;
  border: none;
  outline: none;
}

.siteSearch_field::placeholder {
  color: var(--on-navy-muted);
  opacity: 1;
}

.ytButton {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--youtube);
}

.ytButton:hover {
  color: #fff;
  opacity: .85;
}

.ytButton svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* YouTube アイコンの再生マークは、本体をボタンの背景色で切り抜いて表現する。
   本体は currentColor、切り抜きはこのクラスで塗る。
   赤いボタンの上（PCヘッダー・ドロワー）では背景と同じ赤にする。 */
.ytIcon_play {
  fill: var(--youtube);
}

/* ------------------------------------------------------ グローバルナビ（PC） */

.globalNav {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.globalNav_list {
  display: flex;
}

.globalNav_link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 30px 11px;
  color: var(--on-navy);
  border-bottom: 4px solid transparent;
}

.globalNav_link:hover {
  color: var(--on-navy);
  background: rgba(0, 255, 255, .07);
}

.globalNav_ja {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.globalNav_en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .13em;
  color: var(--on-navy-muted);
}

/* 現在地のタブ。カテゴリに属さないページ（トップ・魚種アーカイブ）では
   どのタブも点灯させない。 */
.globalNav_item.-current .globalNav_link {
  border-bottom-color: var(--neon);
}

.globalNav_item.-current .globalNav_en {
  color: var(--neon);
}

/* --------------------------------------------------- ハンバーガーとドロワー */

.navToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--on-navy);
}

.navToggle svg {
  width: 24px;
  height: 24px;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--on-navy);
  background: var(--navy);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s linear, visibility .2s linear;
}

.drawer.-open {
  visibility: visible;
  opacity: 1;
}

.drawer_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.drawer_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--neon);
}

.drawer_close svg {
  width: 24px;
  height: 24px;
}

/* 左のボタンと視覚的な釣り合いを取るための余白 */
.drawer_spacer {
  width: 46px;
}

.drawer_section {
  padding: 20px 14px 0;
}

.drawer_section:last-child {
  padding-bottom: 30px;
}

.drawer_heading {
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--on-navy-muted);
}

.drawer_navItem {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.drawer_navLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px 8px 14px;
  color: var(--on-navy);
  border-left: 4px solid transparent;
}

.drawer_navItem.-current .drawer_navLink {
  border-left-color: var(--neon);
}

.drawer_navText {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawer_navJa {
  font-size: 17px;
  font-weight: 700;
}

.drawer_navEn {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--on-navy-muted);
}

.drawer_navItem.-current .drawer_navEn {
  color: var(--neon);
}

.drawer_navLink svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--on-navy-muted);
}

.drawer_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 濃紺の上のタグ。白地用の .termChip とは別に色を持たせる。 */
.drawer_chip {
  display: inline-block;
  padding: 8px 13px;
  font-size: 13px;
  color: var(--on-navy-soft);
  border: 1px solid rgba(0, 255, 255, .35);
}

.drawer_chip:hover,
.drawer_chip.-current {
  font-weight: 700;
  color: var(--navy);
  background: var(--neon);
  border-color: var(--neon);
}

.drawer_yt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--youtube);
}

.drawer_yt:hover {
  color: #fff;
  opacity: .85;
}

.drawer_subList {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.drawer_subItem {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.drawer_subLink {
  display: block;
  padding: 15px 4px;
  font-size: 14px;
  color: var(--on-navy-soft);
}

/* ドロワーを開いている間は背面をスクロールさせない */
body.-drawerOpen {
  overflow: hidden;
}

/* ================================================================== 2カラム */

.layout {
  display: flex;
  align-items: flex-start;
  gap: var(--column-gap);
  padding-top: 38px;
}

.layout_main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.layout_aside {
  flex: none;
  width: var(--aside-width);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------------------------------------ セクション見出し */

.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.sectionHead_title {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding-bottom: 9px;
  border-bottom: 4px solid var(--navy);
}

.sectionHead_ja {
  font-size: 20px;
  font-weight: 900;
}

.sectionHead_more {
  padding-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================== 記事カード共通 */

.cardGrid {
  display: grid;
  gap: 20px;
}

.cardGrid.-col2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cardGrid.-col3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 縦型カード（サムネイル上・テキスト下） */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
}

.card_thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card_body {
  padding: 13px 16px 17px;
}

.card_terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.card_title {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.card_title a {
  color: var(--ink);
}

.card_title a:hover {
  color: var(--link);
}

/* 横型カード（サムネイル左・テキスト右） */
.cardRow {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.cardRow_thumb {
  flex: none;
  width: 128px;
  height: 92px;
  overflow: hidden;
}

.cardRow_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardRow_body {
  min-width: 0;
}

.cardRow_title {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.cardRow_title a {
  color: var(--ink);
}

.cardRow_title a:hover {
  color: var(--link);
}

/* ============================================================= サイドバー */

.asideBlock {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* 濃色のブロック（YouTube 誘導）は面ごと色を変える */
.asideBlock.-navy {
  color: var(--on-navy);
  background: var(--navy);
  border-color: var(--navy);
}

.asideBlock_title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
  padding-left: 11px;
  font-size: 16px;
  font-weight: 900;
  border-left: 5px solid var(--bright);
}

.asideProfile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
}

.asideProfile_avatar {
  flex: none;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 50%;
}

.asideProfile_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asideProfile_name {
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
}

.asideProfile_role {
  font-size: 12px;
  color: var(--meta);
}

.asideProfile_text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.ranking {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ranking_item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.ranking_num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #a9c3cc;
}

/* 上位3件だけブランドカラーで強調する */
.ranking_item:nth-child(1) .ranking_num {
  color: var(--neon);
  background: var(--navy);
}

.ranking_item:nth-child(2) .ranking_num,
.ranking_item:nth-child(3) .ranking_num {
  color: var(--neon);
  background: var(--navy-soft);
}

.ranking_title {
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

.ranking_title a {
  color: var(--ink);
}

.ranking_title a:hover {
  color: var(--link);
}

.termChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.asideYt_label {
  margin-bottom: 6px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--neon);
}

.asideYt_text {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}

.asideYt_button {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--youtube);
}

.asideYt_button:hover {
  color: #fff;
  opacity: .85;
}

/* ---------------------------------------------- サイドバーの YouTube 一覧 */

.videoMini {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.videoMini_link {
  display: flex;
  gap: 11px;
  align-items: center;
  color: var(--ink);
}

.videoMini_link:hover {
  color: var(--link);
}

.videoMini_thumb {
  flex: none;
  width: 100px;
  height: 70px;
  overflow: hidden;
}

.videoMini_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videoMini_title {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
}

.videoMini_time {
  display: block;
  margin-top: 3px;
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--meta);
}

/* ------------------------------------------- YouTube の動画カード（共通）
   トップの「新着動画」と記事下の「チャンネルの動画」で同じ部品を使う。 */

.videoBand_en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--neon);
}

.videoBand_more {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--neon);
}

.videoBand_more:hover {
  color: var(--on-navy);
}

.videoList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.videoCard {
  display: block;
  color: var(--on-navy);
}

.videoCard:hover {
  color: var(--neon);
}

.videoCard_thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-soft);
  border: 1px solid rgba(0, 255, 255, .22);
}

.videoCard_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube のサムネイルは上下に余白の入った 4:3 で配信されるため、
   16:9 の枠に収めると左右いっぱいに寄る。再生マークは中央に重ねる。 */
.videoCard_play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videoCard_play svg {
  width: 46px;
  height: 46px;
}

.videoCard_body {
  display: block;
}

.videoCard_title {
  display: block;
  margin: 11px 0 6px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.videoCard_time {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--on-navy-muted);
}

/* ============================================================== 該当なし */

.emptyState {
  padding: 40px 24px;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
}

.emptyState .search-form {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.emptyState .search-field {
  width: min(280px, 70%);
  padding: 10px 12px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
}

.emptyState .search-submit {
  padding: 10px 20px;
  font-weight: 700;
  color: var(--navy);
  background: var(--bright);
  border: none;
  cursor: pointer;
}

/* ============================================================== SNS リンク */

.socialLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.socialLinks_item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* スマホでも押しやすいよう 44px を下回らないようにする */
  width: 44px;
  height: 44px;
}

.socialLinks_item svg {
  width: 20px;
  height: 20px;
}

/* 白い面（サイドバー） */
.socialLinks.-light .socialLinks_item {
  color: var(--link);
  background: var(--tint);
  border: 1px solid var(--tint-line);
}

.socialLinks.-light .socialLinks_item:hover {
  color: var(--navy);
  background: var(--bright);
  border-color: var(--bright);
}

/* 濃紺の面（フッター・ドロワー） */
.socialLinks.-navy .socialLinks_item {
  color: var(--on-navy);
  border: 1px solid rgba(0, 255, 255, .35);
}

.socialLinks.-navy .socialLinks_item:hover {
  color: var(--navy);
  background: var(--neon);
  border-color: var(--neon);
}

/* ================================================================ フッター */

.siteFooter {
  margin-top: 48px;
  padding: 36px 0 26px;
  color: var(--on-navy);
  background: var(--navy);
}

.siteFooter_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.siteFooter_brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.siteFooter_mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--navy);
  background: var(--neon);
}

.siteFooter_mark svg {
  width: 24px;
  height: auto;
}

.siteFooter_name {
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.siteFooter_name em {
  font-style: normal;
  color: var(--neon);
}

.siteFooter_tagline {
  font-size: 13px;
  line-height: 1.8;
  color: #8fc4d4;
}

.siteFooter_navs {
  display: flex;
  gap: 44px;
}

.siteFooter_nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.siteFooter_nav a {
  font-size: 13px;
  color: var(--on-navy-soft);
}

.siteFooter_nav a:hover {
  color: var(--neon);
}

.siteFooter_bottom {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.siteFooter_copyright {
  font-size: 12px;
  color: #7fb6c8;
}

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

@media screen and (max-width: 1023px) {
  .globalNav_link {
    padding: 13px 20px 11px;
  }

  .siteSearch {
    width: 180px;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .siteHeader_bar {
    min-height: 60px;
    padding: 0;
    gap: 8px;
  }

  .navToggle {
    display: flex;
  }

  .siteLogo_tagline,
  .siteSearch,
  .globalNav {
    display: none;
  }

  .siteLogo_mark {
    display: none;
  }

  .siteLogo_text {
    font-size: 23px;
  }

  /* スマホでは登録ボタンをアイコンだけにして横幅を稼ぐ */
  .ytButton {
    padding: 0;
    width: 46px;
    height: 46px;
    justify-content: center;
    background: transparent;
  }

  .ytButton_label {
    display: none;
  }

  /* スマホのヘッダーではボタンの地が無くなるため、
     アイコン本体を赤に、切り抜きをヘッダーの濃紺に入れ替える。 */
  .siteHeader .ytButton svg {
    width: 24px;
    height: 24px;
    color: var(--youtube);
  }

  .siteHeader .ytButton .ytIcon_play {
    fill: var(--navy);
  }

  .layout {
    display: block;
    padding-top: 14px;
  }

  .layout_main {
    gap: 24px;
  }

  .layout_aside {
    width: 100%;
    margin-top: 24px;
  }

  .cardGrid.-col2,
  .cardGrid.-col3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cardRow {
    padding: 12px;
    gap: 12px;
    align-items: center;
  }

  .cardRow_thumb {
    width: 108px;
    height: 78px;
  }

  .cardRow_title {
    font-size: 14px;
  }

  .sectionHead_ja {
    font-size: 18px;
  }

  .siteFooter {
    margin-top: 26px;
    padding: 24px 0;
  }

  .siteFooter_top {
    display: block;
  }

  .siteFooter_navs {
    gap: 32px;
    margin-top: 20px;
  }
}

/* 動画カードのレスポンシブ。トップの帯と記事下の関連動画で共通。 */
@media screen and (max-width: 1023px) {
  .videoList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .videoBand_en {
    font-size: 11px;
  }

  .videoBand_more {
    font-size: 12px;
  }

  /* 横並びだとサムネイルが小さくなりすぎるため、縦リストに切り替える。
     マークアップは変えず CSS だけで組み替えている。 */
  .videoList {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .videoCard {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .videoCard_thumb {
    flex: none;
    width: 132px;
    height: 78px;
    aspect-ratio: auto;
  }

  .videoCard_play svg {
    width: 30px;
    height: 30px;
  }

  .videoCard_title {
    margin: 0 0 5px;
    font-size: 13px;
  }
}