@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Meiryo UI", "メイリオ", sans-serif;
    line-height: 1.7;
    color: #000;
    background: #fffffd;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.img-l {
    max-width: 100%;
/*    margin: 0 auto; */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
}
.img-m {
    max-width: 66%;
    margin: 20px auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
}
.img-m_ns {
    max-width: 66%;
    margin: 20px auto;
}
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}

/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* 見出し */
.page-title {
    font-size: 4rem;
/*    font-family: 'Philosopher', serif;
    text-transform: uppercase;
*/
    font-weight: normal;
}

/* パンくず */
.pankz {
    background: #555;
    color: #fff;
    font-size: 1rem;
    font-weight: normal;
}
.pankz a:link { color: #fff; }
.pankz a:visited { color: #fff; }
.pankz a:hover { color: #f66; }
.pankz a:active { color: #fff }

/* ボタン */
.button {
    font-size: 1.375rem;
    background: #0bd;
    color: #fff;
    border-radius: 5px;
    padding: 18px 32px;
}
.button:hover {
    background: #0090aa;
}
.button2 {
    font-size: 1.0rem;
    background: #0bd;
    color: #fff;
    border-radius: 5px;
    padding: 10px 24px;
}
.button2:hover {
    background: #0090aa;
}
.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 3%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
}  
.item {
    background: #ccc;
    padding: 12px 10px 0 10px;
    border-radius: 5%;
}  
.item h2 {
    font-size: 1.5rem;
    margin: 0;
}

.capt {
    padding: 5px 10px 10px 10px;
    line-height: 1;
    background: #fec;
    border-radius: 5px;

}  
.cent {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/* form */
form {
    width: 100%;
    max-width: 480px;
    margin: auto;
/*    border: 1px solid #000; */
}
form div {
    margin-bottom: 12px;
}
label {
    display: block;
}
input[type="text"] ,
input[type="email"] {
    width: 50%;
    padding: 5px;
    border: 1px #999 solid;
    border-radius: 5px;
}
textarea {
    width: 100%;
    height: 15rem;
    padding: 10px 5px;
    border: 1px #999 solid;
    border-radius: 5px;
}
input[type="button"] {
    cursor: pointer;
}

/* 記事部分 */
.detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
article {
    width: 78%;
}
.single-col {
    width: 100%;
}
.essay-info {
    position: relative;
    padding-top: 4px;
    margin-bottom: 40px;
}
.essay-title {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 2rem;
    line-height:1.2;
    font-weight: normal;
}
.essay-sect h3 {
    background-color: #009;
    color: #ccc;
    padding-left: 10px;
    border-radius: 5px;
}
.essay-sect table {
    border: 0px;
    width: 100%;
}
.essay-sect th {
    background-color: #ccf;
    width: 20%;
    padding: 5px;
}
.essay-sect td {
    background-color: #eeb;
    padding: 5px;
}

.essay-sect-3fig {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 3%;
    margin-bottom: 30px;
}  
.essay-sect-2fig {
    display: grid;
    gap: 20px;
/*grid-template-columns: 50% 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 3%;
    margin-bottom: 30px;
}  
.essay-sect-4fig {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 3%;
    margin-bottom: 30px;
}  
.essay-sect-mov_bk {
    background-color: #000;
    position: relative;
    padding: 40px 10px;
}
.essay-diary {
    position: relative;
    padding: 4px 20px;
    margin-top: 20px;
    background-color: #fec;
    font-size: 120%;
    color: #036;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.essay-diary::after {
    content: '';
    display: block;
    clear: both;
}
.essay-diary h3 {
    border-bottom: 2px #ea3 groove;
}
.essay-diary-nav {
    display: flex;
    justify-content: flex-end;
}

/* サイドバー */
aside {
    width: 18%;
}
.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 4px 8px;
    border-bottom: 2px #0bd solid;
    font-weight: normal;
}
.sub-menu {
/*    margin-top: -20px;  */
    margin-bottom: 50px;
    list-style: none;
}
.sub-menu li {
    margin-left: -1.5rem;
    border-bottom: 1px #ccc solid;
}
.sub-menu a {
    color: #000;
    padding: 10px 0 4px 10px;
    display: block;
}
.sub-menu a:hover {
    color: #0bd;
}
aside p {
    padding: 12px 10px 12px 10px;
}

.blink {
    animation: blinking 1s ease-in-out infinite alternate;
/*    font-weight: bold;
*/
    color: #f00;
}
@keyframes blinking {
    0% {opacity: 0;}
    100% {opacity: 1;}   
}

/* HEADER
------------------------------- */
.page-header {
    display: flex; 
    justify-content: space-between;

}
.main-nav {
    display: flex;
    justify-content: flex-end;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 10px;
    list-style: none;
}
.main-nav li {
    margin-left: 18px;
    margin-right: 18px;

}
.main-nav a {
    color: #0bd;
}
.main-nav a:hover {
    color: #f84;
}
/*smapho menu*/
.sm_on {
    display: none;
}

/* intense-images
------------------------------- */
.inten-img {
    cursor: url("../js/ui/plus_cursor.png") 25 25, pointer;
    display: block;
    
    width: 50vw;
    height: 50vw; 

    background-size: cover;
    background-position: 50% 50%;

    margin: 20px auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);

}


/* HOME
------------------------------- */
#home {
    background-image: url(../img/topimg.jpg);
    min-height: calc(100vh - 30px);
}
.home-content {
    text-align: center;
    margin-top: 10%;
}
.home-content p {
    font-size: 1.125rem;
    margin: 80px 0 200px;
    color: #f8c;
}
#home .page-title {
    text-transform: none;
    color: #f84;
}
#top-info {
    background: #000;
    color: #aaa;
}

#top-info a:link { color: #aaa; }
#top-info a:visited { color: #aaa; }
#top-info a:hover { color: #f66; }
#top-info a:active { color: #aaa }

#top-info ul {
    margin: 0;
}
#top-info li {
    margin-left: 3%;
}

/* MENU
------------------------------- */
#menu {
    background-image: url(../img/gall_bg.jpg);
    min-height: 10vh;
}    
#menu .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* ギャラリー
------------------------------- */
#gallery {
    min-height: 10vh;
}
.bg-dtm {
    background-image: url(../img/dtm_bg.jpg);
}
.bg-fig {
    background-image: url(../img/fig_bg.jpg);
}
.bg-photo {
    background-image: url(../img/photo_bg.jpg);
}
.bg-cg {
    background-image: url(../img/cg_bg.jpg);
}
.bg-mov {
    background-image: url(../img/mov_bg.jpg);
}
.bg-diy {
    background-image: url(../img/diy_bg.jpg);
}
#gallery .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* Ｇａｍｅ
------------------------------- */
#game {
    background-image: url(../img/game_bg.jpg);
        min-height: 10vh;
}
#game .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* アクティビティ
------------------------------- */
#activity {
    background-image: url(../img/act_bg.jpg);
        min-height: 10vh;
}
#activity .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* リバイバル
------------------------------- */
#revival {
    background-image: url(../img/reva_bg.jpg);
        min-height: 10vh;
}
#revival .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* レビュー
------------------------------- */
#review {
    background-image: url(../img/mono_bg.jpg);
        min-height: 10vh;
}
#review .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* 取扱説明書
------------------------------- */
#tori {
    background-image: url(../img/tori_bg.jpg);
        min-height: 10vh;
}
#tori .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* About
------------------------------- */
#about {
    background-image: url(../img/about_bg.jpg);
    min-height: 10vh;
}    
#about .page-title {
    text-transform: none;
    margin-left: 20px;
    color: #f84;
}

/* フッター
------------------------------- */
footer {
    background: #333;
    padding: 10px 0;
}
.copy {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #0ff;
    font-size: 0.875rem;
}
.copy img {
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
}


/* スマフォ対応
------------------------------- */
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;    
        margin: 0 auto;
    }

    .essay-title {
        font-size: 1.5rem;
    }

    /* HEADER */
    .page-header {
/*        flex-direction: column; */
        align-items: center;
    }

    /* smapho menu div */
    .sm_div {
        position: relative; 
        padding-right: 10px;
    }

    .sm_on {
        cursor: pointer;
        right: 0;
        color: #fcc;
        display: flex;
        justify-content: flex-end;
    }

    .sm_item {
        display: none;
        left: -50px;
        padding-top: 0.25rem; 
        padding-top: 0;
        position: absolute;
        top: 100%;
        background-color: #fff;
        z-index: 9999;
    }

    /* smapho menu hover */
    .sm_div:hover .sm_item {
        display: block;
    }


    .main-nav {
/*
        justify-content: center;
        flex-flow: wrap;
*/
        font-size: 1rem;
        font-weight: bold;
/*        margin-top: 10px;*/
        margin-top: 0; 
        padding-left: 0;
    }
    .main-nav li {
        margin: 0 20px;
    }
    .img-m {
        max-width: 100%;
    }
    .img-m_ns {
        max-width: 100%;
    }

    .detail {
        flex-direction: column; 
    }

    article {
        width: 100%;
    }

    aside {
        width: 100%; 
    }

    .sub-title {
        padding: 0 8px 0 8px;
    }

    .sub-menu {
        display: flex; 
        flex-flow: row wrap; 
        margin-bottom: 0;
    }
    .sub-menu li {
        margin-left: 0;
    }
    .sub-menu a {
        padding: 0 0 4px 10px;
    }

    .essay-diary {
        font-size: 100%;
    }

    /* form */
    form {
        max-width: 100%;
    }
    input[type="text"] ,
    input[type="email"] {
        width: 100%;
    }

}