@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&display=swap');
:root {
  --main: #1CB9C2;
  --main-l: #B0E6E9;
  --sub: #F26A23;
  --bg: #F9F6F5;
  --text: #333333;
  --white: #ffffff;
  --line: #06C755;
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Futura", "Jost", sans-serif;
  --font-size: 1rem; /* デフォルト16px */
  --bold: 700;
  --content-width: 1200px;
  --content-width-narrow: 960px;
  --content-width-sp: 288px;
  --space-section: 120px;
  --space-section-sp: 64px;
  --header-height: 96px;
  --header-height-sp: 56px;
}
/* リセットcss */
* { margin: 0; padding: 0; box-sizing: border-box;}
html { font-size: 100%; scroll-padding-top: var(--header-height);}
body {
  background-color: var(--bg);
  font-family: var(--font-ja);
  font-size: var(--font-size);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
ul, ol { list-style-type: none;}
h1, h2, h3, h4 { font-size: inherit; font-weight: 500; word-break: auto-phrase;}
a { color: var(--text); text-decoration: none; transition: all .3s ease;}
a:hover { opacity: .7;}
a::before, a::after { transition: all .3s ease;}
p > a { text-decoration: underline;}
img { max-width: 100%; height: auto; vertical-align: bottom;}
iframe { width: 100%; height: 100%; vertical-align: bottom;}
mark, em, small { color: inherit; font-style: normal; font-size: inherit; font-weight: inherit; background-color: transparent;}
strong { color: inherit; font-style: normal; font-size: inherit; font-weight: var(--bold); background-color: transparent;}

/* component */
.l-wrapper {
  max-width: 1920px;
  margin: auto;
}
.l-inner {
  width: 90%;
  max-width: var(--content-width);
  margin: auto;
}
.c-section {
  padding: var(--space-section) 0;
  position: relative;
  z-index: 1;
}
.c-section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}
.c-section-title--left {
  text-align: left;
}
.c-section-title span {
  display: block;
  max-width: max-content;
  font-size: 1.5rem;
  font-weight: 500;
  position: relative;
  margin: auto;
}
.c-section-title span::before,
.c-section-title span::after {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background-color: var(--text);
  position: absolute;
  top: 4px;
  bottom: 0;
  margin: auto;
}
.c-section-title span::before { transform: rotate(-45deg); left: -0.5em;}
.c-section-title span::after { transform: rotate(45deg); right: -0.5em;}
.c-section-title::after {
  content: attr(data-en);
  display: block;
  color: var(--sub);
  font-size: 1rem;
}
.c-section-text {
  text-align: center;
  margin-bottom: 64px;
}
.c-btn {
  min-width: 320px;
  display: inline-block;
  background-color: var(--main);
  color: var(--bg);
  font-size: 1.125rem;
  line-height: 1;
  text-align: center;
  border: 1px solid var(--main);
  border-radius: 37px;
  padding: 25px;
  position: relative;
}
.c-btn::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/arrow-r.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 46px;
  margin: auto;
  transition: none;
}
.c-btn:hover {
  background-color: var(--white);
  color: var(--main);
  opacity: 1;
}
.c-btn:hover:after {
  mask-image: url(../img/arrow-r.svg);
  mask-size: contain;
  background-color: var(--main);
  background-image: none;
}
.c-btn--line {
  min-width: 162px;
  background-color: var(--line);
  padding-left: 72px;
  padding-right: 40px;
  border: 1px solid var(--line);
}
.c-btn--line::after {
  content: none;
}
.c-btn--line::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url(../img/icon-line.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32px;
  margin: auto;
  transition: none;
}
.c-btn--line:hover {
  background-color: var(--white);
  color: var(--line);
  opacity: 1;
}
.c-btn--line:hover:before {
  mask-image: url(../img/icon-line.svg);
  mask-size: contain;
  background-color: var(--line);
  background-image: none;
}
.c-link {
  text-align: center;
  margin-top: 64px;
}
.c-breadcrumb {
  background-color: var(--main);
  color: var(--white);
  font-size: .875rem;
  padding: 4px 0;
}
.c-breadcrumb a {
  color: var(--white);
}
.c-breadcrumb a:hover {
  opacity: 1;
}
.l-breadcrumb {
  width: 90%;
  max-width: var(--content-width);
  margin: auto;
}
.c-breadcrumb a::after {
  content: "/";
  margin: 0 1em;
}
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
}
.pagination {
  margin-top: 64px;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}
.page-numbers {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main);
  color: var(--white);
  border-radius: 50%;
}
.page-numbers.current {
  background-color: transparent;
  color: var(--main);
}
.page-numbers.prev,
.page-numbers.next {
  position: relative;
}
.page-numbers.prev::after,
.page-numbers.next::after {
  content: "";
  width: .75rem;
  height: .75rem;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.page-numbers.prev::after { background-image: url(../img/arrow-l.svg);}
.page-numbers.next::after { background-image: url(../img/arrow-r.svg);}
/* component end */

/* header */
.header {
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg);
  padding:  0 5%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
header + * { padding-top: var(--header-height);}
.header__logo {
  width: 264px;
  font-size: 10px;
}
.header__box-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.header__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.header__cta-btn-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header__cta-tel a {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1.2;
  padding-top: 2px;
}
.header__cta-tel a::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/icon-tel.svg) no-repeat;
  background-size: contain;
  margin-top: 4px;
  margin-right: 4px;
}
.header__cta-tel small {
  display: block;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.header__cta-btn a {
  width: 135px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font-size: 16px;
  line-height: 1.25em;
  border-radius: 18px;
  padding: 6px 20px;
}
.header__cta-btn a::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 2px;
  margin-right: 4px;
}
.header__cta-btn.check a { background-color: var(--sub);}
.header__cta-btn.check a::before { background-image: url(../img/icon-check.svg);}
.header__cta-btn.line a { background-color: var(--line);}
.header__cta-btn.line a::before { background-image: url(../img/icon-line.svg); width: 20px; height: 20px;}
.header__nav-list {
  display: flex;
  column-gap: 24px;
  row-gap: 8px;
}
.header__nav-item { position: relative;}
.header__nav-item a { position: relative;}
.header__nav-item::after {
  content: "";
  height: 4px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: background-color .3s;
}
.header__nav-item a:hover {
  opacity: 1;
}
.header__nav-item:hover:after {
  background-color: var(--main);
}
.header__nav-sub-wrap {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  position: absolute;
  top: 2.5rem;
  left: calc(-50% + -16px);
  z-index: 9;
}
.header__nav-item:hover .header__nav-sub-wrap {
  opacity: 1;
  visibility: visible;
}
.header__nav-sub {
  width: max-content;
  background-color: var(--white);
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: 0 0 12px rgba(0,0,0,.1);
}
.header__nav-sub-wrap::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 8px solid var(--white);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  margin: auto;
  opacity: 0;
}
.header__nav-item:hover .header__nav-sub-wrap::before {
  opacity: 1;
}
.header__nav-sub a:hover { text-decoration: underline;}
.header__nav-sub a::after { content: none;}
.header__nav-sub li { display: flex; align-items: center; column-gap: 8px;}
.header__nav-sub li::before {
  content: "";
  display: block;
  width: .8em;
  height: .8em;
  background-color: var(--main);
  border-radius: 50%;
}
/* header end */

/* access */
.access__wrap {
  display: flex;
}
.access__box { width: 34%;}
.access__map { width: 66%;}
.access__head {
  margin-bottom: 40px;
}
.access__logo {
  width: 264px;
}
.access__head-text {
  font-size: 0.75rem;
  margin-top: 8px;
}
.access__sns {
  display: flex;
  gap: 16px;
  color: var(--main);
}
.access__sns-item {
  width: 24px;
}
.access__address {
  margin-bottom: 40px;
}
.access__text,
.access__tel {
  margin-bottom: 16px;
}
.access__tel-no {
  display: flex;
  align-items: center;
  font-size: 2rem;
}
.access__tel-no::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/icon-tel.svg) no-repeat;
  background-size: contain;
  margin-top: 6px;
  margin-right: 4px;
}
.access__tel-text {
  font-size: 0.75rem;
  margin-left: 20px;
}
.access__link {
  margin-bottom: 40px;
}
.access__map {
  position: relative;
}
.access__map::after {
  content: "";
  width: 95px;
  height: 143px;
  background: url(../img/katsujikun1.png) no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: -58px;
}
/* access end */

/* footer */
.footer {
  background-color: var(--main);
  color: var(--white);
  padding: 80px 5%;
}
.footer a {
  display: block;
  color: var(--white);
}
.footer a + a { margin-top: 16px;}
.footer a:hover {
  opacity: 1;
  text-decoration: underline;
}
.footer__copy {
  font-size: .75rem;
  text-align: center;
  margin-top: 40px;
}
.footer__nav-list {
  display: flex;
  justify-content: center;
  column-gap: min(5%, 64px);
  margin-bottom: 64px;
}
.footer__nav-sub {
  font-size: .875rem;
}
.footer__nav-sub li {
  margin-top: 16px;
}
.footer__bottom-link { text-align: center;}
.footer__bottom-link a {
  display: inline-block;
  background-color: var(--white);
  color: var(--main);
  border-radius: 20px;
  padding: 6px 24px;
}
/* footer end */

/* cta */
.cta {
  background-color: var(--sub);
  color: var(--white);
  text-align: center;
  padding: 80px 0;
}
.cta__title {
  font-size: 2rem;
  margin-bottom: 24px;
}
.cta__box {
  max-width: max-content;
  margin: auto;
  position: relative;
}
.cta__box::before {
  content: "";
  width: 138px;
  height: 207px;
  background: url(../img/katsujikun3.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: -178px;
  bottom: -24px;
}
.cta__link {
  margin-top: 24px;
  text-align: center;
}
.cta__btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--white);
  color: var(--sub);
  font-size: 1.125rem;
  font-weight: var(--bold);
  border: 1px solid var(--white);
  border-radius: 40px;
  padding: 24px 72px;
}
.cta__btn::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/icon-check-color.svg) no-repeat;
  background-size: contain;
  margin-right: 8px;
  transition: none;
}
.cta__btn:hover {
  background-color: var(--sub);
  color: var(--white);
  opacity: 1;
}
.cta__btn:hover:before {
  mask-image: url(../img/icon-check-color.svg);
  mask-size: contain;
  background-color: white;
  background-image: none;
}
.cta__btn--color {
  background-color: var(--sub);
  color: var(--white);
  border-color: var(--sub);
}
.cta__btn--color::before {
  mask-image: url(../img/icon-check-color.svg);
  mask-size: contain;
  background-color: white;
  background-image: none;
}
.cta__btn--color:hover {
  background-color: var(--white);
  color: var(--sub);
}
.cta__btn--color:hover:before {
  background-image: url(../img/icon-check-color.svg);
  background-color: none;
}
/* cta end */

/* reception */
.reception {
  background-color: #39C2AB;
  color: var(--white);
  text-align: center;
  border-radius: 32px;
  padding: 32px 5%;
  margin-bottom: 16px;
}
.reception__box {
  max-width: max-content;
  margin: auto;
  position: relative;
}
.reception__box::before {
  content: "";
  width: 124px;
  height: 186px;
  background: url(../img/katsujikun1.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: -154px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.reception__head {
  font-size: 1.5rem;
  font-weight: var(--bold);
  margin-bottom: 16px;
}
.reception__link {
  margin-top: 24px;
  text-align: center;
}
.reception__btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--white);
  color: #39C2AB;
  font-size: 1.125rem;
  font-weight: var(--bold);
  border: 1px solid var(--white);
  border-radius: 32px;
  padding: 15px 40px;
}
.reception__btn::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/icon-check-case.svg) no-repeat;
  background-size: contain;
  margin-right: 8px;
  transition: none;
}
.reception__btn:hover {
  background-color: #39C2AB;
  color: var(--white);
  opacity: 1;
}
.reception__btn:hover:before {
  mask-image: url(../img/icon-check-case.svg);
  mask-size: contain;
  background-color: white;
  background-image: none;
}
/* reception end */

/* fix-cta */
.fix-cta__list {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  position: fixed;
  right: 0;
  bottom: 160px;
  padding-right: 12px;
  opacity: 0;
  z-index: 5;
  transition: opacity .6s .5s;
}
.fix-cta__list.on { opacity: 1;}
.fix-cta__list::after {
  content: "";
  width: 83px;
  height: 120px;
  background: url(../img/katsujikun2.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -126px;
  left: 0;
}
.fix-cta__item a {
  display: block;
  color: var(--white);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.fix-cta__item span {
  display: block;
  width: 80px;
  height: 234px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.fix-cta__item.check span { background-image: url(../img/cta-check.svg);}
.fix-cta__item.line span { background-image: url(../img/cta-line.svg);}
.fix-cta__item.line img { width: 32px; margin-bottom: 5px;}
/* fix-cta end */

/* sp-menu */
  .sp-menu {
    display: block;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--main);
    border-radius: 50%;
    position: relative;
  }
  .sp-menu-bar,
  .sp-menu-bar::before,
  .sp-menu-bar::after {
    width: 24px;
    height: 1px;
    background-color: var(--white);
    border-radius: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .3s;
  }
  .sp-menu-bar::before { content: ""; margin-bottom: 6px;}
  .sp-menu-bar::after { content: ""; margin-top: 6px;}
  .active .sp-menu-bar { height: 0;}
  .active .sp-menu-bar::before { transform: rotate(45deg); margin-bottom: -1px;}
  .active .sp-menu-bar::after {transform: rotate(-45deg); margin-top: 0;}
/* sp-menu end */

@media (min-width: 1024px) {
  .l-view-sp { display: none !important;}
}
@media (max-width: 1023px) {
  body.active { height: 100vh; overflow: hidden;}
  .l-view-pc { display: none !important;}
  .l-inner { max-width: 600px;}
  .c-section { padding: var(--space-section-sp) 0;}
  .c-section-title { font-size: 1.5rem; margin-bottom: 32px;}
  .c-section-title--left { text-align: center;}
  .c-section-title::after { font-size: .75rem;}
  .c-section-title span { font-size: 0.875rem;}
  .c-section-text { text-align: left; margin-bottom: 32px;}
  .c-btn { min-width: 240px; padding: 18px;}
  .c-btn::after { right: 20px;}
  .c-btn--line { max-width: 240px; display: flex; align-items: center; justify-content: center; column-gap: 8px; margin: auto;}
  .c-btn--line::before { position: static; display: block; margin: 0;}
  .c-link { margin-top: 32px;}
  .pagination { margin-top: 32px;}
  .header { height: var(--header-height-sp); padding: 0 2%; position: fixed;}
  header + * { padding-top: var(--header-height-sp);}
  .header__logo { width: 175px;}
  .header__box {
    width: 100%;
    height: calc(100vh - var(--header-height-sp));
    overflow-y: auto;
    position: absolute;
    top: var(--header-height-sp);
    left: 0;
    background-color: var(--main-l);
    z-index: 99;
    padding: 24px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s;
    -webkit-overflow-scrolling: touch;
  }
  .header__box.active { opacity: 1; visibility: visible; pointer-events: auto;}
  .header__box-inner {
    align-items: center;
    justify-content: flex-end;
    flex-direction: column-reverse;
    row-gap: 16px;
  }
  .header__cta { width: 90%; max-width: 288px; margin: 0 auto; flex-direction: column;}
  .header__cta-btn-wrap { width: 100%; gap: 8px;}
  .header__cta-btn { flex: 1;}
  .header__cta-btn a { width: 100%; height: auto; line-height: 1.5em; padding: 16px 0;}
  .header__nav { width: 90%; max-width: 288px; margin: 0 auto;}
  .header__nav-list { flex-direction: column; row-gap: 16px;}
  .header__nav-list a,
  .header__nav-list span {
    display: block;
    background-color: var(--white);
    border-radius: 8px;
    padding: 8px 16px 8px 40px;
    position: relative;
  }
  .header__nav-list a::before,
  .header__nav-list span::before {
    content: "";
    width: .9em;
    height: .9em;
    background-color: var(--main);
    border-radius: 50%;
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .header__nav-item::after, .header__nav-sub-wrap::before { content: none;}
  .header__nav-item.in-sub { background-color: var(--white); border-radius: 8px;}
  .header__nav-sub-wrap { opacity: 1; visibility: visible; position: static;}
  .header__nav-sub { width: 100%; box-shadow: none; padding: 0 24px 8px;}
  .header__nav-list .header__nav-sub li::before { background-color: var(--white); border: 1px solid var(--main);}
  .header__nav-list .header__nav-sub a { display: block; flex-grow: 1; padding: 0;}
  .header__nav-list .header__nav-sub a::before { content: none;}
  .access__wrap { flex-direction: column;}
  .access__box, .access__map { width: 100%;}
  .access__box { text-align: center;}
  .access__logo { margin: auto;}
  .access__tel-no { justify-content: center;}
  .access__tel-text { margin: 0;}
  .access__sns { display: block; margin-bottom: 32px;}
  .access__sns-text { margin-bottom: 8px;}
  .access__sns-item { display: inline-block; margin: 0 8px;}
  .access__map { aspect-ratio: 288 / 320;}
  .cta__title { max-width: max-content; font-size: 1.25rem; margin: 0 auto 16px; position: relative;}
  .cta__title::after {
    content: "";
    display: block;
    width: 51px;
    height: 76px;
    background: url(../img/katsujikun3.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: -52px;
  }
  .cta__box { max-width: none;}
  .cta__box::before { content: none;}
  .cta__text { display: none;}
  .cta__btn { width: max-content; font-size: 1rem; padding: 14px 5%;}
  .fix-cta__list {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: fixed;
    right: 0;
    bottom: 0;
    padding-right: 0;
  }
  .footer { padding: 32px 0 92px;}
  .footer__nav { display: none;}
  .fix-cta__list::after { content: none;}
  .fix-cta__item { flex: 1;}
  .fix-cta__item a { writing-mode: horizontal-tb; font-size: .875rem; line-height: 1.2;}
  .fix-cta__item span { width: 100%; height: 60px; display: flex; align-items: center;}
  .fix-cta__item span::before {
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
  }
  .fix-cta__item.check span { background-color: var(--sub); background-image: none;}
  .fix-cta__item.line span { background-color: var(--line); background-image: none;}
  .fix-cta__item.check span::before { background-image: url(../img/icon-check.svg);}
  .fix-cta__item.line span::before { background-image: url(../img/icon-line.svg);}
  .reception { border-radius: 16px;}
  .reception__box::before { content: none;}
  .reception__link { position: relative; margin-top: 48px;}
  .reception__link::before {
    content: "";
    width: 67px;
    height: 100px;
    background: url(../img/katsujikun1.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: -44px;
    right: -8px;
  }
  .reception__btn { padding: 15px 8%;}
  .reception__text { text-align: left;}
}