@charset "UTF-8";
/* ========================
rakuma css override
======================== */
.application {
  width: calc(360 / 390 * 100%);
  margin: 24px auto 36px;
}

.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/*
========================================
common
========================================
*/
:root {
  --white:#ffffff;
  --content-navy: #002896;
}

.d-contents {
  display: contents;
}

/*
========================================
main
========================================
*/
main {
  display: contents;
}


/*
========================================
mainVisual
========================================
*/
/* SP */
.mainVisual {
  margin: 0 auto;
  position: relative;
  .mainVisual__imgWrapper {
    position: relative;
    z-index: 0;
  }
  .mainVisual__header {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    row-gap: 8px;
    z-index: 1;
  }
  .mainVisual__title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: var(--content-navy);
  }
  .mainVisual__caption {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  /* PC */
  @media (min-width: 768px) {
    .mainVisual__imgWrapper {
      display: flex;
      justify-content: center;
      overflow: hidden;
    }
    .mainVisual__imagePC {
      position: relative;
      width: fit-content;
      max-width: fit-content;
      height: 315px;
    }
    .mainVisual__header {
      row-gap: 12px;
    }
    .mainVisual__title {
      font-size: 32px;
      line-height: 1.3;
    }
    .mainVisual__caption {
      font-size: 16px;
      line-height: 1.3;
    }
  }
}

/*
========================================
mainNav
========================================
*/
.mainNav {
  --underline:#FFD3D3;

  background-color: #EBEBEB;
  padding: 24px 0;

  .mainNav__inner {
    width: calc(358 / 390 * 100%);
    margin-inline: auto;
    background-color: var(--white);
    border-radius: 8px;
  }
  .mainNav__list {
    display: grid;
    width: calc(326 / 358 * 100%);
    margin-inline: auto;
    padding: 4px 0 8px;
  }
  .mainNav__listItem {
    display: contents;
    & + & > .mainNav__listItemLink {
      border-top: 1px solid #D1D1D1;
    }
  }
  .mainNav__listItemLink {
    display: grid;
    grid-template-columns: 50px auto;
    grid-template-rows: subgrid;
    column-gap: 16px;
    padding: 0 8px;
    align-items: center;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto;
      width: 8px;
      height: 8px;
      box-sizing: border-box;
      transform: rotate(-45deg);
      border-bottom: 2px solid var(--content-navy);
      border-right: 2px solid var(--content-navy);
    }
  }
  .mainNav__listItemBox {
    display: grid;
    row-gap: 4px;
    padding: 16px 14px 16px 0;
  }
  .mainNav__listItemName {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    width: fit-content;
    .mainNav__listItemName--underline {
      display: inline-block;
      background: linear-gradient(transparent 60%, var(--underline) 0%);
    }
  }

    /* PC */
  @media (min-width: 768px) {
    padding: 36px 0;
    .mainNav__inner {
      max-width: 948px;
    }
    .mainNav__list {
      width: 100%;
      padding: 24px calc(24 / 948 * 100%);
      grid-template-columns: repeat(2, 1fr);
      column-gap: calc(24 / 948 * 100%);
    }
    .mainNav__listItem {
      & + & > .mainNav__listItemLink {
        border-top: 0px;
      }
      & + &:last-child > .mainNav__listItemLink {
        border-bottom: 0px;
      }
    }
    .mainNav__listItemLink {
      grid-template-columns: 70px auto;
      border-bottom: 1px solid #D1D1D1;
      padding: 0 0 0 24px;
      &::after {
        right: 24px;
      }
    }
    .mainNav__listItemBox {
      display: grid;
      row-gap: 4px;
      padding: 16px 40px 16px 0;
    }
    .mainNav__listItemName {
      font-size: 18px;
      display: inline-block;
      .mainNav__listItemName--underline {
        background: linear-gradient(transparent 70%, var(--underline) 0%);
        letter-spacing: 0.03em;
        white-space: nowrap;
      }
      font-size: clamp(
        16.5px,
        calc(16.5px + (18 - 16.5) * ((100vw - 768px) / (820 - 768))),
        18px
      );
    }
    .mainNav__listItemCaption {
      font-size: 16px;
      letter-spacing: 0.03em;
    }
  }
}

/*
========================================
safety
========================================
*/
.safety {
  background-color: #F3F6FF;

  .safety__inner {
    width: calc(358 / 390 * 100%);
    max-width: 600px;
    padding: 32px 0;
    margin-inline: auto;
  }
  .safety__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--content-navy);
  }
  .safety__caption {
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
  }
  .safety__list {
    padding-top: 24px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    row-gap: 36px;
  }
  .safety__listItem {
    background-color: var(--white);
    padding: 16px;
    border-radius: 8px;
    position: relative;
    & + &::before {
      content: "";
      position: absolute;
      bottom: 100%;
      right: 0;
      left: 0;
      margin: auto;
      width: 52px;
      height: 36px;
      background-image: url(../img/safety/ico-arrow.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .safety__listItemWrapper {
    display: grid;
    grid-template-columns: 83px auto;
    grid-template-rows: subgrid;
    column-gap: 16px;
  }
  .safety__listItemBox {
    display: grid;
    row-gap: 4px;
  }
  .safety__listItemTitle {
    font-size: 16px;
    color: var(--content-navy);
    line-height: 1.5;
  }
  .safety__listItemCaption {
    font-size: 12px;
  }
  .safety__listItemBtn {
    background-color: var(--content-navy);
    width: 100%;
    border-radius: 100vh;
    margin-top: 4px;
  }
  .safety__listItemLink {
    display: block;
    color: var(--white);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    text-align: center;
    padding: 10px 4px 10px 0;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 16px;
      margin: auto;
      width: 8px;
      height: 8px;
      box-sizing: border-box;
      transform: rotate(-45deg);
      border-bottom: 2px solid var(--white);
      border-right: 2px solid var(--white);
    }
  }

  /* PC */
  @media (min-width: 768px) {
    .safety__inner {
      padding: 48px 0;
    }
    .safety__title {
      font-size: 28px;
      line-height: 1;
    }
    .safety__caption {
      margin-top: 18px;
      font-size: 16px;
    }
    .safety__list {
      padding-top: 36px;
      row-gap: 44px;
    }
    .safety__listItem {
      padding: 12px 18px;
      & + &::before {
        width: 52px;
        height: 44px;
      }
    }
    .safety__listItemWrapper {
      grid-template-columns: 100px auto;
      align-items: center;
    }
    .safety__listItemBox {
      row-gap: 8px;
    }
    .safety__listItemTitle {
      font-size: 18px;
      color: var(--content-navy);
      line-height: 1.4;
    }
    .safety__listItemCaption {
      font-size: 16px;
    }
    .safety__listItemLink {
      font-size: 16px;
      line-height: 1;
      padding: 16px 0px;
      &::after {
        right: 18px;
      }
    }
  }
}


/*
========================================
use
========================================
*/
.use {
  content-visibility: auto;
  contain-intrinsic-size: auto 2000px;

  .use__inner {
    width: calc(358 / 390 * 100%);
    padding: 32px 0;
    margin-inline: auto;
  }
  .use__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #D88460;
    text-align: center;
  }
  .use__section {
    border-radius: 8px;
    overflow: hidden;
    margin-top: 24px;
    padding-bottom: 24px;
    &.--brown {
      background-color: #FFEDD7;
    }
    &.--green {
      background-color: #DFF6F4;
    }
  }
  .use__sectionTitle {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    color: var(--white);
    padding: 10px 0;
    .--brown & {
      background-color: #D88460;
    }
    .--green & {
      background-color: #52AF9D;
    }
  }
  .use__sectionList {
    width: calc(326 / 358 * 100%);
    margin-inline: auto;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 16px;
    padding-top: 8px;
  }
  .use__sectionListItem {
    display: grid;
    padding-top: 86px;
    position: relative;
  }
  .use__sectionListItemImg {
    width: 140px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 16px;
    z-index: 1;
  }
  .use__sectionListItemBox {
    padding: 0 16px 16px;
    background-color: var(--white);
    border-radius: 6px;
    padding-top: 86px;
    display: grid;
    align-content: start;
    row-gap: 8px;
    height: 100%;
  }
  .use__sectionListItemTitle {
    text-align: center;
  }
  .use__sectionListItemCaption {
    text-align: center;
  }
  .use__listItemBtn {
    background-color: var(--content-navy);
    width: 100%;
    border-radius: 100vh;
    margin-top: 8px;
    max-width: 284px;
    margin-inline: auto;
    & + & {
      margin-top: 16px;
    }
  }
  .use__listItemLink {
    display: block;
    color: var(--white);
    font-weight: 600;
    text-align: center;
    padding: 16px 28px 16px 16px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 16px;
      margin: auto;
      width: 8px;
      height: 8px;
      box-sizing: border-box;
      transform: rotate(-45deg);
      border-bottom: 2px solid var(--white);
      border-right: 2px solid var(--white);
    }
  }

  /* PC */
  @media (min-width: 768px) {
    contain-intrinsic-size: auto 1400px;
    .use__inner {
      max-width: 840px;
      padding: 36px 0;
    }
    .use__title {
      font-size: 28px;
      line-height: 1.3;
    }
    .use__section {
      padding-bottom: 0px;
    }
    .use__sectionTitle {
      font-size: 24px;
    }
    .use__sectionList {
      width: 100%;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      column-gap: 24px;
      padding: 36px 36px 32px 36px;
    }
    .use__sectionListItem {
      padding-top: 75px;
      grid-template-rows: subgrid;
      grid-row: span 3;
      align-content: start;
    }
    .use__sectionListItemTitle {
      font-size: 18px;
    }
    .use__sectionListItemCaption {
      font-size: 16px;
    }
    .use__listItemLink {
      font-size: 16px;
    }
    .use__sectionListItemBox {
      grid-template-rows: subgrid;
      grid-row: span 3;
      align-content: start;
      row-gap: 12px;
    }
    .use__sectionListItemImg {
      width: 150px;
      top: 0px;
    }
  }
}




/*
========================================
floatingNavi
========================================
*/
.floatingNav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  padding-bottom: 0px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  transform: translateY(-200px);
  opacity: 0;
  pointer-events: none;
  background-color: var(--white);

  &.slide_in{
    pointer-events: auto;
  }

  .floatingNav__wrapper {
    position: relative;
    border-bottom: 2px solid #053ACE;
  }
  .floatingNav__inner {
    margin-inline: auto;
    background-color: #EBEBEB;
  }

  .mainNav__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 1px;
    position: relative;
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0px;
      width: 100%;
      height: 6px;
      background-color: #ffffff;
      z-index: 0;
    }
    &::before {
      top: 0px;
    }
    &::after {
      bottom: 0px;
    }
  }
  .mainNav__tab {
    background-color: var(--white);
    color: #053ACE;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.01em;
    padding: 8px 0;
    position: relative;
    z-index: 1;
  }

  /* PC */
  @media (min-width: 768px) {
    .floatingNav__inner {
      width: 100%;
      max-width: 960px;
    }
    .mainNav__list {
      &::before,
      &::after {
        height: 8px;
      }
    }
    .mainNav__tab {
      font-size: 16px;
      padding: 20px 0;
    }
  }
}

/* animation */
@keyframes slide_in {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.slide_in {
  animation: slide_in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide_out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-500px);
    opacity: 0;
  }
}
.slide_out {
  animation: slide_out 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/*========================================
aside
========================================*/
.aside {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;

  .aside__inner {
    padding-bottom: 32px;
  }
  @media (min-width: 768px) {
    contain-intrinsic-size: auto 1000px;
  }
}