@charset 'utf-8';

/* ※CSS Document */

/*--------------------
  base
  --------------------*/
    body{
        position: relative;
    }

/*--------------------
  #head02
  --------------------*/
    #head02{
        position: fixed;
        z-index: 99;
        top: -124px;
        left: 0;
        width: 100%;
        background-color: #fff;
        -webkit-transition: .3s;
        transition: .3s;
    }
    #head02.display{
        top: 0;
        left: 0;
    }
    #head02 .inner01{
        padding: 0 15px;
    }
    #head02 .inner02{
        margin: 0 auto;
        max-width: 950px;
        height: 68px;
    }
    #head02 .inner01 #ci01{
        float: left;
        padding: 5px 0 0;
    }
    #head02 .inner01 #d01{
        float: right;
        padding: 20px 0 0;
        color: #d70c19;
        font-weight: bold;
        font-size: 1.125rem;
    }

/*--------------------
  #head01
  --------------------*/
    #head01{
        position: relative;
        z-index: 1;
    }
    #head01 .inner01{
        position: relative;
        z-index: 6;
    }
    #head01 .inner01 #ci01{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }
    #head01 .inner01 #ci01 .box01{
        visibility: hidden;
        opacity: 0;
        position: relative;
        width: 160px;
        margin: 0 auto;
        padding: 84px 0 0;
    }
    #head01 .inner01 #ci01 .i01{
        width: 100%;
        display: block;
        position: absolute;
        top: 10px;
        left: 0;
    }
    #head01 .inner01 #d01{
        visibility: hidden;
        opacity: 0;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding: 20px 0 0;
    }
    #head01 .inner01 #d01 span{
        font-size: 1.125rem;
        font-weight: bold;
        color: #d70c19;
    }
    #head01 .inner01 #d01 .t01{
        display: inline-block;
        padding: 0 0 0 15px;
    }
    #head01 .inner01 #d01 .t02{
        display: inline-block;
        padding: 0 0 0 60px;
    }
    #head01 .inner02{
        position: relative;
        z-index: 2;
        height: 640px;
    }
    #head01 .inner02 *{
        -webkit-transition: .3s;
        transition: .3s;
    }
    #head01 .inner02 .block01{
        overflow: hidden;
        position: relative;
        z-index: 3;
        margin: 0 auto;
        height: 100%;
    }
    #head01 .inner02 .block01::after{
        content: ' ';
        position: absolute;
        z-index: 7;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 102px;
        background: url('../images/home/bg01.png') bottom center no-repeat;
    }
    #head01 .inner02 .block02{
        position: relative;
        margin: 0 auto;
        max-width: 1200px;
        width: 100%;
        height: 100%;
    }
    #head01 .inner02 .block02 .ani01{
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 4;
        bottom: 0;
        left: 0;
        content: ' ';
        margin: 0 auto;
        width: 100%;
        height: 640px;
        background: url('../images/home/ani01.jpg') bottom center no-repeat;
    }
    #head01 .inner02 .block02 .ani02{
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 5;
        top: -40px;
        left: 0;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani02.png') center center no-repeat;
    }
    #head01 .inner02 .block02 .ani03{
        visibility: hidden;
        opacity: 0;
        opacity: 0;
        position: absolute;
        z-index: 6;
        top: -30px;
        right: 0;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani03.png') center center no-repeat;
    }
    #gn01{
        background-color: #d70c19;
    }
    #gn01 ul{
        overflow: hidden;
        max-width: 950px;
        margin: 0 auto;
    }
    #gn01 li{
        float: left;
    }
    #gn01 li:nth-of-type(1){
        width: 9%;
    }
    #gn01 li:nth-of-type(2){
        width: 14.8%;
    }
    #gn01 li:nth-of-type(3){
        width: 14.8%;
    }
    #gn01 li:nth-of-type(4){
        width: 16.8%;
    }
    #gn01 li:nth-of-type(5){
        width: 19.1%;
    }
    #gn01 li:nth-of-type(6){
        width: 15%;
    }
    #gn01 li:nth-of-type(7){
        width: 10.5%;
    }
    #gn01 a:link,
    #gn01 a:visited,
    #gn01 a:hover,
    #gn01 a:active{
        display: block;
        text-align: center;
        padding: 16px 0;
        color: #fff;
        font-size: 1rem;
    }

/*--------------------
  main
  --------------------*/
    main{
        padding: 15px 15px 0;
    }
    main *{
        -webkit-transition: .3s;
        transition: .3s;
    }
    main > .inner01{
        position: relative;
        margin: 0 auto;
        padding: 0 0 80px;
        max-width: 950px;
    }

/*--------------------
  #m01
  --------------------*/
    #m01{
        text-align: left;
        padding-right: 230px;
        width: 100%;
    }

/*--------------------
  #c01
  --------------------*/
    #c01 .block01{
        padding: 0 0 20px;
    }
    #c01 .block01 h2{
        float: left;
        padding: 0 20px 0 0;
    }
    #c01 .block01 h2 img{
        width: 166px;
        height: auto;
    }
    #c01 .block01 p{
        padding: 30px 44px 0 0;
        font-size: 1.125rem;
    }
    #c01 .block01 p .t01{
        display: block;
    }
    #c01 .block01 .l01{
        float: right;
        padding-right: 50px;
    }
    #c01 .block01 .l01::before{
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f101";
    }
    #c01 .res01{
        display: block;
        margin-bottom:10px;
    }
    #c01 .res01 img{
        display: block;
        width: 100%;
        height: auto;
    }

/*--------------------
  #c02
  --------------------*/
    #c02{
        padding: 30px 0 0;
    }
    #c02 h2 img{
        display: block;
        width: 82px;
        height: auto;
    }
    #c02 .block01 li{
        padding: 5px 0 0;
        font-size: 1.125rem;
    }
    #c02 .block01 li .t01{
        padding-right: 1rem;
    }

/*--------------------
  #c03
  --------------------*/
    #c03{
        padding: 50px 0 0;
    }
    #c03 h2{
        padding: 0 0 10px;
    }
    #c03 h2 img{
        display: block;
        width: 116px;
        height: auto;
    }
/*    #c03 .i01{
        float: left;
        max-width: 350px;
        width: 48.6%;
    }
    #c03 .i01 img{
        display: block;
        width: 100%;
        height: auto;
    }
    #c03 .i01:nth-of-type(even){
        float: right;
    }*/
    #c03 .i01{
        float: left;
        width: 48.6%;
    }
    #c03 .i01:nth-of-type(even){
        float: right;
    }
    #c03 .iwrap{
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
        #c03 .iwrap iframe{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    #c03 .ititle{
        padding: 5px 0 0;
        font-size: 0.9rem;
    }

    #c03 .video-iwrap{
        /* width: 100%; */
    }

    #c03 .video-iwrap iframe{
        width: 100%;
    }
    #c03 .video-box{
    display: inline-block;
    width: 100%;
    }


/*--------------------
  #c04
  --------------------*/
    #c04{
        padding: 50px 0 0;
    }
    #c04 h2{
        margin-bottom: 10px;
    }
    #c04 h2 img{
        display: block;
        width: 194px;
        height: auto;
    }


/*--------------------
  #side01
  --------------------*/
    #side01{
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        font-size: .75rem;
        text-align: left;
    }
    #side01 .c01 h3{
        padding: 0 0 5px;
    }
    #side01 .c01 h3 img{
        max-width: 170px;
        width: 100%;
        height: auto;
    }
    #side01 .c01 .block01{
        border-bottom: 1px dashed #6e7071;
    }
    #side01 .c01 .block01 li{
        border-top: 1px dashed #6e7071;
        padding: 8px 0 5px;
    }
    #side01 .c01 .block01 li .t01{
        display: block;
    }
    #side01 .box01{
        padding: 30px 0 0;
    }
    #side01 .box01 .i01 img{
        max-width: 200px;
        width: 100%;
        height: auto;
    }
    #side01 .box01 .i02 .t01{
        display: block;
    }

    #side01 .box01 .side01_block02_box01_list{
        margin-top: 5px;
        font-size: .6875rem;
        text-align: center;
    }
    #side01 .box01 .side01_block02_box01_list li{
        margin-bottom: 3px;
    }
    #side01 .box01 .side01_block02_box01_list li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    #side01 .box01 .side01_block02_box01_list a{
        text-decoration: underline;
        font-size: .75rem;
    }

    #side01 .box02{
        padding: 30px 0 0;
    }
    #side01 .box02 li{
        padding: 10px 0 0;
    }
    #side01 .box02 li:nth-of-type(1){
        padding: 0;
    }
    #side01 .box02 li img{
        display: block;
        max-width: 200px;
        width: 100%;
        height: auto;
    }
    #side01 .box03{
        padding: 20px 0 0;
    }
    #side01 .box03 .i01 img{
        max-width: 200px;
        width: 100%;
        height: auto;
    }

@media screen and (max-width: 1200px){
    #head01 .inner02 .block02 .ani02{
        position: absolute;
        z-index: 5;
        top: -40px;
        left: -2.5%;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani02.png') center center no-repeat;
    }
    #head01 .inner02 .block02 .ani03{
        position: absolute;
        z-index: 6;
        top: -30px;
        right: -2.5%;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani03.png') center center no-repeat;
    }
}

@media screen and (max-width: 1020px){
    #head01 .inner02 .block02 .ani02{
        position: absolute;
        z-index: 5;
        top: -40px;
        left: -5%;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani02.png') center center no-repeat;
    }
    #head01 .inner02 .block02 .ani03{
        position: absolute;
        z-index: 6;
        top: -30px;
        right: -5%;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani03.png') center center no-repeat;
    }
}

@media screen and (max-width: 900px){
    #head01 .inner01 #ci01 .box01{
        position: relative;
        width: 100px;
        margin: 0 auto;
        padding: 84px 0 0;
    }
    #head01 .inner01 #ci01 .box01 h1 img{
        width: 100%;
        height: auto;
    }
    #head01 .inner02{
        position: relative;
        z-index: 2;
        height: 480px;
    }
    #head01 .inner02 *{
        -webkit-transition: .3s;
        transition: .3s;
    }
    #head01 .inner02 .block01{
        overflow: hidden;
        position: relative;
        z-index: 3;
        margin: 0 auto;
        height: 100%;
    }
    #head01 .inner02 .block01::after{
        content: ' ';
        position: absolute;
        z-index: 7;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 102px;
        background: url('../images/home/bg01.png') bottom center no-repeat;
    }
    #head01 .inner02 .block02{
        position: relative;
        margin: 0 auto;
        max-width: 1200px;
        width: 100%;
    }
    #head01 .inner02 .block02 .ani01{
        position: relative;
        z-index: 4;
        content: ' ';
        margin: 0 auto;
        max-width: 982px;
        width: 100%;
        height: 480px;
        background: url('../images/home/ani01.jpg') bottom center no-repeat;
        -webkit-background-size: 737px 480px;
        background-size: 737px 480px;
    }
    #head01 .inner02 .block02 .ani02{
        position: absolute;
        z-index: 5;
        top: 10px;
        left: -5%;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani02.png') center center no-repeat;
        -webkit-background-size: 90%;
        background-size: 90%;
    }
    #head01 .inner02 .block02 .ani03{
        position: absolute;
        z-index: 6;
        top: 20px;
        right: -5%;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani03.png') center center no-repeat;
        -webkit-background-size: 90%;
        background-size: 90%;
    }
    #gn01 a:link,
    #gn01 a:visited,
    #gn01 a:hover,
    #gn01 a:active{
        display: block;
        text-align: center;
        padding: 16px 0;
        color: #fff;
        font-size: .8375rem;
    }

    body#home #head02 .inner01 #d01{
        padding: 25px 0 0;
        font-size: .875rem;
    }
    body#home #head02 #gn02 a:link,
    body#home #head02 #gn02 a:visited,
    body#home #head02 #gn02 a:hover,
    body#home #head02 #gn02 a:active{
        font-size: .8375rem;
    }

/*--------------------
  #c01
  --------------------*/
    #c01 .block01 p{
        padding: 30px 0 0;
        font-size: 1rem;
    }
    #c01 .block01 .l01{
        padding-right: 0;
        font-size: .875rem;
    }

/*--------------------
  #c02
  --------------------*/
    #c02 .block01 li{
        padding: 5px 0 0;
        font-size: 1rem;
    }
    #c02 .block01 li .t01{
        padding: 0;
        display: block;
    }
}

@media screen and (max-width: 800px){
/*--------------------
  #c01
  --------------------*/
    #c01 .block01 p{
        padding: 15px 0 0;
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px){
    body#home #head02 .inner01 #d01{
        padding: 15px 0 0;
    }
    body#home #head02 .inner01 #d01 .t01{
        display: block;
    }

    #c03 .i01{
        float: none;
        max-width: 100%;
        width: 100%;
        margin:0 0 20px;
    }
    #c03 .i01:nth-of-type(even){
        float: none;
    }

}

@media screen and (max-width: 720px){
    #gn01 a:link,
    #gn01 a:visited,
    #gn01 a:hover,
    #gn01 a:active{
        display: block;
        text-align: center;
        padding: 16px 0;
        color: #fff;
        font-size: .75rem;
    }

/*--------------------
  #c01
  --------------------*/
    #c01 .block01 p{
        padding: 15px 0 0;
        font-size: .875rem;
    }
}

@media screen and (min-width: 681px){
    #side01 .box01 .side01_block02_box01_list{
        text-align: left;
    }
}

@media screen and (max-width: 680px){
/*--------------------
  #head02
  --------------------*/
    #head02{
        display: none !important;
    }
/*--------------------
  #head01
  --------------------*/
    #head01 .inner01 #ci01 .box01{
        padding: 50px 0 0;
        width: 80px;
    }
    #head01 .inner01 #ci01 .i01{
        text-align: center;
    }
    #head01 .inner01 #ci01 .i01 img{
        max-width: 29px;
        width: 100%;
        height: auto;
    }
    #head01 .inner01 #d01{
        padding: 6px 0 0;
    }
    #head01 .inner01 #d01 span{
        font-size: .5rem;
    }
    #head01 .inner01 #d01 .t01{
        padding: 0 0 0 6px;
    }
    #head01 .inner01 #d01 .t01 .sp img{
        width: 121px;
        height: auto;
    }
    #head01 .inner01 #d01 .t02{
        padding: 0 0 0 30px;
    }
    #head01 .inner01 #d01 .t02 .sp img{
        width: 124px;
        height: auto;
    }
    #head01 .inner02{
        position: relative;
        z-index: 2;
        height: 526px;
    }
    #head01 .inner02 .block01::after{
        content: ' ';
        position: absolute;
        z-index: 7;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 128px;
        background: url('../images/home/bg01_sp.png') bottom center no-repeat;
        -webkit-background-size: 680px 64px;
        background-size: 680px 64px;
    }
    #head01 .inner02 .block02{
        max-width: 526px;
    }
    #head01 .inner02 .block02 .ani01{
        position: relative;
        z-index: 4;
        content: ' ';
        margin: 0 auto;
        max-width: 982px;
        width: 100%;
        height: 526px;
        background: url('../images/home/ani01_sp.jpg') bottom center no-repeat;
        -webkit-background-size: 480px 526px;
        background-size: 480px 526px;
    }
    #head01 .inner02 .block02 .ani02{
        position: absolute;
        z-index: 5;
        top: 30px;
        left: 30%;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani03_sp.png') top center no-repeat;
        -webkit-background-size: 65%;
        background-size: 65%;
    }
    #head01 .inner02 .block02 .ani03{
        position: absolute;
        z-index: 6;
        top: 35px;
        right: 26%;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani02_sp.png') top center no-repeat;
        -webkit-background-size: 46%;
        background-size: 46%;
    }
    #gn01{
        display: none;
    }

/*--------------------
  main
  --------------------*/
    main > .inner01{
        position: relative;
        margin: 0 auto;
        padding: 0 0 40px;
        max-width: 480px;
    }

/*--------------------
  #m01
  --------------------*/
    #m01{
        text-align: left;
        padding-right: 0;
        width: auto;
        min-height: 0 !important;
    }

/*--------------------
  #c01
  --------------------*/
    #c01 .block01 h2{
        width: 27.5%;
        padding: 0 10px 0 0;
    }
    #c01 .block01 h2 img{
        width: 100%;
        height: auto;
    }
    #c01 .block01 p{
        padding: 20px 0 0;
        font-size: .75rem;
    }
    #c01 .block01 .l01{
        font-size: .75rem;
    }

/*--------------------
  #c02
  --------------------*/
    #c02{
        padding: 15px 0 0;
    }
    #c02 h2 img{
        width: 60px;
    }
    #c02 .block01 li{
        position: relative;
        font-size: .75rem;
    }
    #c02 .block01 li .t01{
        display: block;
        position: absolute;
        top: 5px;
        left: 0;
        float: left;
        width: 90px;
    }
    #c02 .block01 li .t02{
        display: block;
        padding-left: 90px;
    }

/*--------------------
  #c03
  --------------------*/
    #c03{
        padding: 20px 0 0;
    }
    #c03 h2 img{
        width: 86px;
    }

/*--------------------
  #side01
  --------------------*/
    #side01{
        position: inherit;
        top: auto;
        right: auto;
        width: auto;
        padding: 50px 0 0;
        font-size: .75rem;
        text-align: left;
    }
    #side01 .c01 .block01 li .t01{
        display: inline;
        padding-right: 1rem;
    }
    #side01 .c01 .block02{
        overflow: hidden;
    }
    #side01 .box01{
       text-align: center;
       width:70%;
       margin:0 auto;
    }
    #side01 .box01 .i01{
      
    }
    #side01 .box02 li{
   
    }
    #side01 .box03{
        text-align: center;
       width:70%;
       margin:0 auto;
    }
    #side01 .box03 .i01{
    }

    #foot01 .block02 li,
    #foot01 .block03 li{
        padding: .5rem 1.5rem 0 0;
    }

     #side01 .box02 li img{
        display: block;
        max-width: initial;
        width: 90%;
        height: auto;
        margin:0 auto;
    }
}

@media screen and (max-width: 480px){
    #head01 .inner01 #ci01 .box01{
        padding: 50px 0 0;
        width: 80px;
    }
    #head01 .inner01 #ci01 .i01{
        text-align: center;
    }
    #head01 .inner01 #ci01 .i01 img{
        max-width: 29px;
        width: 100%;
        height: auto;
    }
    #head01 .inner01 #d01{
        padding: 6px 0 0;
    }
    #head01 .inner01 #d01 span{
        font-size: .5rem;
    }
    #head01 .inner01 #d01 .t01{
        padding: 0 0 0 6px;
    }
    #head01 .inner01 #d01 .t01 .sp img{
        width: 121px;
        height: auto;
    }
    #head01 .inner01 #d01 .t02{
        padding: 0 0 0 30px;
    }
    #head01 .inner01 #d01 .t02 .sp img{
        width: 124px;
        height: auto;
    }
    #head01 .inner02{
        position: relative;
        z-index: 2;
        height: 480px;
    }
    #head01 .inner02 .block01::after{
        content: ' ';
        position: absolute;
        z-index: 7;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 128px;
        background: url('../images/home/bg01_sp.png') bottom center no-repeat;
        -webkit-background-size: 680px 64px;
        background-size: 680px 64px;
    }
    #head01 .inner02 .block02{
        max-width: 375px;
    }
    #head01 .inner02 .block02 .ani01{
        position: relative;
        z-index: 4;
        content: ' ';
        margin: 0 auto;
        max-width: 982px;
        width: 100%;
        height: 480px;
        background: url('../images/home/ani01_sp.jpg') bottom center no-repeat;
        -webkit-background-size: 385px 422px;
        background-size: 385px 422px;
    }
    #head01 .inner02 .block02 .ani02{
        position: absolute;
        z-index: 5;
        top: 50px;
        left: 12%;
        content: ' ';
        width: 500px;
        height: 572px;
        background: url('../images/home/ani03_sp.png') top center no-repeat;
        -webkit-background-size: 35%;
        background-size: 35%;
    }
    #head01 .inner02 .block02 .ani03{
        position: absolute;
        z-index: 6;
        top: 50px;
        right: 7.5%;
        content: ' ';
        width: 532px;
        height: 574px;
        background: url('../images/home/ani02_sp.png') top center no-repeat;
        -webkit-background-size: 28%;
        background-size: 28%;
    }

    main{
        padding: 15px 2% 0;
    }

/*--------------------
  #c01
  --------------------*/
    #c01 .block01 h2{
        width: 27.5%;
        padding: 0 10px 0 0;
    }
    #c01 .block01 h2 img{
        width: 100%;
        height: auto;
    }
    #c01 .block01 p{
        padding: 10px 0 0;
        font-size: .625rem;
    }
    #c01 .block01 .l01{
        font-size: .625rem;
    }

/*--------------------
  #side01
  --------------------*/
    #side01 .box01 .i02 .t01{
        display: inline;
    }
}