@charset "utf-8";
/* CSS Document */

/**************************************************
root
**************************************************/
:root {
  --heightHeader: 0px;
  --heightFooter_sp: 0px;

  --base_width: 1100px;
  --base_color: #3c3c3c;
  --base_bg: #fff;

  --c_trq: #0abab5;
  --c_trq_l: #71d8d2;
  --c_nvy: #00086f;
  --c_nvy_l: #8ac0e6;
  --c_red: #dd4455;
  --c_orn: #ff7f50;
  --c_gry: #f7f7f7;

  --c_caution: red;
  --c_line: #06c755;

  --ff_jp01: "Noto Sans JP", sans-serif;
  --ff_jp02: "Noto Serif JP", serif;
  --ff_en: "Yellowtail", cursive;
  --ff_num: "Oswald", sans-serif;

  --transition: 0.3s;
}
@media (max-width: 520px) {
  :root {
    --base_width: 100%;
  }
}

body {
  padding-top: var(--heightHeader);
}
@media (max-width: 520px) {
  body {
    padding-bottom: var(--heightFooter_sp);
  }
}

/**************************************************
color
**************************************************/
/* .fc_ */
body .fc_wht {
  color: #fff;
}
body .fc_trq {
  color: var(--c_trq);
}
body .fc_nvy {
  color: var(--c_nvy);
}
body .fc_red {
  color: var(--c_red);
}

/* .bg_ */
body .bg_wht {
  background-color: #fff;
}
body .bg_trq_l_08 {
  background-color: color-mix(in srgb, var(--c_trq_l) 8%, #fff);
}
body .bg_trq_l_18 {
  background-color: color-mix(in srgb, var(--c_trq_l) 18%, #fff);
}
body .bg_gry {
  background-color: var(--c_gry);
}

/* .ff_ */
body .ff_jp01 {
  font-family: var(--ff_jp01);
}
body .ff_jp02 {
  font-family: var(--ff_jp02);
}
body .ff_en {
  font-family: var(--ff_en);
}
body .ff_num {
  font-family: var(--ff_num);
}

/* .fs */
body .fs32 {
  font-size: 3.2rem;
}

/**************************************************
.tit
**************************************************/
/* .titA */
.titA {
  font-size: 3.2rem;
  font-family: var(--ff_jp02);
  color: var(--c_trq);
}
.titA:has(span.en) {
  text-align: center;
}
.titA span.jp {
  font-weight: 600;
}
.titA span.en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ff_en);
  line-height: 1;
  text-transform: capitalize;
  color: color-mix(in srgb, var(--c_red) 50%, #fff);
}
@media (max-width: 520px) {
  .titA {
    font-size: 2.2rem;
  }
}

/* .titB */
.titB {
  font-weight: 600;
  font-family: var(--ff_jp02);
  color: var(--c_nvy);
}

/* .titC */
.titC {
  padding: 10px;
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  background-color: var(--c_orn);
}

/* .borderB */
.borderB {
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 60%, #fff);
}

/* .radius */
.radius img {
  border-radius: 6px;
}

/**************************************************
[class*="btn_"]
**************************************************/
[class*="btn_"] {
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  min-width: 300px;
  width: fit-content;
  min-height: 50px;
  margin: 0px auto;
  padding: 10px;
  text-align: center;
  color: var(--btn_color);
  background-color: var(--btn_bg);
  border: 1px solid color-mix(in srgb, var(--c_nvy) 50%, #fff);
  border-radius: 6px;
  transition: var(--transition);
}
[class*="btn_"]:hover {
  color: var(--btn_bg);
  background-color: var(--btn_color);
  opacity: 1;
}
@media (max-width: 520px) {
  [class*="btn_"] {
    min-width: auto;
    width: 100%;
  }
  [class*="btn_"].ml0 {
    margin-left: auto;
  }
}

/* [class*="btn_"].R.L */
[class*="btn_"].L,
[class*="btn_"].R {
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}
[class*="btn_"].L::after,
[class*="btn_"].R::before {
  content: "";
}
[class*="btn_"].L::before,
[class*="btn_"].R::after {
  content: "arrow_circle_right";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1;
  font-size: 2.5rem;
  line-height: 1;
}

/* [class*="btn_"] p */
[class*="btn_"] p.L,
[class*="btn_"] p.R {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 10px;
}
[class*="btn_"] p.L::before,
[class*="btn_"] p.R::after {
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
}

.btn_reserve {
  --btn_color: #fff;
  --btn_bg: var(--c_trq);
}
.btn_reserve small {
  display: block;
  color: #fff;
  background-color: var(--c_nvy);
}

/**************************************************
.link
**************************************************/
[class*="link_"] span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
[class*="link_"] span::before {
  --size: 0.7em;
  content: "";
  display: block;
  width: auto;
  height: var(--size);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
}

.link_tel {
  font-weight: 600;
  font-family: var(--ff_num);
}
.link_tel span::before {
  --mask: url(../images/icon_tel.svg) center center / contain no-repeat;
  aspect-ratio: 27 / 36;
}
.link_reserve span::before {
  --mask: url(../images/icon_reserve.svg) center center / contain no-repeat;
  aspect-ratio: 31 / 31;
}

/**************************************************
.bg_
**************************************************/
.bg_ptn {
  --color01: color-mix(in srgb, var(--c_trq_l) 18%, #fff);
  --color02: color-mix(in srgb, var(--c_nvy_l) 30%, #fff);
  background: repeating-linear-gradient(
    -45deg,
    var(--color02),
    var(--color02) 3px,
    var(--color01) 3px,
    var(--color01) 10px
  );
}
.bg_line {
  --color: color-mix(in srgb, var(--c_trq_l) 70%, #fff);
  --height: var(--heightLinear);
  background: linear-gradient(
    to top,
    var(--color) 0%,
    var(--color) var(--height),
    transparent var(--height),
    transparent 100%
  );
}

/**************************************************
.tereco
**************************************************/
ul.tereco li:nth-child(even) .flex_2c {
  flex-flow: row-reverse;
}
@media (max-width: 520px) {
  ul.tereco li:nth-child(even) .flex_2c {
    flex-flow: column;
  }
}

/**************************************************
[class*="table_"]
**************************************************/
[class*="table_"] {
  --width: 20% 1fr;
  --padding: 16px;
  --border: 1px solid color-mix(in srgb, var(--base_color) 50%, #fff);
}
[class*="table_"] table {
  width: 100%;
  text-align: left;
  border-bottom: var(--border);
}
[class*="table_"] tr {
  display: grid;
  grid-template-columns: var(--width);
}
[class*="table_"] tr > * {
  padding: var(--padding);
  border-top: var(--border);
}
[class*="table_"] tr th {
  border-right: var(--border);
}
[class*="table_"] tr td.red {
  color: var(--c_red);
}
@media (max-width: 520px) {
  [class*="table_"] {
    --width: auto;
    --padding: 10px;
  }
}

/* .table_A */
.table_A {
  --width: 18% 1fr;
}
.table_A tr th {
  font-weight: bold;
  background-color: color-mix(in srgb, var(--base_color) 10%, #fff);
}
@media (max-width: 520px) {
  .table_A {
    --width: auto;
  }
  .table_A table {
    border-left: var(--border);
  }
  .table_A tr td {
    border-right: var(--border);
  }
}

/* .table_B */
.table_B {
  --width: 1fr 1fr;
}
@media (max-width: 520px) {
  .table_B {
    --width: auto;
  }
  .table_B table {
    border-left: var(--border);
  }
  .table_B tr th {
    font-weight: bold;
    background-color: color-mix(in srgb, var(--base_color) 10%, #fff);
  }
  .table_B tr td {
    border-right: var(--border);
  }
}

/* .table_C */
.table_C {
  --width: 1fr 1fr;
  --padding: 20px;
  --border: 1px solid var(--c_trq);
}
.table_C table {
  text-align: center;
  border-left: var(--border);
}
.table_C tr:nth-child(1) th {
  color: #fff;
}
.table_C tr:nth-child(1) th:nth-child(1) {
  background-color: color-mix(in srgb, var(--c_trq) 70%, #fff);
}
.table_C tr:nth-child(1) th:nth-child(2) {
  background-color: var(--c_trq);
}
.table_C tr td {
  border-right: var(--border);
}
@media (max-width: 520px) {
  .table_C {
    --width: 30% 1fr;
    --padding: 15px;
  }
}

/* .table_D */
.table_D {
  --padding: 5px 10px;
  --border: 1px solid var(--c_trq_l);
}
.table_D table {
  text-align: center;
  border-left: var(--border);
}
.table_D tr {
  display: table-row;
}
.table_D tr:nth-child(1) th {
  color: #fff;
  background-color: var(--c_trq_l);
}
.table_D tr:nth-child(1) th:not(:last-child) {
  border-right: 1px solid #fff;
}
.table_D tr td {
  color: var(--c_trq);
  border-right: var(--border);
}
.table_D tr:nth-child(2) td:first-child {
  color: var(--base_color);
}

/**************************************************
.richtext
**************************************************/
.richtext a:not([href^="tel"]) {
  text-decoration: underline;
  color: var(--c_nvy);
}
.richtext a:not([href^="tel"]):hover {
  text-decoration: none;
}
.richtext em {
  color: var(--c_nvy);
}

/**************************************************
.sp_scroll
**************************************************/
.sp_scroll .list_flow {
  min-width: 980px;
}