@charset "UTF-8";
/* CSS Document */

/*--- loading ---*/
#loading {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
	z-index: 9999;
	pointer-events: none;
}

/*--- mv ---*/
#mv {
    background: url("../../../takumaenergy/images/top/bg_01.jpg") left top / 100px 50% repeat-x, url("../../../takumaenergy/images/top/bg_02.jpg") left bottom / 100px 50% repeat-x;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
}
#mv .mvInr{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 86%;
    margin: 0 auto;
    max-width: 1350px;
}
#mv .title{
    margin: 0 auto;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #09c;
    font-size: 75px;
    line-height: 1.25;
}
#mv .title > span{
    display: block;
    margin: 0 0.25em;
}
#mv .title > span > span{
    display: inline-block;
    opacity: 0;
    animation: mountain .5s linear forwards;
}
@keyframes letter{
    0%{ transform:translate(0,100%); }
    100%{ transform:translate(0,0); }
}

#mv .scroll{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 0;
}
#mv .scroll a{
    position: relative;
    display: table;
}
#mv .scroll a::after{
    width: 1px;
    height: 70px;
    margin-left: 50%;
    background: #0099cc;
    content: "";
    display: block;
    animation: scroll 1.5s linear infinite;
}

@keyframes scroll{
    0%{transform:scale(1, 0);transform-origin:left top}
    49%{transform:scale(1, 1);transform-origin:left top}
    50%{transform:scale(1, 1);transform-origin:left bottom}
    100%{transform:scale(1, 0);transform-origin:left bottom}
}

/*--- mv-illust ---*/

#mv .image{
    width: 100%;
    padding-top: 29.8%;
    position: relative;
}
#mv .parts{
    position: absolute;
    left: 0;
    top: 0;
    line-height: 0;
}
#mv .clip-path{
    transition: .5s;
    transition-delay: .5s;
}
#mv .image .group01{
    width: 32.5%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#mv .image .group02{
    width: 13.2%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 0 0 34%;
}
#mv .image .group03{
    width: 51.3%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 0 0 48.6%;
}

#mv .parts.ground01{
    width: 92%;
    margin: 76.8% 0 0 8%;
    z-index: 1;
}
#mv .parts.ground02{
    width: 100%;
    margin: 189% 0 0 0%;
    z-index: 1;
}
#mv .parts.ground03{
    width: 100%;
    margin: 48.7% 0 0 0%;
    z-index: 1;
}

#mv .parts.mountain{
    z-index: 0;
}
#mv .parts.mountain01{
    width: 34.6%;
    margin: 59.5% 0 0 12%;
}
#mv .parts.mountain02{
    width: 57.4%;
    margin: 38.25% 0 0 19.7%;
}
#mv .parts.mountain03{
    width: 43.8%;
    margin: 26.1% 0 0 45.7%;
}
#mv .parts.mountain04{
    width: 44.91%;
    margin: 12.60% 0 0 15.25%;
}
#mv .parts.mountain05{
    width: 45.58%;
    margin: 26.11% 0 0 43.85%;
}

#mv .parts.tree{
    z-index: 2;
}
#mv .parts.tree01{
    width: 20%;
    margin: 79% 0 0 64%;
}
#mv .parts.tree02{
    width: 11.6%;
    margin: 47% 0 0 1%;
}
#mv .parts.tree03{
    width: 17.43%;
    margin: 42.79% 0 0 27.02%;
}
#mv .parts.tree04{
    width: 14.04%;
    margin: 48.30% 0 0 42.26%;
}
#mv .parts.tree05{
    width: 6.19%;
    margin: 46.79% 0 0 68.98%;
}
#mv .parts.tree06{
    width: 12.45%;
    margin: 50.34% 0 0 70.19%;
}
#mv .parts.tree07{
    width: 5.66%;
    margin: 40.15% 0 0 83.85%;
}

#mv .parts.buil{
    z-index: 1;
}
#mv .parts.building01{
    width: 47.68%;
    margin: 35.76% 0 0 43.74%;
}
#mv .parts.building02{
    width: 22.29%;
    margin: 39.93% 0 0 23.96%;
}
#mv .parts.building03{
    width: 12.87%;
    margin: 55.54% 0 0 12.40%;
}
#mv .parts.building04{
    width: 38.50%;
    margin: 74.02% 0 0 28.49%;
}
#mv .parts.building05{
    width: 55.39%;
    margin: 89.52% 0 0 23.05%;
    z-index: 0;
}
#mv .parts.building06{
    width: 28.83%;
    margin: 18.43% 0 0 4.91%;
}
#mv .parts.building07{
    width: 33.06%;
    margin: 19.25% 0 0 37.81%;
}
#mv .parts.building08{
    width: 8.68%;
    margin: 31.32% 0 0 71.92%;
}
#mv .parts.building09{
    width: 6.79%;
    margin: 18.43% 0 0 78.19%;
}
#mv .parts.building10{
    width: 12.75%;
    margin: 27.17% 0 0 82.72%;
}

#mv .parts.sun{
    width: 49.82%;
    margin: 0 0 0 5.13%;
    z-index: 0;
}
#mv .parts.cloud01{
    width: 20.98%;
    margin: 15.97% 0 0 42.43%;
    z-index: 1;
}
#mv .parts.cloud02{
    width: 20.98%;
    margin: 30.27% 0 0 0;
    z-index: 1;
}

#mv .parts.animal,
#mv .parts.car{
    z-index: 2;
}
#mv .parts.animal01{
    width: 6.79%;
    margin: 47.85% 0 0 57.06%;
}
#mv .parts.animal02{
    width: 7.77%;
    margin: 51.25% 0 0 64.60%;
}

#mv .parts.car01{
    width: 10.34%;
    margin: 49.74% 0 0 13.74%;
}
#mv .parts.car02{
    width: 11.55%;
    margin: 47.70% 0 0 26.57%;
}

#mv .parts.arrow{
    margin-top: 12.56%;
}
#mv .parts.arrow01{
    width: 9.34%;
    margin-left: 28.11%;
}
#mv .parts.arrow02{
    width: 11.71%;
    margin-left: 43.74%;
}
#mv .parts.arrow03{
    width: 13.11%;
    margin-left: 61.85%;
}
#mv .parts.arrow04{
    width: 9.73%;
    margin-left: 78.52%;
}

#mv .parts.thunder{
    width: 2.13%;
    margin-top: 10.85%;
}
#mv .parts.thunder01{
    margin-left: 31.99%;
}
#mv .parts.thunder02{
    margin-left: 48.24%;
}
#mv .parts.thunder03{
    margin-left: 66.85%;
}
#mv .parts.thunder04{
    margin-left: 82.36%;
}

#mv .parts.light{
    width: 18.72%;
    margin-top: 12.15%;
}
#mv .parts.light01{
    margin-left: 10.34%;
}
#mv .parts.light02{
    margin-left: 43.70%;
}
#mv .parts.light03{
    margin-left: 72.15%;
}


#mv .popup,
#mv .mountain,
#mv .tree,
#mv .buil,
#mv .animal,
#mv .car,
#mv .sun,
#mv .cloud,
#mv .thunder,
#mv .parts.light{
    opacity: 0;
}
#mv.in .popup{
    animation: popup .5s ease forwards;
}
@keyframes popup{
    0%{ transform: translate(0,10%) rotate(0deg); opacity: 0; }
    40%{  transform: translate(0,-5%) rotate(5deg);opacity: 1;}
    100%{  transform: translate(0,0%) rotate(0deg);opacity: 1;}
}
#mv.in .mountain{
    animation: mountain .5s ease forwards;
}
@keyframes mountain{
    0%{ transform: translate(0,30%) rotate(0deg); opacity: 0; }
    40%{  transform: translate(0,-5%) rotate(-5deg);opacity: 1;}
    100%{  transform: translate(0,0%) rotate(0deg);opacity: 1;}
}
#mv.in .buil{
    animation: mountain .7s ease forwards;
    animation-delay: 1.6s;
}
@keyframes buil{
    0%{ transform: translate(0,50%); opacity: 0; }
    100%{  transform: translate(0,0); opacity: 1;}
}
#mv.in .sun{
    animation: sun 1.4s ease forwards;
}
@keyframes sun{
    0%{ transform: translate(20%,80%) rotate(45deg); opacity: 0; }
    100%{  transform: translate(0,0) rotate(0deg);opacity: 1;}
}
#mv.in .car{
    animation: cloud01 .5s ease forwards;
}
#mv.in .cloud01{
    animation: cloud01 .5s ease forwards;
}
@keyframes cloud01{
    0%{ transform: translate(20%,0); opacity: 0; }
    100%{  transform: translate(0,0); opacity: 1;}
}
#mv.in .cloud02{
    animation: cloud02 .5s ease forwards;
}
@keyframes cloud02{
    0%{ transform: translate(-20%,0); opacity: 0; }
    100%{  transform: translate(0,0); opacity: 1;}
}

#mv.in .cloud01 img,
#mv.in .cloud02 img{
    animation: fuwafuwa 3s ease infinite;
}
#mv.in .cloud02 img{
    animation-delay: .5s;
}
@keyframes fuwafuwa {
	from, to { transform: translate(0,20%); }
	50% { transform: translate(0,-20%); }
}

#mv.in .thunder{
    animation: thunder .5s ease forwards;
}
@keyframes thunder{
    0%{ transform: translate(0,50%); opacity: 0; }
    100%{  transform: translate(0,0); opacity: 1;}
}
#mv.in .thunder img{
    animation: buruburu 1s ease infinite;
}
@keyframes buruburu {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(-5deg); }
	10% { transform: rotate(5deg); }
	15% { transform: rotate(-5deg); }
	20% { transform: rotate(5deg); }
	25% { transform: rotate(-5deg); }
	30% { transform: rotate(0deg); }
}

#mv.in .light{
    animation: light 1s ease forwards;
}
@keyframes light{
    0%{ opacity: 0; }
    100%{  opacity: 1;}
}


#mv.in .mountain01, #mv.in .mountain04{ animation-delay: 1s;}
#mv.in .mountain02, #mv.in .mountain05{ animation-delay: 1.1s;}
#mv.in .mountain03{ animation-delay: 1.2s;}

#mv.in .tree{ animation-delay: 1.4s;}

#mv.in .building01{ animation-delay: 1.6s;}
#mv.in .building02{ animation-delay: 1.7s;}
#mv.in .building03{ animation-delay: 1.8s;}
#mv.in .building04{ animation-delay: 1.9s;}
#mv.in .building05{ animation-delay: 2s;}
#mv.in .building06{ animation-delay: 2.1s;}
#mv.in .building07{ animation-delay: 2.2s;}
#mv.in .building08{ animation-delay: 2.3s;}
#mv.in .building09{ animation-delay: 2.4s;}
#mv.in .building10{ animation-delay: 2.5s;}

#mv.in .animal{ animation-delay: 2.5s;}
#mv.in .car{ animation-delay: 2.7s;}

#mv.in .sun{ animation-delay: 2.4s;}

#mv.in .cloud01,
#mv.in .cloud02{ animation-delay: 3s;}

#mv.in .arrow01{ transition-delay: 3s;}
#mv.in .arrow02{ transition-delay: 3.1s;}
#mv.in .arrow03{ transition-delay: 3.2s;}
#mv.in .arrow04{ transition-delay: 3.3s;}

#mv.in .thunder{ animation-delay: 3.4s;}

#mv.in .light{ animation-delay: 3.6s;}

/*--- common ---*/
#news .head01,
#service .head01,
#about .head01{
    padding-top: 86px;
}

#news .head01::before,
#service .head01::before,
#about .head01::before{
    width: 70px;
    height: 70px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

#news .head01::before{ background: url("../../../takumaenergy/images/top/icon_news.png") center center / contain no-repeat;}
#service .head01::before{ background: url("../../../takumaenergy/images/top/icon_service.png") center center / contain no-repeat;}
#about .head01::before{ background: url("../../../takumaenergy/images/top/icon_company.png") center center / contain no-repeat;}

/*--- concept ---*/
#concept {
    text-align: center;
}
#concept .message{
    font-size: 18px;
    line-height: 2.5;
}

/*--- news ---*/
#news .head01{
    position: relative;
    z-index: 1;
    margin-bottom: -121px;
}
#news .newsListContainer{
    background: #fff;
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
    z-index: 0;
    position: relative;
    padding: 165px 75px 75px;
}

/*--- service ---*/
#service .serviceList{
    width: 85%;
    max-width: 1200px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
}
#service .serviceList li{
    width: 31.25%;
    text-align: center;
    color: #000;
}
#service .serviceList li .num{
    width: 100px;
    margin: 0 auto -50px;
    position: relative;
    z-index: 1;
}
#service .serviceList li .inr{
    background: #fff;
    box-shadow: 8px 8px 10px rgba(0,0,0,0.15);
    padding: 100px 50px 0px;
    z-index: 0;
    position: relative;
    height: 100%;
}
#service .serviceList li .title{
    font-size: 22px;
    margin: 30px 0;
    line-height: 1.5;
    color: #0099cc;
    font-weight: bold;
}

#service .achievement{
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}
#service .achievement .text{
    text-align: center;
    margin-bottom: 50px;
}
#service .achievement .achievementList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#service .achievement .achievementList li{
    width: 48%;
    margin-bottom: 80px;
}
#service .achievement .achievementList li a{
    display: block;
    cursor: pointer;
}
#service .achievement .achievementList li .image{
    position: relative;
    z-index: 0;
    overflow: hidden;
}
#service .achievement .achievementList li .image img{
    transition: .5s;
}
#service .achievement .achievementList li a:hover .image img{
    transform: scale(1.1);
}
#service .achievement .achievementList li .title{
    background: #fff;
    padding: 20px 30px;
    margin: -40px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
    position: relative;
    z-index: 1;
}
#service .achievement .achievementList li .title .titleInr{
    color: #000;
    font-weight: bold;
    font-size: 22px;
}


/*--- about ---*/
#about .aboutList{
    width: 85%;
    max-width: 900px;
    margin: 0 auto 100px;
}
#about .ppBox{
    width: 85%;
    max-width: 900px;
    margin: 0 auto 30px;
    border-bottom: 1px solid #0099cc;
    padding: 0 0 20px 0;
}
#about .ppBtn{
    color: #0099cc;
    position: relative;
    font-size: 18px;
    cursor: pointer;
}
#about .ppBtn::after{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 30%;
    border-right: 1px solid #0099cc;
    border-bottom: 1px solid #0099cc;
    transform: rotate(45deg);
    transition: .5s;
}
#about .ppBtn.active::after{
    transform: rotate(-135deg);
}

#about .ppInr{
    background: #fff;
    padding: 75px;
    margin-top: 50px;
}
#about .ppInr .item{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e8eded;
}
#about .ppInr .item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
#about .ppInr .title{
    color: #0099cc;
    margin-bottom: 20px;
    font-size: 18px;
}
#about .ppInr .item .text{
    margin-bottom: 20px;
}
#about .ppInr .item ol.number02 li{
    position: relative;
    padding-left: 35px;
    counter-increment: item;
}
#about .ppInr .item ol.number02 li + li{
    margin-top: 10px;
}
#about .ppInr .item ol.number02 li::before{
    position: absolute;
    content: "※" counter(item);
    top: 0;
    left: 0;
}

/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/



/*----------------------------------------------------
	☆UNDER 1000px
----------------------------------------------------*/

@media screen and (max-width:1000px) {
  
  #mv .title{
    font-size: 8vw;
  }
  
}

/*----------------------------------------------------
	☆UNDER 480px
----------------------------------------------------*/

@media screen and (max-width:480px) {
    #mv{
        height: auto;
    }
    #mv .title {
        margin: 0 auto 10%;
        width: 100%;
        justify-content: center;
        transform: translateX(0);
        align-items: center;
        font-size: 27px;
        line-height: 1.4;
    }
    #mv .mvInr {
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0,0);
        padding: 24% 0 100px 0;
    }    
    #mv .scroll a::after {
        width: 1px;
        height: 40px;
    }
    
    /*--- mv illustration ---*/
    #mv .image {
        padding-top: 118.5%;
    }
    #mv .image .group01 {
        width: 69.8%;
        margin-left: 14.6%;
    }
    #mv .image .group02 {
        display: none;
    }
    #mv .image .group03 {
        width: 100%;
        margin: 66% 0 0 0;
    }
    
    #mv .parts.arrow{
        margin-top: 65.7%;
        transition: 1s;
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        transition-delay: 3s;
    }
    #mv.in .parts.arrow{
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    #mv .parts.arrow-sp01{
        width: 6.24%;
        margin-left: 23.80%;
    }
    #mv .parts.arrow-sp02{
        width: 1.08%;
        margin-left: 51.82%;
    }
    #mv .parts.arrow-sp03{
        width: 6.24%;
        margin-left: 73.25%;
    }
    
    #mv .parts.thunder {
        width: 4%;
        margin-top: 66.4%;
    }
    #mv .parts.thunder01{
        display: none;
    }
    #mv .parts.thunder02{
        margin-left: 20%;
    }
    #mv .parts.thunder03{
        margin-left: 50.5%;
    }
    #mv .parts.thunder04{
        margin-left: 80%;
    }
    
    /*--- common ---*/
    #news .head01::before, 
    #service .head01::before, 
    #about .head01::before {
        width: 50px;
        height: 50px;
    }
    #news .head01,
    #service .head01,
    #about .head01 {
        padding-top: 56px;
    }
    
    /*--- concept ---*/
    #concept .message {
        font-size: 14px;
        line-height: 2;
        text-align: left;
        width: 85%;
        margin: 0 auto;
    }
    
    /*--- news ---*/
    #news .head01 {
        margin-bottom: -77px;
    }
    #news .newsListContainer {
        padding: 95px 30px 30px;
    }
    
    /*--- service ---*/
    #service .serviceList{
        flex-direction: column;
        margin-bottom: 30px;
    }
    #service .serviceList li{
        width: 100%;
        margin-bottom: 30px;
    }
    #service .serviceList li .num {
        width: 70px;
        margin: 0 auto -35px;
    }
    #service .serviceList li .inr {
        padding: 50px 50px 30px;
    }
    #service .serviceList li .title {
        font-size: 18px;
        margin: 20px 0;
    }    
    #service .achievement .text {
        margin-bottom: 30px;
    }
    #service .achievement .achievementList li {
        width: 100%;
        margin-bottom: 20px;
    }
    #service .achievement .achievementList li .title {
        padding: 15px 20px;
        margin-top: -34px;
    }
    #service .achievement .achievementList li .title .titleInr {
        font-size: 16px;
    }
    
    /*--- about ---*/
    #about .aboutList {
        margin: 0 auto 60px;
    }
    
    #about .ppBtn {
        font-size: 16px;
    }
    #about .ppInr {
        padding: 30px;
        margin-top: 30px;
    }
    #about .ppInr .title {
        font-size: 16px;
    }
}