/* --------------------------------------------------------- */
/*  Stylesheet file for PC environment                       */
/*                                                           */
/*  Author: SHI @ BluePeridot                                */
/*  Last Updated: 2023.7.5(Wed)                              */
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */
/* メイン画面設定 */
/* メイン領域 */
body {
    background-color: lightyellow;

    min-width: 1500px;

    text-align: left;
    font-size: 20px;
}
/* トップ画像 */
div.topPC {
    width: 99vw;
    height: 500px;

    min-width: 1500px;

    background-color: black;
    background-image: url("../resource/pictures/top.jpg#xywh=0,0,1500,500");
    background-position: center;
    background-repeat: no-repeat;
    
    pointer-events: none;
}
/* 段落 */
p {
    text-align: left;
    font-size: 20px;

    padding-left: 80px;
}

/* --------------------------------------------------------- */
/* メニュー設定 */
/* メニュー領域全体 */
div.menu {
    width: 99vw;
    height: 200px;

    min-width: 1500px;

    background-color: black;

    text-align: center;
}
/* メニュー要素格納コンテナ */
div.menucontainer {
    display: table-cell;
    vertical-align: top;
}
/* メニューアイテム */
div.menuitem {
    display: inline-block;
    vertical-align: top;
}
/* メニューのアイコン共通 */
.menucommon {
    width: 150px;
    height: 150px;

    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;

    color:white;
}
/* メニューアイコン0 (Home) */
.menuicon0 {
    background-image: url("../resource/icons/menu_small0.png#xywh=0,0,150,150");
}
/* メニューアイコン1 (Musix) */
.menuicon1 {
    background-image: url("../resource/icons/menu_small1.png#xywh=0,0,150,150");
}
/* メニューアイコン2 (Illust) */
.menuicon2 {
    background-image: url("../resource/icons/menu_small2.png#xywh=0,0,150,150");
}
/* メニューアイコン3 (Games) */
.menuicon3 {
    background-image: url("../resource/icons/menu_small3.png#xywh=0,0,150,150");
}
/* メニューアイコン4 (DSP) */
.menuicon4 {
    background-image: url("../resource/icons/menu_small4.png#xywh=0,0,150,150");
}
/* メニューアイコン5 (About) */
.menuicon5 {
    background-image: url("../resource/icons/menu_small5.png#xywh=0,0,150,150");
}
/* メニュー内部 */
div.menudetail {
    transform: scaleY(0);
    transform-origin: center top;
    transition: ease-out .2s;

    min-width: 300px;
    min-height: 50px;

    padding-top: 40px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    
    background-color: black;
    text-align: left;

    position: relative;
    top: 150px;
}
/* メニューアイテムにホバーしたときのアクショントリガ */
div.menuitem:hover div.menudetail {
    transform: scaleY(1);
}
div.menuitem:hover {
    animation: menuiconpoyo .5s;
}
@keyframes menuiconpoyo {
	from, to { transform: none; }
	10% { transform: rotate(10deg); }
	40% { transform: rotate(-8deg); }
	60% { transform: rotate(4deg); }
	80% { transform: rotate(-2deg); }
}
/* メニューアイテム内の見出し */
div.menutitle {
    padding-bottom: 20px;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: aquamarine;
    font-size: 40px;
    text-decoration: double;
}
/* メニューの説明 */
span.menuexplain {
    text-align: left;
    color: aquamarine;
    font-size: 12px;
}
/* メニュー内の a タグ */
a.menu {
    color: white;
    text-decoration: none;
}
a.menu:hover {
    color: greenyellow;
}
/* --------------------------------------------------------- */
/* フッタ設定 */
/* 全体の相対位置の決定 */
.wrapper {
    left: -8px;
    top: -8px;

    min-height: 100vh;
    position: relative;
    padding-bottom: 720px;
    box-sizing: border-box;
}
/* フッタ領域 */
div.footer {
    width: 99vw;

    min-width: 1500px;

    padding-top: 60px;
    padding-bottom: 30px;
    margin-top: 50px;

    text-align: center;
    color: darkgreen;
    font-size: 12px;

    background-color: lightgreen;

    position: absolute;
    left: 0;
    bottom: 0;
}
/* フッタの横メニュー領域 */
div.footermenu {
    display: table-cell;
    vertical-align: top;
}
/* フッタの横メニューアイテム */
div.footermenuitem {
    display: inline-block;
    vertical-align: top;

    padding-left: 30px;
    padding-right: 30px;

    text-align: left;
    line-height: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
}
/* フッタの横メニューアイテム内の見出し */
div.footermenutitle {
    padding-bottom: 18px;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 28px;
    text-decoration: double;
}
/* フッタ最下部のチームロゴ */
div.footerlogoX {
    display: inline-block;
    vertical-align: top;

    width: 225px;
    height: 113px;

    margin-top: 40px;
    margin-bottom: 20px;

    background-image: url("../resource/pictures/logosmall_tp.png");
    background-size: 100%;
    background-repeat: no-repeat;

    pointer-events: none;
}
/* フッタ内の a タグ */
a.footer {
    color: darkgreen;
    text-decoration: none;
}
a.footer:hover {
    color: forestgreen;
    background-color: greenyellow;
}
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */
/*  EOF                                                      */
/* --------------------------------------------------------- */