@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){
  /*必要ならばここにコードを書く*/
}

/* =========================================================
   経営NEXT TOKYO Design Pack v1.0
   ========================================================= */

:root {
  --knt-navy: #173b67;
  --knt-navy-dark: #102c4d;
  --knt-blue: #2d69a6;
  --knt-bg: #f5f7fa;
  --knt-white: #ffffff;
  --knt-text: #202733;
  --knt-subtext: #687384;
  --knt-border: #e3e8ef;
}

/* ===== サイト全体 ===== */

body {
  background: var(--knt-bg);
  color: var(--knt-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  line-height: 1.8;
}

#container {
  background: var(--knt-bg);
}

a {
  color: var(--knt-navy);
  text-decoration: none;
}

a:hover {
  color: var(--knt-blue);
}


/* ===== ヘッダー ===== */

/* ===== ヘッダー ===== */

.header {
  background: var(--knt-white);
  color: var(--knt-text);
  border-bottom: 0;
}

.header-in {
  max-width: 1200px;
  margin: 0 auto;
}

.logo-header {
  padding-top: 30px;
  padding-bottom: 30px;
}

.logo-header a {
  color: var(--knt-navy-dark);
  font-weight: 800;
}

.site-name-text {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tagline {
  color: var(--knt-subtext);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}


/* ===== グローバルナビ ===== */

.navi {
  background: var(--knt-navy-dark);
}

.navi-in {
  max-width: 1200px;
  margin: 0 auto;
}

.navi-in > ul {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.navi-in > ul > li > a {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  min-height: 52px;
  padding-left: 20px;
  padding-right: 20px;
}

.navi-in > ul > li > a:hover {
  background: var(--knt-navy);
  color: #fff;
}

.navi-in .item-description {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 2px;
}


/* ===== メインコンテンツ ===== */

.content-in {
  max-width: 1200px;
}

.main {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.entry-card-wrap {
  background: var(--knt-white);
  border: 1px solid var(--knt-border);
  border-radius: 8px;
  margin-bottom: 18px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.entry-card-wrap:hover {
  transform: translateY(-2px);
  border-color: #d5dde7;
  box-shadow: 0 8px 24px rgba(23, 59, 103, 0.08);
}

.entry-card {
  padding: 22px;
}

.entry-card-title {
  color: var(--knt-text);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 700;
}

.entry-card-snippet {
  color: var(--knt-subtext);
  line-height: 1.75;
}


/* ===== カテゴリーラベル ===== */

.cat-label {
  background: var(--knt-navy);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
}


/* ===== サイドバー ===== */

.sidebar {
  color: var(--knt-text);
}

.sidebar .widget {
  background: var(--knt-white);
  border: 1px solid var(--knt-border);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 20px;
}

.sidebar h3,
.sidebar .widget-title {
  background: transparent;
  color: var(--knt-navy-dark);
  border: 0;
  border-left: 4px solid var(--knt-navy);
  padding: 3px 0 3px 12px;
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 700;
}


/* ===== 検索 ===== */

.search-box {
  border-radius: 5px;
}

.search-edit {
  border: 1px solid #d8dee7;
  border-radius: 5px;
}


/* ===== 記事本文 ===== */

.article {
  background: var(--knt-white);
  border-radius: 8px;
  padding: 38px;
}

.entry-title {
  color: var(--knt-text);
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.article h2 {
  color: var(--knt-navy-dark);
  border-left: 5px solid var(--knt-navy);
  background: #f3f6fa;
  padding: 15px 18px;
  margin-top: 2.4em;
  border-radius: 2px;
}

.article h3 {
  color: var(--knt-navy-dark);
  border-bottom: 2px solid var(--knt-border);
  padding-bottom: 9px;
  margin-top: 2em;
}


/* ===== パンくず ===== */

.breadcrumb {
  color: var(--knt-subtext);
  font-size: 12px;
}


/* ===== フッター ===== */

.footer {
  background: var(--knt-navy-dark);
  color: #dce5ef;
}

.footer a {
  color: #fff;
}


/* ===== スマートフォン ===== */

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

  .logo-header {
    padding-top: 18px;
    padding-bottom: 18px;
  }
	 .site-name-text {
    font-size: 24px;
  }

  .tagline {
    font-size: 11px;
  }

  .entry-card {
    padding: 16px;
  }

  .entry-card-title {
    font-size: 17px;
  }

  .article {
    padding: 22px 18px;
    border-radius: 0;
  }

  .entry-title {
    font-size: 25px;
  }

  .article h2 {
    font-size: 20px;
  }
}
/* =========================================
   経営NEXT TOKYO
   トップページ右側記事カード調整
========================================= */

.knt-side-card a {
    grid-template-columns: 42% 58% !important;
}

.knt-side-card__img {
    overflow: hidden;
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.knt-side-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

.knt-side-card__body {
    padding: 14px 16px;
}
/* =========================================================
   経営NEXT TOKYO
   Brand Header v2.0
   2026-09
========================================================= */


/* ---------------------------------------------------------
   1. ヘッダー背景・高さ
--------------------------------------------------------- */

.header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 58%,
      #f3f8fc 100%
    );
  border-bottom: 1px solid #e5ebf2;
}

.header-in {
  position: relative;
  max-width: 1200px;
  min-height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}


/* ---------------------------------------------------------
   2. ロゴエリア
--------------------------------------------------------- */

.logo-header {
  position: relative;
  z-index: 5;
  width: 43%;
  padding: 0;
  text-align: left;
}

.logo-header a {
  display: inline-block;
  color: var(--knt-navy-dark);
}


/* サイト名 */

.site-name-text {
  margin: 0;
  color: var(--knt-navy-dark);
  font-size: clamp(30px, 2.5vw, 39px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.015em;
}


/* キャッチコピー */

.tagline {
  margin: 9px 0 0;
  color: #68798c;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   3. 右側ブランドメッセージ
--------------------------------------------------------- */

.header-in::before {
  content:
    "東京の中小企業に、次の一手を。\A"
    "補助金・政策・DX・経営改善の最新情報を、わかりやすく。";

  white-space: pre-line;

  position: absolute;
  z-index: 4;

  left: 46%;
  top: 50%;
  transform: translateY(-50%);

  color: #617286;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.025em;
}


/* 1行目だけを強調する代わりに
   全体の見え方をフォントウェイトで調整 */

.header-in::before {
  font-weight: 500;
}


/* ---------------------------------------------------------
   4. 東京スカイライン風の装飾
--------------------------------------------------------- */

.header-in::after {
  content: "";

  position: absolute;
  z-index: 1;

  right: -10px;
  bottom: 0;

  width: 31%;
  height: 105px;

  opacity: 0.16;

  background:
    linear-gradient(
      to top,
      rgba(40, 105, 165, 0.72),
      rgba(100, 165, 216, 0.18)
    );

  clip-path: polygon(
    0% 100%,
    0% 75%,
    7% 75%,
    7% 58%,
    13% 58%,
    13% 68%,
    20% 68%,
    20% 42%,
    27% 42%,
    27% 64%,
    35% 64%,
    35% 36%,
    42% 36%,
    42% 60%,
    49% 60%,
    49% 48%,
    55% 48%,
    55% 71%,
    63% 71%,
    63% 30%,
    69% 30%,
    69% 62%,
    76% 62%,
    76% 44%,
    82% 44%,
    82% 68%,
    88% 68%,
    88% 38%,
    92% 38%,
    94% 5%,
    96% 38%,
    100% 38%,
    100% 100%
  );

  pointer-events: none;
}


/* ---------------------------------------------------------
   5. ナビゲーションを少し上品に
--------------------------------------------------------- */

.navi {
  background: #102c4d;
  box-shadow: 0 3px 12px rgba(16, 44, 77, 0.07);
}

.navi-in > ul > li > a {
  position: relative;
  min-height: 56px;
  padding-left: 28px;
  padding-right: 28px;
  background: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.navi-in > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.045);
}


/* hoverライン */

.navi-in > ul > li > a::after {
  content: "";
  position: absolute;

  left: 50%;
  bottom: 7px;

  width: 0;
  height: 2px;

  background: #70b9e7;
  border-radius: 10px;

  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.navi-in > ul > li > a:hover::after {
  width: 38%;
}


/* ---------------------------------------------------------
   6. トップページにある旧ブランドバーを非表示
   ヘッダーへコピーを統合したため重複を解消
--------------------------------------------------------- */

.home .knt-brandbar {
  display: none;
}


/* ---------------------------------------------------------
   7. ヘッダー登場アニメーション
--------------------------------------------------------- */

@keyframes kntLogoIn {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes kntMessageIn {

  from {
    opacity: 0;
    transform: translate(18px, -50%);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}


.logo-header {
  animation: kntLogoIn 0.55s ease-out both;
}

.header-in::before {
  animation: kntMessageIn 0.7s ease-out 0.08s both;
}


/* ---------------------------------------------------------
   8. タブレット
--------------------------------------------------------- */

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

  .header-in {
    min-height: 135px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .logo-header {
    width: 46%;
  }

  .header-in::before {
    left: 49%;
    font-size: 12px;
  }

  .header-in::after {
    width: 35%;
    opacity: 0.12;
  }

  .navi-in > ul > li > a {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ---------------------------------------------------------
   9. スマートフォン
--------------------------------------------------------- */

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

  .header-in {
    display: block;
    min-height: auto;
    padding: 22px 18px 20px;
  }

  .logo-header {
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .site-name-text {
    font-size: 26px;
  }

  .tagline {
    margin-top: 6px;
    font-size: 11px;
  }

  /* スマホでは右側コピーはサイト名下へ */
  .header-in::before {
    position: relative;
    display: block;

    left: auto;
    top: auto;

    margin-top: 15px;

    transform: none;

    color: #718094;

    font-size: 11px;
    line-height: 1.8;
  }

  .header-in::before {
    animation: none;
  }

  .header-in::after {
    right: -20px;
    width: 52%;
    height: 80px;
    opacity: 0.09;
  }
}


/* ---------------------------------------------------------
   10. 動きを減らす設定への対応
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .logo-header,
  .header-in::before {
    animation: none !important;
  }

  .navi-in > ul > li > a,
  .navi-in > ul > li > a::after {
    transition: none !important;
  }
}
/* =========================================================
   経営NEXT TOKYO
   Brand Header v2.0 重複表示修正
========================================================= */

.header-in::before {
  content: none !important;
  display: none !important;
}
/* =========================================
   経営NEXT TOKYO
   Header Tagline
========================================= */

.logo-header {
  text-align: left;
}

.site-name-text {
  color: #102c4d;
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.015em;
}

.tagline {
  display: block;
  margin-top: 8px;
  margin-bottom: 0;
  color: #6b7b8d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.10em;
}
/* =========================================================
   経営NEXT TOKYO
   Header Final v1.1
   文字重なり修正版
========================================================= */

/* ===== ヘッダー ===== */

.header {
  background: #ffffff;
  border-bottom: 1px solid #e5eaf0;
  overflow: visible;
}

/* 過去の疑似要素をリセット */
.header::before,
.header::after,
.header-in::before,
.header-in::after {
  content: none !important;
  display: none !important;
}

.header-in {
  position: relative;
  display: block;

  max-width: 1200px;
  min-height: 140px;

  margin: 0 auto;
  padding: 0 24px;

  box-sizing: border-box;
}


/* =========================================================
   ロゴブロック
========================================================= */

.logo-header {
  position: absolute;

  left: 24px;
  top: 50%;

  width: 43%;

  margin: 0;
  padding: 0;

  transform: translateY(-50%);

  text-align: left;
}


/* 「一段上の経営メディア」 */

.tagline {
  display: block !important;

  margin: 0 0 7px !important;
  padding: 0 !important;

  color: #69798b !important;

  font-size: 12px !important;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: .10em;

  text-align: left;
}


/* 「経営NEXT TOKYO」 */

.site-name-text {
  display: block;

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

  color: #102c4d !important;

  font-size: clamp(32px, 2.7vw, 42px) !important;
  font-weight: 800;

  line-height: 1.15;
  letter-spacing: .015em;

  text-align: left;
}

.logo-header a {
  color: #102c4d !important;
  text-decoration: none !important;
}


/* =========================================================
   右側コピー
========================================================= */

/*
 * logo-header自体ではなく、リンク要素の疑似要素を使用。
 * 左側ロゴとは別領域へ固定。
 */

.logo-header > a::after {
  content:
    "東京の中小企業に、次の一手を。\A補助金・政策・DX・経営改善の最新情報を、わかりやすく。";

  position: fixed;

  /*
   * fixedの位置指定を下で上書きするための
   * 基本スタイル
   */
  display: none;
}


/*
 * PCでは header-in の疑似要素を使用
 */

.header-in::after {
  content:
    "東京の中小企業に、次の一手を。\A補助金・政策・DX・経営改善の最新情報を、わかりやすく。" !important;

  display: block !important;

  position: absolute;

  left: 50%;
  top: 50%;

  width: calc(50% - 24px);

  box-sizing: border-box;

  transform: translateY(-50%);

  padding-left: 34px;

  border-left: 1px solid #dce3eb;

  white-space: pre-line;

  color: #69798b;

  font-size: 13px;
  font-weight: 500;

  line-height: 2;
  letter-spacing: .02em;

  text-align: left;

  pointer-events: none;
}


/* =========================================================
   ナビゲーション
========================================================= */

.navi {
  background: #102c4d;
}

.navi-in {
  max-width: 1200px;
  margin: 0 auto;
}

.navi-in > ul {
  display: flex;
  justify-content: center;

  max-width: 1200px;
  margin: 0 auto;
}

.navi-in > ul > li > a {
  position: relative;

  min-height: 54px;

  padding-left: 25px;
  padding-right: 25px;

  background: transparent;

  color: #ffffff !important;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: .025em;

  transition: background-color .2s ease;
}

.navi-in > ul > li > a:hover {
  background: rgba(255,255,255,.055);
}


/* ナビ下線 */

.navi-in > ul > li > a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 7px;

  width: 0;
  height: 2px;

  background: #68afe0;

  border-radius: 10px;

  transform: translateX(-50%);

  transition: width .22s ease;
}

.navi-in > ul > li > a:hover::after {
  width: 38%;
}


/* =========================================================
   タブレット
========================================================= */

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

  .header-in {
    min-height: 130px;
  }

  .logo-header {
    width: 42%;
  }

  .header-in::after {
    left: 46%;

    width: 51%;

    padding-left: 24px;

    font-size: 12px;
  }
}


/* =========================================================
   スマートフォン
========================================================= */

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

  .header-in {
    min-height: auto;

    padding: 20px 18px;
  }

  .logo-header {
    position: relative;

    left: auto;
    top: auto;

    width: 100%;

    transform: none;
  }

  .site-name-text {
    font-size: 27px !important;
  }

  .tagline {
    font-size: 10px !important;
  }

  .header-in::after {
    position: relative;

    left: auto;
    top: auto;

    width: 100%;

    margin-top: 14px;
    padding: 12px 0 0;

    border-top: 1px solid #e5eaf0;
    border-left: 0;

    transform: none;

    font-size: 11px;
    line-height: 1.8;
  }
}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .navi-in > ul > li > a,
  .navi-in > ul > li > a::after {
    transition: none;
  }
}
/* =========================================================
   経営NEXT TOKYO
   Header Reset
========================================================= */

.header::before,
.header::after,
.header-in::before,
.header-in::after,
.logo-header::before,
.logo-header::after,
.logo-header > a::before,
.logo-header > a::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   経営NEXT TOKYO
   固定ページ：公開日・更新日・著者情報を非表示
========================================================= */

/* 固定ページのみ：公開日・更新日を非表示 */
body.page .date-tags,
body.page .post-date,
body.page .post-update {
  display: none !important;
}

/* 固定ページのみ：著者・投稿者情報を非表示 */
body.page .author-info,
body.page .footer-meta {
  display: none !important;
}
/* =========================================================
   経営NEXT TOKYO
   運営責任者プロフィールカード Final
========================================================= */

.knt-profile-section {
  margin-top: 2.2em;
  margin-bottom: 2.5em;
}


/* セクション見出し */

.knt-profile-section__title {
  margin: 0 0 16px;

  color: #102c4d;

  background: #f3f6fa;

  border-left: 5px solid #17365d;

  padding: 13px 16px;

  font-size: 24px;
  font-weight: 700;

  line-height: 1.4;

  border-radius: 2px;
}


/* カード本体 */

.knt-profile-card {
  display: grid;

  grid-template-columns:
    118px
    minmax(0, 1fr);

  gap: 20px;

  align-items: start;

  padding: 20px 22px;

  background: #ffffff;

  border: 1px solid #dfe5ec;
  border-left: 3px solid #17365d;

  border-radius: 6px;

  box-shadow:
    0 4px 14px rgba(16, 44, 77, 0.04);
}


/* 写真 */

.knt-profile-card__photo {
  width: 118px;
}

.knt-profile-card__photo img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center top;

  border-radius: 5px;

  background: #eef2f6;
}


/* 本文 */

.knt-profile-card__body {
  min-width: 0;
}


/* 肩書き */

.knt-profile-card__role {
  margin-bottom: 2px;

  color: #6b7785;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 0.06em;
}


/* 氏名 */

.knt-profile-card__name {
  margin: 0 0 11px;

  color: #102c4d;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.35;
}


/* プロフィール本文 */

.knt-profile-card__text p {
  margin: 0 0 8px;

  color: #303943;

  font-size: 13.5px;

  line-height: 1.75;
}

.knt-profile-card__text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Smartphone
========================================================= */

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

  .knt-profile-card {
    display: grid;

    grid-template-columns:
      82px
      minmax(0, 1fr);

    gap: 14px;

    padding: 16px;
  }

  .knt-profile-card__photo {
    width: 82px;
  }

  .knt-profile-card__role {
    font-size: 10px;
  }

  .knt-profile-card__name {
    margin-bottom: 8px;

    font-size: 18px;
  }

  .knt-profile-card__text {
    grid-column: 1 / -1;

    margin-top: 2px;
  }

  .knt-profile-card__text p {
    margin-bottom: 8px;

    font-size: 13px;

    line-height: 1.72;
  }

  .knt-profile-section__title {
    font-size: 21px;
  }
}