@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : pages.css
 Style Info : コンテンツの共通スタイル
====================================================== */

/*****************************************
 * コンテンツ周り
 ****************************************/

#contents .contents-block + .contents-block {
  margin-top: 8rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  #contents .contents-block + .contents-block {
    margin-top: 10rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  #contents .contents-block + .contents-block {
    margin-top: 12rem;
  }

}

#contents .contents-box + .contents-box {
  margin-top: 3rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  #contents .contents-box + .contents-box {
    margin-top: 4rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  #contents .contents-box + .contents-box {
    margin-top: 5rem;
  }

}

#contents .items-box + .items-box {
  margin-top: 2.5rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  #contents .items-box + .items-box {
    margin-top: 3rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  #contents .items-box + .items-box {
    margin-top: 3.5rem;
  }

}

/*****************************************
 * max-width
 ****************************************/

.max-w-1000 {
  margin-inline: auto;
  width: min(80%, 1000px);
}

.max-w-1180 {
  margin-inline: auto;
  width: min(90%, 1180px);
}

.max-w-94pct {
  margin-inline: auto;
  width: 90%;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .max-w-94pct {
    width: 92%;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .max-w-94pct {
    width: 94%;
  }

}

/*****************************************
 * テーブル
 ****************************************/

.scroll-table {
  overflow-x: auto;
  display: block;
}

.scroll-table th,
.scroll-table td {
  white-space: nowrap;
}

table {
  width: 100%;
}

td, th {
  padding: 1.5rem;
  border: solid 1px var(--table-border-color);
  border-collapse: collapse;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  td, th {
    padding-inline: 2.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  td, th {
    padding-inline: 3.5rem;
  }

}

th {
  color: var(--basecolor3);
  font-weight: normal;
  background: var(--table-th-bgcolor);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  th {
    text-align: center;
  }

}

/*****************************************
 * テーブル（grid）
 ****************************************/

.grid-table {
  display: grid;
  border-top: solid 1px var(--table-border-color);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  .grid-table {
    grid-template-columns: auto 1fr;
  }

  .grid-table:has(.cell:nth-child(3)) {
    grid-template-columns: repeat(3, auto);
  }

  .grid-table:has(.cell:nth-child(3)) .cell:nth-child(3) {
    border-left: solid 1px var(--table-border-color);
  }

}

.grid-table > .row {
  display: contents;
}

.grid-table > .row > .cell {
  padding: 1.6rem 1.5rem;
  border-bottom: solid 1px var(--table-border-color);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  .grid-table > .row > .cell {
    padding: 1.8rem 2.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  .grid-table > .row > .cell {
    padding: 2rem 3.5rem;
  }

}

.grid-table > .row > .cell:first-of-type {
  display: grid;
  background: var(--table-th-bgcolor);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  .grid-table > .row > .cell:first-of-type {
    justify-content: center;
  }

}

/*****************************************
 * グリッドレイアウト
 ****************************************/

.grid-items {
  display: grid;
  gap: 1rem;
}

/*****************************************
 * 見出し
 ****************************************/

[class*="heading-text"] {
  letter-spacing: .1rem;
}

.heading-text-01 {
  letter-spacing: .6rem;
  position: relative;
  margin-bottom: calc(3rem + 4px);
  margin-inline: auto;
  width: fit-content;
  padding: .6rem 2.6rem;
  font-size: 2.2rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-01 {
    letter-spacing: .8rem;
    margin-bottom: calc(4rem + 4px);
    padding: .8rem 2.8rem;
    font-size: 2.4rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-01 {
    letter-spacing: 1rem;
    margin-bottom: calc(5rem + 4px);
    padding: 1rem 3rem;
    font-size: 2.6rem;
  }

}

.heading-text-01::before,
.heading-text-01::after,
.heading-text-01 span::before,
.heading-text-01 span::after {
  content: '';
  position: absolute;
  background: var(--basecolor1);
}

.heading-text-01::before,
.heading-text-01 span::before {
  width: 20px;
  height: 1px;
}

.heading-text-01::after,
.heading-text-01 span::after {
  width: 1px;
  height: 20px;
}

.heading-text-01::before {
  top: 0;
  left: 0;
}

.heading-text-01::after {
  top: -4px;
  left: 4px;
}

.heading-text-01 span::before {
  right: 0;
  bottom: 0;
}

.heading-text-01 span::after {
  right: 4px;
  bottom: -4px;
}

.heading-text-02 {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  color: var(--basecolor4);
  font-size: 2rem;
  border-bottom: 1px solid;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-02 {
    font-size: 2.4rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-02 {
    font-size: 2.8rem;
  }

}

.heading-text-03 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2rem;
  margin-bottom: 3rem;
  font-size: 1.8rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-03 {
    gap: .8rem;
    margin-bottom: 3.5rem;
    font-size: 2rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-03 {
    gap: 1.4rem;
    margin-bottom: 4rem;
    font-size: 2.2rem;
  }

}

.heading-text-03::before,
.heading-text-03::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--basecolor1);
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-03::before,
  .heading-text-03::after {
    width: 50px;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-03::before,
  .heading-text-03::after {
    width: 60px;
  }

}

.heading-text-03::before {
  margin-right: 1rem;
}

.heading-text-03::after {
  margin-left: 1rem;
}

.heading-text-04 {
  letter-spacing: .3rem;
  margin-bottom: 5rem;
  font-size: 2.6rem;
  text-align: center;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-04 {
    margin-bottom: 6rem;
    font-size: 2.8rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-04 {
    margin-bottom: 7rem;
    font-size: 3rem;
  }

}

.heading-text-05 {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  color: var(--basecolor4);
  font-size: 1.8rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-05 {
    font-size: 2rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-05 {
    font-size: 2.2rem;
  }

}

.heading-text-05::before,
.heading-text-05::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
}

.heading-text-05::before {
  width: 100%;
  border-bottom: 2px solid var(--basecolor6);
}

.heading-text-05::after {
  width: 70px;
  border-bottom: 2px solid var(--basecolor5);
}

.heading-text-06 {
  position: relative;
  margin-bottom: 4rem;
  margin-inline: auto;
  width: fit-content;
  font-size: 1.6rem;
  font-weight: 500;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .heading-text-06 {
    font-size: 1.8rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .heading-text-06 {
    font-size: 2rem;
  }

}

.heading-text-06::after {
  content: '';
  position: absolute;
  bottom: -2rem;
  left: 50%;
  translate: -50%;
  width: 30px;
  height: 2px;
  background: var(--basecolor1);
}

/*****************************************
 * テキスト
 ****************************************/

.top-desc-text {
  margin-bottom: 3rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .top-desc-text {
    margin-bottom: 3.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .top-desc-text {
    margin-bottom: 4rem;
  }

}

.note-text {
  padding: 1.6rem;
  font-size: 1.3rem;
  background: var(--basecolor10);
  border-radius: var(--radius);
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .note-text {
    padding: 2rem 1.4rem;
    font-size: 1.4rem;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .note-text {
    padding-block: 3rem;
    font-size: 1.5rem;
  }

}

.note-text p:not(:last-child) {
  margin-bottom: 1rem;
}

.text-box > * {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .text-box > * {
    line-height: 1.7;
    margin-bottom: 1.2rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .text-box > * {
    line-height: 1.8;
    margin-bottom: 1.4rem;
  }

}

.text-box > *:last-child {
  margin-bottom: 0;
}

/*****************************************
 * ボタン
 ****************************************/

[class*="btn-style"] {
  display: grid;
  place-content: center;
  position: relative;
  width: min(270px, 100%);
  height: 50px;
  color: var(--basecolor1);
  font-weight: 500;
  border: 1px solid;
  transition: all .3s ease;
}

[class*="btn-style"].center {
  margin-inline: auto;
}

[class*="btn-style"].right {
  margin-left: auto;
}

[class*="btn-style"].full {
  width: 100%;
}

.btn-style-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--basecolor3);
  border-top: 1px solid var(--basecolor5);
  border-right: none;
  border-bottom: 1px solid var(--basecolor5);
  border-left: none;
}

.btn-style-01::before,
.btn-style-01::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 112%;
  background: var(--basecolor5);
}

.btn-style-01::before {
  left: 2px;
}

.btn-style-01::after {
  right: 2px;
}

@media (any-hover: hover) {

  .btn-style-01:hover {
    color: var(--basecolor2);
    background: var(--basecolor5);
  }

  .btn-style-01:hover::before,
  .btn-style-01:hover::after {
    height: 100%
  }

}

/*****************************************
 * iconify
 ****************************************/

.iconify {
  display: block;
  width: 32px;
  aspect-ratio: 1;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

.iconify[class*="position-"] {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.position-right {
  right: 10px;
}

.position-left {
  left: 10px;
}

[data-icon="arrow-right"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 40 40'%3E%3Cpath fill='%23000' d='M24.73 28.146a.5.5 0 0 0 .36-.153l7.359-7.631a.5.5 0 0 0 0-.693l-7.391-7.662a.5.5 0 1 0-.72.693l7.056 7.315l-7.024 7.284a.5.5 0 0 0 .36.847'/%3E%3Cpath fill='%23000' d='M7.91 20.515h24.18a.5.5 0 0 0 0-1H7.91a.5.5 0 0 0 0 1'/%3E%3C/svg%3E");
}

[data-icon="arrow-right-broken"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M4 12h2.5M20 12l-6-6m6 6l-6 6m6-6H9.5'/%3E%3C/svg%3E");
}

[data-icon="left-filled"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m5.293 8l3.854 3.854l.707-.707L6.707 8l3.147-3.146l-.707-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

[data-icon="pdf-outline"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23000' d='M2.5 6.5V6H2v.5zm4 0V6H6v.5zm0 4H6v.5h.5zm7-7h.5v-.207l-.146-.147zm-3-3l.354-.354L10.707 0H10.5zM2.5 7h1V6h-1zm.5 4V8.5H2V11zm0-2.5v-2H2v2zm.5-.5h-1v1h1zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 5 7.5zM3.5 7a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 3.5 6zM6 6.5v4h1v-4zm.5 4.5h1v-1h-1zM9 9.5v-2H8v2zM7.5 6h-1v1h1zM9 7.5A1.5 1.5 0 0 0 7.5 6v1a.5.5 0 0 1 .5.5zM7.5 11A1.5 1.5 0 0 0 9 9.5H8a.5.5 0 0 1-.5.5zM10 6v5h1V6zm.5 1H13V6h-2.5zm0 2H12V8h-1.5zM2 5V1.5H1V5zm11-1.5V5h1V3.5zM2.5 1h8V0h-8zm7.646-.146l3 3l.708-.708l-3-3zM2 1.5a.5.5 0 0 1 .5-.5V0A1.5 1.5 0 0 0 1 1.5zM1 12v1.5h1V12zm1.5 3h10v-1h-10zM14 13.5V12h-1v1.5zM12.5 15a1.5 1.5 0 0 0 1.5-1.5h-1a.5.5 0 0 1-.5.5zM1 13.5A1.5 1.5 0 0 0 2.5 15v-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

[data-icon="insta-fill"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M3 11c0-3.771 0-5.657 1.172-6.828S7.229 3 11 3h2c3.771 0 5.657 0 6.828 1.172S21 7.229 21 11v2c0 3.771 0 5.657-1.172 6.828S16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172S3 16.771 3 13zm15-3.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M14 13a2 2 0 1 1-4 0a2 2 0 0 1 4 0m2 0a4 4 0 1 1-8 0a4 4 0 0 1 8 0' clip-rule='evenodd'/%3E%3C/svg%3E");
}

[data-icon="twitter-x-fill"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z'/%3E%3C/svg%3E");
}

[data-icon="baseline-facebook"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95'/%3E%3C/svg%3E");
}

[data-icon="youtube"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73'/%3E%3C/svg%3E");
}

[data-icon="line"] {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cg fill='%23000' clip-path='url(%23mageLine0)'%3E%3Cpath d='M9.33 12.22v.52c0 .09-.05.13-.14.13H7.12c-.12 0-.16 0-.16-.16V9.5c0-.13 0-.17.17-.17h.46c.12 0 .16.05.16.16v2.56h1.47a.13.13 0 0 1 .115.113a.1.1 0 0 1-.005.057m1.28-2.73v3.22c0 .12 0 .16-.17.16q-.24.015-.48 0a.14.14 0 0 1-.16-.16V9.49a.15.15 0 0 1 .2-.17h.47a.15.15 0 0 1 .14.17m3.63-.01v3.23c0 .11 0 .15-.16.15h-.51a.14.14 0 0 1-.12-.06l-.75-1l-.7-.95v-.07v1.94c0 .14 0 .17-.17.17h-.46a.14.14 0 0 1-.155-.095a.14.14 0 0 1-.005-.065V9.5a.14.14 0 0 1 .15-.15h.55a.13.13 0 0 1 .09.06L13.1 11l.29.39v.05V9.5c0-.13.05-.18.18-.18h.45c.16 0 .22.05.22.16m2.91.02v.5c0 .11 0 .16-.15.16h-1.35c-.07 0-.07 0-.07.07v.42c0 .08 0 .08.07.08H17c.13 0 .17.05.17.18v.46a.14.14 0 0 1-.16.16h-1.36c-.07 0-.07 0-.07.08V12c0 .08 0 .08.07.08H17c.12 0 .16 0 .16.17v.46c0 .12 0 .16-.16.16h-2.05c-.18 0-.17 0-.17-.16V9.5c0-.12.05-.17.17-.17h2c.16 0 .2.05.2.17'/%3E%3Cpath d='M18 2H6a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V6a4 4 0 0 0-4-4m1.1 11a6.4 6.4 0 0 1-1 1.58a14 14 0 0 1-2.18 2q-1.381 1.085-2.88 2c-.31.19-.63.36-.95.52a.94.94 0 0 1-.46.13a.23.23 0 0 1-.27-.26a3 3 0 0 1 0-.41a5 5 0 0 0 .11-.94a.48.48 0 0 0-.28-.45a1.7 1.7 0 0 0-.53-.16a8.8 8.8 0 0 1-2.76-.88a6.9 6.9 0 0 1-2.13-1.69a5.5 5.5 0 0 1-1.21-2.46c0-.21-.06-.42-.08-.64s0-.41 0-.62a5 5 0 0 1 .36-1.61A6.1 6.1 0 0 1 6 7.25a7.5 7.5 0 0 1 2.51-1.73A9 9 0 0 1 10.36 5l.76-.1h1.69a8.6 8.6 0 0 1 3.28.95c.71.365 1.356.844 1.91 1.42a5.5 5.5 0 0 1 1.27 2.14c.11.323.181.66.21 1v.65A4.7 4.7 0 0 1 19.1 13'/%3E%3Cpath d='M14.24 9.48v3.23c0 .11 0 .15-.16.15h-.51a.14.14 0 0 1-.12-.06l-.75-1l-.7-.95v-.07v1.94c0 .14 0 .17-.17.17h-.46a.14.14 0 0 1-.155-.095a.14.14 0 0 1-.005-.065V9.5a.14.14 0 0 1 .15-.15h.55a.13.13 0 0 1 .09.06L13.1 11l.29.39v.05V9.5c0-.13.05-.18.18-.18h.45c.16 0 .22.05.22.16m1.34.72v.42c0 .08 0 .08.07.08H17c.13 0 .17.05.17.18v.46a.14.14 0 0 1-.16.16h-1.36c-.07 0-.07 0-.07.08V12c0 .08 0 .08.07.08H17c.12 0 .16 0 .16.17v.46c0 .12 0 .16-.16.16h-2.05c-.18 0-.17 0-.17-.16V9.5c0-.12.05-.17.17-.17h2c.12 0 .16.05.16.17v.5c0 .11 0 .16-.15.16h-1.31c-.07-.03-.07-.03-.07.04m-6.25 2.02v.52c0 .09-.05.13-.14.13H7.12c-.12 0-.16 0-.16-.16V9.5c0-.13 0-.17.17-.17h.46c.12 0 .16.05.16.16v2.56h1.47a.13.13 0 0 1 .115.113a.1.1 0 0 1-.005.057m1.28-2.73v3.22c0 .12 0 .16-.17.16q-.24.015-.48 0a.14.14 0 0 1-.16-.16V9.49a.15.15 0 0 1 .2-.17h.47a.15.15 0 0 1 .14.17'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='mageLine0'%3E%3Cpath fill='%23fff' d='M2 2h20v20H2z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
}

/*****************************************
 * ページタイトル
 ****************************************/

#page-title-block {
  position: relative;
  display: grid;
  place-content: center;
  margin-bottom: 2rem;
  height: 140px;
  color: var(--basecolor2);
  background: url(../img/common/page-title-block-bg.webp) no-repeat center / cover;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #page-title-block {
    margin-bottom: 2.5rem;
    height: 180px;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #page-title-block {
    margin-bottom: 3rem;
    height: 220px;
  }

}

#page-title-block::after {
  content: '';
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgb(51 51 51 / .6);
}

#page-title-text {
  z-index: 2;
  letter-spacing: .2rem;
  position: relative;
  font-size: 2.6rem;
  text-align: center;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #page-title-text {
    font-size: 2.8rem;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #page-title-text {
    font-size: 3rem;
  }

}

#page-title-text::after {
  content: attr(data-en-title);
  letter-spacing: .1rem;
  display: block;
  text-transform: capitalize;
  margin-top: .5rem;
  font-size: 1.6rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #page-title-text::after {
    font-size: 1.7rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #page-title-text::after {
    font-size: 1.8rem;
  }

}

/*****************************************
 * パンくず
 ****************************************/

#my-breadcrumbs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: .6rem;
  margin-bottom: 5rem;
  padding-block: .6rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #my-breadcrumbs {
    margin-bottom: 6rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #my-breadcrumbs {
    margin-bottom: 7rem;
  }

}

#my-breadcrumbs > li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgb(76 76 76 / .7);
  font-size: 1.3rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #my-breadcrumbs > li {
    font-size: 1.4rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #my-breadcrumbs > li {
    font-size: 1.5rem;
  }

}

#my-breadcrumbs > li:not(:last-child):after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid rgb(76 76 76 / .5);
  border-left: 1px solid rgb(76 76 76 / .5);
  rotate: 135deg;
}

#my-breadcrumbs > li > a {
  color: var(--basecolor3);
  font-weight: 500;
}

/*****************************************
 * SNS
 ****************************************/

.sns-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.sns-box > li > a {
  display: grid;
  place-content: center;
}

.sns-box > li > a > .iconify {
  background-color: var(--basecolor2);
}

/*****************************************
 * video
 ****************************************/

video {
  width: 100%;
}

/*****************************************
 * iframe
 ****************************************/

.wrap-video iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

.wrap-street-view iframe {
  width: 100%;
  height: 200px;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  .wrap-street-view iframe {
    height: 350px;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .wrap-street-view iframe {
    height: 500px;
  }

}

.wrap-map iframe {
  width: 100%;
  height: 200px;
  filter: grayscale(30%);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  .wrap-map iframe {
    height: 300px;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .wrap-map iframe {
    height: 400px;
  }

}

/*****************************************
 * 画像
 ****************************************/

img {
  display: block;
  max-width: auto;
  width: 100%;
  vertical-align: bottom;
}

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

  img {
    image-rendering: -webkit-optimize-contrast;
  }

}

.trim-img {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.trim-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radius-img {
  border-radius: var(--radius);
}

.full-img {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .full-img {
    margin-inline: 0;
    width: 100%;
  }

}

@media (any-hover: hover) {

  .hover-img {
    transition: all .3s ease-in-out;
  }

  .hover-img:hover {
    opacity: .7;
  }

}

/*****************************************
 * フォーム周り
 ****************************************/

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  padding: 1rem;
  width: 100%;
  color: var(--basecolor1);
  font-size: 1.6rem;
  background: var(--basecolor2);
  border: 1px solid var(--table-border-color);
  outline: none;
}

select {
  width: min(100%, 360px);
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    padding: 1.2rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    padding: 1.4rem;
  }

}

textarea {
  resize: vertical;
  height: 150px;
}

/* 768px～（タブレット）
------------------------------------*/
@media screen and (min-width: 768px) {

  textarea {
    height: 175px;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media screen and (min-width: 960px) {

  textarea {
    height: 200px;
  }

}

textarea:focus {
  outline: none;
}

input[type="checkbox"] {
  display: none;
  appearance: none;
}

input[type="checkbox"] + span {
  position: relative;
  cursor: pointer;
}

input[type="checkbox"] + span::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: -2px 1rem 0 0;
  background: #fff;
  width: 28px;
  aspect-ratio: 1;
  border: 1px solid var(--table-border-color);
}

input[type="checkbox"]:checked + span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 10px;
  display: block;
  width: 8px;
  height: 15px;
  border-right: 2px solid var(--required-color);
  border-bottom: 2px solid var(--required-color);
  rotate: 45deg;
}

input[type="submit"] {
  letter-spacing: .1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  width: 250px;
  height: 50px;
  color: var(--basecolor2);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  background: var(--basecolor3);
  border-radius: var(--radius);
}

input[type="submit"]:disabled {
  opacity: .5;
}

/*****************************************
 * 電話番号リンク
 ****************************************/

.tel-link {
  letter-spacing: .2rem;
  white-space: nowrap;
  font-size: 2.5rem;
  font-weight: 700;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .tel-link {
    font-size: 2.7rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .tel-link {
    font-size: 2.9rem;
  }

}

.tel-link a {
  color: currentColor;
  font-size: 2.5rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  .tel-link a {
    font-size: 2.7rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  .tel-link a {
    font-size: 2.9rem;
  }

}