:root {
  --color-base: #282424;
  --color-base-sub: #8A8787;
  --color-base-sub2: #237384;
  --color-primary: #83d9e2;
  --color-primary-sub: #09aabb;
  --color-second: #CF6651;
  --color-primary-o42: #afdbe3;
  --color-primary-o15: #e5f5f8;
  --color-base-sub2-o40: #4396a8;
  --color-nav-active: #ffffff;
  --content-max-width: 1200px;
}

html, body {
  font-size: 10px;
  background: #fff;
}
body {
  font-size: 1.6rem;
  font-family: "Noto Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.78;
  color: var(--color-base);
}
.flex-container {
  display: flex;
}
.grid-container {
  display: grid;
}
.text-italic {
  display: inline-block;
  transform: skew(-15deg, 0deg);
}
.text-weight-normal {
  font-weight: 500;
}
.text-weight-bold {
  font-weight: 700;
}
.text-nowrap {
  white-space: nowrap;
}
.hide {
  display: none !important;
}
@media screen and (min-width: 601px) {
  .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .pc_only {
    display: none !important;
  }
}

/* アイコン */
.icon {
  display: block;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: 100vw;
  overflow: hidden;
}
.icon-facebook {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2247.275%22%20height%3D%2246.989%22%20viewBox%3D%220%200%2047.275%2046.989%22%3E%0A%20%20%3Cpath%20id%3D%22facebook%22%20d%3D%22M54.505%2C30.868A23.638%2C23.638%2C0%2C1%2C0%2C27.174%2C54.219V37.7h-6V30.868h6V25.66c0-5.924%2C3.527-9.2%2C8.928-9.2a36.378%2C36.378%2C0%2C0%2C1%2C5.292.461v5.814H38.413c-2.936%2C0-3.852%2C1.822-3.852%2C3.691v4.437h6.556L40.068%2C37.7H34.561V54.219A23.646%2C23.646%2C0%2C0%2C0%2C54.505%2C30.868Z%22%20transform%3D%22translate(-7.23%20-7.23)%22%20fill%3D%22%23707070%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}
.icon-youtube {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2247.275%22%20height%3D%2233.24%22%20viewBox%3D%220%200%2047.275%2033.24%22%3E%0A%20%20%3Cpath%20id%3D%22youtube%22%20d%3D%22M61.22%2C69.2a5.94%2C5.94%2C0%2C0%2C0-4.18-4.207C53.354%2C64%2C38.571%2C64%2C38.571%2C64s-14.783%2C0-18.47.994a5.94%2C5.94%2C0%2C0%2C0-4.18%2C4.207c-.988%2C3.711-.988%2C11.453-.988%2C11.453s0%2C7.742.988%2C11.453a5.852%2C5.852%2C0%2C0%2C0%2C4.18%2C4.14c3.687.994%2C18.47.994%2C18.47.994s14.783%2C0%2C18.47-.994a5.852%2C5.852%2C0%2C0%2C0%2C4.18-4.14c.988-3.711.988-11.453.988-11.453s0-7.742-.988-11.453ZM33.736%2C87.683V73.625l12.356%2C7.029Z%22%20transform%3D%22translate(-14.933%20-64)%22%20fill%3D%22%23707070%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}
.icon-instagram {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244.321%22%20height%3D%2244.311%22%20viewBox%3D%220%200%2044.321%2044.311%22%3E%0A%20%20%3Cpath%20id%3D%22instagram%22%20d%3D%22M22.09%2C42.62A11.361%2C11.361%2C0%2C1%2C0%2C33.451%2C53.98%2C11.343%2C11.343%2C0%2C0%2C0%2C22.09%2C42.62Zm0%2C18.747a7.386%2C7.386%2C0%2C1%2C1%2C7.386-7.386%2C7.4%2C7.4%2C0%2C0%2C1-7.386%2C7.386ZM36.566%2C42.155a2.65%2C2.65%2C0%2C1%2C1-2.65-2.65A2.644%2C2.644%2C0%2C0%2C1%2C36.566%2C42.155Zm7.524%2C2.689c-.168-3.55-.979-6.694-3.579-9.284s-5.735-3.4-9.284-3.579c-3.658-.208-14.624-.208-18.282%2C0-3.54.168-6.684.979-9.284%2C3.569S.259%2C41.285.081%2C44.834c-.208%2C3.658-.208%2C14.624%2C0%2C18.282.168%2C3.55.979%2C6.694%2C3.579%2C9.284s5.735%2C3.4%2C9.284%2C3.579c3.658.208%2C14.624.208%2C18.282%2C0%2C3.55-.168%2C6.694-.979%2C9.284-3.579s3.4-5.735%2C3.579-9.284C44.3%2C59.458%2C44.3%2C48.5%2C44.09%2C44.844Zm-4.726%2C22.2a7.478%2C7.478%2C0%2C0%2C1-4.212%2C4.212c-2.917%2C1.157-9.838.89-13.061.89s-10.154.257-13.061-.89a7.478%2C7.478%2C0%2C0%2C1-4.212-4.212c-1.157-2.917-.89-9.838-.89-13.061s-.257-10.154.89-13.061a7.478%2C7.478%2C0%2C0%2C1%2C4.212-4.212c2.917-1.157%2C9.838-.89%2C13.061-.89s10.154-.257%2C13.061.89a7.478%2C7.478%2C0%2C0%2C1%2C4.212%2C4.212c1.157%2C2.917.89%2C9.838.89%2C13.061S40.521%2C64.135%2C39.364%2C67.042Z%22%20transform%3D%22translate(0.075%20-31.825)%22%20fill%3D%22%23707070%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  background-image: url(../images/icon_instagram.webp);
}
.icon-line {
  background-image: url(../images/icon_line.webp);
}
.icon-twitter {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244.321%22%20height%3D%2244.321%22%20viewBox%3D%220%200%2044.321%2044.321%22%3E%0A%20%20%3Cpath%20id%3D%22twitter-square%22%20d%3D%22M39.572%2C32H4.749A4.75%2C4.75%2C0%2C0%2C0%2C0%2C36.749V71.572a4.75%2C4.75%2C0%2C0%2C0%2C4.749%2C4.749H39.572a4.75%2C4.75%2C0%2C0%2C0%2C4.749-4.749V36.749A4.75%2C4.75%2C0%2C0%2C0%2C39.572%2C32ZM34.734%2C47.71c.02.277.02.564.02.841%2C0%2C8.577-6.529%2C18.46-18.46%2C18.46A18.375%2C18.375%2C0%2C0%2C1%2C6.332%2C64.1a13.669%2C13.669%2C0%2C0%2C0%2C1.563.079%2C13.009%2C13.009%2C0%2C0%2C0%2C8.053-2.77%2C6.5%2C6.5%2C0%2C0%2C1-6.064-4.5%2C6.993%2C6.993%2C0%2C0%2C0%2C2.928-.119%2C6.489%2C6.489%2C0%2C0%2C1-5.194-6.371v-.079a6.484%2C6.484%2C0%2C0%2C0%2C2.928.821%2C6.475%2C6.475%2C0%2C0%2C1-2.889-5.4%2C6.407%2C6.407%2C0%2C0%2C1%2C.88-3.275%2C18.423%2C18.423%2C0%2C0%2C0%2C13.375%2C6.787%2C6.5%2C6.5%2C0%2C0%2C1%2C11.07-5.926A12.714%2C12.714%2C0%2C0%2C0%2C37.1%2C41.784a6.471%2C6.471%2C0%2C0%2C1-2.849%2C3.571%2C12.911%2C12.911%2C0%2C0%2C0%2C3.74-1.009A13.657%2C13.657%2C0%2C0%2C1%2C34.734%2C47.71Z%22%20transform%3D%22translate(0%20-32)%22%20fill%3D%22%23707070%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.fsh1 {
  font-size: 4rem;
}
.fsh2 {
  font-size: 3rem;
}
.fsh3 {
  font-size: 2.4rem;
}
@media screen and (max-width: 600px) {
  .fsh1 {
    font-size: 2.4rem;
  }
  .fsh2 {
    font-size: 2rem;
  }
  .fsh3 {
    font-size: 1.8rem;
  }
}

p + p {
  margin-top: 1em;
}
a {
  color: var(--color-primary-sub);
  text-decoration: none;
}
a:active,
a:visited {
  color: var(--color-base-sub2);
}
img {
  vertical-align: top;
}


/* 構成 */
/* 管理画面にログイン中のアドミンバー対策 */
body.admin-bar {
  block-size: calc(100dvb - 32px);
}
main {
  flex-grow: 1;
  padding-bottom: 100px;
}
.entry-header .entry-title,
.entry-content .wp-block-group .wp-block-group__inner-container {
  padding-left: 0px;
  padding-right: 0px;
}
.wp-block-group .wp-block-group__inner-container {
  padding-top: 100px;
  padding-bottom: 100px;
}
.content-block-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (min-width: 601px) {
  .entry-header .entry-title,
  .wp-block-group .wp-block-group__inner-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.elementor-container {
  margin: 0px;
  padding: 0px 25px 25px 25px;
}
#site-content {
  display: flex;
  min-height: 100%;
  justify-content: space-between;
  flex-direction: column;
}

/* ヘッダー */
header {
  padding: 10px 0;
  position: relative;
}
header .header-inner {
  margin: 0 auto;
  padding: 0 10px;
  max-width: var(--content-max-width);
  display: grid;
  grid-template-columns: 150px 1fr;
}
header a,
header a:active,
header a:visited {
  color: var(--color-primary-sub);
}
/* フッター */
footer {
  position: relative;
  padding-top: 30px;
  background-color:  var(--color-primary);
  background-image: linear-gradient(180deg, var(--color-primary), var(--color-primary-sub));
}
footer .footer-inner {
  margin: 0 auto;
  padding: 0 10px;
  max-width: var(--content-max-width);
}
footer .sns-area {
  margin: 20px 0 0;
}
footer .copyright {
  text-align: center;
  padding: 10px 20px;
  font-size: 12px;
}
footer .footer-content {
  padding-bottom: 30px;
}
footer .footer-menu {
  display: flex;
  gap: 20px;
  font-size: 14px;
}
footer .footer-nav a {
  color: var(--color-base);
  display: inline-block;
  position: relative;
  transition: all .3s;
}
footer .footer-nav a::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  display: block;
  background-color: var(--color-base);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center center;
  transition: all .3s;
  opacity: .8;
}
footer .footer-nav a:hover {
  opacity: .8;
}
footer .footer-nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.sns-area .area-title {
  text-align: center;
}
.sns-area ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* メニュー */
header .header-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  container-type: inline-size;
  container-name: header-nav;
}
header .nav-menu {
  display: flex;
  gap: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
header .nav-menu .menu-item-contact a {
  padding: .5em 1em;
  border: 1px solid;
}

@container header-nav (max-width: 400px){
  .header-nav .nav-menu {
    display: none;
  }
  .header-nav .hm {
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 101;
  }
  .header-nav .hm .line {
    background-color: var(--color-base-sub2);
    height: 4px;
    width: 100%;
    position: absolute;
    transition: all 0.3s;
  }
  .header-nav .hm .line:nth-of-type(1) {
    top: 4px;
  }
  .header-nav .hm .line:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  .header-nav .hm .line:nth-of-type(3) {
    bottom: 4px;
  }
  .header-nav .hm .menu-text,
  .header-nav .hm .close-text {
    position: absolute;
    bottom: -15px;
    font-size: 10px;
    color: var(--color-base-sub2);
    transition: all 0.3s;
    white-space: nowrap;
  }
  .header-nav .hm .close-text {
    opacity: 0;
  }
  .header-nav .nav-menu {
    display: none;
  }
  .header-nav .menu-container {
    position: fixed;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    animation: not-checked-anim 1s both;
    transition: all .3s;
    opacity:0;
  }
  /* .header-nav .hm .menu-container {
    animation: checked-anim 1s ease both;
    background-color: #09aabb;
    padding: 30px 20px;
  } */

  .header-nav .hm.active > .line {
    background-color: var(--color-nav-active);
  }
  .header-nav .hm.active > .line:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .header-nav .hm.active > .line:nth-of-type(2) {
    display: none;
  }
  .header-nav .hm.active > .line:nth-of-type(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  .header-nav .hm.active .menu-text {
    opacity: 0;
  }
  .header-nav .hm.active .close-text {
    opacity: 1;
    color: var(--color-nav-active);
  }
  .header-nav .hm.active + .menu-container {
    background-color: #09aabb;
    padding: 30px 20px;
    opacity: 1;
    bottom: 0;
  }
  .header-nav .hm.active + .menu-container .nav-menu {
    animation: checked-anim .3s ease both;

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .header-nav .hm.active + .menu-container a {
    color: var(--color-nav-active);
  }
  @keyframes checked-anim {
    0% {
      width: 200%;
      height: 0;
    }
    100% {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
  }
  @keyframes not-checked-anim {
    0% {
      width: 000px;
      height: 000px;
    }
  }
}
@container header-nav (min-width: 401px){
  header .header-nav .hm {
    display: none;
  }
}

/* 各ページ共通 */
h2.wp-block-heading {
  margin: 60px 0 30px;
}
/* ボタン */
.wp-block-buttons {
  margin: 30px 20px;
}
.wp-block-button__link {
  color: var(--color-primary-sub);
  background-color: var(--color-primary-o15);
  padding: .4em 2em;
  border: 2px solid var(--color-primary-sub);
  transition: all .3s;
  position: relative;
}
/* .wp-block-button__link:hover {
  opacity: .8;
} */
/* マウスホバーでエフェクト */
.effect-circle .wp-block-button__link {
  transition-duration: .4s;
  z-index: 2;
  overflow: hidden;
}
.effect-circle .wp-block-button__link::after {
  background: var(--color-primary-sub);
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.effect-circle .wp-block-button__link:hover {
  color: #fff;
}
.effect-circle .wp-block-button__link:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity .8s, transform .6s ease-in-out;
}
@container (max-width: 450px){
  .wp-block-buttons {
    margin-left: 0;
    margin-right: 0;
  }
  .wp-block-button__link {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* FAQ */
/* 各所で共通のためpublicに記載 */
.faq-list {}
.faq-list li + li {
  margin-top: 2em;
}
.faq-list li .question,
.faq-list li .answer {
  display: flex;
  gap: 20px;
}
.faq-list li .answer {
  margin-top: 1em;
}
.faq-list li .question::before,
.faq-list li .answer::before {
  content: "";
  display: block;
  aspect-ratio: 52 / 48;
  width: 30px;
  min-width: 30px;
  align-self: baseline;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.faq-list li .question::before {
  background-image: url(../images/icon_question.webp);
}
.faq-list li .answer::before {
  background-image: url(../images/icon_answer.webp);
}
