@charset "utf-8";
/* リセット */
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "PixelMplus12";
  src: url(../Fonts.woff) format('woff');
}

ul,
ol {
  list-style: none;
}

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

img {
  max-width: 100%;
  display: block;
}
body {
  background-color: #ffffff;
  font-family: "游ゴシック体", "Yu Gothic", sans-serif;
  color: #333;

}
.main {
  margin: 0 auto;
  padding: 5px 20px;
}
header {
  max-width: 1080px;
  display: flex;
  align-items: center; /* 垂直方向に中央揃え */
  padding: 20px;
  margin: 0 auto;
  position: relative; /* 絶対位置の要素の基準となるように */
  height: 120px; /* ヘッダーの高さを指定（必要に応じて調整） */
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  flex-grow: 1; /* ロゴを中央に配置するためにスペースを使う */
  display: flex;
  justify-content: center; /* ロゴを中央に配置 */
}

.header-logo {
  font-family: vdl-linegpop-futoline, sans-serif;
  color: #000000;
  font-size: 3rem;
  letter-spacing: 0.15em;
}

.menu-container {
  position: absolute; /* 絶対位置で配置 */
  right: 20px; /* ヘッダー内で右に配置（必要に応じて調整） */
  top: 28px;
  display: flex; 
  align-items: center; 
}

.container {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.stick {
  width: 60px; /* スティックの幅を小さくする */
  height: 6px; /* スティックの高さを小さくする */
  border-radius: 3px; /* スティックの角を丸くする */
  margin-bottom: 10px; /* マージンを調整 */
  background-color: #2fe3b4;
  display: inline-block;
  z-index: 16;
}

.stick:last-child {
  margin-bottom: 0px;
}

.nav {
  display: none; /* 初期状態で非表示 */
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1c1c3c;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  align-items: center;
  justify-content: flex-start; /* 上部に配置 */
  padding-top: 200px; /* 必要に応じて上部の余白を調整 */
  z-index: 15;
}

.nav.active {
  display: flex;
  opacity: 0.95;
  visibility: visible;
}

.nav-link {
  color: #00ffff;
  font-weight: bold;
  font-size: 24px;
  padding: 30px 20px;
  text-decoration: none;
  position: relative;
  opacity: 0;
  transition: color 0.3s;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e6325f;
  transform: scaleX(0); /* 初期状態で幅を0に設定 */
  transform-origin: center; /* 中央からのスケール */
  transition: transform 0.4s ease;
}

.nav-link:hover::after {
  transform: scaleX(1); /* ホバー時にアンダーラインが広がる */
}

.nav-link:hover {
  background-color: transparent;
}


@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav.active .nav-link:nth-of-type(1) {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.30s;
}
.nav.active .nav-link:nth-of-type(2) {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.4s;
}
.nav.active .nav-link:nth-of-type(3) {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.5s;
}

/* アニメーションのスタイルを追加 */
.stick-1.open { animation: stick-1-open .6s ease-out forwards; }
.stick-2.open { animation: stick-2-open .6s linear forwards; }
.stick-3.open { animation: stick-3-open .6s linear forwards; }

@keyframes stick-1-open {
    0%   {width: 60px; height: 6px;} /* 初期状態 */
    40%  {background-color: #e6325f; width: 6px; height: 6px; transform: translate(30px, 0px);} /* 開く途中 */
    75%, 80%  {width: 6px; height: 6px; transform: translate(30px, -25px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {background-color: #e6325f; width: 6px; height: 6px; transform: translate(25px, 32px);} /* 最終状態 */
}

@keyframes stick-2-open {
    80%  {background-color: #2fe3b4; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #e6325f; transform: translate(6px, 0px) rotate(40deg);}
}

@keyframes stick-3-open {
    80%  {background-color: #2fe3b4; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #e6325f; transform: translate(6px, -15px) rotate(-40deg);}
}

.stick-1.close { 
    width: 6px; 
    height: 6px; 
    transform: translate(20px, 13px); 
    animation: stick-1-close .6s ease-out forwards; 
}
.stick-2.close { 
    transform: translate(0px, 0px) rotate(40deg); 
    animation: stick-2-close .6s ease-out forwards; 
}
.stick-3.close { 
    transform: translate(0px, -15px) rotate(-40deg); 
    animation: stick-3-close .6s ease-out forwards; 
}

@keyframes stick-1-close {
    0%, 70% {width: 0px; height: 0px;} /* 幅と高さを調整 */
    100%    {width: 60px; height: 6px; transform: translate(0, 0);} /* 最終状態 */
}

@keyframes stick-2-close {
    0%   {background-color: #e6325f; width: 60px; height: 6px;} /* 幅と高さを調整 */
    20%  {background-color: #e6325f; width: 6px; height: 6px; transform: translate(0, 0px) rotate(40deg);}
    40%  {background-color: #2fe3b4; width: 0px; height: 0px;} /* 中央スティック消去 */
    65%  {transform: translate(0, -50px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px; height: 0px;} /* 丸になった状態 */
    100% {width: 60px; height: 6px; transform: translate(0, 0);} /* 元のサイズに戻る */
}

@keyframes stick-3-close {
    0%   {background-color: #e6325f; width: 60px; height: 6px;} /* 幅と高さを調整 */
    20%  {background-color: #e6325f; width: 6px; height: 6px; transform: translate(0, -15px) rotate(-40deg);}
    40%  {background-color: #2fe3b4; width: 0px; height: 0px;} /* 丸に消える */
    65%  {transform: translate(0, -70px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 6px; height: 6px;} /* 最終状態手前 */
    100% {width: 60px; height: 6px; transform: translate(0, 0);} /* 元のサイズに戻る */
}

/* フッター */
.footer {
  color: #000;
  text-align: center;
  bottom: 0; /* 画面の下に配置 */
  left: 0;
  width: 100%; /* フッターの幅を画面全体に */
  z-index: 1000; /* 他の要素の上に表示されるようにする */
}

.footer-text2 {
  display: flex;
  align-items: center;   /* アイテムを縦方向で中央揃え */
  justify-content: center; /* アイテムを横方向で中央揃え */
  margin-top: 0px;
  margin-bottom: 10px;
  gap: 20px; /* リンク間のスペースを調整 */
}

.footer-rink{
  font-size: 1rem;
  text-decoration: none; /* リンクの下線を消す */
  color: inherit; /* リンクの色を親要素の色に合わせる */
}
.footer-rink:not(:last-child)::after {
  content: ' /'; /* 最後のリンクを除いてスラッシュを追加 */
  margin-left: 10px; /* スラッシュとリンクの間隔 */
}
.contact {
  border: 2px solid #fff;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.copyright {
  font-size: 0.8rem;
}

.copyright {
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.footer-text {
  font-size: 0.8rem;
}

.folders {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
}

.folder {
  display: flex;
  flex-direction: column;  /* アイコンとテキストを縦並びに */
  align-items: center;
  width: 120px;  /* 必要に応じて調整 */
  cursor: pointer;
  text-align: center;
}

.folder i {
  font-size: 64px;
  transition: all 0.3s ease-in-out; /* よりスムーズな遷移 */
  color: #e6325f;
}

.folder p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #e6325f;
}

/* ホバー時のアイコン切り替え */
.folder:hover i {
  content: "\f07c"; /* fa-folder-open の Unicode */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid */
  transition: all 0.3s ease-in-out; /* アイコン変更時もスムーズに */
}

/* ホバー時：solid の folder-open に切り替え */
.folder:hover i::before {
  content: "\f07c"; /* Unicode for fa-folder-open */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid */
}

.window {
  max-width: 1200px;
  /* 最大幅を設定 */
  padding: 5px;
  position: relative;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

/* ヘッダー部分のスタイル */
.window-header {
  display: flex;
  justify-content: space-between;
  background-color: #00ffcc;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  position: relative;
  /* before要素を相対的に配置 */
  z-index: 1;
  /* ヘッダーの文字が上に表示されるように */
  overflow: hidden;
  /* 疑似要素が親要素からはみ出さないようにする */
}

.window-title {
  font-size: 1.5rem;
  padding: 10px;
  padding-left: 50px;
  font-family: "PixelMplus12";
  font-weight: bold;
  letter-spacing: 2px;
  color: #ff0066;
  z-index: 2;
  /* テキストが背景よりも前に表示される */
  position: relative;
  /* z-indexを効かせるために相対配置 */
}

.window-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.control {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
}

.close {
  background-image: url('./images/common/cross-icon.png');
  /* 閉じるアイコンの画像 */
}
/* コンテンツ部分のスタイル */
.window-content {
  min-height: 500px;
  background-color: #1c1c3c;
  padding: 30px;
  text-align: left;
  border-radius: 0 0 10px 10px;
  border-left: 2px solid #2fe3b4;
  /* 左側の線 */
  border-right: 2px solid #2fe3b4;
  /* 右側の線 */
  border-bottom: 2px solid #2fe3b4;
  /* 下側の線 */
}

.window-content-1 {
  min-height: 800px;
  background-color: #1c1c3c;
  padding: 30px;

  border-radius: 0 0 10px 10px;
  border-left: 2px solid #2fe3b4;
  /* 左側の線 */
  border-right: 2px solid #2fe3b4;
  /* 右側の線 */
  border-bottom: 2px solid #2fe3b4;
  /* 下側の線 */
}

/* モーダル全体のスタイル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
/* モーダルの内容（実際に表示するコンテンツ） */
.modal-content {
  background-color: #ffffff00;
  color: #fff;
  width: 80%;
  max-width: 1400px;
  border-radius: 10px;
  overflow: hidden;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* モーダルのボディ部分 */
.modal-body {
  padding: 20px;
  color: #fff;
  background-color: #1c1c3c;
}

/* モーダルが開いている時の表示 */
.modal.show {
  display: flex;
}

/* サムネイルの基本スタイル */
.folder-thumbnail {
  width: 320px;
  height: 180px;
  object-fit: cover;
  filter: grayscale(100%); /* 初期状態で白黒 */
  transition: filter 0.3s ease-in-out; /* ホバー時にカラーに切り替わるアニメーション */
}

/* サムネイルにホバー時のカラー効果 */
.folder-thumbnail:hover {
  filter: grayscale(0%); /* ホバー時にカラーに戻る */
}

/* モーダル内サムネイルアイテムのレイアウト */
.modal-thumbnails {
  display: flex;
  justify-content: space-between; /* アイテムを均等に配置 */
  gap: 30px;
  margin-top: 20px;
  flex-wrap: wrap; /* 複数行に分けて表示 */
  max-width: 1400px; /* 最大幅を1400pxに設定 */
  margin: 0 auto; /* 中央揃え */
}

.thumbnail-item {
  text-align: center;
  width: 320px; /* 幅を320pxに固定 */
  flex: 0 0 320px; /* 幅を固定 */
  margin-left: 0; /* 最初は左マージンなし */
}

.modal-thumbnails:last-child {
  justify-content: flex-start; /* 最後の行を左詰め */
}


.thumbnail-item p {
  font-size: 1rem;
  margin-top: 10px;
  word-wrap: break-word; /* テキストが長い場合に折り返し */
  overflow-wrap: break-word; /* 長い単語を折り返し */
}

/* サムネイルのリンクがボックスに合わせてセンタリング */
.thumbnail-item a {
  display: block;
}


@media screen and (max-width: 650px) {
  .header {
    max-width: 1080px;
    height: 120px; /* ヘッダーの高さを指定（必要に応じて調整） */
    position: relative; /* 絶対位置の要素の基準となるように */
    padding: 20px;
    margin: 0 auto;
  }
  .header-inner {
    display: flex; /* 横並びにするためにフレックスボックスを使用 */
    text-align: center;

  }
  .menu-container {
    position: relative; 
    right: 0px; /* ヘッダー内で右に配置（必要に応じて調整） */
    top: 0px;
    margin-left: 20px;
  }
  .header-logo {
    font-size: 7vw; /* ビューポート幅に基づくフォントサイズ調整 */
  }

  .container {
    width: 30px; /* 幅を半分に */
    height: 30px; /* 高さを半分に */
  }

  .stick {
    width: 30px; /* スティックの幅を半分に */
    height: 3px; /* スティックの高さを半分に */
    margin-bottom: 5px; /* マージンを調整 */
  }

  @keyframes stick-1-open {
    0%   {width: 30px; height: 3px;} /* 初期状態 */
    40%  {background-color: #e6325f; width: 3px; height: 3px; transform: translate(15px, 0px);} /* 開く途中 */
    75%, 80%  {width: 3px; height: 3px; transform: translate(15px, -12.5px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {background-color: #e6325f; width: 3px; height: 3px; transform: translate(12.5px, 16px);} /* 最終状態 */
  }

  @keyframes stick-2-open {
    80%  {background-color: #2fe3b4; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #e6325f; transform: translate(3px, 0px) rotate(40deg);}
  }

  @keyframes stick-3-open {
    80%  {background-color: #2fe3b4; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #e6325f; transform: translate(3px, -7.5px) rotate(-40deg);}
  }

  @keyframes stick-1-close {
    0%, 70% {width: 0px; height: 0px;} /* 幅と高さを調整 */
    100%    {width: 30px; height: 3px; transform: translate(0, 0);} /* 最終状態 */
  }

  @keyframes stick-2-close {
    0%   {background-color: #e6325f; width: 30px; height: 3px;} /* 幅と高さを調整 */
    20%  {background-color: #e6325f; width: 3px; height: 3px; transform: translate(0, 0px) rotate(40deg);}
    40%  {background-color: #2fe3b4; width: 0px; height: 0px;} /* 中央スティック消去 */
    65%  {transform: translate(0, -25px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px; height: 0px;} /* 丸になった状態 */
    100% {width: 30px; height: 3px; transform: translate(0, 0);} /* 元のサイズに戻る */
  }

  @keyframes stick-3-close {
    0%   {background-color: #e6325f; width: 30px; height: 3px;} /* 幅と高さを調整 */
    20%  {background-color: #e6325f; width: 3px; height: 3px; transform: translate(0, -7.5px) rotate(-40deg);}
    40%  {background-color: #2fe3b4; width: 0px; height: 0px;} /* 丸に消える */
    65%  {transform: translate(0, -35px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 3px; height: 3px;} /* 最終状態手前 */
    100% {width: 30px; height: 3px; transform: translate(0, 0);} /* 元のサイズに戻る */
  }
  .main {
    margin: 0 auto;
    padding: 5px 5px;
  }
   /* フッター */
   .footer {
    padding: 10px;
  }
 .footer-注意事項{
font-size: 0.6rem;
}
  .footer-text2 {
    gap: 10px; /* リンク間のスペースを調整 */
  }

  .footer-rink {
    font-size: 0.6rem; /* リンクのフォントサイズを小さく */
  }

  .contact {
    padding: 3px 7px; /* パディングを小さく */
  }

  .copyright {
    font-size: 0.7rem; /* コピーライトのフォントサイズを小さく */
  }

  .folders {
    gap: 2rem; /* フォルダ間のスペースを調整 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* フォルダを中央に配置 */
    align-items: center;
  }

  .folder {
    width: 90px; /* フォルダの幅を小さく */
  }

  .folder i {
    font-size: 48px; /* アイコンのサイズを小さく */
  }

  .folder p {
    font-size: 0.8rem; /* テキストのフォントサイズを小さく */
  }

  /* ウィンドウ */
  .window {
    width: 100%;
    padding: 10px;

  }

  .window-header {
    padding: 8px; /* ヘッダーのパディングを小さく */
  }

  .window-title {
    font-size: 1.2rem; /* タイトルのフォントサイズを小さく */
    padding-left: 20px; /* 左パディングを小さく */
  }

  .control {
    width: 40px;
    height: 40px;
  }

  .window-content {
    padding: 20px; /* コンテンツ部分のパディングを小さく */
  }



  /* モーダル */
  .modal-content {
    width: 80%; /* モーダルの幅を小さく */
    max-width: 600px; /* 最大幅を設定 */
    height: 80%;
    max-height: 800px; /* モーダルの高さが500pxを超えるとスクロール */
    overflow-y: auto; /* 高さが500pxを超えた場合にスクロール */
  }

  .modal-body {
    padding: 10px; /* パディングを小さく */
    
  }

  /* サムネイル */
  .folder-thumbnail {
    width: 200px; /* サムネイルの幅を小さく */
    height: 120px; /* サムネイルの高さを小さく */
  }

  .modal-thumbnails {
    gap: 10px; /* サムネイル間のスペースを調整 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* サムネイルを中央揃え */
    margin: 0px auto;
  }

  .thumbnail-item {
    width: 150px; /* サムネイルアイテムの幅を小さく */
    width: 200px; /* 幅を320pxに固定 */
    flex: 0 0 200px; /* 幅を固定 */
  }

  .thumbnail-item p {
    font-size: 0.8rem; /* テキストのフォントサイズを小さく */
  }
  
}