@charset "UTF-8";

/*!
Theme Name: Cocoon Child（アクトパス）
Description: Cocoon専用の子テーマ。賢威8からの移行用に、賢威と同じ見た目を再現するCSSと、賢威リンクカード互換のショートコードを含む。
Theme URI: https://wp-cocoon.com/
Author: 株式会社アクトパス
Template:   cocoon-master
Version:    1.0.0
*/

/************************************
** 1. 見出し：賢威8と同じ見た目
**    （賢威の base.css＋カスタマイザー設定から再現。
**     .title_no-style が付いた見出しは対象外）
************************************/
.article h2:not(.title_no-style) {
  margin: 60px 0 23px;
  padding: 10px 10px 5px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 19px;
  line-height: 1.4;
}
.article h2:not(.title_no-style) a { color: #fff; }

.article h3:not(.title_no-style) {
  margin: 60px 1px 24px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background: none;
  color: #5a3f30;
  font-size: 18px;
  line-height: 1.4;
}

.article h4:not(.title_no-style) {
  margin: 60px 0 18px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px dotted #000;
  border-radius: 0;
  background: none;
  color: #5a3f30;
  font-size: 18px;
  line-height: 1.4;
}

.article h5:not(.title_no-style) { color: #5a3f30; }

.article h3:not(.title_no-style) a,
.article h4:not(.title_no-style) a,
.article h5:not(.title_no-style) a { color: #505050; }

/* 賢威と同じく、入れ物（本文・部品・枠）の先頭にある見出しは上の余白なし（賢威 .keni-section h2〜h6:first-child） */
.article h2:not(.title_no-style):first-child,
.article h3:not(.title_no-style):first-child,
.article h4:not(.title_no-style):first-child { margin-top: 0; }

/* 見出し装飾を消すクラス（賢威の title_no-style）。.apx 方式のページで使用 */
.article .title_no-style {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: #333;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.0;
}
.article .title_no-style::before,
.article .title_no-style::after { content: none; }

/************************************
** 2. 賢威の補助クラス（本文・固定ページで使用中のものだけ）
************************************/
.lh15 { line-height: 1.5 !important; }
.lh18 { line-height: 1.8 !important; }
.lh20 { line-height: 2.0 !important; }

.red    { color: #e00000 !important; }
.blue   { color: #0329ce !important; }
.yellow { color: #ffe400 !important; }
.black  { color: #000 !important; }
.white  { color: #fff !important; }
.b      { font-weight: bold !important; }

.m5-t  { margin-top: 5px !important; }
.m10-t { margin-top: 10px !important; }
.m20-t { margin-top: 20px !important; }
.m30-t { margin-top: 30px !important; }
.m40-t { margin-top: 40px !important; }
.m50-t { margin-top: 50px !important; }
.m60-t { margin-top: 60px !important; }

.al-c { text-align: center !important; }

.line-yellow { background: linear-gradient(transparent 50%, #fff499 50%); }

.col2-wrap { margin: 0 0 1em; }
.col2-wrap::after { display: block; content: " "; clear: both; }
@media (min-width: 480px) {
  .col2-wrap > .col { float: left; width: 49%; }
  .col2-wrap > .col:nth-child(odd) { margin-right: 2%; }
}

/* PC/スマホの出し分け（旧カスタマイザー追加CSSから移植） */
.pc { display: inline !important; }
.mb { display: none !important; }
@media screen and (max-width: 768px) {
  .pc { display: none !important; }
  .mb { display: inline !important; }
}

/************************************
** 3. 賢威リンクカード（[keni-linkcard] の表示）
************************************/
.keni-link-card_wrap {
  min-height: 75px;
  margin-bottom: 2.5em;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
.keni-link-card_wrap .keni-link-card {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #505050;
  font-style: normal;
  line-height: 1.4;
}
.keni-link-card_wrap .keni-link-card::before,
.keni-link-card_wrap .keni-link-card::after { display: none; content: none; }
.keni-link-card_thumb {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  width: 75px;
  height: 75px;
}
.keni-link-card_thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translate(-50%, -50%);
}
.keni-link-card_title {
  margin-right: 85px;
  margin-bottom: 5px;
  font-size: 14px;
}
.keni-link-card_title a {
  color: #505050;
  font-weight: bold;
  text-decoration: none;
}
.keni-link-card_title a:hover,
.keni-link-card_title a:focus { text-decoration: underline; }
.keni-link-card_url {
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.keni-link-card_url a { color: #999; text-decoration: none; }
.keni-link-card_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  max-height: 65px;
  margin-right: 85px;
  font-size: 12px;
}
@media (min-width: 600px) {
  .keni-link-card_wrap .keni-link-card { min-height: 100px; }
  .keni-link-card_thumb { width: 100px; height: 100px; }
  .keni-link-card_title,
  .keni-link-card_desc { margin-right: 115px; }
}

/************************************
** 4. プラグイン向けの調整（旧カスタマイザー追加CSSから移植）
************************************/
/* Blog Floating Button の「×」を消す */
.inner_bfb .bfb_closed { display: none; }

/* Content Views のタイトル */
.pt-cv-title { font-size: 14px !important; color: #777 !important; margin-bottom: -4px !important; }

/* SiteOrigin：ヘッダーとトップバナーの間隔 */
.hero-row { margin-top: 0 !important; }
.hero-row .panel-row-style { padding-top: 0 !important; margin-top: 0 !important; }
.hero-row > .panel-grid-cell { padding-top: 0 !important; }

/* SiteOrigin Hero：スマホでボタンが押せない問題の回避 */
@media (max-width: 768px) {
  .sow-hero-container::after,
  .sow-hero-foreground::after { pointer-events: none; }
  .sow-hero-foreground a { pointer-events: auto; position: relative; z-index: 999; }
}

/************************************
** 5. 賢威と同じにする表示の調整
************************************/
/* トップページ（固定ページ）ではページ名と日付を出さない（賢威の設定と同じ） */
.home.page .entry-title,
.home.page .date-tags { display: none; }

/************************************
** 6. メニュー（PC）：賢威と同じく1行にまとめる
************************************/
.navi-in > ul.menu-pc { flex-wrap: nowrap; }
.navi-in > ul.menu-pc > li { width: auto; height: auto; }
.navi-in > ul.menu-pc > li > a { padding: 8px 12px; font-size: 13px; color: #fff; }
.navi-in > ul.menu-pc > li > a:hover { background-color: #333; color: #fff; }
.navi-in > ul.menu-pc .sub-menu li { height: auto; }
.navi-in > ul.menu-pc .sub-menu a { padding: 10px 16px; font-size: 13px; color: #333; }
.navi-in > ul.menu-pc .sub-menu a:hover { background-color: #e9e9e9; color: #333; }

/************************************
** 7. スマホ下の固定ボタン：賢威と同じ黄色の6ボタン
**    （メニュー「スマホ下部メニュー」を「フッターモバイルボタン」に割り当てて使う）
************************************/
.mobile-footer-menu-buttons {
  background: #ffd700;
  border-top: 1px solid #ffff00;
  box-shadow: none;
}
.mobile-footer-menu-buttons .menu-button { border-right: 1px solid #ffff00; }
.mobile-footer-menu-buttons .menu-button:last-child { border-right: 0; }
.mobile-footer-menu-buttons .menu-button-in { padding: 10px 2px; color: #000; }
.mobile-footer-menu-buttons .menu-icon { display: none; }
.mobile-footer-menu-buttons .menu-caption {
  opacity: 1;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  white-space: normal;
}

/************************************
** 8. 本文の横幅（PC）：賢威と同じ約800px
**    （1カラム時はCocoon設定の幅が効かないため、CSSで指定）
************************************/
@media screen and (min-width: 835px) {
  .no-sidebar .content .main {
    width: auto;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
}

/************************************
** 9. スマホのヘッダー：黒い帯にメニュー・ロゴ・検索をまとめる
**    （Cocoonのヘッダーモバイルボタンを使い、大きいロゴの帯は隠す）
************************************/
@media screen and (max-width: 1023px) {
  .mobile-header-menu-buttons { background: #000; box-shadow: none; }
  .mobile-header-menu-buttons .menu-button > .menu-button-in,
  .mobile-header-menu-buttons .menu-button > .menu-button-in .menu-icon,
  .mobile-header-menu-buttons .menu-button > .menu-button-in .menu-caption { color: #fff; }
  #header-container .header { display: none; }
}

/************************************
** 10. 賢威と同じ表示ルール
**    ・固定ページは投稿日を出さない（賢威は固定ページに日付なし）
**    ・賢威で「タイトル／アイキャッチを表示しない」にしていたページは隠す
**      （functions.php の 4. が body にクラスを付ける）
************************************/
.page .article-header .date-tags,
.keni-hide-title .article-header .entry-title,
.keni-hide-eyecatch .article-header .eye-catch-wrap {
  display: none;
}

/************************************
** 11. 本文の文字：賢威と同じ 14px・行間1.7・字間0.05em・段落の間1.5文字
**    （賢威の追加CSS「行間」「改行したときの行間」を再現。PC・スマホ共通）
************************************/
.main .article {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .05em;
}
.main .article p { margin-bottom: 1.5em; }
/* Cocoonの「行の高さ」設定（.entry-content>* に 1.8）より優先させる */
.main .article .entry-content > * { line-height: 1.7; }

/* 小見出し h5・h6：賢威は線も余白もなし（Cocoonの下線を消す） */
#container .article h5:not(.title_no-style),
#container .article h6:not(.title_no-style) {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.4;
}
#container .article h5:not(.title_no-style) { font-size: 18px; }
#container .article h6:not(.title_no-style) { font-size: 16px; color: #505050; }

/************************************
** 12. トップページ冒頭：上の案内と跳会議バナーの間を賢威と同じく約20px空ける
**    （バナーの部品に「上に -30px」の指定があり、賢威では上の部品側の余白で相殺されていた）
**    ※トップの部品の並びを組み替えたら、番号（panel-24260-0-0-○）の見直しが要る
************************************/
/* 0-0-0＝PC用の案内、0-0-1＝スマホ用の案内（片方は隠れているが余白は残るので、画面幅で分ける） */
.home #pl-24260 #panel-24260-0-0-0 { margin-bottom: 50px; }
.home #pl-24260 #panel-24260-0-0-1 { margin-bottom: 0; }
@media screen and (max-width: 768px) {
  .home #pl-24260 #panel-24260-0-0-0 { margin-bottom: 0; }
  .home #pl-24260 #panel-24260-0-0-1 { margin-bottom: 50px; }
}


/************************************
** 13. PCのフッター地図：左右の列は使っていないので隠し、真ん中の列を全幅に。
**    地図は本文と同じ最大860px幅で中央に置く（スマホは「フッター（モバイル用）」側）
**    ※フッター左・右にウィジェットを入れるときは、この指定を外す
************************************/
@media screen and (min-width: 835px) {
  .footer-widgets .footer-left,
  .footer-widgets .footer-right { display: none; }
  .footer-widgets .footer-center { flex: 1 1 100%; width: 100%; }
}
.footer-center iframe { width: 100%; max-width: 860px; }