@charset "UTF-8";

/*---------------------------------タブレット用----------------------------------*/
/*-----------------------------------------------------------------------------*/
@media screen and (max-width:900px) {

    /*--------------------------------------------------------------------------------
    　▼ mobile_header nav　
    --------------------------------------------------------------------------------*/
    #m_header {
        display: block;
        padding: 20px 0;
    }
    #m_header .logo { text-align: right;}
    #m_header #toggle_btn {
        position: absolute;
        top: 10px;
        left: 20px;
    }
    #m_header .main { padding: 30px 0 0;}

    /*--------------------------------------------------------------------------------
    　▼ 共通　
    --------------------------------------------------------------------------------*/
    .box { padding: 20px 0;}
    .inner_box { width: 90%;}
    .anchor-point { top: -10px;}
    
    audio { width: 200px;}
    
    /*--------------------------------------------------------------------------------
    　▼ header　
    --------------------------------------------------------------------------------*/
    #header,
    #fixedBox { display: none;}

    /*--------------------------------------------------------------------------------
    　▼ NEWS
    --------------------------------------------------------------------------------*/
    #news.box { padding: 0;}

    /*--------------------------------------------------------------------------------
    　▼ BIOGRAPHY
    --------------------------------------------------------------------------------*/
    .name { padding-left: 5%;}

    /*--------------------------------------------------------------------------------
    　▼ footer
    --------------------------------------------------------------------------------*/
    #footer { padding: 20px 0;}
}



/*---------------------------------スマホ用----------------------------------*/
/*-----------------------------------------------------------------------------*/
@media screen and (max-width:640px) {

    #mobile-bar .inner img { width: auto !important; height: 100px !important;}

    /*--------------------------------------------------------------------------------
    　▼ m_header
    --------------------------------------------------------------------------------*/
    #m_header #toggle_btn { top: 20px;}
    #m_header #toggle_btn img { width: 50px !important;}


    /*--------------------------------------------------------------------------------
    　▼ 共通
    --------------------------------------------------------------------------------*/
    .in_box { padding: 20px 0 0;}
    audio { width: 300px;}

    /*--------------------------------------------------------------------------------
    　▼ NEWS
    --------------------------------------------------------------------------------*/
    #news .fl { float: none; width: 100%;}
    #news .fr {
        float: none;
        width: 100%;
        text-align: center;
        padding: 20px 0 0;
    }

    /*--------------------------------------------------------------------------------
    　▼ BIOGRAPHY
    --------------------------------------------------------------------------------*/
    .photo_box .fl,
    .photo_box .fr {
        display: block;
        float: none;
        width: 100%;
    }
    .photo { width: 80%; display: block; margin: 0 auto; text-align: center;}
    .name {
        display: block;
        width: 100%;
        text-align: center;
    }
    .photo img,
    .fl_box img { width: 100%;}

    .fl_box {
        float: none;
        width: 80%;
        margin: 0 auto;
        padding-right: 0;
    }

    .fr_box {
        float: none;
        width: 100%;
    }
    .link { text-align: center;}


    /*--------------------------------------------------------------------------------
    　▼ SPECIAL
    --------------------------------------------------------------------------------*/
    #special .fl,
    #special .fr {
        float: none;
        width: 100%;
        text-align: center !important;
    }
    #special .fr { padding-top: 20px;}
    #special .title_box { margin-bottom: 20px;}
    #special table tr th { display: block; width: 100%; text-align: center;}
    #special table tr td { display: block; width: 100%;}
    
    
    ul.ul01 { padding: 40px 0 0;}
    ul.ul01 li {
        display: block;
        width: 100%;
        margin: 0 0 30px;
        text-align: center;
    }
    ul.ul01 li .img_box img { width: 100%;}
    ul.ul01 li .img_box { width: 80%; margin: 0 auto; padding-top: 70%;}
    ul.ul01 li:nth-child(3n - 1) { margin: 0 0 30px;}
    
    .linktxt { text-align: center; padding: 10px 0;}
    
    
}