@charset "UTF-8";

/*!
Theme Name: YOIN. for Project KAIROS
Theme URI: https://kairospjt.com/
Description: Cocoon子テーマを利用した、YOIN.の静けさ・余白・グレージュ・素材感を表現するProject KAIROS向けスタイル。
Author: Project KAIROS
Author URI: https://kairospjt.com/
Template: cocoon-master
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoin-cocoon-child
*/

/*
Original child theme:
Cocoon Child
Copyright (c) Cocoon contributors
https://wp-cocoon.com/

This child theme preserves Cocoon's GPL licensing and attribution.
Only the child-theme visual layer has been customized.
*/

/* ================================================================
   YOIN. DESIGN TOKENS
   Quiet / Warm / Material / Editorial
   ================================================================ */
:root {
  --yoin-warm-white: #f4f0e9;
  --yoin-paper: #ebe5dc;
  --yoin-stone: #d3c8bb;
  --yoin-greige: #b8aa9b;
  --yoin-taupe: #766c62;
  --yoin-bronze: #9a7d5f;
  --yoin-charcoal: #2c2925;
  --yoin-ink: #171614;
  --yoin-line: rgba(44, 41, 37, 0.14);
  --yoin-line-light: rgba(244, 240, 233, 0.16);
  --yoin-shadow: 0 24px 70px rgba(44, 41, 37, 0.08);
  --yoin-shadow-hover: 0 30px 90px rgba(44, 41, 37, 0.14);
  --yoin-radius: 2px;
  --yoin-pill: 999px;
  --yoin-content: 1180px;
  --yoin-transition: 420ms cubic-bezier(.22, 1, .36, 1);

  /* Cocoon variables override */
  --cocoon-text-color: var(--yoin-charcoal);
  --cocoon-pallid-text-color: var(--yoin-taupe);
  --cocoon-x-pallid-text-color: #978c81;
  --cocoon-basic-border-color: var(--yoin-line);
  --cocoon-thin-color: var(--yoin-line);
  --cocoon-x-thin-color: rgba(44, 41, 37, 0.08);
  --cocoon-xx-thin-color: rgba(44, 41, 37, 0.05);
  --cocoon-xxx-thin-color: rgba(44, 41, 37, 0.025);
  --cocoon-current-background-color: var(--yoin-paper);
  --cocoon-select-background-color: var(--yoin-stone);
  --cocoon-basic-border-radius: var(--yoin-radius);
  --cocoon-middle-border-radius: var(--yoin-radius);
  --cocoon-box-border-color: var(--yoin-taupe);
  --cocoon-default-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ================================================================
   BASE
   ================================================================ */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--yoin-charcoal);
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.78), transparent 34rem),
    linear-gradient(90deg, rgba(58,50,43,.018) 1px, transparent 1px),
    linear-gradient(rgba(58,50,43,.012) 1px, transparent 1px),
    var(--yoin-warm-white);
  background-size: auto, 56px 56px, 56px 56px, auto;
  font-family: var(--cocoon-default-font);
  font-feature-settings: "palt";
  letter-spacing: .015em;
  line-height: 1.85;
}

::selection {
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
}

a {
  color: inherit;
  text-decoration-color: rgba(44, 41, 37, .35);
  text-underline-offset: .18em;
  transition:
    color 220ms ease,
    opacity 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

a:hover {
  color: var(--yoin-bronze);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--yoin-bronze);
  outline-offset: 4px;
}

/* ================================================================
   SITE FRAME
   ================================================================ */
.container {
  background: transparent;
}

.content-in {
  max-width: var(--yoin-content);
}

.content {
  margin-top: clamp(2rem, 6vw, 5rem);
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.main,
.sidebar {
  border: 0;
  border-radius: var(--yoin-radius);
  background: rgba(248, 245, 239, .62);
  box-shadow: none;
}

.main {
  padding: clamp(1.4rem, 4vw, 4.5rem);
}

.sidebar {
  padding: clamp(1.2rem, 2.6vw, 2.3rem);
}

#main,
#sidebar {
  border-color: var(--yoin-line);
}

/* ================================================================
   HEADER / BRAND
   ================================================================ */
.header-container {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--yoin-line);
  background: rgba(244, 240, 233, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-container-in.hlt-top-menu {
  min-height: 92px;
}

.header {
  background: transparent;
}

.logo {
  text-align: left;
}

.logo-text {
  padding: 0;
}

.logo-text a,
.site-name-text {
  color: var(--yoin-charcoal);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
  text-decoration: none;
}

.site-description {
  margin-top: .7rem;
  color: var(--yoin-taupe);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.tagline {
  color: var(--yoin-taupe);
}

.header-container .logo-image {
  max-height: 64px;
}

/* ================================================================
   GLOBAL NAVIGATION
   ================================================================ */
.navi {
  border-bottom: 1px solid var(--yoin-line);
  background: transparent;
}

.navi-in > ul {
  justify-content: flex-end;
}

.navi-in > ul .menu-item {
  position: relative;
}

.navi-in > ul .menu-item > a {
  min-height: 58px;
  padding: 0 1.15rem;
  color: var(--yoin-charcoal);
  background: transparent;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.navi-in > ul .menu-item > a:hover,
.navi-in > ul .menu-item.current-menu-item > a,
.navi-in > ul .menu-item.current_page_item > a {
  color: var(--yoin-bronze);
  background: transparent;
}

.navi-in > ul .menu-item > a::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  bottom: 10px;
  left: 1.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--yoin-transition);
}

.navi-in > ul .menu-item > a:hover::after,
.navi-in > ul .menu-item.current-menu-item > a::after,
.navi-in > ul .menu-item.current_page_item > a::after {
  transform: scaleX(1);
}

.navi-in ul .sub-menu {
  border: 1px solid var(--yoin-line);
  background: rgba(244, 240, 233, .98);
  box-shadow: var(--yoin-shadow);
}

.navi-in ul .sub-menu a {
  color: var(--yoin-charcoal);
  background: transparent;
  font-size: .75rem;
  letter-spacing: .08em;
}

.navi-in ul .sub-menu a:hover {
  color: var(--yoin-bronze);
  background: var(--yoin-paper);
}

/* ================================================================
   FRONT APPEAL / HERO
   CocoonのアピールエリアをYOIN.ヒーローとして利用
   ================================================================ */
.appeal {
  position: relative;
  min-height: clamp(540px, 78vh, 820px);
  overflow: hidden;
  color: var(--yoin-charcoal);
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.90) 0 8%, rgba(184,170,155,.35) 32%, rgba(154,125,95,.09) 58%, transparent 72%),
    linear-gradient(145deg, var(--yoin-warm-white), var(--yoin-paper));
}

.appeal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 62%, rgba(255,255,255,.36) 62.1% 62.2%, transparent 62.3%),
    linear-gradient(180deg, transparent 75%, rgba(84,75,65,.035));
}

.appeal-in {
  position: relative;
  z-index: 1;
  max-width: var(--yoin-content);
  min-height: inherit;
  padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.appeal-content {
  max-width: 760px;
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  box-shadow: none;
}

.appeal-title {
  max-width: 9ch;
  margin: 0 0 2rem;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(3.6rem, 10vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .83;
  text-wrap: balance;
}

.appeal-message {
  max-width: 44rem;
  color: var(--yoin-charcoal);
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  letter-spacing: -.015em;
  line-height: 1.7;
  text-wrap: pretty;
}

.appeal-button {
  margin-top: 2rem;
}

.appeal-button-content {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: .9rem 1.45rem;
  border: 1px solid var(--yoin-charcoal);
  border-radius: var(--yoin-pill);
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none;
}

.appeal-button-content:hover {
  color: var(--yoin-charcoal);
  background: transparent;
  transform: translateY(-2px);
  box-shadow: var(--yoin-shadow);
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
.article h1,
.article h2,
.article h3,
.article h4,
.entry-title,
.page-title,
.archive-title {
  color: var(--yoin-charcoal);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  letter-spacing: -.035em;
}

.article h1,
.entry-title {
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.article h2 {
  margin-top: 3.2em;
  padding: 0 0 .65em;
  border: 0;
  border-bottom: 1px solid var(--yoin-line);
  background: transparent;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
}

.article h3 {
  margin-top: 2.5em;
  padding: 0 0 0 1rem;
  border: 0;
  border-left: 1px solid var(--yoin-bronze);
  background: transparent;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.article h4 {
  font-size: 1.3rem;
}

.article p,
.article li {
  line-height: 1.95;
}

.article strong {
  color: var(--yoin-ink);
  font-weight: 650;
}

.article blockquote {
  margin: 2.5rem 0;
  padding: 2rem clamp(1.5rem, 4vw, 3rem);
  border: 0;
  border-left: 1px solid var(--yoin-bronze);
  color: var(--yoin-charcoal);
  background: rgba(235, 229, 220, .72);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.25em;
  line-height: 1.75;
}

.article hr {
  height: 1px;
  margin: 4rem 0;
  border: 0;
  background: var(--yoin-line);
}

/* ================================================================
   ENTRY CARDS / ARCHIVES
   ================================================================ */
.entry-card-wrap,
.related-entry-card-wrap,
.widget-entry-card-wrap,
.carousel-entry-card-wrap {
  border: 0;
  border-top: 1px solid var(--yoin-line);
  background: transparent;
  transition:
    transform var(--yoin-transition),
    opacity 220ms ease,
    box-shadow var(--yoin-transition);
}

.entry-card-wrap:last-child {
  border-bottom: 1px solid var(--yoin-line);
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  color: inherit;
  background: rgba(235, 229, 220, .48);
  transform: translateY(-3px);
  box-shadow: var(--yoin-shadow);
}

.entry-card {
  padding: clamp(1.6rem, 3vw, 2.8rem);
}

.entry-card-thumb,
.related-entry-card-thumb {
  overflow: hidden;
  border-radius: var(--yoin-radius);
  background: var(--yoin-paper);
}

.entry-card-thumb img,
.related-entry-card-thumb img {
  filter: saturate(.68) contrast(.95);
  transition: transform 900ms cubic-bezier(.22,1,.36,1), filter 500ms ease;
}

.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-card-thumb img {
  filter: saturate(.9) contrast(1);
  transform: scale(1.035);
}

.entry-card-title,
.related-entry-card-title {
  color: var(--yoin-charcoal);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.35;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--yoin-taupe);
  line-height: 1.75;
}

.entry-card-meta,
.related-entry-card-meta,
.post-date,
.post-update,
.post-author {
  color: var(--yoin-taupe);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ================================================================
   ARTICLE META / CATEGORIES / TAGS
   ================================================================ */
.entry-categories,
.entry-tags,
.cat-link,
.tag-link,
.post-date,
.post-update {
  color: var(--yoin-taupe);
}

.cat-link,
.tag-link,
.entry-category,
.entry-tag {
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-pill);
  padding: .25rem .7rem;
  color: var(--yoin-taupe);
  background: transparent;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cat-link:hover,
.tag-link:hover {
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
}

/* ================================================================
   IMAGES / MEDIA
   ================================================================ */
.article img,
.eye-catch img,
.wp-block-image img {
  border-radius: var(--yoin-radius);
}

.eye-catch {
  margin-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: var(--yoin-radius);
  box-shadow: var(--yoin-shadow);
}

.eye-catch img {
  filter: saturate(.72) contrast(.96);
}

.article .wp-caption,
.article figure {
  color: var(--yoin-taupe);
}

.wp-caption-text,
.gallery-caption {
  margin-top: .7rem;
  color: var(--yoin-taupe);
  font-size: .72rem;
  letter-spacing: .05em;
}

/* ================================================================
   BOXES / TABLES / CODE
   ================================================================ */
.article table {
  border-collapse: collapse;
  border: 1px solid var(--yoin-line);
  background: rgba(248, 245, 239, .58);
}

.article th,
.article td {
  border-color: var(--yoin-line);
  padding: 1rem;
}

.article th {
  color: var(--yoin-charcoal);
  background: var(--yoin-paper);
  font-weight: 600;
}

.article pre,
.article code,
pre,
code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.article pre {
  padding: 1.4rem;
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-radius);
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
  box-shadow: none;
}

.article code:not(pre code) {
  padding: .12em .35em;
  border-radius: var(--yoin-radius);
  color: var(--yoin-charcoal);
  background: var(--yoin-paper);
}

.blank-box,
.primary-box,
.secondary-box,
.info-box,
.question-box,
.alert-box,
.success-box,
.memo-box,
.comment-box,
.common-icon-box {
  border-width: 1px;
  border-color: var(--yoin-line);
  border-radius: var(--yoin-radius);
  background: rgba(235, 229, 220, .52);
  box-shadow: none;
}

/* ================================================================
   FORMS / BUTTONS / PAGINATION
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-radius);
  color: var(--yoin-charcoal);
  background: rgba(248, 245, 239, .82);
  box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--yoin-bronze);
  background: #fff;
}

button,
input[type="submit"],
.btn,
.button,
.pagination-next-link,
.comment-btn {
  border: 1px solid var(--yoin-charcoal);
  border-radius: var(--yoin-pill);
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover,
.pagination-next-link:hover,
.comment-btn:hover {
  color: var(--yoin-charcoal);
  background: transparent;
  transform: translateY(-2px);
}

.pagination .page-numbers,
.page-numbers {
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-pill);
  color: var(--yoin-charcoal);
  background: transparent;
}

.pagination .current,
.page-numbers.current {
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
}

/* ================================================================
   SIDEBAR / WIDGETS
   ================================================================ */
.widget {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.widget-title {
  margin-bottom: 1.4rem;
  padding: 0 0 .75rem;
  border: 0;
  border-bottom: 1px solid var(--yoin-line);
  color: var(--yoin-charcoal);
  background: transparent;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.02em;
}

.widget-entry-card {
  padding: .9rem 0;
}

.widget-entry-card-title {
  color: var(--yoin-charcoal);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 400;
}

.widget_categories ul,
.widget_archive ul,
.widget_pages ul,
.widget_nav_menu ul {
  border-top: 1px solid var(--yoin-line);
}

.widget_categories li,
.widget_archive li,
.widget_pages li,
.widget_nav_menu li {
  border-bottom: 1px solid var(--yoin-line);
}

.widget_categories a,
.widget_archive a,
.widget_pages a,
.widget_nav_menu a {
  padding: .75rem 0;
}

/* ================================================================
   TOC
   ================================================================ */
.toc {
  margin: clamp(2.5rem, 6vw, 5rem) 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-radius);
  background: rgba(235, 229, 220, .48);
}

.toc-title {
  margin-bottom: 1.2rem;
  color: var(--yoin-charcoal);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.45rem;
  font-weight: 400;
}

.toc-list li {
  margin: .45rem 0;
}

.toc a {
  color: var(--yoin-taupe);
  text-decoration: none;
}

.toc a:hover {
  color: var(--yoin-bronze);
}

/* ================================================================
   SHARE / FOLLOW
   ================================================================ */
.sns-share,
.sns-follow {
  margin-top: 3.5rem;
}

.sns-share-message,
.sns-follow-message {
  color: var(--yoin-taupe);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sns-buttons a {
  border: 1px solid var(--yoin-line);
  border-radius: var(--yoin-pill);
  color: var(--yoin-charcoal) !important;
  background: transparent !important;
  box-shadow: none;
}

.sns-buttons a:hover {
  color: var(--yoin-warm-white) !important;
  background: var(--yoin-charcoal) !important;
  transform: translateY(-2px);
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--yoin-taupe);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: 2rem;
  color: var(--yoin-warm-white);
  background:
    radial-gradient(circle at 85% 15%, rgba(154,125,95,.13), transparent 24rem),
    linear-gradient(145deg, #24211e, #34302b);
}

.footer-in {
  max-width: var(--yoin-content);
}

.footer .widget-title,
.footer a,
.footer .site-name-text {
  color: var(--yoin-warm-white);
}

.footer .widget-title {
  border-bottom-color: var(--yoin-line-light);
}

.footer-bottom {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--yoin-line-light);
}

.copyright {
  color: var(--yoin-stone);
  font-size: .65rem;
  letter-spacing: .09em;
}

/* ================================================================
   MOBILE MENU / MOBILE HEADER
   ================================================================ */
.mobile-header-menu-buttons,
.mobile-menu-buttons {
  color: var(--yoin-charcoal);
  background: rgba(244, 240, 233, .96);
  border-color: var(--yoin-line);
}

.mobile-menu-buttons .menu-button > a,
.mobile-header-menu-buttons .menu-button > a {
  color: var(--yoin-charcoal);
}

.navi-menu-content,
.sidebar-menu-content {
  background: var(--yoin-warm-white);
}

.menu-drawer a {
  color: var(--yoin-charcoal);
  background: transparent;
  border-bottom: 1px solid var(--yoin-line);
}

.menu-drawer a:hover {
  color: var(--yoin-bronze);
  background: var(--yoin-paper);
}

/* ================================================================
   OPTIONAL YOIN UTILITY CLASSES
   投稿・固定ページ内で利用可能
   ================================================================ */
.yoin-eyebrow {
  margin: 0 0 1rem;
  color: var(--yoin-taupe);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.yoin-display {
  max-width: 14ch;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .92;
}

.yoin-lead {
  max-width: 50rem;
  color: var(--yoin-charcoal);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.8;
}

.yoin-dark-section {
  margin-inline: calc(50% - 50vw);
  padding: clamp(5rem, 10vw, 10rem) max(calc((100vw - var(--yoin-content)) / 2), 1.5rem);
  color: var(--yoin-warm-white);
  background:
    radial-gradient(circle at 85% 15%, rgba(154,125,95,.14), transparent 26rem),
    var(--yoin-charcoal);
}

.yoin-dark-section h2,
.yoin-dark-section h3,
.yoin-dark-section p,
.yoin-dark-section a {
  color: inherit;
}

.yoin-hairline {
  border-top: 1px solid var(--yoin-line);
}

.yoin-note {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--yoin-bronze);
  background: var(--yoin-paper);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media screen and (max-width: 1023px) {
  .content {
    margin-top: 2rem;
  }

  .main,
  .sidebar {
    padding: clamp(1.25rem, 4vw, 2.5rem);
  }

  .header-container-in.hlt-top-menu {
    min-height: 76px;
  }

  .appeal {
    min-height: 620px;
  }

  .appeal-title {
    font-size: clamp(3.6rem, 13vw, 7.5rem);
  }
}

@media screen and (max-width: 834px) {
  body {
    background-size: auto, 42px 42px, 42px 42px, auto;
  }

  .content {
    margin-top: 1.25rem;
  }

  .main,
  .sidebar {
    border-radius: 0;
    background: rgba(248,245,239,.48);
  }

  .entry-card {
    padding: 1.4rem .8rem;
  }

  .appeal {
    min-height: calc(100svh - 50px);
  }

  .appeal-in {
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  .main {
    padding: 1.25rem 1rem;
  }

  .sidebar {
    padding: 1.5rem 1rem;
  }

  .article h1,
  .entry-title {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .article h2 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .appeal-title {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
  }

  .appeal-message {
    font-size: 1rem;
  }

  .appeal-button-content {
    width: 100%;
    justify-content: center;
  }

  .entry-card-thumb {
    width: 100%;
    margin: 0 0 1rem;
    float: none;
  }

  .entry-card-content {
    margin-left: 0;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
/* ================================================================
   KAIROS HQ FRONT PAGE V2
   ================================================================ */

body.yoin-kairos-front .content {
  display: none;
}

body.yoin-kairos-front .container {
  width: 100%;
  max-width: none;
}

.yoin-kairos-home {
  width: 100%;
  overflow: hidden;
  color: var(--yoin-charcoal);
}

.kairos-v2-frame {
  width: min(calc(100% - 3rem), 1280px);
  margin-inline: auto;
}

.kairos-v2-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 150px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid var(--yoin-line);
}

.kairos-v2-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(80vw, 980px);
  aspect-ratio: 1;
  top: -44%;
  right: -22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 38%,
      rgba(255,255,255,.92) 0 9%,
      rgba(199,188,174,.46) 32%,
      rgba(143,129,114,.14) 58%,
      transparent 72%);
}

.kairos-v2-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 62%, rgba(255,255,255,.32) 62.1% 62.2%, transparent 62.3%),
    linear-gradient(180deg, transparent 75%, rgba(84,75,65,.035));
}

.kairos-v2-hero .kairos-v2-frame {
  min-height: inherit;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kairos-v2-eyebrow,
.kairos-v2-index {
  margin: 0;
  color: var(--yoin-taupe);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.kairos-v2-display {
  margin: clamp(2rem, 5vw, 4rem) 0;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(5rem, 13vw, 12rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .76;
}

.kairos-v2-display span {
  display: block;
}

.kairos-v2-hero-copy {
  max-width: 49rem;
  margin-top: auto;
}

.kairos-v2-statement {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  letter-spacing: -.025em;
  line-height: 1.42;
  text-wrap: pretty;
}

.kairos-v2-ja {
  color: var(--yoin-taupe);
  line-height: 1.9;
}

.kairos-v2-button {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  padding: .9rem 1.35rem;
  border: 1px solid var(--yoin-charcoal);
  border-radius: 999px;
  color: var(--yoin-warm-white);
  background: var(--yoin-charcoal);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}

.kairos-v2-button::after {
  content: "↓";
}

.kairos-v2-button:hover {
  color: var(--yoin-charcoal);
  background: transparent;
  transform: translateY(-2px);
}

.kairos-v2-meta {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--yoin-line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--yoin-taupe);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kairos-v2-section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 10rem);
  border-bottom: 1px solid var(--yoin-line);
}

.kairos-v2-section--paper {
  background: rgba(235,229,220,.64);
}

.kairos-v2-section--dark {
  color: var(--yoin-warm-white);
  background:
    radial-gradient(circle at 88% 18%, rgba(154,125,95,.14), transparent 26rem),
    linear-gradient(145deg, #26231f, #33302b);
  border-bottom-color: var(--yoin-line-light);
}

.kairos-v2-section--dark .kairos-v2-index {
  color: var(--yoin-stone);
}

.kairos-v2-manifesto {
  max-width: 17ch;
  margin: clamp(2rem, 6vw, 5rem) 0 0;
  color: inherit;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(3.2rem, 8vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .93;
}

.kairos-v2-manifesto em {
  color: var(--yoin-stone);
  font-weight: 400;
}

.kairos-v2-manifesto-ja {
  max-width: 50rem;
  margin-top: 2rem;
  color: var(--yoin-stone);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
}

.kairos-v2-section-title {
  max-width: 15ch;
  margin: 1.5rem 0 clamp(3rem, 6vw, 5.5rem);
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.7rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .96;
  text-wrap: balance;
}

.kairos-v2-foundation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--yoin-line);
}

.kairos-v2-foundation-card {
  padding: clamp(2rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--yoin-line);
}

.kairos-v2-foundation-card:first-child {
  border-right: 1px solid var(--yoin-line);
}

.kairos-v2-foundation-card h3 {
  margin: 0 0 2rem;
  color: var(--yoin-taupe);
  font-family: var(--cocoon-default-font);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kairos-v2-foundation-en {
  margin: 0 0 2rem;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 4.5vw, 4.6rem);
  letter-spacing: -.045em;
  line-height: 1.03;
}

.kairos-v2-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kairos-v2-principles article {
  padding: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--yoin-line-light);
}

.kairos-v2-principles article + article {
  border-left: 1px solid var(--yoin-line-light);
}

.kairos-v2-principles span {
  color: var(--yoin-stone);
  font-size: .65rem;
  letter-spacing: .14em;
}

.kairos-v2-principles h3 {
  margin: 1.7rem 0 1rem;
  color: inherit;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 3.5vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}

.kairos-v2-principles p {
  color: var(--yoin-stone);
}

.kairos-v2-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.kairos-v2-project-card {
  min-height: 28rem;
  padding: clamp(1.7rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--yoin-line);
  background: rgba(255,255,255,.22);
  transition: transform var(--yoin-transition), box-shadow var(--yoin-transition);
}

.kairos-v2-project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--yoin-shadow-hover);
}

.kairos-v2-project-card > span,
.kairos-v2-journal-card time {
  color: var(--yoin-taupe);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kairos-v2-project-card h3,
.kairos-v2-journal-card h3 {
  margin: 0 0 1rem;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .96;
}

.kairos-v2-project-card p,
.kairos-v2-journal-card p {
  color: var(--yoin-taupe);
}

.kairos-v2-journal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--yoin-line);
}

.kairos-v2-journal-card {
  padding: clamp(1.8rem, 3vw, 3rem);
  border-bottom: 1px solid var(--yoin-line);
}

.kairos-v2-journal-card + .kairos-v2-journal-card {
  border-left: 1px solid var(--yoin-line);
}

.kairos-v2-journal-card h3 {
  margin-top: 1.5rem;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.kairos-v2-journal-card h3 a {
  color: inherit;
  text-decoration: none;
}

.kairos-v2-journal-card h3 a:hover {
  color: var(--yoin-bronze);
}

.kairos-v2-closing {
  min-height: 72svh;
  display: flex;
  align-items: center;
  text-align: center;
}

.kairos-v2-closing h2 {
  max-width: 13ch;
  margin: 2rem auto;
  font-family:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(3.3rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .9;
}

.kairos-v2-closing > .kairos-v2-frame > p:not(.kairos-v2-index) {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--yoin-taupe);
}

.kairos-v2-links {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.kairos-v2-links a {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kairos-js .kairos-v2-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(.22,1,.36,1),
    transform 700ms cubic-bezier(.22,1,.36,1);
}

.kairos-js .kairos-v2-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media screen and (max-width: 834px) {
  .kairos-v2-frame {
    width: min(calc(100% - 2rem), 1280px);
  }

  .kairos-v2-hero {
    min-height: calc(100svh - 52px);
  }

  .kairos-v2-display {
    font-size: clamp(4.2rem, 20vw, 7rem);
    line-height: .8;
  }

  .kairos-v2-foundation,
  .kairos-v2-principles,
  .kairos-v2-projects,
  .kairos-v2-journal {
    grid-template-columns: 1fr;
  }

  .kairos-v2-foundation-card:first-child,
  .kairos-v2-principles article + article,
  .kairos-v2-journal-card + .kairos-v2-journal-card {
    border-left: 0;
    border-right: 0;
  }

  .kairos-v2-project-card {
    min-height: 22rem;
  }
}

@media screen and (max-width: 480px) {
  .kairos-v2-display {
    font-size: clamp(4rem, 21vw, 5.8rem);
  }

  .kairos-v2-button {
    width: 100%;
    justify-content: center;
  }

  .kairos-v2-meta {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kairos-js .kairos-v2-reveal {
    opacity: 1;
    transform: none;
  }
}