/*
Theme Name: CODE child
Description: WordPressテーマ「CODE」の自作子テーマです。
Template: code_tcd090_new284
Author: Shingo Takenaka
Author URI: http://aplf.com/
Version: 2.8.4
*/

/* =========================================================
   00. Fonts
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500;600;700&display=swap');


/* =========================================================
   01. Base Typography
   ========================================================= */
body#body,
body{
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 600;
}

/* フッターバナー */
#footer_banner .title,
#footer_banner .desc{
  font-family: 'M PLUS 1p', sans-serif !important;
}

/* 記事下：著者プロフィール（テーマ側の要素） */
.author_profile .name,
.author_profile .catch,
.author_profile .desc{
  font-family: 'M PLUS 1p', sans-serif !important;
}


/* =========================================================
   02. Headings / Subtitles
   ========================================================= */

/* タイトル下などの英語サブタイトル（共通） */
.subtitle_en{
  font-family: "Georgia", "Times New Roman", serif;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: #999;
  letter-spacing: 0.3px;
  line-height: 1.4;
  margin-top: -8px;
  margin-bottom: 50px !important;
}

.subtitle_en--hero{
  color: #fff;
  opacity: 0.95;
}

/* data-en 見出しの英語サブタイトル（一本化済） */
.styled_h2[data-en]::after,
.styled_h3[data-en]::after,
.styled_h4[data-en]::after{
  content: attr(data-en) !important;
  display: block !important;
  margin-top: 6px;
  font-size: 0.85em;
  color: #888;
  letter-spacing: 0.05em;
  line-height: 1.5;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.styled_h2[data-en],
.styled_h3[data-en],
.styled_h4[data-en]{
  margin-bottom: .6em;
}

/* 見出し内の英語（.en） */
.styled_h2 .en,
.styled_h3 .en,
.styled_h4 .en{
  white-space: normal !important;
  display: block !important;
  line-height: 1.5;
  word-break: break-word;
  margin-top: 4px;
}

/* サブタイトル：カード/スライダー/メニュー共通ベース */
.aplf-subtitle{
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

/* 記事本文だけ拡大 */
.single #article .aplf-subtitle{
  font-size: 1.25rem;
  color: #444;
}

@media (max-width: 768px){
  .single #article .aplf-subtitle{ font-size: 1.0rem; }
}

/* バーガーメニュー内：サブタイトルだけ白 */
#mega_menu .title_area p.aplf-subtitle a{
  color: #ffffff !important;
}

/* ガイド記事用サブタイトル */
.guide-subtitle{
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.single #article .guide-subtitle{
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 20px;
}

@media (max-width: 768px){
  .single #article .guide-subtitle{ font-size: 1.0rem; }
}

/* 深層シリーズ用サブタイトル */
.deep-subtitle{
  font-size: 0.85rem;
  margin-top: 4px;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.single #article .deep-subtitle{
  font-size: 1.35rem;
  color: #444;
  margin-top: -4px;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

@media (max-width: 768px){
  .single #article .deep-subtitle{
    font-size: 1.0rem;
    margin-bottom: 22px;
  }
  .deep-subtitle{ font-size: 0.9rem; } /* 一覧・カード用 */
}


/* =========================================================
   03. Global Utilities
   ========================================================= */
.content-divider{
  border: none;
  border-top: 1px solid #ccd;
  margin: 80px 0 !important;
}

.content-divider--compact{
  border: none;
  border-top: 1px solid #ccd;
  margin: 40px 0;
}

/* 断面ごとのアクセントリンク（hover時） */
.link-principles:hover  { color: #3b4c5e; }
.link-habits:hover      { color: #7aa8a3; }
.link-wonder:hover      { color: #c07f52; }
.link-connection:hover  { color: #90a487; }
.link-descernment:hover { color: #d1c0a8; }
.link-lifedesign:hover  { color: #b29f63; }


/* =========================================================
   04. Page: Top (Home)
   ========================================================= */
.section-block{ text-align: center; }

.section-title{
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
}

.section-subtitle{
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 0.75em;
}

@media (max-width: 600px){
  .section-title{ font-size: 1.3rem; }
  .section-subtitle{ font-size: 1.1rem; }
}

/* トップページ特集：SPタブ */
.aplf-tabs{ display: none; } /* PCでは非表示 */

.aplf-tab{
  appearance: none;
  border: 1px solid #d8dde3;
  background: #fff;
  color: #333;
  padding: 10px 14px;
  border-radius: 999px;
  margin-right: 8px;
  line-height: 1;
}

.aplf-tab.is-active{
  background: #3e4a56;
  color: #fff;
  border-color: #3e4a56;
}

@media (max-width: 900px){
  .aplf-tabs{ display: block; margin-bottom: 14px; }
  .aplf-panels{ display: block; }
  .aplf-panel{ display: none; }
  .aplf-panel.is-active{ display: block; }
}


/* =========================================================
   05. Headings: Philosophy / Notice / Tech
   ========================================================= */

/* H2（理念・構造ページ用） */
.philosophy-content h2{
  background: #f5f6f4;
  border-left: 4px solid #4b5e4b;
  padding: 0.9em 1.2em;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.6;
  margin: 64px 0 40px;
  color: #111;
}

/* H2（お知らせ・技術系） */
.notice-content h2,
.news-content h2,
.tech-content h2{
  background: none;
  border-left: none;
  border-bottom: 2px solid #222;
  padding-bottom: 6px;
  font-size: 22px;
  font-weight: 700;
  margin: 48px 0 24px;
}


/* =========================================================
   06. Components
   ========================================================= */

/* About末のボタン */
.q_button_wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.q_button_wrap a{
  width: 200px;
  height: 56px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .q_button_wrap{
    flex-direction: column;
    align-items: center;
  }
}

/* 登録カード（LINE案内など） */
.signup-card{
  background: #f7f8f6;
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  margin: 64px auto 40px;
  max-width: 460px;
  border: 1px solid rgba(0,0,0,0.03);
}

.signup-text{
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  margin: 0 0 22px;
}

/* ボタン（共通） */
.btn-primary{
  display: inline-block;
  background: #222;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all .15s ease;
}

.btn-primary:hover{
  opacity: .9;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* 記事下：研究室招待 */
.mini-lab-invite{
  background: #f9faf8;
  border: 1px solid #e4e9e4;
  border-radius: 10px;
  padding: 28px 24px;
  margin: 48px auto 64px;
  max-width: 680px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  text-align: left;
}

.mini-lab-text{
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  margin: 0 0 1.5em;
}

.mini-lab-cta{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.mini-lab-invite a{
  color: #4b5e4b;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(75,94,75,.35);
  padding-bottom: 1px;
  transition: all .2s ease;
}

.mini-lab-invite a:hover{
  color: #fff;
  background: #4b5e4b;
  border-bottom-color: transparent;
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0 3px 14px rgba(75,94,75,0.18);
}

/* お知らせ等の追記欄 */
.post-update-note{
  background: #f7f9f6;
  border-left: 4px solid #4b5e4b;
  padding: 12px 14px;
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.8;
  color: #2a2a2a;
}

.post-update-note a{
  color: #2f5d3a;
  text-decoration: underline;
}

/* 図のキャプション */
.aplf-figure{ margin: 28px auto; }

.aplf-figure img{
  width: auto;
  height: auto;
  border-radius: 8px;
}

.aplf-caption{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #666;
  text-align: center;
}

.aplf-caption .source{
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  color: #999;
}

/* 日時の表示 */
.aplf-time{
  font-size: 13px;
  color: #777;
  margin-top: -4px;
  margin-bottom: 12px;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
}

/* SOONカード */
.card-list{
  display: grid;
  gap: 24px;
  margin: 24px 0 32px;
}

.soon-card{
  padding: 16px 20px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.soon-card:hover{
  background: #f3f3f3;
  border-color: #d5d5d5;
}

.soon-card p{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

.soon-card .soon{
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}


/* =========================================================
   07. Profiles
   ========================================================= */

/* About等：APLFプロフィール背景ブロック */
section.aplf-profile.fade-bg{
  background: linear-gradient(180deg, #f8f9f7 0%, #fbfcfa 100%) !important;
  border-radius: 18px;
  padding: 48px 40px;
  margin-top: 60px;
  text-align: left;
  box-shadow: 0 4px 18px rgba(0,0,0,.03);
}

.aplf-profile.fade-bg .profile-heading{
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  color: #222;
  border-left: 4px solid #4b5e4b;
  padding-left: 12px;
}

.aplf-profile.fade-bg p{
  margin: 12px 0 0;
  font-size: 16.5px;
  line-height: 1.85;
  color: #222;
}

.aplf-profile.fade-bg .profile-link{ margin-top: 24px; }

.aplf-profile.fade-bg .profile-link a{
  text-decoration: none;
  color: #4b5e4b;
  font-weight: 600;
  transition: opacity .2s;
}

.aplf-profile.fade-bg .profile-link a:hover{ opacity: .75; }

@media (max-width: 640px){
  .aplf-profile.fade-bg{
    padding: 32px 24px;
    border-radius: 14px;
  }
  .aplf-profile.fade-bg .profile-heading{ font-size: 18px; }
  .aplf-profile.fade-bg p{
    font-size: 12px;
    line-height: 1.8;
  }
}

/* 記事下プロフィール（共通） */
.profile-block{
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 1.6em;
}

.profile-name{
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25em;
}

.profile-title{
  font-size: 0.92rem;
  font-weight: 400;
  color: #666;
  margin-bottom: 1.2em;
}

.profile-text{
  font-size: 0.9rem;
  line-height: 1.82;
  color: #333;
  margin-bottom: 1.9em;
}

.profile-cta a{
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 6px !important;
}

/* Sidebar profile（衝突回避：#side_col を起点に分離） */
#side_col .textwidget.post_content > p.profile-title{
  font-size: 22px;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

#side_col .profile-name{
  font-size: 22px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 6px;
  text-align: center;
}

#side_col .profile-block .profile-title{
  font-size: 15px;
  font-weight: 500;
  color: #666;
  margin-bottom: 18px;
  text-align: center;
}

#side_col .profile-text{
  font-size: 15px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 28px;
  text-align: center;
}


/* =========================================================
   08. Tags (Tag Archive)
   ========================================================= */
.tag-origin-link{
  margin-top: 20px;
  font-size: 0.9rem;
  color: #555;
}

.tag-origin-link a{
  text-decoration: underline;
  color: #4b5e4b;
}

.tag-anchor{
  position: relative;
  top: -90px;
}

.tag-title{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #222;
}

.tag-sub{
  font-size: 16px;
  margin-bottom: 24px;
  color: #444;
  letter-spacing: 0.02em;
}

.tag .entry-content strong{
  font-weight: 500;
  color: #777;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}

.tag .entry-content h1 + p strong{
  font-size: 0.88em;
  color: #888;
}


/* =========================================================
   09. Plugins
   ========================================================= */

/* Instagram widget */
#sb_instagram .sbi_bio_info{ display: none !important; }

.sbi_bio_info,
.sbi_header_stats{ display: none !important; }

[id^="sb_instagram"] .sbi_header_img,
[id^="sb_instagram"] .sbi_header_img img{
  width: 60px !important;
  height: 60px !important;
}

#side_col #sb_instagram .sbi_header_text h3{
  font-size: 16px;
  font-weight: 600;
}

#side_col #sb_instagram .sbi_bio{
  font-size: 13px;
  color: #666;
}

/* Easy Table of Contents */
#ez-toc-container{
  width: 100%;
  max-width: 100%;
  margin: 40px 0 48px;
  padding: 20px 0 24px;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

#ez-toc-container::before,
#ez-toc-container::after{
  content: "";
  display: block;
  height: 1.0px;
  width: 100%;
  background: #e5e8e5;
}

#ez-toc-container::before{ margin-bottom: 24px; }
#ez-toc-container::after{ margin-top: 24px; }

#ez-toc-container .ez-toc-title{
  margin: 0 0 14px;
  padding: 0;
  font-size: 1.4rem !important;
  font-weight: 600;
  color: #6b8f6b;
  background: none;
  border: none;
  line-height: 2.0;
}

#ez-toc-container ul.ez-toc-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

#ez-toc-container ul.ez-toc-list > li{
  margin: 4px 0;
  font-size: 0.95rem;
  line-height: 2.0;
}

#ez-toc-container ul.ez-toc-list ul{
  margin: 2px 0 0 1.4em;
  padding: 0;
}

#ez-toc-container ul.ez-toc-list ul > li{
  margin: 2px 0;
  font-size: 0.9rem;
  line-height: 2.0;
}

#ez-toc-container a.ez-toc-link{
  color: #333;
  text-decoration: none;
}

#ez-toc-container a.ez-toc-link:hover{ color: #6b8f6b; }

@media (max-width: 768px){
  #ez-toc-container{
    margin: 28px 0 36px;
    padding: 16px 0 20px;
  }
  #ez-toc-container::before{ margin-bottom: 16px; }
  #ez-toc-container::after{ margin-top: 20px; }
  #ez-toc-container .ez-toc-title{ font-size: 1.2rem !important; }
  #ez-toc-container ul.ez-toc-list > li{ font-size: 0.9rem; }
  #ez-toc-container ul.ez-toc-list ul > li{ font-size: 0.85rem; }
}


/* =========================================================
   10. Misc / Site-wide small tweaks
   ========================================================= */

/* バーガーメニュー内 note アイコン反転 */
@media (max-width: 1201px){
  #mega_menu #side_sns li.note a::before{
    filter: invert(1) brightness(2);
  }
}

/* 記事末尾 署名 */
.aplf-signature{
  margin-top: 3.5em;
  text-align: right;
}

.aplf-signature .role{
  font-size: 0.85em;
  line-height: 1.4;
  color: #777;
  letter-spacing: 0.05em;
}

.aplf-signature .name{
  font-size: 0.95em;
  line-height: 1.6;
  color: #333;
}

/* Top page – 6断面、深層 見出し調整。セクションの並びが変わると数字が変わるので注意 */
#cb_content_4 h2.catch,
#cb_content_2 h2.catch{
  font-size: 28px !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px){
  #cb_content_4 h2.catch,
  #cb_content_2 h2.catch{
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}

#cb_content_5 h2.headline span{
  font-size: 28px !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px){
  #cb_content_5 h2.headline span{
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}

/* PCだけ：深層セクションの間を詰める */
@media (min-width: 769px){
  #cb_content_2 .cb_content_header,
  #cb_content_4 .cb_content_header,
  #cb_content_2 .desc,
  #cb_content_4 .desc{
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  #cb_content_2 .cb_content_header .desc p,
  #cb_content_4 .cb_content_header .desc p{
    margin-bottom: 12px !important;
  }

  #cb_content_2 .post_content > p:first-child,
  #cb_content_4 .post_content > p:first-child{
    margin-top: 12px !important;
  }

  .cb_content .cb_inner{
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
  }
}

/* 記事数の数字はアクセントカラーから外す */
#blog_total_num .num{
  color: #ffffff !important;
}

/* 余白ユーティリティ（静けさ） */
.deep-series-silence{ height: 140px; }
.about-silence{ height: 152px; }
.record-silence{ height: 152px; }

@media (max-width: 768px){
  .deep-series-silence{ height: 96px; }
  .about-silence{ height: 104px; }
  .record-silence{ height: 104px; }
}

/* About設計図箇所のアンカー位置調整 */
#aplf-blueprint{ scroll-margin-top: 100px; }
@media (max-width: 768px){
  #aplf-blueprint{ scroll-margin-top: 80px; }
}

/* 投稿の更新日表示。節目の記録記事用。 */
.post-meta-date{
  margin-top: 64px;
  font-size: 12px;
  color: #999;
  text-align: center;
  letter-spacing: 0.08em;
}


/* =========================================================
   11. Buttons / Hero CTA
   ========================================================= */

/* Top Hero CTA（home） */
body.home .design_button2 a{
  background-color: rgba(74, 90, 106, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: none !important;
}

body.home .design_button2 a span{
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit !important;
}

body.home .design_button2 a:hover{
  background-color: rgba(107, 143, 107, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body.home .design_button2 a:focus,
body.home .design_button2 a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28) !important;
}

/* Dialogue / Design Session Hero CTA。page-idが変わる場合は変更 */
body.page-id-3412 #page_header .q_custom_button.q_custom_button1,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1{
  background-color: rgba(74, 90, 106, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}

body.page-id-3412 #page_header .q_custom_button.q_custom_button1:hover,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1:hover{
  background-color: rgba(90, 106, 122, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

body.page-id-3412 #page_header .q_custom_button.q_custom_button1:focus,
body.page-id-3412 #page_header .q_custom_button.q_custom_button1:focus-visible,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1:focus,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28) !important;
}

body.page-id-3412 #page_header .q_custom_button.q_custom_button1::before,
body.page-id-3412 #page_header .q_custom_button.q_custom_button1::after,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1::before,
body.page-id-3421 #page_header .q_custom_button.q_custom_button1::after{
  content: none !important;
}


/* =========================================================
   12. Breadcrumb (Mobile) — Single source of truth
   ========================================================= */

/* ===== APLF: Mobile breadcrumb horizontal scroll (single source of truth) ===== */
@media (max-width: 767px){

  #bread_crumb{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
  #bread_crumb::-webkit-scrollbar{ display: none; }

  #bread_crumb ul,
  #bread_crumb ul.clearfix{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #bread_crumb li{
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #bread_crumb a,
  #bread_crumb span{
    display: inline !important; /* 崩れにくい */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #999 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #bread_crumb li.home a{
    display: inline-flex !important;
    align-items: center !important;
  }

  #bread_crumb li.home a::before{
    position: static !important;
    display: inline-block !important;
    height: 1em !important;
    line-height: 1 !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
  }

  #bread_crumb li::after,
  #bread_crumb li.home::after{
    position: static !important;
    display: inline-block !important;
    height: 1em !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 10px !important;
  }

  #bread_crumb li.last::after,
  #bread_crumb ul.clearfix > li:last-child::after{
    content: none !important;
    display: none !important;
  }
}