@charset "UTF-8";

@media (max-width: 650px) {
    .wrapper {
        margin: 0;
        padding: 0;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .main {
        width: 100%;
    }

    .noscroll {
        overflow: hidden;
    }

    .update .inner {
        font-size: 12px;
    }

    .update .inner dt {
        width: 80px;
    }

    /* レイアウト */
    h1 {
        padding: 0;
        margin-bottom: 1rem;
        text-align: center;
        font-size: 2rem;
    }

    .etc-btn {
        display: block;
        text-align: center;
        background: rgba(66, 85, 133, .75);
        color: #FFF;
        padding: 5px 10px;
    }
    
    .etc {
        display: none;
    }
    
    .open {
        display: inline-block;
    }

    .prof {
        margin: 0;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .tatie{        
        max-width: 350px;
        min-width: 200px;
        margin: auto;
    }

    .tatie img{
        width: 100%;
    }

    .chara-2 {
        width: 100%;
    }

    .menu {
        position: fixed;
        top:0;
        left:0;
        margin: 0;
        width: 100%;
        height: 0px;
        padding: 1rem 2rem 2rem;
        z-index: 2;
    }

    .menu-list{
        transform: translateY(-100%);
        opacity: 0;
    }

    ul.link{
        margin-left: 1rem;
    }

    ul.attention li{
        margin-left: 1rem;
    }

    /* メニューオープン時 */
    .menu-list.fade {
        transform: translateY(0%);
        opacity: 1;
        width: 100%;
        height: 100vh;
    }

    .menu-list.fade nav {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 50%;
    }

    .menu-list.fade nav ul li {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }
    /** ハンバーガーメニュー **/
    .item {
        position: relative;
        width: auto;
        padding: 0.5rem 0;
        text-align: right;
        box-sizing: border-box;
        counter-increment: item;
        z-index: 3;
    }

    .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }

    .menu-trigger {
        position: relative;
        width: 40px;
        height: 34px;
        background: none;
        border: none;
        appearance: none;
    }

    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 4px;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 15px;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }    #menu01.active span:nth-of-type(1) {
        transform: translateY(15px) rotate(-45deg);
    }

    #menu01.active span:nth-of-type(2) {
        opacity: 0;
    }

    #menu01.active span:nth-of-type(3) {
        transform: translateY(-15px) rotate(45deg);
    }

    /** トップに戻る **/
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }

    /** 更新履歴 **/
    .update{
        width: 85%;
    } 
    .update .inner {
        font-size: 12px;
      }
      .update .inner dt {
        width: 80px;
      }
}