/* =========================================================
   components.css
   役割：UI部品のみ（tokensは style.css）
   - 見出し / ボタン / カード
   - 「ONE SOURCE OF TRUTH」
========================================================= */

/* =========================================================
   Utilities
========================================================= */
.u-ratio{
  position: relative;
  display: block;
  width: 100%;
}
.u-ratio::before{
  content:"";
  display: block;
  padding-top: var(--ratio, 56.25%);
}
.u-ratio > *{
  position: absolute;
  inset: 0;
}

/* =========================================================
   Section Titles
   - SWELLの .post_content h2 に負けないため明示上書き
========================================================= */

/* reset */
.section-title-en,
.section-title-ja{
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

/* EN */
.section-title-en{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 10px !important;

  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.2;
  font-size: var(--title-en);
}

/* SWELL対策（h2想定） */
.post_content h2.section-title-en{
  font-size: var(--title-en) !important;
  line-height: 1.2 !important;
  margin: 0 auto 10px !important;
  letter-spacing: 0.18em !important;
}

/* JA */
.section-title-ja{
  position: relative;
  display: table;   /* auto margin で確実に中央 */
  width: auto;
  max-width: 100%;
  margin: 6px auto var(--title-gap) !important;
  padding: 0 16px;

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: var(--title-ja);
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--text-main);
}

.section-title-ja::before,
.section-title-ja::after{
  content:"";
  position:absolute;
  top:50%;
  width:22px;
  height:1px;
  background: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}
.section-title-ja::before{ right:100%; margin-right:10px; }
.section-title-ja::after { left:100%;  margin-left:10px; }

@media (max-width: 767px){
  .section-title-en{ letter-spacing: 0.15em; }
  .section-title-ja{
    margin-bottom: 24px !important;
  }
  .section-title-ja::before,
  .section-title-ja::after{
    width: 32px;
  }
}

/* =========================================================
   btn-line
========================================================= */
a.btn-line,
a.btn-line:visited,
.wp-block-button__link.btn-line{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--btn-min);
  padding: var(--btn-pad-y) var(--btn-pad-x);

  font-size: var(--btn-fs);
  line-height: 1.2;
  letter-spacing: .12em;

  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: visible; /* 右の線を出すため必須 */

  color: var(--btn-line-color);
  border: 1px solid var(--btn-line-color);
  background: transparent;
  border-radius: 0;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

a.btn-line::after,
.wp-block-button__link.btn-line::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(100% - 10px);
  transform:translateY(-50%);
  width:0;
  height:1px;
  background:currentColor;
  opacity:0;
  transform-origin:left center;
  transition:width .35s ease, opacity .3s ease;
  pointer-events:none;
}

/* hover（PC） */
@media (hover:hover) and (pointer:fine){
  a.btn-line:hover::after,
  .wp-block-button__link.btn-line:hover::after{
    width:40px;
    opacity:1;
  }
  a.btn-line:hover,
  .wp-block-button__link.btn-line:hover{
    background: rgba(255,255,255,.4) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateX(2px);
  }
}

/* =========================================================
   btn-line｜SP tap feedback（A案・完成形）
========================================================= */
@media (hover:none) and (pointer:coarse){
  a.btn-line,
  .wp-block-button__link.btn-line{
    background-color: transparent;
  }

  a.btn-line:active,
  .wp-block-button__link.btn-line:active{
    background-color: rgba(255,255,255,.35);
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transform: translateX(1px);
  }

  a.btn-line:focus-visible,
  .wp-block-button__link.btn-line:focus-visible{
    background-color: rgba(255,255,255,.25);
  }
}

/* mobile layout */
@media (max-width: 767px){
  a.btn-line,
  .wp-block-button__link.btn-line{
    width:100%;
    max-width:360px;
    min-width:0;
    padding:16px 28px;
  }
}

/* =========================================================
   Card
========================================================= */
.c-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
}

.c-card__body{
  padding: 18px 20px 20px;
}

.c-card__title{
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: .10em;
  line-height: 1.35;
  margin: 0 0 8px;
}

.c-card__text{
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
}

@media (hover:hover) and (pointer:fine){
  .c-card{
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .c-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
  }
}