@charset "UTF-8";
/* :root
------------------------------------------- */
:root {
  --fnt-roboto: "Roboto", sans-serif;
  --fnt-montserrat: "Montserrat", sans-serif;
  --fnt-noto: "Noto Sans JP", sans-serif;
  --clr-text: #453E3C;
  --clr-bg: #EEF3F4;
  --clr-lgray: #F5F6F4;
  --clr-blue: #338AD5;
  --clr-aqua: #4AB1CE;
  --clr-green: #009059;
  --clr-purple: #3C50B7;
  --clr-white: #FFFFFF;
  --clr-yellow: #FFF200;
  --grad-type01: linear-gradient(90deg, #78B573 0%, #0697D0 100%);
  --grad-type02: linear-gradient(90deg, #367ECA 0%, #48BFFA 36.84%, #60EBDD 66.92%, #6EE1A4 100%);
  --grad-type03: linear-gradient(90deg, #5AA343 0%, #66AF88 30%, #48BFFA 60%, #367ECA 100%);
  --grad-type04: linear-gradient(90deg, #0697D0 0%, #78B573 100%);
  --header-height: 7.8rem;
  --space-xs: .6rem;
  --space-sm: 1.2rem;
  --space-md: 1.6rem;
  --space-lg: 2rem;
  --space-xl: 2.4rem;
  --space-2xl: 3.6rem;
  --space-3xl: 4.8rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
}
@media screen and (max-width: 768px) {
  :root {
    --header-height: 6rem;
    --space-xs: calc(.6rem * .66);
    --space-sm: calc(1.2rem * .66);
    --space-md: calc(1.6rem * .66);
    --space-lg: calc(2rem * .66);
    --space-xl: calc(2.4rem * .66);
    --space-2xl: calc(3.6rem * .66);
    --space-3xl: calc(4.8rem * .66);
    --space-4xl: calc(6rem * .66);
    --space-5xl: calc(8rem * .66);
  }
}

/* Reset CSS
------------------------------------------- */
html {
  font-size: min(62.5%, 0.85vw);
}
@media screen and (min-width: 1366px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 58.59375%;
  }
}

body {
  position: relative;
  padding-top: var(--header-height);
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--clr-text);
}
body#root {
  background: url(/assets/images/common/body_bg.svg) -10% center/90% auto no-repeat fixed;
}
@media screen and (max-width: 768px) {
  body#root {
    background-image: url(/assets/images/common/body_bg-sp.svg);
    background-position: right 5vw center;
    background-size: cover;
    background-attachment: fixed;
  }
}

ul, li {
  list-style-type: none;
}

table {
  border-collapse: collapse;
}

a {
  text-decoration: none;
  color: currentColor;
}

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

/* -------------------------------------------
  共通
------------------------------------------- */
/* Body (fadein)
------------------------------------------- */
body {
  animation: bodyfadein 1s;
}

@keyframes bodyfadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Header
------------------------------------------- */
.header {
  position: fixed;
  z-index: 21;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 min(2.4rem, 3%);
  background-color: #fff;
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}
.header__logo {
  width: 25.2rem;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .header__logo {
    width: 19rem;
  }
}
.header__nav {
  margin-right: 2rem;
}
@media screen and (max-width: 768px) {
  .header__nav {
    display: none;
  }
}
.header__nav.is-hidden {
  display: none;
}
.header__doc {
  margin: 0 1rem 0 2rem;
}
.header__doc .button-grad > span {
  min-height: 3rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .header__doc {
    display: none;
  }
}
.header__doc.is-hidden {
  display: none;
}
@media screen and (max-width: 768px) {
  .header__sns {
    display: none;
  }
}
.header__sns.is-hidden {
  display: none;
}

/* Global Nav
------------------------------------------- */
.g-nav {
  display: flex;
  gap: 2.4rem;
}
.g-nav > li > *:not(div) {
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .g-nav > li > *:not(div) {
    transition: color 0.3s;
  }
  .g-nav > li > *:not(div):hover {
    color: var(--clr-blue);
  }
}
.g-nav > li > *:not(div).is-open {
  color: var(--clr-blue);
}
.g-nav > li > span {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.g-nav > li > span::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border: solid currentColor;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}
.g-nav__sub {
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  padding: 5.6rem 0;
  background-color: var(--clr-white);
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
}
.g-nav__sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: linear-gradient(to bottom, #eee, #fff);
}
.g-nav__sub-inner {
  width: min(90%, 110rem);
  margin: 0 auto;
}

.s-nav {
  display: flex;
  align-items: center;
  gap: 10%;
}
.s-nav__index {
  width: min(30%, 36rem);
}
.s-nav__list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(30%, max-content));
  gap: 2rem 5%;
}

/* Mega Menu
------------------------------------------- */
.mega-menu {
  position: fixed;
  z-index: 20;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: 0;
  background: url(/assets/images/common/megamenu_bg.svg) center center/cover no-repeat var(--clr-white);
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
  overflow: auto;
  transition: height 0.7s ease;
}
.mega-menu__inner {
  width: min(88%, 120rem);
  margin: 0 auto;
  padding: 5rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 5%;
}
@media screen and (max-width: 768px) {
  .mega-menu__inner {
    padding: 5rem 0 3.2rem;
    grid-template-columns: repeat(1, 1fr);
    gap: 3.2rem 0;
  }
}
.mega-menu__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4.8rem 0;
}
@media screen and (max-width: 768px) {
  .mega-menu__list {
    gap: 3.2rem;
  }
}
.mega-menu__sublist li {
  margin-top: 2rem;
}
.mega-menu__button {
  display: flex;
  flex-direction: column;
  gap: 1.8rem 0;
}
@media screen and (max-width: 768px) {
  .mega-menu__button {
    margin-top: 3.2rem;
    gap: 1rem;
  }
}
.mega-menu__switch {
  width: 5.6rem;
  height: 3.4rem;
  padding: 0.2rem;
  border-radius: 5rem;
  background: var(--grad-type01);
  display: flex;
}
@media screen and (max-width: 768px) {
  .mega-menu__switch {
    width: 4.8rem;
    height: 2.9rem;
  }
}
.mega-menu__switch > span {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4.8rem;
  background-color: var(--clr-white);
  cursor: pointer;
}
.mega-menu__switch > span::before, .mega-menu__switch > span::after {
  content: "";
  position: absolute;
  display: block;
  left: calc(50% - 1.2rem);
  width: 2.4rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: var(--grad-type01);
  transition: top 0.2s ease, transform 0.2s ease;
}
@media screen and (max-width: 768px) {
  .mega-menu__switch > span::before, .mega-menu__switch > span::after {
    left: calc(50% - 1rem);
    width: 2rem;
  }
}
.mega-menu__switch > span::before {
  top: calc(50% - 0.1rem - 0.4rem);
}
@media screen and (max-width: 768px) {
  .mega-menu__switch > span::before {
    top: calc(50% - 0.1rem - 0.3rem);
  }
}
.mega-menu__switch > span::after {
  top: calc(50% - 0.1rem + 0.4rem);
}
@media screen and (max-width: 768px) {
  .mega-menu__switch > span::after {
    top: calc(50% - 0.1rem + 0.3rem);
  }
}
.mega-menu__switch.is-open > span::before {
  top: calc(50% - 0.1rem);
  transform: rotate(25deg);
}
.mega-menu__switch.is-open > span::after {
  top: calc(50% - 0.1rem);
  transform: rotate(-25deg);
}
@media (hover: hover) {
  .mega-menu__switch:not(.is-open):hover > span::before {
    top: calc(50% - 0.1rem - 0.25rem);
  }
  .mega-menu__switch:not(.is-open):hover > span::after {
    top: calc(50% - 0.1rem + 0.25rem);
  }
}
.mega-menu__footer {
  width: min(90%, 120rem);
  margin: 0 auto;
  padding: 2rem 0;
  border-top: solid 1px rgba(69, 62, 60, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .mega-menu__footer {
    padding: 0 0 1rem;
    border-top: none;
    border-bottom: solid 1px rgba(69, 62, 60, 0.2);
  }
}
.mega-menu__f-nav ul {
  display: flex;
  gap: 0 3.2rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .mega-menu__f-nav ul {
    display: block;
  }
  .mega-menu__f-nav ul li {
    display: inline-block;
    margin: 0 1rem 0.5rem 0;
  }
}
@media (hover: hover) {
  .mega-menu__f-nav li a {
    transition: color 0.3s ease;
  }
  .mega-menu__f-nav li a:hover {
    color: var(--clr-blue);
  }
}
@media screen and (max-width: 768px) {
  .mega-menu__sns {
    display: none;
  }
}
.mega-menu__copyright {
  display: none;
}
@media screen and (max-width: 768px) {
  .mega-menu__copyright {
    display: block;
    padding: 1rem 1rem 1.5rem;
    text-align: center;
  }
  .mega-menu__copyright small {
    font-size: 1rem;
  }
}

.menu__index {
  position: relative;
  display: block;
  padding: 0.7rem 1.6rem;
  border-radius: 0.4rem;
  background-color: var(--clr-bg);
  font-size: 1.8rem;
  font-weight: 700;
}
.menu__index::before, .menu__index::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 1.25rem);
  right: 1.6rem;
  width: 2.5rem;
  aspect-ratio: 1/1;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.menu__index::before {
  background-image: url(/assets/images/common/menu_index--off.svg);
}
.menu__index::after {
  background-image: url(/assets/images/common/menu_index--on.svg);
  opacity: 0;
}
@media (hover: hover) {
  .menu__index {
    transition: color 0.3s ease;
  }
  .menu__index::before, .menu__index::after {
    transition: opacity 0.3s ease;
  }
  .menu__index:hover {
    color: var(--clr-blue);
  }
  .menu__index:hover::before {
    opacity: 0;
  }
  .menu__index:hover::after {
    opacity: 1;
  }
}
.menu__list-link {
  position: relative;
  display: inline-block;
  padding-left: 1.6rem;
}
.menu__list-link::before {
  content: "";
  position: absolute;
  display: block;
  top: 1.2rem;
  left: 0;
  width: 0.8rem;
  height: 0;
  border-top: solid 0.1rem currentColor;
}
@media (hover: hover) {
  .menu__list-link {
    transition: color 0.3s ease;
  }
  .menu__list-link:hover {
    color: var(--clr-blue);
  }
}

/* Footer
------------------------------------------- */
.footer {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 52rem;
  background: url(/assets/images/common/footer_bg.png) center top/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .footer {
    min-height: initial;
    display: block;
    padding-top: 20rem;
    background-image: url(/assets/images/common/footer_bg--sm.png);
  }
}
.footer.is-blur {
  pointer-events: none;
  filter: blur(1rem);
}
.footer__inner {
  width: min(84%, 114.4rem);
  margin: 0 auto;
  padding-bottom: 2rem;
  border-bottom: solid 1px var(--clr-white);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--clr-white);
}
@media screen and (max-width: 768px) {
  .footer__inner {
    width: 88%;
    padding-bottom: 1.5rem;
    display: block;
  }
}
.footer__logo {
  width: 19rem;
}
.footer__address {
  margin: 1.5rem 0;
  font-size: 1.3rem;
}
.footer__button01 li {
  margin-top: 0.8rem;
}
@media screen and (max-width: 768px) {
  .footer__button01 {
    display: grid;
    gap: 0 0.5rem;
    grid-template-columns: 3fr 4fr;
  }
}
.footer__button02 {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0 0.8rem;
}
@media screen and (max-width: 768px) {
  .footer__button02 {
    margin-top: 2rem;
    flex-direction: column;
    gap: 0.8rem 0;
  }
}
.footer__button02 li {
  width: 26rem;
}
@media screen and (max-width: 768px) {
  .footer__button02 li {
    width: 100%;
  }
}
.footer__button02 li a span {
  min-height: 3.2rem;
  font-size: 1.6rem;
}
.footer__link {
  display: flex;
  gap: 0 3.2rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .footer__link {
    display: block;
    margin-top: 2rem;
  }
  .footer__link li {
    display: inline-block;
    margin: 0 1rem 0.5rem 0;
  }
}
@media (hover: hover) {
  .footer__link li a {
    transition: color 0.3s ease;
  }
  .footer__link li a:hover {
    color: var(--clr-blue);
  }
}
.footer__copyright {
  width: min(84%, 114.4rem);
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .footer__copyright {
    width: 88%;
    padding: 1rem 0 1.5rem;
  }
}
.footer__copyright small {
  font-size: 1.1rem;
  color: var(--clr-white);
}
@media screen and (max-width: 768px) {
  .footer__copyright small {
    font-size: 1rem;
  }
}

/* Contents
------------------------------------------- */
.contents {
  position: relative;
  padding-bottom: 52rem;
}
body#root .contents::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52rem;
  background-color: var(--clr-lgray);
}
.contents.is-blur {
  filter: blur(1rem);
  pointer-events: none;
}
.contents main {
  margin-top: 12rem;
}
@media screen and (max-width: 768px) {
  .contents main {
    margin-top: 6.4rem;
  }
}
.contents main.has-deco {
  background: url(/assets/images/common/main_deco.svg) center 24rem/133.6rem auto no-repeat;
}
@media screen and (max-width: 768px) {
  .contents main.has-deco {
    background: none;
  }
}

/* Page Title
------------------------------------------- */
.page-title {
  position: relative;
  height: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: linear-gradient(rgba(245, 246, 244, 0.5019607843), #ffffff 20%, rgba(255, 255, 255, 0.6) 50%, rgba(74, 177, 206, 0.2));
  overflow: hidden;
}
.page-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/assets/images/common/page_title_bg.svg) center center/auto 100% no-repeat;
}
@media screen and (max-width: 768px) {
  .page-title {
    height: 25.2rem;
  }
  .page-title::before {
    background: url(/assets/images/common/page_title_bg-sp.svg) center center/cover no-repeat;
  }
}
.page-title::after {
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 0;
  width: 100%;
  height: 1.6rem;
  border-radius: 100% 100% 0 0;
  background: var(--grad-type01);
}
.page-title > * {
  width: min(90%, 114.4rem);
  margin: 0 auto;
}
.page-title h1 {
  position: relative;
  font-size: 6.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.page-title h1 span {
  background: var(--grad-type03);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
  .page-title h1 {
    margin-bottom: 0.25em;
    font-size: 3.2rem;
  }
}

.topic-path li {
  display: inline-block;
  font-size: 1.3rem;
}
.topic-path li:not(:last-child)::after {
  content: ">";
  display: inline-block;
  margin-left: 0.35em;
}
@media (hover: hover) {
  .topic-path li a:hover {
    text-decoration: underline;
  }
}

/* Anchor List
------------------------------------------- */
.anchor-list {
  width: min(90%, 114.4rem);
  margin: 12rem auto;
}
@media screen and (max-width: 768px) {
  .anchor-list {
    width: 82%;
    margin: 7rem auto;
  }
}
@media screen and (max-width: 768px) {
  .anchor-list ul {
    flex-direction: column;
    gap: 1.75rem;
  }
}
.anchor-list ul li {
  border-radius: 0.8rem;
  background: var(--grad-type01);
}
@media screen and (max-width: 768px) {
  .anchor-list ul li {
    width: 100%;
  }
}
.anchor-list ul li a {
  position: relative;
  display: block;
  overflow: hidden;
  transform: translate(-0.4rem, -0.4rem);
  padding: 1.25em 5%;
  border-radius: 0.8rem;
  background-color: var(--clr-bg);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .anchor-list ul li a {
    padding: 1.25em 1.5em;
    font-size: 1.6rem;
  }
}
.anchor-list ul li a::before, .anchor-list ul li a::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 4.8rem;
  height: 4.8rem;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.anchor-list ul li a::before {
  background-image: url(/assets/images/common/anc-btn--grad.svg);
}
.anchor-list ul li a::after {
  background-image: url(/assets/images/common/anc-btn--white.svg);
}
@media (hover: hover) {
  .anchor-list ul li a {
    transition: transform 0.3s;
  }
  .anchor-list ul li a::after {
    transition: opacity 0.3s;
  }
  .anchor-list ul li a:hover {
    transform: translate(0, 0);
  }
  .anchor-list ul li a:hover::after {
    opacity: 0;
  }
}

/* Modal
------------------------------------------- */
.custom-modal .fancybox__backdrop {
  background-color: rgba(69, 62, 60, 0.8);
}
.custom-modal .fancybox__content {
  max-width: 120rem;
  max-height: 60rem;
  padding: 0;
  border-radius: 2.4rem;
  background-color: var(--clr-bg);
}
@media screen and (max-width: 768px) {
  .custom-modal .fancybox__content {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 1.6rem;
  }
}
.custom-modal .fancybox__content .f-button.is-close-btn {
  top: 2rem;
  right: 2rem;
  width: 6.4rem;
  height: 6.4rem;
  border: solid 1px var(--clr-blue);
  border-radius: 50%;
  background: var(--clr-bg);
}
@media screen and (max-width: 768px) {
  .custom-modal .fancybox__content .f-button.is-close-btn {
    top: 1.5rem;
    right: 5vw;
    width: 4.8rem;
    height: 4.8rem;
  }
}
.custom-modal .fancybox__content .f-button.is-close-btn svg {
  stroke: var(--clr-blue);
}

.modal-contents {
  padding: 8rem;
}
@media screen and (max-width: 768px) {
  .modal-contents {
    padding: 7.8rem 5vw 5vw 5vw;
  }
}

/* -------------------------------------------
  section 共通
------------------------------------------- */
.section {
  position: relative;
}
.section__wrap {
  margin-top: 12rem;
}
@media screen and (max-width: 768px) {
  .section__wrap {
    margin-top: 6rem;
  }
}
.section__wrap-sm {
  margin-top: 8rem;
}
.section__inner {
  width: min(90%, 114.4rem);
  margin: 0 auto;
}
.section__header {
  position: relative;
  overflow: hidden;
  margin-bottom: 5rem;
  padding: 0.7em 1em;
  border-radius: 0.8rem;
  background-color: var(--clr-bg);
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .section__header {
    margin-bottom: 3.5rem;
    font-size: 2.2rem;
  }
}
.section__header::after {
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 0;
  width: 100%;
  height: 1.6rem;
  border-radius: 100% 100% 0 0;
  background: var(--grad-type03);
}
@media screen and (max-width: 768px) {
  .section__header::after {
    bottom: -0.6rem;
    height: 1.2rem;
  }
}
.acc-head .section__header {
  padding-right: 2em;
}
.acc-head .section__header::before {
  content: "";
  position: absolute;
  top: calc(50% - 2.4rem);
  right: 2rem;
  width: 4.8rem;
  height: 4.8rem;
  background: url(/assets/images/event/acc-btn--plus.svg) center center/contain no-repeat;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .acc-head .section__header::before {
    top: calc(50% - 1.5rem);
    right: 1rem;
    width: 3rem;
    height: 3rem;
  }
}
@media (hover: hover) {
  .acc-head .section__header {
    transition: color 0.3s ease;
  }
  .acc-head .section__header:hover {
    color: var(--clr-blue);
  }
}
.acc-head.is-open .section__header::before {
  transform: rotate(180deg);
  background-image: url(/assets/images/event/acc-btn--minus.svg);
}
.section__header-md {
  position: relative;
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-xl);
  border-bottom: solid 0.2rem var(--clr-bg);
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .section__header-md {
    font-size: 2rem;
  }
}
.section__header-md::after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 28%;
  height: 0.2rem;
  background: var(--grad-type03);
}
.section__header-sm {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .section__header-sm {
    font-size: 1.8rem;
  }
}
.section__header-xs {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  font-size: 2rem;
}
.section__lead {
  margin-bottom: 8rem;
}
@media screen and (max-width: 768px) {
  .section__lead {
    margin-bottom: 4rem;
  }
}
.section__lead p {
  font-size: 1.6rem;
}
.section__lead p:not(:last-child) {
  margin-bottom: 1.5em;
}
.section__grid {
  display: grid;
  gap: 8rem var(--space-xl);
}
@media screen and (max-width: 768px) {
  .section__grid {
    gap: 4rem var(--space-xl);
  }
}
.section__grid.gap-sm {
  gap: var(--space-xl) var(--space-xl);
}
@media screen and (max-width: 768px) {
  .section__grid.gap-sm {
    gap: var(--space-xl) var(--space-xl);
  }
}
.section__grid.x2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 8rem var(--space-4xl);
}
@media screen and (max-width: 768px) {
  .section__grid.x2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem var(--space-xl);
  }
}
.section__grid.x3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  .section__grid.x3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.section__grid.x4 {
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 768px) {
  .section__grid.x4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.title-section figure:not(:last-child) {
  margin-bottom: var(--space-3xl);
}
.title-section figure img {
  border-radius: 0.8rem;
}

.feature-list figure img {
  width: 100%;
  aspect-ratio: 365/219;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.8rem;
}
@media screen and (max-width: 768px) {
  .feature-list figure img {
    border-radius: 0.6rem;
  }
}
.feature-list figure figcaption {
  margin-top: var(--space-sm);
  font-size: 1.8rem;
}
.feature-list .title {
  margin-top: var(--space-lg);
  font-size: 2.4rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .feature-list .title {
    font-size: 2rem;
  }
}
.feature-list .title:not(:last-child) {
  margin-bottom: var(--space-md);
}
.feature-list dl {
  margin-top: var(--space-lg);
}
.feature-list dl dt {
  min-height: 6.8rem;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .feature-list dl dt {
    min-height: initial;
  }
}
.feature-list dl dt .num {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--fnt-roboto);
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  color: var(--clr-blue);
}
@media screen and (max-width: 768px) {
  .feature-list dl dt .num {
    padding-left: 1rem;
    font-size: 3.2rem;
  }
}
.feature-list dl dt .num::before {
  content: "FEATURE";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 768px) {
  .feature-list dl dt .num::before {
    font-size: 0.6rem;
  }
}
.feature-list dl dt .txt {
  font-size: 2.4rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .feature-list dl dt .txt {
    font-size: 1.8rem;
  }
}
.feature-list dl dd {
  margin-top: var(--space-xs);
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
@media screen and (max-width: 768px) {
  .keyword-list {
    gap: 0.8rem;
  }
}
.keyword-list li {
  padding: var(--space-md) var(--space-xl);
  border-radius: 0.8rem;
  background-color: var(--clr-bg);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .keyword-list li {
    padding: 1.2rem 2rem;
    font-size: 1.5rem;
  }
}
.keyword-list li span {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .keyword-list li span {
    font-size: 1.2rem;
  }
}
.keyword-list li.last {
  padding-left: var(--space-sm);
  background-color: transparent;
}
.keyword-list__notes {
  margin-top: var(--space-md);
}

.gallery-list__item {
  padding: 0 var(--space-sm);
}

.paren-list li {
  display: flex;
}
.paren-list li > .num {
  flex: 0 0 2.4em;
}

.dot-list li {
  display: flex;
}
.dot-list li::before {
  content: "・";
  flex: 0 0 1.5rem;
}

.inline-list > * {
  display: inline-block;
  margin: 0 1rem 0rem 0;
}

.table-basic {
  min-width: 60%;
  border-collapse: collapse;
}
@media screen and (max-width: 768px) {
  .table-basic {
    min-width: initial;
    width: 100%;
    font-size: 0.8em;
  }
}
.table-basic th, .table-basic td {
  padding: var(--space-sm);
  border: solid 1px #ccc;
  background-color: var(--clr-white);
  text-align: left;
  font-weight: 400;
}
.table-basic th.center, .table-basic td.center {
  text-align: center;
}
.table-basic th.right, .table-basic td.right {
  text-align: right;
}
.table-basic th {
  background-color: var(--clr-bg);
}

.table-stripe {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .table-stripe {
    font-size: 0.8em;
  }
}
.table-stripe th, .table-stripe td {
  padding: var(--space-md);
  text-align: left;
}
.table-stripe tr:nth-child(odd) th, .table-stripe tr:nth-child(odd) td {
  background-color: #FBFCFC;
}
.table-stripe tr:nth-child(even) th, .table-stripe tr:nth-child(even) td {
  background-color: var(--clr-bg);
}

.box {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) var(--space-xl);
  background-color: var(--clr-bg);
}

.box-gmap {
  margin-top: var(--space-2xl);
}
.box-gmap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1110/542;
}

.box-youtube {
  aspect-ratio: 10000/5625;
}
.box-youtube iframe {
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=layout.css.map */