@charset "utf-8";
/*----------------------------------
mv
-----------------------------------*/
#nomal-mv{ border-bottom: solid 1px #000; overflow: hidden; padding: 20px 3%; background: #fff; }
#nomal-mv .inner{ max-width: 1000px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height:300px; position: relative; z-index: 1; background: #fff;}
.creative #nomal-mv .inner{ height: 40vh; min-height: 200px;}
#nomal-mv .inner .tit{ padding-top: 50px; width: 100%;}
#nomal-mv .inner .tit h1{ display: flex; flex-direction: column; }
#nomal-mv .inner .tit h1 .jp, 
#nomal-mv .inner .tit h1 .jp *{ font-size: 24px; letter-spacing: 5px; line-height: 1em;}
#nomal-mv .inner .tit h1 .eng2, 
#nomal-mv .inner .tit h1 .eng2 *{ font-size: 20px; padding-bottom: 5px; color: #777; line-height: 1em;}
.opBody1 #nomal-mv .inner .tit h1 * { opacity: 1; transition: 1.8s;}
#nomal-mv .inner .tit p{ margin-top: 100px; padding-right: 30%; line-height: 2.2em; opacity: 0.1;}
.opBody1 #nomal-mv .inner .tit p { animation: nomal-mv-p 1.2s 1.2s ease-in 1 forwards;}
@keyframes nomal-mv-p {
0% {  opacity: 0.1;}
100% {  opacity: 1;}
}
/*svg*/
#nomal-mv .s-line{ height: 110%; position: absolute; right: -1%; bottom: -5%; z-index: 20; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; opacity: 1; mix-blend-mode: difference;}
#nomal-mv .s-line svg{ width: 100%; height: 100%;}
#nomal-mv .s-line .s-lineimg{ width: 100%; height: auto; max-height: 110vh; fill: none; stroke: #fff; stroke-width: 180px; fill-rule: evenodd; stroke-dasharray: 4000px; stroke-dashoffset: 4000px;}
.opBody1 #nomal-mv .s-line .s-lineimg{ animation: s-line-svg-anime 6s forwards, stroke-color 30.0s ease-in infinite forwards;}
@keyframes s-line-svg-anime {
0% { stroke-dasharray: 4000px; stroke-dashoffset: 4000px;}
100% { stroke-dashoffset: 0;}
}
@media screen and (max-width: 700px) {
#nomal-mv .inner .tit h1 .jp, 
#nomal-mv .inner .tit h1 .jp *{ font-size: 6.0vw;}
#nomal-mv .inner .tit h1 .eng2, 
#nomal-mv .inner .tit h1 .eng2 *{ font-size: 4.8vw;}
#nomal-mv .inner .tit p{ margin-top: 20vh; padding-right: 10vw; font-size: 13px; line-height: 1.8em;}
}
@media screen and (max-width: 500px) {
#nomal-mv .inner{ height:70vh; min-height: 0;}
#nomal-mv .s-line{ height: 100%; bottom: 0; right: -85vw;}
}


/*-----------------*/
.c-tag{ width: 100%; height: 1px; display: block;}
/*-------------------
page_contents
--------------------*/
#page_contents .inner-wap { width: 100%; max-width: 1100px; display: flex; flex-direction: row; justify-content: space-between;}
#creativePage #page_contents .inner-wap{ max-width: 900px;}
#page_contents .inner-wap .page-left-wrap{ width: 140px; padding-top: 150px;}
#page_contents .inner-wap .page-right-wrap{ width: calc(100% - 150px); padding-left: 40px; margin-top: 60px;}
#page_contents .inner-wap .page-right-wrap > .section{ padding: 80px 0;}
@media screen and (max-width: 800px){
#page_contents .inner-wap .page-right-wrap > .section{ padding: 50px 0;}
#page_contents .inner-wap .page-left-wrap{ display: none;}
#page_contents .inner-wap .page-right-wrap{ width:100%; padding-left: 0px; margin-top: 0;}
#page_contents .inner-wap .page-right-wrap .titArea{ padding: 0 5% !important;}
}
@media screen and (max-width: 700px){
.titArea{ width: auto; display: flex; justify-content: center;}
}

/*-------------------
#page_contents .inner-wap .page-left-wrap
--------------------*/
#page_contents .inner-wap .page-left-wrap #tag-menu{width: 100%; display: block; position: sticky; left: 0; top: 60px; margin: 0 0 80px; background: #fff;}
#page_contents .inner-wap .page-left-wrap #tag-menu li{ width: 100%; display: block;}
#page_contents .inner-wap .page-left-wrap #tag-menu li span{ display: block; font-size: 11px; font-weight: 400; padding:0 5px; margin-bottom: 4px; }
#page_contents .inner-wap .page-left-wrap #tag-menu li a{ display: block; font-size: 11px; padding:1px 5px; margin: 6px 0; border-radius: 2px; color: #777; font-weight: 300; position: relative;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::before{ content: "・";}
#page_contents .inner-wap .page-left-wrap #tag-menu li a:hover{ color: #111; font-weight: bold;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::after{ width: 0%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background: #eee; transition: 0.4s; z-index: -1; } 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a::after{ width: 100%;}
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a { color: #000; font-weight: bold;}
@media screen and (max-width: 800px){
.left-wrap{ width: 100%; background: rgba(255,255,255,1); border-bottom: solid 1px #aaa; position: sticky; left: 0; top: 0; z-index: 100;}
#page_contents .inner-wap .page-left-wrap #tag-menu{ }
#page_contents .inner-wap .page-left-wrap #tag-menu{  display: flex; flex-direction: row; position: relative; left: auto; top: auto; margin-top: 0; padding:0; border:none; border-radius: 0 0 0 0; box-shadow: 0 0 0 rgba(0,0,0,.2); background: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu li{ width: 16.66%; display: block; margin: 0; }
#page_contents .inner-wap .page-left-wrap #tag-menu li.tit{ display: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a{ display: flex; align-items: center; justify-content: center; height: 30px; font-size: 1.8vw; letter-spacing: 0; padding:0; border-radius: 0; font-weight: 300; margin: 0;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::before{ content: ""; display: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a{ background:#7F8EA7; color: #fff;}
}


/*================================
.titArea
===================================*/
.titArea{ width: 100%; display: flex; flex-direction: column;}
.titArea h2{ width: 100%; display: flex; flex-direction: column-reverse;}
.titArea h2 > span{ display: flex;}
.titArea h2 > span, 
.titArea h2 > span *{ font-size: 26px; line-height: 1.4em; letter-spacing: 0.1em; font-weight: 700;}
.titArea h2 > span br{ display: none;}
.titArea p{ padding: 20px 0; color: #666;}
@media screen and (max-width: 700px){
#page-links .titArea { padding: 0 !important;}
#page-links .titArea h2 > span{ display: flex; text-indent: 0em; justify-content: space-between;}
}
@media screen and (max-width: 600px){
.titArea h2 > span, 
.titArea h2 b *{ font-size: 5.0vw; letter-spacing: 0.05em;}
.titArea h2 > span.indent{ text-indent: -0.8em;}
.titArea h2 > span br{ display: block;}
.titArea p{ padding: 30px 0; line-height: 2.0em; letter-spacing: 0.1em;}
}


/*-----------------------
FAQ
-------------------------*/
#faq{ padding:0 3% 100px !important;}
.section-faq{ width: 100%; display: block; padding-top: 5px;}
.section-faq h2 { width: 100%; display: block; position: relative; margin: 60px 0 20px; border-left: solid 6px var(--color1);}
.section-faq h2 span{ display: inline-block; background: #fff; position: relative; line-height: 22px; padding:5px 15px; font-size: 20px; z-index: 10;}
.section-faq#faq1 h2{ margin-top:50px; }
.section-faq h2::after{ width: 100%; height: 1px; position: absolute; left: 0; top: 50%; margin-top: 2px; background: #aaa; border-radius: 10px; z-index: 1; content: "";}
.section-faq dl{ width: 100%; display: block;} 
.section-faq dl > * { width: 100%; display: block; position: relative; padding: 20px 25px 25px 54px;}
.section-faq dl > * span{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-weight: 200; position: absolute; top: 20px; left: 10px; border-radius: 3px; font-size: 20px; font-family: 'Jost', sans-serif;}
.section-faq dl dt{ font-size: 15px; border-bottom: solid 1px #ddd; border-radius: 4px; margin-top: 20px; transition: 0.4s; padding-right: 60px; cursor: pointer;}
.section-faq dl dt::after{ width: 14px; height: 14px; position: absolute; right: 15px; top: 50%; margin-top: -14px; border-right: solid 1px #aaa; border-bottom: solid 1px #aaa; content: "×"; transform: rotate(45deg); transition: 0.4s; color: #fff; font-weight: 200; font-size: 2px;}
.section-faq dl dt.open::after{ border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(0); color: #777; font-size: 22px; margin-top: -22px;}
.section-faq dl dt:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.1);}
.section-faq dl dt span{ border: solid 1px #fff; background: #fff; color: #111; margin-bottom: 2px; transition: 0.4s;}
.section-faq dl dt span{}
.section-faq dl dt span:hover{ background: #ddd;}
.section-faq dl dt.open { color: #000;}
.section-faq dl dt.open span, 
.section-faq dl dt.open span:hover{ background: #bbb; color: #fff; border: solid 1px #ddd;}
.section-faq dl dd{ margin-bottom: 30px; line-height: 1.8em; display: none;}
.section-faq dl dd span{ background:#E0C398; color: #fff;}
.section-faq dl dd a{ text-decoration: underline; color: #007AC8; transition: 0.2s;}
.section-faq dl dd a:hover{ text-decoration: none; color:#fa7a65;}
@media screen and (max-width: 1100px) {
.section-faq#faq1 h2{ margin-top:0px; }
#faqArea .right { width: 100%; display: block; padding: 3%; margin: 0;}
}
@media screen and (max-width: 600px) {
.section-faq h2 { margin: 20px 0 ;}
.section-faq dl dt.open::after{ margin-top: -12px;}
.section-faq dl dt{ font-size: 14px;}
.section-faq dl dd{ font-size: 13px;}
}




/*-------------------
creative
-----------------------*/
.back_creative{ width: 100%; height: 100vh; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: -10; clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);}
.opBody1 .back_creative { animation: back_creative-move 1.6s ease-in 1 forwards;}
@keyframes back_creative-move {
0% { clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);}
40% { clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);}
100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}


.back_creative span, 
.back_creative::before, 
.back_creative::after{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; content: ""; transition: 1.4s;}
/**/
.back_creative span{ z-index: 1; background:url("../img/creative/img.webp") 50% 50% no-repeat; background-size: cover;}
.back_creative::before{ z-index: 10; background: rgba(0,0,0,.8); mix-blend-mode:darken;}
.back_creative::after{ z-index: 12; background: rgba(0,0,0,.6); mix-blend-mode: saturation; opacity: 1;}
.scroll .back_creative::before{ background: rgba(0,0,0,.5);}
.scroll .back_creative::after{ opacity: 0;}
/**/
.creative #breadcrumbs ul li a span{ color: #aaa;}
.creative #breadcrumbs ul li::after{ color: #777;}
.creative #breadcrumbs ul li:last-child a span{ color: #fff;}
/**/
#creativePage{ background: #fff; margin-top: 80vh; padding: 40px 5%;}
#creativePage .titArea h2 > span, 
#creativePage .titArea h2 > span *{ font-weight: 200;}

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

-----------------*/
#creativ1.inner-wap { flex-direction: column;}
#creativ1 .titArea{ padding-top:20px; background: #fff; position: sticky; left: 0; top: 0; z-index: 1000; border-bottom: solid 1px #ddd; padding-bottom: 5px;}
#creativ1 .titArea h2.font-anime2 > span, 
#creativ1 .titArea h2.font-anime2 > span *{ font-size: 24px;}
#creativ1 .titArea .row{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
#creativ1 .titArea .row .txt{ font-size: 12px; padding: 10px 0;}
#creativ1 .titArea .row .hplink{ margin-left: 5%; padding: 0;}
#creativ1 .titArea .row .hplink a{ height: 50px; padding: 0 15px 5px 34px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; font-size: 11px; border: solid 1px #ccc; background: #f5f5f5; color: #000; white-space: nowrap; position: relative; border-radius: 4px;}
#creativ1 .titArea .row .hplink a span{ font-size: 11px; letter-spacing: 0; opacity: 0.9; line-height: 1em; font-weight: 300;}
#creativ1 .titArea .row .hplink a:hover{ background: var(--cursor_color3); color: #fff; border: solid 1px #222;}
#creativ1 .titArea .row .hplink a:hover span{ color: #fff;}
#creativ1 .titArea .row .hplink a::after, 
#creativ1 .titArea .row .hplink a::before{ width: 10px; height: 7px; position: absolute; left: 12px; top: 50%; content: ""; transition: 0.3s;}
#creativ1 .titArea .row .hplink a::after{ margin: -4px 0 0; border: solid 1px #555;} 
#creativ1 .titArea .row .hplink a::before{ margin: 0px 0 0 -3px; border-left: solid 1px #555; border-bottom: solid 1px #555;}
#creativ1 .titArea .row .hplink a:hover::after{border: solid 1px #fff;}
#creativ1 .titArea .row .hplink a:hover::before{ border-left: solid 1px #fff; border-bottom: solid 1px #fff;}
/**/
#creativ1 .worksttl{ width: 100%; display: flex; justify-content: flex-start; align-items: baseline; padding-top: 80px;}
#creativ1 .worksttl h3{ width: auto; display: flex; justify-content: flex-start; align-items: baseline; position: relative; padding:0 5px;}
#creativ1 .worksttl h3 *{ transition: 0.3s;}
#creativ1 .worksttl h3::after{ width: 0; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: 100; mix-blend-mode:difference; background: #000; transition: 0.3s;}
#creativ1 .worksttl.setView h3::after{ width: 100%;}
#creativ1 .worksttl h3 .eng{ font-size: 34px; font-weight: 200; display: block; padding-right: 10px; line-height: 1em;}
#creativ1 .worksttl h3 .jp{ font-weight:10px; font-weight: bold; line-height: 1em;}
#creativ1 .worksttl.setView h3 .eng, 
#creativ1 .worksttl.setView h3 .jp{ color: #fff;}
@media screen and (max-width: 600px) {
#creativ1 .titArea{ padding-top: 50px; border-bottom: double 3px #222;}
#creativ1 .titArea h2.font-anime2 > span, 
#creativ1 .titArea h2.font-anime2 > span *{ font-size: 3.8vw;}
#creativ1 .titArea .row { flex-direction: column !important;}
#creativ1 .titArea .row .txt{ width: 100%; font-size: 11px; padding: 5px; line-height: 1.4em;}
#creativ1 .titArea .row .hplink { width: 100%; padding: 10px 0;}
#creativ1 .titArea .row .hplink a{ width: 100%; height: 36px; padding: 0 5px 0 34px; flex-direction: row; align-items: center; background: var(--color1); border: solid 1px var(--cursor_color1);}
#creativ1 .titArea .row .hplink a span{ font-size: 12px; margin: 0 8px;}
}





/*---*/
#creativ1 .creatList{ width: 100%; display: flex; flex-direction: column;}
/**/
#creativ1 .creatList .item{ padding: 20px 1%; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: dashed 1px #ccc;} 
/**/
#creativ1 .creatList .item .ttl{ width: 55%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; margin-right: 25px;}
#creativ1 .creatList .item .ttl div{ flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;} 
#creativ1 .creatList .item .ttl div h3{ display: block; padding: 10px 0; font-size: 13px; font-weight: 300;}
#creativ1 .creatList .item .ttl div h4{ display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;}
#creativ1 .creatList .item .ttl div h4 span{ display: block; padding: 1px 8px; border-radius: 40px; font-size:8px; font-weight: 600; letter-spacing: 0; color: #999; border: solid 1px #ccc; margin: 0 5px 3px 0;}
#creativ1 .creatList .item .ttl p{ font-size: 14px; letter-spacing: 0; flex-wrap: wrap; padding-right: 50px;}
/**/
#creativ1 .creatList .item .txt{ display: block; flex: 1; font-size: 11px; color: #777;}
@media screen and (max-width: 600px) {
#creativ1 .creatList .item{ padding: 0; flex-direction: column;} 
#creativ1 .creatList .item .ttl{ width: 100%; flex-direction: column-reverse; align-items: flex-start; margin-right: 0; padding:25px 10px 0;}
#creativ1 .creatList .item .ttl div{ width: 100%;} 
#creativ1 .creatList .item .ttl div h3{ font-size: 14px; padding: 0 0 10px;}
#creativ1 .creatList .item .ttl p{ font-size: 12px; padding: 0;}
#creativ1 .creatList .item .txt{ font-size: 11px; padding: 5px 10px 35px;}
}