@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;
  }
}