/* ロード時のオーバーレイ */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* 薄い白 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

#intro-overlay:not(.hidden) {
    display: flex;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

/* フェードアウト時のスタイル */
#intro-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* オーバーレイの中のコンテンツ（テキスト左揃え + 中央配置） */
.intro-content {
    width: 30%;
    font-size: 0.9rem;
    font-weight: 100;
    color: #191919;
    text-align: left;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center; /* ボタンを中央配置 */
    gap: 30px; /* テキストとボタンの間隔 */
}

/* 上品なスタイルの「始める」ボタン */
#start-button {
    width: 160px;
    padding: 12px 0;
    font-size: 0.9rem;
    color: #191919;
    border: 1px solid #666; /* 細いボーダーで上品に */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: 500;
    text-align: center;
}

/* ホバー時のエフェクト */
#start-button:hover {
    border-color: #555;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* 上品な影 */
}




/* .first-view-container 内だけに適用 */
.first-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden; /* スクロールを禁止 */
    position: relative;
}

/* スクロールアイコン */
.first-view-container #scroll-icon {
    position: absolute;
    bottom: 60px;
    font-size: 1.5rem;
    color: #666;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}


/* 入力エリアのスタイル */
.first-view-container .output-area {
    text-align: center;
    width: 100%;
}

.first-view-container #text-output {
    font-size: 2rem;
    text-align: center;
}

.first-view-container #text-output::placeholder {
    font-weight: 300;
    font-size: 1.5rem;
}

/* アイコンが表示されたとき */
.first-view-container #scroll-icon.visible {
    opacity: 1;
}


/* キーボードのスタイル（他のページに影響なし） */
.first-view-container .keyboard {
    margin-top: 20px;
}

.first-view .row .key{
    background-color: #ddd;
    font-size: 2rem;
}

/* エンターボタンのスタイル */
.first-view .row .enter-key {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #6d6d6d;
    color: white;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    height: var(--key-height); /* カスタムプロパティで高さを設定 */
    min-width: 40px; /* キーの最小幅を設定 */
    min-height: 40px; /* キーの最小高さを設定 */
    cursor: pointer;
}

/* ホバー時 */
.first-view-container .enter-key:hover {
    background-color: #555;
}

/* キーボード全体のスタイル */
.keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
}

/* キーの行 */
.row {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 5px; /* キー間の間隔 */
}

/* すべてのキーを均等に配置 */
.key {
    flex: 1;
    max-width: 50px; /* 最大幅を設定 */
    min-width: 40px; /* 最小幅を設定 */
    height: 50px;
    font-size: 1.8rem;
    text-align: center;
    background-color: #ddd;
    color: #000;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* シフトキーやエンターキーの特別サイズ */
.shift-key, .enter-key {
    flex: 1.5; /* 通常のキーより少し大きく */
    max-width: 70px;
    background-color: #bbb;
    font-weight: bold;
}

/* スクロールアイコン全体のレイアウト */
#scroll-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 矢印とテキストの間隔 */
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
}

/* 矢印のスタイル */
.arrows {
    width: 30px;
    height: 30px;
    position: relative; /* 修正: absolute を削除 */
}

/* 矢印のアニメーション */
.arrows path {
    stroke: #2994D1;
    fill: transparent;
    stroke-width: 2px;
    animation: arrow 2s infinite;
}



/* 初期状態では非表示 */
.front-content > .font-graphic,
.front-content > .about-box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* visible クラスが付与されたら表示 */
.front-content > .font-graphic.visible,
.front-content > .about-box.visible {
    opacity: 1;
    transform: translateY(0);
}


.front-content{
    margin: 100px auto;

}

/* フォントグラフィックエリア（共通設定） */
.font-graphic {
    position: relative;
    width: 100vw; /* 画面幅いっぱい */
    height: 400px; /* 固定高さ */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* テキストをボトムに配置 */
    overflow: hidden;
}

/* Cityscapeフォントの設定 */
.font-graphic.cityscape {
    background: linear-gradient(to bottom, 
    rgba(0,95,189,1) 0%, 
    rgba(0,114,203,1) 17%, 
    rgba(97,178,243,1) 45%, 
    rgba(211,232,249,1) 75%);
}

.cityscape-text {
    font-family: 'cityscape', sans-serif;
    font-size: 20rem; /* 高さの1/3 */
    color: #191919;
    position: relative;
    bottom: 100px; /* ベースラインをボトムから30px */
    z-index: 2;
}

/* ボトムの塗りつぶし（共通） */
.font-graphic::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px; /* ベースラインからボトムまでの部分 */
    background-color: #191919;
    z-index: 1;
}

/* もう一つのオリジナルフォント設定 */


/* Sprue フォントグラフィックエリア */
.font-graphic.sprue {
    position: relative;
    width: 80vw; /* 画面幅の80% */
    height: auto; /* 固定高さ */
    margin: 0 auto;
    display: flex;
    justify-content: center; 
    align-items: center;
    overflow: hidden;
    background: none; /* 背景なし */
}

/* Sprue フォントのデモテキスト */
.sprue-text {
    font-family: 'sprue', sans-serif;
    font-size: calc(80vw / 4); /* 画面幅80%を3文字に均等割り */
    color: #191919;
    text-align: left; /* 左揃え */
    letter-spacing: 0; /* 文字間隔を 0 */
    line-height: 0.85; /* 行間を調整 */
    white-space: pre-wrap; /* 改行を許可 */
    word-break: break-word; /* 自然な改行 */
    display: block; /* 1行ごとに独立 */
}



/* Sprueフォントのベースライン塗りつぶしを削除 */
.font-graphic.sprue::after {
    display: none; /* ベースラインの塗りを無効化 */
}


/* about-box のデザイン */
.about-box {
    width: 35%;
    margin: 180px auto;
    text-align: left;
    line-height: 1.6;
}

/* タイトルのデザイン */
.about-title {
    font-size: 1.5rem;
    color: #191919;
}

/* サブタイトルのデザイン */
.about-subtitle {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #333;
}

/* キャプションのデザイン */
.about-caption p{
    font-size: 0.9rem;
    color: #333;
    list-style: none;
    padding: 0;
}

/* キャプションの個別スタイル */
.about-caption li {
    margin-bottom: 10px;
}

.panel_item h3{
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0px 0px 2px 0px;
}




@keyframes arrow {
    0% { opacity: 0; }
    40% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

.arrows path.a1 { animation-delay: -1s; }
.arrows path.a2 { animation-delay: -0.5s; }
.arrows path.a3 { animation-delay: 0s; }

.arrows path {
    stroke: #2994D1;
    fill: transparent;
    stroke-width: 1px;  
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite; 
}





/* レスポンシブ対応 */
@media (max-width: 768px) {


    .key {
        max-width: 40px;
        height: 45px;
        font-size: 1.5rem;
    }

    .first-view .row .enter-key{
        font-size: 0.8rem;
    }

    .shift-key{
        max-width: 60px;
    }

    .shift-icon{
        width: 80%;
    }

    .arrows {
        width: 40px;
        height: 50px;
    }
    #scroll-icon {
        gap: 15px;
    }
}




@media (max-width: 480px) {
    .first-view-container{
        padding: 0px 0px 150px;
    }


    .first-view-container .output-area{
        width: 80%;
    }

    .first-view-container #text-output::placeholder {
        font-size: 0.8rem;
    }


    .intro-content {
        width: 45%;
        gap: 50px;
        letter-spacing: 0.1rem;

    }

    /* 上品なスタイルの「始める」ボタン */
    #start-button {
        width: 200px;
    }
    


    .first-view .row .key {
        max-width: 35px;
        min-width: 25px;
        height: 30px;
        font-size: 1.2rem;
    }
    .shift-key, .enter-key {
        max-width: 50px;
    }

    .arrows {
        width: 50px;
        height: 40px;
    }
    .first-view-container #scroll-icon{
        font-size: 1rem;
        line-height: 120%;
        gap: 10px;
        bottom: 130px;
    }

    .font-graphic{
        height: 200px;
    }

    .cityscape-text{
        font-size: 8rem;
        bottom: 58px;
    }

    .font-graphic::after{
        height: 39px;
    }

    .about-box{
        width: 60%;
        margin: 140px auto;
    }

    .sprue-text {
        font-size: calc(80vw / 2);
    }

    .other_pages{
        width: 80%;
    }

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

}



@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}