@charset "UTF-8";

/**
 * Reset CSS
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden='until-found'])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  tab-size: 2;
}

:where(html:has(dialog:modal[open])) {
  overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol, summary) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(dialog, [popover]) {
  border: none;
  background: none;
  color: inherit;
  inset: unset;
  max-width: unset;
  max-height: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  display: none !important;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
  user-select: none !important;
}


/**
 * Color Themes
 */
:root{
  --color-white: #ffffff;
  --color-black: #000000;

  --color-primary: #4a5d92;
  --color-on-primary: #ffffff;
  --color-primary-container: #dae1ff;
  --color-on-primary-container: #314578;

  --color-secondary: #585e71;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #dde2f9;
  --color-on-secondary-container: #414659;

  --color-tertiary: #735471;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #ffd6f9;
  --color-on-tertiary-container: #5a3d58;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-surface: #faf8ff;
  --color-on-surface: #1a1b21;
  --color-on-surface-variant: #45464f;
  --color-inverse-surface: #2f3036;
  --color-inverse-on-surface: #f1f0f7;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f3fa;
  --color-surface-container: #eeedf4;
  --color-surface-container-high: #e8e7ef;
  --color-surface-container-highest: #e3e2e9;

  --color-border: #757680;
  --color-border-variant: #c5c6d0;

  --scrim: rgba(0 0 0 / 75%);
  --shadow: 0 0 3px rgba(0 0 0 / 12%);
}


/**
 * Site CSS
 */
html{
  font-size: 100%;
}

body{
  background-color: var(--color-surface);
  font-family: "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--color-on-surface);
}

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

input, textarea, select, button{
  border: none;
  outline: none;
  background-color: transparent;
  box-sizing: border-box;
}


/**
 * Layout
 */

/* l-body */
.l-body{
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
}

/* l-header */
.l-header{
  flex: 0 0 auto;
  z-index: 1000;
  position: sticky;
  top: 0;
  padding: 0 16px;
  width: 100%;
  height: 5rem;
  background-color: rgba(250 248 255 / 90%);
  backdrop-filter: blur(4px);
  .l-header__wrapper{
    margin: 0 auto;
    max-width: 1400px;
    height: inherit;
  }
  .l-header__container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 8px;
    width: 100%;
    height: inherit;
  }
  @media (min-width: 800px) {
    padding: 0 20px;
    height: 6.25rem;
  }
}

/* l-header-logo */
.l-header-logo{
  flex: 1 1 auto;
  > a{
    > img{
      width: auto;
      height: 2rem;
    }
  }
  @media (min-width: 800px) {
    > a{
      > img{
        height: 3rem;
      }
    }
  }
}

/* l-header-nav */
.l-header-nav{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0 8px;
  > *{
    flex: 0 0 auto;
  }
}

/* l-header-button */
.l-header-button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  border: solid 1px var(--color-border-variant);
  border-radius: 8px;
  height: 2.8em;
  line-height: 1.3;
  font-size: 0.75rem;
  color: var(--color-on-surface);
  transition: opacity 0.2s;
  > svg{
    width: 1.4em;
    height: auto;
    fill: var(--color-on-surface);
  }
  &:hover{
    opacity: 0.8;
  }
  &.l-header-button--primary{
    border: none;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    > svg{
      margin-inline: 0.4em -0.4em;
      fill: var(--color-on-primary);
    }
  }
  @media (min-width: 800px) {
    font-size: 15px;
  }

}

/* l-footer */
.l-footer{
  flex: 0 0 auto;
  padding: 40px 20px 12px;
  background-color: var(--color-surface-container);
  .l-footer__wrapper{
    margin: 0 auto;
    max-width: 1120px;
  }
  .l-footer__container{
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 800px) {
    padding: 80px 20px 20px;
    .l-footer__container{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

/* l-footer-summary */
.l-footer-summary{
  .l-footer-summary__logo{
    margin: 0 0 1.5rem;
    img {
      width: auto;
      height: 3.25rem;
    }
  }
  .l-footer-summary__address{
    line-height: 1.8;
    font-size: 0.8125rem;
    > a{
      text-decoration: underline;
    }
  }
  .l-footer-summary__iso{
    margin: 1.5rem 0 0;
    img {
      width: auto;
      height: 3.75rem;
    }
  }
  @media (min-width: 800px) {
    grid-area: 1 / 1 / 3 / 3;
    .l-footer-summary__address{
      font-size: 0.9375rem;
    }
  }
}

/* l-footer-links */
.l-footer-links{
  display: flex;
  gap: 8px;
  > li{
    > a{
      transition: opacity 0.2s;
      &:hover{
        opacity: 0.8;
      }
    }
  }
  @media (min-width: 800px) {
    grid-area: 1 / 3 / 3 / -1;
    align-self: start;
    justify-self: end;
    > li{
      > a{
        > img{
          width: 220px;
        }
      }
    }
  }
}

/* l-footer-copyright */
.l-footer-copyright{
  text-align: center;
  font-size: 0.6875rem;
  color: var(--color-on-surface-variant);
  @media (min-width: 800px) {
    grid-area: 3 / 1 / 4 / -1;
    font-size: 0.8125rem;
  }
}

/* l-main */
.l-main{
  flex: 1 1 auto;
  padding: 40px 20px 60px;
  .l-main__wrapper{
    margin: 0 auto;
    max-width: 1120px;
  }
  @media (min-width: 800px) {
    padding: 80px 20px 120px;
  }
}

/* l-section */
.l-section{
  margin: 0 0 2.5rem;
  + .l-section{
    margin: 2.5rem 0;
  }
  .l-section__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 8px;
    margin: 0 0 1rem;
  }
  .l-section__content{
    margin: 1em 0;
  }
  @media (min-width: 800px) {
    margin: 0 0 6rem;
    + .l-section{
      margin: 6rem 0;
    }
    .l-section__header{
      margin: 0 0 2rem;
    }
    .l-section__content{
      margin: 2rem 0;
    }
  }
}


/**
 * Components
 */

/* c-title */
.c-title{
  line-height: 1.3;
  font-size: 1.25rem;
  @media (min-width: 800px) {
    font-size: 2rem;
  }
}

/* c-text */
.c-text{
  line-height: 1.8;
  font-size: 0.875rem;
  @media (min-width: 800px) {
    font-size: 1.0625rem;
  }
}

/* c-link */
.c-link{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: underline;
  &:hover{
    text-decoration: none;
  }
  > svg{
    width: 1.2em;
    height: auto;
    fill: var(--color-primary);
  }
  @media (min-width: 800px) {
    font-size: 0.9375rem;
  }
}

/* c-list */
.c-list{
  display: grid;
  gap: 16px 0;
  list-style: none!important;
  padding: 0!important;
  @media (min-width: 800px) {
    &.c-list--grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
  }
}

/* c-card */
.c-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: solid 1px var(--color-border);
  border-radius: 20px;
  height: 100%;
  text-decoration: none!important;
  .c-card__image{
    width: 100%;
    height: 12rem;
    object-fit: cover;
  }
  .c-card__container{
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    position: relative;
    padding: 20px;
  }
  .c-card__title{
    grid-area: 1 / 1 / 2 / -1;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline;
  }
  .c-card__text{
    grid-area: 2 / 1 / 3 / -1;
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-on-surface);
  }
  .c-card__category{
    grid-area: 3 / 1 / 4 / 2;
    align-self: center;
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
  }
  .c-card__icon{
    grid-area: 3 / 2 / 4 / -1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem 0 0;
    border-radius: 4px;
    border: solid 1px var(--color-primary);
    width: 1.25rem;
    height: 1.25rem;
    > svg{
      width: 1rem;
      height: auto;
      fill: var(--color-primary);
    }
  }
  &:not(:has(.c-card__image)):not(:has(.c-card__category)){
    .c-card__container{
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      gap: 0 12px;
    }
    .c-card__title{
      grid-area: 1 / 1 / 2 / 2;
    }
    .c-card__text{
      grid-area: 2 / 1 / 3 / 2;
    }
    .c-card__icon{
      grid-area: 1 / 2 / 3 / 3;
      margin: 0;
    }
  }
  &:hover{
    outline: var(--color-primary);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -1px;
    .c-card__title{
      text-decoration: none;
    }
    .c-card__icon{
      background-color: var(--color-primary);
      > svg{
        fill: var(--color-on-primary);
      }
    }
  }
  @media (min-width: 800px) {
    .c-card__container{
      padding: 24px;
    }
    .c-card__image{
      height: 13rem;
    }
    .c-card__title{
      font-size: 1.125rem;
    }
    .c-card__text{
      font-size: 1rem;
    }
    .c-card__category{
      margin: 1.5rem 0 0;
      font-size: 0.875rem;
    }
    .c-card__icon{
      margin: 1.5rem 0 0;
    }
  }
}

/* c-breadcrumb */
.c-breadcrumb{
  width: 100%;
  line-height: 1.8;
  font-size: 0.875rem;
  .c-breadcrumb__list{
    display: inline;
  }
  .c-breadcrumb__item{
    flex: 0 0 auto;
    display: inline;
    &:not(:first-of-type)::before{
      content: "";
      display: inline-block;
      margin-inline: 0.4em;
      border: none;
      border-top: solid 1px;
      border-right: solid 1px;
      width: 0.4em;
      height: 0.4em;
      vertical-align: middle;
      transform: rotate(45deg);
    }
  }
  .c-breadcrumb__link{
    color: var(--color-primary);
    text-decoration: underline;
    &:hover{
      text-decoration: none;
    }
  }
  @media (min-width: 800px) {
    font-size: 1.0625rem;
  }
}

/* .c-markdown-content */
.c-markdown-content{
  font-size: 0.875rem;
  h1{
    margin: 3em 0 1em;
    line-height: 1.3;
    font-size: 2em;
    font-weight: 700;
  }
  h2{
    margin: 3em 0 1em;
    line-height: 1.3;
    font-size: 1.65em;
    font-weight: 700;
  }
  h3{
    margin: 2em 0 1em;
    line-height: 1.5;
    font-size: 1.25em;
    font-weight: 700;
  }
  h4 {
    margin: 2em 0 1em;
    line-height: 1.3;
    font-size: 1.1em;
    font-weight: 700;
  }
  h5 {
    margin: max(1em, 1rem) 0;
    line-height: 1.5;
    font-size: 0.9em;
    font-weight: 700;
  }
  h6 {
    margin: max(1em, 1rem) 0;
    line-height: 1.5;
    font-size: 0.85em;
    font-weight: 670000;
    color: var(--color-on-surface-variant)
  }

  p{
    line-height: 1.8;
    margin: 1.5em 0;
  }

  ul, ol{
    line-height: 1.8;
    margin: 1.5em 0;
    padding-left: 2em;
    list-style: initial;
  }
  ul { list-style-type: disc; }
  ul ul { margin: 0; list-style-type: circle; }
  ul ul ul{ list-style-type: square; }
  ol{ list-style-type: decimal; }
  ol ol { margin: 0; list-style-type: lower-alpha; }
  ol ol ol{ list-style-type: lower-roman; }

  dl{
    margin: 1.5em 0;
  }
  dt{
    margin-top: 1em;
    font-weight: 700;
    line-height: 1.5;
  }
  dt:first-child{
    margin-top: 0;
  }
  dd{
    margin: 0 0 1em;
    line-height: 1.8;
  }

  .custom-list{
    padding: 0;
    list-style: none;
    > li{
      display: grid;
      grid-template-columns: 2em 1fr;
    }
  }

  a{
    color: var(--color-primary);
    text-decoration: underline;
    &:hover{
      text-decoration: none;
    }
  }

  pre{
    overflow: auto;
    margin: max(1.5rem, 1.5em) 0;
    padding: 1.2em;
    border-radius: 4px;
    background-color: var(--color-surface-container-low);
    font-size: 0.875em;
  }
  code{
    padding: 0.2em 0.4em;
    border-radius: 4px;
    background-color: var(--color-secondary-container);
    font-size: 0.875em;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  }
  blockquote{
    margin: max(1.5rem, 1.5em) 0;
    padding: 0 1.2em;
    border-left: 0.25em solid var(--color-secondary-container);
    color: var(--color-on-surface-variant);
  }

  table{
    margin: max(1.5rem, 1.5em) 0;
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875em;
  }
  th, td{
    border: 1px solid var(--color-border-variant);
    padding: 0.6em 0.8em;
  }
  th {
    background-color: var(--color-surface-container-low);
    font-weight: 700;
  }

  hr {
    margin: 4em 0;
    border: none;
    border-top: 1px solid var(--color-border-variant);
  }

  img{
    display: block;
    margin: max(1.5rem, 1.5em) 0;
    max-width: 100%;
  }

  figure {
    display: block;
    margin: max(1.5rem, 1.5em) 0;
    width: max-content;
    max-width: 100%;
    img {
      margin: 0;
    }
  }

  figcaption {
    display: block;
    margin: 0.5em 0;
    padding: 0;
    text-align: center;
    font-size: 0.875em;
    color: var(--color-on-surface-variant);
  }

  strong{
    font-size: 1em;
    font-weight: 700;
  }

  small{
    font-size: 0.875em;
  }

  @media (min-width: 800px) {
    font-size: 1.0625rem;

    h1 { font-size: 2.75em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.25em; }
    h5 { font-size: 1.1em; }

    figcaption {
      font-size: 0.85em;
    }
  }
}


/* c-faq-content */
.c-faq-content{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 0.75rem;
  margin: 5rem 0;
  .c-faq-content__icon{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    width: 1.8em;
    height: 1.8em;
    line-height: 1;
    font-size: 1rem;
    font-family: "Oswald", sans-serif;
    &:nth-of-type(1){
      background-color: var(--color-secondary);
      color: var(--color-on-secondary);
    }
    &:nth-of-type(2){
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }
  }
  .c-faq-content__header{
    line-height: 1.3;
    font-size: 1.25rem;
    font-weight: 700;
  }
  .c-faq-content__main{
    line-height: 1.8;
    font-size: 0.875rem;
    a{
      color: var(--color-primary);
      text-decoration: underline;
      &:hover{
        text-decoration: none;
      }
    }
  }

  @media (min-width: 800px) {
    gap: 2.5rem 1.5rem;
    margin: 8.75rem 0;
    .c-faq-content__icon{
      font-size: 1.75rem
    }
    .c-faq-content__header{
      font-size: 1.75rem;
    }
    .c-faq-content__main{
      font-size: 1.0625rem;
    }
  }
}