@charset "UTF-8";
.sec-first .deco {
  color: #FEF0F6;
  top: 144px;
}
.sec-first .deco img {
  /* max-width: 354px; */
  min-width: 354px;
  opacity: 0.2;
}
@media only screen and (max-width: 640px) {
  .sec-first .deco img {
    opacity: 0.1;
  }
}

.gnav {
  background: #d20000;
}

.sec-br h2, .sec-service h2, .sec-flow h2, .sec-staff h2, .sec-map h2 {
  color: #d20000;
  border-bottom-color: #d20000;
}

@media only screen and (max-width: 640px) {
  .sec-br .area-shop img {
    margin-bottom: 8px;
  }
}
.sec-br .area-gift {
  gap: 32px;
  justify-content: center;
}
@media only screen and (max-width: 640px) {
  .sec-br .area-gift {
    flex-direction: column;
    align-items: center;
  }
}
.sec-br .area-gift .box-img {
  max-width: 339px;
}
.sec-br .area-gift .button a {
  margin-left: 0;
}
@media only screen and (max-width: 640px) {
  .sec-br .area-gift .button a {
    margin-left: auto;
  }
}
.sec-br dl {
  margin-bottom: 1em;
}
.sec-br iframe {
  width: 332px;
}
@media only screen and (max-width: 640px) {
  .sec-br iframe {
    width: 100%;
  }
}

@media only screen and (max-width: 1024px) {
  .sec-service .box-grid.col-4 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sec-service .box-grid.col-4 div + div {
    margin-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .sec-service .box-grid.col-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sec-service {
  /* 子要素（カード） */
}
.sec-service .card {
  display: grid;
  grid-auto-rows: max-content;
  gap: 8px;
}
.sec-service .card div {
  background-color: #d20000;
}
.sec-service .card div img {
  width: 150px;
  margin: 48px auto;
}
@media only screen and (max-width: 640px) {
  .sec-service .card div img {
    margin: 0 auto;
  }
}
.sec-service .card p.t-bold {
  font-size: 18px;
  margin: 0;
}
.sec-service .card ul li {
  margin-top: 4px;
  margin-left: 16px;
  color: #333;
  list-style: disc;
}
.sec-service {
  /* デフォルトの三角矢印を消す（全ブラウザ共通） */
}
.sec-service .card details summary::-webkit-details-marker {
  display: none;
}
.sec-service .card details summary {
  display: block;
  list-style: none;
}
.sec-service {
  /* ボタン（summary）のカスタムデザイン */
}
.sec-service .btn {
  /* 左右の端に要素を散らすためにflexを採用 */
  display: inline-flex; /* 【変更】flex から inline-flex に変更 */
  justify-content: space-between;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content; /* 【変更】中のコンテンツ（テキスト＋矢印）の幅にぴったり合わせる */
  /* max-width: 300px; */ /* 【任意】幅を制限していた場合は不要になるので消すかコメントアウトします */
  padding: 8px 16px;
  background-color: #ffffff;
  color: #333333;
  font-weight: normal;
  text-align: left;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.sec-service {
  /* 右端の矢印アイコン */
}
.sec-service .btn::after {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 文字が長くなっても矢印が潰れないように固定 */
  width: 16px;
  height: 16px;
  background-image: url(/asset/common/img/arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 12px;
  position: relative;
  top: 2px;
  /* 回転アニメーションを滑らかにする設定 */
  transition: transform 0.3s ease;
}
.sec-service {
  /* 【重要】detailsが開いている状態（open属性がある時）の矢印の動き */
}
.sec-service .card details[open] .btn::after {
  transform: rotate(180deg); /* 矢印を180度回転させて上向きにする */
  top: 0;
}
.sec-service {
  /* 【追加】detailsが開いている状態の、ボタン（summary）自体の背景色 */
}
.sec-service .card details[open] .btn {
  background-color: #FFEDDB; /* ご指定の淡いオレンジ色 */
}
.sec-service {
  /* 【追加】開いている状態のボタンにマウスを乗せた時（ホバー）の演出 */
  /* 白の時と同様に、ほんの少しだけ色を濃く（暗く）して変化を出します */
}
.sec-service .card details[open] .btn:hover {
  background-color: #ffdcb8; /* 少しだけ濃いめのオレンジ */
}
.sec-service {
  /* マウスを乗せた時（ホバー）の演出 */
}
.sec-service .btn:hover {
  background-color: #f9f9f9; /* ほんの少しだけ背景をグレーに */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px); /* 1pxだけ上に持ち上げる */
}
.sec-service {
  /* クリックした瞬間（アクティブ）の演出 */
}
.sec-service .btn:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(1px);
}
.sec-service {
  /* リンク全体の共通スタイル調整 */
}
.sec-service a[target=_blank] {
  display: inline-flex;
  align-items: center; /* 文字とアイコンの縦割りを中央揃えに */
  text-decoration: none;
  margin-top: 0.5em;
}
.sec-service {
  /* 通常時の外部リンクアイコン表示 */
}
.sec-service a[target=_blank]::after {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* アイコンが文字に押されて潰れるのを防ぐ */
  width: 16px; /* アイコンの横幅（サイトに合わせて調整してください） */
  height: 16px; /* アイコンの縦幅 */
  margin-left: 6px; /* 文字とアイコンの間の隙間 */
  /* 通常時のアイコン画像 */
  background-image: url(/asset/common/img/icon_blank.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* 切り替わりを滑らかにする（不要なら削除してください） */
  transition: background-image 0.2s ease;
}
.sec-service {
  /* マウスオーバー（ホバー）時のアイコン画像切り替え */
}
.sec-service a[target=_blank]:hover::after {
  /* ホバー時のアイコン画像 */
  background-image: url(/asset/common/img/icon_blank_hover.svg);
}

.sec-flow .box-grid.col-3 {
  max-width: 880px;
  margin: auto;
  -moz-column-gap: 80px;
       column-gap: 80px;
  /* 子要素（カード） */
}
.sec-flow .box-grid.col-3 .card {
  background-color: #fcf2f2;
  background-color: rgba(210, 0, 0, 0.0509803922);
  background-color: rgba(210, 0, 0, 0.05);
  display: grid;
  grid-auto-rows: max-content;
  gap: 0;
  position: relative;
}
.sec-flow .box-grid.col-3 .card img {
  margin: 32px auto 16px;
}
.sec-flow .box-grid.col-3 .card h3 {
  color: #d20000;
  text-align: center;
  margin-bottom: 16px;
  margin-top: 0;
}
.sec-flow .box-grid.col-3 .card p {
  padding: 0 24px;
  margin-bottom: 32px;
}
.sec-flow .box-grid.col-3 .card::after {
  content: "";
  width: 16px;
  height: 30px;
  background-image: url(/asset/benry/img/icon_arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 12px;
  position: absolute;
  top: calc(50% - 15px);
  bottom: 50%;
  right: -48px;
}
@media screen and (max-width: 640px) {
  .sec-flow .box-grid.col-3 .card::after {
    transform: rotate(90deg);
    transform-origin: center;
    top: auto;
    bottom: -55px;
    left: calc(50% - 20px);
  }
}
.sec-flow .box-grid.col-3 .card:last-child::after {
  background: none;
}
@media screen and (max-width: 640px) {
  .sec-flow .box-grid div + div {
    margin-top: 80px;
  }
}
.sec-flow h3 {
  text-align: center;
  margin-top: 32px;
}

.sec-map .maps > div {
  padding: 24px 0;
}
.sec-map .maps > div:first-child {
  padding-top: 0;
}
.sec-map .maps > div:last-child {
  padding-bottom: 0;
}
.sec-map .maps > div + div {
  border-top: 1px solid #ddd;
}
.sec-map .box-grid > div {
  width: 100%;
}
.sec-map .box-grid > div img, .sec-map .box-grid > div iframe {
  width: 100%;
}
.sec-map .box-grid > div iframe {
  height: 100%;
}
@media screen and (max-width: 640px) {
  .sec-map .box-grid > div iframe {
    height: 70vw;
  }
}/*# sourceMappingURL=style.css.map */