@charset "utf-8";
/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/

#main{overflow: hidden;box-sizing: border-box;}
#main .mainVisual{
    padding: 100px 0 250px;
    position: relative;
    background: url("../images/index/mv_bg.png")no-repeat top center;
    background-size: cover;
    }

#main .mv_txt{
    width: 96%;
    max-width: 1700px;
    position: absolute;
    margin: auto;
    top: 46%;
    right: 0;
    left: 0;
    z-index:3;
    overflow: hidden;
    }
#main .mv_txt h1{
    width: 48%;
    float: right;
    text-align: right;
    }
/*#main .top_mv_img{position: relative;z-index: 2;height: 860px;}*/
#main .top_mv_img{position: relative;z-index: 2;height: 1000px;}
.clip-me{clip-path: url(#clipshape);}
.clip-me2{clip-path: url(#clipshape2);}
.clip-me3{clip-path: url(#clipshape3);}
.clip-me4{clip-path: url(#clipshape4);}
.clip-me5{clip-path: url(#clipshape5);}
.clip-me6{clip-path: url(#clipshape6);}
.top_mv_img01{
    position: absolute;
    top: 9%;
    left: 19%;
    width: 38%;
    text-align: center;
    }
.top_mv_img02{
    position: absolute;
    top: 6%;
    left: -2%;
    width: 22%;
    text-align: center;
    }
.top_mv_img03{
    position: absolute;
    top: 18%;
    right: 24%;
    width: 18%;
    }
.top_mv_img04{
    position: absolute;
    top: 5%;
    right: -10%;
    width: 32%;
    }
.top_mv_img05{
    position: absolute;
    bottom: 0;
    left: -2%;
    width: 30%;
    }
.top_mv_img06{
    position: absolute;
    bottom: 10%;
    left: 30%;
    width: 18%;
    }

#main .mainVisual .flex{
    position: absolute;
    z-index: 10;
    /*top: 65%;*/
    bottom: 18%;
    left: 1%;
    width: 100%;
    max-width: 580px;
    }
#main .mainVisual .flex li{width: 49%;}
#main .mainVisual .flex li a{
    display: block;
    width: 100%;
    background: #3fa387;
    color: #fff;
    padding: 35px 5px;
    box-sizing: border-box;
    border-radius: 30px;
    text-align: center;
    min-height: 100px;
    border:2px solid #3fa387;
    transition: 0.3s;
    }
#main .mainVisual li:nth-child(1) a{padding: 20px 5px;}
#main .mainVisual li:nth-child(1) span{
    display: block;
    font-size: 1.3rem;
    line-height: 130%;
    letter-spacing: 4%;
    }
#main .mainVisual li:nth-child(1) span.en{font-size: 2.9rem;letter-spacing: 0;}
#main .mainVisual li:nth-child(2){
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 4%;
    }
#main .mainVisual li:nth-child(2) span{
    background: url("../images/common/icon_mail.png")no-repeat center left;
    background-size: 31px;
    padding: 0 0 0 40px;
    }
#main .mainVisual .flex li:nth-child(2) a:hover{
    border:2px solid #3fa387;
    background: #fff;
    color: #3fa387;
    }
#main .mainVisual li:nth-child(2) a:hover span{
    background: url("../images/common/icon_mail_on.png")no-repeat center left;
    background-size: 31px;
    }
#main .mv_img{
    position: absolute;
    z-index: 1;
    transform-origin: center bottom;
    /*animation: yurayura 1.5s linear infinite;*/
    }
#main .mv_img01{
    top: 8%;
    right: 0%;
    width: 102px;
    height: 102px;
    animation: dec-anim_2 .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
#main .mv_img02{
    top: 8%;
    left: -3%;
    width: 117px;
    height: 117px;
    animation: dec-anim_3 .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
#main .mv_img03{
    top: 48%;
    left: 22%;
    width: 261px;
    height: 260px;
    animation: dec-anim_2 .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
#main .mv_img04{
    bottom: 28%;
    right: 2%;
    width: 108px;
    height: 108px;
    animation: dec-anim_3 .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
#main .mv_img_r{
    position: absolute;
    z-index: 1;
    transform-origin: center bottom;
    /*animation: yurayura2 1.5s linear infinite;*/
    }
#main .mv_img05{
    top: 38%;
    left: -2%;
    width: 104px;
    height: 92px;
    animation: dec-anim .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
#main .mv_img06{
    top: 38%;
    right: 0;
    width: 160px;
    height: 125px;
    animation: dec-anim .8s steps(2) infinite alternate-reverse;
    aspect-ratio: 82/83;
    }
/*@keyframes yurayura {
  0% , 100%{transform: rotate(-10deg);}
  50%{transform: rotate(10deg);}
}
@keyframes yurayura2 {
  0% , 100%{transform: rotate(10deg);}
  50%{transform: rotate(-10deg);}
}*/

@-webkit-keyframes dec-anim {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  to {
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg)
  }
}
@keyframes dec-anim {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  to {
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg)
  }
}
@-webkit-keyframes dec-anim_2 {
  0% {
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  to {
    -webkit-transform:scale(1.3);
    transform:scale(1.3)
  }
}
@keyframes dec-anim_2 {
  0% {
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  to {
    -webkit-transform:scale(1.3);
    transform:scale(1.3)
  }
}
@-webkit-keyframes dec-anim_3 {
  0% {
    -webkit-transform:scale(1.3);
    transform:scale(1.3)
  }
  to {
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}
@keyframes dec-anim_3 {
  0% {
    -webkit-transform:scale(1.3);
    transform:scale(1.3)
  }
  to {
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}

@media all and (max-width: 1900px) {#main .top_mv_img{height: 1000px;}}
@media all and (max-width: 1600px) {#main .top_mv_img{height: 920px;}}
@media all and (max-width: 1400px) {#main .top_mv_img{height: 850px;}}
@media all and (max-width: 1200px) {#main .top_mv_img{height: 750px;}}
@media all and (max-width: 896px) {
#main .mainVisual{padding: 50px 0 20px;}
#main .mv_txt{top: 58%;}
#main .top_mv_img{height: 550px;}
#main .mainVisual .flex{display: none;}   
    
#main .mv_img01{
    top: 8%;
    right: 10%;
    width: 60px;
    height: 60px;
    }
#main .mv_img02{
    width: 67px;
    height: 67px;
    }
#main .mv_img03{
    width: 100px;
    height: 100px;
    }
#main .mv_img04{
    bottom: 28%;
    right: 2%;
    width: 68px;
    height: 68px;
    }
#main .mv_img05{
    top: 35%;
    width: 64px;
    height: 52px;
    }
#main .mv_img06{
    top: 38%;
    right: 0;
    width: 100px;
    height: 65px;
    }  
}
@media all and (max-width:650px) {
#main .top_mv_img{height: 420px;}   
}
@media all and (max-width: 540px) {
 #main .mainVisual{
    background: url("../images/index/mv_bgsp.png")no-repeat top center;
    background-size: 100%;
    padding: 80px 0 20px;
    }
#main .mv_txt{top: 14%;right: 5%;}
#main .mv_txt h1{width: 25%;}
#main .top_mv_img{height: 760px;}
.top_mv_img01{
    top: 22%;
    left: -10%;
    width: 70%;
    }
.top_mv_img02{
    top: 1%;
    left: -10%;
    width: 40%;
    }
.top_mv_img03{
    max-width: 130px;
    top: auto;
    bottom: 22%;
    right: 40%;
    width: 35%;
    }
.top_mv_img04{
    top: auto;
    bottom: 1%;
    right:auto;
    left: -10%;
    width: 50%;
    }
.top_mv_img05{
    bottom: 5%;
    left: auto;
    right: -13%;
    width: 52%;
    }
.top_mv_img06{
    bottom: auto;
    top: 10%;
    left: 40%;
    width: 25%;
    }  
    
    
#main .mv_img01{
    top: 10%;
    right: 45%;
    }
#main .mv_img02{display: none;}
#main .mv_img03{
    top: 58%;
    left: 10%;
    }
#main .mv_img04{
    bottom: 18%;
    right: 2%;
    }
#main .mv_img05{
    top: 30%;
    }
#main .mv_img06{
    top: 50%;
    right: -30px;
    }  
    
} 


/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main p{
    font-size: 1.7rem;
    line-height: 200%;
    letter-spacing:5%;
    font-weight: 500;
    font-family:"Zen Maru Gothic", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    }

#main .side_nav{
    position: fixed;
    z-index: 13;
    bottom: 1%;
    right: 1%;
    transition: 0.3s;
    }
#main .side_nav li{margin-bottom: 10px;}
#main .side_nav li.mail{overflow: hidden;}
#main .side_nav li.mail a{
    display: block;
    background: url("../images/common/icon_mail.png")no-repeat center /42px , #3fa387;
    margin: 0 0 0 auto;
    width: 95px;
    height: 92px;
    border: 2px solid #3fa387;
    padding-top: 30px;
    text-align: center;
    border-radius:30px;
    box-sizing: border-box;
    transition: 0.3s;
    }
#main .side_nav li.mail a:hover{
    background: url("../images/common/icon_mail_on.png")no-repeat center /42px , #fff;
    border: 2px solid #3fa387;
    }
#main .side_nav li.tel{
    text-align: center;
    box-sizing: border-box;
    }
#main .side_nav li.tel label{
    background: #3fa387;
    border: 2px solid #3fa387;
    border-radius:30px;
    display: block;
    height: 92px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
    }
#main .side_nav li.tel label:hover{
    background: #fff;
    border: 2px solid #3fa387;
    }
#main .side_nav .btn {
    position: relative;
    width: 52px;
    height: 48px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    }
#main .side_nav .btn img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    display: block;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }
#main .side_nav label:hover .btn img:nth-of-type(2) {opacity: 0;}
#main .side_nav p{
    display:none;
    color: #fff;
    transition: 0.3s;
    }
#main .side_nav label:hover p{color: #3fa387;}
#main .side_nav input[type="checkbox"]:checked{}
#main .side_nav input[type="checkbox"]:checked + p{display:inline-block;padding-left: 10px;}
#main .side_nav input{display: none;}
#main .side_nav p span{
    display: block;
    color: #fff;
    font-size: 1.3rem;
    line-height: 130%;
    letter-spacing: 4%;
    }
#main .side_nav p span.en{
    font-size: 2.8rem;
    letter-spacing: 0;
    }
#main .side_nav label:hover p span{color: #3fa387;}

.ttl-01{font-feature-settings: "palt";}


@media all and (max-width: 1200px) {}

@media all and (max-width: 896px) {
#main p{
    font-size: 1.6rem;
    line-height: 1.8;
    }
#main .side_nav{display: none;}
}
@media all and (max-width: 540px) {
#main p{
    font-size: 1.4rem;
    line-height: 1.6;
    }  
    
}

/* greeting */
#main .greeting{
    padding: 180px 0 100px;
    margin-top: -200px;
    position: relative;
    z-index: 2;
    background: url("../images/index/greeting_img.png")no-repeat top right/95% ,url("../images/index/greeting_bg.png")no-repeat top center;
    box-sizing: border-box;
    }
#main .greeting .inner{
    width: 96%;
    margin: auto;
    padding-left: 50px;
    box-sizing: border-box;
}
#main .greeting h2{
    font-size: 5.0rem;
    line-height:160%;
    letter-spacing: 5%;
    font-weight: 500;
    margin-bottom: 60px;
    }
#main .greeting p{
    display: block;
    margin-bottom: 40px;
    }
@media all and (max-width: 1200px) {
#main .greeting{background: url("../images/index/greeting_img.png")no-repeat top right/75% ,url("../images/index/greeting_bg.png")no-repeat top center;}   
}
@media all and (max-width: 896px) {
#main .greeting{
    padding: 0 0 50px;
    margin-top: 0;
    background: url("../images/index/greeting_img.png")no-repeat top center ,url("../images/index/greeting_bg.png")no-repeat center center;
    background-size: 100%;
    }
#main .greeting .inner{
    padding-left: 0;
    }
#main .greeting h2{
    font-size: 4.0rem;
    line-height:160%;
    margin-bottom: 40px;
    padding-top: 300px;
    }
#main .greeting p{margin-bottom: 20px;}
    #main .greeting p br{display: none;}
}

@media all and (max-width: 540px) {
#main .greeting{
    padding: 0 0 40px;
    }
#main .greeting h2{
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    padding-top: 40%;
    }
#main .greeting p{
    margin-bottom: 10px;
    } 
    
}

/* about */
#main .about{padding: 0;}
#main .about ul{
    max-width: 1680px;
    width: 98%;
    margin: 80px auto;
    box-sizing: border-box;
    }
#main .about li{width: 46%;margin: 0 4% 0 0;}
#main .about ul:nth-child(2){justify-content: flex-end;}
#main .about ul:nth-child(2) li{margin: 0 0 0 4%;text-align: right;}
#main .about li img{border-radius: 30px;}
#main .about li a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.3s;
    }
#main .about li a .ttl{
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 5%;
    }
#main .about li a .ttl h3{
    position: relative;
    display: inline-block;
    font-weight: 700;
    background: #fff5eb;
    padding: 7px 30px 17px 55px;
    border-radius:0 0 30px 0;
    }
#main .about li a .ttl h3::before,
#main .about li a .ttl h3::after{
    position: absolute;
    content: "";
    background: url("../images/index/subtract01.png")no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    }
#main .about li a .ttl h3::before{
    bottom: -30px;
    left: 0;
    }
#main .about li a .ttl h3::after{
    top: 0;
    right: -29px;
    }
#main .about li a .ttl h3 span{position: relative;}
#main .about li a .ttl h3 span::before{
    position: absolute;
    content: "";
    top: -16px;
    left: -55px;
    transform: rotate(0deg);
    transition: 0.3s;
    }
#main .about ul:nth-child(1) li:nth-child(1) a .ttl h3 span::before{
    background: url("../images/common/ttl_ic01.svg")no-repeat;
    width: 60px;
    height: 47px;
    }
#main .about ul:nth-child(1) li:nth-child(2) a .ttl h3 span::before{
    background: url("../images/common/ttl_ic02.svg")no-repeat;
    width: 35px;
    height: 36px;
    top: -5px;
    }
#main .about ul:nth-child(2) li:nth-child(1) a .ttl h3 span::before{
    background: url("../images/common/ttl_ic07.svg")no-repeat;
    width: 39px;
    height: 39px;
    top: -5px;
    }
#main .about ul:nth-child(2) li:nth-child(2) a .ttl h3 span::before{
    background: url("../images/common/ttl_ic05.svg")no-repeat;
    width: 49px;
    height: 47px;
    left: -55px;
    }
#main .about li a:hover .ttl h3 span::before{transform: rotate(18deg);}

#main .about li a .arw{
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 5%;
    }
#main .about li a .arw .inr{
    position: relative;
    display: inline-block;
    background: #fff5eb;
    padding: 20px 5px 20px 20px;
    border-radius:30px 0 0 0;
    }
#main .about li a .arw .inr::before,
#main .about li a .arw .inr::after{
    position: absolute;
    content: "";
    background: url("../images/index/subtract02.png")no-repeat;
    background-size: 100%;
    width: 30px;
    height: 29px;
    }
#main .about li a .arw .inr::before{
    bottom: 0;
    left: -29px;
    }
#main .about li a .arw .inr::after{
    top: -29px;
    right: 0;
    }
#main .about li a .arw .inr span{
    display: block;
    padding-right: 24px;
    box-sizing: border-box;
    background: url("../images/common/icon_arrow3.png")no-repeat 96% center;
    transition: 0.3s;
    }
#main .about li a:hover .arw .inr span{background: url("../images/common/icon_arrow3.png")no-repeat 100% center;}
@media all and (max-width: 896px) {
#main .about ul{margin: 40px auto;}
#main .about li{margin: 2%}
#main .about ul:nth-child(2) li{margin:2%;}
#main .about li img{border-radius: 20px;}
#main .about li a .ttl{font-size: 1.6rem;}   
#main .about li a .ttl h3{
    padding: 7px 30px 15px 55px;
    border-radius:0 0 20px 0;
    } 
#main .about li a .ttl h3::before,
#main .about li a .ttl h3::after{
    width: 20px;
    height: 20px;
    }
#main .about li a .ttl h3::before{bottom: -20px;}
#main .about li a .ttl h3::after{right: -20px;}
#main .about li a .arw{font-size: 1.5rem;}
#main .about li a .arw .inr{
    padding: 12px 5px 12px 20px;
    border-radius:20px 0 0 0;
    }
#main .about li a .arw .inr::before,
#main .about li a .arw .inr::after{
    width: 20px;
    height: 19px;
    }
#main .about li a .arw .inr::before{left: -19px;}
#main .about li a .arw .inr::after{top: -19px;}
}
@media all and (max-width: 540px) {
#main .about ul{margin: 0 auto 0;}
#main .about li{width: 96%;margin: 40px 2% 0;}
#main .about ul:nth-child(2) li{margin:40px 2% 0;}  
#main .about li img{border-radius: 10px;}
#main .about li a .ttl{font-size: 1.7rem;}
#main .about li a .ttl h3{border-radius:0 0 10px 0;} 
#main .about li a .ttl h3::before,
#main .about li a .ttl h3::after{
    width: 10px;
    height: 10px;
    }
#main .about li a .ttl h3::before{bottom: -10px;}
#main .about li a .ttl h3::after{right: -10px;}
#main .about li a .arw{font-size: 1.5rem;}
#main .about li a .arw .inr{
    border-radius:10px 0 0 0;
    }
#main .about li a .arw .inr::before,
#main .about li a .arw .inr::after{
    width: 10px;
    height: 9px;
    }
#main .about li a .arw .inr::before{left: -9px;}
#main .about li a .arw .inr::after{top: -9px;}
}

/* guide */
#main .guide{
    padding: 180px 0 250px;
    background:url("../images/index/guide_img.png")no-repeat top center , url("../images/index/guide_bg.png")no-repeat top center;
    }
#main .guide .inner{
    width: 50%;
    margin: 0 0 0 auto;
    }
#main .guide h2{
    background: url("../images/index/guide_ttl.png")no-repeat top center;
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: 5%;
    text-align: center;
    padding: 127px 0 0 0;
    margin-bottom: 35px;
    box-sizing: border-box;
    }
#main .guide p{text-align: center;}
#main .guide ul{
    max-width: 450px;
    margin:80px auto 0;
    }
#main .guide li{margin-bottom: 20px;}
#main .guide li.comlink{margin-left: auto;margin-right: auto;}
#main .guide li.comlink a{
    background: #6ABC78;
    border: 2px solid #6ABC78;
    box-sizing: border-box;
    color: #fff;
    transition: 0.3s;
    }
#main .guide li:nth-child(2).comlink a{background: #efab18;border-color:#efab18 }
#main .guide li:nth-child(3).comlink a{background: #f89abc;border-color:#f89abc}
#main .guide li:nth-child(4).comlink a{background: #cba0ef;border-color:#cba0ef}
#main .guide li.comlink a span{background: url("../images/common/icon_arrow2.png")no-repeat right center;}



@media all and (min-width: 641px) {
	#main .guide li.comlink a:hover{
    background: #fff;
    color: #6ABC78;
    }
	#main .guide li:nth-child(2).comlink a:hover{color: #efab18;}
	#main .guide li:nth-child(3).comlink a:hover{color: #f89abc;}
	#main .guide li:nth-child(4).comlink a:hover{color: #cba0ef;}
	#main .guide li.comlink a:hover span{background: url("../images/common/icon_arrow6.png")no-repeat right center;}
	#main .guide li:nth-child(2).comlink a:hover span{
		background: url("../images/common/icon_arrow4.png")no-repeat right center;}
	#main .guide li:nth-child(3).comlink a:hover span{
		background: url("../images/common/icon_arrow7.png")no-repeat right center;}
	#main .guide li:nth-child(4).comlink a:hover span{
		background: url("../images/common/icon_arrow8.png")no-repeat right center;}
}



@media all and (max-width: 896px) {
#main .guide{
    padding: 180px 0 80px;
    background:url("../images/index/guide_img.png")no-repeat top center , url("../images/index/guide_bg.png")no-repeat center;
    background-size: 100%;
    }
#main .guide .inner{
    width: 50%;
    padding-right: 2%;
    box-sizing: border-box;
    }
#main .guide h2{
    background: url("../images/index/guide_ttl.png")no-repeat top center;
    font-size: 3.2rem;
    }
#main .guide p{text-align: left;}
#main .guide ul{
    margin:20px auto 0;
    }
#main .guide li{margin-bottom: 10px;}
}
@media all and (max-width: 540px) {
#main .guide{
    padding: 40px 0;
    background:url("../images/index/guide_bg.png")no-repeat top center;
    background-size: 100%;
    }
#main .guide .inner{
    width: 96%;
    padding: 0;
    margin: 0 auto;
    }
#main .guide h2{
    background: url("../images/index/guide_ttl.png")no-repeat top center;
    background-size: 180px;
    font-size: 2.5rem;
    padding: 80px 0 0 0;
    margin-bottom: 25px;
    }
    #main .guide p br{display: none;}
#main .guide ul{max-width: 100%;}
    #main .guide .comlink{width: 100%;max-width: 100%;}
}



/* bus */
#main .bus{
    padding: 100px 0;
    }
#main .bus .inner{
    overflow: hidden;
    width: 100%;
    max-width: 1800px;
    margin: 0 0 auto auto;
    padding-left: 100px;
    box-sizing: border-box;
    }
#main .bus h2{
    float: left;
    width: 20%;
    max-width: 170px;
    background: #7bb859;
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 105%;
    letter-spacing: 5%;
    text-align: center;
    -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    padding: 70px 60px;
    border-radius: 30px 0 0 30px;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    }
#main .bus h2::after{
    position: absolute;
    content: "";
    background: url("../images/common/subtract02.png")no-repeat;
    width: 30px;
    height: 30px;
    bottom: -30px;
    right: -3px;
}
#main .bus h2 span{
    background: url("../images/common/icon_bas.svg")no-repeat top center;
    padding: 38px 35px 0;
    }
#main .bus .content{
    width: calc( 100% - 170px);
    float: right;
    max-width: 100%;
    min-height: 600px;
    background: url("../images/index/bu_risu.png")no-repeat 10% bottom, #7bb859;
    padding: 70px 50px;
    box-sizing: border-box;
    border-radius:0 0 0 30px;
    }
#main .bus .txt{width: 45%;}
#main .bus p{
    display: block;
    margin-bottom: 30px;
    color: #fff;
    }
#main .bus figure{
    padding: 0;
    margin: 0;
    width: 50%;
    }
#main .bus figure img{width: 100%;}
@media all and (max-width: 896px) {
#main .bus{
    padding: 60px 0;
    }
#main .bus .inner{
    padding-left: 50px;
    }
#main .bus h2{
    width: 100px;
    max-width: 100px;
    font-size:3.2rem;
    padding: 40px 35px;
    border-radius: 20px 0 0 20px;
    }
#main .bus h2::after{
    background: url("../images/common/subtract02.png")no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    bottom: -20px;
    right: 0;
}
#main .bus h2 span{
    background: url("../images/common/icon_bas.svg")no-repeat top center;
    background-size: 50px;
    padding: 38px 15px 0;
    }
#main .bus .content{
    width: calc(100% - 100px);
    max-width: 100%;
    min-height: 450px;
    background: url("../images/index/bu_risu.png")no-repeat 80% bottom, #7bb859;
    padding: 40px 30px;
    border-radius:0 0 0 20px;
    }
#main .bus p{margin-bottom: 20px;}
    #main .bus p br{display: none;}
    
    
}
@media all and (max-width: 540px) {
#main .bus{
    padding: 20px 0 50px;
    }
#main .bus .inner{
    padding-left: 20px;
    }
#main .bus h2{
    float: none;
    width: 100%;
    max-width: 100%;
    font-size: 2.5rem;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    padding: 70px 20px 0;
    border-radius: 10px 0 0 0;
    }
#main .bus h2::after{
    display: none;
    }
#main .bus h2 span{
    padding: 28px 0 0;
    }
#main .bus .content{
    width: 100%;
    float: none;
    max-width: 100%;
    min-height: inherit;
    background: url("../images/index/bu_risu.png")no-repeat 95% bottom, #7bb859;
    background-size: 150px;
    padding: 30px 30px 40px;
    border-radius:0 0 0 10px;
    }
#main .bus .txt{width: 100%;}
#main .bus p{margin-bottom: 10px;}
#main .bus figure{width: 100%;padding-top: 20px;}
    
}


/* news */
#main .news{
    padding: 20px 0 100px;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    }
#main .news h2{
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: 5%;
    background: url("../images/common/icon_news.svg")no-repeat center left;
    background-size: 40px;
    padding: 5px 0 5px 45px;
    }
#main .news .link a{
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 130%;
    border-bottom: 2px dashed #333;
    padding: 10px 0;
    transition: 0.3s;
    }
#main .news .link a span{
    background: url("../images/common/icon_arrow3.png")no-repeat right center;
    padding-right: 25px;
    transition: 0.3s;
    }
#main .news .link a:hover{
    color: #68b5c5;
    border-color: #68b5c5;
    }
#main .news .link a:hover span{
    background: url("../images/common/icon_arrow5.png")no-repeat right center;
    }

#main .news ul{
    margin-top: 30px;
    position: relative;
    z-index: 3;
    }
#main .news li{
    background: #fff;
    padding: 50px 60px;
    margin-bottom: 10px;
    border-radius: 30px;
    box-sizing: border-box;
    }
#main .news li .inner{overflow: hidden;}
#main .news li .date{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0;
    color: #E0BD00;
    }
#main .news li h3{
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 180%;
    letter-spacing: 5%;
    margin: 10px 0;
    }
#main .news li figure{
    float: right;
    width: 35%;
    padding: 0;
    margin: 0 0 0 15px;
    }
#main .news li .btn{padding: 5px 0;margin-top: 10px;}
#main .news li .btn a{
    background: #E0BD00;
    border: 2px solid #E0BD00;
    padding: 5px 30px;
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    line-height:180%;
    letter-spacing: 5%;
    transition: 0.3s;
    box-sizing: border-box;
    }
#main .news li .btn a span{
    background: url("../images/common/icon_arrow2.png")no-repeat right 7px;
    background-size: 6px;
    transition: 0.3s;
    padding: 0 15px 0 0;
    }
#main .news li .btn a:hover{
    background: #fff;
    color: #E0BD00;
    }
#main .news li .btn a:hover span{
    background: url("../images/common/icon_arrow4.png")no-repeat right 7px;
    background-size: 6px;
    }
#main .news .news_img{
    position: absolute;
    z-index: 2;
    }

#main .news .news_img01{
    animation: fluffy 3s infinite;
    width: 83px;
    height: 49px;
    top: 30%;
    right: 5%;
    }
#main .news .news_img02{
    animation: fluffy2 3s infinite;
    width: 98px;
    height: 50px;
    top: 25%;
    left: 6%;
    }
#main .news .news_img03{
    animation: fluffy2 3s infinite;
    width: 98px;
    height: 58px;
    top: 30%;
    left: 1%;
    }
#main .news .news_img04{
    animation: fluffy2 3s infinite;
    width: 38px;
    height: 36px;
    top: 40%;
    right: 2%;
    }
#main .news .news_img05{
    animation: fluffy2 3s infinite;
    width: 27px;
    height: 30px;
    top: 45%;
    right: 1%;
    }
#main .news .news_img06{
    animation: fluffy 3s infinite;
    width: 42px;
    height: 44px;
    bottom: 40%;
    left: 1%;
    }

@keyframes fluffy {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-30px);}
}
@keyframes fluffy2 {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(30px);}
}

@media all and (max-width: 896px) {
#main .news h2{
    font-size: 3.5rem;
    background: url("../images/common/icon_news.svg")no-repeat center left;
    background-size: 32px;
    padding: 5px 0 5px 38px;
    }
#main .news .link a{
    font-size: 1.8rem;
    }

#main .news ul{
    margin-top: 30px;
    position: relative;
    z-index: 3;
    }
#main .news li{
    padding: 40px 40px;
    border-radius: 20px;
    }
#main .news li .date{font-size: 1.8rem;}
#main .news .news_img{display: none;}
}

@media all and (max-width: 540px) {
#main .news{
    padding: 20px 0 0;
    }
#main .news h2{
    font-size: 2.5rem;
    background: url("../images/common/icon_news.svg")no-repeat center left;
    background-size: 25px;
    padding: 5px 0 5px 30px;
    }
#main .news .link a{
    font-size: 1.6rem;
    padding: 5px 0;
    }
#main .news .link a span{
    background: url("../images/common/icon_arrow3.png")no-repeat right center;
    background-size: 6px;
    padding-right: 15px;
    }
#main .news .link a:hover span{
    background: url("../images/common/icon_arrow5.png")no-repeat right center;
    background-size: 6px;
    }
#main .news ul{
    margin-top: 20px;
    }
#main .news li{
    padding: 25px 25px;
    margin-bottom: 10px;
    border-radius: 10px;
    }
#main .news li .date{
    font-size: 1.4rem;
    }
#main .news li h3{
    font-size: 1.7rem;
    line-height: 160%;
    margin: 10px 0;
    }
#main .news li figure{
    float: none;
    width: 100%;
    margin: 0 0 15px 0;
    }
    
    
}





#main .top_mv_img01 img {
	object-fit:cover;
	width: 100%;
	max-width: 536px;
	aspect-ratio: 536 / 500;
}
#main .top_mv_img02 img {
	object-fit:cover;
	width: 100%;
	max-width: 468px;
	aspect-ratio: 468 / 436;
}
#main .top_mv_img03 img {
	object-fit:cover;
	width: 100%;
	max-width: 315px;
	aspect-ratio: 315 / 309;
}
#main .top_mv_img04 img {
	object-fit:cover;
	width: 100%;
	max-width: 668px;
	aspect-ratio: 668 / 495;
}
#main .top_mv_img05 img {
	object-fit:cover;
	width: 100%;
	max-width: 579px;
	aspect-ratio: 579 / 460;
}
#main .top_mv_img06 img {
	object-fit:cover;
	width: 100%;
	max-width: 421px;
	aspect-ratio: 421 / 341;
}

.distlink a,
.distlink a span {
	display: block;
}
.distlink a span {
	background: url(../images/common/icon_arrow2.png) no-repeat center right 2px !important;
}
.news li::after {
	display: block;
	height: 1px;
	width: 100%;
	clear: both;
	content: ""
}
.news figure {
	border-radius: 20px;
	overflow: hidden;
}
.news figure img {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*aspect-ratio: 831 / 510;*/
}