@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
*/

/************************************
** 子テーマ用のスタイル
************************************/

/* =========================
   ヘッダー全体
   ========================= */
#header-container {
  position: relative;
  background: #f3f3f3;
  margin-bottom: 0;
  padding-bottom: 0;
}

#header-container .header-in,
.header-container .header-in,
#header .header-in,
.header .header-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 40px 6px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* サイトタイトル */
.site-title,
.site-name-text,
.logo-text {
  text-align: left;
  font-size: 36px;
  line-height: 1.2;
  margin: 0 0 4px;
}

/* 説明文 */
.site-description,
.logo-subtext {
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

/* =========================
   右上リンクボタン
   ========================= */
.top-header-links {
  position: absolute;
  top: 26px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

.top-header-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  background: #b8b8b8;
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  border: none;
  box-sizing: border-box;
}

/* SNSボタン */
.top-header-links .sns-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}

.top-header-links .sns-btn img {
  width: 22px;
  height: 22px;
  display: block;
}

.top-header-links .insta {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

.top-header-links .line {
  background: #21c655;
}

/* =========================
   グローバルナビ
   ========================= */
#navi,
.navi,
.global-navi {
  background: #8d8d8d !important;
  margin-top: 0 !important;
}

#navi .navi-in a,
.navi .navi-in a,
.global-navi .navi-in a,
#navi a,
.navi a,
.global-navi a {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 24px;
  padding-right: 24px;
}

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

/* 1023px以下 */
@media screen and (max-width: 1023px) {
  #header-container .header-in,
  .header-container .header-in,
  #header .header-in,
  .header .header-in {
    padding-left: 24px;
    padding-right: 24px;
  }

  .top-header-links {
    right: 24px;
    gap: 8px;
  }

  .top-header-links a {
    font-size: 13px;
    padding: 0 14px;
  }

  #navi .navi-in a,
  .navi .navi-in a,
  .global-navi .navi-in a,
  #navi a,
  .navi a,
  .global-navi a {
    font-size: 16px !important;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 834px以下：スマホはPC用右上ボタンとPCナビを消して、テーマ標準に戻す */
@media screen and (max-width: 834px) {
  .top-header-links {
    display: none !important;
  }

  #navi,
  .navi,
  .global-navi {
    display: none !important;
  }

  #header-container .header-in,
  .header-container .header-in,
  #header .header-in,
  .header .header-in {
    display: block;
    padding: 12px 16px;
    text-align: center;
    align-items: initial;
  }

  .site-title,
  .site-name-text,
  .logo-text {
    text-align: center;
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 6px;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .site-description,
  .logo-subtext {
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .site-title,
  .site-name-text,
  .logo-text {
    font-size: 22px;
  }

  .site-description,
  .logo-subtext {
    font-size: 11px;
  }
}

/* =========================
   PC/スマホ 最終調整
   ========================= */

/* ===== PC：タイトルが3行にならないようにする ===== */
#header-container .header-in,
.header-container .header-in,
#header .header-in,
.header .header-in {
  padding-right: 620px;
  box-sizing: border-box;
}

.site-title,
.site-title a,
.site-name-text,
.logo-text {
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
  line-height: 1.35;
}

/* 右上ボタン位置を少しだけ右上へ */
.top-header-links {
  top: 18px;
  right: 24px;
}

/* 横幅が狭いPCではさらに余白を減らす */
@media screen and (max-width: 1366px) {
  #header-container .header-in,
  .header-container .header-in,
  #header .header-in,
  .header .header-in {
    padding-right: 560px;
  }

  .top-header-links a {
    padding: 0 12px;
    font-size: 13px;
  }

  .top-header-links .sns-btn {
    width: 40px;
    height: 40px;
  }

  .top-header-links .sns-btn img {
    width: 20px;
    height: 20px;
  }
}

/* ===== スマホ：タイトル二重表示を解消 ===== */
@media screen and (max-width: 834px) {

  /* PC用右上ボタンは非表示 */
  .top-header-links {
    display: none !important;
  }

  /* PC用グローバルナビは非表示 */
  #navi,
  .navi,
  .global-navi {
    display: none !important;
  }

  /* 通常のサイトタイトルと説明文は非表示
     （モバイルヘッダー側のタイトルを使う） */
  #header .site-title,
  #header .site-title a,
  #header .site-name-text,
  #header .logo-text,
  #header .site-description,
  #header .logo-subtext,
  #header-container .site-title,
  #header-container .site-title a,
  #header-container .site-name-text,
  #header-container .logo-text,
  #header-container .site-description,
  #header-container .logo-subtext {
    display: none !important;
  }

  /* ヘッダー余白を自然に */
  #header-container,
  .header-container,
  #header,
  .header,
  .header-in {
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
  }

  /* モバイルヘッダー内のタイトルを中央寄せ */
  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .header-mobile,
  .header-mobile-in {
    text-align: center !important;
  }

  /* 検索ボタンは残す場合はそのまま。消したいなら次行を有効化 */
  /* .search-menu-button { display: none !important; } */
}

/* 480px以下：モバイルタイトルの文字を少しだけ抑える */
@media screen and (max-width: 480px) {
  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .header-mobile,
  .header-mobile-in {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 834px) {

  .slicknav_nav .menu-instagram > a,
  .menu-drawer .menu-instagram > a,
  .mobile-menu-buttons .menu-instagram > a,
  .slicknav_nav .menu-line > a,
  .menu-drawer .menu-line > a,
  .mobile-menu-buttons .menu-line > a {
    position: relative;
    display: block;
    min-height: 44px;
    line-height: 44px;
    padding-left: 58px !important;
    font-size: 15px !important;
  }

  .slicknav_nav .menu-instagram > a::before,
  .menu-drawer .menu-instagram > a::before,
  .mobile-menu-buttons .menu-instagram > a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background: url("http://test.chandra.jp/wp-content/uploads/2025/07/instagram.png") center / contain no-repeat;
  }

  .slicknav_nav .menu-line > a::before,
  .menu-drawer .menu-line > a::before,
  .mobile-menu-buttons .menu-line > a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background: url("http://test.chandra.jp/wp-content/uploads/2025/07/line_icon.png") center / contain no-repeat;
  }
}

/* PCでタイトルを1行優先にする */
@media screen and (min-width: 835px) {
  #header-container .header-in,
  .header-container .header-in,
  #header .header-in,
  .header .header-in {
    padding-right: 500px;
  }

  .site-title,
  .site-title a,
  .site-name-text,
  .logo-text {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    white-space: nowrap;
    word-break: keep-all;
  }
}