@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){
  /*必要ならばここにコードを書く*/
}
/************************************
** モバイルスライドインメニュー
************************************/
span.fas.fa-times::before {
  font-family: "Font Awesome 5 Free";
  content: "\f060";
  color:#90C31F; /* 矢印色変更はこちら */
}
ul.menu-drawer:after {
  background: white;
}

.menu-drawer li {
  padding:0;
  font-weight: normal; /* 太字解除 */
}

.menu-drawer a {
  font-size:1.3em;
  background-color:#ffffff;
  color:#545454;
  margin: .5em 0;
  font-weight: normal; /* 太字解除 */
}

.menu-drawer a:hover {
  background-color:#f7f7f7;
}

.menu-drawer .sub-menu {
  padding:0;
}

.menu-drawer .sub-menu li {
  font-size:0.9em;     /* サブメニュー小さめ */
  font-weight: normal; /* 太字解除 */
}

.menu-drawer .sub-menu li a {
  font-size:0.9em;     /* サブメニュー小さめ */
  font-weight: normal; /* 太字解除 */
}

.menu-drawer .sub-menu li a::before {
  font-family: "Font Awesome 5 Free";
  content : "\f105";
  color:#7b7b7b;
  margin:0 .5em 0 1em;
}
/* =========================
  BLOG 一覧（.tk-bloglist 配下だけ）
========================== */
.tk-bloglist{
  --card-radius: 18px;
  --card-shadow: 0 14px 34px rgba(0,0,0,.10);
  --card-shadow-hover: 0 20px 46px rgba(0,0,0,.14);
}

/* ブロックが何でも効くよう “よくある一覧UL” を広めに拾う */
.tk-bloglist ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* PCは2列 */
@media (min-width: 1024px){
  .tk-bloglist ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 各記事アイテム（li）をカード化 */
.tk-bloglist li{
  background:#fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* hover */
@media (hover:hover){
  .tk-bloglist li:hover{
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
  }
}

/* アイテム内部リンクを “ブロック全体クリック” っぽく */
.tk-bloglist li a{
  color: inherit !important;
  text-decoration:none !important;
  display:block;
}

/* サムネ：左→上にしたい場合が多いので、画像を上で統一 */
.tk-bloglist img{
  width:100% !important;
  height: auto !important;
  display:block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* テキスト領域の余白 */
.tk-bloglist .wp-block-latest-posts__post-title,
.tk-bloglist .vk_post_title, 
.tk-bloglist .vk_postList_title{
  display:block;
  padding: 14px 16px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}

/* 抜粋 */
.tk-bloglist .wp-block-latest-posts__post-excerpt,
.tk-bloglist .vk_post_excerpt,
.tk-bloglist .vk_postList_excerpt{
  padding: 10px 16px 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  opacity: .82;
}

/* 日付などメタ */
.tk-bloglist time,
.tk-bloglist .wp-block-latest-posts__post-date,
.tk-bloglist .vk_post_date,
.tk-bloglist .vk_postList_date{
  display:block;
  padding: 10px 16px 16px;
  font-size: 12px;
  opacity: .65;
}

/* もし “左サムネ＋右テキスト” のレイアウトが残ってたら上書きで縦積みに寄せる */
.tk-bloglist .vk_postList_item,
.tk-bloglist .wp-block-latest-posts__post-full-content,
.tk-bloglist .vk_postList_content{
  display:block !important;
}
/* ==============================
   PCナビ微調整：幅調整・折り返し防止版
============================== */

@media screen and (min-width: 1024px) {

  #navi,
  .navi {
    margin-bottom: 0 !important;
    border-top: 1px solid #eef3f8 !important;
    border-bottom: 1px solid #d8e7f2 !important;
    background: #ffffff !important;
    height: auto !important;
    min-height: 60px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #navi .navi-in,
  .navi .navi-in {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    height: auto !important;
    min-height: 60px !important;
    overflow: visible !important;
  }

  /* メニュー全体：1行固定 */
  #navi .navi-in > ul,
  .navi .navi-in > ul {
    width: max-content !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;

    position: relative !important;
    left: -240px !important;

    height: auto !important;
    min-height: 60px !important;
    overflow: visible !important;

    list-style: none !important;
    white-space: nowrap !important;
  }

  /* 各メニュー：広すぎない幅 */
  #navi .navi-in > ul > li,
  .navi .navi-in > ul > li {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    flex: 0 0 140px !important;

    border-left: 1px solid #d9e7f1 !important;
    background: #ffffff !important;

    height: auto !important;
    min-height: 60px !important;
    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #navi .navi-in > ul > li:last-child,
  .navi .navi-in > ul > li:last-child {
    border-right: 1px solid #d9e7f1 !important;
  }

  /* リンク本体 */
  #navi .navi-in > ul > li > a,
  .navi .navi-in > ul > li > a {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 8px 10px 7px !important;
    box-sizing: border-box !important;

    color: #0b4f8a !important;
    background: #ffffff !important;

    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  /* 英語メイン文字：さらに濃いめ */
  #navi .navi-in > ul > li > a .item-label,
  .navi .navi-in > ul > li > a .item-label {
    display: block !important;
    color: #06365f !important;

    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;

    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* 日本語サブ文字：濃いめ */
  #navi .navi-in > ul > li > a .caption-wrap,
  .navi .navi-in > ul > li > a .caption-wrap,
  #navi .navi-in > ul > li > a .item-description,
  .navi .navi-in > ul > li > a .item-description {
    display: block !important;
    margin-top: 4px !important;

    color: #4f6f88 !important;

    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;

    white-space: nowrap !important;
  }

  /* ホバー */
  #navi .navi-in > ul > li > a:hover,
  .navi .navi-in > ul > li > a:hover {
    background: #f0f8fe !important;
    color: #006eb8 !important;
    border-bottom-color: #0075c2 !important;
  }

  #navi .navi-in > ul > li > a:hover .item-label,
  .navi .navi-in > ul > li > a:hover .item-label {
    color: #006eb8 !important;
  }

  #navi .navi-in > ul > li > a:hover .caption-wrap,
  .navi .navi-in > ul > li > a:hover .caption-wrap,
  #navi .navi-in > ul > li > a:hover .item-description,
  .navi .navi-in > ul > li > a:hover .item-description {
    color: #006eb8 !important;
  }

  /* 現在ページ */
  #navi .navi-in > ul > li.current-menu-item > a,
  .navi .navi-in > ul > li.current-menu-item > a,
  #navi .navi-in > ul > li.current_page_item > a,
  .navi .navi-in > ul > li.current_page_item > a {
    background: #eef8ff !important;
    color: #006eb8 !important;
    border-bottom-color: #0075c2 !important;
  }

  #navi .navi-in > ul > li.current-menu-item > a .item-label,
  .navi .navi-in > ul > li.current-menu-item > a .item-label,
  #navi .navi-in > ul > li.current_page_item > a .item-label,
  .navi .navi-in > ul > li.current_page_item > a .item-label {
    color: #006eb8 !important;
  }

  #navi .navi-in > ul > li.current-menu-item > a .caption-wrap,
  .navi .navi-in > ul > li.current-menu-item > a .caption-wrap,
  #navi .navi-in > ul > li.current_page_item > a .caption-wrap,
  .navi .navi-in > ul > li.current_page_item > a .caption-wrap,
  #navi .navi-in > ul > li.current-menu-item > a .item-description,
  .navi .navi-in > ul > li.current-menu-item > a .item-description,
  #navi .navi-in > ul > li.current_page_item > a .item-description,
  .navi .navi-in > ul > li.current_page_item > a .item-description {
    color: #006eb8 !important;
  }

  .header-container,
  #header-container {
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  body.home .tkhs,
  .tkhs {
    margin-top: 0 !important;
  }
}