@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100&display=swap');


@font-face {
	font-family: "cityscape";

	src:
      url("../../download/cityscape/CityScape.woff2") format("woff2"),
		url("../../download/cityscape/CityScape.woff") format("woff"),
      url("../../download/cityscape/CityScape.otf") format("opentype");
   font-weight: 100;
}

@font-face {
	font-family: "sprue";

	src:
      url("../../download/sprue/sprue.woff2") format("woff2"),
		url("../../download/sprue/sprue.woff") format("woff"),
      url("../../download/sprue/sprue.otf") format("opentype");
   font-weight: 100;
}


body {
   font-family: 'Helvetica Neue', 'Helvetica', 'Avenir', "M PLUS Rounded 1c", sans-serif;
   font-size: 1.6rem;
   font-weight: 100;
   line-height: 150%;
   background: #ffffff;
   color: #191919;
   cursor: default;
   letter-spacing: 0.04em;
}

.cityscape{
   font-family: 'cityscape';
}

.sprue{
   font-family: 'sprue';
}

.hokuo{
   font-family: 'hokuo';
}


/* オープニング */
.opening {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10000;
   overflow: hidden;
}

#opening-movie {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}


#content{
   width: 100%;
}



/* ヘッダー */
#header{
   position: sticky; /* スクロール時に固定 */
   top: 0; /* 上端に固定 */
   width: 100%; /* 画面幅100% */
   height: auto; /* コンテンツに基づいて高さを調整 */
   display: flex; /* フレックスボックスで配置 */
   justify-content: space-between; /* 左右に配置 */
   align-items: center; /* 垂直方向の中央揃え */
   padding:50px 5%; /* 上下左右に余白を追加 */
   box-sizing: border-box; /* パディングを含めた幅の計算 */
   z-index: 1000; /* 他の要素の上に表示 */
   overflow: hidden; /* 横スクロールを防止 */
}

#header .logo{
   display: flex; /* 子要素を中央揃え */
   align-items: center;
   white-space: nowrap; /* 文字が折り返されないように */
   flex-shrink: 0; /* ロゴが縮小されるのを防止 */
}

#header .logo img {
   height: 1em; /* メニューの文字サイズに基づいて高さを設定 */
    max-height: 100%; /* ヘッダーの高さを超えないようにする */
    width: auto; /* 横幅を自動調整してアスペクト比を保持 */
    object-fit: contain; /* 指定された範囲内に収まるように画像を調整 */
}

#header .menu{
   display: flex;
   align-items: center;
   gap: 30px; /* リスト間の間隔 */
   list-style: none; /* リストの点を消す */
   margin: 0; /* 外側の余白を削除 */
   padding: 0; /* 内側の余白を削除 */
   flex-wrap: wrap; /* 必要に応じて折り返し可能にする */
   justify-content: flex-end; /* 右端に揃える */
   max-width: calc(100% - 140px); /* ロゴ分の幅を引いて、はみ出さないようにする */
   overflow: hidden; /* 横スクロールを防止 */
   box-sizing: border-box;
}

#header .menu li{
   font-size: 1.3rem; /* 必要に応じて調整 */
   line-height: 1.5; /* 高さを調整 */
   white-space: nowrap; /* 文字が折り返されないように */
   text-align: right; /* 右揃え */
   flex-shrink: 0; /* 各メニューアイテムの縮小を防止 */
}


.kv{
   position: relative; /* 子要素の配置基準 */
   overflow: hidden; /* 子要素が範囲外に出ないように設定 */
   height: 100vh; /* 必要に応じて調整 */
}






/* Modal Overlay */
#modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   transition: opacity 0.3s ease;
   opacity: 0;
   visibility: hidden;
}

/* Show the modal */
#modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* モーダル表示中にスクロールを無効化 */
body.modal-open {
   overflow: hidden; /* スクロールを無効化 */
}


/* Modal Content */
/* モーダルコンテンツ */
#modal-content {
   position: relative;
   padding: 0; /* パディングを削除 */
   max-width: 80%; /* 幅を画面幅の80%に設定 */
   width: 80%;
   overflow-y: auto; /* 縦スクロール可能に設定 */
   display: flex; /* Arrange children horizontally */
   justify-content: space-between; /* Add space between panels */
   align-items: center; /* Align panels vertically */
   box-sizing: border-box; /* Include padding and borders in width/height */
   gap: 50px;
   max-height: 100vh; /* 高さを90%以内に収める */
   background: none; /* 背景色を削除 */
}


/* 閉じるボタン */
#close-modal {
   position: fixed; /* スクロールに影響されない固定位置 */
   top: 20px; /* 画面上部からの位置 */
   right: 20px; /* 画面右端からの位置 */
   background: none;
   border: none;
   font-size: 2rem;
   color: white; /* ボタンの文字色を白に設定 */
   cursor: pointer;
   z-index: 1100; /* モーダルよりも前面に表示 */
   text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7); /* 読みやすくするための影 */
   transition: transform 0.3s ease;
}

/* ホバー時のエフェクト */
#close-modal:hover {
   transform: scale(1.1); /* 拡大エフェクト */
}

#modal-content .page_panel {
   margin: 20px; /* 上下余白を削除し、左右のみ設定 */
   width: calc(33.333% - 20px); /* 横並びで自動折り返し */
   box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.35);
}


#modal-content .page_panel img {
   width: 100%;
   border-radius: 10px;
}




/* fvアニメーション */

.animated-text {
   display: flex;
   font-size: 50rem; /* 必要に応じて調整 */
   letter-spacing: 1px; /* 必要な字間を指定 */
   white-space: nowrap; /* 文字が折り返されないように */
   position: absolute; /* アニメーション位置を固定 */
   top: 50%; /* 親要素内で中央に配置 */
   left: 0; /* 初期位置を画面左に設定 */
   transform: translateY(-50%); /* 上下方向で中央揃え */ 
   will-change: transform;
   animation: scroll-horizontal 30s linear infinite; /* アニメーションの設定 */
}

.animated-text span {
   display: inline-block;
   transition: margin 0.1s linear; /* スムーズなアニメーション */
}



/* 画面右から左へアニメーション */
.scroll-horizontal {
   position: absolute; /* 親要素に基づく配置 */
   top: 50%; /* 親要素の中央に配置 */
   left: 60%; /* 初期位置を画面右端に設定 */
   transform: translateY(-50%) translateX(0); /* 初期状態 */
   will-change: transform; /* パフォーマンス向上 */
   transition: transform 0.1s linear; /* スムーズなアニメーション */
}

/*スクロールで字間が開くアニメーション*/
.scroll-spacing {
   display: flex;
   justify-content: center; /* 画像を中央揃え */
   align-items: center;
   width: 100%; /* 親要素の幅いっぱい */
   height: 150px; /* 高さを固定（必要に応じて調整可能） */
}

.scroll-spacing img {
   height: 100%; /* 親要素の高さに合わせる */
   width: auto; /* アスペクト比を維持 */
   flex-shrink: 0; /* 画像が縮小されないように設定 */
   margin: 0; /* 初期の間隔を0に設定 */
   object-fit: cover; /* 空きを防ぐ */
   transition: margin 0.3s ease; /* スムーズな変化を設定 */
}


.kv-overlay {
   position: relative;
   top: -200px; /* .kv に被る部分 */
   width: 100%;
   height: 200px; /* 黒いエリアの高さ */
   background-color: #191919;
   z-index: 10; /* .lead-container の上に表示 */
}



/* フォントの説明と見本 */

.lead-container {
   position: relative; /* 標準の配置 */
   width: 100%;
   margin-top: -200px; /* 黒いエリア分の高さを調整 */
   background-color: #ffffff; /* 全体の背景を白に設定 */
   z-index: 5; /* .kv の下になるように */
   padding: 20px 0px; /* 内側の余白 */
   box-sizing: border-box; /* パディングを含む幅の計算 */
}


.lead-container .about-box {
   width: 80%;
   margin: 200px auto;
}

.lead-container .about {
   width: 50%;
   margin: 0px 0px 0px auto;
   gap: 20px;
}

.lead-container .about h2 {
   font-size: 3rem;
   margin-bottom: 20px;
}

.lead-container .about p {
   font-size: 1.2rem;
   line-height: 2rem;
   letter-spacing: 0.2rem;
}

.font-sample {
   position: relative;
   overflow: hidden; /* コンテナ外の要素を隠す */
   height: 60vh; /* 必要な高さを調整 */
   display: flex;
   flex-direction: column; /* 縦に3列 */
   gap: 20px; /* 列間のスペース */
   margin-bottom: 150px;
}

.font-sample h3 {
   font-size: 6rem; /* フォントサイズを調整 */
   letter-spacing: 50px;
   line-height: 150%;
   white-space: nowrap; /* 折り返しを防ぐ */
   position: absolute;
   display: inline-block;
   margin: 0; /* 不要な余白を削除 */
}
.font-sample .row1 {
   top: 0;
   
}

.font-sample .row2 {
   top: 50%;
   transform: translateY(-50%);
}

.font-sample .row3 {
   top: 100%;
   transform: translateY(-100%);
}


/* テストタイピング　ベーススタイル */
/* テストタイピングセクション */
.test-type {
   font-family: Arial, sans-serif;
   background-color: #ffffff; /* 初期背景色 */
   color: #191919; /* 初期文字色 */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start; /* 上から順に配置 */
   min-height: 100vh; /* 画面全体を埋める最低限の高さ */
   padding: 100px 0px;
   box-sizing: border-box; /* パディングを含む幅・高さを計算 */
   overflow-y: auto; /* はみ出た場合にスクロール可能 */
   gap: 50px; /* 各要素間の間隔 */
}


/* 出力エリア */
.output-area {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}

#text-output {
   width: 100%;
   font-size: 100px;
   text-align: center;
   border: none;
   outline: none;
   background-color: transparent;
}

/* ベースライン塗り用のボックス */
.baseline-box {
   width: 100%;
   position: absolute;
   background-color: black;
   z-index: 1;
}


#text-output {
   width: 100%;
   padding: 120px 0px 0px 0px;
   font-size:  15rem;
   background-color: transparent;
   color: inherit;
   outline: none;
}


#text-output::placeholder {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 10rem;
   color: var(--theme-text-color); /* デフォルトは透明な黒 */
   opacity: 0.3;
}



/* キーボード全体のスタイル */
.keyboard {
   display: flex; /* 行ごとに配置 */
   flex-direction: column; /* 各行を縦に並べる */
   justify-content: center;
   align-items: center;
   gap: 15px; /* 行間のスペース */
   width: 80%; /* キーボードの幅を最大に設定 */
   max-width: 100vw; /* 画面幅を超えない */
   margin: 0 auto; /* 中央揃え */
}

.row {
   display: grid; /* グリッドでキーを横並び */
   grid-auto-flow: column; /* 自動的に横方向に配置 */
   grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* キーを横並びで均等配置 */
   gap: 10px; /* キー間の間隔 */
   justify-content: center; /* 行内のキーを中央揃え */
}


/* キーボードキーのスタイル */
.key {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 3rem; /* 文字サイズ */
   background-color: transparent; /* 背景色は透過 */
   color: var(--theme-text-color, #191919); /* テーマ文字色 */
   border: none;
   border-radius: 5px;
   padding: 12px 0px 8px 0px; /* 上下の余白 */
   width: calc((4 / 3) * var(--key-height)); /* 縦横比を3:4に設定 */
   height: var(--key-height); /* カスタムプロパティで高さを設定 */
   min-width: 40px; /* キーの最小幅を設定 */
   min-height: 40px; /* キーの最小高さを設定 */
   cursor: pointer; /* ポインター表示 */
   z-index: 1;
   transition: color 0.2s ease; /* スムーズな文字色変更 */
}

/* 疑似要素でオーバーレイを追加 */
.key::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* キーの幅と一致 */
   height: 100%; /* キーの高さと一致 */
   background-color: var(--key-overlay-color, rgba(255, 255, 255, 0.3)); /* デフォルトオーバーレイ色 */
   border-radius: 5px; /* 親要素と同じ角丸 */
   z-index: 0; /* 背景として配置 */
   transition: background-color 0.2s ease; /* スムーズなオーバーレイ色変更 */
}

/* ホバー時 */
.key:hover::before {
   background-color: var(--key-hover-color, rgba(255, 255, 255, 0.5)); /* ホバー時の色 */
}

/* アクティブ時 */
.key:active::before {
   background-color: var(--key-active-color, rgba(255, 255, 255, 0.7)); /* アクティブ時の色 */
}


/* シフトキーのスタイル */
.shift-key {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(255, 255, 255, 0.3); /* 背景色 */
   border: none;
   border-radius: 5px;
   padding: 5px; /* 内側の余白 */
   width: calc((4 / 3) * var(--key-height)); /* 縦横比3:4 */
   height: var(--key-height); /* 高さはカスタムプロパティ */
   cursor: pointer;
}

/* SVGアイコンのスタイル */
.shift-icon {
   width: 50%; /* アイコンの横幅（ボタンの50%） */
   height: auto; /* 縦横比を維持 */
   fill: var(--theme-text-color, #191919); /* テーマ文字色に応じた塗りつぶし */
   pointer-events: none; /* クリックイベントを無効化 */
}


.shift-key:active {
   background-color: rgba(0, 0, 0, 0.3); /* アクティブ時 */
}


/* テーマボタン */
.theme-buttons {
   display: flex;
   justify-content: center;
   gap: 20px;
}

.theme-button {
   width: 80px;
   height: 80px;
   border: none;
   border-radius: 10px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   background-size: 100% 100%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.theme-button.active {
   outline: 2px solid black;
}

.theme-icon {
   width: 75%;
   height: auto;
}



/*ダウンロードボタン*/
.download-section {
   text-align: center;
   margin: 80px 0 200px 0;
}

#download-button {
   width: 30%;
   padding: 30px 0px;
   font-size: 1.8rem;
   letter-spacing: 0.2rem;
   color: #fff;
   background-color: #818181;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

#download-button:hover {
   background-color: #3b1a87;
}

.sp-caption{
   display: none;
}



/* others */
.other_pages{
   width: 50%;
   margin: 100px auto; /* Center the section */
}

.other_pages h2{
   margin: 20px 0px 30px 0px;
   font-size: 1.2rem;

}

.panel-box {
   display: flex; /* Arrange children horizontally */
   justify-content: space-between; /* Add space between panels */
   align-items: center; /* Align panels vertically */
   box-sizing: border-box; /* Include padding and borders in width/height */
   gap: 50px;
}

.page_panel {
   flex: 1; /* Allow panels to share space equally */
   text-align: center; /* Center-align content inside panels */
   border-radius: 30px;
   box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.35);
}

.page_panel img {
   width: 100%; /* Fill panel width */
   height: auto; /* Maintain aspect ratio */
   display: block; /* Remove extra spaces around images */
   border-radius: 30px;
   overflow: hidden;
}



footer {
   position: relative;
   padding: 50px 0px;
   text-align: center;
   overflow: hidden; /* テキストがはみ出さないようにする */
}

.ad_text {
   animation: scroll-left 20s linear infinite; 
   white-space: nowrap;
   display: inline-block;
   font-size: 1.5rem; /* 必要に応じて調整 */
   position: relative;
}


.footer-line {
   width: 80%;
   height: 1px;
   background-color: #191919;
   margin: 10px auto;
}

.footer-info {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 0px;
   margin: 20px auto;
   width: 80%;
}

#copyright, #mail {
   height: auto;
   line-height: 2;
   font-size: 1.2rem;
}




/* パソコン版（画面幅に合わせる） */
@media (min-width: 769px) {
   #opening-movie {
      height: auto; /* 画面の高さに合わせる */
      width: 100%;  /* 比率を維持 */
      top: 50%;
      transform: translateY(-50%);
   }
}

/* タブレット版（画面の高さに合わせる） */
@media (max-width: 768px) {
   #opening-movie {
      height: 100%; /* 画面の高さに合わせる */
      width: auto;  /* 比率を維持 */
      left: 50%;
      transform: translateX(-50%);
   }

   .key {
      font-size: 2rem; /* 文字サイズ */
   }

   #download-button {
      font-size: 1.4rem;
   }

   .download-section{
      margin: 60px 0px 50px 0px;
   }

}

/* スマホ版（画面の高さに合わせる） */
@media (max-width: 480px) {
   #opening-movie {
      height: 100%; /* 画面の高さに合わせる */
      width: auto;  /* 比率を維持 */
      left: 50%;
      transform: translateX(-50%);
   }

   body {
      font-size: 1.8rem;
   }

   #header{
      align-items: center; /* 垂直方向の中央揃え */
      padding:30px 5% ; /* 上下左右に余白を追加 */
   }

   #header .menu{
      padding: 16px 0px 0px;
   }

   #header .logo{
   padding: 6px;
   }


   #close-modal {
      top: 50px; /* 画面上部からの位置 */
      right: 20px; /* 画面右端からの位置 */
      font-size: 5rem;
   }

   #modal-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2カラム */
      gap: 20px;
      width: 100%; /* モーダルの幅を100%に固定 */
      overflow-x: hidden;
   }

   #modal-content .page_panel {
      margin: 0px;
      width: 100%; /* 子要素が親を超えないよう制限 */
   }

   #modal-content .page_panel img {
   width: 100%; /* カラム幅に収まるように調整 */
   height: auto; /* アスペクト比を保持 */
   }

   .kv-overlay{
      top: -220px;
   }

   .lead-container .about-box {
      width: 80%;
      margin: 50px auto;
   }
   
   .lead-container .about {
      width: 100%;
   }
   
   .lead-container .about h2 {
      font-size: 3rem;
   }
   
   .lead-container .about p {
      font-size: 1.2rem;
      line-height: 1.6rem;
      letter-spacing: 0.2rem;
   }

   .font-sample {
      height: 40vh; /* 必要な高さを調整 */
      justify-content: center;
      margin-bottom: 10px;
   }

   

   .test-type{
      min-height: 30vh;
      margin-bottom: 20px;
   }

   .output-area {
      width: 90%;
      text-align: center;
   }
   
   #text-output {
      font-size:  6rem;
      padding: 0px;
   }
   
   
   #text-output::placeholder {
      font-size: 4rem;
   }

   .key {
      font-size: 1.7rem; /* 文字サイズ */
      width: calc((2 / 2.8) * var(--key-height)); /* 縦横比を4:3に変更 */
      height: var(--key-height); /* 高さはそのまま */
      min-width: 28px;
      min-height: 50px;
   }

   .row{
      grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); /* キーを横並びで均等配置 */
      gap: 3px;
   }

   .theme-button{
      width: 60px;
      height: 60px;
   }

   .download-section{
      margin: 20px 0px 80px 0px;
   }
   
   #download-button {
      display: none;
   }

   .sp-caption{
      display: block;
      width: 60%;
      font-size: 1rem;
      line-height: 1.2;
      font-weight: 300;
      margin: 80px auto 0px auto;
      text-align: left;
   }
   

   .other_pages {
      gap: 10px; /* カラム間のスペース */
      width: 90%; /* 画面幅を100%に */
      margin: 0 auto 50px; /* セクションを中央揃え */
   }

   .other_pages .panel-box{
      gap: 20px;
   }

   .page_panel {
      border-radius: 15px;
      margin: 0; /* パネル間のマージンをリセット */
   }

   .page_panel img {
      width: 100%; /* パネル幅に合わせる */
      height: auto; /* アスペクト比を維持 */
      display: block;
   }

   footer{
      padding: 0px 0px 20px 0px;
   }

   .ad_text{
      font-size: 1.2rem;
   }

   #copyright, #mail {
      font-size: 0.8rem;
   }

}



/* スクロールアニメーション */
@keyframes scroll-horizontal {
from {
      transform: translateX(0%);
}
to {
      transform: translateX(-100%);
}
}

@keyframes scroll-horizontal-reverse {
from {
      transform: translateX(0%);
}
to {
      transform: translateX(100%);
}
}

@keyframes scroll-left {
   from {
      transform: translateX(50%);
   }
   to {
      transform: translateX(-100%);
   }
}

@keyframes fade-in-out {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}