@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
root設定
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

*:root {
  /*幅1280pxの時に1文字10pxとなる値 最小値10px*/
  font-size: 10px;
  /* font-size: 10px; */
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1;
  color: #39514d;
  /*自動カーニング*/
  font-feature-settings: "palt";
  /*両端揃え*/
  text-align: justify;
  /* ---------- */
  /* 変数 */
  /* 基本文字カラー */
  --color-base: #39514d;
  /* 青 */
  --color-deep-blue: #191970;
  --color-blue: #2e95dd;
  --color-light-blue: #cfe6f6;
  --color-fluorescent-blue: #5353ff;
  /* 緑 */
  --color-deep-green: #219866;
  --color-green: #8bbd4f;
  --color-light-green: #d6e9bf;
  --color-fluorescent-green: #23f078;
  /* 茶 */
  --color-blown: #a46305;
  --color-light-blown: #f1be73;
  /* 黄色 */
  --color-yellow: #f6ce69;
  --color-light-yellow: #ffef8f;
}

@media screen and (max-width: 768px) {
  /*幅1024pxの時に1文字10pxとなる値*/
  *:root {
    font-size: 1.30208vw;
  }
}

@media screen and (max-width: 480px) {
  /*幅390pxの時に1文字10pxとなる値*/
  *:root {
    font-size: 2.5641vw;
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
noscript
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

noscript {
  display: block;
  font-size: 1.4rem;
  padding: 1em;
  background-color: #ff0;
  text-align: center;
  line-height: 1.5;
  position: relative;
  z-index: 10000000;
  width: auto;
  color: #000;
  word-break: keep-all;
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
font設定
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.font-en {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
表示制御
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/*PCで消す*/
.pc_hide {
  display: none;

  @media screen and (max-width: 480px) {
    display: block;
  }
}

/*SPで消す*/
@media screen and (max-width: 480px) {
  .sp_hide {
    display: none;
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
リンク設定
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/*リンク*/

a {
  text-decoration: none;
  text-decoration: none;
  &:visited {
  }

  &:hover {
    opacity: 0.8;
    transition: all 0.2s ease-out;
  }

  &:active {
    opacity: 0.5;
  }
}

/*PCでリンクを殺す*/
@media screen and (min-width: 481px) {
  a.disabled {
    pointer-events: none;

    &:hover,
    &:active {
      opacity: 1 !important;
    }
  }
}

/*SPでリンクを殺す*/
/* @media screen and (max-width: 480px) {
  a.sp_disabled {
    pointer-events: none;

    &:hover,
    &:active {
      opacity: 1 !important;
    }
  }
} */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*ボタン*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/*--------------------*/
/* ボタン文頭の三角*/
.head_sankaku {
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 1rem;
    aspect-ratio: 1/0.7;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* 色指定 */
  /* 蛍光グリーン */
  &.f_green {
    &::before {
      background-color: var(--color-fluorescent-green);
    }
  }
  /* グリーン */
  &.green {
    &::before {
      background-color: var(--color-green);
    }
  }
}
/*--------------------*/
/* 矢印ボタン */
.button_yajirushi {
  display: block;
  border-radius: 9999px;
  text-align: center;
  border: 0.4rem solid var(--color-deep-blue);
  padding: 3.8rem 0;
  box-sizing: border-box;
  position: relative;
  background-color: var(--color-deep-blue);
  position: relative;
  @media screen and (max-width: 480px) {
    padding: 2.5rem 0 1.5rem;
  }
  .en {
    position: absolute;
    display: block;
    top: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    font-weight: 700;
    line-height: 1;
    color: var(--color-fluorescent-green);
    @media screen and (max-width: 480px) {
      top: 0.8rem;
    }
  }
  .ja {
    font-size: 2rem;
    position: relative;
    padding-right: 2.5em;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.15em;
    @media screen and (max-width: 480px) {
      font-size: 1.6rem;
      padding: 0;
      width: 100%;
    }
    &.yajirushi {
      @media screen and (max-width: 480px) {
        position: static;
      }
      &::before {
        content: "";
        position: absolute;
        display: block;
        aspect-ratio: 14/29;
        width: 1.4rem;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: var(--color-fluorescent-green);
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 3.8rem;
        height: 0.2rem;
        right: 0.1rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--color-fluorescent-green);
      }
      @media screen and (max-width: 480px) {
        &::before {
          content: "";
          right: 2.6rem;
        }
        &::after {
          right: 2.7rem;
          width: 6.5rem;
        }
      }
    }
  }
  &:hover {
    background-color: #fff;
    .en {
      color: var(--color-deep-blue);
    }
    .ja {
      color: var(--color-deep-blue);
      &.yajirushi {
        &::before {
          background-color: var(--color-deep-blue);
        }
        &::after {
          background-color: var(--color-deep-blue);
        }
      }
    }
  }
}
/* 角丸ボタン */
a.button_kakumaru {
  display: block;
  border-radius: 9999px;
  text-align: center;
  border: 0.5rem solid #fff;

  span.button_inner {
    display: flex;
    box-sizing: border-box;
    height: 6rem;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 9999px;
    transition: all 0.2s ease-out;
    span.head_sankaku {
      display: inline-block;
      padding-left: 1.25em;
      font-size: 1.9rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }
  }
  &:hover {
    opacity: 1;
  }
  /* 緑 */
  &.green {
    span.button_inner {
      background-color: var(--color-light-green);
      span.head_sankaku {
        color: var(--color-blown);
        color: var(--color-deep-green);
      }
    }
    &.shadow {
      box-shadow: 0.6rem 0.6rem 0 var(--color-light-green);
    }
    &:hover {
      span.button_inner {
        background-color: var(--color-green);
        border: 2px dotted var(--color-light-green);
        span.head_sankaku {
          color: #fff;
        }
      }
      &.shadow {
        box-shadow: 0.6rem 0.6rem 0 var(--color-green);
      }
    }
  }
  /* 青 */
  &.blue {
    span.button_inner {
      background-color: var(--color-light-blue);
      span.head_sankaku {
        color: var(--color-deep-blue);
      }
    }
    &.shadow {
      box-shadow: 0.6rem 0.6rem 0 var(--color-light-blue);
    }
    &:hover {
      span.button_inner {
        background-color: var(--color-blue);
        border: 2px dotted var(--color-light-green);
        span.head_sankaku {
          color: #fff;
        }
      }
      &.shadow {
        box-shadow: 0.6rem 0.6rem 0 var(--color-blue);
      }
    }
  }
  /* 黄色 */
  &.yellow {
    span.button_inner {
      background-color: var(--color-light-yellow);
      border: 2px dotted var(--color-yellow);
      span.head_sankaku {
        color: #19c15f;
      }
    }
    &.shadow {
      box-shadow: 0.6rem 0.6rem 0 var(--color-light-yellow);
    }
    &:hover {
      span.button_inner {
        background-color: var(--color-yellow);

        span.head_sankaku {
          color: #fff;
        }
      }
      &.shadow {
        box-shadow: 0.6rem 0.6rem 0 var(--color-yellow);
      }
    }
  }
  /* 白 */
  &.white {
    span.button_inner {
      span.head_sankaku {
        color: var(--color-blown);
      }
    }
    &.shadow {
      box-shadow: 0.6rem 0.6rem 0 var(--color-light-green);
    }
    &:hover {
      span.button_inner {
        background-color: var(--color-light-green);
      }
      &.shadow {
        box-shadow: 0.6rem 0.6rem 0 var(--color-green);
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ページトップボタン設定
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.pagetop_jump {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
  z-index: 100;
  width: 6rem;
  aspect-ratio: 1/1;
  @media screen and (max-width: 480px) {
    width: 4rem;
  }
  &.on {
    visibility: visible;
    opacity: 1;
  }

  a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(246, 206, 105, 0.8);
    position: relative;
    font-size: 0;
    border-radius: 9999px;
    &::after {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      width: 1rem;
      height: 1rem;
      border: 1px solid #fff;
      border-bottom: none;
      border-left: none;
      transform: translate(-50%, -25%) rotate(-45deg);
    }

    /*PC版のみhoverを付与*/

    @media screen and (min-width: 769px) {
      &:hover {
        opacity: 0.7;
        transition: 0.2s;
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
画像
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

img {
  width: 100%;
  height: auto;
  /* オブジェクトフィット */
  &.ojf_cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
  &.ojf_contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }
}
/* オブジェクトフィット */
.ojf_cover_wrap {
  > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
}

.ojf_contain_wrap {
  > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ローディング画面
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fffbe3;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
  .loader {
    position: relative;
    width: min(30%, 160px);
    aspect-ratio: 2/1;
    &::before {
      content: "";
      background-image: url(../img/common/logo_kanaya.svg);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      display: block;
      position: absolute;
      top: calc(50% - 4px);
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      aspect-ratio: 1/1;
    }
    div.progress {
      position: absolute;
      bottom: 0;
      height: 4px;
      width: 100%;
      --c: no-repeat linear-gradient(#999 0 0);
      background: var(--c), var(--c), #ccc;
      background-size: 60% 100%;
      animation: l16 3s infinite;
    }
  }
}
@keyframes l16 {
  0% {
    background-position:
      -150% 0,
      -150% 0;
  }
  66% {
    background-position:
      250% 0,
      -150% 0;
  }
  100% {
    background-position:
      250% 0,
      250% 0;
  }
}

#loading-screen {
  &.fade-out {
    opacity: 0;
  }
}
#page_wrap {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  &.visible {
    opacity: 1;
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ページ設定
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

#page_wrap {
  background-color: #fafafa;
  /*--------------------*/
  /* ページ全体の幅 */
  min-width: 320px;
  overflow: hidden;

  /*--------------------*/
  /* コンテンツ部分 */
  #contents_wrap {
  }
}