@charset 'UTF-8';

/* ==================================================
   @font-face（Webフォント読み込み）
   ================================================== */
@font-face
{
    font-family: 'PKMN Regular';

    src: url('../font/pkmn_r.woff') format('woff');
}

@font-face
{
    font-family: 'PixelMplus 10';

    size-adjust: 55%;
    src: url('../font/PixelMplus10-Regular.woff') format('woff');
}

/* ==================================================
   :root（変数定義）
   ================================================== */
:root
{
    /* 左下コンテンツ系サイズ */
    --left-bottom-height: 300px;
    --left-bottom-width: 300px;
    --left-bottom-padding: 10px;
    /* 左コンテンツ系サイズ */
    --left-width: 200px;
    --left-padding: 10px;
    /* 右上コンテンツ系サイズ */
    --right-top-height: 170px;
    --right-top-width: 170px;
    --right-top-padding: 10px;
    /* 右コンテンツ系サイズ */
    --right-width: 100px;
    --right-padding: 10px;
    /* メインウィンドウ・コンテンツ系サイズ */
    --main-window-padding-height: 3svh;
    --main-window-padding-width: 3vw;
    --main-padding: 20px;
    /* メインコンテンツ系 */
    --main-window-title-height: 60px;
    /* SNSボタン系サイズ */
    --sns-button-size: 35px;
    --close-button-size: 35px;
    /* キャラクター系サイズ（ランターン） */
    --lanturn-size: 500px;
    --lanturn-small-magnification: .6;
    --lanturn-chat-height: 90px;
    --lanturn-chat-width: 350px;
    --lanturn-chat-small-height: 110px;
    --lanturn-chat-small-width: 200px;
    --lanturn-chat-padding: 3px;
    /* チャットコンテンツ系サイズ */
    --chat-contents-height: 102px;
    --chat-contents-width: 350px;
    --chat-contents-small-height: 120px;
    --chat-contents-small-width: 200px;
    --chat-contents-padding: 3px;
}

/* ==================================================
   Bodyタグ
   ================================================== */
body
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100px;
    font-style: normal;

    margin: 0;

    font-optical-sizing: auto;
}

/* ==================================================
   Bodyタグ以降（コンテンツ系）
   ================================================== */
/* 左・中央・右コンテンツ（幅700px未満） */
@media (max-width: 700px)
{
    /* 左コンテンツ */
    #left_contents
    {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;

        display: none;

        width: 0;
        height: 100svh;
        padding: 0;

        background: linear-gradient(rgb(0, 50, 110), black);
    }

    /* 中央コンテンツ */
    #center_contents
    {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;

        width: 100vw;
        height: 100svh;

        background-color: black;
        box-shadow: 0 0 10px 0 rgba(110, 180, 220);
    }

    /* 右コンテンツ */
    #right_contents
    {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 100vw;

        display: none;

        width: 0;
        height: 100svh;
        padding: 0;

        background: linear-gradient(rgb(0, 50, 110), black);
    }
}

/* 左・中央・右コンテンツ（幅700px以上） */
@media (min-width: 700px)
{
    /* 左コンテンツ */
    #left_contents
    {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;

        width: var(--left-width);
        height: 100svh;
        padding: var(--left-padding);

        background: linear-gradient(rgb(0, 50, 110), black);
    }

    /* 中央コンテンツ */
    #center_contents
    {
        position: fixed;
        z-index: 2;
        top: 0;
        left: var(--left-width);

        width: calc(100vw - (var(--left-width) + var(--right-width)));
        height: 100svh;

        background-color: black;
        box-shadow: 0 0 10px 0 rgba(110, 180, 220);
    }

    /* 右コンテンツ */
    #right_contents
    {
        position: fixed;
        z-index: 1;
        top: 0;
        left: calc(100vw - var(--right-width));

        width: var(--right-width);
        height: 100svh;
        padding: var(--right-padding);

        background: linear-gradient(rgb(0, 50, 110), black);
    }
}

/* 左下コンテンツ */
#left_bottom_contents
{
    position: fixed;
    z-index: 3;
    top: calc(100svh - var(--left-bottom-height));
    left: 0;

    width: var(--left-bottom-width);
    height: var(--left-bottom-height);
    padding: var(--left-bottom-padding);

    background-image: url('../img/left_bottom_image.png');
    background-size: var(--left-bottom-width) var(--left-bottom-height);

    filter: drop-shadow(0px 0px 5px rgb(110, 180, 220));
}

/* 左下コンテンツ：メニュー */
#site_menu
{
    width: calc(var(--left-bottom-width) - (var(--left-bottom-padding) * 2));
    height: calc(var(--left-bottom-height) - (var(--left-bottom-padding) * 2));
    margin-top: 20px;

    place-items: left;
}

/* 左下コンテンツ：メニューテキスト */
#menu_text
{
    font-size: 22px;

    margin-bottom: 5px;
}

/* 左コンテンツ：アニメーション */
#left_anime
{
    user-select: none;
}

/* 左コンテンツ：更新履歴 */
#change_log
{
    font-size: 10px;

    z-index: 1;

    overflow: scroll;

    width: calc(var(--left-width) - (var(--left-padding) * 2));
    height: calc(100svh - var(--left-bottom-height) - var(--left-padding));

    color: white;
}

/* 左コンテンツ：更新履歴（スクロールバー） */
#change_log::-webkit-scrollbar
{
    display: none;
}

/* メインコンテンツ：iframeタグ */
#center_contents_iframe
{
    width: 100%;
    height: 100%;
}

/* 右上コンテンツ */
#right_top_contents
{
    position: fixed;
    z-index: 3;
    top: 0;
    left: calc(100vw - var(--right-top-width));

    width: var(--right-top-width);
    height: var(--right-top-height);
    padding: var(--right-top-padding);

    background-image: url('../img/right_top_image.png');
    background-size: var(--right-top-width) var(--right-top-height);

    filter: drop-shadow(0px 0px 5px rgba(110, 180, 220));
}

/* 右上コンテンツ：メニュー(SNS) */
#sns_menu
{
    display: grid;

    width: calc(var(--right-top-width) - (var(--right-top-padding) * 2));
    height: calc(var(--right-top-height) - (var(--right-top-padding) * 2));

    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    place-items: center;
}

/* 右コンテンツ：アニメーション */
#right_anime
{
    user-select: none;
}

/* メインウィンドウ（メインコンテンツ全体） */
#main_window
{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100svh;
    padding: var(--main-window-padding-height) var(--main-window-padding-width) var(--main-window-padding-height) var(--main-window-padding-width);

    background-color: rgba(0, 0, 0, .6);
}

/* メインコンテンツ */
#main_contents
{
    position: absolute;
    z-index: 5;

    width: calc(100vw - (var(--main-window-padding-width) * 2));
    height: calc(100svh - (var(--main-window-padding-height) * 2));
    padding: var(--main-padding);

    color: white;
    background-color: rgba(0, 0, 0, .6);
}

/* メインコンテンツ：タイトル */
#main_contents_title
{
    font-size: 32px;

    position: absolute;

    width: calc(100% - var(--close-button-size) - (var(--main-padding) * 2));
    height: var(--main-window-title-height);
}

/* メインコンテンツ：クローズボタン */
#main_contents_close
{
    position: absolute;
    right: var(--main-padding);

    width: var(--close-button-size);
    height: var(--close-button-size);
}

/* メインコンテンツ：iframeタグ */
#main_contents_iframe
{
    position: absolute;
    top: calc(var(--main-window-title-height) + var(--main-padding));

    width: calc(100% - (var(--main-padding) * 2));
    height: calc(100% - var(--main-window-title-height) - (var(--main-padding) * 2));
}

/* メインコンテンツ：iframeタグ（スクロールバー） */
#main_contents_iframe::-webkit-scrollbar
{
    display: none;
}

/* キャラクターコンテンツ（幅900px未満） */
@media (max-width: 900px)
{
    /* チャットコンテンツゾーン */
    #chat_contents
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - ((var(--lanturn-size) * var(--lanturn-small-magnification)) + var(--lanturn-chat-small-height) + (var(--chat-contents-small-height) + 10px)) + (80px * (1 - var(--lanturn-small-magnification))));
        left: calc(100vw - var(--lanturn-chat-small-width) - 10px);

        width: var(--chat-contents-small-width);
        height: var(--chat-contents-small-height);
        padding: var(--chat-contents-padding);

        border: 5px double #000;
        border-radius: 10px;
        background: linear-gradient(white, rgb(200, 240, 255));
    }

    /* キャラクターセリフゾーン */
    #character_chat
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - ((var(--lanturn-size) * var(--lanturn-small-magnification)) + var(--lanturn-chat-small-height)) + (80px * (1 - var(--lanturn-small-magnification))));
        left: calc(100vw - var(--lanturn-chat-small-width) - 10px);

        overflow: scroll;

        width: var(--lanturn-chat-small-width);
        height: var(--lanturn-chat-small-height);
        padding: var(--lanturn-chat-padding);

        border: 5px double #000;
        border-radius: 10px;
        background: linear-gradient(white, rgb(200, 240, 255));
    }

    /* キャラクターセリフ文字 */
    .chat_char,
    .chat_you
    {
        font-family: 'PKMN Regular', 'PixelMplus 10', 'Noto Sans JP', sans-serif;
        font-size: 18px;

        color: black;
    }

    /* キャラクターコンテンツ：ランターン */
    #character_contents
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - (var(--lanturn-size) * var(--lanturn-small-magnification)) + (80px * (1 - var(--lanturn-small-magnification))));
        left: calc(100vw - (var(--lanturn-size) * var(--lanturn-small-magnification)));

        width: calc(var(--lanturn-size) * var(--lanturn-small-magnification));
        height: calc(var(--lanturn-size) * var(--lanturn-small-magnification));

        background-image: url('../img/lanturn.png');
        background-size: calc(var(--lanturn-size) * var(--lanturn-small-magnification)) calc(var(--lanturn-size) * var(--lanturn-small-magnification));
    }
}

/* キャラクターコンテンツ（幅900px以上） */
@media (min-width: 900px)
{
    /* チャットコンテンツゾーン */
    #chat_contents
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - (var(--lanturn-size) + var(--lanturn-chat-height) + (var(--chat-contents-height) + 10px)) + (80px * (1 - .0)));
        left: calc(100vw - var(--chat-contents-width) - 10px);

        width: var(--chat-contents-width);
        height: var(--chat-contents-height);
        padding: var(--chat-contents-padding);

        border: 5px double #000;
        border-radius: 10px;
        background: linear-gradient(white, rgb(200, 240, 255));
    }

    /* キャラクターセリフゾーン */
    #character_chat
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - (var(--lanturn-size) + var(--lanturn-chat-height)) + (80px * (1 - .0)));
        left: calc(100vw - var(--lanturn-chat-width) - 10px);

        overflow: scroll;

        width: var(--lanturn-chat-width);
        height: var(--lanturn-chat-height);
        padding: var(--lanturn-chat-padding);

        border: 5px double #000;
        border-radius: 10px;
        background: linear-gradient(white, rgb(200, 240, 255));
    }

    /* キャラクターセリフ文字 */
    .chat_char,
    .chat_you
    {
        font-family: 'PKMN Regular', 'PixelMplus 10', 'Noto Sans JP', sans-serif;
        font-size: 18px;

        color: black;
    }

    /* キャラクターコンテンツ：ランターン */
    #character_contents
    {
        position: fixed;
        z-index: 4;
        top: calc(100svh - var(--lanturn-size) + (80px * (1 - .0)));
        left: calc(100vw - var(--lanturn-size));

        width: var(--lanturn-size);
        height: var(--lanturn-size);

        background-image: url('../img/lanturn.png');
        background-size: var(--lanturn-size) var(--lanturn-size);
    }
}

/* キャラクターセリフ（スクロールバー） */
#character_chat::-webkit-scrollbar
{
    display: none;
}

/* キャラクターセリフ（アニメーション） */
.character_speak
{
    animation: lanturn_speak .3s;
    animation-timing-function: linear;
    animation-delay: .7s;
    animation-iteration-count: 7;
}

@keyframes lanturn_speak
{
    0%
    {
        background-image: url('../img/lanturn.png');
    }

    15%
    {
        background-image: url('../img/lanturn2.png');
    }

    40%
    {
        background-image: url('../img/lanturn3.png');
    }

    65%
    {
        background-image: url('../img/lanturn2.png');
    }

    80%
    {
        background-image: url('../img/lanturn.png');
    }
}

/* チャットコンテンツ：テキストボックス */
#chat_you_text
{
    font-family: 'PixelMplus 10', 'Noto Sans JP', sans-serif;
    font-size: 16px;

    width: 100%;
    height: 28px;
    margin: 9px 0 9px 0;
    padding: 3px;

    resize: none;

    border: 1px double #666;
    border-radius: 3px;
}

/* チャットコンテンツ：送信ボタン */
#chat_you_send_button
{
    font-family: 'PixelMplus 10', 'Noto Sans JP', sans-serif;
    font-size: 14px;

    float: right;

    height: 16px;
    padding: 3px 9px 3px 9px;

    border: 1px double #666;
    border-radius: 3px;
}

/* ==================================================
   Bodyタグ以降（ボタン系）
   ================================================== */
/* サイトボタン */
.site_button
{
    color: white;
    background: rgba(0, 0, 0, 0);
}

/* SNSボタン */
.sns_button
{
    width: var(--sns-button-size);
    height: var(--sns-button-size);
    padding: 10px;

    border: 0;
    border-radius: 50%;
    background: linear-gradient(rgb(0, 90, 150), rgb(0, 50, 110));

    filter: drop-shadow(0px 0px 2px rgb(110, 180, 220));
}

/* クローズボタン */
.close_button
{
    width: var(--close-button-size);
    height: var(--close-button-size);

    background: rgba(0, 0, 0, 0);
}

/* SVGアイコン（SNSボタン等） */
.icon_svg
{
    pointer-events: none;

    filter: invert(1);
}

/* SVGアイコン：小サイズ（SNSボタン等） */
.icon_small_svg
{
    width: 16px;
    height: 16px;

    pointer-events: none;

    filter: invert(1);
}

/* Qiitaアイコン（SNSボタン等） */
.icon_qiita
{
    width: 16px;
    height: 16px;

    pointer-events: none;
}

/* ==================================================
   Bodyタグ以降（その他）
   ================================================== */
.bubble
{
    position: fixed;
    top: 100svh;
    left: 0;

    width: 50px;
    height: 50px;

    opacity: .5;

    filter: drop-shadow(0px 0px 3px #fff);
}