/* =========================================================
   Shinto Funeral
   /kind/shintoso/
========================================================= */

.kind-detail--shinto {
  --kind-accent: #4f6b45;
  --kind-accent-dark: #33482d;
  --kind-accent-pale: #f0f4ed;
}

.kind-detail--shinto .shinto-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.93) 39%,
      rgba(255,255,255,.34) 68%,
      rgba(255,255,255,0) 100%
    ),
    url("/wp/wp-content/themes/ceremony/images/page/shinto_hero_01_pc.webp");
}

.kind-detail--shinto .kind-card--media {
  max-width: 820px;
}

.kind-detail--shinto .kind-card--media .kind-card__media {
  aspect-ratio: 16 / 9;
}

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

  .kind-detail--shinto .shinto-hero {
    padding-top: 66vw;
    align-items: flex-end;
    background-image:
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,.91) 67%,
        #fff 84%
      ),
      url("/wp/wp-content/themes/ceremony/images/page/shinto_hero_01_sp.webp");
    background-position: center top;
    background-size: 100% auto;
  }

}



/* =========================================================
   神式葬とは - 写真付きカード
========================================================= */

.kind-detail--shinto .kind-card-grid--3 .kind-card--media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.kind-detail--shinto .kind-card-grid--3 .kind-card__media {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f3f0;
}

.kind-detail--shinto .kind-card-grid--3 .kind-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kind-detail--shinto .kind-card-grid--3 .kind-card__body {
  flex: 1;
  padding: 24px 22px 26px;
}


/* =========================================================
   神式葬で行う主な儀式
   麻の葉文様
========================================================= */

.kind-detail--shinto .shinto-ritual-section {
  position: relative;
  overflow: hidden;

  /*
   * 神式ページ用の麻の葉カラー
   */
  --asanoha-bg: #f6f7f3;
  --asanoha-line: var(--kind-accent, #4f6b45);

  background-color: var(--asanoha-bg);
}


/* =========================================================
   麻の葉パターン
========================================================= */

.kind-detail--shinto .shinto-ritual-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background-color: var(--asanoha-bg);

  background-image:

    linear-gradient(
      90deg,
      var(--asanoha-line) 1.5%,
      transparent 1.5%,
      transparent 98.5%,
      var(--asanoha-line) 98.5%,
      var(--asanoha-line) 100%
    ),

    repeating-conic-gradient(
      at 33.33% 2.6%,
      transparent 0deg 270deg,
      var(--asanoha-line) 270deg 360deg
    ),

    repeating-conic-gradient(
      at 33.33% 97.4%,
      transparent 0deg 180deg,
      var(--asanoha-line) 180deg 270deg,
      transparent 270deg 360deg
    ),

    repeating-conic-gradient(
      at 66.66% 2.6%,
      var(--asanoha-line) 0deg 90deg,
      transparent 90deg 360deg
    ),

    repeating-conic-gradient(
      at 66.66% 97.4%,
      transparent 0deg 90deg,
      var(--asanoha-line) 90deg 180deg,
      transparent 180deg 360deg
    ),

    repeating-conic-gradient(
      at 15.7% 50%,
      transparent 0deg 210deg,
      var(--asanoha-bg) 210deg 330deg,
      transparent 330deg 360deg
    ),

    repeating-conic-gradient(
      at 19% 50%,
      transparent 0deg 210deg,
      var(--asanoha-line) 210deg 330deg,
      transparent 330deg 360deg
    ),

    repeating-conic-gradient(
      at 84.3% 50%,
      transparent 0deg 30deg,
      var(--asanoha-bg) 30deg 150deg,
      transparent 150deg 360deg
    ),

    repeating-conic-gradient(
      at 81% 50%,
      transparent 0deg 30deg,
      var(--asanoha-line) 30deg 150deg,
      transparent 150deg 360deg
    ),

    linear-gradient(
      60deg,
      transparent 0%,
      transparent 48.7%,
      var(--asanoha-line) 48.7%,
      var(--asanoha-line) 51.3%,
      transparent 51.3%,
      transparent 100%
    ),

    linear-gradient(
      -60deg,
      transparent 0%,
      transparent 48.7%,
      var(--asanoha-line) 48.7%,
      var(--asanoha-line) 51.3%,
      transparent 51.3%,
      transparent 100%
    ),

    linear-gradient(
      30deg,
      transparent 0%,
      transparent 48.5%,
      var(--asanoha-line) 48.5%,
      var(--asanoha-line) 51.5%,
      transparent 51.5%,
      transparent 100%
    ),

    linear-gradient(
      -30deg,
      transparent 0%,
      transparent 48.5%,
      var(--asanoha-line) 48.5%,
      var(--asanoha-line) 51.5%,
      transparent 51.5%,
      transparent 100%
    ),

    linear-gradient(
      0deg,
      transparent 0%,
      transparent 47.4%,
      var(--asanoha-line) 47.4%,
      var(--asanoha-line) 52.6%,
      transparent 52.6%,
      transparent 100%
    ),

    linear-gradient(
      90deg,
      transparent 0%,
      transparent 48.5%,
      var(--asanoha-line) 48.5%,
      var(--asanoha-line) 51.5%,
      transparent 51.5%,
      transparent 100%
    );

  /*
   * 元CSSの1.732 : 1を維持。
   * 葬儀サイト向けにやや大きくする。
   */
  background-size: 90px 52px;
  background-repeat: repeat;

  /*
   * 元デザインそのままでは線が強いため、
   * 背景の地紋として薄くする。
   */
  opacity: 0.075;
}


/* =========================================================
   コンテンツ
========================================================= */

.kind-detail--shinto
.shinto-ritual-section
.kind-inner {
  position: relative;
  z-index: 1;
}


/* =========================================================
   儀式カード
========================================================= */

.kind-detail--shinto
.shinto-ritual-section
.kind-card {
  background: #fff;

  border: 1px solid rgba(79, 107, 69, 0.07);

  box-shadow: none;
}


/* 番号 */

.kind-detail--shinto
.shinto-ritual-section
.kind-card__number {
  color: var(--kind-accent, #4f6b45);
}


/* =========================================================
   SP
========================================================= */

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

  .kind-detail--shinto
  .shinto-ritual-section::before {

    /*
     * SPでは柄が密集しないよう少し拡大
     */
    background-size: 104px 60px;

    opacity: 0.065;
  }

}