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

/* animation
--------------------*/

@keyframes bounceIn {
0% {opacity: 0;transform: scale(0.3);}
50% {opacity: 1;transform: scale(1.05);}
70% {transform: scale(0.9);}
100% {transform: scale(1);}
}

@keyframes slideIn {
0% {opacity: 0;transform: translateX(-100vw);}
80% {transform: translateX(0);}
100% {opacity: 1;transform: translateX(0);}
}


@keyframes slideUp {
0% {opacity: 0;transform: translateY(100vh);}
80% {transform: translateY(0);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes shake {
0%,100%{transform: translateX(0);}
20%, 60% {transform: translateX(-5px);}
40%, 80% {transform: translateX(5px);}
}

@keyframes turnAround {
0% {transform:rotateY(0)}
40% {transform:rotateY(360deg)}
100% {transform:rotateY(720deg)}
}
@keyframes roundAround {
0% {transform:rotate(0)}
20% {transform:rotate(90deg)}
25% {transform:rotate(90deg)}
45% {transform:rotate(180deg)}
50% {transform:rotate(180deg)}
70% {transform:rotate(270deg)}
75% {transform:rotate(270deg)}
90% {transform:rotate(360deg)}
100% {transform:rotate(360deg)}
}

:root {
  --1stColor: #000;
  --endColor: #fff;
  --trn1s:1s cubic-bezier(0.77, 0, 0.175, 1);
}



[data-device="pc"] .mainNav li{transition:var(--trn1s);border-radius:3em;padding:0.5em 1em;background:#ffffff90;}
[data-device="pc"] .mainNav li::after{content:"";display:block;height:0;width:0;transition:var(--trn1s);}
[data-device="pc"] .mainNav li:hover::after{width:100%;box-shadow:0 0px 0 1px;}
[data-device="pc"] .mainNav li:hover{background:var(--endColor);}



/*--------------------------*/

#tp01{overflow:hidden;}
#tp01 .wrap{transform:translateY(-100svh);transition:0.4s;opacity:0;}
.on#tp01 .wrap{transition-delay: 1s;transform:translateY(0);opacity:1;}


#indexPage #tp01 .tp01 ul>li>div{opacity:0;transition:var(--trn1s);}
#indexPage #tp01.on .tp01 ul>li>div{opacity:1;transition:var(--trn1s);}

#indexPage #tp01 .tp01 ul>li>picture{opacity:0;transition:var(--trn1s);}
#indexPage #tp01.on .tp01 ul>li>picture{opacity:1;transition:var(--trn1s);}
#indexPage #tp01.on .tp01 ul>li>picture{background-image:url(../img/ecmada2025/icon_q.png);}

#indexPage #tp01.on .tp01 ul>li:nth-of-type(1)>*{transition-delay:1s;}
#indexPage #tp01.on .tp01 ul>li:nth-of-type(2)>*{transition-delay:2s;}
#indexPage #tp01.on .tp01 ul>li:nth-of-type(3)>*{transition-delay:3s;}


/*
[data-sct="4"]{background:url(../img/bg/AdobeStock_539726154.jpg) no-repeat  50% 50% / cover;overflow:hidden;}
[data-sct="8"]{background:url(../img/bg/AdobeStock_104621726.jpg) no-repeat  50% 50% / cover;background-attachment:fixed;}
[data-sct="7"]{background:url(../img/bg/AdobeStock_456665119.jpg) no-repeat  50% 50% / cover;padding:4vw 0;}
[data-sct="11"]{background:url(../img/bg/AdobeStock_448515663.jpg)  no-repeat  50% 0% / cover;}
[data-sct="5"]{background:url(../img/bg/AdobeStock_287759674.jpg) no-repeat  50% 50% / cover;background-attachment:fixed;}
[data-sct="10"]{background:url(../img/bg/485335_m.jpg) no-repeat  50% 50% / cover;background-attachment:fixed;}
[data-sct="9"]{background:#fff url(../img/bg/AdobeStock_234857972.jpg)  no-repeat  50% 0% / cover;background-attachment:fixed;}
[data-sct="9"].on{}
*/


/*
#tpAward .tpHD h3>div,
#tpPlan .tpHD h3>div{display:inline-block;transform:translateX(-100svw);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 0s;}

#tpAward .tpHD[data-inview] h3>div,
#tpPlan .tpHD[data-inview] h3>div{transform:translateX(0);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 1s;}

#tpAward{position:relative;z-index:1;padding-top:4vw;}
#tpAward>*{z-index:2;}
#tpNumbers{position:relative;z-index:1;padding-bottom:4vw;}
#tpNumbers>*{z-index:2;}



#tpAward::before{content:'';width:200svw;height:400px;display:block;background:rgba(255,255,255,0.7);position:absolute;z-index:-1;left:0;top:-200px;transform:skewY(20deg) skewX(0) translateX(-100%);transform-origin:left top;box-shadow:0 0 10px #00000010 inset;}
[data-inview]#tpAward::before{transition: 2s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 1s;transform:skewY(20deg) skewX(0) translateX(0);}

#tpNumbers::before{content:'';width:200svw;height:400px;display:block;background:rgba(255,255,255,0.8);position:absolute;z-index:-1;right:0;top:-100px;transform:skewY(-20deg) skewX(0) translateX(100%);transform-origin:right top;}
[data-inview]#tpNumbers::before{transition: 3s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 0.5s;transform:skewY(-20deg) skewX(0) translateX(0);}
*/
#tpNumbers .countNum li{overflow:hidden;transition: 3s cubic-bezier(0.25, 0, 0.75, 1);opacity:0;}
#tpNumbers.on .countNum li{transition: 3s cubic-bezier(0.25, 0, 0.75, 1);opacity:1;}

#tpNumbers .countNum dl{transform:translateY(100svh);transition: 3s cubic-bezier(0.25, 0, 0.75, 1);}
#tpNumbers.on .countNum dl{transform:translateY(0svh);}

#tpNumbers.on .countNum li:nth-of-type(1){transition-delay:0s;}
#tpNumbers.on .countNum li:nth-of-type(2){transition-delay:0.3s;}
#tpNumbers.on .countNum li:nth-of-type(3){transition-delay:0.6s;}
#tpNumbers.on .countNum li:nth-of-type(4){transition-delay:0.9s;}
#tpNumbers.on .countNum li:nth-of-type(5){transition-delay:1.2s;}
#tpNumbers.on .countNum li:nth-of-type(6){transition-delay:1.5s;}
#tpNumbers.on .countNum li:nth-of-type(7){transition-delay:1.8s;}
#tpNumbers.on .countNum li:nth-of-type(8){transition-delay:2.1s;}

#tpNumbers.on .countNum li:nth-of-type(1) dl{transition-delay:0.3s;}
#tpNumbers.on .countNum li:nth-of-type(2) dl{transition-delay:0.6s;}
#tpNumbers.on .countNum li:nth-of-type(3) dl{transition-delay:0.9s;}
#tpNumbers.on .countNum li:nth-of-type(4) dl{transition-delay:1.2s;}
#tpNumbers.on .countNum li:nth-of-type(5) dl{transition-delay:1.5s;}
#tpNumbers.on .countNum li:nth-of-type(6) dl{transition-delay:1.8s;}
#tpNumbers.on .countNum li:nth-of-type(7) dl{transition-delay:2.1s;}
#tpNumbers.on .countNum li:nth-of-type(8) dl{transition-delay:2.4s;}

#indexPage #tpNumbers .tpBox ul>li dd strong{transition: 0.4s cubic-bezier(0.25, 0, 0.75, 1);}
#indexPage #tpNumbers .tpBox ul>li dd strong[data-view]{transition-delay:0.4s;color:#bf0000;}
#indexPage #tpNumbers .tpBox ul>li dd strong[data-view]+span{transition-delay:0.4s;color:#bf0000;}



#tpPlan{position:relative;z-index:1;overflow:hidden;background:#eeeeee !important;}
[data-inview="1"]#tpPlan{background:#ffffff !important;transition: 0.4s cubic-bezier(0.25, 0, 0.75, 1);}
#tpPlan>*{z-index:2;}

#tpPlan::before{content:'';width:100svw;height:40%;display:block;background: linear-gradient(-180deg,#eeeeee 80%,transparent 100%);position:absolute;z-index:-1;left:0vw;top:-20%;transform:rotate(0deg) translateY(40%);transform-origin:left top;}
[data-inview="1"]#tpPlan::before{transition: 1s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 0.4s;transform:rotate(0deg) translateY(-20%);}



#tpAward[data-animation].on li picture{animation:1s easy 0s 1 alternate;animation-name: turnAround;display:block;}

#tpAward[data-animation].on li:nth-of-type(1) picture{animation-delay:0s;}
#tpAward[data-animation].on li:nth-of-type(2) picture{animation-delay:0.2s;}
#tpAward[data-animation].on li:nth-of-type(3) picture{animation-delay:0.4s;}

#tpAward .tpBox li:hover img{animation:1s easy 0s 1 alternate;animation-name: turnAround;}


#page #tpAward{padding-bottom:8vw;overflow:hidden;position:relative;}
#indexPage #tpAward{box-shadow:0 -4vw 0 0 #eeeeee inset;}

#indexPage #tpAward::before,
#indexPage #tpAward::after{opacity:0;transition-delay: 1s;position:absolute;z-index:1;opacity:1;width:60vw;height:10vw;content:"";transition:0.4s;}

#indexPage #tpAward::before{bottom:4vw;left:0vw;margin-left:0vw;transform-origin:left bottom;border-radius:100%  0% 100% 0%;transform: rotate(11deg);background:#eeeeee;}
#indexPage #tpAward::after{top:calc(100% - 5.5vw);right:0vw;margin-right:0%;transform-origin:right bottom;border-radius:100%  0% 100% 0 ;transform:scale(1,1) rotate(6deg) translateY(-2vw);background:#ffffff00;}
#indexPage #tpAward[data-inview="1"]::after{background:#fff;transform:scale(1,1) rotate(10deg) translateY(0);}

#tpPlan .tpBox{overflow:hidden;padding:2em 0;}
#tpPlan .tpBox>dl{transform:translateY(100svw);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);}
#tpPlan .tpBox[data-inview]>dl{transform:translateY(0svw);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);}

#tpPlan .tpBox>dl:nth-of-type(1){transition-delay: 0.5s;}
#tpPlan .tpBox>dl:nth-of-type(2){transition-delay: 1s;}
#tpPlan .tpBox>dl:nth-of-type(3){transition-delay: 1.5s;}
#tpPlan .tpBox>dl:nth-of-type(4){transition-delay: 2s;}


#sct1101 p:nth-of-type(1){transform:translateX(-100svw);transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 0.5s;}
#sct1101 p:nth-of-type(2){transform:translateX(100svw);transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 0.5s;}
[data-inview]#sct1101 p:nth-of-type(1){transform:translateX(0);transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 1s;}
[data-inview]#sct1101 p:nth-of-type(2){transform:translateX(0);transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 1.5s;}

.on#sct1106 p:nth-of-type(1){animation: 1s ease 0s 1 alternate;animation-name:slideUp;}
.on#sct1106 p:nth-of-type(2){animation: 1s ease 0.2s 1 alternate;animation-name:slideUp;animation-fill-mode: both;}


.on #sct11sava dl{animation: 1s ease 0.5s 1 alternate;animation-name:bounceIn;}
.on #sct11mada dl{animation: 1s ease 0.7s 1 alternate;animation-name:bounceIn;animation-fill-mode: both;}


#sct11sava ul,
#sct11sava p{transform:translateY(100vw);opacity:0;display:block;transition:0.5s cubic-bezier(0.77, 0, 0.175, 1);}

.on #sct11sava ul,
.on #sct11sava p{transform:translateY(0);opacity:1;transition-delay: 2s;}


#indexPage #tp08 .tpBox{overflow:hidden;}
#indexPage #tp08 .tpBox>dl{transform:translateY(200svh);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);}
#indexPage #tp08 .tpBox[data-inview="1"]>dl{transform:translateY(0);}

#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(1){transition-delay: 0.5s;}
#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(2){transition-delay: 1s;}
#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(3){transition-delay: 1.5s;}


#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(1)>dt{animation: 1s ease 0s 1 alternate both;animation-name:bounceIn;}
#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(2)>dt{animation: 1s ease 0.4s 1 alternate both;animation-name:bounceIn;}
#indexPage #tp08 .tpBox[data-inview="1"]>dl:nth-of-type(3)>dt{animation: 1s ease 0.8s 1 alternate both;animation-name:bounceIn;}

/*
#indexPage .tpHD.idxHD02 h3>div{transform:translateY(110%);transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 1s;}
#indexPage .tpHD.idxHD02 h3>div{transform:translateY(0);transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);transition-delay: 0s;}
*/




#indexPage .tpHD.idxHD02[data-animation="slideText"] h3>div span{
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


#indexPage .tpHD.idxHD02[data-animation="slideText"].on h3>div span{
opacity: 1;
transform: translateY(0);
}


#indexPage .tpHD.idxHD02[data-animation="popText"] h3>div span{
display: inline-block;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#indexPage .tpHD.idxHD02[data-animation="popText"].on h3>div span{
opacity: 1;
transform: scale(1);
}


#indexPage .tpHD.idxHD02 h3>div span:nth-child(1) { transition-delay: 0.2s;}
#indexPage .tpHD.idxHD02 h3>div span:nth-child(2) { transition-delay: 0.4s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(3) { transition-delay: 0.6s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(4) { transition-delay: 0.8s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(5) { transition-delay: 1s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(6) { transition-delay: 1.2s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(7) { transition-delay: 1.4s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(8) { transition-delay: 1.6s; }
#indexPage .tpHD.idxHD02 h3>div span:nth-child(9) { transition-delay: 1.8s; }


#tpFaqBox li dl{
background:transparent;
transition:1s;}
#tpFaqBox li.open dl{
background:#ffffff70;
}

#sub05 .subBox>*{display: inline-block;opacity: 0;transform: translateY(2em);transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
#sub05.on .subBox>*{opacity: 1;transform: translateY(0);}

#sub05.on .subBox>.hdr{transition-delay: 1s;}
#sub05.on .subBox>.txt{transition-delay: 2s;}
#sub05.on .subBox>.btn{transition-delay: 2s;}

#indexPage #tpPlan #sub05 p>span{transition: 2s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 5s;}
#indexPage #tpPlan #sub05 p>span{position:relative;opacity:0;color:#ccc;}
#indexPage #tpPlan #sub05 .txt p>span{padding:0 0.5em;}

#indexPage #tpPlan #sub05>.subBox .hdr>p,
#indexPage #tpPlan #sub05>.subBox .txt>p{font-weight:300;}
#indexPage #tpPlan #sub05 p>span{position:relative;display:flex;width:unset;}
#indexPage #tpPlan #sub05 .txt>p,
#indexPage #tpPlan #sub05 .hdr>p{display:flex;flex-wrap:wrap;width:calc(var(--mwidth)/1.5);margin:0 auto;justify-content:center;}
[data-device="smp"] #indexPage #tpPlan #sub05 .txt>p,
[data-device="smp"] #indexPage #tpPlan #sub05 .hdr>p{width:90%;margin:0 auto;}


#indexPage #tpPlan #sub05 .hdr p>span:nth-of-type(1){transition-delay: 1.4s;}
#indexPage #tpPlan #sub05 .hdr p>span:nth-of-type(2){transition-delay: 1.8s;}
#indexPage #tpPlan #sub05 .hdr p>span:nth-of-type(3){transition-delay: 2.2s;}
#indexPage #tpPlan #sub05 .hdr p>span:nth-of-type(4){transition-delay: 2.6s;}
#indexPage #tpPlan #sub05 .txt p>span:nth-of-type(1){transition-delay: 3s;}
#indexPage #tpPlan #sub05 .txt p>span:nth-of-type(2){transition-delay: 3.4s;}
#indexPage #tpPlan #sub05 .txt p>span:nth-of-type(3){transition-delay: 3.8s;}

#page #indexPage #tpPlan #sub05[data-inview="1"] p>span{opacity:1;font-weight:600;color:#000;}
#page #indexPage #tpPlan #sub05[data-inview="1"] .txt  p>span{opacity:1;font-weight:800;background:linear-gradient(0deg,#eee 50%,transparent 50%) no-repeat 0 0 / 100% 100%;}

/*
#indexPage #tpPlan #sub05.on p>span::before{opacity:0;background:#be0000;}
*/

#indexPage #tpCreative .tpImage .Keyphrase{transition:1s;transform:translateY(100px);opacity:0;}
#indexPage #tpCreative .tpImage.on .Keyphrase{transition:1s;transition-delay:2s;transform:translateY(0px);opacity:1;}

#indexPage .tpHD.idxHD02[data-animation] .sub span{
display: inline-block;
opacity: 0;
transform: translateY(2em);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


#indexPage .tpHD.idxHD02[data-animation].on .sub span{
opacity: 1;
transform: translateY(0);transition-delay: 0.5s;
}

#tpWorkList {transform:translateY(50vh);transition: 2s cubic-bezier(0.25, 0, 0.75, 1);}
#tpWorkList[data-inview="1"],
.tpImage.on+#tpWorkList{transform:translateY(0);}

[data-sct="7"]{position:relative;z-index:1;overflow:hidden;}
[data-sct="7"]>*{z-index:2;}



[data-sct="7"]::before{content:'';width:200svw;height:400px;display:block;background:rgba(255,255,255,0.7);position:absolute;z-index:-1;left:0;top:-200px;transform:skewY(20deg) skewX(0) translateX(-100%);transform-origin:left top;}
[data-inview="1"][data-sct="7"]::before{transition: 2s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 1s;transform:skewY(20deg) skewX(0) translateX(0);}

[data-sct="7"]::after{content:'';width:200svw;height:400px;display:block;background:rgba(255,255,255,0.7);position:absolute;z-index:-1;left:0;top:200px;transform:skewY(-20deg) skewX(0) translateX(100%);transform-origin:right top;}
[data-inview="1"][data-sct="7"]::after{transition: 2s cubic-bezier(0.25, 0, 0.75, 1);transition-delay: 3s;transform:skewY(-20deg) skewX(0) translateX(0);}

[data-sct="7"] .splide__pagination__page{box-shadow:0 0 0 1px;background-color:#000;}
[data-sct="7"] .splide__pagination__page.is-active{transform:scale(1.5);box-shadow:0 0 0 1px;background-color:#fff;}
[data-sct="7"] .splide__pagination{gap:1%;}
[data-sct="7"] .splide__arrow{border-radius:0;background:transparent;}

#tpWorkList .splide__slide .iWrap{overflow:hidden;}
#tpWorkList .splide__slide .iImg{opacity:0;transition: 0.25s cubic-bezier(0.25, 0, 0.75, 1);transform:translateY(50vh)}
#tpWorkList .splide__slide .iInfo>*{opacity:0;transition: 0.25s cubic-bezier(0.25, 0, 0.75, 1);transform:translateY(50vh)}
#tpWorkList .splide__slide.is-active .iInfo>*{opacity:1;transform:translateY(0)}
#tpWorkList .splide__slide.is-active .iImg{opacity:1;transform:translateY(0)}

@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px){}