@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/


/* =========================
   character archive / single
========================= */

/* Cocoonの標準記事UIをcharacterページでは弱める */
.post-type-archive-character .article,
.single-character .article,
.page-about_me .article,
.page-template-page-about_me-php .article,
.privacy-policy .article,
.page-privacy-policy .article,
.page-template-page-privacy-policy-php .article,
.page-played_scenarios .article,
.page-original_scenarios .article,
.page-template-page-played_scenarios-php .article,
.page-template-page-original_scenarios-php .article,
.page-contact .article,
.page-template-page-contact-php .article{
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

.post-type-archive-character .content,
.home .content,
.page-about_me .content,
.page-template-page-about_me-php .content,
.privacy-policy .content,
.page-privacy-policy .content,
.page-template-page-privacy-policy-php .content,
.page-played_scenarios .content,
.page-original_scenarios .content,
.page-template-page-played_scenarios-php .content,
.page-template-page-original_scenarios-php .content,
.page-contact .content,
.page-template-page-contact-php .content{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: transparent;
}

.single-character .content,
.page-about_me .content,
.page-template-page-about_me-php .content,
.privacy-policy .content,
.page-privacy-policy .content,
.page-template-page-privacy-policy-php .content,
.page-played_scenarios .content,
.page-original_scenarios .content,
.page-template-page-played_scenarios-php .content,
.page-template-page-original_scenarios-php .content,
.page-contact .content,
.page-template-page-contact-php .content{
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.post-type-archive-character .main,
.single-character .main,
.page-about_me .main,
.page-template-page-about_me-php .main,
.privacy-policy .main,
.page-privacy-policy .main,
.page-template-page-privacy-policy-php .main,
.page-played_scenarios .main,
.page-original_scenarios .main,
.page-template-page-played_scenarios-php .main,
.page-template-page-original_scenarios-php .main,
.page-contact .main,
.page-template-page-contact-php .main{
  width: 100%;
  background: transparent;
}

.c-site-credit{
  padding: 16px 16px 16px;
  color: #22322b;
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  background: #83d2d9;
}

.c-site-credit__inner{
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
}

.post-type-archive-character .entry-title,
.single-character .entry-title,
.page-about_me .entry-title,
.page-template-page-about_me-php .entry-title,
.privacy-policy .entry-title,
.page-privacy-policy .entry-title,
.page-template-page-privacy-policy-php .entry-title,
.page-played_scenarios .entry-title,
.page-original_scenarios .entry-title,
.page-template-page-played_scenarios-php .entry-title,
.page-template-page-original_scenarios-php .entry-title,
.page-contact .entry-title,
.page-template-page-contact-php .entry-title{
  display: none;
}

.post-type-archive-character .sns-share,
.single-character .sns-share,
.single-character .related-entries,
.single-character .pager-post-navi,
.single-character .comment-area,
.single-character .article-footer,
.page-about_me .sns-share,
.page-about_me .related-entries,
.page-about_me .pager-post-navi,
.page-about_me .comment-area,
.page-about_me .article-footer,
.page-template-page-about_me-php .sns-share,
.page-template-page-about_me-php .related-entries,
.page-template-page-about_me-php .pager-post-navi,
.page-template-page-about_me-php .comment-area,
.page-template-page-about_me-php .article-footer,
.privacy-policy .sns-share,
.privacy-policy .related-entries,
.privacy-policy .pager-post-navi,
.privacy-policy .comment-area,
.privacy-policy .article-footer,
.page-privacy-policy .sns-share,
.page-privacy-policy .related-entries,
.page-privacy-policy .pager-post-navi,
.page-privacy-policy .comment-area,
.page-privacy-policy .article-footer,
.page-template-page-privacy-policy-php .sns-share,
.page-template-page-privacy-policy-php .related-entries,
.page-template-page-privacy-policy-php .pager-post-navi,
.page-template-page-privacy-policy-php .comment-area,
.page-template-page-privacy-policy-php .article-footer,
.page-played_scenarios .sns-share,
.page-played_scenarios .related-entries,
.page-played_scenarios .pager-post-navi,
.page-played_scenarios .comment-area,
.page-played_scenarios .article-footer,
.page-original_scenarios .sns-share,
.page-original_scenarios .related-entries,
.page-original_scenarios .pager-post-navi,
.page-original_scenarios .comment-area,
.page-original_scenarios .article-footer,
.page-template-page-played_scenarios-php .sns-share,
.page-template-page-played_scenarios-php .related-entries,
.page-template-page-played_scenarios-php .pager-post-navi,
.page-template-page-played_scenarios-php .comment-area,
.page-template-page-played_scenarios-php .article-footer,
.page-template-page-original_scenarios-php .sns-share,
.page-template-page-original_scenarios-php .related-entries,
.page-template-page-original_scenarios-php .pager-post-navi,
.page-template-page-original_scenarios-php .comment-area,
.page-template-page-original_scenarios-php .article-footer,
.page-contact .sns-share,
.page-contact .related-entries,
.page-contact .pager-post-navi,
.page-contact .comment-area,
.page-contact .article-footer,
.page-template-page-contact-php .sns-share,
.page-template-page-contact-php .related-entries,
.page-template-page-contact-php .pager-post-navi,
.page-template-page-contact-php .comment-area,
.page-template-page-contact-php .article-footer{
  display: none;
}


/* =========================
   scenario coming soon pages
========================= */

.c-coming-soon{
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 108px) 0;
  color: #22322b;
  text-align: center;
}

.c-coming-soon__eyebrow{
  margin: 0 0 8px;
  color: #5d7374;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-coming-soon__title{
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.2;
}

.c-coming-soon__label{
  margin: 22px 0 0;
  color: #236d74;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
}

.c-coming-soon__lead{
  max-width: 560px;
  margin: 16px auto 0;
  color: #415251;
  font-size: 1rem;
  line-height: 1.9;
}

.c-coming-soon__extra{
  width: min(640px, 100%);
  margin: 28px auto 0;
}

.c-played-scenarios-page{
  color: #22322b;
}

.c-played-scenarios-hero{
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.c-played-scenarios-hero__eyebrow{
  margin: 0 0 8px;
  color: #5d7374;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-played-scenarios-hero__title{
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.2;
}

.c-played-scenarios-hero__lead{
  max-width: 560px;
  margin: 16px auto 0;
  color: #415251;
  font-size: 1rem;
  line-height: 1.9;
}

.c-played-scenarios-status-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 36px;
}

.c-played-scenarios-status-nav__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(90, 178, 186, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #236d74;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.4;
  box-sizing: border-box;
}

.c-played-scenarios-status-nav__button.is-active{
  border-color: rgba(90, 178, 186, 0.6);
  background: #5ab2ba;
  color: #fffdf7;
}

.c-played-scenarios-timeline{
  display: grid;
  gap: 34px;
}

.c-played-scenarios-year{
  display: grid;
  gap: 16px;
}

.c-played-scenarios-year__heading{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(90, 178, 186, 0.24);
}

.c-played-scenarios-year__heading h2{
  margin: 0;
  color: #236d74;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1;
}

.c-played-scenarios-year__heading span{
  color: #5d7374;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-played-scenarios-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.c-played-scenario-card{
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-left: 6px solid #5ab2ba;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.c-played-scenario-card__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c-played-scenario-card__date{
  margin: 0;
  color: #5d7374;
  font-size: 0.9rem;
  font-weight: 700;
}

.c-played-scenario-card__status{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(90, 178, 186, 0.16);
  color: #236d74;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-played-scenario-card__status.is-planned{
  background: rgba(245, 185, 74, 0.18);
  color: #86601d;
}

.c-played-scenario-card__status.is-wanted{
  background: rgba(255, 130, 130, 0.16);
  color: #8e4444;
}

.c-played-scenario-card__title{
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.35;
}

.c-played-scenario-card__system{
  margin: -8px 0 0;
  color: #5d7374;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

.c-played-scenario-card__pc{
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(90, 178, 186, 0.08);
  color: #22322b;
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.c-played-scenario-card__pc span{
  margin-right: 0.8em;
  color: #5d7374;
  font-size: 0.78rem;
  font-weight: 700;
}

.c-contact-x{
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.c-contact-x__link{
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  gap: 14px;
  color: #22322b;
  text-decoration: none;
  transition: transform .22s ease;
}

.c-contact-x__link:hover,
.c-contact-x__link:focus-visible{
  transform: translateY(-2px);
}

.c-contact-x__avatar{
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  overflow: hidden;
  border: 4px solid #5AB2BA;
  border-radius: 50%;
  background: #fffdf7;
}

.c-contact-x__avatar img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-contact-x__avatar-fallback{
  color: #5AB2BA;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.c-contact-x__name{
  color: #236d74;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 800;
  line-height: 1.2;
}

.c-contact-x__body{
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

.c-contact-x__service{
  display: inline-flex;
  align-items: center;
}

.c-contact-x__service-mark{
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
}


/* =========================
   page-privacy-policy.php
========================= */

.c-privacy-policy-page{
  color: #22322b;
}

.c-privacy-policy{
  width: min(880px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  box-sizing: border-box;
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(78, 127, 133, 0.06);
}

.c-privacy-policy__header{
  margin-bottom: 28px;
  text-align: center;
}

.c-privacy-policy__eyebrow{
  margin: 0 0 8px;
  color: #5d7374;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-privacy-policy__title{
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.2;
}

.c-privacy-policy__lead{
  margin: 18px 0 0;
  color: #415251;
  font-size: 1rem;
  line-height: 1.9;
  text-align: left;
}

.c-privacy-policy__updated{
  margin: 16px 0 0;
  color: #6e7776;
  font-size: 0.88rem;
}

.c-privacy-policy__body{
  border-top: 1px solid rgba(34, 50, 43, 0.16);
}

.c-privacy-policy__section{
  padding: 26px 0;
  border-bottom: 1px solid rgba(34, 50, 43, 0.12);
}

.c-privacy-policy__section h2{
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.4;
}

.c-privacy-policy__section p,
.c-privacy-policy__section li{
  color: #344341;
  font-size: 0.98rem;
  line-height: 1.9;
}

.c-privacy-policy__section p{
  margin: 0;
}

.c-privacy-policy__section p + p{
  margin-top: 12px;
}

.c-privacy-policy__section ul{
  margin: 10px 0 0;
  padding-left: 1.35em;
}

.c-privacy-policy__section a{
  color: #236d74;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media screen and (max-width: 640px){
  .c-privacy-policy{
    padding: 24px 18px;
    border-radius: 18px;
  }

  .c-privacy-policy__header{
    text-align: left;
  }

  .c-privacy-policy__lead{
    margin-top: 16px;
  }
}


/* =========================
   archive-character.php
========================= */

.c-character-archive-wrap{
  width: 100%;
}

.c-character-archive-inner{
  width: 100%;
  background: transparent;
}

.c-character-archive-header{
}

.c-character-archive-header h1{
  font-size: 2.2rem;
  line-height: 1.2;
}

.c-character-archive-header p{
  margin: 0;
  color: #666;
}

.c-character-filter{
  width: 100%;
}

html.is-character-archive-page{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.c-character-filter__details{
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
  overflow: hidden;
}

.c-character-filter__summary{
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: #22322b;
  cursor: pointer;
  list-style: none;
}

.c-character-filter__summary::-webkit-details-marker{
  display: none;
}

.c-character-filter__panel{
  display: grid;
  gap: 20px;
  padding: 0 22px 22px;
}

.c-character-filter__group{
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-character-filter__label{
  display: block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #425d5e;
}

.c-character-filter__section{
  min-width: 0;
  border: 1px solid rgba(104, 173, 180, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.c-character-filter__section-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #425d5e;
  cursor: pointer;
  list-style: none;
}

.c-character-filter__section-summary::-webkit-details-marker{
  display: none;
}

.c-character-filter__section-summary::after{
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid #5ab2ba;
  border-bottom: 2px solid #5ab2ba;
  transform: rotate(45deg);
  transition: transform .18s ease, margin-top .18s ease;
  flex: 0 0 auto;
}

.c-character-filter__section[open] .c-character-filter__section-summary::after{
  margin-top: 6px;
  transform: rotate(225deg);
}

.c-character-filter__section-title{
  font-size: 0.92rem;
  font-weight: 700;
}

.c-character-filter__section > .c-character-filter__group{
  padding: 0 16px 16px;
}

.c-character-filter__search{
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(104, 173, 180, 0.28);
  border-radius: 14px;
  background: #fff;
  color: #22322b;
  box-sizing: border-box;
}

.c-character-filter__options{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}

.c-character-filter__subgroup + .c-character-filter__subgroup{
  margin-top: 14px;
}

.c-character-filter__subheading{
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #5a7374;
}

.c-character-filter__option{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #425d5e;
}

.c-character-filter__option input{
  margin: 0;
}

.c-character-filter__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: flex-end;
}

.c-character-filter__submit,
.c-character-filter__reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(104, 173, 180, 0.28);
  border-radius: 999px;
  color: #22322b;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}

.c-character-filter__submit{
  background: #83d2d9;
  cursor: pointer;
}

.c-character-filter__reset{
  background: rgba(255, 255, 255, 0.92);
}

.c-character-filter__empty{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  color: #425d5e;
}

.c-character-grid{
  gap: 24px;
}

.c-character-card{
  background:
    linear-gradient(180deg, var(--character-card-bg-soft, rgba(255, 255, 255, 0.96)), rgba(255, 255, 255, 0.96));
  border: 1px solid var(--character-card-bg-strong, #ece7ea);
  border-radius: 14px;
  aspect-ratio: 1 / 1.5;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.c-character-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  border-color: #ddd1d8;
}

.c-character-card a{
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(5.6rem, 1fr);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.c-character-card-thumb{
  background: linear-gradient(180deg, var(--character-card-bg-soft, #f8f5f6) 0%, var(--character-card-bg-strong, #f1f3f7) 100%);
  min-height: 0;
}

.c-character-card-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.78));
}

.c-character-card-thumb.is-featured-image img{
  object-fit: contain;
  object-position: center center;
}

.c-character-card-noimage{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--character-card-bg-soft, #f8f5f6) 0%, var(--character-card-bg-strong, #f1f3f7) 100%);
  color: #6e7d82;
  padding: 16px 12px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.c-character-card-noimage__media{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
  min-height: 0;
}

.c-character-card-noimage .c-character-card-noimage__avatar{
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 180px);
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: grayscale(1);
  opacity: 0.45;
}

.c-character-card-noimage__label{
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  color: inherit;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.c-character-card-body{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 4px;
  min-height: 0;
  overflow: hidden;
}

.c-character-card-title{
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 700;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-character-card-tags{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 6px;
  row-gap: 0;
}

.c-character-card-tag{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(103, 114, 138, 0.16);
  background: var(--tag-marker, rgba(249, 250, 251, 0.92));
  color: var(--tag-text, #5a6473);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: uppercase;
}

.c-character-card-tag.is-system{
  border-color: rgba(83, 130, 135, 0.2);
  background: var(--tag-marker, rgba(227, 242, 243, 0.96));
  color: var(--tag-text, #42656c);
}

.c-character-card-excerpt{
  display: none;
}

.c-character-archive-card{
  opacity: 0;
  transform: translateY(18px);
}

.c-character-archive-card.is-visible{
  animation: c-character-archive-card-in var(--reveal-duration, .72s) ease forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

.c-character-pagination{
}

@keyframes c-character-archive-card-in{
  from{
    opacity: 0;
    transform: translateY(18px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   utility
========================= */

.u-page-inner{
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.u-character-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  align-items: start;
}

.u-grid-full{
  grid-column: 1 / -1;
}

.u-grid-main{
  grid-column: 1;
}

.u-grid-side{
  grid-column: 2;
}

.u-flex-col{
  display: flex;
  flex-direction: column;
}

.u-gap-12{
  gap: 12px;
}

.u-gap-18{
  gap: 18px;
}

.u-gap-10{
  gap: 10px;
}

.u-gap-20{
  gap: 20px;
}

.u-gap-14{
  gap: 14px;
}

.u-gap-16{
  gap: 16px;
}

.u-gap-24{
  gap: 24px;
}

.u-stack-32 > * + *{
  margin-top: 32px;
}

.u-grid-3cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-grid-4cols{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.u-grid-responsive-2-1{
}

.u-grid-responsive-3-1{
}

.u-items-center{
  align-items: center;
}

.u-center-x{
  display: flex;
  justify-content: center;
}

.u-detail-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: stretch;
}

.u-detail-grid__main{
  grid-column: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.u-detail-grid__side{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.u-detail-grid__side-visual,
.u-detail-grid__side-actions{
  width: 100%;
}

.u-detail-grid__spacer{
  min-height: 15px;
  flex: 1 1 auto;
}

.u-mb-0{
  margin-bottom: 0;
}

.u-mb-4px{
  margin-bottom: 4px;
}

.u-mb-5px{
  margin-bottom: 5px;
}

.u-mb-8px{
  margin-bottom: 8px;
}

.u-mb-10px{
  margin-bottom: 10px;
}

.u-mb-12px{
  margin-bottom: 12px;
}

.u-mb-14px{
  margin-bottom: 14px;
}

.u-mb-15px{
  margin-bottom: 15px;
}

.u-mb-18px{
  margin-bottom: 18px;
}

.u-mb-24px{
  margin-bottom: 24px;
}

.u-mb-32px{
  margin-bottom: 32px;
}

.u-mb-40px{
  margin-bottom: 40px;
}

.u-mb-08em{
  margin-bottom: 0.8em;
}

.u-m-0{
  margin: 0;
}

.u-flex-1-auto{
  flex: 1 1 auto;
}

.u-position-ab{
  position: absolute;
}

.u-position-fix{
  position: fixed;
}

.u-position-rel{
  position: relative;
}

.u-bottom-10px{
  bottom: 10px;
}

.u-bottom-16px{
  bottom: 16px;
}

.u-right-4vw{
  right: 4vw;
}

.u-right-16px{
  right: 16px;
}

.u-z-index-1{
  z-index: 1;
}

.u-z-index-2{
  z-index: 2;
}

.u-display-contents{
  display: contents;
}

.u-display-block{
  display: block;
}

.u-display-inline{
  display: inline;
}

.u-display-grid{
  display: grid;
}

.u-display-flex{
  display: flex;
}

.u-display-inline-grid{
  display: inline-grid;
}

.u-display-inline-flex{
  display: inline-flex;
}

.u-display-inline-block{
  display: inline-block;
}

.u-place-items-c{
  place-items: center;
}

.u-ai-c{
  align-items: center;
}

.u-ai-baseline{
  align-items: baseline;
}

.u-jc-c{
  justify-content: center;
}

.u-jc-sb{
  justify-content: space-between;
}

.u-jc-fe{
  justify-content: flex-end;
}

.u-jc-fs{
  justify-content: flex-start;
}

.u-flex-wrap{
  flex-wrap: wrap;
}

.u-ai-fs{
  align-items: flex-start;
}

.u-font-size-0_76rem{
  font-size: 0.76rem;
}

.u-font-size-0_88rem{
  font-size: 0.88rem;
}

.u-font-size-0_9rem{
  font-size: 0.9rem;
}

.u-font-size-0_95rem{
  font-size: 0.95rem;
}

.u-font-size-0_96rem{
  font-size: 0.96rem;
}

.u-font-size-1_0rem{
  font-size: 1rem;
}

.u-font-size-1_08rem{
  font-size: 1.08rem;
}

.u-font-size-1_14rem{
  font-size: 1.14rem;
}

.u-font-size-1_16rem{
  font-size: 1.16rem;
}

.u-font-size-1_3rem{
  font-size: 1.3rem;
}

.u-font-size-14px{
  font-size: 14px;
}

.u-fw-200{
  font-weight: 200;
}

.u-fw-500{
  font-weight: 500;
}

.u-fw-600{
  font-weight: 600;
}

.u-fw-700{
  font-weight: 700;
}

.u-lh-1{
  line-height: 1;
}

.u-lh-1_15{
  line-height: 1.15;
}

.u-lh-14{
  line-height: 1.4;
}

.u-lh-15{
  line-height: 1.5;
}

.u-lh-17{
  line-height: 1.7;
}

.u-lh-19{
  line-height: 1.9;
}

.u-lh-195{
  line-height: 1.95;
}

.u-ta-c{
  text-align: center;
}

.u-ta-l{
  text-align: left;
}

.u-ta-r{
  text-align: right;
}

.u-va-m{
  vertical-align: middle;
}

.u-ws-nowrap{
  white-space: nowrap;
}

.u-break-word{
  word-break: break-word;
}

.u-gap-0_18em{
  gap: 0.18em;
}

.u-gap-0_36em{
  gap: 0.36em;
}

.u-mt-0{
  margin-top: 0;
}

.u-mt-5px{
  margin-top: 5px;
}

.u-mt-8px{
  margin-top: 8px;
}

.u-mt-10px{
  margin-top: 10px;
}

.u-mt-12px{
  margin-top: 12px;
}

.u-mt-20px{
  margin-top: 20px;
}

.u-mt-24px{
  margin-top: 24px;
}

.u-mt-32px{
  margin-top: 32px;
}

.u-mt-56px{
  margin-top: 56px;
}

.u-mr-0{
  margin-right: 0;
}

.u-ml-0{
  margin-left: 0;
}

.u-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.u-ml-n18px{
  margin-left: -18px;
}

.u-maxw-220px{
  max-width: 220px;
}

.u-maxw-36em{
  max-width: 36em;
}

.u-maxw-42rem{
  max-width: 42rem;
}

.u-maxw-44rem{
  max-width: 44rem;
}

.u-maxw-420px{
  max-width: 420px;
}

.u-maxw-600px{
  max-width: 600px;
}

.u-maxw-full{
  max-width: 100%;
}

.u-minw-0{
  min-width: 0;
}

.u-minw-350px{
  min-width: 350px;
}

.u-minh-0{
  min-height: 0;
}

.u-minh-44px{
  min-height: 44px;
}

.u-minh-60px{
  min-height: 60px;
}

.u-minh-280px{
  min-height: 280px;
}

.u-minh-520px{
  min-height: 520px;
}

.u-minh-slider{
  min-height: clamp(520px, 78vh, 920px);
}

.u-w-66px{
  width: 66px;
}

.u-w-120px{
  width: 120px;
}

.u-w-auto{
  width: auto;
}

.u-w-full{
  width: 100%;
}

.u-h-66px{
  height: 66px;
}

.u-h-600px{
  height: 600px;
}

.u-h-auto{
  height: auto;
}

.u-h-full{
  height: 100%;
}

.u-maxh-600px{
  max-height: 600px;
}

.u-maxh-full{
  max-height: 100%;
}

.u-p-0{
  padding: 0;
}

.u-p-8px{
  padding: 8px;
}

.u-p-28px{
  padding: 28px;
}

.u-pt-40px{
  padding-top: 40px;
}

.u-pr-10px{
  padding-right: 10px;
}

.u-pt-5px{
  padding-top: 5px;
}

.u-pb-5px{
  padding-bottom: 5px;
}

.u-pt-6px{
  padding-top: 6px;
}

.u-pb-6px{
  padding-bottom: 6px;
}

.u-pt-16px{
  padding-top: 16px;
}

.u-pb-16px{
  padding-bottom: 16px;
}

.u-pb-12px{
  padding-bottom: 12px;
}

.u-pt-12px{
  padding-top: 12px;
}

.u-pb-14px{
  padding-bottom: 14px;
}

.u-pt-14px{
  padding-top: 14px;
}

.u-pt-15px{
  padding-top: 15px;
}

.u-pb-15px{
  padding-bottom: 15px;
}

.u-pl-4px{
  padding-left: 4px;
}

.u-pr-4px{
  padding-right: 4px;
}

.u-pl-8px{
  padding-left: 8px;
}

.u-pl-10px{
  padding-left: 10px;
}

.u-pl-12px{
  padding-left: 12px;
}

.u-pl-14px{
  padding-left: 14px;
}

.u-pl-16px{
  padding-left: 16px;
}

.u-pr-12px{
  padding-right: 12px;
}

.u-pr-14px{
  padding-right: 14px;
}

.u-pr-16px{
  padding-right: 16px;
}

.u-pl-18px{
  padding-left: 18px;
}

.u-pr-18px{
  padding-right: 18px;
}

.u-pb-18px{
  padding-bottom: 18px;
}

.u-pb-20px{
  padding-bottom: 20px;
}

.u-pt-20px{
  padding-top: 20px;
}

.u-pb-24px{
  padding-bottom: 24px;
}

.u-pt-24px{
  padding-top: 24px;
}

.u-pl-22px{
  padding-left: 22px;
}

.u-pr-22px{
  padding-right: 22px;
}

.u-pl-24px{
  padding-left: 24px;
}

.u-pr-24px{
  padding-right: 24px;
}

.u-pl-26px{
  padding-left: 26px;
}

.u-pr-26px{
  padding-right: 26px;
}

.u-pb-28px{
  padding-bottom: 28px;
}

.u-pt-28px{
  padding-top: 28px;
}

.u-pr-28px{
  padding-right: 28px;
}

.u-pl-30px{
  padding-left: 30px;
}

.u-pb-30px{
  padding-bottom: 30px;
}

.u-pt-30px{
  padding-top: 30px;
}

.u-pr-30px{
  padding-right: 30px;
}

.u-pb-64px{
  padding-bottom: 64px;
}

.u-pb-72px{
  padding-bottom: 72px;
}

.u-text-center{
  text-align: center;
}

.u-bg-transparent{
  background: transparent;
}

.u-br-0{
  border-radius: 0;
}

.u-overflow-visible{
  overflow: visible;
}

.u-shadow-none{
  box-shadow: none;
}

.u-title-underline::after{
  width: 80px;
  height: 0;
  margin-top: 14px;
}

.u-tag-list-box{
  width: min(420px, calc(100vw - 100% - 40px));
}

.u-image-color-inline{
  display: flex;
  justify-content: flex-end;
  gap: 0.35em;
}

.u-flow-1em > * + *{
  margin-top: 1em;
}

.u-intro-box{
  width: min(clamp(340px, 40vw, 520px), calc(100vw - 48px));
}

.u-intro-box::before{
  width: auto;
}

.u-intro-box::after{
  width: calc(100% + clamp(42px, 4.2vw, 92px) - 36px);
  height: 50%;
}

.u-shell-1280{
  width: min(1280px, calc(100% - 32px));
}

.u-grid-cards-220{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.u-front-hero-panel::before{
  width: 340px;
  height: 340px;
}

.u-front-hero-panel::after{
  width: 280px;
  height: 280px;
}

.u-front-speech-ornament::before,
.u-front-speech-ornament::after{
  width: 108px;
  height: 24px;
}

.u-front-visual-frame{
  width: min(100%, 570px);
  min-height: 760px;
}

.u-front-visual-media{
  min-height: 736px;
}

.u-pl-shifted{
  padding-left: 2.4em;
}

@media screen and (max-width: 1023px){
  .u-order-1-md{ order: 1; }
  .u-order-2-md{ order: 2; }
  .u-order-3-md{ order: 3; }
  .u-order-4-md{ order: 4; }
  .u-order-5-md{ order: 5; }
  .u-order-6-md{ order: 6; }
  .u-order-7-md{ order: 7; }
  .u-h-360px-md{ height: 360px; }
  .u-position-st-md{ position: static; }
  .u-pl-3px-md{
    padding-left: 3px;
  }
  .u-pl-6px-md{
    padding-left: 6px;
  }
  .u-pr-3px-md{
    padding-right: 3px;
  }
  .u-pr-6px-md{
    padding-right: 6px;
  }
  .u-font-size-0_48rem-md{
    font-size: 0.48rem;
  }
  .u-font-size-0_72rem-md{
    font-size: 0.72rem;
  }
  .u-font-size-0_86rem-md{
    font-size: 0.86rem;
  }
  .u-lh-135-md{
    line-height: 1.35;
  }
  .u-mb-2px-md{
    margin-bottom: 2px;
  }
  .u-mb-8px-md{
    margin-bottom: 8px;
  }
  .u-mb-10px-md{
    margin-bottom: 10px;
  }
  .u-mt-n28px-md{
    margin-top: -28px;
  }
  .u-mt-12px-md{
    margin-top: 12px;
  }
  .u-pb-4px-md{
    padding-bottom: 4px;
  }
  .u-pl-10px-md{
    padding-left: 10px;
  }
  .u-pr-16px-md{
    padding-right: 16px;
  }
  .u-pl-20px-md{
    padding-left: 20px;
  }
  .u-pr-20px-md{
    padding-right: 20px;
  }
  .u-w-full-sm{
    width: 100%;
  }
  .u-pb-24px-md{
    padding-bottom: 24px;
  }
  .u-pt-8px-md{
    padding-top: 8px;
  }
  .u-pt-24px-md{
    padding-top: 24px;
  }
  .u-position-st-md{
    position: static;
  }
  .u-jc-c-md{
    justify-content: center;
  }
  .u-ai-c-md{
    align-items: center;
  }
  .u-top-n32px-md{
    top: -32px;
  }
  .u-right-42px-md{
    right: 42px;
  }
  .u-bottom-auto-md{
    bottom: auto;
  }
  .u-intro-box{
    width: min(92%, 420px);
    max-width: 420px;
  }

  .u-intro-box::before{
    height: var(--character-mobile-note-height);
  }

  .u-intro-box::after{
    width: calc(100% - 8px);
    height: var(--character-mobile-note-height);
  }
  .u-visual-column-frame{
    width: 100%;
    max-width: 600px;
  }
  .u-title-underline::after{
    margin-left: auto;
    margin-right: auto;
  }

  .u-tag-list-box{
    width: auto;
  }
}

@media screen and (max-width: 480px){
  .u-minw-0-sm{
    min-width: 0;
  }

  .u-ml-0-sm{
    margin-left: 0;
  }

  .u-pt-22px-sm{
    padding-top: 22px;
  }

  .u-pb-22px-sm{
    padding-bottom: 22px;
  }

  .u-pb-24px-sm{
    padding-bottom: 24px;
  }

  .u-pl-20px-sm{
    padding-left: 20px;
  }

  .u-pr-20px-sm{
    padding-right: 20px;
  }

  .u-pt-18px-sm{
    padding-top: 18px;
  }

  .u-pt-28px-sm{
    padding-top: 28px;
  }

  .u-pb-48px-sm{
    padding-bottom: 48px;
  }

  .u-pb-52px-sm{
    padding-bottom: 52px;
  }

  .u-pt-12px-sm{
    padding-top: 12px;
  }

  .u-pb-12px-sm{
    padding-bottom: 12px;
  }

  .u-pl-14px-sm{
    padding-left: 14px;
  }

  .u-pr-14px-sm{
    padding-right: 14px;
  }

  .u-p-0-sm{
    padding: 0;
  }

  .u-w-110px-sm{
    width: 110px;
  }

  .u-front-visual-frame{
    width: min(100%, 420px);
    min-height: 560px;
  }

  .u-front-hero-panel{
    border-radius: 24px;
  }

  .u-pl-shifted{
    padding-left: 1.8em;
  }

  .u-w-34px-sm{
    width: 34px;
  }

  .u-h-34px-sm{
    height: 34px;
  }

  .u-mb-20px-sm{
    margin-bottom: 20px;
  }

  .u-w-50px-sm{
    width: 50px;
  }

  .u-h-50px-sm{
    height: 50px;
  }
}

@media screen and (min-width: 1024px){
  .u-h-700px-lg{
    height: 700px;
  }

  .u-minh-700px-lg{
    min-height: 700px;
  }

  .u-maxh-700px-lg{
    max-height: 700px;
  }
}

/* =========================
   single-character.php
========================= */

.c-character-intro{
  grid-column: 1 / -1;
  grid-row: 1;
  --character-note-paper-main: #f5f5f5;
  --character-note-paper-edge: rgba(225, 225, 225, 0.95);
  --character-note-tip-color: #2589d0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "ruby"
    "title"
    "image";
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  justify-self: start;
  left: 32px;
}

.c-character-intro > *{
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

.c-character-intro::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  left: calc(-0.5 * clamp(42px, 4.2vw, 92px));
  background: var(--character-note-paper-main);
  border-top: 1px solid var(--character-note-paper-edge);
  border-right: clamp(66px, 6.6vw, 90px) solid var(--character-note-tip-color);
  border-bottom: 1px solid var(--character-note-paper-edge);
  border-left: 1px solid var(--character-note-paper-edge);
  border-radius: 0;
  box-shadow: none;
  transform: rotate(-1.2deg);
  transform-origin: right center;
  z-index: -1;
}

.c-character-intro::after{
  content: "";
  position: absolute;
  right: -10px;
  bottom: 8px;
  z-index: -2;
  transform: rotate(3deg);
  background-color: rgba(208, 208, 208, 0.88);
  filter: blur(6px);
}

.c-summary-card{
  grid-column: 1;
  grid-row: 2;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.c-summary-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--character-bg-image);
  background-repeat: no-repeat;
  background-position: center 6%;
  background-size: 110%;
  opacity: 0.14;
  filter: blur(0.5px);
  pointer-events: none;
}

.c-character-layout__visual{
  grid-row: 2 / span 2;
}

.c-character-ruby{
  grid-area: ruby;
  color: #777;
  letter-spacing: 0.08em;
}

.c-character-title{
  grid-area: title;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: 0.04em;
  color: #222;
}

.c-character-title::after{
  content: "";
  display: block;
  background: #999;
}

.c-tag-list{
  top: 50%;
  left: calc(100% + 144px);
  gap: 6px 6px;
  transform: translateY(-50%) rotate(-1.2deg);
  transform-origin: left center;
}

.c-character-image-color{
  grid-area: image;
  color: #666;
  letter-spacing: 0.03em;
  transform: rotate(-1.2deg);
  transform-origin: right center;
}

.c-character-image-color-label{
  color: #777;
}

.c-character-image-color-code{
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  color: #333;
}

.c-tag-list a{
  border-radius: 0;
  background:
    repeating-linear-gradient(
      87deg,
      rgba(255, 255, 255, 0.16) 0 3px,
      rgba(255, 255, 255, 0.03) 3px 8px,
      rgba(255, 255, 255, 0.14) 8px 11px
    ),
    linear-gradient(
      182deg,
      transparent 6%,
      color-mix(in srgb, var(--tag-marker, rgba(255, 243, 110, 0.92)) 78%, white 22%) 6%,
      var(--tag-marker, rgba(255, 243, 110, 0.92)) 38%,
      color-mix(in srgb, var(--tag-marker, rgba(255, 243, 110, 0.92)) 92%, white 8%) 72%,
      transparent 94%
    ),
    linear-gradient(
      transparent 12%,
      var(--tag-marker, rgba(255, 243, 110, 0.92)) 10%,
      var(--tag-marker, rgba(255, 243, 110, 0.92)) 88%,
      transparent 92%
    );
  color: var(--tag-text, #444);
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: filter .2s ease;
}

.c-tag-list a:hover{
  filter: brightness(0.96) saturate(1.05);
}

.c-summary-heading{
  color: #222;
}

.c-summary-body{
  color: #555;
}

/* 要素2：プロフィール表 */
.c-profile-table h2{
  color: #222;
}

.c-profile-table table{
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #444;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
}

.c-profile-table tbody tr:nth-child(odd) th,
.c-profile-table tbody tr:nth-child(odd) td{
  background: var(--character-profile-accent-color, #bfeff2);
}

.c-profile-table tbody tr:nth-child(even) th,
.c-profile-table tbody tr:nth-child(even) td{
  background: #fff;
}

.c-profile-table tbody tr:not(:last-child) th,
.c-profile-table tbody tr:not(:last-child) td{
  border-bottom: 1px solid rgba(0,0,0,0.18);
}

.c-profile-table th{
  color: #666;
  letter-spacing: 0.04em;
}

.c-profile-table td{
  color: #222;
}

.c-profile-table td a{
  color: #222;
}

/* 要素3：キャラシートボタン */
.c-action-links a,
.c-back-link a{
  border-radius: 999px;
  background: var(--character-link-accent-color, #f4b6c2);
  color: var(--character-link-text-color, #fff);
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

.c-action-links a.c-character-sheet-link{
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
}

.c-action-link__label,
.c-action-link__note{
  display: block;
}

.c-action-link__note{
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.86;
}

.c-action-links a:hover,
.c-back-link a:hover{
  opacity: .9;
  transform: translateY(-1px);
}

.c-report-section h2,
.c-credit-section h2{
  color: #222;
}

.c-credit-list{
  max-width: 100%;
}

.c-credit-row{
  grid-template-columns: max-content max-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.c-credit-role{
  min-width: 0;
  color: #666;
}

.c-credit-value{
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  color: #333;
}

.c-credit-value a,
.c-credit-value > span:not(.c-credit-honorific){
  overflow-wrap: anywhere;
}

.c-credit-value a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.c-character-report-slider{
}

.c-character-report-slider .c-slider__track,
.c-character-report-slider .c-slider__slide{
}

.c-character-report-slider .c-slider__slide{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.c-character-report-slider .c-slider__slide img{
}

.c-credit-card{
  border: 1px solid #e6e0e3;
  border-radius: 24px;
  background: rgba(255,255,255,0.84);
  color: #555;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.c-credit-names{
  color: #333;
}

.c-credit-names a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.c-noimage{
  background: #e5e5e5;
  color: #777;
  letter-spacing: .05em;
}

.c-noimage--character-detail{
  background: transparent;
  color: #6e7d82;
  padding: 24px 0;
  box-sizing: border-box;
}

.c-noimage__media{
  flex: 1 1 auto;
  min-height: 0;
}

.c-noimage__avatar{
  width: auto;
  height: auto;
  max-width: min(100%, 460px);
  max-height: 100%;
  filter: grayscale(1);
  opacity: 0.45;
}

.c-noimage__label{
  color: inherit;
  letter-spacing: 0.08em;
}

/* --- slider --- */
.c-slider__viewport{
  background: transparent;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.c-slider.is-dragging .c-slider__viewport{
  cursor: grabbing;
}

.c-slider__track{
  transition: transform .45s ease;
  will-change: transform;
}

.c-slider__slide{
  flex: 0 0 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.c-slider__slide img{
  display: block;
  object-fit: contain;
  transform: translate(var(--character-image-offset-x, 0), var(--character-image-offset-y, 0));
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.16));
}

.u-detail-grid__side .c-slider__slide{
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-detail-grid__side .c-slider__slide img{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.page-about_me .u-detail-grid__side .c-slider__viewport,
.page-template-page-about_me-php .u-detail-grid__side .c-slider__viewport{
  display: flex;
  align-items: center;
}

.page-about_me .u-detail-grid__side .c-slider__track,
.page-template-page-about_me-php .u-detail-grid__side .c-slider__track{
  width: 100%;
  min-height: inherit;
  align-items: center;
}

.page-about_me .u-detail-grid__side .c-slider__slide,
.page-template-page-about_me-php .u-detail-grid__side .c-slider__slide{
  min-height: inherit;
}

.c-slider__arrow{
  display: none;
}

.c-slider__thumbs{
  right: 18px;
  z-index: 3;
  flex-direction: column;
  gap: 14px;
  background: transparent;
}

.c-slider__thumb{
  border: 3px solid var(--character-slider-accent-color, rgba(255,255,255,0.82));
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  backdrop-filter: blur(6px);
  opacity: .52;
  filter: saturate(.72) brightness(.78);
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}

.c-slider__thumb:hover{
  opacity: .72;
  transform: translateX(-2px) scale(1.04);
}

.c-slider__thumb img{
  object-fit: cover;
}

.c-slider__thumb.is-active{
  border-color: var(--character-slider-accent-color, #6b87a8);
  background: rgba(255,255,255,0.3);
  box-shadow: 0 12px 24px rgba(38, 62, 88, 0.22);
  opacity: 1;
  filter: none;
  transform: scale(1.08);
}

/* 出身シナリオの欄の表示 */
.c-character-spoiler{
  display: inline-block;
}

.c-character-spoiler-trigger{
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #444;
  font: inherit;
  cursor: pointer;
}

.c-character-spoiler-label{
  display: inline-block;
  padding: 0.16em 0.48em;
  border-radius: 0.36em;
  background: #111;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.c-character-spoiler-content{
  display: inline;
}

.c-character-spoiler-content[hidden]{
  display: none;
}

.c-character-spoiler.is-revealed,
.c-character-spoiler.is-revealed .c-character-spoiler-content{
  display: inline;
}

.c-character-spoiler-content a{
  color: #222;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}



/* =========================
   custom header
========================= */

#header-container{
  height: 65px;
}

#header-container,
#header-container-in{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header-container > #header:not(.c-header){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.c-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2105;
  background: #83d2d9;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(66, 93, 94, 0.14);
}

.admin-bar .c-header{
  top: 32px;
}

#header.c-header .c-header__inner{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-content: space-between;
  width: min(1280px, calc(100% - 32px));
  min-height: 64px;
  margin: 0 auto;
}

.c-header__spacer{
  width: 44px;
  height: 44px;
}

.c-header__title{
  min-width: 0;
  text-align: center;
  justify-self: center;
}

.c-header__title a{
  color: #22322b;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.c-header__toggle{
  position: relative;
  z-index: 2106;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  justify-self: end;
}

.c-header__toggle span{
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: #22322b;
  transition: transform .25s ease, opacity .25s ease;
}

.c-header__toggle[aria-expanded="true"] span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.c-header__toggle[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}

.c-header__toggle[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

.c-header__overlay{
  display: none;
}

.c-header__drawer{
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 2103;
  display: block;
  width: 100%;
  max-height: 0;
  padding: 0 0 0;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(246,251,251,0.99) 100%);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: max-height .32s ease, transform .3s ease, opacity .24s ease, visibility .24s ease;
}

.c-header__drawer.is-open{
  max-height: 520px;
  padding: 0;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.admin-bar .c-header__drawer{
  top: 96px;
}

.c-header__drawer-inner{
  display: grid;
  gap: 0;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
}

.c-header__drawer-section{
  display: grid;
  gap: 0;
}

@media screen and (max-width: 782px){

  .admin-bar .c-header{
    top: 46px;
  }

  .admin-bar .c-header__drawer{
    top: 110px;
  }

  .c-header__drawer{
    top: 64px;
  }

  .c-header__drawer-inner{
    width: calc(100% - 32px);
  }
}

.c-header__menu,
.c-header__drawer .menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-header__menu li,
.c-header__drawer .menu li{
  list-style: none;
}

.c-header__menu li + li,
.c-header__drawer .menu li + li{
  margin-top: 0;
}

.c-header__menu--drawer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.c-header__menu--drawer li{
  position: relative;
  transition: background-color .2s ease;
}

.c-header__menu--drawer a,
.c-header__drawer .menu a{
  display: block;
  color: #22322b;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  border-bottom: 0;
  white-space: nowrap;
  transition: color .2s ease;
  position: relative;
}

.c-header__menu li:last-child a,
.c-header__drawer .menu li:last-child a{
  border-bottom: 0;
}

.c-header__menu--drawer li:hover{
  background-color: #83d2d9;
}

.c-header__menu--drawer li:hover > a{
  color: #22322b;
}

.c-header__menu--drawer .current-menu-item > a,
.c-header__menu--drawer .current_page_item > a,
.c-header__menu--drawer .current-menu-parent > a,
.c-header__menu--drawer .current_page_parent > a,
.c-header__drawer .menu .current-menu-item > a,
.c-header__drawer .menu .current_page_item > a,
.c-header__drawer .menu .current-menu-parent > a,
.c-header__drawer .menu .current_page_parent > a{
  color: #22322b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

@media screen and (max-width: 640px){
  .c-header__menu--drawer{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    justify-items: center;
  }

  .c-header__menu--drawer a{
    white-space: normal;
    text-align: center;
  }
}


/* =========================
   character gallery
========================= */

.c-character-gallery-eyebrow{
  margin: 0 0 8px;
  color: #777;
  font-size: .95rem;
  letter-spacing: .08em;
}

.c-character-gallery-title{
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.15;
}

.c-character-gallery-back{
  border-radius: 999px;
  background: #eef3f6;
  color: #334;
  text-decoration: none;
}

.c-character-gallery-item{
    margin-top: 0;
}

.c-character-gallery-grid.is-gallery-reveal-ready .c-character-gallery-item.is-pending-reveal{
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
}

.c-character-gallery-grid.is-gallery-reveal-ready .c-character-gallery-item.is-visible{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition:
      opacity .45s ease,
      transform .52s ease,
      filter .45s ease;
    transition-delay: var(--gallery-reveal-delay, 0ms);
}

.c-character-gallery-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    align-items: start;
}

.c-character-gallery-grid.is-masonry{
    display: block;
    position: relative;
}

.c-character-gallery-grid.is-masonry .c-character-gallery-item{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--gallery-item-width, 220px);
}

.c-character-gallery-image-button{
    display: block;
}

.c-character-gallery-item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}



/* =========================
   focus
========================= */

.c-header__menu a:focus-visible,
.c-header__drawer .menu a:focus-visible,
.c-character-card a:focus-visible,
.c-tag-list a:focus-visible,
.c-action-links a:focus-visible,
.c-header__toggle:focus-visible,
.c-slider__arrow:focus-visible,
.c-slider__thumb:focus-visible{
  outline: 2px solid #6b87a8;
  outline-offset: 3px;
}


/* =========================
   responsive
========================= */

@media screen and (max-width: 1023px){
  .u-character-grid,
  .u-detail-grid{
    grid-template-columns: 1fr;
  }

  .c-character-intro{
    grid-column: auto;
    grid-row: auto;
    --character-mobile-note-height: clamp(60px, 12vw, 124px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "ruby"
      "title"
      "image";
    text-align: center;
    justify-self: center;
    overflow: visible;
    left: 0;
    margin-bottom: 104px;
  }

  .c-character-intro > *{
    transform: rotate(-1.2deg);
    transform-origin: left center;
  }

  .c-character-intro::before{
    display: block;
    top: 0;
    right: 0;
    bottom: auto;
    left: -12px;
    border-right-width: 40px;
    transform: rotate(-1.2deg);
    transform-origin: right center;
  }

  .c-character-intro::after{
    display: block;
    right: 4px;
    top: 8px;
    bottom: auto;
    transform: rotate(2deg);
    filter: blur(5px);
  }

  .c-tag-list{
    position: absolute;
    top: calc(var(--character-mobile-note-height) + 16px);
    left: 50%;
    grid-area: auto;
    width: min(100%, 360px);
    transform: translateX(-50%);
    transform-origin: center center;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .c-character-image-color{
    transform: rotate(-1.2deg);
    transform-origin: right center;
  }

  .u-grid-side,
  .u-detail-grid__side,
  .c-character-layout__visual{
    grid-column: auto;
    grid-row: auto;
  }

  .u-detail-grid__side .c-character-layout__visual{
    margin-top: 0;
  }

  .u-detail-grid__main{
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
  }

  .u-detail-grid__side{
    height: auto;
    gap: 24px;
  }

  .u-detail-grid__spacer{
    display: none;
  }

  .c-summary-card{
    grid-column: auto;
    grid-row: auto;
  }

  .c-character-report-slider .c-slider__slide img{
    transform: none;
  }

  .c-credit-row{
    grid-template-columns: 1fr;
    width: 100%;
    gap: 4px;
    justify-items: center;
  }

  .c-credit-role,
  .c-credit-value{
    text-align: center;
  }

  .c-credit-value{
    justify-content: center;
  }

  .c-slider__main{
    order: 1;
  }

  .u-detail-grid__side .c-slider__thumbs{
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    order: 2;
    width: 100%;
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 20px;
    z-index: auto;
  }

  .u-detail-grid__side .u-minh-slider{
    min-height: 0;
  }

  .single-character .u-detail-grid__side .c-slider:not(.c-character-report-slider) .c-slider__viewport{
    height: 440px;
    min-height: 440px;
    max-height: 440px;
  }

  .c-action-links{
    order: 3;
  }

  .u-detail-grid__side .c-slider__slide img{
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: none;
  }

  .c-slider__slide img{
    transform: translate(var(--character-image-offset-mobile-x, 0), var(--character-image-offset-mobile-y, 0));
  }

}

@media screen and (max-width: 834px){
  .c-character-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .c-character-filter__panel{
    gap: 16px;
    padding: 0 16px 16px;
  }

  .c-character-filter__summary{
    padding: 16px;
  }

  .c-character-filter__options{
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }

  .c-played-scenarios-grid{
    grid-template-columns: 1fr;
  }

  .c-character-archive-header h1{
    font-size: 1.9rem;
  }

  .c-character-title{
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 480px){
  .c-character-archive-wrap{
    padding: 28px 0 48px;
  }

  .c-character-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-character-card-body{
    padding: 12px 14px 16px;
  }

  .c-character-title{
    font-size: 1.4rem;
  }

  .c-slider__arrow{
    font-size: 20px;
  }

  .c-slider__arrow.prev{
    left: 8px;
  }

  .c-slider__arrow.next{
    right: 8px;
  }

  .c-slider__thumbs{
    position: static;
    order: 2;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .u-detail-grid__side .c-slider__thumbs{
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 20px;
    z-index: auto;
  }

  .u-minh-slider{
    min-height: 0;
  }

  .c-character-intro{
    border-radius: 0;
  }

  .c-summary-card{
    border-radius: 18px;
  }
	
  .c-profile-table table{
    border-radius: 16px;
  }

  .c-profile-table th,
  .c-profile-table td{
    display: table-cell;
    border: 0;
  }

  .c-profile-table th{
    white-space: nowrap;
    font-size: 0.74rem;
    vertical-align: middle;
  }

  .c-profile-table td{
    font-size: 0.92rem;
    line-height: 1.65;
    vertical-align: middle;
  }

  .c-profile-table tbody tr:nth-child(odd) th,
  .c-profile-table tbody tr:nth-child(odd) td{
    background: var(--character-profile-accent-color, #bfeff2);
  }

  .c-profile-table tbody tr:nth-child(even) th,
  .c-profile-table tbody tr:nth-child(even) td{
    background: #fff;
  }

  .c-profile-table tbody tr:not(:last-child) th,
  .c-profile-table tbody tr:not(:last-child) td{
    border-bottom: 1px solid rgba(0,0,0,0.18);
  }

}

/* 色々殺す魔法 */
html,
body{
  background: #fffdf7 !important;
}

body,
body button,
body input,
body select,
body textarea,
body optgroup,
body option,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li,
body dt,
body dd,
body th,
body td,
body label,
body legend,
body caption,
body blockquote,
body figcaption,
body small,
body strong,
body em,
body cite,
body q,
body time,
body summary{
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}

code,
pre,
kbd,
samp{
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

body{
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(170, 189, 176, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 189, 176, 0.35) 1px, transparent 1px);
  background-size: 30px 30px;
}

#container,
#main,
#main-in,
.content,
.main{
  background: transparent !important;
  position: relative;
  z-index: 1;
}

#container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content{
  animation: content-fade-in .8s ease both;
}

.single-character_gallery .content{
  animation: none;
  transform: none;
}

@keyframes content-fade-in{
  from{
    opacity: 0;
    transform: translateY(18px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .content{
    animation: none;
  }
}

#main{
  flex: 1 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.c-site-credit{
  margin-top: auto;
}

/* Align selected pages' outer content width with the child theme's 1280px layout. */
.home #content-in.wrap,
.post-type-archive-character #content-in.wrap,
.single-character #content-in.wrap,
.page-about_me #content-in.wrap,
.page-template-page-about_me-php #content-in.wrap{
  width: min(1280px, calc(100% - 32px));
}

.single-character .content,
.single-character .main,
.page-about_me .content,
.page-about_me .main,
.page-template-page-about_me-php .content,
.page-template-page-about_me-php .main{
  background: transparent;
}

.c-about-trpg-section__frame{
  padding: 6px 0 0;
  --about-trpg-accent-color: #5ab2ba;
}

.c-about-trpg-section__heading{
  margin: 0 0 22px;
  font-size: 1.34rem;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.c-about-trpg-section__top{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: stretch;
}

.c-about-trpg-section__column{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 100%;
  gap: 18px;
}

.c-about-trpg-section__spacer{
  display: none;
}

.c-about-trpg-section__bottom{
  margin-top: 18px;
}

.c-about-trpg-section__item{
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(78, 127, 133, 0.06);
}

.c-about-trpg-section__title{
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--about-trpg-accent-color);
  font-size: 0.96rem;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
  color: var(--about-trpg-accent-color);
}

.c-about-trpg-section__body{
  font-size: 0.95rem;
  line-height: 1.9;
  word-break: break-word;
}

.c-about-trpg-section__body h4{
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--about-trpg-accent-color);
}

.c-about-trpg-section__body details{
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(104, 173, 180, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.c-about-trpg-section__body details + details{
  margin-top: 0.72em;
}

.c-about-trpg-section__body summary{
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--about-trpg-accent-color);
}

.c-about-trpg-section__body details[open] summary{
  margin-bottom: 0.72em;
}

.c-about-trpg-section__body > *{
  margin: 0;
}

.c-about-trpg-section__body > * + *{
  margin-top: 0.72em;
}

@media screen and (max-width: 1023px){
  .c-about-trpg-section__frame{
    padding-top: 2px;
  }

  .c-about-trpg-section__heading{
    margin-bottom: 16px;
    font-size: 1.18rem;
  }

  .c-about-trpg-section__top{
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .c-about-trpg-section__column{
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 12px;
  }

  .c-about-trpg-section__spacer{
    display: none;
  }

  .c-about-trpg-section__bottom{
    margin-top: 12px;
  }

  .c-about-trpg-section__item{
    padding: 16px 14px 14px;
    border-radius: 18px;
  }
}

/* =========================
   c-front-page.php
========================= */

.home .article{
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

.home .entry-title,
.home .article-header,
.home .sns-share,
.home .related-entries,
.home .pager-post-navi,
.home .comment-area,
.home .article-footer{
  display: none;
}

.c-front-page{
  display: block;
  position: relative;
}

.c-front-intro-layout{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "text visual"
    "hero visual";
  gap: 40px 24px;
  align-items: start;
}

.c-front-hero{
  grid-area: hero;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 178, 186, 0.26);
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(243, 253, 255, 0.96), rgba(214, 246, 248, 0.94) 42%, rgba(191, 239, 242, 0.98) 100%),
    linear-gradient(135deg, rgba(157, 228, 233, 0.36), rgba(191, 239, 242, 0.88));
  box-shadow: 0 24px 60px rgba(88, 145, 150, 0.18);
  z-index: 1;
}

.c-front-hero::before,
.c-front-hero::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.c-front-hero::before{
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(132, 214, 221, 0.36), rgba(132, 214, 221, 0));
}

.c-front-hero::after{
  bottom: -90px;
  left: -70px;
  background: radial-gradient(circle, rgba(100, 192, 201, 0.3), rgba(100, 192, 201, 0));
}

.c-front-firstview-text{
  grid-area: text;
  justify-self: stretch;
}

.c-front-hero-speech{
  position: relative;
  display: inline-block;
  margin-left: 0;
  isolation: isolate;
  top: 10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.4), transparent 32%),
    radial-gradient(circle at 78% 74%, rgba(255,255,255,0.24), transparent 28%),
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.05) 0 2px,
      rgba(0,0,0,0.015) 2px 4px
    ),
    linear-gradient(180deg, #fff6dc 0%, #fdf0c9 100%);
  box-shadow: 0 10px 28px rgba(88, 145, 150, 0.06);
  transform: rotate(-2.2deg);
  transform-origin: left center;
  z-index: 1;
}

.c-front-hero-speech-ornament{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c-front-hero-speech-ornament::before,
.c-front-hero-speech-ornament::after{
  content: "";
  position: absolute;
  mix-blend-mode: multiply;
}

.c-front-hero-speech-ornament::before{
  top: 10px;
  left: -28px;
  background: #ff8ac8;
  rotate: -43.8deg;
}

.c-front-hero-speech-ornament::after{
  top: calc(100% - 36px);
  right: -28px;
  background: #70dbaf;
  rotate: -43.8deg;
}

.c-front-hero-kicker,
.c-front-hero-title{
  position: relative;
  z-index: 1;
}

.c-front-hero-kicker,
.c-front-section-label{
  color: #667463;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.c-front-hero-title{
  color: #243028;
  font-size: clamp(2.0rem, 3.9vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
}

.c-front-hero-title-line{
  display: block;
}

/* removed previous layered speech styles */
.c-front-hero-speech::after{
  content: none;
}

/* keep surrounding layout rules below */

.c-front-hero-lead{
  color: #465448;
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  line-height: 1.8;
}

.c-front-hero-copy{
  color: #5d625b;
  font-size: 1.08rem;
  line-height: 1.95;
  transform-origin: left center;
}

.c-front-hero__body{
  display: flex;
  flex-direction: column;
}

.c-front-hero__actions{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.c-front-hero__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.c-front-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(49, 68, 55, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #314437;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(88, 145, 150, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
}

.c-front-button:hover{
  transform: translateY(-2px);
  border-color: #1f2a22;
  background: #1f2a22;
  color: #fffdf7;
  box-shadow: 0 12px 24px rgba(31, 42, 34, 0.18);
}

.c-front-stat{
  border: 1px solid rgba(90, 178, 186, 0.16);
  border-radius: 22px;
  background: rgba(244, 254, 255, 0.74);
  backdrop-filter: blur(6px);
}

.c-front-hero-visual{
  grid-area: visual;
  justify-self: stretch;
}

.c-front-hero-visual-frame{
  position: relative;
  margin: 0 auto;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(210, 243, 246, 0.55));
  box-shadow: 0 20px 42px rgba(88, 145, 150, 0.16);
  transform: rotate(3.2deg);
}

.c-front-hero-visual-frame::before{
  content: "";
  position: absolute;
  inset: -8px 16px 18px -12px;
  z-index: -1;
  border-radius: 32px;
  background: rgba(145, 214, 220, 0.24);
  transform: rotate(-3.4deg);
}

.c-front-hero-visual-placeholder{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed rgba(90, 178, 186, 0.4);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.85), rgba(225, 248, 250, 0.92)),
    repeating-linear-gradient(
      -45deg,
      rgba(144, 214, 220, 0.08) 0 14px,
      rgba(144, 214, 220, 0.16) 14px 28px
    );
  color: #537274;
  text-align: center;
}

.c-front-hero-visual-media{
  position: relative;
  overflow: visible;
  border-radius: 24px;
}

.c-front-hero-visual-media.has-hover-image{
  transform: translateY(72px) scale(1.06);
  transform-origin: center top;
}

.c-front-hero-visual-image{
  display: block;
  object-fit: contain;
  border-radius: 24px;
  opacity: 1;
  transition: opacity .48s ease, transform .32s ease;
}

.c-front-hero-visual-media.is-switching .c-front-hero-visual-image{
  opacity: 0.55;
}

.c-front-hero-visual-label{
  display: inline-flex;
  border-radius: 999px;
  background: rgba(90, 178, 186, 0.14);
  color: #456366;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.c-front-hero-visual-placeholder p{
  font-size: 1rem;
  line-height: 1.8;
}

.c-front-hero .c-front-hero-lead{
  transform: none;
}

.c-front-stat-number{
  display: block;
  color: #243028;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}

.c-front-stat-label{
  display: block;
  color: #667463;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-front-section-heading{
}

.c-front-toggle-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(49, 68, 55, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #314437;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.c-front-toggle-button:hover{
  transform: translateY(-1px);
  background: #1f2a22;
  border-color: #1f2a22;
  color: #fffdf7;
}

.c-front-toggle-button:disabled{
  opacity: 0.7;
  cursor: wait;
}

.c-front-section-heading h2{
  color: #243028;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
}

.c-front-section-heading p:last-child{
  color: #5d625b;
  line-height: 1.85;
}

.c-front-character-card{
  background: rgba(255, 255, 255, 0.88);
}

.c-front-character-card .c-character-card-tags{
  margin-bottom: 0;
}

.c-front-character-card .c-character-card-excerpt{
  display: none;
}

.c-front-character-results{
  transition: opacity .3s ease, transform .3s ease;
}

.c-front-character-results.is-loading{
  opacity: 0;
  transform: translateY(12px);
}

.c-front-character-results.is-revealing .c-front-character-card,
.c-front-character-results.is-revealing .c-front-empty{
  opacity: 0;
  transform: translateY(18px);
}

.c-front-character-results.is-revealing.is-visible .c-front-character-card,
.c-front-character-results.is-revealing.is-visible .c-front-empty{
  animation: c-front-character-card-in .72s ease forwards;
}

.c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(1){
  animation-delay: 0s;
}

.c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(2){
  animation-delay: .1s;
}

.c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(3){
  animation-delay: .2s;
}

.c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(4){
  animation-delay: .3s;
}

.c-front-character-results.is-revealing.is-visible .c-front-empty{
  animation-delay: 0s;
}

@keyframes c-front-character-card-in{
  from{
    opacity: 0;
    transform: translateY(18px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.c-front-empty{
  border: 1px dashed rgba(72, 96, 80, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
}

.c-front-empty p{
  color: #5d625b;
  line-height: 1.8;
}

.c-front-story-section{
  position: relative;
}

.c-front-story-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.c-front-story-card{
  padding: 28px 24px;
  border: 1px solid rgba(72, 96, 80, 0.1);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247, 243, 234, 0.9));
  box-shadow: 0 14px 36px rgba(96, 76, 56, 0.08);
}

.c-front-story-number{
  display: inline-block;
  margin-bottom: 18px;
  color: #9a7b5d;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.c-front-story-card h3{
  margin: 0 0 12px;
  color: #243028;
  font-size: 1.2rem;
}

.c-front-story-card p{
  margin: 0;
  color: #5d625b;
  line-height: 1.8;
}

.c-front-term-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.c-front-term-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tag-marker, rgba(255,255,255,0.84));
  color: var(--tag-text, #314437);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(96, 76, 56, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.c-front-term-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(96, 76, 56, 0.12);
}

.c-front-social-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.c-front-social-card{
  --front-social-card-border: rgba(90, 178, 186, 0.42);
  --front-social-card-top: rgba(238, 250, 251, 0.96);
  --front-social-card-bottom: rgba(90, 178, 186, 0.26);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid var(--front-social-card-border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--front-social-card-top), var(--front-social-card-bottom));
  box-shadow: 0 14px 32px rgba(96, 76, 56, 0.08);
  color: #243028;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.c-front-social-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(96, 76, 56, 0.12);
  border-color: rgba(72, 96, 80, 0.22);
}

.c-front-social-icon{
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fffdf7;
  background: var(--front-social-accent, #5ab2ba);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

.c-front-social-icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-front-social-icon.has-custom-icon{
  background: transparent;
  box-shadow: none;
  padding: 5px;
}

.c-front-social-body{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.c-front-social-name{
  display: block;
  color: #243028;
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 700;
}

.c-front-social-description{
  display: block;
  color: #5d625b;
  font-size: 0.92rem;
  line-height: 1.6;
}

.c-front-social-card--x{
  --front-social-accent: #111111;
}

.c-front-social-card--skeb{
  --front-social-accent: #f7638b;
}

.c-front-social-card--vrchat{
  --front-social-accent: #2f80ed;
}

.c-front-social-card--bluesky{
  --front-social-accent: #1185fe;
}

@media screen and (max-width: 960px){
  .u-grid-3cols,
  .u-grid-4cols,
  .u-grid-responsive-2-1,
  .c-front-story-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 960px) and (min-width: 768px){
  .c-character-archive-inner .c-character-grid,
  .c-front-character-results .c-character-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .c-character-archive-inner .c-character-card-tags,
  .c-front-character-results .c-character-card-tags{
    display: none;
  }

  .c-character-archive-inner .c-character-card a,
  .c-front-character-results .c-character-card a{
    grid-template-rows: minmax(0, 2fr) auto;
  }

  .c-character-archive-inner .c-character-card-body,
  .c-front-character-results .c-character-card-body{
    display: block;
  }

  .c-character-archive-inner .c-character-card-noimage,
  .c-front-character-results .c-character-card-noimage{
    padding: 12px 8px 10px;
  }

  .c-character-archive-inner .c-character-card-noimage .c-character-card-noimage__avatar,
  .c-front-character-results .c-character-card-noimage .c-character-card-noimage__avatar{
    max-width: 100%;
    max-height: 100%;
  }
}

@media screen and (max-width: 960px) and (min-width: 431px){
  .c-front-intro-layout{
    grid-template-areas:
      "text visual"
      "hero hero";
    gap: 32px 24px;
  }

  .c-front-hero-visual{
    align-items: flex-start;
  }

  .c-front-hero-visual-frame{
    width: min(100%, 360px);
    height: var(--front-tablet-visual-height, auto);
    max-height: var(--front-tablet-visual-height, none);
    min-height: 0;
    overflow: hidden;
  }

  .c-front-hero-visual-media{
    display: flex;
    align-items: flex-start;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .c-front-hero-visual-media.has-hover-image{
    transform: translateY(0px) scale(1.01);
  }

  .c-front-hero-visual-image{
    width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .c-front-hero__actions{
    grid-template-columns: 1fr;
  }

  .c-front-hero__stats{
    display: none;
  }

  .c-front-hero-lead{
    font-size: 0.94rem;
  }

  .c-front-hero-copy{
    font-size: 0.96rem;
    line-height: 1.8;
  }

  .c-front-button{
    font-size: 0.94rem;
  }
}

@media screen and (max-width: 834px){
  .u-grid-responsive-3-1{
    grid-template-columns: 1fr;
  }

  .u-flex-col-960{
    flex-direction: column;
  }

  .u-jc-fs-960{
    justify-content: flex-start;
  }

  .u-flex-nowrap-960{
    flex-wrap: nowrap;
  }

  .u-ai-st-960{
    align-items: stretch;
  }

  .c-front-toggle-button{
    font-size: 0.96rem;
    padding-left: 16px;
    padding-right: 16px;
  }

  .c-front-hero-speech{
    top: 4px;
    right: 18px;
  }

  .c-front-social-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

}

@media screen and (max-width: 430px){
  .c-character-gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .c-character-filter{
    box-sizing: border-box;
    max-width: 100%;
  }

  .c-character-filter__details{
    border-radius: 18px;
  }

  .c-character-filter__summary{
    padding: 14px;
  }

  .c-character-filter__panel{
    padding: 0 12px 14px;
  }

  .c-character-filter__group,
  .c-character-filter__search{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .c-character-filter__options{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .c-character-filter__option{
    gap: 6px;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .c-character-filter__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .c-played-scenarios-hero{
    text-align: left;
  }

  .c-played-scenarios-status-nav{
    justify-content: flex-start;
  }

  .c-played-scenarios-year__heading{
    align-items: flex-start;
    flex-direction: column;
  }

  .c-played-scenario-card{
    padding: 16px;
  }

  .c-front-intro-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "visual"
      "hero";
    gap: 28px;
  }

  .c-front-hero__actions{
    grid-template-columns: 1fr;
  }

  .c-front-hero__stats{
    display: none;
  }

  .c-front-social-grid{
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 640px){
  .c-front-character-results .c-character-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .c-character-card a{
    grid-template-rows: minmax(0, 2fr) auto;
  }

  .c-character-card-body{
    display: block;
  }

  .c-character-card-tags{
    display: none;
  }

  .c-front-hero-speech{
  }

  .c-front-hero-speech::after{
    right: 34px;
  }

  .c-front-hero-title{
    white-space: normal;
  }

  .c-front-hero-visual-frame{
    min-height: 0;
    transform: rotate(2.8deg);
  }

  .c-front-hero-visual-media{
    min-height: 0;
  }

  .c-front-hero-visual-media.has-hover-image{
    transform: translateY(8px);
  }


  .u-grid-3cols,
  .u-grid-4cols,
  .u-grid-responsive-2-1,
  .c-front-story-grid{
    grid-template-columns: 1fr;
  }

  .c-character-archive-inner .c-character-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-front-button{
    width: 100%;
  }
}

@media screen and (max-width: 767px){
  .c-character-archive-inner .c-character-grid,
  .c-front-character-results .c-character-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .c-front-character-results.is-revealing.is-visible .c-front-character-card,
  .c-front-character-results.is-revealing.is-visible .c-front-empty{
    animation-duration: .26s;
  }

  .c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(2){
    animation-delay: .015s;
  }

  .c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(3){
    animation-delay: .045s;
  }

  .c-front-character-results.is-revealing.is-visible .c-front-character-card:nth-child(4){
    animation-delay: .06s;
  }

  .c-character-archive-inner .c-character-card-tags,
  .c-front-character-results .c-character-card-tags{
    display: none;
  }

  .c-character-archive-inner .c-character-card a,
  .c-front-character-results .c-character-card a{
    grid-template-rows: minmax(0, 2fr) auto;
  }

  .c-character-archive-inner .c-character-card-body,
  .c-front-character-results .c-character-card-body{
    display: block;
  }

  .c-character-archive-inner .c-character-card-noimage,
  .c-front-character-results .c-character-card-noimage{
    padding: 12px 8px 10px;
  }

  .c-character-archive-inner .c-character-card-noimage .c-character-card-noimage__avatar,
  .c-front-character-results .c-character-card-noimage .c-character-card-noimage__avatar{
    max-width: 100%;
    max-height: 100%;
  }
}

@media screen and (max-width: 760px){
  .u-pl-shifted{
    padding-left: 1.8em;
  }
}

@media screen and (max-width: 600px){
  #wpadminbar{
    position: fixed !important;
  }
}