.font01
{
    font-family: 'Julius Sans One', sans-serif;
}

.font02
{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.font03
{
    font-family: 'Montserrat', sans-serif;
}
.font04
{
    font-family: 'Julius Sans One', sans-serif;
}
.font05
{
    font-family: 'Montserrat', sans-serif;
}
.font06
{
    font-family: 'Poppins', sans-serif;
}

.font_logo
{
    font-family: 'Julius Sans One', sans-serif;
	font-size: 100%;
}

.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }



body {
   font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}


#wrap 
{
    overflow: hidden;
}



/*----------------

PCレイアウト
width:769 以上

-----------------*/


/*-----------201803新規ブレイクポイント追加ここから-----------*/

@media screen and (min-width: 1025px){
 
    /*----------------NAV-----------------*/

	 .sp
    {
        display: none!important;
    }

	
    nav
    {
        position: relative;

        width: 100%;
    }

    nav ul.left
    {
        position: absolute;
        top: 26px;
        left: 5%;

        color: white;
    }

    nav ul.left span
    {
        position: relative;
        top: -15px;
        left: 15px;
    }


    nav ul.right
    {
        position: absolute;
        top: 20px;
        right: 5%;

        color: white;
    }

    nav ul.right li
    {
        display: inline-block;

        padding: 0 20px 0 0px;
    }
	

    nav ul.right li.job
    {
        line-height: 60px;

        width: 212px;
        height: 60px;
        padding: 0;

        text-align: center;

        background-color: #000;
    }

    nav ul.right li.job:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;

        background-color: #333;
    }

    nav ul.right a li.job:hover
    {
    }

    nav ul.right li.job a
    {
        display: block;
    }

    nav ul.right li.job img
    {
        position: relative;
        top: 7px;
    }

    nav a
    {
        text-decoration: none;

        color: white;
    }

    nav a:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;
        text-decoration: none;

        opacity: .7;
        color: white;
    }


    #change
    {
        position: fixed;
        z-index: 9999;
        top: -90px;
        left: 0;

        /*display: none;*/

        width: 100%;
        padding: 40px 0 50px 0;

        background: #fff;

        -webkit-transition: top 0.3s;
        transition: top 0.3s;
    }

    #change.on {
        top: 0;
    }

    #change .nav2
    {
        position: relative;
        top: -40px;
    }

    #change .nav2 a
    {
        color: #000;
        background-color: #fff;
    }

    #change nav ul.right a li.job
    {
        color: white;
    }

        /*----------------FOOTER-----------------*/

    footer
    {
        clear: both;
    }

    #footer
    {
        clear: both;

        margin-top: 100px;
    }


    .to-list
    {
        padding: 50px 0;
    }

    .to-list a:hover
    {
        text-decoration: none;
    }

    .to-list .btn
    {
        font-size: 120%;
        line-height: 92px;

        position: relative;

        width: 461px;
        height: 92px;
        margin: 0 auto;

        text-align: center;

        color: white;
        background-color: black;
    }

    .to-list .btn:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;

        background-color: #333;
    }


    .to-list .btn span
    {
        font-size: 70%;

        position: relative;
        top: -3px;
    }
    .to-list .btn img
    {
        position: absolute;
        top: 25px;
    }

    #footer .bottom
    {
        position: relative;

        width: 1100px;
        height: 100px;
        margin: 0 auto ;

        border-bottom: 1px solid #ccc;
    }

    #footer .bottom ul.left
    {
        position: absolute;
        top: 44px;
        left: 0;
    }

    #footer .bottom ul.left li span
    {
        position: relative;
        top: -15px;
        left: 10px;
    }

    #footer .bottom ul.right
    {
        position: absolute;
        top: 58px;
        right: 3px;
    }

    #footer .bottom ul.right li
    {
        font-size: 90%;

        display: inline;

        padding: 0 0 0 25px;

        text-align: right;
    }

    #footer .bottom ul.right li a
    {
        color: #000;
    }

    #footer .bottom ul.right li a:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;
        text-decoration: none;

        opacity: .7;
    }

    #footer .copyright
    {
        font-size: 70%;

        width: 1100px;
        margin: 20px auto;

        text-align: right;
    }


    .toTop
    {
        line-height: 60px;

        position: relative;

        width: 130px;
        height: 60px;
        margin: 0 auto;

        text-align: center;

        color: white;
        background-color: #9fa0a0;
    }

    .toTop a
    {
        font-size: 80%;

        display: block;

        text-decoration: none;

        color: white;
    }

    .toTop a span
    {
        position: relative;
        top: 10px;
    }

    .toTop img
    {
        position: absolute;
        top: 10px;
        left: 40%;

        display: inline-block;
    }





    #article
    {
        line-height: 2.2;

        width:  1100px;
        margin: 100px auto;

        color: #000;
    }
    	
	
}

/*-----------201803新規ブレイクポイント追加ここまで-----------*/
@media screen and (min-width:768px) and ( max-width:1024px) {

    .sp
    {
        display: none!important;
    }

    /*----------------NAV-----------------*/

    nav
    {
        position: relative;

        width: 100%;
    }
	

    nav ul.left
    {
        position: absolute;
        top: 26px;
        left: 5%;

        color: white;
    }

    nav ul.left span
    {
        position: relative;
        top: -15px;
        left: 15px;
    }


    nav ul.right
    {
        position: absolute;
        top: 20px;
        right: 5%;

        color: white;
    }

    nav ul.right li
    {
        display: inline-block;

        padding: 0 20px 0 0px;
    }

    nav ul.right li.job
    {
        line-height: 60px;

        width: 212px;
        height: 60px;
        padding: 0;

        text-align: center;

        background-color: #000;
    }

    nav ul.right li.job:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;

        background-color: #333;
    }

    nav ul.right a li.job:hover
    {
    }

    nav ul.right li.job a
    {
        display: block;
    }

    nav ul.right li.job img
    {
        position: relative;
        top: 7px;
    }

    nav a
    {
        text-decoration: none;

        color: white;
    }

    nav a:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;
        text-decoration: none;

        opacity: .7;
        color: white;
    }


    #change
    {
        position: fixed;
        z-index: 9999;
        top: -90px;
        left: 0;

        /*display: none;*/

        width: 100%;
        padding: 40px 0 50px 0;

        background: #fff;

        -webkit-transition: top 0.3s;
        transition: top 0.3s;
    }

    #change.on {
        top: 0;
    }

    #change .nav2
    {
        position: relative;
        top: -40px;
    }

    #change .nav2 a
    {
        color: #000;
        background-color: #fff;
    }

    #change nav ul.right a li.job
    {
        color: white;
    }


    /*----------------FOOTER-----------------*/

    footer
    {
        clear: both;
    }

    #footer
    {
        clear: both;

        margin-top: 100px;
    }


    .to-list
    {
        padding: 50px 0;
    }

    .to-list a:hover
    {
        text-decoration: none;
    }

    .to-list .btn
    {
        font-size: 120%;
        line-height: 92px;

        position: relative;

        width: 461px;
        height: 92px;
        margin: 0 auto;

        text-align: center;

        color: white;
        background-color: black;
    }

    .to-list .btn:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;

        background-color: #333;
    }


    .to-list .btn span
    {
        font-size: 70%;

        position: relative;
        top: -3px;
    }
    .to-list .btn img
    {
        position: absolute;
        top: 25px;
    }

    #footer .bottom
    {
        position: relative;

        width: 1100px;
        height: 100px;
        margin: 0 auto ;

        border-bottom: 1px solid #ccc;
    }

    #footer .bottom ul.left
    {
        position: absolute;
        top: 44px;
        left: 0;
    }

    #footer .bottom ul.left li span
    {
        position: relative;
        top: -15px;
        left: 10px;
    }

    #footer .bottom ul.right
    {
        position: absolute;
        top: 58px;
        right: 3px;
    }

    #footer .bottom ul.right li
    {
        font-size: 90%;

        display: inline;

        padding: 0 0 0 25px;

        text-align: right;
    }

    #footer .bottom ul.right li a
    {
        color: #000;
    }

    #footer .bottom ul.right li a:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;
        text-decoration: none;

        opacity: .7;
    }

    #footer .copyright
    {
        font-size: 70%;

        width: 1100px;
        margin: 20px auto;

        text-align: right;
    }


    .toTop
    {
        line-height: 60px;

        position: relative;

        width: 130px;
        height: 60px;
        margin: 0 auto;

        text-align: center;

        color: white;
        background-color: #9fa0a0;
    }

    .toTop a
    {
        font-size: 80%;

        display: block;

        text-decoration: none;

        color: white;
    }

    .toTop a span
    {
        position: relative;
        top: 10px;
    }

    .toTop img
    {
        position: absolute;
        top: 10px;
        left: 40%;

        display: inline-block;
    }





    #article
    {
        line-height: 2.2;

        width: 1100px;
        margin: 100px auto;

        color: #000;
    }
}




/*----------------

スマホレイアウト
width:768 以下

-----------------*/


@media screen and (max-width: 768px)
{
    .pc
    {
        display: none;
    }

    /*----------------NAV-----------------*/





    nav
    {
        position: fixed;
        z-index: 100;

        width: 100%;
    }

    nav ul.left
    {
        position: absolute;
        top: 15px;
        left: 3%;
		font-size: 85%;

        color: black;
    }

    nav ul.left span
    {
        font-size: 80%;

        position: relative;
        top: -10px;
        left: 10px;

        color: black;
    }

    span.sub-black
    {
        color: #000 !important;
    }


    nav ul.left a:hover
    {
        text-decoration: none;
    }

    nav ul.left img
    {
        width: 150px;
    }



    nav ul.right
    {
    }


    .toggle
    {
        position: absolute;
        z-index: 1;
        top: 11px;
        right: 3%;

        width: 40px;
        height: 40px;

        cursor: pointer;
    }
    .toggle span
    {
        position: absolute;
        right: 0;
        left: 0;

        display: block;

        width: 25px;
        height: 2px;
        margin: auto;

        transition: all .2s ease-out;

        background: #000;
    }

    .toggle.scroll  span
    {
        position: absolute;
        right: 0;
        left: 0;

        display: block;

        width: 25px;
        height: 2px;
        margin: auto;

        transition: all .2s ease-out;

        background: #000;
    }

    .subpage .toggle span
    {
        position: absolute;
        right: 0;
        left: 0;

        display: block;

        width: 25px;
        height: 2px;
        margin: auto;

        transition: all .2s ease-out;

        background: #000;
    }
    .toggle span:first-child
    {
        top: 12px;
    }
    .toggle span:nth-child(2)
    {
        top: 20px;
    }
    .toggle span:nth-child(3)
    {
        top: 28px;
    }
    .toggle.open span:first-child
    {
		transform: translateY(9px) translateX(-3px) rotate(45deg);
	}
	.toggle.open span:nth-child(2)
    {
		opacity: 0;
	}
	.toggle.open span:nth-child(3)
    {
		transform: translateY(-7px) translateX(-3px) rotate(-45deg);
	}
    body.fixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .gnav
    {
        position: fixed;
        z-index: 1;
        top: 61px;
        left: 0;

        display: none;
        overflow: hidden;

        width: 100%;
        height: calc(100% - 61px);

        background: rgba(255,255,255,.9);
    }
    .gnav > ul
    {
        display: block;
        overflow: auto;

        height: 100%;

        -webkit-overflow-scrolling: touch;
    }

    .gnav
    {
        float: none;

        
    }
    .gnav li
    {
        display: block;

        border-bottom: 1px solid rgba(0,0,0,.5);
        background: #fff;
    }
    .gnav li + li
    {
        margin-left: 0;
    }
    .gnav li a
    {
        position: relative;

        display: block;

        padding: 25px 5%;

        color: #000;
        background: #fff;
    }

    .gnav  a li
    {
        position: relative;

        display: block;

        padding: 15px 5%;

        color: #000;
        background: #fff;
    }
    .gnav li a:before
    {
        position: absolute;
        top: 50%;
        right: 5%;

        width: 8px;
        height: 8px;
        margin-top: -4px;

        content: '';
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);

        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .gnav li a:hover
    {
        text-decoration: none;
    }
    .gnav li ul
    {
        border-top: 1px solid rgba(255,255,255,.5);
    }
    .gnav li ul li
    {
        padding-left: 5%;
    }


    nav ul.right li
    {
    }

    nav ul.right li.job
    {
    }

    nav ul.right li.job:hover
    {
    }

    nav ul.right a li.job:hover
    {
    }

    nav ul.right li.job a
    {
        color: #000;
    }

    nav ul.right li.job img
    {
        display: none;
    }

    nav a
    {
        text-decoration: none;
    }

    nav a:hover
    {
    }



  #change
    {
        position: fixed;
        z-index: 9999;
        top: -70px;
        left: 0;

        /*display: none;*/

        width: 100%;
        padding: 40px 0 30px 0;

        background: #fff;

        -webkit-transition: top 0.3s;
        transition: top 0.3s;
    }

    #change.on {
        top: 0;
    }

    #change .nav2
    {
        position: relative;
        top: -40px;
    }

    #change .nav2 a
    {
        color: #000;
        background-color: #fff;
    }

    #change nav ul.right a li.job
    {
        color: white;
    }


    /*----------------FOOTER-----------------*/

    footer
    {
        clear: both;
    }

    #footer
    {
        clear: both;
        margin-top: 100px;
    }


    .to-list
    {
        display: none;
    }

    .to-list a:hover
    {
        text-decoration: none;
    }

    .to-list .btn
    {
        font-size: 120%;
        line-height: 92px;

        position: relative;

        width: 80%;
        height: 92px;
        margin: 0 auto;

        text-align: center;

        color: white;
        background-color: black;
    }

    .to-list .btn:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;

        background-color: #333;
    }


    .to-list .btn span
    {
        font-size: 70%;

        position: relative;
        top: -3px;
    }
    .to-list .btn img
    {
        position: absolute;
        top: 25px;
    }

    #footer .bottom
    {
        position: relative;

        width: 100%;
        margin: 0 auto 0;
    }

    #footer .bottom ul.left
    {
        margin-top: 20px;

        text-align: center;
    }

    #footer .bottom ul.left li span
    {
        font-size: 80%;

        position: relative;
        top: -7px;
    }

    #footer .bottom ul.left img
    {
        position: relative;
        left: -5px;

        width: 130px;
    }

    #footer .bottom ul.right
    {
    }

    #footer .bottom ul.sitemap li
    {
        font-family: 'Julius Sans One', sans-serif;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        padding: 25px 0 25px 20px;

        text-align: left;

        border-bottom: 1px solid #333;
    }

    #footer .bottom ul.sitemap a li
    {
        color: #000;
    }

    #footer .bottom ul.sitemap a:hover
    {
        -webkit-transition: .3s ease-out;
           -moz-transition: .3s ease-out;
             -o-transition: .3s ease-out;
                transition: .3s ease-out;
        text-decoration: none;

        opacity: .7;
    }

    #footer .copyright
    {
        font-size: 50%;

        width: 100%;
        margin: 10px auto 80px auto;

        text-align: center;
    }

    .toTop
    {
        display: none;
    }


    #fixed
    {
        position: fixed;
        z-index: 10;
        bottom: 0;
        opacity: 0;

        width: 100%;

        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    #fixed.on {
        opacity: 1;
    }

    #fixed .btn
    {
        float: left;

        width: 80%;
        height: 60px;

        text-align: center;

        color: white;
        background-color: #000;
    }

    #fixed .btn img
    {
        position: relative;
        top: 10px;
    }

    #fixed a.to
    {
        display: block;
        float: right;

        width: 20%;
        height: 60px;

        background-color: #9fa0a0;
    }


    .to
    {
        font-size: 90%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 5px;

        text-align: center;
        text-decoration: none;

        color: white;
    }

    .to:hover
    {
        text-decoration: none;

        color: white;
    }

    .to span
    {
        position: relative;
        top: 0;

        text-align: center;
    }

    .to img
    {
    }


    .sitemap.sp {
        border-top: 1px solid #000;
    } 


    /*

.toTop {
	width: 130px;
	height: 60px;
	margin: 0 auto;
	background-color: #9FA0A0;
	color: white;
	text-align: center;
	line-height: 60px;
	position: relative;
}

.toTop a {
	color: white;
	text-decoration: none;
	display: block;
	font-size: 80%;
}

.toTop a span {
	position: relative;
	top: 10px;
}

.toTop img {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 40%;
}

*/
}


.join {
    display: none !important;
}