/**
 * Akatsuki site overrides
 *
 * The controlled source for rules migrated from Cocoon's Custom CSS.
 * Shared single-post presentation is scoped under .note-single. Keep one-off
 * historical article styles in the content/theme compatibility layer below.
 */

:root {
  --ak-brand: #19448e;
  --ak-scroll-top: #1149b2;
  --ak-accent: #f6a068;
  --ak-hero-accent: #ffbe30;
  --ak-content-width: 860px;
  --ak-sidebar-width: 348px;
  --ak-content-line-height: 1.8;
  --ak-content-space: 1.8em;
}

/* Global Cocoon layout and colour overrides. */
.go-to-top .go-to-top-button {
  background-color: var(--ak-scroll-top);
  color: #fff;
}

.main { width: var(--ak-content-width); }

.sidebar {
  width: var(--ak-sidebar-width);
  padding-right: 5px;
  padding-left: 5px;
}

#respond {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.entry-content > *,
.demo .entry-content p,
.main,
.main p,
.main p.wp-block-paragraph {
  line-height: var(--ak-content-line-height);
}

.entry-content > *,
.mce-content-body > *,
.article p,
.demo .entry-content p,
.article dl,
.article ul,
.article ol,
.article blockquote,
.article pre,
.article table,
.article .toc,
.body .article,
.body .column-wrap,
.body .new-entry-cards,
.body .popular-entry-cards,
.body .navi-entry-cards,
.body .box-menus,
.body .ranking-item,
.body .rss-entry-cards,
.body .widget,
.body .author-box,
.body .blogcard-wrap,
.body .login-user-only,
.body .information-box,
.body .question-box,
.body .alert-box,
.body .information,
.body .question,
.body .alert,
.body .memo-box,
.body .comment-box,
.body .common-icon-box,
.body .blank-box,
.body .button-block,
.body .micro-bottom,
.body .caption-box,
.body .tab-caption-box,
.body .label-box,
.body .toggle-wrap,
.body .wp-block-image,
.body .booklink-box,
.body .kaerebalink-box,
.body .tomarebalink-box,
.body .product-item-box,
.body .speech-wrap,
.body .wp-block-categories,
.body .wp-block-archives,
.body .wp-block-archives-dropdown,
.body .wp-block-calendar,
.body .ad-area,
.body .wp-block-gallery,
.body .wp-block-audio,
.body .wp-block-cover,
.body .wp-block-file,
.body .wp-block-media-text,
.body .wp-block-video,
.body .wp-block-buttons,
.body .wp-block-columns,
.body .wp-block-separator,
.body .components-placeholder,
.body .wp-block-search,
.body .wp-block-social-links,
.body .timeline-box,
.body .blogcard-type,
.body .btn-wrap,
.body .btn-wrap a,
.body .block-box,
.body .wp-block-embed,
.body .wp-block-group,
.body .wp-block-table,
.body .scrollable-table,
.body .wp-block,
.body .video-container,
.comment-area,
.related-entries,
.pager-post-navi,
.comment-respond { margin-bottom: var(--ak-content-space); }

#wpcontent #wpbody .is-root-container > * { margin-bottom: var(--ak-content-space); }

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 { margin-bottom: 1.62em; }

.article .micro-top { margin-bottom: .36em; }
.article .micro-bottom { margin-top: -1.62em; }
.article .micro-balloon { margin-bottom: .9em; }
.article .micro-bottom.micro-balloon { margin-top: -1.26em; }

.blank-box.bb-key-color,
.tb-key-color .toggle-checkbox:checked ~ .toggle-content,
.cb-key-color.caption-box,
.tcb-key-color .tab-caption-box-content,
.lb-key-color .label-box-content { border-color: var(--ak-brand); }

.iic-key-color li::before,
.has-text-color.has-key-color-color { color: var(--ak-brand); }

.blank-box.bb-tab.bb-key-color::before,
.tb-key-color .toggle-button,
.cb-key-color .caption-box-label,
.tcb-key-color .tab-caption-box-label,
.mc-key-color,
.btn-key-color,
.btn-wrap.btn-wrap-key-color > a,
.has-background.has-key-color-background-color { background-color: var(--ak-brand); }

.tb-key-color .toggle-button,
.cb-key-color .caption-box-label,
.tcb-key-color .tab-caption-box-label,
.mc-key-color { color: #fff; }

.tb-key-color .toggle-button { border: 1px solid var(--ak-brand); }
.tb-key-color .toggle-button::before { color: #ccc; }
.mc-key-color { border: 0; }
.mc-key-color.micro-bottom::after { border-top-color: transparent; border-bottom-color: var(--ak-brand); }
.mc-key-color::before { border-top-color: transparent; border-bottom-color: transparent; }
.mc-key-color::after { border-top-color: var(--ak-brand); }

.body.article,
body#tinymce.wp-editor { background-color: #fff; color: #333; }

.box-menu:hover {
  box-shadow: inset 2px 2px 0 0 var(--ak-accent), 2px 2px 0 0 var(--ak-accent), 2px 0 0 0 var(--ak-accent), 0 2px 0 0 var(--ak-accent);
}
.box-menu-icon { color: var(--ak-accent); }

/* Cocoon table of contents: this is global component behaviour, not post CSS. */
.toc-checkbox { display: none; }
.toc-content { visibility: hidden; height: 0; opacity: .2; transition: all .5s ease-out; }
.toc-checkbox:checked ~ .toc-content { visibility: visible; height: 100%; padding-top: .6em; opacity: 1; }
.toc-title::after { content: '[開く]'; margin-left: .5em; cursor: pointer; font-size: .8em; }
.toc-title:hover::after { text-decoration: underline; }
.toc-checkbox:checked + .toc-title::after { content: '[閉じる]'; }

/* Reusable, opt-in article components. */
.ak-article-table { width: 100%; border-collapse: collapse; }
.ak-article-table th,
.ak-article-table td { padding: .75rem; border: 1px solid #d8dee8; text-align: left; vertical-align: top; }
.ak-article-table th { background: #f3f6fa; color: #1e355b; }
.ak-faq { margin-block: var(--ak-content-space); }
.ak-faq > * + * { margin-top: .75rem; }
.ak-faq dt { color: #1e355b; font-weight: 700; }
.ak-faq dd { margin-inline: 0; }
.ak-article-steps { counter-reset: ak-step; padding-left: 0; list-style: none; }
.ak-article-steps > li { position: relative; padding: .85rem .85rem .85rem 3.5rem; border: 1px solid #d8dee8; background: #fff; }
.ak-article-steps > li + li { margin-top: .75rem; }
.ak-article-steps > li::before { counter-increment: ak-step; content: "STEP " counter(ak-step); position: absolute; top: .85rem; left: .85rem; color: var(--ak-brand); font-size: .78rem; font-weight: 700; }
.ak-source-note { margin-block: var(--ak-content-space); padding: 1rem 1.25rem; border: 1px solid #d8dee8; background: #fafbfd; font-size: .94em; }
.ak-source-note h2,
.ak-source-note h3 { margin: 0 0 .5rem; font-size: 1em; }
.ak-source-note ul { margin: 0; padding-left: 1.25em; }
.ak-consult-cta { margin-block: var(--ak-content-space); padding: 1.25rem; border-left: 4px solid var(--ak-brand); background: #f3f6fa; }
.ak-consult-cta a { color: var(--ak-brand); font-weight: 700; }
.ak-accent-text { color: var(--ak-hero-accent); }
.ak-category-filter-label { display: block; }

/* ========================================================================
   Shared Post/article presentation
   The single.php wrapper gives all Posts the .note-single scope. Keep this
   separate from Visa pages and preserve the article link underline contract.
   ======================================================================== */
.note-single .entry-header .entry-title {
  display: block;
  max-width: 820px;
  margin: 1.6rem auto;
  color: #19365e;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.note-single .entry-content {
  max-width: 820px;
  margin-inline: auto;
  color: #253247;
  font-size: 1.6rem;
  line-height: var(--ak-content-line-height);
  overflow-wrap: anywhere;
}
.note-single .entry-content > p {
  margin: 0 0 1.6em;
  line-height: var(--ak-content-line-height);
}
.note-single .entry-content > p:first-child {
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--ak-brand);
  background: #f3f6fa;
}
.note-single .entry-content h2 {
  margin-top: 3rem;
  padding: .55rem 0 .55rem .85rem;
  border-left: 5px solid var(--ak-brand);
  color: #19365e;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  scroll-margin-top: 96px;
}
.note-single .entry-content h3 {
  margin-top: 2.25rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid #d8dee8;
  color: #254b79;
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  scroll-margin-top: 96px;
}
.note-single .entry-content > :is(h4, h5, h6),
.note-single .entry-content > section > :is(h4, h5, h6),
.note-single .entry-content > .wp-block-group > :is(h4, h5, h6) {
  margin-top: 2rem;
  margin-bottom: .8rem;
  color: #254b79;
  line-height: 1.5;
  overflow-wrap: anywhere;
  scroll-margin-top: 96px;
}
.note-single .entry-content > h4,
.note-single .entry-content > section > h4,
.note-single .entry-content > .wp-block-group > h4 { font-size: 1.9rem; }
.note-single .entry-content > h5,
.note-single .entry-content > section > h5,
.note-single .entry-content > .wp-block-group > h5 { font-size: 1.7rem; }
.note-single .entry-content > h6,
.note-single .entry-content > section > h6,
.note-single .entry-content > .wp-block-group > h6 { font-size: 1.6rem; }
.note-single .entry-content :is(ul, ol) {
  padding-left: 1.4em;
  line-height: var(--ak-content-line-height);
}
.note-single .entry-content :is(ul, ol) :is(ul, ol) { margin-top: .5em; margin-bottom: .5em; }
.note-single .entry-content li + li { margin-top: .5em; }
.note-single .entry-content a:not(.btn) { color: #164d9b; text-decoration: underline !important; text-underline-offset: .15em; }
.note-single .entry-content a:not(.btn) { overflow-wrap: anywhere; }
.note-single .entry-content blockquote {
  margin: 1.75em 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid #86b5d2;
  background: #f5fbff;
  color: #334155;
}
.note-single .entry-content blockquote p:last-child { margin-bottom: 0; }
.note-single .entry-content figure { margin: 1.75em 0; }
.note-single .entry-content img {
  max-width: 100%;
  height: auto;
}
.note-single .entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}
.note-single .entry-content table {
  width: 100%;
  max-width: 100%;
  margin-block: 1.5rem;
  border-collapse: collapse;
  overflow-wrap: anywhere;
}
.note-single .entry-content th,
.note-single .entry-content td { padding: .8rem; border: 1px solid #d8dee8; text-align: left; vertical-align: top; }
.note-single .entry-content th { background: #eef3f9; color: #19365e; }

/* Component-specific resets keep the reusable article blocks independent from
   the generic heading/list rules above. */
.note-single .entry-content .ak-article-table {
  margin-block: 1.75rem;
  table-layout: auto;
}
.note-single .entry-content .ak-article-table th,
.note-single .entry-content .ak-article-table td { min-width: 0; }
.note-single .entry-content .ak-article-steps {
  margin: 1.75rem 0;
  padding-left: 0;
}
.note-single .entry-content .ak-article-steps > li {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.note-single .entry-content .ak-faq {
  margin-block: 1.75rem;
}
.note-single .entry-content .ak-faq dt {
  margin-top: 1.25rem;
  line-height: 1.6;
}
.note-single .entry-content .ak-faq dd {
  line-height: var(--ak-content-line-height);
}
.note-single .entry-content .ak-source-note h2,
.note-single .entry-content .ak-source-note h3 {
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  color: #1e355b;
  font-size: 1.7rem;
  line-height: 1.5;
}
.note-single .entry-content .ak-source-note p:last-child,
.note-single .entry-content .ak-source-note ul:last-child { margin-bottom: 0; }
.note-single .entry-content .ak-consult-cta {
  margin-block: 2rem;
}
.note-single .entry-content .ak-consult-cta p:last-child { margin-bottom: 0; }
.note-single .entry-content .ak-consult-cta a {
  display: inline-block;
  margin-top: .35rem;
  padding: .75rem 1.25rem;
  border-radius: 4px;
  background: var(--ak-brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none !important;
}
.note-single .entry-content .ak-consult-cta a:hover,
.note-single .entry-content .ak-consult-cta a:focus-visible {
  background: #12366f;
  color: #fff;
}

@media screen and (max-width: 834px) {
  .container .column-wrap { gap: var(--ak-content-space); }
}

@media screen and (max-width: 781px) {
  .wp-block-column { margin-bottom: var(--ak-content-space); }
  .ak-article-table { display: block; overflow-x: auto; white-space: normal; }
  .note-single .entry-header .entry-title {
    margin-block: 1.2rem;
    font-size: clamp(2.2rem, 7vw, 2.8rem);
  }
  .note-single .entry-content { font-size: 1.6rem; }
  .note-single .entry-content h2 { scroll-margin-top: 80px; }
  .note-single .entry-content h3 { scroll-margin-top: 80px; }
  .note-single .entry-content th,
  .note-single .entry-content td { min-width: 9rem; }
  .note-single .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .note-single .entry-content .ak-article-table { min-width: 36rem; }
  .note-single .entry-content .ak-article-steps > li { padding-left: 3rem; }
}

@media screen and (max-width: 480px) {
  .body,
  .menu-content { font-size: 16px; }
}

/* ========================================================================
   Phase 5: responsive guardrails for the shared /note/ archive
   Keep the archive cards inside the available content column. The original
   fixed card widths overflowed at the mobile/intermediate boundary and when
   the desktop sidebar was visible at 1024px.
   ======================================================================== */
@media screen and (max-width: 1023px) {
  .page-template-page-blog .live-writer {
    width: 100%;
    padding-inline: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-template-page-blog .live-writer .blog_card {
    min-width: 0;
    max-width: none;
  }
}

@media screen and (min-width: 1024px) {
  .page-template-page-blog .main > .l-content.l-content {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .page-template-page-blog .live-writer {
    padding-inline: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-template-page-blog .live-writer .blog_card {
    min-width: 0;
  }
}

/* The contact form's date and time controls need to shrink together on the
   narrowest screens; the desktop min-width is intentionally retained. */
@media screen and (max-width: 768px) {
  .page-template-page-contact .calendar_time > .wpcf7-form-control-wrap,
  .page-template-page-contact .calendar_time > .dropdown-menu_wrapper {
    min-width: 0;
    flex: 1 1 0;
  }

  .page-template-page-contact .calendar_time .wpcf7-date,
  .page-template-page-contact .calendar_time .dropdown-menu_wrapper .wpcf7-form-control {
    width: 100%;
    min-width: 0;
  }

  .page-template-page-contact .calendar_time .dropdown-menu_wrapper::after {
    right: 15px;
  }
}