@charset "utf-8";

/* ---------------------------------------
	max-width: 800px
--------------------------------------- */

@media screen and (max-width: 800px) {

    html { font-size:  14px; }

    /*
        Other
    ******************************/

    .break__sp{
        display: block;
    }
    .break__pc{
        display: none;
    }

    /************************************************************

          Header

    ************************************************************/

    .c-header .c-logo{
        margin-top: -18px;
        left: 30px;
    }
    .c-header .c-logo a{
        width: 180px;
        height: 36px;
    }
    .o-nav__inner{
        padding: 5vh 9.6vw;
    }
    .o-nav__head{
        font-size: 0.8em;
        padding-top: 60px;
    }

    /* Internal / In page links */
    .o-nav__item.__internal{
        position: relative;
        margin: 4.8vw 0;
    }
    .o-nav__item.__internal .__head h2{
        position: relative;
        font-size: 0.8em;
        margin-bottom: 1em;
        top: auto;
        left: auto;
    }
    .o-nav__item.__internal ul{
        position: relative;
        padding-left: 3.2vw;
        padding-right: 3.2vw;
        padding-top: 0;
        padding-bottom: 0;
    }
    .o-nav__item.__internal ul li{
        border-bottom: 1px solid #333;
    }
    .o-nav__item.__internal ul li:last-child{
        border-bottom: none;
    }
    .o-nav__item.__internal ul li a{
        display: block;
        font-size: 1.2em;
        padding: 2.4vw 0;
    }

    /* Content */
    .o-nav__item.__content{
        margin: 4.8vw 0 0;
        padding: 4.8vw 0;
    }
    .o-nav__item.__content ul li{
        display: inline-block;
        margin: 0 1.2vw;
    }
    .o-nav__item.__content ul li a{
        font-size: 1em;
        line-height: 2.4;
    }

    /* SNS */
    .o-nav__item.__sns{
        padding-bottom: 64px;
    }

    /************************************************************

         Breadcrumb

    ************************************************************/

    .breadcrumbs{
        margin: 6.4vw 0 3.2vw;
    }
    .breadcrumbs ul li{
        display: inline-block;

    }
    .breadcrumbs ul li span{
        font-size: 0.8em;
    }

    /************************************************************

         Footer

    ************************************************************/

    .footer{
        margin: 3.2vw 0 0;
        padding-top: 6.4vw;
        padding-bottom: calc( 64px + 2.4vw );
    }
    .f-nav ul li{
        margin: 0 0.25em;
    }
    .f-sns{
        position: relative;
        margin: 1em 0;
        top: auto;
        right: auto;
    }
    .footer .f-copyright{
        position: relative;
        font-size: 0.7em;
        bottom: auto;
        right: auto;
    }

}/* max-width: 800px */


/* ---------------------------------------
	max-width: 600px
--------------------------------------- */

@media screen and (max-width: 600px) {

    /************************************************************

          Header

    ************************************************************/

    .c-header{
        height: 80px;
    }
    .c-header .c-logo{
        margin-top: -14px;
        left: 20px;
    }
    .c-header .c-logo a{
        width: 144px;
        height: 28px;
    }

    .o-nav__btn{
        position: absolute;
        right: 10px;
    }

    /************************************************************

         Footer

    ************************************************************/

    .footer{
        margin: 4.8vw 0 0;
        padding-top: 9.6vw;
        padding-bottom: calc( 56px + 2.4vw );
    }
    .footer .f-logo{
        width: 144px;
        height: 28px;
    }
    .footer .f-logo a{
        width: 144px;
        height: 28px;
    }
    .f-nav ul{
        border-top: 1px solid #333;
    }
    .f-nav ul li{
        display: block;
        margin: 0;
        border-bottom: 1px solid #333;
    }
    .f-nav ul li a{
        display: block;
        padding: 2.8vw;
    }
    .footer .f-copyright{
        font-size: 0.65em;
    }

}/* max-width: 600px */


/* ---------------------------------------
	max-width: 480px
--------------------------------------- */

@media screen and (max-width: 480px) {}/* max-width: 480px */


/* ---------------------------------------
	max-width: 320px
--------------------------------------- */

@media screen and (max-width: 320px) {
    html { font-size:  13px; }

    /************************************************************

          Header

    ************************************************************/

    .o-nav__btn{
        position: absolute;
        right: 0px;
    }

    .o-nav__inner{
        padding: 4vh 9.6vw;
    }
    .o-nav__head{
        position: relative;
        width: 100%;
        font-size: 0.8em;
        color: #fff;
        z-index: 100002;
        margin-bottom: 4.8vw;
        padding-bottom: 4.8vw;
        border-bottom: 1px solid #555;
    }

    /* Internal / In page links */
    .o-nav__item.__internal{
        position: relative;
        margin: 3.6vw 0;
    }
    .o-nav__item.__internal .__head h2{
        font-size: 0.65em;
        margin-bottom: 0.5em;
    }
    .o-nav__item.__internal ul li{
        border-bottom: 1px solid #333;
    }
    .o-nav__item.__internal ul li:last-child{
        border-bottom: none;
    }
    .o-nav__item.__internal ul li a{
        display: block;
        font-size: 1.0em;
        padding: 2.0vw 0;
    }

    /* Content */
    .o-nav__item.__content{
        margin: 3.6vw 0 0;
        padding: 3.6vw 0;
    }
    .o-nav__item.__content ul li{
        display: inline-block;
        margin: 0 1.2vw;
    }
    .o-nav__item.__content ul li a{
        font-size: 0.9em;
        line-height: 2.0;
    }

}/* max-width: 320px */