@charset "utf-8";
/* Anime */
.anime{background: url("../img/anime/bg.jpg") no-repeat top center/cover; padding: 5rem 0;}
.anime-tit{text-align: center; margin: 0 0 4rem; font-size: 4rem; line-height: 1.5; letter-spacing: 0.1em;}
.anime-wrap{margin: 0 auto; position: relative; width: min(92vw,660px); height: min(92vw,660px); line-height: 1;}

@media screen and (min-width: 1200px){
    .anime{background-attachment: fixed;}    
}

@media screen and (max-width: 767px){
    .anime{padding: 4rem 0;}
    .anime-tit{font-size: 5.6vw; letter-spacing: 0.1em; margin: 0 0 3rem;}
}

.scence1 img,
.scence2 img{width: 100%;}

.scence1{position: absolute; width: 80%; left: 10%; top: 9.1%; display: none;}
.scence1:after{content: ''; display: block; padding-bottom: 102.23%;}
.scence1 figure{position: absolute; transform-origin: center; will-change: transform; transition: 1.5s ease 1s;}
.scence1 figure.worldwide{top: 16.07%; left: 42.18%; width: 18.1%;}
.scence1 figure.finance{top: 26.13%; left: 62.73%; width: 11.05%;}
.scence1 figure.support{top: 16.07%; left: 68.72%; width: 13.04%;}
.scence1 figure.renewable{top: 23.88%; left: 85.43%; width: 12.89%;}
.scence1 figure.enviroment{top: 32.88%; left: 73.32%; width: 9.21%;}
.scence1 figure.logistics{top: 45.95%; left: 69.64%; width: 15.65%;}
.scence1 figure.residence{top: 37.69%; left: 53.07%; width: 17.64%;}
.scence1 figure.house{top: 33.19%; left: 16.26%; width: 7.52%;}
.scence1 figure.childcare{top: 42.5%; left: 18.87%; width: 6.6%;}
.scence1 figure.energy{top: 46.25%; left: 11.05%; width: 9.36%;}
.scence1 figure.diversity{top: 53.01%; left: 19.48%; width: 19.79%; transition: .5s ease 1s !important;}
.scence1 figure.investment{top: 54.51%; left: 69.94%; width: 19.94%;}
.scence1 figure.construction{top: 66.37%; left: 42.8%; width: 24.39%;}
.scence1 figure.intermediary{top: 37.69%; left: 27.15%; width: 24.39%;}
.scence1 figure.disaster{top: 19.37%; left: 23.32%; width: 16.88%; transition: .5s ease 1s !important;}
.scence1 figure.materials{top: 76.57%; left: 32.82%; width: 21.32%; transition: .5s ease 1s !important;}
.scence1 figure.materials2{top: 70.72%; left: 57.06%; width: 27.15%; transition: .5s ease 1s !important;}
.scence1 figure.tree{top: 53%; left: 42.33%; width: 6.75%; transition: .5s ease 1s !important;}
.scence1 figure.txt{top: 0; left: 0; width: 100%; transition: 1s ease 0s !important;}

.scence1.is-show figure{z-index: 10; cursor: pointer; pointer-events: none;}
.scence1.is-show figure.worldwide{transform: scale(0.6) translate3d(-9%,-242%,0);}
.scence1.is-show figure.finance{transform: scale(0.7) translate3d(100%,-336%,0);}
.scence1.is-show figure.support{transform: scale(0.7) translate3d(220%,60%,0);}
.scence1.is-show figure.renewable{transform: scale(0.45) translate3d(184%,81%,0);}
.scence1.is-show figure.enviroment{transform: scale(0.93) translate3d(202%,374%,0);}
.scence1.is-show figure.logistics{transform: scale(0.69) translate3d(-14%,815%,0);}
.scence1.is-show figure.residence{transform: scale(0.31) translate3d(-265%,631%,0);}
.scence1.is-show figure.house{transform: scale(0.69) translate3d(645%,1367%,0);}
.scence1.is-show figure.childcare{transform: scale(1.2) translate3d(21%,631%,0);}
.scence1.is-show figure.energy{transform: scale(0.67) translate3d(-180%,200%,0);}
.scence1.is-show figure.diversity{opacity: 0; z-index: 0;}
.scence1.is-show figure.investment{transform: scale(0.56) translate3d(-734%,-126%,0);}
.scence1.is-show figure.construction{transform: scale(0.6) translate3d(-344%,-515%,0);}
.scence1.is-show figure.intermediary{transform: scale(0.58) translate3d(-109%,-488%,0);}
.scence1.is-show figure.disaster{opacity: 0; z-index: 0;}
.scence1.is-show figure.materials{opacity: 0; z-index: 0;}
.scence1.is-show figure.materials2{opacity: 0; z-index: 0;}
.scence1.is-show figure.tree{opacity: 0; z-index: 0;}
.scence1.is-show figure.txt{opacity: 0; z-index: 0;}

.scence2{position: absolute; top: 0; left: 0;  width: 100%; height: 100%; display: none;}
.scence2 > div{position: absolute; width: 16.44%; border-radius: 100%; overflow: hidden; background: #fff; transform: scale(0); transition: .5s; border: 2px solid #fff;}
.scence2 > div:after{content: ''; display: block; padding-bottom: 100%;}
.scence2.is-show > div{transform: scale(1); cursor: pointer; z-index: 3;}
.scence2.is-show > div.is-hover,
.scence2.is-show > div:hover{border: 2px solid #81BDD4;}

.scence2 .circle01{top: 0; left: 41.78%;}
.scence2 .circle02{top: 5.64%; left: 62.6%;}
.scence2 .circle03{top: 20.86%; left: 78%;}
.scence2 .circle04{top: 41.73%; left: 83.56%;}
.scence2 .circle05{top: 62.6%; left: 78%;}
.scence2 .circle06{top: 77.82%; left: 62.6%;}
.scence2 .circle07{top: 83.56%; left: 41.78%;}
.scence2 .circle08{top: 77.82%; left: 20.86%;}
.scence2 .circle09{top: 62.6%; left: 5.64%;}
.scence2 .circle10{top: 41.73%; left: 0%;}
.scence2 .circle11{top: 20.86%; left: 5.64%;}
.scence2 .circle12{top: 5.64%; left: 20.86%;}

.scence3{position: absolute; top: 20.5%; left: 20.5%; width: 59%; border-radius: 100%; background: #fff; overflow: hidden; transform: scale(0); transition: 1s; display: none;}
.scence3:after{content: ''; display: block; padding-bottom: 100%;}
.scence3.is-show{transform: scale(1);}

/* Anime Popup */
.popup{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 19% 0 0 0; background: #fff; border-radius: 100%; text-align: center; display: none; z-index: 1;}
.popup-head{display: flex; justify-content: center; align-items: center; line-height: 1; height: 40px;}
.popup-illus{margin-right: 0.5em;}
.popup-tit{font-size: 28px; line-height: 1; font-weight: bold; letter-spacing: 0.1em;}
.popup-txt{font-size: 18px; line-height: 1.625; margin: 1.5em 0;}
.popup-img{line-height: 1;}

#popup00{padding: 0; z-index: 0;}
.popup00-inner{display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 100%; height: 100%;}
.popup00-img{margin: 0 0 20px;}
.popup00-txt{font-size: 2rem; line-height: 1.7; font-weight: bold; width: 100%;}

#popup07 .popup-illus{display: flex; justify-content: center; align-items: flex-end; align-content: flex-end;}
#popup07 .popup-illus img:nth-of-type(1){margin-right: 5px;}
#popup07 .popup-illus img:nth-of-type(2){height: 27px;}

@media screen and (max-width: 767px){
    .popup-head{height: 6vw;}
    .popup-tit{font-size: 4vw;}    
    .popup-txt{font-size: 3.1vw; margin: 1em 0;}    
    .popup-illus img{height: 6vw; width: auto;}
    .popup-img{padding: 0 15%;}
    
    .popup00-img{margin: 0 auto 2vw; width: 18.2vw;}
    .popup00-txt{font-size: 2.7vw;}
    
    #popup07 .popup-illus img:nth-of-type(1){margin-right: 0.6vw;}
    #popup07 .popup-illus img:nth-of-type(2){height: 4.5vw;}
}

/* Vision */
.vision{position: relative; z-index: 1; text-align: center; margin: 0 0 20rem; padding: 8rem 0 0 0;}
.vision-label{position: absolute; left: -1.4rem; top: 8rem; width: 71.5rem; line-height: 1; z-index: -1;}
.vision-titEn{margin: 12rem auto 8rem; line-height: 1; max-width: 77.5rem; width: 90%; overflow: hidden;}
.vision-titEn span{display: block; transform: translateY(100%); transition: 1s; will-change: transform; transform-origin: center;}
.vision-titEn.is-view span{transform: translateY(0%);}
.vision-tit{font-size: 3.2rem; line-height: 1.8; letter-spacing: 0.2em; margin: 0 0 5rem; font-weight: bold;}
.vision-desc{line-height: 2;}

@media screen and (max-width: 767px){
    .vision{padding: 3rem 0 0 0; margin: 0 0 8rem;}
    .vision-label{width: 90vw; left: -2vw; top: 3rem;}
    .vision-titEn{margin: 15vw auto 10vw;}
    .vision-tit{font-size: min(4.4vw,2.2rem); margin: 0 0 7.5vw 0.5em; letter-spacing: 0em;}
    .vision-desc{font-size: min(4vw,1.6rem);}
}
    
/* Issues */
.issues{margin: 0 auto 20rem; text-align: center; max-width: 1200px; width: calc(100% - 40px);}
.issues-tit{font-size: 3.2rem; line-height: 1.5; margin: 0 0 2rem; letter-spacing: 0.2em; background: url("../img/future/bg-paint.svg") no-repeat center center/66.9rem auto; padding: 0.7em 0;}

.issues-box{position: relative; margin: 0 auto 20rem; max-width: 1000px; width: 100%;}
.issues-chart{width: 66.87%; margin: 0 auto;}
.issues-list{font-size: min(1.45vw,1.6rem); font-weight: bold; line-height: 2; position: absolute; text-align: left;}
.issues-txt{margin: 0 0 9rem;}
.issues-txt2{margin: 0 0 5rem;}
.issues-txt2 h3{display: inline; line-height: 2.1; font-weight: bold; transition: background 1s ease .3s, opacity 1s ease .5s; opacity: 0;
background-image: linear-gradient(to right, #FAF399 0, #FAF399 100%); background-position: 0 0; background-size: 0 100%; background-repeat: no-repeat;}
.issues-txt2.is-view h3{background-size: 100% 100%; opacity: 1;}

.issues-blue{color: #12A6C8; top: 0; left: 0;}
.issues-pink{color: #DC6487; top: 0; right: 0;}
.issues-yellow{color: #F1B51C; top: 79%; right: 1em;}
.issues-green{color: #8ABF6D; top: 79%; left: 0;}

@media screen and (max-width: 767px){
    .issues{margin: 0 auto 8rem;}
    .issues-tit{font-size: min(4.9vw,2.7rem); margin: 0 -20px 2rem; background-size: 20em auto; padding: 1em 0; letter-spacing: 0.1em;}
    .issues-txt{margin: 0 0 3rem;}
    .issues-txt2{margin: 0 0 1rem;}    
    .issues-box{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 5rem;}
    .issues-chart{width: 90%; margin: 0 auto 3rem;}
    .issues-list{position: static; font-size: min(2.8vw,1.4rem); width: 48%;}
    .issues-list:nth-of-type(1),
    .issues-list:nth-of-type(2){margin: 0 0 1.5rem;}
    .issues-img{margin: 0 -10px;}
}

/* Group */
.group{position: relative; z-index: 1; margin: 0 0 7rem;}
.group-label{position: absolute; top: 0; left: -0.4rem; width: 71.8rem; line-height: 1; z-index: -1;}
.group-tit{font-size: 4rem; line-height: 1.2; text-align: center; padding: 6.5rem 0; letter-spacing: 0.1em;}
.group-desc{text-align: center; margin: 0 0 14rem; font-weight: bold;}

@media screen and (max-width: 767px){
    .group{margin: 0 0 4rem;}
    .group-label{width: 90vw; left: -1vw;}
    .group-tit{font-size: 2.7rem; padding: 7vw 0;}
    .group-desc{margin: 0 0 6rem; font-size: min(4.2rem,1.6rem);}
}

/* Group Nav */
.group-nav{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 50px;}
.group-nav li{width: 24.5%; background: #D1D3D4; position: relative; text-align: center; font-size: 2.6rem; line-height: 1.5; height: 7rem; border-radius: 10px 10px 0 0; font-weight: bold; cursor: pointer; color: #000; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; flex-wrap: wrap;}
.group-nav li:after{content: ''; position: absolute; bottom: 0; left: -100vw; height: 3px; width: 300vw; display: block; cursor: auto;}
.group-nav li:hover{z-index: 10;}
.group-nav li.is-active{z-index: 8;}

.group-nav li#nav01:hover,
.group-nav li#nav01:hover:after,
.group-nav li#nav01.is-active,
.group-nav li#nav01.is-active:after{background: #FABFB7;}

.group-nav li#nav02:hover,
.group-nav li#nav02:hover:after,
.group-nav li#nav02.is-active,
.group-nav li#nav02.is-active:after{background: #ADCDEC;}

.group-nav li#nav03:hover,
.group-nav li#nav03:hover:after,
.group-nav li#nav03.is-active,
.group-nav li#nav03.is-active:after{background: #FFE3A6;}

.group-nav li#nav04:hover,
.group-nav li#nav04:hover:after,
.group-nav li#nav04.is-active,
.group-nav li#nav04.is-active:after{background: #CFE5AE;}

@media screen and (max-width: 767px){
    .group-nav{margin: 0 -10px 4rem;}
    .group-nav li{font-size: min(3.7vw,2rem); height: min(15vw,9rem); width: 24%; border-radius: 6px 6px 0 0;}    
}

/* Group Tab */
.group-tab{display: none;}
.group-list{display: flex; flex-wrap: wrap;}
.group-item{min-height: 35rem; padding: 1rem 2rem 8rem; margin: 0 3.5% 3.5% 0; border: 3px solid #BCBEC0; border-radius: 0 4rem 0 4rem; position: relative;}
.group-item .name{font-size: 1.4rem; line-height: 1.3; margin: 0 -0.8rem; font-weight: bold;}
.group-item .img-logo{display: flex; justify-content: center; align-items: center; width: 100%; height: 10rem;}
.group-item .desc{font-size: 1.5rem; line-height: 1.7; font-weight: bold;}

.group-item .btn{width: auto; max-width: 300px; margin: 0 auto; height: 4.7rem; display: flex; justify-content: center; align-items: center; align-content: center; position: absolute; bottom: 2.2rem; left: 2rem; right: 2rem; border-radius: 4.7rem; background: #DA1F3D; color: #fff; font-size: 1.8rem; line-height: 1.4; border: 2px solid #DA1F3D;}
.group-item .btn i{width: 1.3rem; height: 1.3rem; background: #fff; margin-left: 0.5rem; position: relative; top: -1px;
mask: url("../img/common/ic-exlink.svg") no-repeat top left/100% 100%; -webkit-mask: url("../img/common/ic-exlink.svg") no-repeat top left/100% 100%;}
.group-item .btn:after{content: ''; width: 1.5rem; height: 2.3rem; background: #ffffff; display: block; margin-left: 1.5rem;
mask: url("../img/common/ic-arrow.svg") no-repeat top center/100% auto; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat top center/100% auto;}
.group-item .btn:hover{color: #DA1F3D; background: #fff;}
.group-item .btn:hover i{background: #DA1F3D;}
.group-item .btn:hover:after{animation: animeArrow .5s; background: #DA1F3D;}

.group-item.item-malay .name{letter-spacing: -0.04em;}

.group .logo-daito-kentaku img{width: 14.2rem;}
.group .logo-daito-j img{width: 14.2rem;}
.group .logo-daito-steel img{width: 18rem;}
.group .logo-shima-ken img{width: 16.2rem;}
.group .logo-daito-canada img{width: 36.5rem;}
.group .logo-kentaku-partners img{width: 27rem;}
.group .logo-kentaku-leasing img{width: 25.6rem;}
.group .logo-house-com img{width: 15.2rem;}
.group .logo-house-leave img{width: 18rem;}
.group .logo-kimaroom img{width: 15.5rem;}
.group .logo-lbw-cn img{width: 37.1rem;}
.group .logo-invalance img{width: 22rem;}
.group .logo-kentaku-as img{width: 39.5rem;}
.group .logo-ascot img{width: 28rem;}
.group .logo-gas-pal img{width: 10.5rem;}
.group .logo-care-partner img{width: 18rem;}
.group .logo-daito-copo img{width: 25.2rem;}
.group .logo-daito-finance img{width: 22.9rem;}
.group .logo-daito-mirai img{width: 21.8rem;}
.group .logo-justco img{width: 23.5rem;}
.group .logo-house-payment img{width: 19.2rem;}
.group .logo-hg-ssi img{width: 30rem;}
.group .logo-daito-bio img{width: 23.8rem;}
.group .logo-dtc img{width: 36.9rem;}
.group .logo-daito-usa img{width: 57.4rem;}
.group .logo-east-asia img{width: 38.7rem;}
.group .logo-daito-malay img{width: 59.4rem;}

@media screen and (min-width: 768px){
    .group-item{width: 31.5%; margin: 0 2.75% 2.75% 0;}
    .group-item:nth-of-type(3n){margin-right: 0;}
}

@media screen and (max-width: 767px){
    .group-item{width: 48.5%; margin: 0 3% 3% 0; border: 2px solid #BCBEC0; border-radius: 0 3rem 0 3rem; min-height: 30rem;}
    .group-item:nth-of-type(2n){margin-right: 0;}
    .group-item .name{font-size: 1.2rem;}
    .group-item .img-logo{height: 8rem;}
    .group-item .img-logo img{transform: scale(0.8);}
    .group-item .desc{font-size: 1.4rem;}
    .group-item .btn{font-size: 1.6rem; height: 4.5rem;}
    .group-item .btn:after{width: 1.3rem; height: 2rem;}
}

@media screen and (max-width: 576px){
    .group-item{width: 100%; margin: 0 0 2rem 0;}
}