@charset "UTF-8";
/*!
Theme Name: wordpress-starter-theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wordpress-starter-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

wordpress-starter-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/**---------------------------------------------
 * 画像処理
  <figure class="image-1by1">
    <img src="/assets/image/600x600.webp">
  </figure>

**-----------------------------------------------*/
.image-1by1,
.image-1by2,
.image-2by3,
.image-3by4 {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.image-1by1 img,
.image-1by2 img,
.image-2by3 img,
.image-3by4 img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

.image-1by1::before {
  padding-top: 100%;
  /* 1:1 aspect ratio (height / width * 100%) ...1/1*100=100  */
  content: "";
  display: block;
}

.image-1by2::before {
  padding-top: 50%;
  /* 1:2 aspect ratio (height / width * 100%) ...1/2*100=0.5  */
  content: "";
  display: block;
}

.image-2by3::before {
  padding-top: 66.66%;
  /* 2:3 aspect ratio (height / width * 100%) ...66.666/100*100=66.66666  */
  content: "";
  display: block;
}

.image-3by4::before {
  padding-top: 75%;
  /* 2:3 aspect ratio (height / width * 100%) ...75/100*100=75  */
  content: "";
  display: block;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2列のグリッドを作成 */
}

.button {
  --bulma-button-outer-shadow-h: 0;
  --bulma-button-outer-shadow-s: 0%;
  --bulma-button-outer-shadow-l: 0%;
  --bulma-button-outer-shadow-a: 0;
  --bulma-button-border-width: 1px;
  --bulma-button-weight:var(--bulma-weight-light)!important;
  --bulma-button-padding-vertical: 0.8em;
  box-shadow: none; /* 念のため追加 */
  border-color: hsl(221, 14%, 21%);
}

/**---------------------------------------------
 * ボタン
**-----------------------------------------------*/
.button.is-white-primary {
  --bulma-link-text:initial;
  background-color: white;
  color: contrast(white, hsl(221, 14%, 21%)) !important;
  --bulma-button-border-width: 1px;
}
.button.is-white-primary:hover, .button.is-white-primary:focus {
  background-color: #242840;
  color: white !important;
  border-color: #242840;
}

.button.is-white-primary.is-active {
  background-color: #242840;
  color: white;
  border-color: #242840;
}

.button.is-white-primary.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}
.button.is-white-primary.is-arrow:active {
  color: white;
}

.button.is-white-primary.is-arrow:hover, .button.is-white-primary.is-arrow:active {
  color: #fff;
  border-color: #fff;
}

.button.is-white-primary.is-arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: hsl(221, 14%, 21%);
}

.button.is-white-primary.is-arrow::after {
  content: "";
  position: absolute;
  top: 43%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: hsl(221, 14%, 21%);
  transition: all 0.2s linear;
}

.button.is-white-primary.is-arrow:hover::before {
  background: #fff;
  right: 25px;
}

.button.is-white-primary.is-arrow:hover::after {
  border-left-color: #fff;
  right: 20px;
}

.button.is-white-info {
  --bulma-link-text:initial;
  background-color: white;
  color: contrast(white, hsl(221, 14%, 21%)) !important;
  --bulma-button-border-width: 1px;
}
.button.is-white-info:hover, .button.is-white-info:focus {
  background-color: rgb(44, 16, 7);
  color: white !important;
  border-color: rgb(44, 16, 7);
}

.button.is-white-info.is-active {
  background-color: rgb(44, 16, 7);
  color: white;
  border-color: rgb(44, 16, 7);
}

.button.is-white-info.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}
.button.is-white-info.is-arrow:active {
  color: white;
}

.button.is-white-info.is-arrow:hover, .button.is-white-info.is-arrow:active {
  color: #fff;
  border-color: #fff;
}

.button.is-white-info.is-arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: hsl(221, 14%, 21%);
}

.button.is-white-info.is-arrow::after {
  content: "";
  position: absolute;
  top: 43%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: hsl(221, 14%, 21%);
  transition: all 0.2s linear;
}

.button.is-white-info.is-arrow:hover::before {
  background: #fff;
  right: 25px;
}

.button.is-white-info.is-arrow:hover::after {
  border-left-color: #fff;
  right: 20px;
}

.button.is-white-success {
  --bulma-link-text:initial;
  background-color: white;
  color: contrast(white, hsl(221, 14%, 21%)) !important;
  --bulma-button-border-width: 1px;
}
.button.is-white-success:hover, .button.is-white-success:focus {
  background-color: #2450a3;
  color: white !important;
  border-color: #2450a3;
}

.button.is-white-success.is-active {
  background-color: #2450a3;
  color: white;
  border-color: #2450a3;
}

.button.is-white-success.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}
.button.is-white-success.is-arrow:active {
  color: white;
}

.button.is-white-success.is-arrow:hover, .button.is-white-success.is-arrow:active {
  color: #fff;
  border-color: #fff;
}

.button.is-white-success.is-arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: hsl(221, 14%, 21%);
}

.button.is-white-success.is-arrow::after {
  content: "";
  position: absolute;
  top: 43%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: hsl(221, 14%, 21%);
  transition: all 0.2s linear;
}

.button.is-white-success.is-arrow:hover::before {
  background: #fff;
  right: 25px;
}

.button.is-white-success.is-arrow:hover::after {
  border-left-color: #fff;
  right: 20px;
}

.button.is-white-warning {
  --bulma-link-text:initial;
  background-color: white;
  color: contrast(white, hsl(221, 14%, 21%)) !important;
  --bulma-button-border-width: 1px;
}
.button.is-white-warning:hover, .button.is-white-warning:focus {
  background-color: hsl(42, 100%, 53%);
  color: white !important;
  border-color: hsl(42, 100%, 53%);
}

.button.is-white-warning.is-active {
  background-color: hsl(42, 100%, 53%);
  color: white;
  border-color: hsl(42, 100%, 53%);
}

.button.is-white-warning.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}
.button.is-white-warning.is-arrow:active {
  color: white;
}

.button.is-white-warning.is-arrow:hover, .button.is-white-warning.is-arrow:active {
  color: #fff;
  border-color: #fff;
}

.button.is-white-warning.is-arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: hsl(221, 14%, 21%);
}

.button.is-white-warning.is-arrow::after {
  content: "";
  position: absolute;
  top: 43%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: hsl(221, 14%, 21%);
  transition: all 0.2s linear;
}

.button.is-white-warning.is-arrow:hover::before {
  background: #fff;
  right: 25px;
}

.button.is-white-warning.is-arrow:hover::after {
  border-left-color: #fff;
  right: 20px;
}

.button.is-white-danger {
  --bulma-link-text:initial;
  background-color: white;
  color: contrast(white, hsl(221, 14%, 21%)) !important;
  --bulma-button-border-width: 1px;
}
.button.is-white-danger:hover, .button.is-white-danger:focus {
  background-color: hsl(348, 100%, 70%);
  color: white !important;
  border-color: hsl(348, 100%, 70%);
}

.button.is-white-danger.is-active {
  background-color: hsl(348, 100%, 70%);
  color: white;
  border-color: hsl(348, 100%, 70%);
}

.button.is-white-danger.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}
.button.is-white-danger.is-arrow:active {
  color: white;
}

.button.is-white-danger.is-arrow:hover, .button.is-white-danger.is-arrow:active {
  color: #fff;
  border-color: #fff;
}

.button.is-white-danger.is-arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: hsl(221, 14%, 21%);
}

.button.is-white-danger.is-arrow::after {
  content: "";
  position: absolute;
  top: 43%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: hsl(221, 14%, 21%);
  transition: all 0.2s linear;
}

.button.is-white-danger.is-arrow:hover::before {
  background: #fff;
  right: 25px;
}

.button.is-white-danger.is-arrow:hover::after {
  border-left-color: #fff;
  right: 20px;
}

/**---------------------------------------------
 * 逆バージョン
**-----------------------------------------------*/
.button.is-primary-white {
  background-color: #242840;
  color: white;
  border: 1px solid #242840;
  --bulma-button-border-width: 1px;
}
.button.is-primary-white:hover, .button.is-primary-white:focus, .button.is-primary-white:active {
  background-color: white;
  color: contrast(#242840, hsl(221, 14%, 21%));
  border-color: hsl(221, 14%, 21%);
}

.button.is-primary-white.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: white;
  border-color: white;
}

.button.is-primary-white.is-arrow:hover, .button.is-primary-white.is-arrow:active {
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}

.button.is-primary-white.is-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: white;
}

.button.is-primary-white.is-arrow::after {
  content: "";
  position: absolute;
  top: 40.5%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: white;
  transition: all 0.2s linear;
}

.button.is-primary-white.is-arrow:hover::before {
  background: hsl(221, 14%, 21%);
  right: 25px;
}

.button.is-primary-white.is-arrow:hover::after {
  border-left-color: hsl(221, 14%, 21%);
  right: 20px;
}

.button.is-info-white {
  background-color: rgb(44, 16, 7);
  color: white;
  border: 1px solid rgb(44, 16, 7);
  --bulma-button-border-width: 1px;
}
.button.is-info-white:hover, .button.is-info-white:focus, .button.is-info-white:active {
  background-color: white;
  color: contrast(rgb(44, 16, 7), hsl(221, 14%, 21%));
  border-color: hsl(221, 14%, 21%);
}

.button.is-info-white.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: white;
  border-color: white;
}

.button.is-info-white.is-arrow:hover, .button.is-info-white.is-arrow:active {
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}

.button.is-info-white.is-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: white;
}

.button.is-info-white.is-arrow::after {
  content: "";
  position: absolute;
  top: 40.5%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: white;
  transition: all 0.2s linear;
}

.button.is-info-white.is-arrow:hover::before {
  background: hsl(221, 14%, 21%);
  right: 25px;
}

.button.is-info-white.is-arrow:hover::after {
  border-left-color: hsl(221, 14%, 21%);
  right: 20px;
}

.button.is-success-white {
  background-color: #2450a3;
  color: white;
  border: 1px solid #2450a3;
  --bulma-button-border-width: 1px;
}
.button.is-success-white:hover, .button.is-success-white:focus, .button.is-success-white:active {
  background-color: white;
  color: contrast(#2450a3, hsl(221, 14%, 21%));
  border-color: hsl(221, 14%, 21%);
}

.button.is-success-white.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: white;
  border-color: white;
}

.button.is-success-white.is-arrow:hover, .button.is-success-white.is-arrow:active {
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}

.button.is-success-white.is-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: white;
}

.button.is-success-white.is-arrow::after {
  content: "";
  position: absolute;
  top: 40.5%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: white;
  transition: all 0.2s linear;
}

.button.is-success-white.is-arrow:hover::before {
  background: hsl(221, 14%, 21%);
  right: 25px;
}

.button.is-success-white.is-arrow:hover::after {
  border-left-color: hsl(221, 14%, 21%);
  right: 20px;
}

.button.is-warning-white {
  background-color: hsl(42, 100%, 53%);
  color: white;
  border: 1px solid hsl(42, 100%, 53%);
  --bulma-button-border-width: 1px;
}
.button.is-warning-white:hover, .button.is-warning-white:focus, .button.is-warning-white:active {
  background-color: white;
  color: contrast(hsl(42, 100%, 53%), hsl(221, 14%, 21%));
  border-color: hsl(221, 14%, 21%);
}

.button.is-warning-white.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: white;
  border-color: white;
}

.button.is-warning-white.is-arrow:hover, .button.is-warning-white.is-arrow:active {
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}

.button.is-warning-white.is-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: white;
}

.button.is-warning-white.is-arrow::after {
  content: "";
  position: absolute;
  top: 40.5%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: white;
  transition: all 0.2s linear;
}

.button.is-warning-white.is-arrow:hover::before {
  background: hsl(221, 14%, 21%);
  right: 25px;
}

.button.is-warning-white.is-arrow:hover::after {
  border-left-color: hsl(221, 14%, 21%);
  right: 20px;
}

.button.is-danger-white {
  background-color: hsl(348, 100%, 70%);
  color: white;
  border: 1px solid hsl(348, 100%, 70%);
  --bulma-button-border-width: 1px;
}
.button.is-danger-white:hover, .button.is-danger-white:focus, .button.is-danger-white:active {
  background-color: white;
  color: contrast(hsl(348, 100%, 70%), hsl(221, 14%, 21%));
  border-color: hsl(221, 14%, 21%);
}

.button.is-danger-white.is-arrow {
  position: relative;
  transition: all 0.2s linear;
  padding-right: 60px;
  color: white;
  border-color: white;
}

.button.is-danger-white.is-arrow:hover, .button.is-danger-white.is-arrow:active {
  color: hsl(221, 14%, 21%);
  border-color: hsl(221, 14%, 21%);
}

.button.is-danger-white.is-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1px;
  background: white;
}

.button.is-danger-white.is-arrow::after {
  content: "";
  position: absolute;
  top: 40.5%;
  right: 12px;
  border: 4px solid transparent;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-color: white;
  transition: all 0.2s linear;
}

.button.is-danger-white.is-arrow:hover::before {
  background: hsl(221, 14%, 21%);
  right: 25px;
}

.button.is-danger-white.is-arrow:hover::after {
  border-left-color: hsl(221, 14%, 21%);
  right: 20px;
}

/**---------------------------------------------
 * plan
**-----------------------------------------------*/
#plans-container > div {
  width: 24%;
}
#plans-container a {
  display: block;
  white-space: wrap;
  padding: 4px;
  max-height: 80px;
  height: 80px;
}

.modal-button {
  cursor: pointer;
}

#plan-detail-container {
  padding: 0.75rem !important;
}

/* PC向けのスタイル */
@media screen and (min-width: 769px) {
  #plans-container a {
    padding-top: 10px;
  }
  #plan-detail-container {
    padding: 1.6rem !important;
  }
}
#tag-facilities,
#tag-includes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* PC向けのスタイル */
}
#tag-facilities div,
#tag-includes div {
  flex-basis: calc(50% - 7px); /* 画像の幅を指定し、適宜マージンやパディングを引く */
  margin-bottom: 0.5em;
}
#tag-facilities div:nth-of-type(odd),
#tag-includes div:nth-of-type(odd) {
  margin-right: 14px;
}
#tag-facilities div:nth-of-type(even),
#tag-includes div:nth-of-type(even) {
  margin-right: 0;
}
#tag-facilities div .tag,
#tag-includes div .tag {
  width: 100%;
  color: #fff;
  background-color: #b0b0b0;
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  #tag-facilities div,
  #tag-includes div {
    flex-basis: calc(20% - 12px); /* 画像の幅を指定し、適宜マージンやパディングを引く */
    margin-bottom: 0.5em;
  }
  #tag-facilities div:nth-of-type(odd),
  #tag-includes div:nth-of-type(odd) {
    margin-right: initial;
  }
  #tag-facilities div:not(:nth-of-type(5n)),
  #tag-includes div:not(:nth-of-type(5n)) {
    margin-right: 14px;
  }
  #tag-facilities div .tag,
  #tag-includes div .tag {
    font-size: 16px;
  }
}

.card.plan {
  border: 1px solid #333;
  position: relative;
}
.card.plan div.header {
  background-color: white;
  position: absolute;
  top: -1em;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-plan {
  display: flex;
  justify-content: center;
}
.header-plan div {
  flex-basis: calc(25% - 10px); /* 画像の幅を指定し、適宜マージンやパディングを引く */
}

.plan {
  cursor: pointer;
  background-color: #c0c0c0;
  box-sizing: border-box;
}

.plan.is-active {
  background-color: rgb(232, 232, 232);
  border-top: 5px solid #242840;
  box-sizing: border-box;
}

#plan-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* PC向けのスタイル */
}
#plan-item-list div {
  flex-basis: calc(33.333% - 10px); /* 画像の幅を指定し、適宜マージンやパディングを引く */
  margin: 5px; /* 余白を調整 */
  position: relative;
}
#plan-item-list div i {
  position: absolute;
  z-index: 10;
  top: 5px;
  right: 5px;
  color: #d0d0d0;
}
@media screen and (min-width: 769px) {
  #plan-item-list div {
    flex-basis: calc(16.66666% - 10px); /* 画像の幅を指定し、適宜マージンやパディングを引く */
    margin: 5px; /* 余白を調整 */
  }
}

.flower-feature {
  background-color: #fff;
  padding: 0.2rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
}
.flower-feature div.feature-comment {
  white-space: nowrap;
  font-size: 0.75rem !important;
  text-align: center;
}
.flower-feature div:last-child {
  width: 6rem;
}
.flower-feature div:last-child img {
  width: 100%;
  height: auto;
}

.concept {
  position: relative;
  width: 100%;
  height: 100vw;
  max-height: 640px;
}
.concept img {
  position: absolute;
  width: 100%;
  height: auto;
}
.concept .concept_inner {
  position: relative;
  box-sizing: border-box;
  height: 100%;
}
.concept .concept_inner h3 {
  text-shadow: white 2px 0px 2px, white -2px 0px 2px, white 0px -2px 2px, white -2px 0px 2px, white 2px 2px 2px, white -2px 2px 2px, white 2px -2px 2px, white -2px -2px 2px, white 1px 2px 2px, white -1px 2px 2px;
}
.concept .concept_inner p {
  text-shadow: white 2px 0px 2px, white -2px 0px 2px, white 0px -2px 2px, white -2px 0px 2px, white 2px 2px 2px, white -2px 2px 2px, white 2px -2px 2px, white -2px -2px 2px, white 1px 2px 2px, white -1px 2px 2px;
}
.concept.flower .element_container {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.concept.message .element_container {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.concept.oneday .element_container {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.concept.family .element_container {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.concept.funeral .concept_inner {
  position: relative;
}
.concept.funeral .concept_inner .element_container h3 {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: white;
  text-shadow: black 2px 0px 2px, black -2px 0px 2px, black 0px -2px 2px, black -2px 0px 2px, black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px, black 1px 2px 2px, black -1px 2px 2px;
}
.concept.funeral .concept_inner .element_container p {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: white;
  text-shadow: black 2px 0px 2px, black -2px 0px 2px, black 0px -2px 2px, black -2px 0px 2px, black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px, black 1px 2px 2px, black -1px 2px 2px;
}

@media screen and (min-width: 769px) {
  .concept.flower .element_container {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
  }
  .concept.oneday .element_container {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
  }
  .concept.family .element_container {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
  }
  .concept.funeral .concept_inner .element_container h3 {
    right: 2.5rem;
    top: 2.5rem;
  }
  .concept.funeral .concept_inner .element_container p {
    right: 2.5rem;
    bottom: 2.5rem;
  }
}
form .field-body {
  display: flex;
  flex-direction: column !important;
}

.radio + .radio {
  margin-inline-start: 1.5em;
}

.accordion .accordion-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion .accordion-toggle::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 12px;
  height: 12px;
  background-image: url("/assets/image/caret-down.svg"); /* 画像のパスを更新 */
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}
.accordion li.is-active .accordion-toggle::after {
  transform: rotate(180deg);
}
.accordion div.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion.news a.accordion-toggle {
  color: hsl(221, 14%, 4%);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid hsl(221, 14%, 86%);
  padding-right: 2rem;
}

/* PC向けのスタイル */
@media screen and (min-width: 769px) {
  body {
    font-size: 17px;
  }
  .title.is-1 {
    font-size: 4rem !important;
  }
  .title.is-2 {
    font-size: 3rem !important;
  }
  .title.is-3 {
    font-size: 2.5rem !important;
  }
  .title.is-4 {
    font-size: 2rem !important;
  }
  .title.is-5 {
    font-size: 1.5rem !important;
  }
  .title.is-6 {
    font-size: 1.25rem !important;
  }
  .title.is-7 {
    font-size: 1rem !important;
  }
  .is-size-1 {
    font-size: 4rem !important;
  }
  .is-size-2 {
    font-size: 3rem !important;
  }
  .is-size-3 {
    font-size: 2.5rem !important;
  }
  .is-size-4 {
    font-size: 2rem !important;
  }
  .is-size-5 {
    font-size: 1.5rem !important;
  }
  .is-size-6 {
    font-size: 1.25rem !important;
  }
  .is-size-7 {
    font-size: 1rem !important;
  }
  .breadcrumb {
    font-size: 1rem !important;
  }
  #facility-drawings {
    max-width: 600px;
    margin: 0 auto;
  }
  #footer-sitemap {
    padding: 0 10%;
  }
  .footer {
    padding-bottom: 3rem !important;
  }
  .field-label {
    flex-grow: 2;
  }
}
.footer.has-background-light {
  color: #242840;
}
.footer.has-background-light a {
  color: #242840;
}
.footer.has-background-light strong {
  color: #242840;
  font-weight: bold;
}

.footer.has-background-primary-dark {
  color: hsl(221, 14%, 96%);
}
.footer.has-background-primary-dark a {
  color: hsl(221, 14%, 96%);
}
.footer.has-background-primary-dark strong {
  color: hsl(221, 14%, 96%);
  font-weight: bold;
}

html body div.container p {
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

.is-fullheight,
.hero.is-fullheight {
  min-height: calc(100dvh - 60px);
}

@media screen and (min-width: 769px) {
  .is-fullheight,
  .hero.is-fullheight {
    min-height: calc(100dvh - 120px);
  }
}
.is-fullheight-image {
  min-height: calc(100dvh - 60px);
  width: 100%;
  overflow: hidden;
  position: relative;
  font-size: 16px;
}
.is-fullheight-image img {
  min-height: calc(100dvh - 60px);
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

div.site {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main.site-main {
  flex: 1;
}

#glonal_footer_menu > li.menu-item {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: var(--bulma-column-gap);
}
#glonal_footer_menu > li.menu-item > a {
  font-weight: bold;
  margin-bottom: 0.8rem;
}

div.field.is-horizontal .field-label {
  flex-grow: 2;
}

/**---------------------------------------------
 * ローディング画面
**-----------------------------------------------*/
#modal-loading .ph.ph-circle-notch {
  color: hsl(42, 100%, 53%);
  font-size: 3rem;
  z-index: 41;
  animation: rotate 1s linear infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media screen and (min-width: 769px) {
  div.front-plan-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }
  div.front-plan-inner > div:nth-of-type(2) {
    padding: 1em 1.6em;
    max-width: 480px;
    width: 100%;
  }
}
.is-lined {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.linetitle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 0.8em;
}

.line {
  border-bottom: 1px solid rgb(44, 16, 7);
  flex-grow: 1;
  height: 0;
}

#member_card_old {
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 0.8em 1.8em;
}

.member-columns .hero {
  width: 100%;
  height: auto;
}

/**---------------------------------------------
 * top plan timeline
**-----------------------------------------------*/
.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #505050;
  color: white;
  padding: 6px 10px;
  margin: 0 10px;
  white-space: nowrap;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  height: 2px;
  background-color: #505050;
  color: white;
  transform: translateY(-50%);
}

.breadcrumb {
  font-size: 1rem !important;
}

#facility-drawings {
  max-width: 600px;
  margin: 0 auto;
}

#footer-sitemap {
  padding: 0 10%;
}

.footer {
  padding-bottom: 3rem !important;
}

.field-label {
  flex-grow: 2;
}

p.block {
  line-height: 1.8;
}

.title {
  line-height: 2.2 !important;
  font-weight: 600 !important;
}

.banner-primary {
  border-radius: 100px;
  margin: 0;
  padding: 0 2em;
  display: inline-block;
  background-color: #242840;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.btnPhone01 {
  width: 300px;
  margin: 0 auto;
}
.btnPhone01 .tag {
  background-color: #fff;
  border: 1px solid #242840;
  color: #242840;
  font-size: 1rem;
  width: 136px;
}

#header-h1 {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  color: hsl(221, 14%, 100%);
  background-color: #242840;
}

/**---------------------------------------------
 * お急ぎの方へ
 * 他社との比較・相談のみでも 大丈夫です。
**-----------------------------------------------*/
.box-primary {
  background-color: --bulma-primary-light;
  padding: 1.2em 2em;
  border: 1px solid #000;
}

/**---------------------------------------------
 * 共通
 * 式場施設一覧表
**-----------------------------------------------*/
[data-id=facilities-list] {
  margin-bottom: 3rem;
}
[data-id=facilities-list] table {
  font-size: 16px !important;
}

.facilitiy {
  width: calc(25% - 0.75em);
}

/**---------------------------------------------
 * 式場写真
**-----------------------------------------------*/
@media screen and (min-width: 769px) {
  .is-reverse-tablet {
    flex-direction: row-reverse;
  }
}
#facility-sections h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem !important;
  line-height: 2.2;
  word-break: break-word;
  margin-bottom: var(--bulma-block-spacing);
  --bulma-title-family: false;
  --bulma-title-size: var(--bulma-size-3);
  --bulma-title-line-height: 1.125;
  --bulma-title-strong-weight: inherit;
  --bulma-title-sub-size: 0.75em;
  --bulma-title-sup-size: 0.75em;
  --bulma-subtitle-color: var(--bulma-text);
  --bulma-subtitle-family: false;
  --bulma-subtitle-size: var(--bulma-size-5);
  --bulma-subtitle-weight: var(--bulma-weight-normal);
  --bulma-subtitle-line-height: 1.25;
  --bulma-subtitle-strong-color: var(--bulma-text-strong);
  --bulma-subtitle-strong-weight: var(--bulma-weight-semibold);
  --bulma-title-weight: var(--bulma-weight-semibold);
  font-weight: 600;
}
#facility-sections p {
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.googlemap {
  width: 100%;
  height: 300px;
}
@media screen and (min-width: 769px) {
  .googlemap {
    height: 400px;
  }
}

#plans-container a {
  display: block;
  white-space: wrap;
  padding: 4px;
  max-height: 80px;
  height: 80px;
}
@media screen and (min-width: 769px) {
  #plans-container a {
    padding-top: 10px;
  }
}

.has-text-smallest {
  font-size: 0.7rem !important;
}
/*# sourceMappingURL=style.css.map */