@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
  カラートーン・共通変数
************************************/
:root {
  --pp-accent: #0000EE;
  --pp-accent-deep: #0b2a4a;
  --pp-muted-bg: #f7fbff;
  --pp-muted-bg-2: #f0f4f8;
  --pp-note-bg: #fff7e6;
  --pp-text: #222;
  --pp-dark: #111;
  --pp-border: #1a3555;
}


/************************************
  ベース設定
************************************/
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.9;
  color: var(--pp-text);
  background: #fff;
  font-size: 16px;
}

a {
  color: var(--pp-accent);
  text-decoration: none;
  transition: .2s;
}
a:hover {
  opacity: .85;
  text-decoration: underline;
}


/************************************
  ヘッダー背景・タイトル
************************************/
.header-container {
  background-image: url('https://liberos012.com/wp-content/uploads/2025/09/header-2.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: clamp(280px, 30vh, 320px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 2em 1em !important;
  margin: 0 !important;
  border: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.site-name-text {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  padding: 0.4em 1em !important;
  border-radius: 6px !important;
  max-width: 90vw !important;
  margin-bottom: 1em !important;
}

.header-text,
.tagline {
  font-size: 1em !important;
  font-weight: 500 !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  padding: 0.3em 0.8em !important;
  border-radius: 6px !important;
}


/************************************
  本文系ユーティリティ
************************************/
.pp-goal {
  background: var(--pp-muted-bg);
  border-left: 4px solid var(--pp-accent-deep);
  padding: 12px 14px;
  margin: 12px 0 18px;
}

.pp-note {
  background: var(--pp-note-bg);
  border-left: 4px solid #ffb020;
  padding: 10px 12px;
  margin: 12px 0;
}

.pp-btn {
  display: inline-block;
  background: var(--pp-accent-deep);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
}


/************************************
  見出し（H1〜H4）
************************************/
.entry-content h1,
.article h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pp-dark);
  border-left: 6px solid var(--pp-accent-deep);
  padding-left: 0.8em;
}

.entry-content h2,
.article h2 {
  border-bottom: 3px solid var(--pp-accent-deep);
  padding-bottom: .4em;
}

.entry-content h2::before,
.article h2::before {
  content: none !important;
}


/************************************
  .article 専用互換
************************************/
.article,
.article * {
  box-sizing: border-box;
}

.article p {
  margin-bottom: 1.2em;
}


/************************************
  メニュー関連の最適化（共通設定）
************************************/
.menu-header,
.menu-pc,
.menu-mobile {
  background-color: rgba(0, 0, 0, 0.75) !important;
  color: #fff !important;
}

.menu-header li {
  display: flex !important;
  align-items: center !important;
}

.menu-header li a {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1em !important;
}

.menu-header .current-menu-item > a {
  background: transparent !important;
}

.menu-header .caption-wrap {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.menu-header .item-label {
  color: #fff !important;
  opacity: 1 !important;
}


/************************************
  PC表示（769px以上）
************************************/
@media screen and (min-width: 769px) {
  .menu-header,
  #navi,
  .menu-pc {
    height: 56px !important;
  }

  #navi,
  .navi-in,
  .menu-header,
  .menu-pc,
  .menu-container,
  .menu-wrap {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-header li > a {
    padding: 0 1.2em !important;
    color: #fff !important;
    background: transparent !important;
  }

  .menu-header li > a:hover,
  .menu-header li > a:active,
  .menu-header .current-menu-item > a {
    color: #ffcc00 !important;
    text-decoration: underline !important;
    background: transparent !important;
  }
}


/************************************
  スマホ表示（〜768px）
************************************/
@media screen and (max-width: 768px) {
  ul.menu-top.menu-mobile {
    display: none !important;
  }
}


/************************************
  タブレット表示（600px〜1024px）
************************************/
@media screen and (min-width: 600px) and (max-width: 1024px) {
  #navi,
  .navi-in,
  .menu-header,
  nav,
  .global-nav,
  .menu-container,
  .menu-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-container {
    min-height: 460px !important;
    padding-bottom: 3em !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  ul.menu-top.menu-mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-content: center !important;
    gap: 0.8em 1em !important;

    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    border-radius: 10px !important;
    padding: 0.9em 1.0em !important;
    margin: 0 !important;
    z-index: 10 !important;
    overflow: hidden !important;
  }

  ul.menu-top.menu-mobile li {
    flex: 1 1 45% !important;
    max-width: 48% !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  ul.menu-top.menu-mobile li a {
    display: block !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0.65em 0.9em
}

/* タイトル・サブタイトルの折り返しと行間を安全化 */
.site-name-text {
  display: inline-block !important;
  font-size: clamp(1.25em, 2.5vw, 1.5em) !important;
  font-weight: 600 !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  padding: 0.4em 1em !important;
  border-radius: 6px !important;
  max-width: 90vw !important;
  margin-bottom: 1.2em !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.header-text,
.tagline {
  display: inline-block !important;
  font-size: 1em !important;
  font-weight: 500 !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  padding: 0.3em 0.8em !important;
  border-radius: 6px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  margin-top: 0.4em !important;
  margin-bottom: 1.2em !important;
}

/* ヘッダーの高さは内容に応じて伸びる。背景透過仕様も維持 */
.header-container {
  background-image: url('https://liberos012.com/wp-content/uploads/2025/09/header-2.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 2em 1em 6.5em !important; /* 下部余白を拡張済み */
  margin: 0 !important;
  border: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* タブレット時の絶対配置メニューの安全化 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
  ul.menu-top.menu-mobile {
    position: absolute !important;
    bottom: 0.8em !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(2px);
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-content: center !important;
    gap: 0.8em 1em !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    padding: 0.9em 1.0em !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  ul.menu-top.menu-mobile li {
    flex: 1 1 45% !important;
    max-width: 48% !important;
    text-align: center !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  ul.menu-top.menu-mobile li a {
    display: block !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0.7em 0.9em !important;
  }
}

/* 極狭幅でのフォント段階縮小（重なり予防） */
@media screen and (max-width: 360px) {
  .site-name-text { font-size: 1.25em !important; }
}
@media screen and (min-width: 361px) and (max-width: 480px) {
  .site-name-text { font-size: 1.35em !important; }
}

	/* ========================= */
/* ▼ヘッダー重なり対策パッチ（2025/11/22） */
/* ========================= */

.site-name-text {
  /* ...（ここに先ほどのコードをそのまま貼る）... */
}

.header-text,
.tagline {
  /* ... */
}

.header-container {
  /* ... */
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .header-container {
    /* ... */
  }

  ul.menu-top.menu-mobile {
    /* ... */
  }

  ul.menu-top.menu-mobile li a {
    /* ... */
  }
}

@media screen and (max-width: 360px) {
  .site-name-text { font-size: 1.25em !important; }
}
@media screen and (min-width: 361px) and (max-width: 480px) {
  .site-name-text { font-size: 1.35em !important; }
}

	/* ▼スマホ表示（〜480px） */
@media screen and (max-width: 480px) {
  .site-name-text {
    font-size: 1.2em !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin-bottom: 1.5em !important;
  }

  .header-text,
  .tagline {
    font-size: 0.95em !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2em !important;
  }

  .header-container {
    min-height: auto !important;
    padding-bottom: 6em !important; /* メニューとの接触防止 */
  }

  ul.menu-top.menu-mobile {
    bottom: 1em !important;
    padding: 0.8em 1em !important;
  }
}

/* ▼PC表示（1025px以上） */
@media screen and (min-width: 1025px) {
  .header-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 2em 1em 5em !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .site-name-text {
    font-size: 1.6em !important;
    max-width: 960px !important;
    margin-bottom: 1.5em !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .header-text,
  .tagline {
    font-size: 1.1em !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2em !important;
  }
}

body .site-name-text {
  display: inline-block !important;
  font-size: clamp(1.2em, 2.5vw, 1.5em) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  margin-bottom: 1.5em !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  padding: 0.4em 1em !important;
  border-radius: 6px !important;
  max-width: 90vw !important;
  text-align: center !important;
}

.header-container {
  min-height: auto !important;
  padding-bottom: 6em !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

footer .site-name-text {
  display: block !important;
  font-size: clamp(1em, 2.5vw, 1.3em) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  margin: 1em auto !important;
  padding: 0.5em 1em !important;
  max-width: 90vw !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
}

html { border-top: 4px solid magenta !important; }

#footer .logo-footer .site-name-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}