@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
▼共通
- body
- root
- main
- 行間
- header

▼扉ページ
- page_top

▼フォルダ一覧ページ
- page_list

▼ログイン画面
- keyboard
- password/hint

▼詳細
- 背景Canvas
- page
-------------------------*/
/* 共通
--------------------------------------------------------- */
body {
  background: #fff;
  margin: 0;
}

footer {
  position: relative;
  background: #fff;
  padding-top: 30px;
  z-index: 1000;
}

:root {
  --main_green: #001C00;
  --sub_green: #83F351;
  --main_red: #FF0202;
}

main {
  font-family: "小塚ゴシック Pro", "Kozuka Gothic Pro", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Maru Gothic W4 JIS2004", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--main_green);
  color: var(--sub_green);
  outline: 2px solid var(--sub_green);
  outline-offset: -0.7320644217vw;
  position: relative;
  min-height: 100vh;
}
@media screen and (max-width: 768px) {
  main {
    outline-offset: -2.1794871795vw;
  }
}
main::after {
  content: "";
  background: url("../images/project/icon_close.png") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 1.8301610542vw;
  right: 1.8301610542vw;
  width: 1.6105417277vw;
  height: 1.6105417277vw;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  main::after {
    top: 5.7692307692vw;
    right: 7.6923076923vw;
    width: 5.641025641vw;
    height: 5.641025641vw;
  }
}

@media screen and (max-width: 768px) {
  main.page_list {
    outline: none;
  }
}
@media screen and (max-width: 768px) {
  main.page_list::after {
    display: none;
  }
}

/* 行間 */
/* header
--------------------------------------------------------- */
header {
  display: none;
  width: 100%;
  height: 14.1025641026vw;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1024px) {
  header {
    display: block;
  }
}
header {
  /* ハンバーガーメニューボタン */
}
header .openbtn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 5%;
  width: 6.4102564103vw;
  height: 3.8461538462vw;
  z-index: 5;
}
header .openbtn span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.2564102564vw;
  background: var(--sub_green);
}
header .openbtn span:nth-of-type(1) {
  top: 0;
}
header .openbtn span:nth-of-type(2) {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
header .openbtn span:nth-of-type(3) {
  top: calc(100% - 2px);
}
header .openbtn.active span:nth-of-type(1) {
  top: 1.9230769231vw;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
header .openbtn.active span:nth-of-type(2) {
  display: none;
}
header .openbtn.active span:nth-of-type(3) {
  top: 1.9230769231vw;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
header {
  /* ハンバーガーメニュー中身 */
}
header .g_nav {
  background: #001c00;
  position: fixed;
  z-index: 4;
  top: -110vh;
  width: 100%;
  height: 100dvh;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
header .g_nav.panelactive {
  top: 0;
}
header .g_nav::after {
  position: absolute;
  top: 2.1794871795vw;
  right: 2.1794871795vw;
  bottom: 2.1794871795vw;
  left: 2.1794871795vw;
  border: 2px solid var(--sub_green);
  content: "";
  pointer-events: none;
  z-index: 5;
}
header .g_nav .g_nav_inn {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--main_green);
}
header .g_nav .g_nav_inn .page_list {
  width: calc(100% - 105px);
  height: calc(100% - 120px);
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5.1282051282vw 3.8461538462vw;
  margin: 60px 45px 60px 60px;
}
header .g_nav .g_nav_inn .page_list::-webkit-scrollbar {
  width: 5px;
}
header .g_nav .g_nav_inn .page_list::-webkit-scrollbar-track {
  background: transparent;
}
header .g_nav .g_nav_inn .page_list::-webkit-scrollbar-thumb {
  background: #83f351;
  border-radius: 2.5px;
}
header .g_nav .g_nav_inn .page_list::-webkit-scrollbar-button {
  display: none;
}
header .g_nav .g_nav_inn .page_list::-webkit-scrollbar-corner {
  background: transparent;
}
header .g_nav .g_nav_inn .page_list::-webkit-resizer {
  display: none;
}
@media screen and (max-width: 768px) {
  header .g_nav .g_nav_inn .page_list {
    width: calc(100% - 85px);
    height: calc(100% - 100px);
    padding: 10.6666666667vw 5.3333333333vw;
    margin: 50px 35px 50px 50px;
  }
}
header .g_nav .g_nav_inn .page_list .link_list {
  width: 85%;
  max-width: 109.8096632504vw;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  header .g_nav .g_nav_inn .page_list .link_list {
    width: 61.08138192vw;
  }
}

/* 扉ページ
--------------------------------------------------------- */
.page_top {
  position: relative;
}
.page_top .lead_txt_wrapper {
  position: absolute;
  top: 4.4270833333vh;
  left: 2.635431918vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper {
    top: 5vh;
    left: 10.0048vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt {
  display: block flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.page_top .lead_txt_wrapper .lead_txt.txt01 {
  margin-bottom: 1.0980966325vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.txt01 {
    margin-bottom: 4vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.txt01 .t1.on {
  width: 16.7530380673vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.txt01 .t1.on {
    width: 50.8543086133vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.txt01 .t1.on img {
  -webkit-animation: reveal 1s steps(12) forwards;
          animation: reveal 1s steps(12) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.txt01 .t1.on .cursor {
  -webkit-animation: cursorMove 1s steps(12) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
          animation: cursorMove 1s steps(12) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.7320644217vw;
  margin-bottom: 1.4641288433vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper {
    margin-bottom: 4vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.7320644217vw;
  align-items: flex-start;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02 .t2.on {
  width: 12.3295827233vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02 .t2.on {
    width: 37.42668696vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02 .t2.on img {
  -webkit-animation: reveal 1s steps(9) forwards;
          animation: reveal 1s steps(9) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02 .t2.on .cursor {
  -webkit-animation: cursorMove 1s steps(9) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
          animation: cursorMove 1s steps(9) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk {
  position: relative;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk .t3 {
  position: absolute;
  top: 0.3660322108vw;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk .t3.on {
  width: 7.971749634vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk .t3.on {
    width: 24.1975708vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk .t3.on img {
  -webkit-animation: reveal 1s steps(17) forwards;
          animation: reveal 1s steps(17) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.lead_txt02_wrapper .txt02_asterisk .t3.on .cursor {
  -webkit-animation: cursorMove 1s steps(17) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
          animation: cursorMove 1s steps(17) forwards, blink 0.25s steps(1) infinite, cursorHide 1s steps(1) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.txt03 {
  width: 7.971749634vw;
  margin-left: 18.6193265007vw;
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt.txt03 {
    width: 24.1975708vw;
    margin-left: 52.6133333333vw;
  }
}
.page_top .lead_txt_wrapper .lead_txt.txt03 .t4.on img {
  -webkit-animation: reveal 1s steps(17) forwards;
          animation: reveal 1s steps(17) forwards;
}
.page_top .lead_txt_wrapper .lead_txt.txt03 .t4.on .cursor_last {
  -webkit-animation: cursorMove 1s steps(17) forwards, blink 0.25s steps(1) 4, blinkafter 0.5s steps(1) 1s 3, cursorHide 2.75s steps(1) forwards;
          animation: cursorMove 1s steps(17) forwards, blink 0.25s steps(1) 4, blinkafter 0.5s steps(1) 1s 3, cursorHide 2.75s steps(1) forwards;
}
.page_top .lead_txt_wrapper .lead_txt .typing {
  position: relative;
  display: inline-block;
  padding-right: 0.2928257687vw;
}
.page_top .lead_txt_wrapper .lead_txt .typing img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.page_top .lead_txt_wrapper .lead_txt .typing.on img {
  display: block;
}
.page_top .lead_txt_wrapper .lead_txt .typing.on .cursor {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.439238653vw;
  height: 1.2445095168vw;
  background: var(--sub_green);
}
@media screen and (max-width: 768px) {
  .page_top .lead_txt_wrapper .lead_txt .typing.on .cursor {
    width: 1.333332vw;
    height: 3.777774vw;
  }
}
@-webkit-keyframes reveal {
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes reveal {
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes cursorMove {
  to {
    left: 100%;
  }
}
@keyframes cursorMove {
  to {
    left: 100%;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes blinkafter {
  50% {
    opacity: 0;
  }
}
@keyframes blinkafter {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes cursorHide {
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cursorHide {
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page_top .content {
  position: absolute;
  top: 36.8489583333vh;
  left: 50%;
  translate: -50% 0;
}
@media screen and (max-width: 768px) {
  .page_top .content {
    top: 35.5vh;
  }
}
.page_top .content h1 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr;
  margin-inline: auto;
  margin-bottom: 14.7135416667vh;
}
.page_top .content h1 img {
  display: block;
  margin-inline: auto;
}
.page_top .content h1 img:first-of-type {
  width: 13.0976647145vw;
  margin-bottom: 5.7291666667vh;
}
@media screen and (max-width: 768px) {
  .page_top .content h1 img:first-of-type {
    width: 45.89748176vw;
    margin-bottom: 5.1983072917vh;
  }
}
.page_top .content h1 img:last-of-type {
  width: 4.6852122987vw;
}
@media screen and (max-width: 768px) {
  .page_top .content h1 img:last-of-type {
    width: 16.2898666667vw;
  }
}
.page_top .content .start_btn {
  width: 21.909875549vw;
  aspect-ratio: 299.2889/58.3111;
  display: grid;
  place-content: center;
  background: center/cover url(../images/project/frame_mission_start.png) no-repeat;
  -webkit-animation: flash 2s ease-in-out infinite;
          animation: flash 2s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .page_top .content .start_btn {
    width: 76.7775791467vw;
  }
}
.page_top .content .start_btn:hover {
  opacity: unset;
}
.page_top .content .start_btn img {
  display: block;
  width: 13.0339970717vw;
}
@media screen and (max-width: 768px) {
  .page_top .content .start_btn img {
    width: 45.67433624vw;
  }
}
@-webkit-keyframes flash {
  50% {
    opacity: 0.1;
  }
}
@keyframes flash {
  50% {
    opacity: 0.1;
  }
}

/* フォルダ一覧ページ
--------------------------------------------------------- */
main.page_list {
  display: grid;
  place-content: center;
}
@media screen and (max-width: 768px) {
  main.page_list {
    width: calc(100% - 85px);
    height: calc(100% - 100px);
    min-height: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10.6666666667vw 5.3333333333vw;
    margin: 50px 35px 50px 50px;
  }
  main.page_list::-webkit-scrollbar {
    display: none;
  }
  main.page_list {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* フレーム要素（枠線・閉じるボタン）*/
@media screen and (max-width: 768px) {
  .page_list_frame {
    background: var(--main_green);
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }
  .page_list_frame::after {
    position: absolute;
    top: 2.1794871795vw;
    right: 2.1794871795vw;
    bottom: 2.1794871795vw;
    left: 2.1794871795vw;
    border: 1.5px solid var(--sub_green);
    content: "";
    pointer-events: none;
    z-index: 5;
  }
  .page_list_frame::before {
    content: "";
    background: center/100% auto url("../images/project/icon_close.png") no-repeat;
    position: absolute;
    top: 5.7692307692vw;
    right: 7.6923076923vw;
    width: 5.641025641vw;
    height: 5.641025641vw;
    z-index: 10;
  }
}

/* インナーコンテナ */
@media screen and (max-width: 768px) {
  .page_list_inn {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--main_green);
  }
}
.page_list_inn .custom_scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .page_list_inn .custom_scrollbar {
    width: 5px;
    position: absolute;
    right: 35px;
    top: 50px;
    bottom: 50px;
    background: transparent;
    pointer-events: none;
    z-index: 10;
  }
}
.page_list_inn .custom_scrollbar_thumb {
  width: 100%;
  position: absolute;
  left: 0;
  border-radius: 2.5px;
  background: #83f351;
}

.page_list .link_list {
  width: 84.4070278184vw;
  display: grid;
  grid-template-columns: repeat(4, 7.027818448vw);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  row-gap: 4.9048316252vw;
}
@media screen and (min-width: 769px) {
  .page_list .link_list .link_item:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
  }
  .page_list .link_list .link_item:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
  }
  .page_list .link_list .link_item:nth-child(3) {
    grid-row: 1;
    grid-column: 3;
  }
  .page_list .link_list .link_item:nth-child(4) {
    grid-row: 1;
    grid-column: 4;
  }
  .page_list .link_list .link_item:nth-child(5) {
    grid-row: 2;
    grid-column: 4;
  }
  .page_list .link_list .link_item:nth-child(6) {
    grid-row: 3;
    grid-column: 4;
  }
  .page_list .link_list .link_item:nth-child(7) {
    grid-row: 4;
    grid-column: 4;
  }
  .page_list .link_list .link_item:nth-child(8) {
    grid-row: 4;
    grid-column: 3;
  }
  .page_list .link_list .link_item:nth-child(9) {
    grid-row: 4;
    grid-column: 2;
  }
  .page_list .link_list .link_item:nth-child(10) {
    grid-row: 4;
    grid-column: 1;
  }
  .page_list .link_list .link_item:nth-child(11) {
    grid-row: 3;
    grid-column: 1;
  }
  .page_list .link_list .link_item:nth-child(12) {
    grid-row: 2;
    grid-column: 1;
  }
  .page_list .link_list .link_item:nth-child(13) {
    grid-row: 2;
    grid-column: 2;
  }
  .page_list .link_list .link_item:nth-child(14) {
    grid-row: 2;
    grid-column: 3;
  }
  .page_list .link_list .link_item:nth-child(15) {
    grid-row: 3;
    grid-column: 3;
  }
  .page_list .link_list .link_item:nth-child(16) {
    grid-row: 3;
    grid-column: 2;
  }
}
@media screen and (max-width: 768px) {
  .page_list .link_list {
    width: 61.08138192vw;
    grid-template-columns: repeat(2, 23.72834568vw);
    row-gap: 5.3872vw;
    margin-inline: auto;
  }
}
.page_list .link_list .link_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page_list .link_list .link_item a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.page_list .link_list .link_item a .link_img_wrapper {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  margin-bottom: 1.0980966325vw;
}
@media screen and (max-width: 768px) {
  .page_list .link_list .link_item a .link_img_wrapper {
    margin-bottom: 3.3333333333vw;
  }
}
.page_list .link_list .link_item a .link_img_wrapper > img {
  display: inline-block;
}
.page_list .link_list .link_item a .link_img_wrapper > img:first-of-type {
  width: 6.9046778917vw;
}
@media screen and (max-width: 768px) {
  .page_list .link_list .link_item a .link_img_wrapper > img:first-of-type {
    width: 23.72834568vw;
  }
}
.page_list .link_list .link_item a > img {
  width: auto;
  max-width: none;
}
@media screen and (max-width: 768px) {
  .page_list .link_list .link_item a > img {
    text-align: left;
  }
}
.page_list .link_list .link_item a:hover {
  opacity: unset;
}
.page_list .link_list .link_item a:hover .link_img_wrapper img {
  opacity: 0;
}
.page_list .link_list .link_item a:hover .link_img_wrapper::before {
  content: "";
  display: block;
  position: absolute;
  width: 8.5152196193vw;
  height: 100%;
  top: 0;
  right: 0;
  background: center/cover url(../images/project/list_file_open.png) no-repeat;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .page_list .link_list .link_item a:hover .link_img_wrapper::before {
    width: 27.9349536267vw;
  }
}
@media screen and (min-width: 769px) {
  .page_list .link_list .link_item a > img {
    height: 0.7320644217vw;
  }
}
@media screen and (max-width: 768px) {
  .page_list .link_list .link_item a > img {
    height: 2.88vw;
  }
}

main.page_list .line_wrapper {
  position: absolute;
  top: 49%;
  left: 0.7320644217vw;
  translate: 0 -50%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  main.page_list .line_wrapper {
    display: none;
  }
}
main.page_list .line_wrapper .corner-line {
  width: 76.5739385066vw;
  aspect-ratio: 1046/342.542;
  display: block;
}
main.page_list .line_wrapper .corner-line .corner-path {
  stroke: var(--sub_green);
  stroke-width: 1.73px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  -webkit-animation: draw-line 1.8s ease-out 0.5s forwards;
          animation: draw-line 1.8s ease-out 0.5s forwards;
}
@-webkit-keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* ログイン画面
--------------------------------------------------------- */
/*=======================================
	keyboard
=======================================*/
.keyboard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}
@media screen and (max-width: 768px) {
  .keyboard {
    min-height: inherit;
  }
}
.keyboard .inner {
  max-width: 91.3616398243vw;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .keyboard .inner {
    max-width: 82.4358974359vw;
  }
}
.keyboard .pc,
.keyboard .sp {
  width: 100%;
}
.keyboard ul {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 1.6471449488vw;
  padding: 3.4407027818vw 0;
}
@media screen and (max-width: 768px) {
  .keyboard ul {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.1794871795vw;
    padding: 16.0256410256vw 0;
  }
}
.keyboard ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid var(--sub_green);
  /* 初期状態は非表示 */
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.keyboard ul li.is-visible {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .keyboard ul li {
    border: 2px solid var(--sub_green);
  }
}
.keyboard ul li img {
  width: 100%;
}
.keyboard ul li.red img {
  -webkit-filter: brightness(0) saturate(100%) invert(21%) sepia(99%) saturate(7459%) hue-rotate(359deg) brightness(120%) contrast(115%);
          filter: brightness(0) saturate(100%) invert(21%) sepia(99%) saturate(7459%) hue-rotate(359deg) brightness(120%) contrast(115%);
}

/*=======================================
	password/hint
=======================================*/
.password,
.hint {
  position: absolute;
  background: var(--main_green);
  padding: 1.0980966325vw 2.4890190337vw 1.317715959vw 1.8301610542vw;
  border: 2px solid var(--sub_green);
  border-top: 1.4641288433vw solid var(--sub_green);
  outline: 1.317715959vw solid var(--main_green);
}
@media screen and (max-width: 768px) {
  .password,
  .hint {
    padding: 2.1794871795vw 5.641025641vw 2.8205128205vw 4.1025641026vw;
    outline: 2.8205128205vw solid var(--main_green);
    border: 3px solid var(--sub_green);
    border-top: 2.5641025641vw solid var(--sub_green);
  }
}
.password::after,
.hint::after {
  content: "";
  background: url("../images/project/icon_close02.png") no-repeat var(--main_green);
  background-size: 100% auto;
  position: absolute;
  top: -2.0497803807vw;
  right: -1.9765739385vw;
  width: 1.6105417277vw;
  height: 1.6105417277vw;
}
@media screen and (max-width: 768px) {
  .password::after,
  .hint::after {
    width: 3.2635641026vw;
    height: 3.2635641026vw;
    top: -4.4871794872vw;
    right: -4.4871794872vw;
  }
}

.password {
  top: 23.2064421669vw;
  left: 26.4275256223vw;
  z-index: 1;
  width: 38.5065885798vw;
}
@media screen and (max-width: 768px) {
  .password {
    top: 100.2564102564vw;
    left: -2.5641025641vw;
    width: 80.9230769231vw;
  }
}
.password .hd_txt {
  text-align: center;
  margin-bottom: 1.0980966325vw;
}
.password .hd_txt img {
  display: none;
  margin: 0 auto 0.3660322108vw;
  width: auto;
  height: 1.9516983895vw;
}
@media screen and (max-width: 768px) {
  .password .hd_txt img {
    margin-bottom: 2.5905769231vw;
    height: 4.1015641026vw;
  }
}
.password .password_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 1.4641288433vw;
     -moz-column-gap: 1.4641288433vw;
          column-gap: 1.4641288433vw;
}
.password .password_box img {
  width: auto;
  height: 1.0037262079vw;
}
@media screen and (max-width: 768px) {
  .password .password_box img {
    height: 2.1093717949vw;
  }
}
.password .password_box .password_txt {
  color: var(--main_green);
  font-size: 1.4641288433vw;
  line-height: 2.6631844802vw;
  width: 100%;
  height: 2.6631844802vw;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: #fff;
  padding: 0 0.7320644217vw;
}
@media screen and (max-width: 768px) {
  .password .password_box .password_txt {
    font-size: 3.0769230769vw;
    line-height: 5.5967820513vw;
    height: 5.5967820513vw;
    padding: 0 1.2820512821vw;
  }
}
.password .password_box .password_txt:focus {
  outline: none;
}
.password .password_box .password_txt::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.password .password_box .password_txt::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.password .password_box .password_txt:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.password .password_box .password_txt::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.password .password_box .password_txt::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.password.lock {
  border: 2px solid var(--main_red);
  border-top: 1.4641288433vw solid var(--main_red);
  color: var(--main_red);
  opacity: 0;
  -webkit-transform: scale(0.7) translateY(30px);
      -ms-transform: scale(0.7) translateY(30px);
          transform: scale(0.7) translateY(30px);
  -webkit-animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.3s;
          animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.3s;
}
@media screen and (max-width: 768px) {
  .password.lock {
    border: 3px solid var(--main_red);
    border-top: 2.5641025641vw solid var(--main_red);
  }
}
.password.lock .hd_txt img:nth-child(1) {
  display: inline-block;
}
.password.shake {
  -webkit-animation: shake 0.3s ease-in-out;
          animation: shake 0.3s ease-in-out;
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
      -ms-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
@media screen and (max-width: 768px) {
  .password.shake {
    -webkit-animation-name: shake-sp;
            animation-name: shake-sp;
  }
}
.password.login .hd_txt img:nth-child(2) {
  display: inline-block;
}
.password.login .hd_txt {
  -webkit-animation: blink 0.5s ease-in-out infinite;
          animation: blink 0.5s ease-in-out infinite;
}
.password.login img {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(53%) saturate(2614%) hue-rotate(37deg) brightness(100%) contrast(92%);
          filter: brightness(0) saturate(100%) invert(100%) sepia(53%) saturate(2614%) hue-rotate(37deg) brightness(100%) contrast(92%);
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  50% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  75% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  50% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  75% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes shake-sp {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  50% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
  75% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes shake-sp {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  50% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
  75% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hint {
  right: 14.6412884334vw;
  top: 12.8477306003vw;
  padding: 1.756954612vw 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.317715959vw;
  text-align: center;
  width: 31.9180087848vw;
  -webkit-animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.8s;
          animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.8s;
  opacity: 0;
  -webkit-transform: scale(0.7) translateY(30px);
      -ms-transform: scale(0.7) translateY(30px);
          transform: scale(0.7) translateY(30px);
}
@media screen and (max-width: 768px) {
  .hint {
    top: 80.641025641vw;
    right: -2.5641025641vw;
    width: 67.0769230769vw;
    font-size: 3.0769230769vw;
    padding: 1.0256410256vw 0;
    letter-spacing: 0;
  }
}

@-webkit-keyframes popIn {
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}

@keyframes popIn {
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
/* 詳細ページ
--------------------------------------------------------- */
/*=======================================
	背景Canvas
=======================================*/
#matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  outline: 2px solid var(--sub_green);
  outline-offset: -0.7320644217vw;
}
@media screen and (max-width: 768px) {
  #matrix {
    outline-offset: -2.1794871795vw;
  }
}

/*=======================================
	page
=======================================*/
main:has(.page) {
  min-height: max(100vh, 54.9048316252vw);
  position: relative;
}
@media screen and (max-width: 1024px) {
  main:has(.page) {
    min-height: inherit;
  }
}

main:has(.page) ~ footer {
  position: static;
  z-index: auto;
}

.page {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .page {
    padding: 16.5119102564vw 0 8.7296666667vw;
  }
}
@media screen and (max-width: 1024px) {
  .page .nav_area {
    display: none;
  }
}
.page .nav_area ul {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 6.2225475842vw;
  right: 0.7320644217vw;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  /* gap: vw-pc(18.5187) vw-pc(27.182); */
  gap: 1.1713030747vw 0.5856515373vw;
}
.page .nav_area ul li {
  /* width: vw-pc(52.818); */
  width: 5.4904831625vw;
  /* height: vw-pc(43.0813); */
}
.page .nav_area ul li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.page .nav_area ul li a span:nth-child(1) {
  width: 1.9374084919vw;
  height: 0.5710102489vw;
  background: #fff;
}
.page .nav_area ul li a span:nth-child(2), .page .nav_area ul li a span:nth-child(3) {
  width: 3.8666178624vw;
  max-width: 105px;
  height: 2.5777452416vw;
  max-height: 70px;
  background: var(--sub_green);
}
.page .nav_area ul li a span:nth-child(3) {
  position: absolute;
  top: 0.7320644217vw;
  left: 0;
}
.page .nav_area ul li a img {
  width: auto;
  max-width: 95%;
  height: 0.6222547584vw;
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: 0.3660322108vw;
  display: block;
}
.page .nav_area ul li a.current span:nth-child(2) {
  background: var(--main_red);
}
.page .nav_area ul li a.current span:nth-child(3) {
  display: none;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .page .nav_area ul li a:hover {
    opacity: 1;
  }
  .page .nav_area ul li a:hover span:nth-child(2) {
    background: var(--main_red);
  }
  .page .nav_area ul li a:hover span:nth-child(3) {
    -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
            transform: skewX(20deg);
    -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
            transform-origin: left bottom;
    height: 2.196193265vw;
    top: 1.0248901903vw;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .page .nav_area ul li a:hover {
    opacity: 1;
  }
  .page .nav_area ul li a:hover span:nth-child(2) {
    background: var(--main_red);
  }
  .page .nav_area ul li a:hover span:nth-child(3) {
    -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
            transform: skewX(20deg);
    -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
            transform-origin: left bottom;
    height: 2.196193265vw;
    top: 1.0248901903vw;
  }
}
.page .img_box,
.page .txt_box {
  position: absolute;
  background: var(--main_green);
  border: 2px solid var(--sub_green);
  opacity: 0;
  -webkit-transform: scale(0.7) translateY(30px);
      -ms-transform: scale(0.7) translateY(30px);
          transform: scale(0.7) translateY(30px);
}
@media screen and (max-width: 1024px) {
  .page .img_box,
  .page .txt_box {
    position: relative;
    top: auto !important;
    left: auto !important;
    margin: 0 auto;
    width: 78.5897435897vw !important;
    max-width: 613px;
  }
}
.page .img_box::after,
.page .txt_box::after {
  content: "";
  background: url("../images/project/icon_close02.png") no-repeat var(--main_green);
  background-size: 100% auto;
  position: absolute;
  width: 1.6105417277vw;
  height: 1.6105417277vw;
}
@media screen and (max-width: 1024px) {
  .page .img_box::after,
  .page .txt_box::after {
    width: 2.8205128205vw;
    height: 2.8205128205vw;
  }
}
.page .img_box {
  width: 44.8755490483vw;
  border-top: 1.4641288433vw solid var(--sub_green);
  top: 4.9780380673vw;
  left: 26.5007320644vw;
  padding: 1.6837481698vw 1.9033674963vw;
  -webkit-animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@media screen and (max-width: 1024px) {
  .page .img_box {
    border-top: 2.5641025641vw solid var(--sub_green);
    padding: 2.6923076923vw 3.0769230769vw;
    margin-bottom: 9.6153846154vw;
  }
}
.page .img_box::after {
  top: -2.0497803807vw;
  right: -1.9765739385vw;
}
@media screen and (max-width: 1024px) {
  .page .img_box::after {
    top: -3.5897435897vw;
    right: -3.8461538462vw;
  }
}
.page .txt_box {
  font-family: "MS Pゴシック", "MS PGothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
  width: 21.1566617862vw;
  top: 11.859443631vw;
  left: 10.980966325vw;
  padding: 1.9765739385vw 0.7320644217vw 1.9765739385vw 2.3426061493vw;
  min-height: 36.3103953148vw;
  outline: 0.8052708638vw solid var(--main_green);
  -webkit-animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s;
          animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s;
}
@media screen and (max-width: 1024px) {
  .page .txt_box {
    max-height: 420px;
    overflow: hidden;
    outline: 2.8205128205vw solid var(--main_green);
    padding: 0 20px;
  }
}
.page .txt_box::after {
  top: 0.5124450952vw;
  right: 0.5124450952vw;
}
@media screen and (max-width: 1024px) {
  .page .txt_box::after {
    top: 1.7948717949vw;
    right: 1.7948717949vw;
  }
}
.page .txt_box .scroll_inner {
  max-height: 32.3572474378vw;
  overflow-y: auto;
  padding-right: 1.1713030747vw;
}
.page .txt_box .scroll_inner::-webkit-scrollbar {
  display: none;
}
.page .txt_box .scroll_inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .scroll_inner {
    max-height: 420px;
    overflow-y: auto;
    padding: 7.6923076923vw 2.0512820513vw 6.4102564103vw 0;
    margin-right: 0;
  }
}
.page .txt_box .custom_scrollbar {
  width: 5px;
  position: absolute;
  top: 3.953147877vw;
  right: 1.0248901903vw;
  bottom: 1.9765739385vw;
  background: transparent;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .custom_scrollbar {
    width: 5px;
    top: 7.6923076923vw;
    right: 10px;
    bottom: 6.4102564103vw;
  }
}
.page .txt_box .custom_scrollbar_thumb {
  width: 100%;
  position: absolute;
  left: 0;
  border-radius: 2.5px;
  background: #83f351;
}
.page .txt_box .lead_txt {
  height: 6.2225475842vw;
  margin-bottom: 1.8301610542vw;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .lead_txt {
    height: 23.0899487179vw;
    margin-bottom: 6.9230769231vw;
  }
}
.page .txt_box .lead_txt img {
  width: auto;
  height: 100%;
}
body.pj10 .page .txt_box .lead_txt {
  height: 8.296727672vw;
}
@media screen and (max-width: 1024px) {
  body.pj10 .page .txt_box .lead_txt {
    height: 30.7866025641vw;
  }
}
.page .txt_box .line {
  margin-bottom: 1.8301610542vw;
  line-height: 0;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .line {
    margin-bottom: 6.9230769231vw;
  }
}
.page .txt_box .line img {
  width: 100%;
}
.page .txt_box .txt {
  color: #c9caca;
  font-size: 0.8052708638vw;
  line-height: 1.75;
  text-align: justify;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .txt {
    font-size: 3.2051282051vw;
    line-height: 1.92;
  }
}
.page .txt_box .txt .txt_intro {
  color: var(--sub_green);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 1.4641288433vw;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .txt .txt_intro {
    margin-bottom: 3.8461538462vw;
  }
}
.page .txt_box .txt .txt_info {
  color: #000;
  letter-spacing: -0.05em;
  line-height: 1.5;
  width: 100%;
  display: block;
  background-color: var(--sub_green);
  padding: 0.1464128843vw 0.5856515373vw 0 0.3660322108vw;
  margin-bottom: 0.5124450952vw;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .txt .txt_info {
    padding: 0.5128205128vw 2.0512820513vw;
    margin-bottom: 3.8461538462vw;
  }
}
.page .txt_box .txt .txt_theme {
  color: var(--sub_green);
  font-size: 0.9516837482vw;
  letter-spacing: 0.03em;
  line-height: 1.6153846154;
  display: block;
  margin-bottom: 0.3660322108vw;
}
@media screen and (max-width: 1024px) {
  .page .txt_box .txt .txt_theme {
    font-size: 3.5897435897vw;
    margin-bottom: 3.8461538462vw;
  }
}
.page .txt_box .txt .txt_desc {
  letter-spacing: 0.05em;
  display: block;
}/*# sourceMappingURL=project.css.map */