@charset "utf-8";

/***********************************************************************************************************************
* リサイズ  768px以下から
***********************************************************************************************************************/
@media screen and (max-width: 768px){

    /*
    共通
    --------------------------------*/
    img{
        max-width: 100%;
    }
    .headline-mid {
        font-size: 1.8rem;
    }

    .btn-b {
        padding: 0.5em;
        font-size: 1.4rem;
    }

    .link-under::after,
    #home header.fixed .link-under::after,
    #home header.fixed.active .link-under::after,
    .link-under:hover::after, #home header.fixed .link-under:hover::after {
        display: none;
        -webkit-transform: scaleX(0);
        -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
        -o-transform: scaleX(0);
        transform: scaleX(0);
    }

    /*
    header
    --------------------------------*/
    /*トップ特殊ヘッダー*/
    #home header {
        top:0;
        margin-top:0;
        position: absolute;
        background: none;
        height: auto;
    }

     #home header.fixed {
        top: 0;
        left: 0;
        height: 70px;
        position: fixed;
        width: 100%;
        background: #fff;
        z-index: 1002;
        margin-top: 0px;
    }

    #home header .logo{
        display: none;
    }
    #home header.fixed .logo{
        display: block;
    }

    #home header .sp-head {
        position: static;
        top: 0px;
        left: 0px;
        height: 70px;
        padding-left: 20px;
        padding-top: 20px;
    }

    #home header nav{
    top:0px;
    }

    #home header nav .menu {
        display: block;
        float: none;
        padding: 120px 0 35px;
        background: url(../img/logo_wh.png) 25px 60px no-repeat;
    }

    #main-visual .main-logo{
      width: 15%;
    }

    header .ch-nav{
        font-size: 1.4rem;
        margin-top: 15px;
        padding-left: 1.1em;
        display: block;
    }
    header .ch-nav>li>a{
        color:#fff;
    }


    body header #menu-button{
      display: block;
    }
    body header{
      height: auto;
    }

    body header .wrap {
        padding: 0px;
    }


    header nav,
    #home header.fixed nav{
        position: absolute;
        width: 280px;
        top:70px;
        right:-100%;
        left:auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
        opacity: 0;
        background: #003567;
        display: none;
        animation-duration: 0.3s;
        animation-name: fade-in;
        -moz-animation-duration: 0.3s;
        -moz-animation-name: fade-in;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-name: fade-in;
    }
            @keyframes fade-in {
            0% { display: none; opacity: 0;}
            1% { display: block; opacity: 0;}
            100% { display: block; opacity: 1;}
            }
            @-moz-keyframes fade-in {
            0% { display: none; opacity: 0;}
            1% {display: block;opacity: 0;}
            100% {display: block; opacity: 1;}
            }
            @-webkit-keyframes fade-in {
            0% { display: none; opacity: 0;}
            1% { display: block; opacity: 0;}
            100% { display: block;opacity: 1;}
            }

    header.active nav,
    #home header.fixed.active nav{
        right:0;
        opacity: 1;
        display: block;
        -webkit-transition:all 0.4s ease;
          -moz-transition:all 0.4s ease;
          -ms-transition:all 0.4s ease;
          -o-transition:all 0.4s ease;
          transition:all 0.4s ease;
    }
    header nav .menu,
    #home header.fixed.active nav .menu{
        display: inline-block;
        float: none;
        padding: 35px 0;
        background: none;
    }

    header nav .menu>li{
        padding: 0.5em 1.5em 1em;
        display: block;
    }
    header.active nav .menu>li>a,
    #home header.fixed.active .menu>li>a,
    #home header.fixed.active .ch-nav>li>a{
        color:#fff;
    }

    header.active nav .menu>li>a::after{
        display: block;
        border-bottom: 3px solid #fff;
    }

    header .sp-head,
    #home header.fixed .sp-head{
        width: 100%;
        padding-top:12px;
        padding-left:12px;
        position: static;
    }
    header .sp-head .logo,
    #home header.fixed .sp-head .logo{
        width: 200px;
    }

    header .sp-head .logo a,
    #home header.fixed .sp-head .logo a{
        display: inline-block;
        width: 100%;
        height: 40px;
        background: url(../img/logo.png) 0 0 no-repeat;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

    footer{
        padding: 20px;
    }

    footer .wrap{
        display: none;
    }

    footer .copy {
        padding: 0;
        font-size: 1.2rem;
        font-size: 2.8vw;
    }

    footer #pagetop{
        width: 50px;
        height: 50px;
        bottom:-60px;
        right:20px;
    }

    footer #pagetop::after{
        content: "";
        position: absolute;
        display: block;
        top:50%;
        left:50%;
        margin-top:-4px;
        margin-left:-9px;
        width: 15px;
        height: 15px;
        border-top: solid 3px #ffffff;
        border-left: solid 3px #ffffff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    footer #pagetop.active{
        bottom:50px;
    }


    #home .section{
        padding-bottom: 20px;
    }


    /*スライダー*/
    #main-visual .swiper-slide{
        height: 60vh;
        position: relative;
    }

    #main-visual .swiper-slide .fig .ninja{
        position: absolute;
        width: 70px;
        bottom:5%;
        right:5%;
    }
    #main-visual .swiper-slide .fig .shounin{
        position: absolute;
        width: 70px;
        bottom:5%;
        left:5%;
    }

    #main-visual .layer-logo{
        width: 18%;
    }


    .block p {
        font-size: 1.4rem;
        text-align: left;
    }

    /*news*/
    #news .news-box,
    #news .news-box>div,
    #news .news-box>div:nth-child(1),
    #news .news-box>div:nth-child(2),
    #news .news-box>div:nth-child(3){
        width: 100%;
        display: block;
        text-align: center;
        padding: 0;
    }

    #news .news-box>div:nth-child(1),
    #news .news-box>div:nth-child(3){
        padding: 0.5em;
    }
    #news .news-box>div:nth-child(2){
        text-align: left;
        padding: 1em 2.5em;
    }

    #news .news-box>div:nth-child(2) time{
        display: block;
        padding-right: 0;
    }
    /**/
    #sect-invitation{
        padding: 35px 0;
        text-align: center;
        background: #fff7e8;
    }

    #sect-invitation .headline-img{
        width: 80%;
        margin: 0 auto;
    }

    #sect-invitation p {
        font-size: 1.4rem;
        padding: 25px 0 10px;
    }

    /*長、登場*/
    #sect-greeting .fig{
        height: 400px;
        background: url(../img/home_wide_visual01_n.jpg) 10% center no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    #sect-greeting .link-block{
        position: static;
        width: 100%;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        padding: 30px;
        background: #fff url(../img/home_ico_en.png) 200px 20px no-repeat;
        -webkit-background-size: 100px auto;
        background-size: 100px auto;
    }

    #sect-greeting .link-block img {
        max-width: 165px;
    }

    #sect-greeting .btn-area {
        text-align: center;
    }

    #sect-greeting .link-block p {
        padding: 1em 0;
        font-size: 1.6rem;
    }

    /*よくわかる*/
    #sect-lecture {
        margin: 0;
    }

    #sect-lecture .headline-img img{
        max-width: 180px;
    }


    #sect-lecture .clm-box,
    #sect-lecture .clm-box>div,
    #sect-lecture .clm-box>div:nth-child(1),
    #sect-lecture .clm-box>div:nth-child(2),
    #sect-about .clm-box,
    #sect-about .clm-box>div,
    #sect-about .clm-box>div:nth-child(1),
    #sect-about .clm-box>div:nth-child(2){
        width: 100%;
        display: block;
    }

    #sect-lecture .clm-box>div,
    #sect-about .clm-box>div {
        height: 345px;
    }

    #sect-lecture .clm-box>div:nth-child(2),
    #sect-about .clm-box>div:nth-child(2){
        height: auto;
        padding: 30px;
    }

    #sect-lecture .clm-box>div .block ,
    #sect-about .clm-box>div .block{
        max-width: 1000px;
        float: none;
        padding:0px;
    }

    #sect-lecture .clm-box>div:nth-child(1) {
        background: url(../img/home_img01.jpg) 20% center no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        box-shadow:none;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        overflow: hidden;
    }
    #sect-lecture .btn-b {
        padding: 0.5em;
    }
    #sect-lecture .btn-area {
        text-align: center;
    }

    #sect-lecture .br{
        display: none;
    }

    /*アバウト*/
    #sect-about {
        margin-bottom: 30px;
    }

    #sect-about .btn-area{
      text-align: center;
    }

    #sect-about .headline-img img{
      max-width: 200px;
    }

    #sect-about .clm-box>div:nth-child(2){
      width: 100%;
    }
    #sect-about .clm-box>div:nth-child(1){
      width: 100%;
      background: url(../img/home_img02_n.jpg) left 40% no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      box-shadow:none;
      -moz-box-shadow:none;
      -webkit-box-shadow:none;
      overflow: hidden;
    }

    #sect-about .btn-b {
        padding: 0.5em;
    }

    #sect-ourdynamism .clm-box {
        display: block;
        width: 100%;
        height: auto;
    }

    #sect-ourdynamism .clm-box>div:nth-child(2) {
        background: url(../img/home_img03.jpg) right 0 top 0 no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        box-shadow:none;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        height: 400px;
    }

    #sect-ourdynamism .block {
        position: static;
        padding:30px;
        -webkit-transform: translate(0, 0);
        transform: translate(0,0);
    }

    #sect-ourdynamism .btn-area{
      text-align: center;
    }

    #sect-ourdynamism .clm-box>div,
    #sect-ourdynamism .clm-box>div:nth-child(1) ,
    #sect-ourdynamism .clm-box>div:nth-child(2) {
      display: block;
      width: 100%;
    }

    #sect-kenja .head {
        padding: 20px 20px 110px 21px;
        background: url(../img/ico_ninja.png) left 50% bottom 0px no-repeat;
        -webkit-background-size: 70px;
        background-size: 70px;
    }

    #sect-gei .head {
        padding: 20px 20px 110px 21px;
        background: url(../img/ico_shounin.png) left 50% bottom 0px no-repeat;
        -webkit-background-size: 70px;
        background-size: 70px;
    }

    #sect-kenja p {
        font-size: 1.4rem;
    }

    #sect-kenja .clm-box {
      display: block;
    }
    #sect-kenja .clm-box>div{
     width: 100%;
    }
    #sect-kenja .clm-box>div img{
     width: 100%;
    }

    #sect-gei {
        margin-top: 0;
    }


    #sect-gei .clm-box,
    #sect-gei .clm-box>div{
      display: block;
    }

    #sect-gei .clm-box>div:nth-child(1),
    #sect-gei .clm-box>div:nth-child(2){
      width: 100%;
    }
    #sect-gei .clm-box>div:nth-child(1){
      margin-bottom: 30px;
    }

    #sect-gei .inner-wrap {
        padding: 20px 0 0;
    }

    #sect-gei .text-box {
        font-size: 1.4rem;
        padding: 0 20px;
    }

    #sect-gei .inner-wrap .hover {
        display: block;
    }

    #green-bg{
        padding-top: 250px;
        padding-bottom: 0px;
        background: none;
    }
    #sect-kenja .clm-box>div {
        padding: 20px;
    }

    /*スマホ用グリーン背景*/
    .green-bg-cover{
        background: url(../img/home_green_bg.jpg) right 0 top 100% no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    #sect-recruit {
        margin-top: 0px;
        padding: 30px 0 0;
        text-align: center;
    }

    #sect-recruit .clm-box {
      display: block;
    }

    #sect-recruit .clm-box>div{
      width: 100%;
      padding: 10px 20px;
    }

}


/***********************************************************************************************************************
* リサイズ  425px以下から
***********************************************************************************************************************/
@media screen and (max-width: 425px){

  #sect-invitation p {
      font-size: 1.3rem;
      font-size: 3.6vw;
  }

}