@charset "UTF-8";

:root {
/* ================= Colors ================= */
--c-accent: #60E5EC;
--c-white:  #ffffff;
--c-black:  #000000;
--c-navy:   #04364F;

/* ================= Fonts ================= */
--f-nimbus: "nimbus-sans", "Nimbus Sans", sans-serif;
--f-ryo: "ryo-display-plusn", serif;
--f-rocky: "rocky", sans-serif;
--f-hiragino: "Hiragino Kaku Gothic ProN", "游ゴシック", sans-serif;

/* ================= Fonts Size ================= */
/* Nimbus Sans */
--fs-nimbus-10: clamp(10px, 1vw, 12px);

/* Ryo Display PlusN-SB */
--fs-ryo-sb-10: clamp(10px, 1vw, 10px);
--fs-ryo-sb-15: clamp(13px, 2vw, 15px);
--fs-ryo-sb-17: clamp(10px, 2.5vw, 17px);
--fs-ryo-sb-20: clamp(17px, 3vw, 20px);
--fs-ryo-sb-20-large: clamp(20px, 6vw, 37px);

/* Ryo Display PlusN-B */
--fs-ryo-b-16: clamp(13px, 2.5vw, 16px);
--fs-ryo-b-20: clamp(17px, 3vw, 20px);
--fs-ryo-b-25: clamp(25px, 1.5vw, 25px);
--fs-ryo-b-33: clamp(18px, 4vw, 33px);

/* Ryo Display PlusN-EB */
--fs-ryo-eb-10: clamp(10px, 1vw, 10px);
--fs-ryo-eb-13: clamp(13px, 2vw, 13px);
--fs-ryo-eb-14: clamp(14px, 1.5vw, 14px);
--fs-ryo-eb-15: clamp(15px, 2vw, 15px);
--fs-ryo-eb-18: clamp(13px, 1vw, 16px);
--fs-ryo-eb-20: clamp(20px, 3vw, 20px);
--fs-ryo-eb-60: clamp(45px, 8vw, 60px);
--fs-ryo-eb-80: clamp(60px, 12vw, 80px);

/* Rocky-bold */
--fs-rocky-b-15: clamp(13px, 2vw, 15px);
--fs-rocky-b-20: clamp(18px, 3vw, 20px);
--fs-rocky-b-50: clamp(40px, 6vw, 50px);

/* Rocky-black */
--fs-rocky-bl-10: clamp(10px, 1vw, 10px);
--fs-rocky-bl-11: clamp(10px, calc(5px + 0.5vw), 14px);
--fs-rocky-bl-13: clamp(13px, 1vw, 13px);
--fs-rocky-bl-15: clamp(15px, 1.5vw, 18px);
--fs-rocky-bl-16: clamp(14px, 2vw, 16px);
--fs-rocky-bl-20: clamp(14px, 3vw, 20px);
--fs-rocky-bl-24: clamp(20px, 3.5vw, 24px);
--fs-rocky-bl-26: clamp(21px, 4vw, 26px);
--fs-rocky-bl-40: clamp(35px, 6vw, 38px);
--fs-rocky-bl-50: clamp(40px, 6vw, 50px);

/* Hiragino Kaku Gothic ProN-W3 */
--fs-hira-14: clamp(14px, 1.5vw, 14px);
--fs-hira-15: clamp(13px, 2vw, 15px);
}

/* Firefox */
:root {
  scrollbar-width: none;
}

/* 旧Edge/IE系 */
body {
  -ms-overflow-style: none;
}

/* Chrome / Safari / 新Edge（Blink/WebKit） */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}


/* =====================
    common
========================= */

html{ overflow-y: scroll; }
body{
    font-family: var(--f-hira), sans-serif;
    font-size: var(--fs-hira-14); 
    font-weight: 400;
    line-height: 1.7;
    color: var(--c-white);
    background-color: var(--c-black);
    word-break: break-word;
    overflow-x: clip;
}

img{
    width: 100%;
    height: auto;
	object-fit: contain;
}

.sp{
    display: none;
}

.breadcrumb-list{
    width: 80vw;
    max-width: 1500px;
    margin: auto;
}

.text{
    font-size: var(--fs-hira-15);
    line-height: 2;
}

.section{
	min-height: 23em;
}

.navigation{
    display: flex;
    justify-content: center;
    margin-top: 84px;
}

/* =====================
    header
========================= */
.header-logo {
	max-width: clamp(130px, calc(130px + (160 - 130) * ((100vw - 400px) / 1200)), 160px);
    position: absolute;
    top: 1em;
    left: .6em;
    z-index: 2;
    position: fixed;
}

.home .header-logo {
  display: none;
}

@media screen and (max-width: 782px){
    .header-logo{
        top: 1em;
        left: 1em;
    }
}

/* ===============================
   ハンバーガーボタン（全ページ共通）
================================ */
.hamburger-menu{
  position: fixed;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 43px;
  cursor: pointer;
  z-index: 90;
  pointer-events: auto;
  mix-blend-mode: exclusion;
}

.hamburger-menu__icon{
  position: relative;
  width: 25px;
  height: 16px;
  flex: 0 0 auto;
}

.bar{
  position: absolute;
  right: 0;
  height: 2px;
  background-color: var(--c-white);
  transition: 0.4s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 2px 100%);
}

.bar--top{
  top: 5px;
  width: 100%;
}
.bar--bottom{
  bottom: 3px;
  width: 78%;
}

.hamburger-menu__label{
    font-family: var(--f-rocky);
    transform: scaleX(1.07);
    transform-origin: left center;
    font-size: var(--fs-rocky-bl-20);
    color: var(--c-white);
    white-space: nowrap;
    line-height: 1;
}

.hamburger-menu.js-close .bar--top{
  top: 50%;
  transform: translateY(-50%) rotate(17deg);
  width: 100%;
}
.hamburger-menu.js-close .bar--bottom{
display: none;
}

/* ===============================
   グローバルナビ（全画面オフキャンバス）
   nav は暗幕、ul を右の斜めパネル化
================================ */
:root{
  --menu-dim: rgba(0,0,0,.62);
  --panel-bg: #0a0f11;

  --panel-w: clamp(770px, 36vw, 900px);

  --cut-base: 48%;
  --cut-run: -36vh;

  --edge-w: 4px;
  --glow-strength: .9;
  --edge-color: #fff;
  --edge-shadow: 0 0 10px #fff;
  --diag-start: clamp(21px, 3.4vh, 64px);
  --diag-step:  clamp(21px, 3.4vh, 64px);

  --menu-slide-duration: .45s;
  --menu-slide-ease: cubic-bezier(.2,.8,.2,1);
  --menu-reveal-duration: .9s;
  --menu-reveal-ease: cubic-bezier(.19,1,.22,1);
}

/* =========================
   オーバーレイ
   ========================= */
.header__menu{
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
}
.header__menu::before{
  content:""; position:absolute; inset:0;
  background: var(--menu-dim);
  opacity: 0; transition: opacity .35s ease;
}
.header__menu.js-active{ pointer-events:auto; opacity:1; }
.header__menu.js-active::before{ opacity:1; }

/* =========================
   パネル本体（右からスライド）
   ========================= */
.header__menu-list{
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--panel-w);
  height: 100%;
  display: grid;
  place-content: center;
  --diag-offset: clamp(-80px, calc(-4.28px - 5.258vw), -24px);

  /* 斜めカット */
  clip-path: polygon(
    calc(var(--cut-base) + var(--cut-run) - 1px) 0,
    100% 0,
    100% 100%,
    calc(var(--cut-base) - 1px) 100%
  );

  /* 閉じた状態 */
  transform: translateX(100%);
  transition: transform var(--menu-slide-duration) var(--menu-slide-ease);
  will-change: transform;
  z-index: 1;
}
/* 開く */
.header__menu.js-active .header__menu-list{
  transform: translateX(0);
}

@media screen and (max-width: 1450px){
  .header__menu-list{
    --diag-offset: clamp(-94px, calc(-19.05px - 11.721vw), -24px);
  }
}

/* =========================
   背景画像（固定）
   ========================= */
.header__menu-list::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,1) 100%
    ) left center / 100% 100% no-repeat,
    url('/wp-content/themes/Thema-chiruran/assets/img/common/menu_bg.png')
      left center / auto 100% no-repeat;
    background-position: top;
}

/* =========================
   線画像（初期は隠す→開いたらリビール）
   ========================= */
.header__menu-list::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background:
    no-repeat left center / auto 100%
    url('/wp-content/themes/Thema-chiruran/assets/img/common/menu_bg_line.png');
  background-position: top;

  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

.header__menu.js-active .header__menu-list::after{
  animation: menuLineReveal var(--menu-reveal-duration) var(--menu-reveal-ease) both;
  animation-delay: var(--menu-slide-duration); 
}
@keyframes menuLineReveal{
  from{ clip-path: inset(0 0 100% 0); }
  to  { clip-path: inset(0 0   0% 0); }
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .header__menu.js-active .header__menu-list::after{
    animation: none !important;
    clip-path: inset(0);
  }
}



.header__menu-list a{
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  transform-origin: left center;
  font-weight: 700;
  font-size: clamp(30px, calc(15px + 2vw), 35px);
  text-decoration: none;
  color: var(--c-accent);
  line-height: 1.4;
  letter-spacing: .02em;
  display:inline-block;
translate: 0 0;
  transition: translate .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
  will-change: translate;
}

:where(.header__menu-list, .footer__menu-list) :where(.menu-item--label > a.is-nolink){
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  opacity: 0.15;
}

.header__menu-list a:hover{ translate: 4px 0;  opacity:.9; }
.header__menu-list .menu-custom-size a{ font-size: var(--fs-rocky-bl-16); }

.header__menu-list > li{
  margin-block-end: 0.6rem;
}
.header__menu-list > li:nth-child(1){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 0)); }
.header__menu-list > li:nth-child(2){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 1)); }
.header__menu-list > li:nth-child(3){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 2)); }
.header__menu-list > li:nth-child(4){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 3)); }
.header__menu-list > li:nth-child(5){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 4)); }
.header__menu-list > li:nth-child(6){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 5)); }
.header__menu-list > li:nth-child(7){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 6)); }
.header__menu-list > li:nth-child(8){ transform: translateX(calc(var(--diag-offset) + var(--diag-start) + var(--diag-step) * 7)); }

body.is-menu-open{ overflow:hidden; }

.header__menu-list > li.header__menu-sub:nth-child(1 of .header__menu-sub){
  margin-top: 7rem;
}

.header__menu-list > li.header__menu-sub {
  margin-left: 2.2vw;
}

.header__menu-list > li.header__menu-sub a{
  font-size: clamp(12px, calc(10px + 0.6vw), 12px);
  display: inline-flex;
  align-items: center;
  gap: .4em; 
}

.header__menu-list > li.header__menu-sub img{
    max-width: 8px;
    max-height: 8px;
}

.icon-external{
  width: 1em; height: 1em;
  flex: 0 0 auto;
}

@media (max-width: 540px){
  :root{
    --panel-w: clamp(100vw, 36vw, 900px);
    --diag-start: clamp(0px, 0.2vh, 50px);
    --diag-step: clamp(21px, 3vh, 64px);
  }
  
    .header__menu-list{
      --diag-offset: clamp(-94px, calc(-19.05px - 17.721vw), -24px);
    }
	.header__menu-list > li.header__menu-sub:nth-child(1 of .header__menu-sub),
	.header__menu-list > li.header__menu-sub{
		margin-left: 11vw;
	}
}

/* ===============================
   フロントだけ：動画上の下中央ロゴ（PC）
================================ */

.header.under-header {
  position: static;
  background: transparent;
}

.under-mainvisual__title{
    font-family: var(--f-rocky);
    transform: scaleX(1.07);
    transform-origin: left center;
    font-weight: 700;
    font-size: max(37px, calc(16px + 2vw));
    color: var(--c-accent);
    line-height: 0;
    letter-spacing: 0.02em;
    position: fixed;
    top: 125px;
    left: 2.4vw;
    width: 100%;
    z-index: 2;
    mix-blend-mode: difference;
}
@media (max-width: 767px){
    .under-mainvisual__title{
        top: 110px;
        left: 5vw;
    }
}

/* =====================
    sns 
========================= */
.front-anchors__sns::after{
    content: "";
    position: absolute;
    bottom: -13px;
    left: -17px;
    transform: translateX(5%);
    width: 60px;
    height: 60px;
    background: url(/wp-content/themes/Thema-chiruran/assets/img/common/sns-deco.png) top right / contain no-repeat;
    pointer-events: none;
    z-index: -1;
}
.sns-list {
    position: relative;
    display: flex;
    gap: 0;
}

.sns-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  mix-blend-mode: exclusion;
	transition: transform 450ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  transform: translateZ(0);
  mix-blend-mode: exclusion;
}

.sns-list a:hover,
.sns-list a:focus-visible{
  transform: scale(1.3);
}

.sns-list a:active{
  transform: scale(0.98);
}


@media (max-width: 767px) {
    .front-anchors__sns {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
	.sns-list a{ transition: none; }
}

@media (max-width: 520px){

    .front-anchors__sns::after{
        background: url(/wp-content/themes/Thema-chiruran/assets/img/common/sns-deco_sp.png) top right / cover no-repeat;
        bottom: -11px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: clamp(95px, 10vh, 140px);
    }
    .sns-list {
        justify-content: center;
        gap: 25px;
    }
    .sns-list li {
    width: 15%;
    }

    .sns-list a{
        width: 90%;
        height: 90%;
    }
}

/* =====================
    mainvisual
========================= */
.front-spotlight{
  grid-row: 2;
  grid-column: 1;
  justify-self: end;

  background-color: rgb(255 255 255 / 12%);
  padding: 1em 1.3em .8em;

  width: clamp(260px, 24vw, 420px);

  margin-inline-end: clamp(12px, 3vw, 25px);
  margin-block-end: clamp(8px, 2.6vh, 24px);

  mix-blend-mode: exclusion;
  color: var(--c-white);

  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  z-index: 1;
}

.front-spotlight__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .3em;
  mix-blend-mode: exclusion;
}
.front-spotlight__label,
.front-spotlight__date{
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  transform-origin: left center;
font-size: max(12px, calc(8px + 0.3vw));
  font-weight: 900;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}
.front-spotlight__title{
  font-family: var(--f-ryo);
font-size: max(12px, calc(8px + 0.3vw));
  font-weight: 900;
  mix-blend-mode: exclusion;
}
.front-spotlight__title a{
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.front-spotlight__title a:hover{ opacity:.5; }

@media (min-width: 768px){
  .front-spotlight__title a{ -webkit-line-clamp: 2; }
}

.front-anchors__logo-img{
  width: max(182px, 21vw);
  max-width: 18em;
  height: auto;
  display: block;
  margin: 0 auto;
}
.front-anchors__logo p{
  font-family: var(--f-ryo);
  font-size: var(--fs-ryo-b-25);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  text-align: center;
  margin: .3em 0 0;
  color: var(--c-white);
  mix-blend-mode: exclusion;
}
.front-anchors__logo p span{ display:inline-block; }
.front-anchors__logo-break{ text-align:center; }

body.is-front{ overflow: hidden; }

.mainvisual{
  position: fixed;
  inset: 0;
  display: grid;

  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;

  align-items: end;
  justify-items: stretch;
  box-sizing: border-box;
  overflow: hidden;

  isolation: isolate;
}

.mv-video{
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.front-anchors__sns{
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 100;
  mix-blend-mode: exclusion;
}

.front-anchors__logo,
.front-anchors__sns{
  transform: translateY(6px);
  will-change: opacity, transform;
  z-index: 1;
  mix-blend-mode: exclusion;
}

.home .front-anchors__sns{
  opacity: 0;
}

.front-anchors__logo{
  grid-row: 2;
  grid-column: 1;
  justify-self: center;
  text-align: center;

  --logo-shift: 0;
  margin-inline-start: var(--logo-shift);

  margin-block-end: clamp(8px, 2.6vh, 24px);
}

body.is-front .front-anchors__sns{
  position: static;
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  align-self: end;
  z-index: 2;

  margin-inline-start: clamp(12px, 3vw, 32px);
  margin-block-end: max(6px, env(safe-area-inset-bottom));

  mix-blend-mode: exclusion;
}

@media (max-width: 768px){
  .mainvisual{
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .front-anchors__logo{
    grid-row: 2;
    justify-self: center;
    margin-inline-start: 0;
    margin-block-end: 0;
  }
  .front-anchors__logo p{
    margin-top: 0;
  }
  .front-spotlight{
    grid-row: 3;
    justify-self: center;
    width: min(75vw, 560px);
    margin-inline: 0; 
    margin-block-end: clamp(55px, 2.4vh, 70px);
  }
}

.under-mainvisual__bg{
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    margin-top: 93.23px;
    position: relative;
    z-index: 0;
}

.under-mainvisual__thumb{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.under-mainvisual__thumb img{
    height: 100%;
    aspect-ratio: 1600 / 372;
    object-fit: cover;
    object-position: right;
}

.under-mainvisual__text{
    font-size: 45px;
    font-weight: 500;
    color: #113090;
    line-height: 1.22;
    padding: 2.022em 0 2.577em;
    display: flex;
    flex-direction: column;
}

.under-mainvisual .heading1{
    font-size: 1em;
}

@media screen and (max-width: 1024px){
    .under-mainvisual__bg{
        margin-top: 84.16px;
    }f

    .under-mainvisual__text{
        font-size: 37px;
    }
}

@media screen and (max-width: 520px){
	.under-mainvisual__bg {
    margin-top: 57px;
  }
  .front-anchors__sns{
    position: fixed;
    inset-inline: 0;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding-inline:
    max(12px, env(safe-area-inset-left))
    max(12px, env(safe-area-inset-right));
  padding-block-end: env(safe-area-inset-bottom);
      bottom: 0;
  }
}

/* =====================
    top-page
========================= */
.top-item__heading{
    text-align: center;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    z-index: 1;
    margin-bottom: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
}

.top-item__heading::before{
    content: attr(data-eng);
    font-size: calc(35px + (50 - 35) * ((100vw - 375px) / (1600 - 375)));
    font-weight: 600;
    line-height: 1;
    display: block;
    padding: 0.3em 0.5em 0;
    margin-bottom: 0.2em;
}
.to-archive__btn .btn{
    margin: 3em auto;
}

@media screen and (max-width: 782px){
    .topics-inner{
    margin-top: 160px;
    }
}

/* =============================
    staff
================================ */
.staff{
  background: url(/wp-content/themes/Thema-chiruran/assets/img/staff/bg.webp) top right / cover no-repeat;
  background-color: var(--c-black); 
}
.staff-inner{
    width: 62vw;
    min-width: 545px;
    margin: 190px auto 100px;
    transform: translateX(24%);
}

.spec{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--f-ryo);
}
.spec th,
.spec td{
    padding-bottom: 2.3em;
  vertical-align: top;
}
.spec th{
  font-size: max(14px, calc(10px + .2vw));
  color: var(--c-accent);
  width: 17em;
  white-space: nowrap;
}
.spec td{
  font-size: max(17px, calc(13px + .2vw));
  word-break: break-word;
  line-height: 1.8;
}

@media screen and (max-width: 782px){
  .staff-inner{
	  width: 90vw;
    min-width: 0;
    margin: 180px auto 0;
    transform: none;
    text-align: center;
  }
    .spec tbody tr{
    display: block;
    padding: 12px 0 35px;
  }

  .spec th, .spec td{
    text-align: center;
    display: block;
    width: auto;
    padding: 0;
  }

  .spec th{
    white-space: normal;
    margin-bottom: 6px;
  }

  .spec td{
    padding-right: 4px;
  }

  .spec{ table-layout: auto; }
}


.site-parallax-img{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout;
	z-index:-1;
}
.site-parallax-img > img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 175%;
  height: 175%;
  object-fit: cover;
  transform: translate3d(-50%,-50%,0) translateY(0);
  will-change: transform;
}
.single-post .site-parallax-img{
    opacity: .7;
}

.single-post .section{
    margin-top: 190px;
    margin-bottom: 200px;
}

.topics-inner{
    width: 81%;
    margin-top: 110px;
    margin-left: auto;
}

/* 共通スタイル */
.archive-head { margin-bottom: 1.2rem; }
.archive-title { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 .3em; }
.archive-desc { color: #777; font-size: 14px; }

.archive-cats {
  margin: 0 0 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.archive-cats__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 5vw, 28px);
  list-style: none;
  padding: 0 8px;
  margin: 0;
  white-space: nowrap;
}

.archive-cats__link {
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  transform-origin: left center;
  font-size: var(--fs-rocky-bl-15);
  color: var(--c-accent);
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .25s ease;
  padding: 0 25px 7px;
  mix-blend-mode: difference;
}

.archive-cats__link.is-active { color: var(--c-white); }

.archive-cats__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 100%;
  max-width: 80px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.archive-cats__link.is-active::after,
.archive-cats__link:hover::after {
  transform: translateX(-50%) scaleX(1);
}


/* カード（共通） */
.glass-dark{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background-color: rgba(255,255,255,.05);
  border: 2px solid #ffffff0f;
  aspect-ratio: 16 / 23;
  padding: 1.3em;
}

.card__link{ 
display: grid;
  grid-template-rows: auto 1fr;

  align-content: start;
  align-items: start;
  min-height: 0;
}
.card__thumb{ aspect-ratio: 16/10; overflow: hidden; position: relative; }
.card__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.card__thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgb(0 0 0 / .15), rgb(0 0 0 / .35));
  pointer-events:none;
}

.card__body{
padding: 10px 0 60px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: row dense;
  column-gap: 12px;
  row-gap: 10px;
  mix-blend-mode: difference;

  align-items: start;
  align-content: start;
	
	min-width: 0;
  min-height: 0;
}

.card__meta{
  mix-blend-mode: difference;
}

.card__date{
    font-family: var(--f-rocky);
    transform: scaleX(1.07);
    transform-origin: left center;
    font-size: var(--fs-rocky-bl-11);
    font-weight: 700;
    grid-column: 1; grid-row: 1; align-self: center;
    letter-spacing: .02em;
    margin: 0;
}

.card__cat{
  grid-column: 2; grid-row: 1; justify-self: start; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 1em;
  padding: 0px 9px;
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  transform-origin: left center;
  font-size: var(--fs-rocky-bl-10);
  font-weight: 700;
  color: var(--c-black);
  background: var(--c-white);
  border: 0;
}

.card__title{
    font-family: var(--f-ryo);
    font-size: var(--fs-ryo-eb-18);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -0.02em;
    grid-column: 1 / -1; grid-row: 2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
	min-width: 0;
  min-height: 0;
  width: 100%;
  align-self: start;
}

.card__link::after{
    content: "";
    position: absolute;
    right: 16px;
    bottom: 15px;
    width: 18px;
    height: 17px;
    background-image: url("/wp-content/themes/Thema-chiruran/assets/img/topics/cards_arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .15s ease;
    mix-blend-mode: exclusion;
}
.card__link:hover::after{ transform: translateX(4px); }


@supports (-webkit-touch-callout: none) {
  .card__title{
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    max-height: calc(1em * var(--lh, 1.6) * var(--lines, 2));
    overflow: hidden;
  }
}

.swiper {
    overflow: unset !important;
  margin: 0 auto;
}

.swiper-slide {
  flex-shrink: 0;
  width: 28vw;
  max-width: 400px;
  scroll-snap-align: start;
}

.slider-progress {
  position: relative;
  height: 4px;
  background: #eee;
  margin-top: 20px;
  border-radius: 2px;
  overflow: hidden;
}

.slider-progress__bar.swiper-scrollbar {
position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  z-index: 1;  
}

.slider-progress__bar .swiper-scrollbar-drag {
  background-color: #00f;
  height: 100%;
  border-radius: 2px;
}

.slider-progress {
    position: relative;
  margin-top: 12px;
  height: 4px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
}

.js-swiper { 
  --swiper-scrollbar-size: 6px;
  --swiper-scrollbar-bg-color: rgba(255,255,255,.14); 
  --swiper-scrollbar-drag-bg-color: #ffffff;
  position: relative;
  isolation: isolate;
}

.js-swiper > .swiper-scrollbar{
  position: relative;
  width: 100%;
  left: 0;
  bottom: 0;
  margin-top: 12px;
  border-radius: 0px;
  opacity: 1;
  display: block;
  height: 1px !important;
  z-index: 5;
  background: var(--c-white);
  mix-blend-mode: difference;  
}

.js-swiper .swiper-scrollbar-drag{
  top: -7px;
  height: 7px;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 0;
  mix-blend-mode: difference; 
  transition: background-color .2s ease, opacity .2s ease;
}

@media (prefers-reduced-motion: reduce){
  .js-swiper .swiper-scrollbar-drag{ transition: none; }
}

.slider-progress,
.slider-progress__bar { display: none; }

@media screen and (max-width: 1240px){
	.glass-dark{
		aspect-ratio: 15 / 26;
	}
	.card__title{
		-webkit-line-clamp: 2;
	}
}

@media screen and (max-width: 782px){
	.topics-inner{
		margin-top: 150px;
	}
	.glass-dark {
        aspect-ratio: 15 / 20;
    }
    .single-post .section {
        margin-top: 160px;
        margin-bottom: 100px;
    }
    .archive-cats__link{
        padding: 0 37% 10px;
    }
}

/* =============================
    投稿コンテンツ single
================================ */

.single-section{
    width: 60vw;
    min-width: 29rem;
    margin: auto;
}

.single__content{
    margin-top: 80px;
    padding-bottom: 80px;
}

.single-title{
    color: #4d4d4d;
    font-size: 3.2rem;
    line-height: 1.65;
    font-weight: 500;
    vertical-align: middle;
}

.single__body{
    margin-top: 50px;
    font-size: 1.7rem;
    font-weight: 400;
}

.single__body .img-wrap{
    width: 80%;
    margin: auto;
}

.single__content .date{
    font-size: 1.5rem;
    font-weight: 300;
    display: inline-block;
    margin-top: 10px;
}

@media screen and (max-width: 782px){
    .single-section {
    width: 90vw;
    min-width: auto;
    margin-bottom: 15vw;
    }
}
/* =====================
    footer
========================= */
.footer{
  transform-origin: left center;
  font-size: var(--fs-rocky-bl-16);
  font-weight: 500;
  color: var(--c-accent);
	text-align: center;
	padding: 40px 0 50px 0;
}

.footer-logo{
  width: 15%;
  max-width: 260px;
  margin: 0 auto 1.5em;
}

.footer__menu-list {
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .5em;
}
.footer__menu-list .menu-item a{
	padding: 0 1.3vw;
}

.copyright{
    font-family: var(--f-nimbus);
    font-size: var(--fs-nimbus-10);
    font-weight: 400;
}

@media screen and (max-width: 1200px){
    .footer-logo {
        max-width: 200px;
    }
}

@media screen and (max-width: 1024px){
    .footer {
        flex-direction: column;
    }

    .copyright{
        text-align: center;
    }
}

@media screen and (max-width: 782px){
    .footer{
        padding-bottom: 22vw;
    }

    .footer-logo {
        min-width: 160px;
        margin-bottom: 0.7em;
    }
    .footer_snsbox ul{
        margin-bottom: 1.5em;
    }
	.footer__menu-list{
        display: block;
	}
	.footer__menu-list .menu-item:first-child a{
		margin-left: 0;
	}
    .footer-copybox {
    margin-top: 5vw;
}

}

/* =====================
    news-section
========================= */
.news-section{
    padding: 59px 0 75px;
}

@media screen and (max-width: 782px){
    .news-section{
        padding: 20px 0 20px;
    }  

    .navigation {
        margin-top: 30px;
    }
}

/* =====================
    news single-article
========================= */
.single-article{
    padding: 60px 0;
}

.single-article__info{
    display: flex;
    align-items: center;
}

.single-article__time{
    font-size: 17px;
    font-weight: 400;
}

.single-article__cat{
    font-size: 0.8em;
    padding: 0 0.5em;
    margin-left: 0.7em;
}
.single-article__category{
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    width: 120px;
    color: #ffffff;
    margin-left: calc((34.5 / 1100) * 100%);
    padding: 0.615em 0;
    text-align: center;
}

.single-article__title{
    font-family: var(--f-ryo);
    font-size: max(20px, calc(8px + 0.7vw));
    font-weight: 900;
    margin-bottom: 15px;
	letter-spacing: 0.02em;
    line-height: 1.6;
}

.single-article__date{
    font-family: var(--f-rocky);
    transform: scaleX(1.07);
    transform-origin: left center;
    font-size: var(--fs-rocky-bl-15);
    font-weight: 900;
    color: var(--c-accent);
    letter-spacing: 0.1rem;
}

.single-article__cats {
    display: inline-flex;
    gap: 0.4em;
    margin-left: 0.5em;
    flex-wrap: wrap;
}

.single-article__cat {
    font-family: var(--f-rocky);
    transform: scaleX(1.07);
    transform-origin: left center;
    font-size: var(--fs-rocky-bl-11);
    font-weight: 700;
    color: var(--c-black);
    background-color: #2C9CBC;
    display: inline-block;
    padding: 0.2em 0.7em;
    line-height: 1;
}

.single-article__body{
    padding-top: 50px;
    padding-bottom: 120px;
	font-family:var(--f-ryo);
}

.single-article__thumb{
    margin: 28px 0 0;
}

.single-article__body p{
    font-family: var(--f-ryo);
    font-size: var(--fs-hira-14);
    font-weight: 100;
	word-break: break-all;
	text-align: justify;
}
.single-article__body .wp-caption-text{
    font-size: 0.9em;
    margin-top: 0.5em;
}
.single-article__body p a {
    font-weight: 700;
	color: var(--c-accent);
    border-bottom: 1px solid;
	transition:.3s;
}
.single-article__body p a:hover{
	opacity:.7;
}
.single-article__body *:first-child{
    margin-top: 0;
}

.single-article__body * + *{
    margin-top: 20px;
}

.single-article__thumb img{
    height: 100%;
    object-fit: cover;
}

.post-nav {
    max-width: 20vw;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin: 2rem auto 0;
    flex-wrap: wrap;
}

.post-nav__btn {
    font-family: var(--f-ryo);
    font-size: var(--fs-ryo-eb-15);
    color: var(--c-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	transition:.3s;
}
.post-nav__btn:hover{
	opacity:.6;
}
.post-nav__btn_arrow {
    width: 18px;
    height: 17px;
}

.post-nav__btn--next .post-nav__btn_arrow{
    transform: scale(-1, 1);
}
.post-nav__btn[aria-disabled="true"] {
  opacity:0;
}

/* 横並び＆整列 */
.share-buttons{
  position: fixed;
  inset-block-start: 42%;
  inset-inline-end: max(5vw, env(safe-area-inset-right)); 
  transform: translateY(-50%);
  z-index: 1;
}

.share-inline{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-white);
  padding: 6px 10px;
}

.share-inline::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 1px;
  background: #780808;
  width: 30vw;
}

.share-inline__icon{
  width: clamp(24px, 5vw, 48px);
  display: block;
}

.share-inline__text{
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  transform-origin: left center;
  font-size: var(--fs-rocky-bl-13);
  font-weight: 700;
  color: #F83A3B;
  white-space: nowrap;
  margin-right: -10px;
}

.share-inline:hover{ opacity: .85; }

@media screen and (max-width: 782px){
    .single-article__title{
      font-size: clamp(14px, calc(7px + 2vw), 18px);
        margin-bottom: 10px;
    }
    .single-article__thumb{
        margin-top: 40px;
    }
    .single-article__body{
        padding: 25px 3vw 0;
        margin-bottom: 50px;
    }
    .share-buttons{
        position: static;
    }
    .share-inline{
    position: static ;
    top: auto; right: auto; transform: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    width: 100%;
    max-width: 320px;
    margin: 0 auto 12vw;
    padding: 12px 0;
    text-align: center;
  }

  .share-inline::after{ display: none; }

  .share-inline__text{
        margin: 0 auto -8vw;
  }

  .share-inline__icon{
    display: block;
      width: clamp(56px, 25vw, 125px);
      max-width: 130px;
    height: auto;
  }

  .post-nav{
    max-width: 58vw;
    margin: 0 auto;
  }
}

/* =====================
    trailer
========================= */

.trailer-archive .inner {
    width: 83vw;
    margin-left: auto;
}
.trailer-grid__item{
    margin-bottom: 3vw;
}
.trailer-archive__title {
    font-size: clamp(20px, 3vw, 28px);
    margin: 0 0 .5rem;
}
.trailer-grid {
}
.trailer-grid__card {
    position:relative;
    display:block;
    width:100%;
    cursor:pointer;
}
.trailer-grid__thumb {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    overflow: hidden;
    object-fit:cover;
    opacity: .75;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1); 
}
.trailer-grid__card:hover .trailer-grid__thumb {
    opacity:.45;
}
.trailer-grid__caption {
    font-family: var(--f-ryo);
    font-size:var(--fs-ryo-eb-18);
    font-weight: 900;
    letter-spacing: -0.025em;
    position: absolute;
    bottom: .8vw;
    left: 1.2vw;
}
.trailer-grid__play {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 15%;
}
.modal-trailer {
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.6);
    z-index:9999;
    padding:4vw;
}
.modal-trailer.is-open {display:flex}
.modal-trailer__box {
    position:relative;
    width:min(100%,960px);
    aspect-ratio:16/9;
    background:var(--c-black);
    overflow:hidden;
}
.modal-trailer__close {
    position:absolute;
    top:.5rem;
    right: 1.5rem;
    order: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 0;
    line-height: 0;
    z-index: 2;
    background: transparent;
}

.modal-trailer__close::before{
    content: "";
    display: block;
    width: 48px;
    height: 64px;
    background: currentColor;
    -webkit-mask: url(/wp-content/themes/Thema-chiruran/assets/img/cast/modal-close.svg) no-repeat center / contain;
    mask: url(/wp-content/themes/Thema-chiruran/assets/img/cast/modal-close.svg) no-repeat center / contain;
    background: rgba(0, 0, 0, 0.001);
    -webkit-backdrop-filter: invert(1) contrast(1.05);
    backdrop-filter: invert(1) contrast(1.05);
    will-change: backdrop-filter;
}
.modal-trailer__frame {position:absolute; inset:0; width:100%; height:100%; border:0}

@media (min-width: 782px) {
    .trailer-grid__play{
        width: 15%;
        max-width: 7.5%;
    }
}

@media (max-width: 781px) {
    .post-type-archive-trailer .section {
    margin-top: 110px;
}
    .trailer-grid__play{
        width: 15%;
        max-width: 17%;
    }
}

/* =====================
    cast
========================= */
.cast-snap{
    overscroll-behavior-y: none;
}

.cast-sec { 
    position: relative; 
    min-height: 100svh; 
    min-height: 100vh; 
    scroll-snap-align: start; 
    isolation: isolate;
}

.cast-snap::-webkit-scrollbar{ width:0; height:0; }
body{ scrollbar-width:none; }

/* FV専用 */
.cast-hero { min-height: 100svh; position: relative;}
.cast-hero__media { position: absolute; inset: 0; z-index: 0; }
.cast-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cast-hero__bg    { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;opacity: .3; }
.cast-hero__content{
  position: relative; z-index: 2;
  display: grid; place-items: center;
  min-height: 100svh; text-align: center; color: #fff; padding: 4vh 4vw;
}

.cast-scrollline{
  position: absolute;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: exclusion;
  color: var(--c-accent);
}

.cast-scrollline__bar{
  position: relative;
  width: 1px;
  height: 100px;
  overflow: hidden;
}
.cast-scrollline__bar::after{
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 1px;
  height: 100%;
  background: currentColor;
  animation: liner 2.5s cubic-bezier(1,0,0,1) infinite;
}
@keyframes liner{
  0%   { transform: scale(1,0); transform-origin: 0 0; }
  30%  { transform: scale(1,1); transform-origin: 0 0; }
  70%  { transform: scale(1,1); transform-origin: 0 100%; }
  100% { transform: scale(1,0); transform-origin: 0 100%; }
}

/* 横書きテキスト（線の下） */
.cast-scrollline__text{
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(12px, 1.6vw, 17px);
  font-family: var(--f-rocky);
  transform: scaleX(1.1);
}

/* モーション削減 */
@media (prefers-reduced-motion: reduce){
  .cast-scrollline__bar::after{ animation: none; opacity: .6; }
}

.cast-sec__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cast-sec__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cast-sec__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .8;
}
.cast-sec__bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24em;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100% 
  );
  pointer-events: none;
}

/* ===== 左下寄せレイアウト ===== */
.cast-sec__overlay{
  position: absolute;
  z-index: 2;

  left:  clamp(24px, 6vw, 80px);
  right: clamp(100px, 12vh, 200px);

  bottom: 0;

  transform: translateY(
    calc(-1 * (clamp(100px, 18vh, 200px) + env(safe-area-inset-bottom)))
  );

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .6rem;
  text-align: left;

  height: auto;
  padding: 0;
  width: 100%;
}

.cast-sec__name{
    font-family: var(--f-ryo);
    font-size: clamp(26px, calc(50px + 4.2vw), 150px);
    font-weight: 700;
    line-height: 1.3em;
    margin: 0;
}
.cast-sec__nameBtn{
  background:none; border:0; color:inherit; font:inherit;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.35em;
}

.cast-sec__nameBtn .js-blur-in { pointer-events: none; }

.cast-sec__nameBtn::after{
    content:"";
    width: .25em;
    height: .25em;
    background: var(--c-accent);
    -webkit-mask-image: var(--cast-arrow);
            mask-image: var(--cast-arrow);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center;  mask-position:center;
    -webkit-mask-size:contain;     mask-size:contain;
    transform: translateY(1px);
}

@supports not (mask-image: url("")) {
    .cast-sec__nameBtn::after{
        background:none;
        width:0; height:0;
        border-left:.5em solid currentColor;
        border-top:.3em solid transparent;
        border-bottom:.3em solid transparent;
    }
}

.cast-sec__desc{
    font-family: var(--f-ryo);
    font-size: var(--fs-ryo-eb-20);
    max-width: min(88vw, 900px);
    line-height: 1.7;
}

.cast-sec__overlay.is-invert { color:#fff; }
.cast-sec__overlay.is-invert .cast-sec__desc { color:rgba(255,255,255,.9); }
.cast-sec__overlay.is-invert .cast-sec__nameBtn:focus-visible { outline-color:#fff; }

.cast-sec__portrait:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ====== モーダル ====== */
.cast-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .35s ease,
    visibility 0s linear .35s;
  isolation: isolate;
}

.cast-modal.is-open{
  visibility: visible;
  transition:
    opacity .35s ease,
    visibility 0s linear 0s;
}

.cast-modal.is-open.is-shown{
  opacity: 1;
  pointer-events: auto;
}
.cast-modal__slides{
    position:absolute;
    inset:0;overflow:hidden;
}

.cast-modal__slides{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.cast-modal__close,
.cast-modal__nav--prev,
.cast-modal__nav--next{ position:absolute; z-index:2; }
.cast-modal__slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transition:opacity .25s ease}
.cast-modal__slide.is-active{opacity:1}

.cast-modal__text{
    position:absolute;
    right: clamp(80px, 9vw, 150px);
    bottom: calc(clamp(20px, 3vh, 40px) + env(safe-area-inset-bottom));
    z-index:2;
    color:#fff;
    pointer-events:none;
    width: 37vw;
}

.cast-modal__text .cast-sec__name { margin:0 0 .4rem; }
.cast-modal__text .cast-sec__desc { opacity:.9; }
.cast-modal__text p{ margin:.6rem 0 0; line-height:1.7; max-width: min(88vw, 900px); font-family: var(--f-ryo);}

.cast-modal__text .cast-sec__nameBtn{ all:unset; display:inline; }

.cast-modal__nav{
  font-family: var(--f-hira);
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:48px; height:48px; border-radius:10px;
  display:grid; place-items:center;
  color:var(--c-black);
  cursor:pointer; z-index:2; user-select:none;
  font-size:0; line-height:0;
  background: transparent;
}
.cast-modal__nav--prev{ left:.5rem; }
.cast-modal__nav--next{ right:.5rem; }
.cast-modal__nav:disabled{ opacity:.35; pointer-events:none; }
.cast-modal__close:focus-visible,.cast-modal__nav:focus-visible{
  outline:2px solid #000; outline-offset:2px;
}

.cast-modal__nav::before{
  content:"";
  display:block;
  width:22px; height:41px;

  -webkit-mask-image: url('/wp-content/themes/Thema-chiruran/assets/img/cast/modal-arrow.svg');
          mask-image: url('/wp-content/themes/Thema-chiruran/assets/img/cast/modal-arrow.svg');
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
  -webkit-mask-position:center;      mask-position:center;
  -webkit-mask-size:contain;         mask-size:contain;

  background: rgba(0,0,0,0.001);
  -webkit-backdrop-filter: invert(1) contrast(1.05);
          backdrop-filter: invert(1) contrast(1.05);

  will-change: backdrop-filter;
}

.cast-modal__nav--prev::before{ transform: none; }
.cast-modal__nav--next::before{ transform: scaleX(-1); }

.cast-modal__close{
  position:absolute; right:1rem; bottom:2rem;
  border:0; width:48px; height:48px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  user-select:none; font-size:0; line-height:0;
  z-index:2;
  background:transparent; color:#fff;
}

.cast-modal__close::before{
  content:""; display:block; width:48px; height:64px;
  background: currentColor;
  -webkit-mask: url('/wp-content/themes/Thema-chiruran/assets/img/cast/modal-close.svg')
                no-repeat center / contain;
          mask: url('/wp-content/themes/Thema-chiruran/assets/img/cast/modal-close.svg')
                no-repeat center / contain;

    background: rgba(0,0,0,0.001);
  -webkit-backdrop-filter: invert(1) contrast(1.05);
          backdrop-filter: invert(1) contrast(1.05);

  will-change: backdrop-filter;
}

.cast-modal__close:focus-visible,
.cast-modal__nav:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
}

.cast-modal.is-blend .cast-modal__close{
  background: transparent;
  color:#fff;
}
.cast-modal.is-blend .cast-modal__close::before{
  mix-blend-mode: difference;
}

@supports not (mask-image: url("")){
    .cast-modal__close::before{
        background: none;
        background-image: url('/wp-content/themes/Thema-chiruran/assets/img/cast/modal-close.svg');
        background-repeat:no-repeat;
        background-position:center;
        background-size:22px 22px;
    }
}

@media (max-width: 782px){
    .cast-modal__text{
        width: 90vw;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
    }
} 


/* =====================
    アニメーション
========================= */
.js-text span {
/*   display: inline-block; */
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js-text span { opacity: 1 !important; transition: none !important; }
}

.js-fade-cards > * {
  opacity: 0.4;
  transform: translateY(24px);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .js-fade-cards > * { opacity: 1 !important; transform: none !important; }
}

:root { --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); }

.js-blur-in {
  --scale-start: .96;
  --blur-start:  12px;
  --dur:         1s;
  --dur-filter:  1.4s;
  --delay:       0s;

  opacity: .01;
  filter: blur(var(--blur-start));
  transform: scale(var(--scale-start));
  will-change: opacity, filter, transform;
}

.js-blur-in.isActive {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition:
    transform var(--dur) var(--ease-out-quart) var(--delay),
    opacity   var(--dur) var(--ease-out-quart) var(--delay),
    filter    var(--dur-filter) var(--ease-out-quart) var(--delay);
}

@media (prefers-reduced-motion: reduce) {
  .js-blur-in { opacity: 1 !important; filter: none !important; transform: none !important; }
}


/* =============================
    404
================================ */
.error404{
  background:
      url('/wp-content/themes/Thema-chiruran/assets/img/common/404.webp' )
      center / cover no-repeat;
  background-size: auto;
  --fz-fluid: clamp(8px, 1.8vw, 16px);
}
.section-404 {
  color: var(--c-accent);
  text-align: center;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 16px;
}
.section-404 .inner { max-width: 980px; margin: 0 auto; }

.section-404 .nf-code{
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  font-size: calc(var(--fz-fluid) * 9);
  line-height: 1.1;
  letter-spacing: .02em;
}

.section-404 .nf-title{
  font-family: var(--f-rocky);
  transform: scaleX(1.07);
  font-size: calc(var(--fz-fluid) * 3);
  line-height: 1;
  margin: 0 0 .6em;
}
.section-404 .nf-lead{
  font-family: var(--f-ryo);
  font-size: calc(var(--fz-fluid) * 1);
}

.section-404 .nf-actions{
  font-family: var(--f-ryo);
  font-size: calc(var(--fz-fluid) * 1);
  color: var(--c-white);
  margin: 5em auto;
}

.nf-home{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  text-decoration: none;
}

.nf-home span[aria-hidden="true"] img{
  width: 1.3em;
  height: auto;
  display: block;
}

/* =============================
    変更の可能性あり
    single タイトルの扱い
================================ */

.single h2{
  font-family: var(--f-ryo);
  font-size: clamp(17px, 1.7vw, 23px);
  margin-top: clamp(35px, 3.6vw, 45px);
  margin-bottom: clamp(25px, 3.6vw, 35px);
}

.single .wp-block-pullquote{
	padding-top: 0;
	padding-bottom: 0;
}

/* .single-article__body  p.has-medium-font-size + p:not([class]):not([id]):not([style]) {
  margin-top: 5px;
}

.single-article__body  p.has-medium-font-size.has-text-align-left
  + p:not([class]):not([id]):not([style]) {
  margin-top: 20px;
}

.single-article__body  p.has-medium-font-size:has(mark)
  + p:not([class]):not([id]):not([style]) {
  margin-top: 20px;
} */