@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#post-19 h1.entry-title {
    display: none;
}
.post-19 .date-tags {
  display: none;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* AppleのウェブサイトではHelvetica Neueというフォントが多く使用されています */
    color: #333; /* テキストの色 */
    background-color: #fff; /* 背景色 */
    margin: 0;
    padding: 0;
}

/* ロゴタイトルのスタイリング */
.logo-header a span{
    font-weight: bold;
    font-size: 36px;
    color: #333; /* Appleのロゴは通常ダークグレー色です */
    text-decoration: none; /* テキストの下線を取り除きます */
}

/* キャッチフレーズ */
.tagline{
    font-size: 18px;
    color: #333;
}

/* 見出しのレイアウト */
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    line-height: 1.25;
    font-weight: bold;
    color: #333; /* Appleはダークグレーを使用します */
    margin-top: 35px;
    margin-bottom: 20px;
    border: none; /* ボーダーを取り除きます */
    background-color: transparent; /* 背景色を取り除きます */
    padding-left: 0; /* 左側のパディングを取り除きます */
}

.article h1 {
    font-size: 36px;
}

.article h2 {
    font-size: 32px;
}

.article h3 {
    font-size: 28px;
}

.article h4 {
    font-size: 24px;
}

.article h5 {
    font-size: 20px;
}

.article h6 {
    font-size: 18px;
}

@media screen and (max-width: 480px) {
    .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
        font-size: 18px;
        padding: 10px 10px 10px 0; /* 左側のパディングを取り除きます */
        margin: 6px 0 12px;
    }
}

/* サイドバーのレイアウト */

.sidebar h3 {
		line-height: 1.25;
 		font-weight: bold;
 		color: #333; /* Appleはダークグレーを使用します */
 		margin-top: 35px;
 		margin-bottom: 20px;
		border: none; /* ボーダーを取り除きます */
 		background-color: transparent; /* 背景色を取り除きます */
 		padding-left: 0; /* 左側のパディングを取り除きます */
}


/* SNSシェアボタン */

#main .button-caption {
	display: none; /*キャプション非表示*/
}

.sns-share-message{
    font-weight: bold; /* 太字 */
    color: #333; /* Apple風にするためにダークグレーに変更 */
}

.sns-share-buttons {
    flex-wrap: nowrap; /* 折り返さない */
    justify-content: center; /* 中央寄せ */
}

.sns-share-buttons a {
    border-radius: 50%; /* 丸くする */
    font-size: 20px; /* アイコンのサイズ */
    margin: 0 10px; /* ボタン同士の間隔 */
    background-color: #f4f4f4; /* ボタンの背景色をApple風のライトグレーに変更 */
    color: #333; /* アイコンの色をダークグレーに変更 */
    border: 1px solid #ccc; /* ボタンに薄いボーダーを追加 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* ボタンに少しの影を追加 */
}

#main .sns-share a {
    width: 40px; /* ボタンの横幅 */
    height: 40px; /* ボタンの高さ */
}

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

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

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



/* ========================================
   katonobo front page
======================================== */

.front-top-page .main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.kb-hero {
  padding: 72px 0 56px;
}

.kb-hero-inner {
  max-width: 860px;
}

.kb-hero-kicker {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  opacity: 0.8;
}

.kb-hero-title {
  font-size: 2.3rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.kb-hero-text {
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 760px;
  margin-bottom: 28px;
}

.kb-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kb-button {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid #222;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.kb-button:hover {
  opacity: 0.75;
  text-decoration: none;
}

.kb-button-secondary {
  background: transparent;
}

.kb-section-heading {
  margin-bottom: 24px;
}

.kb-section-heading h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.kb-pillars,
.kb-featured-posts,
.kb-works-links,
.kb-profile,
.kb-external-links {
  margin-top: 72px;
}

.kb-pillars-grid,
.kb-works-grid,
.kb-external-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kb-works-grid {
  grid-template-columns: repeat(2, 1fr);
}

.kb-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 24px;
  border-radius: 6px;
  background: #fff;
}

.kb-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.kb-card p {
  line-height: 1.85;
}

.kb-card a {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
}

.kb-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.kb-post-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  overflow: hidden;
  border-radius: 6px;
}

.kb-post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.kb-post-body {
  padding: 20px;
}

.kb-post-meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 8px;
}

.kb-post-title {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.kb-post-title a {
  text-decoration: none;
}

.kb-post-excerpt {
  line-height: 1.85;
  font-size: 0.96rem;
}

.kb-link-list {
  margin: 0;
  padding-left: 1.2em;
}

.kb-link-list li {
  margin-bottom: 8px;
}

.kb-external-card {
  text-decoration: none;
  color: inherit;
}

.kb-external-card:hover {
  opacity: 0.8;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .kb-pillars-grid,
  .kb-external-grid,
  .kb-posts-grid {
    grid-template-columns: 1fr;
  }

  .kb-works-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .front-top-page .main {
    padding: 0 16px 56px;
  }

  .kb-hero {
    padding: 48px 0 32px;
  }

  .kb-hero-title {
    font-size: 1.8rem;
  }

  .kb-hero-text {
    font-size: 1rem;
  }

  .kb-pillars,
  .kb-featured-posts,
  .kb-works-links,
  .kb-profile,
  .kb-external-links {
    margin-top: 56px;
  }
}

/* katonobo Works page CSS child theme style.css */

.kbw-works-page {
  --kbw-border: #e7e7e7;
  --kbw-text-muted: #666;
  --kbw-bg-soft: #fafafa;
}

.kbw-hero,
.kbw-index,
.kbw-pillars,
.kbw-showcase,
.kbw-external,
.kbw-route,
.kbw-footer-cta {
  margin: 0 0 56px;
}

.kbw-hero-inner,
.kbw-footer-cta-inner {
  padding: 36px 28px;
  border: 1px solid var(--kbw-border);
  border-radius: 18px;
  background: #fff;
}

.kbw-eyebrow,
.kbw-panel-kicker,
.kbw-card-kicker,
.kbw-step-number,
.kbw-stat-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kbw-text-muted);
}

.kbw-title {
  margin: 0 0 14px;
  line-height: 1.2;
}

.kbw-lead,
.kbw-card-text,
.kbw-stat-text,
.kbw-panel p,
.kbw-mini-card p,
.kbw-step-card p,
.kbw-footer-cta-inner p {
  color: #333;
  line-height: 1.8;
}

.kbw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.kbw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #222;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.kbw-button:hover {
  opacity: 0.9;
  color: #fff;
  text-decoration: none;
}

.kbw-button-secondary {
  background: #fff;
  color: #222;
}

.kbw-button-secondary:hover {
  color: #222;
}

.kbw-section-heading {
  margin-bottom: 22px;
}

.kbw-section-heading h2 {
  margin-bottom: 10px;
}

.kbw-section-heading p {
  margin: 0;
  color: var(--kbw-text-muted);
  line-height: 1.8;
}

.kbw-index-grid,
.kbw-pillars-grid,
.kbw-showcase-grid,
.kbw-external-grid,
.kbw-route-grid,
.kbw-mini-grid {
  display: grid;
  gap: 20px;
}

.kbw-index-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kbw-pillars-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kbw-route-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbw-showcase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kbw-external-grid,
.kbw-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbw-stat-card,
.kbw-panel,
.kbw-card,
.kbw-step-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--kbw-border);
  border-radius: 18px;
  background: #fff;
}

.kbw-stat-value {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.kbw-stat-value span {
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.kbw-panel h3,
.kbw-card h3,
.kbw-step-card h3,
.kbw-mini-card h4 {
  margin-top: 0;
  line-height: 1.45;
}

.kbw-list {
  margin: 18px 0 0;
  padding-left: 1.2em;
}

.kbw-list li + li {
  margin-top: 8px;
}

.kbw-card-head {
  margin-bottom: 16px;
}

.kbw-card-text {
  margin-bottom: 18px;
}

.kbw-post-list {
  display: grid;
  gap: 14px;
}

.kbw-post-item {
  padding-top: 14px;
  border-top: 1px solid var(--kbw-border);
}

.kbw-post-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.kbw-post-meta {
  margin: 0 0 6px;
  font-size: 0.86rem;
  color: var(--kbw-text-muted);
}

.kbw-post-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.kbw-post-title a {
  text-decoration: none;
}

.kbw-post-title a:hover {
  text-decoration: underline;
}

.kbw-post-excerpt {
  margin: 0;
  color: #444;
  line-height: 1.7;
}

.kbw-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--kbw-border);
}

.kbw-card-actions a,
.kbw-mini-card a,
.kbw-step-card a {
  font-weight: 700;
  text-decoration: none;
}

.kbw-card-actions a:hover,
.kbw-mini-card a:hover,
.kbw-step-card a:hover {
  text-decoration: underline;
}

.kbw-mini-card {
  padding: 20px;
  border: 1px solid var(--kbw-border);
  border-radius: 16px;
  background: var(--kbw-bg-soft);
}

.kbw-mini-card h4 {
  margin-bottom: 10px;
}

.kbw-mini-card p {
  margin: 0 0 12px;
}

.kbw-external-card {
  display: block;
  text-decoration: none;
}

.kbw-external-card:hover {
  text-decoration: none;
}

.kbw-external-card p:last-child {
  margin-bottom: 0;
}

.kbw-step-card {
  position: relative;
}

.kbw-step-number {
  margin-bottom: 12px;
}

.kbw-step-card.is-current {
  background: var(--kbw-bg-soft);
}

.kbw-footer-cta-inner {
  text-align: center;
}

.kbw-footer-cta-inner h2 {
  margin-top: 0;
}

.kbw-footer-cta-inner .kbw-actions {
  justify-content: center;
}

@media (max-width: 1024px) {
  .kbw-index-grid,
  .kbw-showcase-grid,
  .kbw-external-grid,
  .kbw-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kbw-pillars-grid,
  .kbw-route-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .kbw-hero,
  .kbw-index,
  .kbw-pillars,
  .kbw-showcase,
  .kbw-external,
  .kbw-route,
  .kbw-footer-cta {
    margin-bottom: 40px;
  }

  .kbw-hero-inner,
  .kbw-footer-cta-inner,
  .kbw-stat-card,
  .kbw-panel,
  .kbw-card,
  .kbw-step-card {
    padding: 20px;
  }

  .kbw-index-grid,
  .kbw-showcase-grid,
  .kbw-external-grid,
  .kbw-route-grid,
  .kbw-mini-grid {
    grid-template-columns: 1fr;
  }

  .kbw-stat-value {
    font-size: 1.7rem;
  }

  .kbw-actions {
    gap: 10px;
  }

  .kbw-button {
    width: 100%;
  }
}

/* katonobo About page 用の追加CSS（child theme の style.css へ） */

.kba-about-page {
  --kba-border: #e7e7e7;
  --kba-text-muted: #666;
  --kba-bg-soft: #fafafa;
  --kba-bg-accent: #f6f6f6;
}

.kba-hero,
.kba-overview,
.kba-profile,
.kba-beliefs,
.kba-cycle,
.kba-links,
.kba-external,
.kba-route,
.kba-longform,
.kba-footer-cta {
  margin: 0 0 56px;
}

.kba-hero-inner,
.kba-footer-cta-inner,
.kba-details {
  padding: 36px 28px;
  border: 1px solid var(--kba-border);
  border-radius: 18px;
  background: #fff;
}

.kba-hero-inner {
  display: grid;
  gap: 28px;
}

.kba-hero-inner.has-image {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: center;
}

.kba-hero-copy {
  min-width: 0;
}

.kba-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.kba-eyebrow,
.kba-panel-kicker,
.kba-card-kicker,
.kba-step-number,
.kba-stat-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kba-text-muted);
}

.kba-title {
  margin: 0 0 14px;
  line-height: 1.2;
}

.kba-lead,
.kba-stat-text,
.kba-panel p,
.kba-card p,
.kba-link-card p,
.kba-step-card p,
.kba-footer-cta-inner p,
.kba-details-body {
  color: #333;
  line-height: 1.85;
}

.kba-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.kba-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #222;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.kba-button:hover {
  opacity: 0.92;
  color: #fff;
  text-decoration: none;
}

.kba-button-secondary {
  background: #fff;
  color: #222;
}

.kba-button-secondary:hover {
  color: #222;
}

.kba-section-heading {
  margin-bottom: 22px;
}

.kba-section-heading h2 {
  margin-bottom: 10px;
}

.kba-section-heading p {
  margin: 0;
  color: var(--kba-text-muted);
  line-height: 1.8;
}

.kba-overview-grid,
.kba-profile-grid,
.kba-beliefs-grid,
.kba-cycle-grid,
.kba-links-grid,
.kba-external-grid,
.kba-route-grid {
  display: grid;
  gap: 20px;
}

.kba-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kba-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kba-route-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kba-beliefs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kba-cycle-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kba-links-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kba-external-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kba-stat-card,
.kba-panel,
.kba-card,
.kba-step-card,
.kba-link-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--kba-border);
  border-radius: 18px;
  background: #fff;
}

.kba-stat-value {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.kba-stat-value span {
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.kba-panel h3,
.kba-card h3,
.kba-link-card h3,
.kba-step-card h3 {
  margin-top: 0;
  line-height: 1.45;
}

.kba-list {
  margin: 18px 0 0;
  padding-left: 1.2em;
}

.kba-list li + li {
  margin-top: 8px;
}

.kba-link-card a,
.kba-step-card a,
.kba-inline-links a {
  font-weight: 700;
  text-decoration: none;
}

.kba-link-card a:hover,
.kba-step-card a:hover,
.kba-inline-links a:hover {
  text-decoration: underline;
}

.kba-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.kba-external-card {
  display: block;
  text-decoration: none;
}

.kba-external-card:hover {
  text-decoration: none;
}

.kba-external-card p:last-child {
  margin-bottom: 0;
}

.kba-step-number {
  margin-bottom: 12px;
}

.kba-details summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.kba-details summary::-webkit-details-marker {
  display: none;
}

.kba-details summary::after {
  content: '＋';
  float: right;
  font-weight: 700;
}

.kba-details[open] summary::after {
  content: '−';
}

.kba-details-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--kba-border);
}

.kba-details-body > *:first-child {
  margin-top: 0;
}

.kba-footer-cta-inner {
  text-align: center;
}

.kba-footer-cta-inner h2 {
  margin-top: 0;
}

.kba-footer-cta-inner .kba-actions {
  justify-content: center;
}

@media (max-width: 1100px) {
  .kba-overview-grid,
  .kba-beliefs-grid,
  .kba-cycle-grid,
  .kba-links-grid,
  .kba-external-grid,
  .kba-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kba-profile-grid {
    grid-template-columns: 1fr;
  }

  .kba-hero-inner.has-image {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .kba-hero,
  .kba-overview,
  .kba-profile,
  .kba-beliefs,
  .kba-cycle,
  .kba-links,
  .kba-external,
  .kba-route,
  .kba-longform,
  .kba-footer-cta {
    margin-bottom: 40px;
  }

  .kba-hero-inner,
  .kba-footer-cta-inner,
  .kba-details,
  .kba-stat-card,
  .kba-panel,
  .kba-card,
  .kba-step-card,
  .kba-link-card {
    padding: 20px;
  }

  .kba-overview-grid,
  .kba-profile-grid,
  .kba-beliefs-grid,
  .kba-cycle-grid,
  .kba-links-grid,
  .kba-external-grid,
  .kba-route-grid {
    grid-template-columns: 1fr;
  }

  .kba-actions {
    gap: 10px;
  }

  .kba-button {
    width: 100%;
  }

  .kba-stat-value {
    font-size: 1.7rem;
  }

  .kba-inline-links {
    gap: 10px 14px;
  }
}

/* katonobo Start Here page 用の追加CSS（child theme の style.css へ） */

.kbs-start-page {
  --kbs-border: #e7e7e7;
  --kbs-text-muted: #666;
  --kbs-bg-soft: #fafafa;
}

.kbs-hero,
.kbs-summary,
.kbs-route,
.kbs-steps,
.kbs-entrances,
.kbs-picks,
.kbs-external,
.kbs-longform,
.kbs-footer-cta {
  margin: 0 0 56px;
}

.kbs-hero-inner,
.kbs-footer-cta-inner,
.kbs-details {
  padding: 36px 28px;
  border: 1px solid var(--kbs-border);
  border-radius: 18px;
  background: #fff;
}

.kbs-hero-inner {
  display: grid;
  gap: 28px;
}

.kbs-hero-inner.has-image {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: center;
}

.kbs-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.kbs-eyebrow,
.kbs-card-kicker,
.kbs-step-number,
.kbs-stat-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kbs-text-muted);
}

.kbs-title {
  margin: 0 0 14px;
  line-height: 1.2;
}

.kbs-lead,
.kbs-card-text,
.kbs-link-card p,
.kbs-stat-text,
.kbs-step-card p,
.kbs-post-excerpt,
.kbs-details-body,
.kbs-footer-cta-inner p {
  margin: 0;
  color: #333;
  line-height: 1.85;
}

.kbs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.kbs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #222;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.kbs-button:hover {
  opacity: 0.92;
  color: #fff;
  text-decoration: none;
}

.kbs-button-secondary {
  background: #fff;
  color: #222;
}

.kbs-button-secondary:hover {
  color: #222;
}

.kbs-section-heading {
  margin-bottom: 22px;
}

.kbs-section-heading h2 {
  margin-bottom: 10px;
}

.kbs-section-heading p {
  margin: 0;
  color: var(--kbs-text-muted);
  line-height: 1.8;
}

.kbs-summary-grid,
.kbs-route-grid,
.kbs-steps-grid,
.kbs-entrances-grid,
.kbs-picks-grid,
.kbs-external-grid {
  display: grid;
  gap: 20px;
}

.kbs-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbs-route-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kbs-steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbs-entrances-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kbs-picks-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kbs-external-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbs-card,
.kbs-link-card,
.kbs-step-card,
.kbs-stat-card,
.kbs-pick-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--kbs-border);
  border-radius: 18px;
  background: #fff;
}

.kbs-card h3,
.kbs-link-card h3,
.kbs-step-card h3,
.kbs-pick-card h3,
.kbs-pick-card h4 {
  margin-top: 0;
  line-height: 1.45;
}

.kbs-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.kbs-inline-links a,
.kbs-inline-link a,
.kbs-step-card a,
.kbs-post-title a {
  font-weight: 700;
  text-decoration: none;
}

.kbs-inline-links a:hover,
.kbs-inline-link a:hover,
.kbs-step-card a:hover,
.kbs-post-title a:hover {
  text-decoration: underline;
}

.kbs-step-number {
  margin-bottom: 12px;
}

.kbs-stat-value {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.kbs-stat-value span {
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.kbs-pick-thumb {
  display: block;
  margin: 18px 0 14px;
}

.kbs-pick-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.kbs-post-meta {
  margin: 0 0 8px;
  color: var(--kbs-text-muted);
  font-size: 0.85rem;
}

.kbs-post-title {
  margin-bottom: 10px;
}

.kbs-inline-link {
  margin-top: 16px;
}

.kbs-external-card {
  display: block;
  text-decoration: none;
}

.kbs-external-card:hover {
  text-decoration: none;
}

.kbs-external-card h3,
.kbs-external-card p {
  color: inherit;
}

.kbs-details summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.kbs-details summary::-webkit-details-marker {
  display: none;
}

.kbs-details-body {
  margin-top: 18px;
}

.kbs-details-body > *:first-child {
  margin-top: 0;
}

.kbs-details-body > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .kbs-entrances-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kbs-picks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .kbs-summary-grid,
  .kbs-route-grid,
  .kbs-steps-grid,
  .kbs-external-grid {
    grid-template-columns: 1fr;
  }

  .kbs-hero-inner.has-image {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .kbs-hero-inner,
  .kbs-footer-cta-inner,
  .kbs-details,
  .kbs-card,
  .kbs-link-card,
  .kbs-step-card,
  .kbs-stat-card,
  .kbs-pick-card {
    padding: 22px 18px;
  }

  .kbs-entrances-grid,
  .kbs-picks-grid {
    grid-template-columns: 1fr;
  }

  .kbs-actions {
    flex-direction: column;
  }

  .kbs-button {
    width: 100%;
  }
}

/* katonobo novel hub用の追加CSS（child theme の style.css へ） */

.kbn-novel-hub {
  padding-bottom: 3.5rem;
}

.kbn-novel-hub .main {
  width: 100%;
}

.kbn-hero,
.kbn-stats,
.kbn-guides,
.kbn-featured,
.kbn-plan,
.kbn-archive,
.kbn-related,
.kbn-bottom-cta {
  margin: 0 0 3rem;
}

.kbn-hero-inner,
.kbn-bottom-cta-inner {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: #fff;
}

.kbn-hero-inner {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  align-items: stretch;
}

.kbn-eyebrow,
.kbn-card-kicker,
.kbn-panel-label,
.kbn-stat-label {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.kbn-title {
  margin: 0 0 1rem;
  line-height: 1.3;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.kbn-lead,
.kbn-panel-text,
.kbn-stat-text,
.kbn-link-card p,
.kbn-plan-card p,
.kbn-bottom-cta p,
.kbn-empty-card p,
.kbn-post-excerpt,
.kbn-section-heading p {
  line-height: 1.85;
}

.kbn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.kbn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: #111;
  color: #fff;
}

.kbn-button:hover,
.kbn-button:focus {
  opacity: 0.9;
  color: #fff;
}

.kbn-button-secondary {
  background: #f4f4f4;
  color: #111;
}

.kbn-button-secondary:hover,
.kbn-button-secondary:focus {
  color: #111;
}

.kbn-hero-panel,
.kbn-stat-card,
.kbn-link-card,
.kbn-plan-card,
.kbn-empty-card,
.kbn-post-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  background: #fff;
}

.kbn-hero-panel {
  padding: 1.4rem;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
}

.kbn-hero-panel h2 {
  margin: 0 0 0.4rem;
  line-height: 1.45;
  font-size: 1.3rem;
}

.kbn-panel-date,
.kbn-post-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  opacity: 0.72;
}

.kbn-inline-link {
  margin: 1rem 0 0;
}

.kbn-inline-link a,
.kbn-link-card a {
  font-weight: 700;
  text-decoration: none;
}

.kbn-stats-grid,
.kbn-guides-grid,
.kbn-featured-grid,
.kbn-plan-grid,
.kbn-archive-grid,
.kbn-related-grid {
  display: grid;
  gap: 1rem;
}

.kbn-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbn-guides-grid,
.kbn-featured-grid,
.kbn-plan-grid,
.kbn-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbn-archive-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kbn-stat-card,
.kbn-link-card,
.kbn-plan-card,
.kbn-empty-card {
  padding: 1.35rem;
}

.kbn-link-card.is-primary {
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 100%);
}

.kbn-stat-value {
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
}

.kbn-stat-date,
.kbn-stat-textonly {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.kbn-section-heading {
  margin: 0 0 1.1rem;
}

.kbn-section-heading h2,
.kbn-bottom-cta h2,
.kbn-link-card h3,
.kbn-plan-card h3,
.kbn-empty-card h3,
.kbn-post-title {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.kbn-post-card {
  overflow: hidden;
}

.kbn-post-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f7f7f7;
}

.kbn-post-thumb img,
.kbn-post-thumb .kbn-thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kbn-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f3f3 0%, #ececec 100%);
}

.kbn-thumb-fallback span {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  opacity: 0.35;
}

.kbn-post-body {
  padding: 1rem 1rem 1.15rem;
}

.kbn-post-title a {
  text-decoration: none;
}

.kbn-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.kbn-pagination li {
  margin: 0;
}

.kbn-pagination a,
.kbn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
}

.kbn-pagination .current {
  background: #111;
  color: #fff;
  border-color: #111;
}

.kbn-bottom-cta-inner {
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
}

@media (max-width: 980px) {
  .kbn-hero-inner,
  .kbn-bottom-cta-inner,
  .kbn-stats-grid,
  .kbn-guides-grid,
  .kbn-featured-grid,
  .kbn-plan-grid,
  .kbn-archive-grid,
  .kbn-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kbn-hero-inner,
  .kbn-bottom-cta-inner {
    padding: 1.35rem;
    border-radius: 18px;
  }

  .kbn-stat-card,
  .kbn-link-card,
  .kbn-plan-card,
  .kbn-empty-card {
    padding: 1.15rem;
  }

  .kbn-button {
    width: 100%;
  }
}