@charset "utf-8";

@media screen and ( max-width: 800px ) {
    #header:before{height: 75vw;}
    @keyframes hy{
      0%{ transform:rotate(0);}
      50%{ transform:rotate(0);width: 72%;height: 77vw;}
      50%{ transform:rotate(0);width: 72%;height: 77vw;}
      100%{ width: 75%;  }
    }


}
/* ==========================================================================
	main
========================================================================== */
#main {
    position: relative;
    margin-top: 120px;
    z-index:50;
}
#main .fadein {
    margin-left: 7.5vw;
    opacity:0;
	transform: translateX(50px);
	transition: .4s;
}

#main .fadein.move{
    opacity:100;    
	transform: translateX(0px);
}

#main .fadein img{
    
    display:inline-block;
    width: 178px;
    margin-right: 60px;
    vertical-align:middle;
    
}
#main .fadein span {
    display:inline-block;
    font-size: 16px;
    font-weight: bold;
    vertical-align:middle;
}


#main .kv_list{
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    margin:8.5714vw 0 9.64vw;
}
#main .kv {
    opacity:0;
	transform: translateY(50px);
	transition: .4s;
    width: 64.28vw;
    z-index:10;
}
#main .kv.move{
    opacity:100;    
	transform: translateY(0px);    
}



#main .kv img{
    position: relative;
    z-index:1;
}

#main .kv .icon {
    position: absolute;
    display: block;
    width: 18vw;
    right: -12.8vw;
    bottom: 1.78vw;
    z-index:4;
    -webkit-animation: m-scale 9s infinite ease-in-out;
    -ms-animation: m-scale 9s infinite ease-in-out;
    -o-animation: m-scale 9s infinite ease-in-out;
    animation: m-scale 9s infinite ease-in-out;
	}


@-moz-keyframes m-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-webkit-keyframes m-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}    
@-o-keyframes m-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-ms-keyframes m-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@keyframes m-scale{
  50% { transform: scale(0.8) rotate(90deg);}
}





#main .kv02_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 28.57vw;
}

#main .kv02{
    opacity:0;
	transform: translateY(50px);
	transition: .4s;
    
}
#main .kv02.move{
    opacity:100;    
	transform: translateY(0px);    

}

#main h3{
    position: relative;
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 65px;
    z-index:20;
    letter-spacing: 0.05em;
}
#main h3 span{
    font-size: 38px;
    font-weight: bold;
    color:#065f8e;
    letter-spacing: 0.05em;
}
#main p{
    position: relative;
    font-size: 16px;
    line-height: 38px;
    font-weight: bold;
    text-align: center;
    z-index:20;
}


#main a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 600px;
    height: 80px;
    text-align: center;
    z-index:10;
    margin:68px auto 0;
    border:3px solid #000;
    background:#fff;
    border-radius:5px;
}

#main a span{
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color:#252525;
	transition: .3s;
    
}
#main a span:before{
    content:"";
    display: block;
    width: 27px;
    height: 27px;
    position: absolute;
    right: -46px;
    top: -5px;
    background:url(../image/rent/link_icon.png);
    background-size:cover;
	transition: .3s;
}

#main a:hover {
    border-left-color: #f2ef5b;
    border-bottom-color: #f2ef5b;
    border-right-color: #044567;
    border-top-color: #044567;
    color: #065f8e;
}

#main a:hover span{
    color: #065f8e;
    
}

#main a:hover span:before{
	transform: translateY(-5px);    
}


#main .icon02 {
    position: absolute;
    display: block;
    width: 57.2vw;
    left: -22vw;
    bottom: -40.7vw;
    z-index:1;
    -webkit-animation: main_icon01 15s infinite ease-in-out;
    -ms-animation: main_icon01 15s infinite ease-in-out;
    -o-animation: main_icon01 15s infinite ease-in-out;
    animation: main_icon01 15s infinite ease-in-out;
	}
@-moz-keyframes main_icon01 {
  50% { transform: translate(50px,50px);}
}
@-webkit-keyframes main_icon01 {
  50% { transform: translate(50px,50px);}
}    
@-o-keyframes main_icon01 {
  50% { transform: translate(50px,50px);}
}
@-ms-keyframes main_icon01 {
  50% { transform: translate(50px,50px);}
}
@keyframes main_icon01{
  50% { transform: translate(50px,50px);}
}



@media screen and ( max-width: 800px ) {
    #main {
        margin-top: 55px;
        padding-bottom:0;
    }

    #main .fadein {
        margin-left: 4.65vw;
    }


    #main .fadein img{
        width: 112px;
        margin-right: 30px;
    }
    #main .fadein span {
        font-size: 12px;
    }


    #main .kv_list{
        display:block;
        margin:17.5vw 0 11.4vw;
    }
    #main .kv {
        width: 100%;
    }




    #main .kv .icon {
        display:none;
    }





    #main .kv02_wrap {display:none;}

    #main h3{
        font-size: 23px;
        line-height: 43px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    #main h3 span{
        font-size: 23px;
        line-height: 43px;
    }
    #main p{
        font-size: 14px;
        line-height: 33px;
        padding:0 10vw;
        box-sizing:border-box;
        text-align:left;
    }


    #main a{
        width: calc(100% - 20vw);
        height: 60px;
        margin:40px auto 0;
        border:2px solid #000;
    }

    #main a span{
        font-size: 15px;

    }
    #main a span:before{
        width: 16px;
        height: 16px;
        right: -25px;
        top: -1px;
    }


    #main .icon02 {
        width: 100vw;
        left: -53.75vw;
        bottom: -80.7vw;
        }
    @-moz-keyframes main_icon01 {
      50% { transform: translate(25px,25px);}
    }
    @-webkit-keyframes main_icon01 {
      50% { transform: translate(2px,25px);}
    }    
    @-o-keyframes main_icon01 {
      50% { transform: translate(25px,25px);}
    }
    @-ms-keyframes main_icon01 {
      50% { transform: translate(25px,25px);}
    }
    @keyframes main_icon01{
      50% { transform: translate(25px,25px);}
    }


}



/* ==========================================================================
	img_area
========================================================================== */

.img_area {
    position: relative;
    z-index:60;
    margin:10vw 0 11vw;
}

.img_area:before{
    content: "";
    display: block;
    position: absolute;
    width: 57.14vw;
    height: 42.85vw;
    top: 22.8vw;
    right: 0;
    border-radius: 60px 0 0 60px;
    background: #f2ef5b;
    z-index: 1;
    -webkit-animation: right-left 10s infinite;
    -ms-animation: right-left 10s infinite;
    -o-animation: right-left 10s infinite;
    animation: right-left 10s infinite;
}
@-moz-keyframes right-left {
  50% { transform: translate(50px,0 );}
}
@-webkit-keyframes right-left {
  50% { transform: translate(50px,0 );}
}    
@-o-keyframes right-left1 {
  50% { transform: translate(50px,0 );}
}
@-ms-keyframes right-left {
  50% { transform: translate(50px,0 );}
}
@keyframes right-left{
  50% { transform: translate(50px,0 );}
}


.img_area p{position: absolute;font-size: 13px;font-weight: bold;}

.img_area .img01 p,
.img_area .img02 p {
    text-align:right;
    bottom:-30px;
    width: 100%;
}

.img_area .img03 p,
.img_area .img04 p{
    top:0;
    left:-30px;    
}

.img_area .img05 p {
     text-align:left;  
    bottom:-30px;
}
.img_area .img01,
.img_area .img02,
.img_area .img03,
.img_area .img04,
.img_area .img05{
    opacity:0;
	transform: translateY(50px);
	transition: .4s
}
.img_area .img01.move,
.img_area .img02.move,
.img_area .img03.move,
.img_area .img04.move,
.img_area .img05.move{
    opacity:100;    
	transform: translateY(0px);    
}

.img_area .img01 {
    position: relative;
    z-index:10;
    width: 28.27vw;
    margin:0 0 9.2vw 4.28vw
}
.img_area .img02 {
    position: relative;
    z-index:10;
    width: 47.14vw;
    margin:0 0 13.57vw 4.28vw;
 }

.img_area .img03 {
    position: absolute;
    z-index: 10;
    width: 32.8vw;
    right: 0;
    bottom:4.28vw;
}
.img_area .img04 {
    position: absolute;
    z-index: 10;
    width: 35.71vw;
    top:8.57vw;
    right: 4.28vw;
    
}
.img_area .img05 {
    position: relative;
    z-index:10;
    width: 50vw;
    margin-left:7.14vw;    
}



.img_area .icon01{
    display: block;
    position: absolute;
    z-index:30;
    width: 17.14vw;
    top:0;
    right: -4.28vw;
    -webkit-animation: i-scale 9s infinite ease-in-out;
    -ms-animation: i-scale 9s infinite ease-in-out;
    -o-animation: i-scale 9s infinite ease-in-out;
    animation: i-scale 9s infinite ease-in-out;
	}

@-moz-keyframes i-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-webkit-keyframes i-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}    
@-o-keyframes i-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-ms-keyframes i-scale {
  50% { transform: scale(0.8) rotate(90deg);}
}
@keyframes i-scale{
  50% { transform: scale(0.8) rotate(90deg);}
}



.img_area .icon02{
    display: block;
    position: absolute;
    z-index:30;
    width: 28.57vw;
    bottom:24.14vw;
    left: -9.28vw;
    -webkit-animation: i-scale02 9s infinite ease-in-out;
    -ms-animation: i-scale02 9s infinite ease-in-out;
    -o-animation: i-scale02 9s infinite ease-in-out;
    animation: i-scale02 9s infinite ease-in-out;
	}

@-moz-keyframes i-scale02 {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-webkit-keyframes i-scale02 {
  50% { transform: scale(0.8) rotate(90deg);}
}    
@-o-keyframes i-scale02 {
  50% { transform: scale(0.8) rotate(90deg);}
}
@-ms-keyframes i-scale02 {
  50% { transform: scale(0.8) rotate(90deg);}
}
@keyframes i-scale02{
  50% { transform: scale(0.8) rotate(90deg);}
}





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


    .img_area {
        margin:22vw 0 16.8vw;
    }

    .img_area:before{
        width: 78.75vw;
        height: 150vw;
        top: 71.5vw;
        border-radius: 30px 0 0 30px;
    }
    @-moz-keyframes right-left {
      50% { transform: translate(25px,0 );}
    }
    @-webkit-keyframes right-left {
      50% { transform: translate(25px,0 );}
    }    
    @-o-keyframes right-left1 {
      50% { transform: translate(25px,0 );}
    }
    @-ms-keyframes right-left {
      50% { transform: translate(25px,0 );}
    }
    @keyframes right-left{
      50% { transform: translate(25px,0 );}
    }

    .img_area:after{
        content:"";
        display: block;
        position: absolute;
        z-index:1;
        width: 62.5vw;
        height: 75vw;
        left:0;
        bottom:22.5vw;
        border-radius: 0 30px 30px 0;
        background:#065f8e;
    -webkit-animation: left-right 9s infinite ease-in-out;
    -ms-animation: left-right 9s infinite ease-in-out;
    -o-animation: left-right 9s infinite ease-in-out;
    animation: left-right 9s infinite ease-in-out;
    }
    @-moz-keyframes left-right {
      50% { transform: translate(-25px,0 );}
    }
    @-webkit-keyframes left-right{
      50% { transform: translate(-25px,0 );}
    }    
    @-o-keyframes left-right{
      50% { transform: translate(-25px,0 );}
    }
    @-ms-keyframes left-right {
      50% { transform: translate(-25px,0 );}
    }
    @keyframes left-right{
      50% { transform: translate(-25px,0 );}
    }

    .img_area p{font-size: 10px;}

    .img_area .img_sp p,
    .img_area .img01 p,
    .img_area .img02 p {
        text-align:right;
        bottom:-19px;
        width: 100%;
    }

    .img_area .img03 p,
    .img_area .img04 p{
        top:0;
        left:-17px;    
    }

    .img_area .img05 p {
         text-align:left;  
        bottom:-19px;
    }
    .img_area .img_sp{
        opacity:0;
        transform: translateY(50px);
        transition: .4s
    }
    .img_area .img_sp.move{
        opacity:100;    
        transform: translateY(0px);    
    }

    .img_area .img_sp{
        width: 50vw;
        position: relative;
        z-index:10;
        left: 0;
        top: 0;        
    }
    .img_area .img01 {
        position: absolute;
        width: 41.3vw;
        margin:0;
        right: 0;
        top: 42.5vw;
    }
    .img_area .img02 {
        width: 82.5vw;
        margin:51.25vw 0 20vw;
     }

    .img_area .img03 {
        position: relative;
        width: 57.5vw;
        right:auto;
        left:9.75vw;
        bottom:auto;
    }
    .img_area .img04 {
        position: relative;
        width: 62.5vw;
        top:auto;
        right:auto;
        margin:10vw 0 10vw 37.5vw;

    }
    .img_area .img05 {
        position: relative;
        z-index:10;
        width: 87.5vw;
        margin-left:12.5vw;    
    }


    .img_area .icon01{display:none;}

    
    .img_area .icon02 {
    width: 32.5vw;
    top: 21.8vw;
    right: 24.3vw;
    bottom: auto;
    left: auto;
    }
}
/* ==========================================================================
	b_link_btn
========================================================================== */

.b_link_btn {
    display: block;
    position: relative;
    width: calc(100% - 14.28vw);
    margin:10.85vw auto 10vw;
    padding: 2.14vw;
    box-sizing:border-box;
    color:#252525;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow:hidden;
}

.b_link_btn:hover{
    color:#065f8e;
}
.b_link_btn:before{
    
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../image/rent/b_link_bg.jpg) center center;
    background-size: cover;
    transition: all .4s ease;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.b_link_btn:hover:before{
    transform:scale(1.1);
    
}
/*
.b_link_btn:hover{
    border-left-color: #f2ef5b;
    border-bottom-color: #f2ef5b;
    border-right-color: #044567;
    border-top-color: #044567;
    color: #065f8e;
}
*/


.b_link_btn div {
    position: relative;
    background:#fff;
    text-align: center;
    padding:40px 0;
    z-index:10;
}
.b_link_btn div:before{
    content:"";
    display: block;
    width: 118px;
    height: 79px;
    position: absolute;
    left: 0;
    top: 0;
    background:url(../image/rent/b_link_icon01.png);
    background-size:cover;    
}
.b_link_btn div:after{
    content:"";
    display: block;
    width: 168px;
    height: 123px;
    position: absolute;
    right: 0;
    bottom: 0;
    background:url(../image/rent/b_link_icon02.png);
    background-size:cover;    
}
.b_link_btn p {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    z-index:10;
}
.b_link_btn h3 {
    position: relative;
    display:inline-block;
    padding-right:20px;
    font-size: 26px;
    font-weight: bold;
    margin-top: 15px;
    z-index:10;
}

.b_link_btn h3:before{
    content:"";
    display: block;
    width: 27px;
    height: 27px;
    position: absolute;
    right: -14px;
    top: -1px;
    background:url(../image/rent/link_icon.png);
    background-size:cover;
	transition: .3s;
}

.b_link_btn:hover h3:before{
    top: -4px;
}

@media screen and ( max-width: 800px ) {
    
    .b_link_btn {
        width: calc(100% - 10vw);
        margin:0 auto 75px;
        padding: 5vw;
    }

    .b_link_btn div {
        padding:50px 0 55px;
        text-align: center;
    }
    .b_link_btn div:before{
        width: 108px;
        height: 84px;
        background-image:url(../image/rent/b_link_icon01_sp.png);
    }
    .b_link_btn div:after{
        width: 107px;
        height: 104px;
        background-image:url(../image/rent/b_link_icon02_sp.png);
    }
    .b_link_btn p {
        position: relative;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
        z-index:0;
    }
    
    .b_link_btn p:before{
        content:"";
        display: block;
        width: 100px;
        height: 2px;
        background:#f2ef5b;
        position: absolute;
        left: 0;
        right: 0;
        margin:auto;
        bottom:-15px;
    }
    .b_link_btn h3 {
        padding-right:0px;
        font-size: 24px;
        line-height: 37px;
        margin-top: 23px;
        text-align:left;
    }

    .b_link_btn h3:before{
        width: 20px;
        height: 20px;
        top: auto;
        right: 1px;
        bottom: 8px;

    }

    .b_link_btn:hover h3:before{
        top: auto;
    }

}