@charset "utf-8";

/* ============================================================
js-summaryAccordion
アコーディオン付き概要ボックス

・指定行数以内
  全文表示／ボタン非表示／グラデーションなし

・指定行数を超える
  折りたたみ表示／開閉ボタン表示

・本文の高さはJSで実寸制御
・閉じる際は本文の縮小と同時にグラデーションを表示
============================================================ */

/* ------------------------------------------------------------
   外側ラッパー
------------------------------------------------------------ */
.js-summaryAccordionWrapper {
  --summary-duration: 0.35s;
  --summary-easing: ease;
  --summary-text-color: #422715;
  --summary-background-color: #fff;
  margin-bottom: 0;
  transition:
    margin-bottom var(--summary-duration)
    var(--summary-easing);
}

/*
 * 展開時に、下へ移動する「閉じる」ボタンの領域を確保する。
 */
.js-summaryAccordionWrapper:has(
  .js-summaryAccordion-toggle.is-open
) {
  margin-bottom: 3.5rem;
}

/* ------------------------------------------------------------
   アコーディオン全体
------------------------------------------------------------ */
.js-summaryAccordion {
  position: relative;
}

/* ------------------------------------------------------------
   本文ラッパー
------------------------------------------------------------ */
.js-summaryAccordion-body {
  position: relative;
  overflow: hidden;

  /*
   * 開始値・終了値はJSでインライン指定する。
   */
  transition:
    max-height var(--summary-duration)
    var(--summary-easing);
  will-change: max-height;
}

/*
 * 折りたたみ状態。
 * --collapsed-heightはJSから設定される。
 */
.js-summaryAccordion-body.is-collapsed {
  max-height: var(--collapsed-height);
}

/*
 * 展開状態。
 * max-heightはJSで本文の実寸値を指定するため、
 * CSSでは固定値を設定しない。
 */
.js-summaryAccordion-body.is-expanded {
  overflow: hidden;
}

/* ------------------------------------------------------------
   開閉ボタン
------------------------------------------------------------ */
.js-summaryAccordion-toggle {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 1rem auto 0;
  padding: 5rem 1rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--summary-text-color);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    bottom var(--summary-duration)
      var(--summary-easing),
    padding var(--summary-duration)
      var(--summary-easing),
    opacity 0.2s ease;
}

/*
 * グラデーション専用レイヤー。
 *
 * background-image自体は滑らかにtransitionできないため、
 * 疑似要素のopacityをアニメーションさせる。
 */
.js-summaryAccordion-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    #fff 43%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
  pointer-events: none;
  transition:
    opacity var(--summary-duration)
    var(--summary-easing);
}

/* ------------------------------------------------------------
   展開時のボタン
------------------------------------------------------------ */
.js-summaryAccordion-toggle.is-open {
  bottom: -3rem;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #fff;
}

/*
 * 展開中はグラデーションを非表示にする。
 *
 * 閉じる際にis-openが外れると、
 * 本文の縮小と同時にopacity: 1へ変化する。
 */
.js-summaryAccordion-toggle.is-open::before {
  opacity: 0;
}

/* ------------------------------------------------------------
   hover・focus
------------------------------------------------------------ */
/*@media (hover: hover) {
  .js-summaryAccordion-toggle:hover {
    opacity: 0.75;
  }
}*/
.js-summaryAccordion-toggle:focus-visible {
  outline: 2px solid var(--summary-text-color);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   ラベル
------------------------------------------------------------ */
.js-summaryAccordion-toggle .open-label,
.js-summaryAccordion-toggle .close-label {
  position: relative;
}

/*
 * 閉じた状態
 */
.js-summaryAccordion-toggle .open-label {
  display: inline;
}
.js-summaryAccordion-toggle .close-label {
  display: none;
}

/*
 * 開いた状態
 */
.js-summaryAccordion-toggle.is-open .open-label {
  display: none;
}
.js-summaryAccordion-toggle.is-open .close-label {
  display: inline;
}

/* ------------------------------------------------------------
   ラベル横の矢印
------------------------------------------------------------ */
.js-summaryAccordion-toggle .open-label::after,
.js-summaryAccordion-toggle .close-label::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/*
 * 下向き矢印
 */
.js-summaryAccordion-toggle .open-label::after {
  transform:
    translateY(-4px)
    rotate(45deg);
}

/*
 * 上向き矢印
 */
.js-summaryAccordion-toggle .close-label::after {
  transform:
    translateY(0)
    rotate(-135deg);
}

/* ------------------------------------------------------------
   指定行数以内の短文
------------------------------------------------------------ */
.js-summaryAccordion--short .js-summaryAccordion-body {
  overflow: visible;
  max-height: none !important;
  transition: none;
  will-change: auto;
}

/*
 * 短文の場合はボタンを表示しない。
 */
.js-summaryAccordion--short .js-summaryAccordion-toggle {
  display: none;
}

/*
 * 短文の場合は展開用の余白を確保しない。
 */
.js-summaryAccordionWrapper:has(
  .js-summaryAccordion--short
) {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   アニメーション軽減設定
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-summaryAccordionWrapper,
  .js-summaryAccordion-body,
  .js-summaryAccordion-toggle,
  .js-summaryAccordion-toggle::before {
    transition-duration: 0.01ms;
  }
}