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

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

/*
  静的サイト（/thanks.html）と共通のヘッダー/フッターを表示するため、
  Cocoon側のフッター等を非表示にする。
  ※Cocoonのヘッダー要素は親テーマ内のため、汎用的なセレクタで抑制。
*/
#footer {
  display: none;
}

/* Cocoonのヘッダー候補（環境差があるため最小限に） */
#header,
#header-container,
.header-container,
.site-header {
  display: none;
}

/* 念のため：静的ヘッダー/フッターは表示 */
#a-header,
#a-footer {
  display: block;
}

/*
  本文（#content）はCocoonの見た目を優先。
  BiNDの bind.css は全要素リセット（margin/padding/list-style/em/a:hover等）を全ページに適用するため、
  そのまま読むと本文まで静的サイト側の見た目に「引っ張られる」。
  ここでは #content の範囲だけ、WordPress記事として自然なデフォルトに戻す。
*/
#content {
  line-height: 1.8;
}

#content p {
  margin: 0 0 1em;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  margin: 1.2em 0 0.6em;
}

#content ul,
#content ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
}

#content ul {
  list-style: disc;
}

#content ol {
  list-style: decimal;
}

#content li {
  margin: 0.25em 0;
}

#content blockquote {
  margin: 0 0 1em;
  padding: 0 0 0 1em;
}

/* bind.css で em が斜体にならないのを戻す */
#content em,
#content cite {
  font-style: italic;
}

/* bind.css の hover 透過（opacity:.4）を本文だけ無効化 */
#content a:hover {
  opacity: 1 !important;
  filter: none !important;
}

/*
  既存サイト（bind.css）の基準に合わせて、フッターのコピーライト文言サイズを統一。
  - 既存：html{font-size:14px} / .d-smallest_font{font-size:70%}
  - WP側は基準フォントサイズが大きくなりやすいので、bk1165 内だけ固定する
*/
#a-footer #bk1165 {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #555 !important;
}

#a-footer #bk1165 .d-smallest_font {
  font-size: 70% !important;
}

/*
  既存（静的）サイトに合わせたヘッダーの余白・背景・固定表示
  - 余白/背景は thanks.css の #bk1155 指定を移植
  - スクロール固定は position: sticky で担保（レイアウトの押し上げも維持）
*/
#a-header {
  position: sticky;
  top: 0;
  z-index: 10000;
}

/*
  WordPress側の基準フォント（font-size/line-height）の違いで、
  グローバルメニュー（.c-menu.-menu_a）の高さが静的サイトと変わり、
  結果としてPC表示で「メニューだけ上に寄って見える」差が出る。
  ヘッダー範囲だけ、静的サイト（bind.css の html/body）と同じ基準に固定する。
*/
#a-header {
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/*
  ビルボード（#bk1156）の見出しサイズは .d-largest_font{font-size:190%} の相対指定。
  静的サイトは html{font-size:14px} 前提のため、WP側で基準が大きいと「Blog/ブログ」だけ大きく見える。
  本文には影響させず、ビルボード領域だけ静的サイトと同じ基準に固定する。
*/
#a-billboard {
  font-size: 14px !important;
  line-height: 1.9 !important;
}

#a-header .c-menu li a,
#a-header .c-menu li .c-unlink {
  line-height: inherit !important;
}

/*
  contact.html と完全一致させるため、Cocoon側の余白指定が #a-header 内に入り込むのを抑止。
  （既存サイトは bind.css のリセット前提のため、WP側だけ余白が付くとメニュー位置がズレる）
*/
#a-header header,
#a-header section,
#a-header h1,
#a-header nav,
#a-header ul,
#a-header li {
  margin: 0 !important;
  padding: 0 !important;
}

#a-header .g-column > .column {
  padding: 0 !important;
}

/* #bk1155 の背景/余白は contact.css と同一指定を functions.php の inline-style で付与 */

/*
  既存（静的）サイト同等：ヘッダー（bk1155）の ususiro は透過のまま。
  WP（Cocoon）のスキン背景色がヘッダー背後に透けて見えてしまうため、
  ヘッダー自体を白ベタにせず、ページ先頭の「ヘッダー直下だけ」白い下地を敷く。
  ※この下地はページ先頭にだけ存在し、スクロールで一緒に流れるので、
    スクロール時はヘッダーの下にあるコンテンツが透けて見える（ヘッダーは透過のまま）。
*/
#page.bg-window {
  position: relative;
}

#page.bg-window:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--junmaki-header-underlay-height, 90px);
  background-color: #fff;
  pointer-events: none;
}

/* ヘッダー部（ビルボード〜境界線）までは下地を白にする（それ以降はCocoonスキンの背景を残す） */
#a-billboard {
  background-color: #fff;
}

@media only screen and (max-width: 641px) {
  #a-header {
    padding: 0;
  }
}

/*
  アニメーションは bind.js が .column にクラスを付与して発火させる。
  ここで opacity を固定すると data-animated/data-sp-animated が効かなくなるため、上書きしない。
*/

/*
  Cocoon側の汎用クラス（.column など）と静的サイトのクラス名が衝突し、
  ヘッダー/フッターのカラム幅が崩れて画像（c-no_adjust）が過大表示されることがある。
  #a-header/#a-footer の範囲だけ、静的サイト想定のカラムレイアウトを強制する。
*/
/*
  静的サイト（bind.css）と同じカラム挙動（float）に揃える。
  Cocoon側の .column 等の指定が勝って崩れる環境があるため、#a-header/#a-footer 内だけ !important で固定。
*/
#a-header .g-column:before,
#a-header .g-column:after,
#a-footer .g-column:before,
#a-footer .g-column:after {
  display: table !important;
  line-height: 0 !important;
  content: "" !important;
}

#a-header .g-column:after,
#a-footer .g-column:after {
  clear: both !important;
}

#a-header .g-column > .column,
#a-footer .g-column > .column {
  float: left !important;
  position: relative !important;
  margin: 0 !important;
  max-width: none !important;
}

#a-header .g-column > .column.-column1,
#a-header .g-column > .column:first-child,
#a-footer .g-column > .column.-column1,
#a-footer .g-column > .column:first-child {
  margin-left: 0 !important;
}

#a-header .g-column > .column.-column-lasts,
#a-header .g-column > .column:last-child,
#a-footer .g-column > .column.-column-lasts,
#a-footer .g-column > .column:last-child {
  margin-right: 0 !important;
}

#a-header .g-column.-col2 > .column,
#a-footer .g-column.-col2 > .column {
  width: 50% !important;
}

/*
  PC表示時のヘッダーメニュー上下位置は、静的サイトでは
  _cssskin/_block_header_navi.css の .column.-column2 { margin-top: 15px; } で調整されている。
  当テーマではカラム衝突回避のため .column の margin を 0 に固定しているため、
  bk1155（ヘッダーナビ）に限って静的サイト同等の margin-top を復活させる。
*/
@media only screen and (min-width: 642px) {
  #a-header #bk1155.cssskin-_block_header_navi .column.-column2 {
    margin-top: 15px !important;
  }
}

#a-footer .g-column.-col3 > .column {
  width: 33.3333% !important;
}

@media only screen and (max-width: 640px) {
  #a-header .g-column > .column,
  #a-footer .g-column > .column {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* BiND の SPカラム指定（-sp-col2/-sp-col3）を尊重して横並びを維持 */
  #a-header .g-column.-sp-col2 > .column,
  #a-footer .g-column.-sp-col2 > .column {
    float: left !important;
    width: 50% !important;
  }

  #a-header .g-column.-sp-col3 > .column,
  #a-footer .g-column.-sp-col3 > .column {
    float: left !important;
    width: 33.3333% !important;
  }
}

/* SP時はグローバルメニューはハンバーガー前提で一旦非表示（bind.js が show/hide で制御） */
@media only screen and (max-width: 768px) {
  /*
    ハンバーガーメニュー（SP）の配色を静的サイト（_dress/black/base.css）と同じに戻す。
    base.css は「.-dress_black が祖先にあること」を前提にしているが、
    WP側ではJSの都合で #js-globalNavigation が別階層に移るケースがあり、その場合に白背景(#fff)になって崩れる。
    ここでは要素IDに直接当てて、本文（#content）には影響させない。
  */
  #spNavigationTrigger.c-sp_navigation_btn {
    background-color: rgba(60, 18, 205, 0.72);
    border-color: #00cccc;
  }

  #spNavigationTrigger.c-sp_navigation_btn .c-sp-navigation_line1,
  #spNavigationTrigger.c-sp_navigation_btn .c-sp-navigation_line2,
  #spNavigationTrigger.c-sp_navigation_btn .c-sp-navigation_line3 {
    border-color: #00cccc;
  }

  #js-globalNavigation {
    background-color: rgba(34, 34, 34, 1);
  }

  /* SPメニューは左端まで（左右余白はリンクpaddingで均等に） */
  #js-globalNavigation {
    /*
      静的サイト（bind.css）では、表示時クラス（-js-menuSlide-*）側が
      position/left/right を制御する。
      ここで bottom:0 などを固定すると黒背景が画面全域に広がってしまうため、
      サイズは静的サイト同様「内容に追従」にする。
    */
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }

  #js-globalNavigation > div {
    width: 100% !important;
  }

  #js-globalNavigation .c-menu,
  #js-globalNavigation .m-motion {
    background-color: #3952bc;
    background-image: none;
    border-style: none;
  }

  #js-globalNavigation .c-menu li,
  #js-globalNavigation .m-motion li {
    background-color: transparent;
    border-color: #555555;
  }

  #js-globalNavigation .c-menu li a,
  #js-globalNavigation .m-motion li a {
    color: #ffffff;
    background-color: transparent;
    border-color: #555555;
  }

  /*
    既存（静的）サイト同等：メニューのクリック領域を画面端まで確保
    - 本テーマのHTMLは <li><span><a>...</a></span></li> のため、span/a が inline のままだと当たり判定が狭くなる
    - フォントサイズは既存指定（18px）を維持し、領域だけ広げる
  */
  #js-globalNavigation .-menu_center {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #js-globalNavigation .c-menu {
    /*
      静的サイト（bind.css）では .c-menu に margin-bottom:10px があり、
      メニュー末尾に「黒い帯（+α）」が見える。
      以前ここで margin を 0 にしていたため、その帯が消えてしまっていた。
    */
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #js-globalNavigation .c-menu li {
    width: 100% !important;
  }

  #js-globalNavigation .c-menu li > span {
    display: block;
    width: 100%;
  }

  #js-globalNavigation .c-menu li > span > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 既存サイト同等：mamelon4 の 18px（メニュー文字のみ） */
  #js-globalNavigation .c-menu.-menu_a li a,
  #js-globalNavigation .m-motion li a {
    font-family: "Mamelon4" !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 3px rgba(162, 79, 184, 0.58) !important;
  }

  #js-globalNavigation .c-menu li .c-unlink,
  #js-globalNavigation .m-motion li .c-unlink {
    color: #999999;
    background-color: transparent;
    border-color: #555555;
  }

  #js-globalNavigation .c-menu li.c-sp-closer .icon-close,
  #js-globalNavigation .m-motion li.c-sp-closer .icon-close {
    color: #ffffff;
  }

  #spNavigationTrigger.c-sp_navigation_btn {
    display: block;
  }

  #js-globalNavigation {
    display: none;
  }

  /* SPメニューの「閉じる ×」を確実に表示 */
  #js-globalNavigation li.c-sp-closer {
    display: block !important;
  }

  /* 静的サイト（bind.css）と同じ glyph（digitalstage）で×を表示 */
  #js-globalNavigation #js-sp-menu_closer .icon-close:before {
    content: "\e663";
    font-family: digitalstage;
    font-size: 1em;
    line-height: 1;
  }

  /* SPのヘッダー（bk1155）は「ロゴ行の右端」にハンバーガーを固定（既存HTMLと同じ位置） */
  #a-header #bk1155 .g-column.-col2.-sp-col1 > .column.-column1 {
    float: left !important;
    width: calc(100% - 48px) !important;
  }

  #a-header #bk1155 .g-column.-col2.-sp-col1 > .column.-column2 {
    float: right !important;
    width: 48px !important;
  }

  #a-header #bk1155 nav {
    text-align: right !important;
  }

  /*
    SPのフッターメニュー（#bk1163）は静的サイト（thanks.html）と同じく、
    c-sp-padding_normal（左右15px）等の標準余白を活かす。
    ここをフル幅化すると下線が画面端まで伸びてしまう。
  */

  /*
    Cocoon側のデフォルト（ul の padding-left 等）が残ると、
    「左だけ余白が大きい」状態になりやすい。
    静的サイト（bind.cssのリセット）と同じく、フッターメニュー範囲だけ 0 に揃える。
  */
  #a-footer #bk1163 nav,
  #a-footer #bk1163 ul,
  #a-footer #bk1163 li {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 念のため：ul の左paddingだけが残るケースを強制的に潰す */
  #a-footer #bk1163 ul {
    padding-left: 0 !important;
  }
}

/*
  静的サイト側（thanks.css/contact.css等）では、共通ヘッダー/フッターの画像は
  個別IDに対してピクセル幅を指定している。
  WordPress側でも同じ指定を入れて、c-no_adjust（width:100%）による拡大を防ぐ。
*/
#imgsrc581_1 {
  /* ヘッダーロゴ */
  width: 250px;
}

#imgsrc623_1, /* お問い合わせボタン */
#imgsrc625_1 {
  /* PDFボタン */
  width: 250px !important;
}

#imgsrc854_1 {
  /* フッターロゴ */
  width: 300px;
}

#imgsrc864_1,
#imgsrc866_1,
#imgsrc868_1,
#imgsrc870_1,
#imgsrc872_1 {
  /* SNSアイコン */
  width: 50px;
}

/*
  既存（静的）サイトのページCSS（thanks.css/contact.css等）で指定されている
  フッターブロックの余白・最大幅をWP側にも反映して、ボタン/SNS間隔を一致させる。
*/
#a-footer #bk1162 > div {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 0;
  padding-top: 49px;
  padding-right: 0;
  padding-bottom: 10px;
}

#a-footer #bk1173 > div {
  margin: 0 auto;
  max-width: 430px;
}

/*
  2ボタン（#bk1162）は静的サイトでは c-space_normal のガターで左右に余白ができる。
  こちらで .column の margin を 0 にしていたため、境界でボタン同士が接触していた。
*/
#a-footer #bk1162.c-space_normal .g-column > .column {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 2% !important;
  margin-right: 2% !important;
}

#a-footer #bk1162.c-space_normal .g-column > .column.-column1,
#a-footer #bk1162.c-space_normal .g-column > .column:first-child {
  margin-left: 0 !important;
}

#a-footer #bk1162.c-space_normal .g-column > .column.-column-lasts,
#a-footer #bk1162.c-space_normal .g-column > .column:last-child {
  margin-right: 0 !important;
}

#a-footer #bk1162.c-space_normal .g-column.-col2 > .column {
  width: 48% !important;
}

/* SNS（#bk1173）は静的サイトと同じく中央寄せで折り返し */
#a-footer #bk1173 .g-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#a-footer #bk1173 .g-column > .column {
  float: none !important;
  width: auto !important;
  margin: 0 8px 10px !important;
}

@media only screen and (max-width: 641px) {
  /* フッター2ボタン（bk1162）はSPで中央揃え・縦並び（既存サイトと同じ） */
  #a-footer #bk1162 .g-column {
    max-width: 250px;
    margin: 0 auto !important;
  }

  /* PC向けの c-space_normal（48%幅＋左右2%）をSPでは無効化して確実に縦積み */
  #a-footer #bk1162.c-space_normal .g-column.-col2 > .column {
    float: none !important;
    width: 100% !important;
  }

  #a-footer #bk1162.c-space_normal .g-column > .column {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #a-footer #bk1162 .g-column > .column {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #a-footer #bk1162 .g-column > .column + .column {
    margin-top: 10px !important;
  }

  #a-footer #bk1162 .c-body.c-right,
  #a-footer #bk1162 .c-body.c-left {
    text-align: center !important;
  }

  #a-footer #bk1162 .c-img {
    display: inline-block;
  }

  #imgsrc864_1,
  #imgsrc866_1,
  #imgsrc868_1,
  #imgsrc870_1,
  #imgsrc872_1 {
    width: 40px;
  }

  #imgsrc581_1 {
    width: 150px;
  }

  #a-footer #bk1162.b-plain > .column,
  #a-footer #bk1162.b-plain > .g-column,
  #a-footer #bk1162.b-both_diff > .column,
  #a-footer #bk1162.b-both_diff > .g-column,
  #a-footer #bk1162.b-headlines > .column,
  #a-footer #bk1162.b-headlines > .g-column,
  #a-footer #bk1162.b-album > .column,
  #a-footer #bk1162.b-album > .g-column,
  #a-footer #bk1162.b-tab > .column,
  #a-footer #bk1162.b-tab > .g-column,
  #a-footer #bk1162.b-accordion > .column,
  #a-footer #bk1162.b-accordion > .g-column {
    margin: 0 auto;
    max-width: 250px;
  }

  #a-footer #bk1162 > div {
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  #a-footer #bk1173.b-plain > .column,
  #a-footer #bk1173.b-plain > .g-column,
  #a-footer #bk1173.b-both_diff > .column,
  #a-footer #bk1173.b-both_diff > .g-column,
  #a-footer #bk1173.b-headlines > .column,
  #a-footer #bk1173.b-headlines > .g-column,
  #a-footer #bk1173.b-album > .column,
  #a-footer #bk1173.b-album > .g-column,
  #a-footer #bk1173.b-tab > .column,
  #a-footer #bk1173.b-tab > .g-column,
  #a-footer #bk1173.b-accordion > .column,
  #a-footer #bk1173.b-accordion > .g-column {
    margin: 0 auto;
    max-width: 200px;
  }
}

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

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

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