/* ==================================================================
   トップページ
   ------------------------------------------------------------------
   ★ 出どころと書き方（2026-09-07）
     移行元のトップページはテーマのコンテンツビルダーが組み立てていて、
     見た目はテーマ本体の CSS で決まっていた。その**見え方**は引き継ぐが、
     **他人のテーマの CSS をそのまま同梱しない**方針にしたため、
     実際に当たるルールだけを実測で抜き出し、名前を miki-* に付け替えて
     自分のファイルとして書き直した（手順は miki-body.css の頭に同じ）。

     クラス名もすべて miki-* に付け替えた。**対応表は CLAUDE.md にある。**
     本文HTML（固定ページ「トップ」）と inc/front.php も同時に変えてある。
     **片方だけ変えると当たらなくなる。**
   ================================================================== */

:root { --miki-accent-color: #1013ba; --miki-font-type1: Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif; --miki-font-type2: "Times New Roman", Times, "Yu Mincho", "游明朝", "游明朝体", "Hiragino Mincho Pro", serif; --miki-base-container-size: 1150px; --miki-half-read: calc((1em - 1lh) / 2); --miki-line-clamp: 1; --miki-cb-catch-font-size-pc: 30px; --miki-cb-catch-font-size-sp: 20px; --miki-cb-catch-font-type: var(--miki-font-type1); --miki-cb-title-font-size-pc: 60px; --miki-cb-title-font-size-sp: 32px; --miki-cb-title-font-type: var(--miki-font-type2); --miki-banner-title-font-size-pc: 38px; --miki-banner-title-font-size-sp: 20px; --miki-banner-title-font-type: var(--miki-font-type2); --miki-thumbnail-hover-opacity: brightness(1); --miki-thumbnail-hover-scale: scale(1.1); --miki-thumbnail-transition: transform; --after-parent: 0.3s; --stagger-base: 0s; --stagger-gap: 0.1s; }
.miki-cb-header-title, .miki-cb-header-catch, .miki-cb-header-sub_title, .miki-cb-header-subtitle { font-weight: 600; }
body.home .l-content__body.l-container { padding-inline: 0px; max-width: none; }
body.home .l-content__body.l-container { padding-top: 120px; }
body.home .p-cb { display: grid; row-gap: 120px; line-height: 1; }
@media (max-width: 959px) {
  body.home .l-content__body.l-container { padding-top: 40px; }
  body.home .p-cb { row-gap: 40px; }
}
body.home .l-content__body.l-container, body.home .l-main, body.home .p-page, body.home .miki-body, body.home .p-cb { max-width: none; width: 100%; margin-inline: 0px; padding-inline: 0px; }
.l-container:has(.p-cb) { padding-block: 0px 150px; }
@media (max-width: 991px) {
  .l-container:has(.p-cb) { padding-block: 0px 40px; }
}
.miki-inner { inline-size: var(--miki-layout-inner-size, min(calc(100% - 40px), var(--miki-base-container-size))); margin-inline: auto; }
@media (max-width: 991px) {
  .miki-inner { inline-size: var(--miki-layout-inner-size, min(calc(100% - 40px), 100%)); }
}
.miki-hover-color { transition: opacity 0.3s; }
@media (any-hover: hover) {
  .miki-hover-color:hover, a:hover .miki-hover-color { opacity: 0.5; }
}
.miki-date { display: flex; flex-wrap: wrap; gap: 0.8em; font-family: Arial; font-size: 14px; color: rgb(153, 153, 153); line-height: 1; }
.miki-date-item { display: grid; align-items: center; grid-template-columns: auto auto; gap: 0.3em; }
.miki-date-item::before { content: ""; width: 1em; height: 1em; background: currentcolor; }
.miki-date--publish::before { mask: var(--miki-icon--publish) no-repeat center / 1.2em; }
.miki-date--updated::before { mask: var(--miki-icon--updated) no-repeat center / 1.2em; }
@media (max-width: 767px) {
  .miki-date { font-size: 14px; }
}
.miki-button01 { display: grid; place-items: center; width: fit-content; min-width: 300px; height: 70px; font-size: 16px; overflow: hidden; color: var(--miki-accent-color); border: 1px solid var(--miki-accent-color); border-radius: calc(infinity * 1px); padding: 0px 1.5em; line-height: 1.4; transition: opacity 1.2s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, color 0.3s !important; }
@media (any-hover: hover) {
  .miki-button01:hover { background-color: var(--miki-accent-color); color: rgb(255, 255, 255); }
}
@media (max-width: 767px) {
  .miki-button01 { min-width: 240px; height: 60px; font-size: 14px; }
}
.miki-thumb { overflow: hidden; backface-visibility: hidden; }
.miki-thumb-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; transform: scale(1); transition-property: var(--miki-thumbnail-transition); transition-duration: 0.5s; transition-timing-function: ease; will-change: transform; }
@media (any-hover: hover) {
  :where(a, .miki-thumb):hover .miki-thumb-image { transform: var(--miki-thumbnail-hover-scale); filter: var(--miki-thumbnail-hover-opacity); }
}
.miki-line-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--miki-line-clamp); height: calc(1lh * var(--miki-line-clamp)); max-height: calc(1lh * var(--miki-line-clamp)); overflow: hidden; visibility: visible; word-break: break-all; margin-block: var(--miki-half-read); }
.miki-inview-fadein { transform: translate3d(0px, 50px, 0px); opacity: 0; transition: opacity 2s 0.2s, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; --after-parent: 0.3s; }
body.is-ready .miki-inview-fadein.is-active { transform: translate3d(0px, 0px, 0px); opacity: 1; }
.miki-inview-fadein .miki-cb-header-title, .miki-inview-fadein .miki-cb-header-sub_title, .miki-inview-fadein .miki-cb-header-catch, .miki-inview-fadein .miki-cb-header-subtitle, .miki-inview-fadein .miki-cb-main_content, .miki-inview-fadein .miki-button01 { opacity: 0; transform: translate3d(0px, 50px, 0px); transition: opacity 1.2s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.miki-inview-fadein.is-active .miki-cb-header-title { opacity: 1; transform: none; transition-delay: var(--stagger-base, 0ms) !important; }
.miki-inview-fadein.is-active .miki-cb-header-catch { opacity: 1; transform: none; transition-delay: calc(var(--stagger-base, 0ms) + 2 * var(--stagger-gap, 300ms)) !important; }
.miki-inview-fadein.is-active .miki-button01 { opacity: 1; transform: none; transition-delay: calc(var(--stagger-base, 0ms) + 5 * var(--stagger-gap, 300ms)),
    calc(var(--stagger-base, 0ms) + 5 * var(--stagger-gap, 300ms)),
    0s,
    0s !important; }
.miki-post-card { display: grid; background: rgb(255, 255, 255); position: relative; }
.miki-post-card__link { display: grid; align-content: center; row-gap: 18px; padding: 40px; border-width: medium 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(221, 221, 221) rgb(221, 221, 221); border-image: none; }
.miki-post-card .miki-category { position: absolute; top: 0px; left: 0px; z-index: 2; pointer-events: auto; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 1.8; background-color: rgb(255, 255, 255); padding-inline: 20px; min-width: 120px; }
.miki-category :where(a) { transition: opacity 0.3s; }
@media (any-hover: hover) {
  .miki-category :where(a):hover { opacity: 0.6; }
}
@media (max-width: 767px) {
  .miki-post-card__link { row-gap: 20px; max-width: 100%; padding: 30px; }
  .miki-category { font-size: 12px; min-width: 90px; }
  .miki-post-card { box-sizing: border-box; flex: 0 0 260px; scroll-snap-align: start; }
  .miki-post-card .miki-category { height: 40px; font-size: 12px; }
}
.p-cb { display: grid; align-content: start; row-gap: 120px; margin-top: 120px; }
.miki-cb-header { display: grid; align-content: start; row-gap: 70px; text-align: center; margin-bottom: 70px; }
.miki-cb-header-title_contents { display: grid; gap: 20px; }
.miki-cb-header-main_contents { display: grid; gap: 70px; }
.miki-cb-header-title { font-size: var(--miki-cb-title-font-size-pc, 32px); font-family: var(--miki-cb-title-font-type); line-height: 2.4; margin-block: var(--miki-half-read); color: rgb(0, 0, 0); }
.miki-cb-header-catch { font-size: var(--miki-cb-catch-font-size-pc, 32px); font-family: var(--miki-cb-catch-font-type); line-height: 1.7; margin-block: var(--miki-half-read); color: rgb(0, 0, 0); font-weight: 600; }
@media (max-width: 767px) {
  .miki-cb-header-catch { font-size: var(--miki-cb-catch-font-size-sp, 20px); line-height: 1.6; }
  .miki-cb-header-title_contents { gap: 15px; }
  .miki-cb-header-main_contents { gap: 40px; }
}
@media (max-width: 991px) {
  .p-cb { margin-top: 40px; row-gap: 40px; }
  .miki-cb-header { margin-bottom: 40px; }
}
@media (max-width: 767px) {
  .p-cb { margin-top: 40px; row-gap: 40px; }
  .miki-cb-header { row-gap: 40px; margin-bottom: 40px; }
  .miki-cb-header-title { font-size: var(--miki-cb-title-font-size-sp); }
}
.cb-post-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.miki-cb-post-item-thumbnail { flex: 0 0 200px; aspect-ratio: 3 / 2; }
.miki-cb-post-item-title { font-size: 18px; --miki-line-clamp: 2; font-weight: 600; line-height: 1.6; height: auto; max-height: calc(1lh* var(--miki-line-clamp)); }
@media (max-width: 991px) {
  .miki-cb-post-item-thumbnail { aspect-ratio: unset; height: 210px; }
  .cb-post-list { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .miki-cb-post-item-title { font-size: 16px; line-height: 1.7; }
  .cb-post-list { gap: 20px; grid-template-columns: 1fr; }
  /* スマホ幅は3枚だけ見せる（HTML は常に6枚。2026-10-09・nginx のページキャッシュ対策で wp_is_mobile() をやめた） */
  .cb-post-list > .miki-post-card:nth-of-type(n+4) { display: none; }
}
:is(.miki-inview-fadein.is-active, .miki-cb-large_banner.is-active) .catch_content .catch, :is(.miki-inview-fadein.is-active, .miki-cb-large_banner.is-active) .catch_content .desc, :is(.miki-inview-fadein.is-active, .miki-cb-large_banner.is-active) .catch_content .button { animation-play-state: running; }
.miki-cb-large_banner { width: 100%; height: auto; aspect-ratio: 1450 / 600; position: relative; overflow: hidden; scroll-margin-top: -40px; isolation: isolate; }
.miki-cb-large_banner .content { width: 100%; height: 100%; position: relative; overflow: hidden; display: grid; place-items: center; }
.miki-cb-large_banner picture { display: block; position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; height: 100%; }
.miki-cb-large_banner img { object-fit: cover; position: absolute; top: 0px; left: 0px; width: 100% !important; height: 100% !important; }
.miki-cb-large_banner .catch_content { width: 100%; position: relative; z-index: 3; gap: 40px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-inline: 20px; max-width: 1150px; }
.miki-cb-large_banner .catch { line-height: 1.4; font-size: var(--miki-banner-title-font-size-pc); margin-bottom: -10px; color: rgb(255, 255, 255); font-family: var(--miki-banner-title-font-type); font-weight: 600; }
.miki-cb-large_banner .desc { line-height: 2.4; font-size: 16px; color: rgb(255, 255, 255); margin: -10px 0px; }
.miki-cb-large_banner .button { border-color: rgb(255, 255, 255) !important; color: rgb(255, 255, 255) !important; }
.miki-cb-large_banner .content { position: absolute; inset: 0px; display: grid; place-items: center; overflow: hidden; }
@media (max-width: 767px) {
  .miki-cb-large_banner { aspect-ratio: unset !important; height: auto !important; }
  .miki-cb-large_banner .catch_content { padding-inline: 0px; max-width: unset; width: 100% !important; padding-block: 60px !important; gap: 30px !important; }
  .miki-cb-large_banner .catch { font-size: var(--miki-banner-title-font-size-sp); line-height: 1.6; }
  .miki-cb-large_banner .desc { line-height: 2.2; font-size: 14px; }
  .miki-cb-large_banner .content { position: relative; inset: unset; }
}
@media (hover: hover) {
  .miki-cb-large_banner .button:hover { border-color: var(--miki-accent-color) !important; background-color: var(--miki-accent-color) !important; color: rgb(255, 255, 255) !important; }
}
.miki-cb-large_banner .overlay { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; }
.miki-cb-large_banner .catch_content .catch, .miki-cb-large_banner .catch_content .desc, .miki-cb-large_banner .catch_content .button { opacity: 0; transform: translateY(20px); animation: 1.2s ease 0s 1 normal forwards paused fadeSlideIn; }
.miki-cb-large_banner .catch_content .catch { animation-delay: calc(var(--after-parent, 0s) + 0s); }
.miki-cb-large_banner .catch_content .desc { animation-delay: calc(var(--after-parent, 0s) + 0.3s); }
.miki-cb-large_banner .catch_content .button { animation-delay: calc(var(--after-parent, 0s) + 0.6s); }
.miki-cb-large_banner.miki-inview-fadein { transform: none !important; }
.miki-cb-large_banner .content { transform: none !important; }
#TOP動画 center { display: block; max-width: 38em; margin-inline: auto; line-height: 1.8; text-align: left !important; }
@media (max-width: 768px) {
  #TOP動画 center { max-width: calc(100% - 24px); padding-inline: 8px; }
}
#weare .miki-cb-large_banner-inner picture img, #weare .miki-cb-large_banner-inner img { transition: filter 0.4s; filter: brightness(0.72) contrast(1.12) saturate(0.55) sepia(0.15) hue-rotate(-8deg) !important; }
#weare .overlay, #weare .miki-cb-large_banner-inner > .overlay, #weare .miki-cb-large_banner .overlay { pointer-events: none; background-color: transparent !important; background-image: radial-gradient(60% 80% at 25% 65%, rgba(5, 6, 15, 0.55) 0%, rgba(5, 6, 15, 0.2) 60%, transparent 100%), linear-gradient(rgba(5, 6, 15, 0.35) 0%, rgba(5, 6, 15, 0.25) 40%, rgba(5, 6, 15, 0.15) 60%, rgba(10, 12, 74, 0.45) 85%, rgba(16, 19, 186, 0.65) 100%) !important; }
#weare .catch { color: rgb(240, 237, 228) !important; text-shadow: rgba(5, 6, 15, 0.6) 0px 4px 40px; }
#weare .desc { color: rgb(213, 214, 229) !important; text-shadow: rgba(5, 6, 15, 0.6) 0px 2px 20px; }
#weare .button, #weare .miki-button01 { border-color: rgb(201, 168, 106) !important; color: rgb(201, 168, 106) !important; }
@media (any-hover: hover) {
  #weare .button:hover, #weare .miki-button01:hover { background-color: rgb(201, 168, 106) !important; border-color: rgb(201, 168, 106) !important; color: rgb(5, 6, 15) !important; }
}
@media (max-width: 720px) {
  #weare .overlay, #weare .miki-cb-large_banner-inner > .overlay, #weare .miki-cb-large_banner .overlay { background-image: radial-gradient(at 30% 70%, rgba(5, 6, 15, 0.55) 0%, rgba(5, 6, 15, 0.2) 55%, transparent 100%), linear-gradient(rgba(5, 6, 15, 0.45) 0%, rgba(5, 6, 15, 0.2) 40%, rgba(10, 12, 74, 0.5) 82%, rgba(16, 19, 186, 0.75) 100%) !important; }
  #weare .miki-cb-large_banner-inner picture img, #weare .miki-cb-large_banner-inner img { filter: brightness(0.65) contrast(1.1) saturate(0.55) sepia(0.15) hue-rotate(-8deg) !important; }
}
@media print {
  #weare .overlay { display: none !important; }
  #weare .miki-cb-large_banner-inner img { filter: none !important; }
  #weare .catch, #weare .desc { color: initial !important; text-shadow: none !important; }
}
@keyframes fadeSlideIn { 
  100% { opacity: 1; transform: translateY(0px); }
}