@charset "UTF-8";
/* =============================================================

_settings.scss

============================================================= */
/*--------------------------------------------------------------
colors
--------------------------------------------------------------*/
/*--------------------------------------------------------------
space
--------------------------------------------------------------*/
.mg-t-xs {
  margin-top: 5px;
}
.mg-t-s {
  margin-top: 10px;
}
.mg-t-m {
  margin-top: 20px;
}
.mg-t-l {
  margin-top: 40px;
}
.mg-t-xl {
  margin-top: 80px;
}
.mg-t-xxl {
  margin-top: 120px;
}
.mg-r-xs {
  margin-right: 5px;
}
.mg-r-s {
  margin-right: 10px;
}
.mg-r-m {
  margin-right: 20px;
}
.mg-r-l {
  margin-right: 40px;
}
.mg-r-xl {
  margin-right: 80px;
}
.mg-r-xxl {
  margin-right: 120px;
}
.mg-b-xs {
  margin-bottom: 5px;
}
.mg-b-s {
  margin-bottom: 10px;
}
.mg-b-m {
  margin-bottom: 20px;
}
.mg-b-l {
  margin-bottom: 40px;
}
.mg-b-xl {
  margin-bottom: 80px;
}
.mg-b-xxl {
  margin-bottom: 120px;
}
.mg-l-xs {
  margin-left: 5px;
}
.mg-l-s {
  margin-left: 10px;
}
.mg-l-m {
  margin-left: 20px;
}
.mg-l-l {
  margin-left: 40px;
}
.mg-l-xl {
  margin-left: 80px;
}
.mg-l-xxl {
  margin-left: 120px;
}

/*--------------------------------------------------------------
z-index
--------------------------------------------------------------*/
/*---------------------------------------------------------------------------

mixin

---------------------------------------------------------------------------*/
#flex_kiyaku {
  width: 100%;
}
@media screen and (min-width: 1000px) {
  #flex_kiyaku {
    display: flex;
    gap: 2%;
  }
}
@media screen and (min-width: 1000px) {
  #flex_kiyaku .kyaku-block {
    flex-basis: 48%;
    flex: 1;
  }
}

/*=====================================================================
details
=====================================================================*/
details {
  /* --------アコーディオンの中身のスタイル-------- */
  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  /* アコーディオンが開いた時のスタイル */
}
details summary {
  color: #3254ad;
  font-weight: bold;
  margin-bottom: 10px;
}
details summary::marker {
  content: "";
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:hover {
  cursor: pointer;
}
details summary .btn span {
  width: 100%;
}
details .details-content ul li {
  margin-bottom: 5px;
}
details .details-content ul li .fas {
  margin-right: 10px;
}
details::details-content {
  transition: height 0.4s, opacity 0.4s 0.4s, content-visibility 0.4s allow-discrete;
  height: 0;
  opacity: 0;
  overflow: clip;
  background-color: #fff;
  padding: 10px;
}
details[open]::details-content {
  opacity: 1;
  margin-bottom: 10px;
}
details[open] ul.name-list {
  padding: 20px;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll; /* 溢れる場合はスクロール可能にする */
  }
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}