@charset "UTF-8";

/*!
Theme Name: Ig Knowledge Cocoon Child
Theme URI: https://igknowledge-psycho.com/
Description: Ig Knowledge用のCocoon Child Theme
Author: Ig Knowledge
Author URI: https://igknowledge-psycho.com/
Template: cocoon-master
Version: 0.1.0
Text Domain: ig-cocoon-child
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
:root {
  --ig-focus-color: #005fcc;
  --ig-content-measure: 72rem;
}

/* Keep existing Cocoon content and URLs intact while improving reading flow. */
html {
  scroll-behavior: smooth;
}

body {
  overflow-wrap: anywhere;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ig-focus-color);
  outline-offset: 3px;
}

:where(.entry-content, .article-body, .main, .sidebar) :where(pre, code) {
  overflow-wrap: anywhere;
}

:where(.entry-content, .article-body) pre,
:where(.entry-content, .article-body) table {
  max-width: 100%;
  overflow-x: auto;
}

:where(.entry-content, .article-body) h2,
:where(.entry-content, .article-body) h3,
:where(.entry-content, .article-body) h4 {
  scroll-margin-top: 5rem;
}

/* Keep long article columns comfortable without changing their content. */
:where(.entry-content, .article-body) {
  max-width: var(--ig-content-measure);
  line-height: 1.85;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  :where(.content-in, .header-in) {
    box-sizing: border-box;
    width: 100%;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  :where(.content-in, .header-in) {
    padding-inline: 1rem;
  }

  /* Preserve the existing navigation links while making a long menu usable. */
  #navi .navi-in {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #navi .navi-in > ul {
    min-width: max-content;
  }

  :where(.navi-menu-button, .mobile-menu-buttons .menu-button, .header-menu-button) {
    min-width: 44px;
    min-height: 44px;
  }

  :where(.entry-content, .article-body) {
    line-height: 1.8;
  }

  :where(.entry-content, .article-body) table {
    display: block;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  :where(.content-in, .header-in) {
    padding-inline: 0.75rem;
  }

  :where(input[type="search"], input[type="text"], input[type="email"], textarea, select, button, .button) {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Phase B: expose existing routes as an intent-led information architecture. */
.ig-knowledge-hub,
.ig-knowledge-expertise,
.ig-knowledge-related {
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #d8e3e8;
  border-radius: 0.75rem;
  background: #f7fafb;
}

.ig-knowledge-hub__intro {
  max-width: 48rem;
}

.ig-knowledge-hub__intro h2,
.ig-knowledge-expertise h2,
.ig-knowledge-related h2 {
  margin-top: 0;
}

.ig-knowledge-hub__eyebrow {
  margin: 0 0 0.35rem;
  color: #365c6b;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ig-knowledge-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ig-knowledge-hub__item a {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid #c9d9df;
  border-radius: 0.5rem;
  background: #fff;
  text-decoration: none;
}

.ig-knowledge-hub__item a:hover {
  border-color: #365c6b;
}

.ig-knowledge-hub__label {
  color: #173b4a;
  font-weight: 700;
}

.ig-knowledge-hub__description {
  color: #40545c;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ig-knowledge-related ul {
  margin-bottom: 0;
}

@media screen and (max-width: 480px) {
  .ig-knowledge-hub,
  .ig-knowledge-expertise,
  .ig-knowledge-related {
    margin-block: 1.5rem;
    padding: 1rem;
  }

  .ig-knowledge-hub__grid {
    grid-template-columns: 1fr;
  }
}