@charset "utf-8";
/*--------------------------------------------------------------------------------
  .l-gnav-btn
--------------------------------------------------------------------------------*/
:root { --nav-btn-line-height: 2px; }
@media (min-width:961px) { :root { --nav-btn-width: 4.5rem; --nav-btn-height: 4.5rem; } }
@media (max-width:960px) { :root { --nav-btn-width: 4rem; --nav-btn-height: 4rem; } }
@media (max-width:640px) { :root { --nav-btn-width: 3.75rem; --nav-btn-height: 3.75rem; } }
@media (min-width:641px) { :root { --nav-btn-icon-width: 22px; --nav-btn-icon-height: 22px; --nav-btn-line-top: 5px; } }
@media (max-width:640px) { :root { --nav-btn-icon-width: 16px; --nav-btn-icon-height: 16px; --nav-btn-line-top: 4px; } }
.l-gnav-btn {
  width: var(--nav-btn-width);
  height: var(--nav-btn-height);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 300;
  margin: 1.25rem 1rem 1.25rem 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.l-gnav-btn:before {
  border-radius: 0.75rem;
  background-color: var(--red);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: var(--hover-trans);
}
.l-gnav-btn:after {
  content: "MENU";
  color: #FFF;
  font-family: var(--ff-en);
  font-size: var(--fs-3s);
  font-weight: 500;
  line-height: var(--lineh-2s);
  padding-top: 0.25rem;
}
.l-gnav-btn.is-close:after { content: "CLOSE"; }
.l-gnav-btn_icon {
  position: relative;
  width: var(--nav-btn-icon-width);
  height: var(--nav-btn-icon-height);
  transition: all 0.1s ease-out;
}
.l-gnav-btn_line {
  position: absolute;
  right: 0;
  height: var(--nav-btn-line-height);
  transition: all 0.3s ease-out;
  background-color: #FFF;
}
.l-gnav-btn_line:nth-of-type(1) { width: 100%; top: calc(50% - var(--nav-btn-line-top)); }
.l-gnav-btn_line:nth-of-type(2) { width: 100%; bottom: calc(50% - var(--nav-btn-line-top)); }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(1) {
  width: 100%;
  top: 0;
  transform: translateY(calc((var(--nav-btn-icon-height) / 2) - (var(--nav-btn-line-height) / 2))) rotate(-45deg);
}
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(2) {
  width: 100%;
  bottom: 0;
  transform: translateY(calc(-1 * (var(--nav-btn-icon-height) / 2) + (var(--nav-btn-line-height) / 2))) rotate(45deg);
}
@media (hover: hover) {
  .l-gnav-btn:hover:before { filter: brightness(120%); }
}

/*--------------------------------------------------------------------------------
  .l-gnav
--------------------------------------------------------------------------------*/
.l-gnav {
  width: 100%;
  min-width: 300px;
  height: 100%;
  overflow: hidden;
  display: grid;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: #FFF;
  opacity: 0;
  pointer-events: none;
}
.l-gnav a,
.l-gnav a:visited,
.l-gnav a:hover {
  color: inherit;
  text-decoration: none;
}
.l-gnav_container {
  display: grid;
}
@media (min-width: 961px) {
  .l-gnav_container {
    overflow: hidden;
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
      "gnav-info gnav-list";
  }
}
@media (max-width: 960px) {
  .l-gnav_container {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    margin-top: calc(var(--nav-btn-height) + 2.5rem);
    padding: 0 var(--side-space) var(--space-m) var(--side-space);
    grid-template-columns: 1fr;
    grid-row-gap: var(--space-l);
    grid-template-areas:
      "gnav-list"
      "gnav-info";
  }
}

/* open */
html.is-gnav-open .l-gnav { opacity: 1; pointer-events: auto; }
.l-gnav.is-open { animation: 0.4s ani-gnav-open forwards; }
.l-gnav.is-close { animation: 0.3s ani-gnav-close forwards; }
@keyframes ani-gnav-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes ani-gnav-close { from { opacity: 1; } to { opacity: 0; } }
.l-gnav.is-close .l-gnav-container { opacity: 0; }

/* .p-gnav-list
----------------------------------------*/
.l-gnav_list {
  grid-area: gnav-list;
  align-self: start;
}
@media (min-width: 961px) {
  .l-gnav_list {
    height: calc(100% - (var(--nav-btn-height) + 2.5rem));
    margin-top: calc(var(--nav-btn-height) + 2.5rem);
    padding: 0 10% var(--space-m) 10%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

/* .l-gnav_info
----------------------------------------*/
.l-gnav_info {
  grid-area: gnav-info;
}
@media (min-width: 961px) {
  .l-gnav_info {
    position: relative;
    background: url("../image/gnav_bg.webp") no-repeat center center;
    background-size: cover;
  }
  .l-gnav_info-inner {
    height: 100%;
    position: sticky;
    left: 0;
    top: 0;
    padding: 0 var(--space-m) var(--space-m) var(--space-m);
  }
}

/*--------------------------------------------------------------------------------
  .p-gnav-info
--------------------------------------------------------------------------------*/
:root { --gnav-logo-break-point: 1200; --gnav-logo-max: 100; }
.p-gnav-info_ad {
  display: block;
  padding-bottom: var(--space-m);
}
.p-gnav-info_tel {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
}
@media (min-width: 961px) {
  .p-gnav-info {
    display: grid;
    grid-template-rows: 1fr auto;
  }
  .p-gnav-info_logo {
    align-self: center;
    text-align: center;
    padding: var(--space-m) 0;
  }
  .p-gnav-info_logo img {
    width: clamp(50px, (var(--gnav-logo-max) / var(--gnav-logo-break-point) * 100vw), (var(--gnav-logo-max) * 1px));
  }
  .p-gnav-info_ad {
    font-size: var(--fs-s);
  }
}
@media (max-width: 960px) {
  .p-gnav-info_logo { display: none; }
  .p-gnav-info_tel .p-tel_no { font-size: max(1.8em, var(--fs-3l)); }
}

/*--------------------------------------------------------------------------------
  .p-gnav-list
--------------------------------------------------------------------------------*/
.p-gnav-list {
  list-style: none;
}
.p-gnav-list_item {
  border-bottom: 1px solid rgba(var(--gold-rgba), 0.3);
}
.p-gnav-list_item-in {
  padding: 0.75em 0;
  font-size: calc(var(--fs-m) + 0.1em);
  font-family: var(--ff-min);
  font-weight: 500;
  display: block;
}
@media (max-width: 960px) {
  .p-gnav-list_item-in {
    font-size: calc(var(--fs-m) + 0.2em);
  }
}
@media (hover: hover) {
  a.p-gnav-list_item-in:hover { color: var(--red); }
}

/*--------------------------------------------------------------------------------
  .p-gnav-list_child
--------------------------------------------------------------------------------*/
.p-gnav-list_child {
  list-style: none;
  padding-bottom: var(--box-space-s);
  padding-left: 0.15rem;
  display: flex;
  flex-direction: column;
}
.p-gnav-list_child-item {
  display: flex;
  column-gap: 0.5rem;
  padding: 0.5rem 0;
}
.p-gnav-list_child-item:before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.35rem;
  background: currentColor;
  color: var(--red);
  mask-image: var(--icon-arrowV-circle);
  mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (hover: hover) {
  .p-gnav-list_item-txt { transition: opacity 0.15s ease-out; }
  .p-gnav-list_item.-acod .p-gnav-list_item-in:hover .p-gnav-list_item-txt,
  .p-gnav-list_child-item:hover .p-gnav-list_child-link { color: var(--red); }
}

/* accordion
----------------------------------------*/
.p-gnav-list_item.-acod .p-gnav-list_child {
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease-out, background 0.15s ease-out;
}

/* parent */
.p-gnav-list_item.-acod .p-gnav-list_item-in {
  display: flex;
  column-gap: 0.75rem;
  cursor: pointer;
  transition: opacity 0.15s ease-out, background 0.15s ease-out;
}
.p-gnav-list_item.-acod .p-gnav-list_item-in:after {
  content: "";
  justify-self: end;
  align-self: center;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  margin-right: 0.75rem;
  background: currentColor;
  color: var(--red);
  mask-image: var(--icon-plus);
  mask-repeat: no-repeat;
  transition: all 0.15s ease-out;
}

/* open */
.p-gnav-list_item.-acod .p-gnav-list_item-in.is-active + .p-gnav-list_child { opacity: 1; }
.p-gnav-list_item.-acod .p-gnav-list_item-in.is-active:after { transform: rotate(45deg); }
.p-gnav-list_item.-acod .p-gnav-list_item-in.is-active { color: var(--red); }

/*--------------------------------------------------------------------------------
  .l-hd
--------------------------------------------------------------------------------*/
.l-hd {
  position: relative;
  z-index: 100;
  padding: 1rem;
  background: url("../image/bg.gif") repeat center top;
}
.l-hd_inner {
  display: grid;
  grid-column-gap: 1.5rem;
}
.l-hd_inner:after {
  grid-area: gnav-btn-area;
  content: "";
  width: var(--nav-btn-width);
  height: calc(var(--nav-btn-height) + 0.25rem);
}
@media (min-width: 1401px) {
  .l-hd_inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "hd-logo hd-btn hd-btn gnav-btn-area"
      "hd-logo hd-nav hd-tel gnav-btn-area";
  }
}
@media (max-width: 1400px) {
  .l-hd_inner {
    grid-template-columns: auto 1fr auto;
    grid-row-gap: 0.75rem;
    grid-template-areas:
      "hd-logo hd-btn hd-tel gnav-btn-area"
      "hd-nav hd-nav hd-nav hd-nav";
  }
}
@media (max-width: 960px) {
  .l-hd { font-size: var(--fs-s); }
  .l-hd_inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "hd-logo hd-tel gnav-btn-area";
  }
}

/* .l-hd_logo
----------------------------------------*/
.l-hd_logo {
  grid-area: hd-logo;
  align-self: center;
  min-height: calc(var(--nav-btn-height) + 1.25rem);
}

/* .l-hd_nav
----------------------------------------*/
.l-hd_nav {
  grid-area: hd-nav;
  justify-self: end;
  align-self: end;
}
@media (min-width: 1401px) {
  .l-hd_nav { margin-top: -0.25rem; }
}
@media (max-width:960px) {
  .l-hd_nav { display: none; }
}

/* .l-hd_btn
----------------------------------------*/
.l-hd_btn {
  grid-area: hd-btn;
  align-self: start;
  justify-self: end;
  list-style: none;
  display: flex;
  column-gap: 0.5rem;
}
@media (max-width:1400px) {
  .l-hd_btn { align-self: center; padding-bottom: 1.75em; }
}
@media (max-width:960px) {
  .l-hd_btn { display: none; }
}

/* .l-hd_tel
----------------------------------------*/
.l-hd_tel {
  grid-area: hd-tel;
  justify-self: end;
  align-self: center;
}
@media (min-width:1401px) {
  .l-hd_tel { align-self: end; padding-bottom: 0.25rem; }
  .l-hd_tel .p-tel_time.-cols { margin-bottom: -0.25rem; }
  .l-hd_tel .p-tel_time.-cols .p-tel_time-uketsuke { font-size: var(--fs-s); }
}
@media (max-width:1400px) {
  .l-hd_tel .p-tel {
    flex-direction: column;
    align-items: center;
  }
  .l-hd_tel .p-tel_time.-cols {
    flex-direction: row;
  }
}
@media (max-width:640px) {
  .l-hd_tel { display: none; }
}

/*--------------------------------------------------------------------------------
  .l-hd_logo
--------------------------------------------------------------------------------*/
@media (min-width:961px) { :root { --hd-logo-break-point: 960; --hd-logo-space: 35; } }
@media (max-width:960px) { :root { --hd-logo-break-point: 800; --hd-logo-space: 35; } }
.l-hd_logo {
  position: absolute;
  left: 0;
  top: 0;
  padding: clamp(20px, calc(var(--hd-logo-space) / var(--hd-logo-break-point) * 100vw), (var(--hd-logo-space) * 1px));
  background-color: #FFF;
}
.l-hd_logo-img {
  width: clamp(45px, calc(90 / var(--hd-logo-break-point) * 100vw), 70px);
}

/*--------------------------------------------------------------------------------
  .p-hd-nav
　※ .p-hd-nav_item には position: relative; 指定禁止
--------------------------------------------------------------------------------*/
.p-hd-nav {
  list-style: none;
  display: flex;
  align-items: flex-end;
  line-height: var(--lineh-s);
}
.p-hd-nav a {
  text-decoration: none;
}
.p-hd-nav_item-in {
  position: relative;
  z-index: 2;
  display: block;
  padding: 1.5rem 1.2em 0.25rem 1.2em;
  font-family: var(--ff-min);
  font-size: 1.05em;
  font-weight: 500;
  cursor: pointer;
}
.p-hd-nav_item:not(:first-of-type) .p-hd-nav_item-in:before {
  content: "";
  width: 1px;
  height: 1.5rem;
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  background-color: rgba(var(--gold-rgba), 0.3);
}
@media (min-width:1401px) {
  .p-hd-nav_item.-active .p-hd-nav_item-in:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(1em, 1em + (3vw - 1em), 15px);
    display: block;
    background: url("../image/icon/hana.svg") no-repeat center top;
    background-size: contain;
  }
}
@media (max-width:1400px) {
  .p-hd-nav_item-in { padding: 0.25rem 1.8em; }
}
@media (max-width:960px) {
  .p-hd-nav { display: none; }
}

/*--------------------------------------------------------------------------------
  .p-hd-drpdown
--------------------------------------------------------------------------------*/
.p-hd-drpdown_area {
  width: 100%;
  opacity: 0;
  pointer-events: none;
  padding-top: 1.25rem;
  padding-left: var(--side-space);
  padding-right: var(--side-space);
  position: absolute;
  left: 50%;
  top: calc(100% - 1.5rem);
  transform: translateX(-50%) translateY(-10%);
  transition: transform 0.4s var(--cubic-bezier);
}
.p-hd-drpdown_container {
  width: 100%;
  background-color: #FFF;
  border-radius: 0.75rem;
  cursor: default;
}
.p-hd-drpdown_list {
  max-width: var(--base-width);
  margin: 0 auto;
  list-style: none;
  line-height: var(--lineh-s);
  padding: calc(var(--space-m) - var(--box-space-s)) var(--space-m) var(--space-m) var(--space-m);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: var(--box-space-m);
}
.p-hd-drpdown_item {
  border-bottom: 1px solid rgba(var(--gold-rgba), 0.3);
}
.p-hd-drpdown_item > a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  padding: var(--box-space-s) 0;
  display: flex;
  align-items: center;
  column-gap: var(--box-space-2s);
}
.p-hd-drpdown_item > a:after {
  flex-shrink: 0;
  content: "";
  width: clamp(1rem, calc(20 / 1200 * 100vw), 20px);
  height: clamp(1rem, calc(20 / 1200 * 100vw), 20px);
  margin-left: auto;
  background: currentColor;
  color: var(--red);
  mask-image: var(--icon-arrowY1);
  mask-repeat: no-repeat;
}
.p-hd-drpdown_item-img {
  width: clamp(60px, (110 / 1200 * 100vw), 110px);
  flex-shrink: 0;
}
.p-hd-drpdown_item-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
}
@media (max-width:1200px) {
  .p-hd-drpdown_list.-thumb {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* position */
.l-hd { position: relative; }

/* parent */
.p-hd-drpdown { cursor: pointer; }

/* open */
.p-hd-drpdown.is-open .p-hd-nav_item-in { color: var(--red); }
.p-hd-drpdown.is-open .p-hd-drpdown_area { pointer-events: auto; transform: translateX(-50%) translateY(0); }
.p-hd-drpdown.is-open .p-hd-drpdown_area { animation: 0.4s ani-nav-drpdown-open forwards; }
.p-hd-drpdown.is-close .p-hd-drpdown_area { animation: 0.3s ani-nav-drpdown-close forwards; }
@keyframes ani-nav-drpdown-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes ani-nav-drpdown-close { from { opacity: 1; } to { opacity: 0; } }

/*--------------------------------------------------------------------------------
  .l-ft
--------------------------------------------------------------------------------*/
.l-ft {
  background-color: #FFF;
  padding: var(--space-2l) 0 var(--space-m) 0;
}
.l-ft a {
  text-decoration: none;
}
.l-ft_inner {
  width: var(--base-width);
  max-width: calc(100% - (var(--side-space) * 2));
  margin: 0 auto;
}
@media (min-width:961px) {
  .l-ft_inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "ft-info ft-nav"
      "ft-info ft-payment"
      "ft-info ft-copy";
  }
}
.l-ft_info {
  grid-area: ft-info;
}
.l-ft_nav {
  grid-area: ft-nav;
  justify-self: end;
}
.l-ft_payment {
  grid-area: ft-payment;
  justify-self: end;
  padding: var(--space-s) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
}
.l-ft_copyright {
  grid-area: ft-copy;
  justify-self: end;
}
.l-ft_logo img {
  width: auto;
  height: calc(var(--fs-4l) + 0.25rem);
}
.l-ft_ad {
  display: block;
  padding-top: var(--space-2s);
  padding-bottom: var(--space-m);
}
.l-ft_tel {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
}
.l-ft_copyright {
  font-family: var(--ff-en);
  font-size: var(--fs-3s);
  color: rgba(var(--black-rgba), 0.4);
}
@media (min-width:961px) {
  .l-ft_ad {
    font-size: var(--fs-s);
  }
}
@media (max-width:960px) {
  .l-ft { padding-bottom: var(--space-s); }
  .l-ft_nav { display: none; }
  .l-ft_copyright { padding-top: var(--space-m); }
  .l-ft_tel .p-tel_no { font-size: max(1.8em, var(--fs-3l)); }
  .l-ft_payment { padding: var(--space-m) 0 0 0; }
}

/*--------------------------------------------------------------------------------
  .p-ft_nav
--------------------------------------------------------------------------------*/
.p-ft-nav {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  align-content: start;
  grid-gap: 1rem var(--space-l);
  font-family: var(--ff-min);
  font-size: 1.025em;
  font-weight: 500;
}
.p-ft-nav_item {
  white-space: nowrap;
}
.p-ft-nav_item a {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  text-decoration: none;
}
.p-ft-nav_item a:before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  background: currentColor;
  color: var(--red);
  mask-image: var(--icon-arrowV-circle);
  mask-repeat: no-repeat;
  transition: var(--hover-trans);
}
@media (hover: hover) {
  .p-ft-nav_item a:hover:before {
    filter: brightness(120%);
  }
}

/*--------------------------------------------------------------------------------
  .l-main
--------------------------------------------------------------------------------*/
.l-main {
  padding-top: var(--space-2l);
  padding-bottom: var(--space-3l);
}

/*--------------------------------------------------------------------------------
  .l-pg-visual
--------------------------------------------------------------------------------*/
@media (min-width: 961px) { :root { --pg-visual-break-point: 1200; --pg-visual-max: 280; } }
@media (max-width: 960px) { :root { --pg-visual-break-point: 640; --pg-visual-max: 220; } }
.l-pg-visual {
  height: clamp(160px, (var(--pg-visual-max) / var(--pg-visual-break-point) * 100vw), (var(--pg-visual-max) * 1px));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(var(--bpink2-rgba), 0.2);
}
.l-pg-visual:before {
  content: "";
  width: clamp(120px, 30%, 350px);
  height: 100%;
  background: url("../image/pg-visual_bg.png") no-repeat left top;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 0;
}
.l-pg-visual_ttl {
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 400;
  font-family: var(--ff-min);
  font-size: var(--fs-4l);
  line-height: var(--lineh-2s);
  color: var(--pink);
}
.l-pg-visual_ttl-sub {
  display: block;
  font-size: 50%;
  padding-top: 0.25rem;
}