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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ============================================
 * HAKU カスタムヘッダー/フッター + 記事CTA (haku-col-header-v1)
 * ============================================ */

/* Cocoon デフォルトヘッダー/フッターを非表示 */
#header { display: none !important; }
#footer { display: none !important; }
.mobile-footer-menu-buttons { display: none !important; }

/* コンテンツをカスタムヘッダー分下げる */
#container, #wrapper { padding-top: 72px !important; }

/* ===== カスタムヘッダー ===== */
.haku-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.haku-header__inner {
  display: flex;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
}
.haku-header__logo { flex-shrink: 0; margin-right: 32px; text-decoration: none; }
.haku-head-logo { height: 40px; width: auto; display: block; }
.haku-header__gnav { flex: 1; }
.haku-gnav { display: flex; list-style: none; gap: 0; margin: 0; padding: 0; }
.haku-gnav li a {
  display: block;
  padding: 0 16px;
  height: 72px;
  line-height: 72px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  white-space: nowrap;
}
.haku-gnav li a:hover { color: #0284c7; }
.haku-header__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.haku-header-tel img { height: 32px; width: auto; display: block; }
.haku-header-contact-btn {
  display: inline-flex;
  align-items: center;
  background: #0284c7;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.haku-header-contact-btn:hover { background: #0369a1; }
.haku-header__menuBtn { display: none; background: none; border: none; cursor: pointer; }

/* ===== カスタムフッター ===== */
.haku-footer { background: #0c4a6e; margin-top: 0; }
.haku-footer__nav { padding: 48px 0 32px; }
.haku-footer__container { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
.haku-footer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-bottom: 32px; }
.haku-footer-head { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .06em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.2); }
.haku-footer ul { list-style: none; padding: 0; margin: 0; }
.haku-footer ul li { margin-bottom: 8px; }
.haku-footer ul li a { font-size: 13px; color: rgba(255,255,255,.75); text-decoration: none; }
.haku-footer ul li a:hover { color: #fff; }
.haku-footer-bottom { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.haku-footer-bottom a { font-size: 12px; color: rgba(255,255,255,.6); text-decoration: none; }
.haku-footer-bottom a:hover { color: #fff; }
.haku-footer__foot { background: rgba(0,0,0,.15); padding: 16px 0; text-align: center; }
.haku-copyright { font-size: 12px; color: rgba(255,255,255,.7); letter-spacing: .04em; margin: 0; }

/* ===== 記事 上部CTA ===== */
.haku-cta-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #eff6ff;
  border-left: 4px solid #0284c7;
  border-radius: 6px;
  padding: 14px 20px;
  margin: 0 0 28px;
}
.haku-cta-top__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  margin-bottom: 3px;
}
.haku-cta-top__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  flex: 1;
  min-width: 160px;
}
.haku-cta-top__btn {
  display: inline-flex;
  align-items: center;
  background: #0284c7;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.haku-cta-top__btn:hover { background: #0369a1; }

/* ===== 記事 下部CTA ===== */
.haku-cta-bottom {
  background: #0c4a6e;
  border-radius: 12px;
  padding: 32px;
  margin: 32px 0;
  text-align: center;
}
.haku-cta-bottom__label {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 8px;
}
.haku-cta-bottom__name {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}
.haku-cta-bottom__desc {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  margin: 0 0 20px;
}
.haku-cta-bottom__btn {
  display: inline-flex;
  align-items: center;
  background: #0284c7;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
}
.haku-cta-bottom__btn:hover { background: #0369a1; }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  #container, #wrapper { padding-top: 52px !important; }
  .haku-header__inner { height: 52px; padding: 0 16px; }
  .haku-head-logo { height: 32px; }
  .haku-gnav { display: none; }
  .haku-header-contact-btn { display: none; }
  .haku-header-tel { display: none; }
  .haku-header__menuBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 22px;
    color: #1e293b;
    padding: 4px 8px;
  }
  .haku-header.is-open .haku-gnav {
    display: block !important;
    position: fixed;
    top: 52px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 9998;
  }
  .haku-gnav li a { height: auto; line-height: 1.5; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
  .haku-footer-grid { grid-template-columns: 1fr; }
  .haku-footer__container { padding: 0 20px; }
  .haku-cta-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .haku-cta-bottom { padding: 24px 20px; }
  .haku-cta-bottom__name { font-size: 17px; }
}

/* ===== コラムページヒーロー (haku-col-hero-v1) ===== */

/* ヒーローがある場合は #container の padding-top をリセット */
.has-haku-hero #container,
.has-haku-hero #wrapper { padding-top: 0 !important; }

.haku-page-hero {
  margin-top: 72px;
  background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
  padding: 64px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.haku-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://haku-t.com/new_2025/wp-content/uploads/2025/07/Mask-group-5.png') center/cover no-repeat;
  opacity: .05;
  pointer-events: none;
}
.haku-page-hero__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  color: rgba(147, 197, 253, .9);
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
}
.haku-page-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  position: relative;
  margin: 0;
}

@media (max-width: 768px) {
  .haku-page-hero { margin-top: 52px; padding: 48px 16px; }
  .has-haku-hero #container,
  .has-haku-hero #wrapper { padding-top: 0 !important; }
}


/* ===== テーブル・コンテンツのモバイル対応 ===== */

/* Gutenbergテーブルブロック: 横スクロール対応 */
figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: 0;
  margin-right: 0;
}

/* 本文内の画像: 幅オーバーフロー防止 */
.entry-content img {
  max-width: 100%;
  height: auto;
}

/* 本文内のコードブロック: 横スクロール */
.entry-content pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* テーブル: モバイルで最小幅を削除 */
  figure.wp-block-table table {
    min-width: 0;
  }
  figure.wp-block-table td,
  figure.wp-block-table th {
    word-break: break-word;
  }
  /* コンテンツ幅が画面に収まるよう保証 */
  .entry-content {
    overflow-x: hidden;
    max-width: 100%;
  }
}


/* ===== Cocoon .wrap 固定幅の上書き（モバイル対応） ===== */

/* デスクトップでも max-width で制限 */
.wrap {
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  /* Cocoon の .wrap { width: 1256px } を上書き */
  .wrap {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
  /* メインコンテンツも確実に */
  #main, .main {
    width: auto !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
  }
  /* ページ全体の横スクロール防止 */
  body, #container, #wrapper {
    overflow-x: hidden;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .wrap {
    width: auto !important;
    max-width: 100% !important;
    padding: 0;
  }
  #main, .main {
    padding: 12px 16px !important;
  }
}


/* ===== 裸の<table>タグのモバイル対応（figure.wp-block-tableなし） ===== */

/* Cocoonのデフォルトナビゲーション非表示（カスタムヘッダーで代替） */
#header-container {
  display: none !important;
}

/* 記事内の全テーブルを横スクロール可能に */
.entry-content table,
.article table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: max-content;
  min-width: 0;
}

/* テーブルセルの折り返し許可（スクロールと両立） */
.entry-content table td,
.entry-content table th,
.article table td,
.article table th {
  white-space: nowrap;
  min-width: 80px;
}

@media screen and (max-width: 768px) {
  .entry-content table td,
  .entry-content table th,
  .article table td,
  .article table th {
    font-size: 13px;
    padding: 6px 10px;
  }
}