@charset "UTF-8";
/*
 * コンテンツページ共通（includes/head.php から全コンテンツページに読み込む）
 *
 * 本文フォントを Kiwi Maru に統一する。
 *   - 本文（段落・リスト・表・ナビ・フッターなど）… Kiwi Maru
 *   - 見出し（h1〜h6）… これまでどおり（標準レイアウトは明朝、旧レイアウトは Verdana 系）
 *   - フォント見本や個別に書体を指定している部分 … 各ページのCSSの指定がそのまま優先される
 * :where() で詳細度を 0 にしているので、ページ側のどんな指定にも負ける＝上書きしやすい。
 */

body {
  font-family: 'Kiwi Maru', serif;
}

:where(.layout-standard) :where(h1, h2, h3, h4, h5, h6) {
  font-family: serif;
}

/* 書体を指定した箱の中の見出しは、その箱の書体を引き継ぐ（使用許諾範囲ページの ul#cap など） */
:where(.layout-standard) :where(#cap) :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

/* 旧レイアウトは bootstrap.min.css が見出しを inherit にしているため、詳細度を少し上げて指定 */
.layout-classic :is(h1, h2, h3, h4, h5, h6) {
  font-family: Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}


/* ---------- メニュー・ヘッダーの特徴リストは、ふつうのゴシック体 ---------- */

:root {
  --font-gothic: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
}

.nav-links,
#header_container li,
.layout-classic #nav,
.layout-classic #header_02 ul li {
  font-family: var(--font-gothic);
}

/* 概要（Format・License などの仕様）とダウンロードボタン */
#dlContent .details,
#dlContent .details :is(h1, h2, h3, h4, h5, h6),
#dlButton a {
  font-family: var(--font-gothic);
}

/* ---------- ヘッダーの特徴ラベル（全角カタカナ など）：幅が狭いときは題字の下に並べる ---------- */

@media screen and (max-width: 768px) {
  .layout-standard .headerContent #header_container {
    flex-wrap: wrap;
    align-items: center;
  }

  .layout-standard .headerContent #header_container ul {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 6px;
    margin: 4px 0 12px;
  }

  .layout-standard .headerContent #header_container li {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 10px;
    font-size: 0.65rem;
    line-height: 1.5;
    white-space: nowrap;
  }
}

/* =====================================================================
 * ハンバーガーメニュー（スマホ幅）
 * ボタンの開閉は assets/js/menu.js。トップページ（style.css の .site-header）と同じ見た目・動き
 * ===================================================================== */

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 三本線 → 開くと × */
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  transition: transform 0.3s, background-color 0.3s;
}

.menu-toggle span {
  top: 21px;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  left: 0;
}

.menu-toggle span::before {
  transform: translateY(-7px);
}

.menu-toggle span::after {
  transform: translateY(7px);
}

.is-menu-open .menu-toggle span {
  background-color: transparent;
}

.is-menu-open .menu-toggle span::before {
  transform: rotate(45deg);
}

.is-menu-open .menu-toggle span::after {
  transform: rotate(-45deg);
}

/* ---------- 標準レイアウト（768px以下） ---------- */

@media screen and (max-width: 768px) {
  .site-nav {
    position: relative;
  }

  .site-nav .menu-toggle {
    display: block;
    margin-left: auto;
  }

  /* 開閉パネル：高さ 0fr ⇔ 1fr でなめらかに開く */
  .site-nav .menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: 0fr;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }

  .site-nav.is-menu-open .menu-panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .site-nav .nav-links {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .site-nav .nav-links li {
    margin: 0;
    border-top: 1px solid #f0f0f0;
  }

  .site-nav .nav-links a {
    display: block;
    margin: 0;
    padding: 16px 20px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
  }
}

/* ---------- 旧レイアウト（ピグモ00など・767px以下） ---------- */

@media screen and (max-width: 767px) {
  .layout-classic .selectnav-header {
    position: relative;
  }

  /* これまでのセレクトボックス型メニューは使わない */
  .layout-classic .selectnav {
    display: none;
  }

  .layout-classic .menu-toggle {
    display: block;
    position: absolute;
    top: 3px;
    right: 6px;
    z-index: 101;
  }

  .layout-classic .menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }

  .layout-classic .is-menu-open .menu-panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .layout-classic .menu-panel #nav {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .layout-classic .menu-panel #nav > li {
    float: none;
    width: auto !important; /* HTMLの style="width: 120px" を打ち消す */
    padding: 0;
    border-top: 1px solid #f0f0f0;
  }

  .layout-classic .menu-panel #nav a {
    padding: 16px 20px;
    font-size: 16px;
    color: #333;
  }
}

/* =====================================================================
 * フォント紹介ページの共通パーツ
 * ページごとの指定は <body class="page-○○"> のクラスで書き分ける。
 * 専用CSS（css/style_cus.css）を持つのは、独自の作りがあるページだけ：
 *   廻想体（kaiso）／マメロン（mamelon）／ポプらむ☆キュート（poprumcute）／使用許諾範囲（mj_work_license）
 * ===================================================================== */

/* ---------- 区切り線（ページの色） ---------- */

:is(.page-albertella, .page-escumasia, .page-kimberella, .page-waptia) hr {
  border: 2px solid #222;
  margin-top: 20px;
}

.page-denjiyugi hr {
  border-bottom: 2px solid #222;
}

.page-humour hr {
  border: 2px solid #ff8f89;
  margin-top: 20px;
}

.page-kinkaku hr {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #e6cb81 0%, #d1ae5c 100%);
  border-image-slice: 1;
  margin-top: 20px;
}

.page-makinas hr {
  border: 2px solid #fff253;
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-pigmo01 hr {
  border: 2px solid #f8ea59;
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-pigmo05_clr hr {
  border: 2px solid #ff1d75;
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-ronde hr {
  border: 2px solid #4de8f3;
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-samasan hr {
  border: 2px solid #000000;
  margin: 20px 0;
}

/* ---------- ダウンロードボタン：最後のボタンを黄色に ---------- */

:is(.page-humour, .page-kinkaku, .page-samasan) #dlButton a:last-child {
  background: #fff253;
  color: #222;
}

:is(.page-humour, .page-kinkaku, .page-samasan) #dlButton a:last-child:hover {
  background: #fff7a0;
  color: #7b7b7b;
}

/* ---------- ヘッダーの特徴リスト ---------- */

.page-makinas #header_container li {
  width: 130px;
}

/* ---------- 古代生物フォントシリーズ（アルバーテラ／エスクマシア／キンベレラ／ワプティア）の見本 ---------- */
/* フォントファイルは mj_work_license/font/ にあるものを使う */

@font-face {
  font-family: 'alb';
  src: url('../../mj_work_license/font/alb.woff') format('woff'),
    url('../../mj_work_license/font/alb.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'esc';
  src: url('../../mj_work_license/font/esc.woff') format('woff'),
    url('../../mj_work_license/font/esc.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kim';
  src: url('../../mj_work_license/font/kim.woff') format('woff'),
    url('../../mj_work_license/font/kim.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'wap';
  src: url('../../mj_work_license/font/wap.woff') format('woff'),
    url('../../mj_work_license/font/wap.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

#container main :is(p.alb, p.esc, p.kim, p.wap) {
  margin: 20px 20px 40px;
  font-size: 8rem;
  color: #000;
  line-height: 1;
}

#container main p.alb {
  font-family: alb, sans-serif;
}

#container main p.esc {
  font-family: esc, sans-serif;
}

#container main p.kim {
  font-family: kim, sans-serif;
}

#container main p.wap {
  font-family: wap, sans-serif;
}

/* ---------- ピグモ01 ---------- */

.page-pigmo01 #container .toga_re {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.4;
  color: #333333;
}

.page-pigmo01 .slash-1 {
  height: 3px;
  background-image: linear-gradient(
    -45deg,
    hsla(0, 0%, 70%, 0),
    hsla(0, 0%, 70%, 0) 25%,
    hsla(0, 0%, 70%, 1) 25%,
    hsla(0, 0%, 70%, 1) 50%,
    hsla(0, 0%, 70%, 0) 50%,
    hsla(0, 0%, 70%, 0) 75%,
    hsla(0, 0%, 70%, 1) 75%
  );
  background-size: 10px 10px;
}

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

@media screen and (max-width: 768px) {
  #container :is(p.alb, p.esc, p.kim, p.wap) {
    font-size: 6rem;
  }

  :is(.page-albertella, .page-escumasia, .page-kimberella, .page-waptia) #underWrap .column h3 {
    font-size: 1rem;
  }

  :is(.page-albertella, .page-escumasia, .page-kimberella, .page-waptia) #underWrap .column ul li {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 460px) {
  #container main :is(p.alb, p.esc, p.kim, p.wap) {
    font-size: 4rem;
  }
}

@media screen and (max-width: 370px) {
  #container main :is(p.alb, p.esc, p.kim, p.wap) {
    font-size: 3.4rem;
  }
}

/* =====================================================================
 * ピグモ00（旧レイアウト）の「概要＋Download」欄
 * ほかのフォントページ（assets/css/template.css の #dlContent）と同じ見た目にする。
 * このページは template.css を読み込まないので、同じ指定をここに置き、Bootstrap の既定値を打ち消す
 * ===================================================================== */

.page-pigmo #dlContent {
  margin: 40px 0 30px;
}

.page-pigmo #dlContent > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.page-pigmo #dlContent .details {
  width: 60%;
}

.page-pigmo #dlButton {
  width: 40%;
}

.page-pigmo #dlContent .details > p {
  padding: 16px;
  border: 1px solid #222;
  background: #fff;
  width: 20%;
  min-width: 5em;
  text-align: center;
  margin: 0 0 10px;
  color: #222;
  font-size: 14px;
  line-height: 1.4;
}

.page-pigmo #dlContent .details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 8px;
  align-items: center;
  margin: 16px 0;
}

.page-pigmo #dlContent .details dt {
  grid-column: 1;
  background: #555;
  color: #fff;
  padding: 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-pigmo #dlContent dt.high-dt {
  height: 80px;
}

.page-pigmo #dlContent .details dd {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.page-pigmo #dlContent .details a {
  color: inherit;
}

.page-pigmo #dlContent .details figure {
  border-bottom: 2px #222 solid;
  margin: 0 0 16px;
  padding-bottom: 8px;
}

.page-pigmo #navContButtom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.page-pigmo #navContButtom li {
  margin: 0;
}

.page-pigmo #dlButton a {
  display: block;
  padding: 16px;
  background: #363636;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  margin-bottom: 20px;
}

.page-pigmo #dlButton a:hover {
  background: #7b7b7b;
}

@media screen and (max-width: 869px) {
  .page-pigmo #dlContent > div {
    flex-direction: column;
  }

  .page-pigmo #dlContent .details,
  .page-pigmo #dlButton {
    width: 100%;
  }
}


/* ---------- ピグモ00：バナー一覧を標準ページと共通に ---------- */
.page-pigmo #linkContent {
  width: 100%;
  max-width: 870px;
  margin: 40px auto 0;
}

.page-pigmo #linkContent ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.page-pigmo #linkContent li {
  max-width: 106px;
  width: 100%;
  margin: 0;
  list-style: none;
}

.page-pigmo #linkContent img {
  max-width: 100%;
}

/* ---------- ピグモ00：フッターまわりを標準ページと共通に ----------
   旧レイアウト（Bootstrap）では template.css を読まないので、
   includes/standard/under.php・footer.php の見た目に要る分だけここで持つ */
.page-pigmo #underContent {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 40px 0 0;
  background: #f2f2f2;
}

.page-pigmo #underWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 870px;
  margin-top: 32px;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-pigmo #underWrap ul {
  margin: 10px 0 0;
  padding: 0;
}

.page-pigmo #underWrap li {
  margin-top: 10px;
  list-style: none;
}

/* Bootstrap の blockquote 装飾（大きい文字・左線）を打ち消してブラウザ標準に戻す */
.page-pigmo #underWrap blockquote {
  margin: 1em 40px;
  padding: 0;
  border: 0;
}

.page-pigmo #underWrap blockquote p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.page-pigmo #underWrap blockquote small {
  display: inline;
  color: inherit;
  font-size: inherit;
}

.page-pigmo #underWrap .column {
  flex: 1;
  padding: 0 10px;
}

.page-pigmo #underWrap h3 {
  margin: 0;
  color: #222;
  font-family: serif;
  font-size: 1.17rem;
  font-weight: bold;
  line-height: 1.2;
}

.page-pigmo #underWrap li {
  font-size: 1rem;
  line-height: 1.2;
}

.page-pigmo #underWrap a {
  color: #222;
}

.page-pigmo footer {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  background: #fff253;
  color: #666;
  font-size: 0.8rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .page-pigmo #underWrap {
    padding: 0;
  }
  .page-pigmo #underWrap h3 {
    font-size: 1rem;
  }
  .page-pigmo #underWrap li {
    font-size: 0.8rem;
  }
  .page-pigmo #underWrap .column {
    padding: 0 4px;
  }
}

@media screen and (max-width: 390px) {
  .page-pigmo #underWrap {
    flex-direction: column;
  }
}