/*
Theme Name: CREATIVESURVEY
Description: CREATIVESURVEY専用テーマ
Version: 2.0
*/



html{background:#fff;}
body{position:relative;margin:0;}
:where(p,h1,h2,h3,h4,h5,h6){text-wrap:auto;}
figure{margin:0;padding:0;}
img{width:100%;}
.flex{display:flex;}
.flex.column{flex-direction:column;}
.flex.space-between{justify-content:space-between;}
.flex.end{justify-content:flex-end!important;}
.flex.nowrap{flex-wrap: nowrap;}
.flex.inline-flex{display:inline-flex;}
.align-center{text-align:center;}
.align-right{text-align:right;}
.hidden{display:none!important;}

@media only screen and (max-width: 600px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width: 992px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width: 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.hide-on-med-only{display:none !important}}@media only screen and (min-width: 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width: 1201px){.hide-on-extra-large-only{display:none !important}}@media only screen and (min-width: 1201px){.show-on-extra-large{display:block !important}}@media only screen and (min-width: 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.show-on-medium{display:block !important}}@media only screen and (max-width: 600px){.show-on-small{display:block !important}}@media only screen and (min-width: 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width: 992px){.show-on-medium-and-down{display:block !important}}


/*フォント*/
body{font-kerning:auto;font-family:source-han-sans-japanese, sans-serif !important;font-weight:400;font-style: normal;font-size:16px;line-height: 1.8;word-wrap:break-word;word-break:break-word;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-feature-settings : "palt";letter-spacing:0.06em;background-color:#fff;position: relative;}
.en{font-family:futura-pt, sans-serif!important;font-style: normal;font-weight:600;font-size:115%;top:0;position:relative;}



.container{}

#header{padding:40px 0 0;background:url(img/kv_crsv.jpg) no-repeat center top #FAE8C6;background-size:auto 875px;text-align:center;}
#header .wrap{padding:550px 0 56px;}
#header .wrap h1{font-size:56px;font-weight:700;line-height:1.2;letter-spacing:0;/*background:linear-gradient(160deg, #2D2A28 40%, #F49E00 110%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;*/margin:0 0 40px 0;color:#2D2A28;}
#header .wrap h2{color: #2D2A28;font-size: 24px;font-weight: 700;line-height:1.6;margin:0 0 24px 0;}
#header .wrap2 h2.underline{position:relative;padding-bottom:20px;color: #2D2A28;font-size: 24px;font-weight: 700;line-height:1.6;margin:0;}
#header .wrap2 h2.underline::before{content:"";display:block;width:24px;height:4px;background:#F49E00;position:absolute;left:0;right:0;bottom:4px;margin:auto;}
#header .wrap p{color: #2D2A28;font-size: 18px;font-weight: 400;line-height:1.6;}
#header .wrap2{padding:0;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), #FAE8C6;}
.logos{position:relative;width:100%;max-width:1152px;margin:24px auto;padding:32px 0;border-radius:8px;background:#fff;box-shadow:0 20px 6px rgba(0,0,0,0),0 13px 5px rgba(0,0,0,.01),0 7px 4px rgba(0,0,0,.02),0 3px 3px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.logos::before,.logos::after{content:"";display:block;width:80px;height:100%;position:absolute;top:0;bottom:0;margin:auto;z-index:10;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,0) 100%)}
.logos::after{right:0;background:linear-gradient(-90deg,#fff 50%,rgba(255,255,255,0) 100%)}
.logos .row{position:relative;overflow:hidden}
.logos .row+.row{margin-top:16px}
.logos .slider{display:flex;align-items:center;gap:0;width:max-content;will-change:transform}
.logos .slider figure{width:161.5px;flex:0 0 auto}
.logos .slider img{display:block;width:100%;height:auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos .row .slider{animation:marquee var(--duration,40s) linear infinite}
.logos .row.reverse .slider{animation-direction:reverse}
#newly{padding:0 0 80px;}
.list-news{display:flex;flex-direction:column;align-items:center;gap:16px;}
.list-news article{width:100%;max-width:970px;}
.list-news article a{text-decoration:none;display:flex;background:#fff url(img/icon-tab.svg) no-repeat center right 40px;background-size:12px;border-radius: 8px;box-shadow: 0 20px 6px 0 rgba(0, 0, 0, 0.00), 0 13px 5px 0 rgba(0, 0, 0, 0.01), 0 7px 4px 0 rgba(0, 0, 0, 0.02), 0 3px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.04);margin:auto;padding:24px 80px 24px 40px;justify-content:space-between;align-items:center;gap:60px;transition: 0.3s ease-out all;}
.title-circle{position:relative;padding-left:4px;display:flex;gap:12px;align-items:center;margin:0;}
.title-circle::before{content:"";display:block;width:4px;height:4px;background:#F49E00;outline:4px solid rgba(244,158,0,.3);border-radius:999px;}
.title-circle span{color:#F49E00;font-size:14px;}
.list-news article a .text{gap:8px;flex:1 1 auto;justify-content:center;align-items:flex-start;}
.list-news article a .text .date{color:#ABB0BA;font-size:14px;letter-spacing:0;line-height:1;}
.list-news article a .text h4{display:inline-block;color: #525766;font-size: 16px;font-weight: 400;line-height:1.8;letter-spacing:0.06em;margin:0;transition: 0.3s ease-out all;position: relative;text-align:left;}
.list-news article a .text h4::before{background: rgba(244,158,0,.6);content: "";width: 100%;height: 1px;position: absolute;left: 0;bottom:0px;transform-origin: right top;transform: scale(0, 1);transition: transform .3s;}
.list-news article a figure{border-radius:4px;vertical-align:top;overflow:hidden;max-width:130px;}
.list-news article a figure img{}
.list-news article a:hover{background:#fbfbfb url(img/icon-tab.svg) no-repeat center right 40px;background-size:12px;box-shadow: 0 10px 3px 0 rgba(0, 0, 0, 0.02), 0 6px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.16);margin:auto;padding:24px 80px 24px 40px;transform: scale(0.99);}
.list-news article a:hover .text h4{color:#000;}
.list-news article a:hover .text h4::before{transform-origin: left top;transform: scale(1, 1);}
.list-news article a:hover figure img{}

.title-content{display:inline-block;margin:auto;z-index:5;}
.title-content .flex{gap:6px;align-items:center;}
.title-content .flex .logo_crsv{width:347px;}
.title-content .flex span{color: #2D2A28;font-size: 32px;font-weight: 700;line-height:1;position:relative;top:-4px;}

#about{padding:0 0 120px;position:relative;display:flex;flex-direction: column;justify-content: center;}
#about::after{position:absolute;bottom:0;left:0;right:0;margin:auto;content:"";width:calc(100vw - 32px);height:auto;aspect-ratio: 1/1;border-radius:9999px;transform:translateY(55%);
background: radial-gradient(50% 50% at 50% 50%, rgba(244, 158, 0, 0.50) 0%, rgba(244, 158, 0, 0.00) 100%);z-index:1;}
#about h2 + p{display:inline-block;margin:32px auto 56px;padding:0 8vw;z-index:4;color:#2D2A28;}
#about .cards{max-width:940px;padding:0 80px;margin:auto;}
#about .cards ul{z-index:5;position:relative;display:flex;flex-wrap:wrap;gap:16px;}
#about .cards ul li{width:calc((100% - 16px) / 2);background:#fff;padding:32px;box-sizing: border-box;display:flex;flex-direction: column;gap:24px;}
#about .cards ul li .flex{display:flex;flex-direction: column;gap:16px;}
#about .cards ul li .flex h3{letter-spacing:0;margin:0;color: #2D2A28;font-size: 24px;font-weight: 700;line-height:1.6;}
#about .cards ul li .flex p{margin:0;color: #737B8C;font-size: 15px;font-weight: 400;line-height:1.6;}
#about .cards ul li figure{width:32px;}

#functions{position:relative;z-index:1;width:calc(100% - 32px);max-width:1400px;margin:auto;padding:120px 170px;border-radius:16px;background:#fff url(img/bg-functions.jpg) no-repeat top center;background-size:cover;box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.03) inset;box-sizing: border-box;}
#functions .wrap{}
#functions .function-main{margin:64px 0 40px;}
#functions .function-main ul{gap:4px;width:calc(100% + 170px);}
#functions .function-main ul li{background:#fff;}
#functions .function-main ul li .text{padding:32px 24px 32px 100px;}
#functions .function-main ul li .text h3{position:relative;color: #2D2A28;font-size: 18px;font-weight: 700;line-height: 1.4;letter-spacing:0;margin:0 0 16px;}
#functions .function-main ul li .text h3::before{content:"";color:#F49E00;font-family:futura-pt, sans-serif!important;font-style: normal;font-weight:600;font-size: 20px;letter-spacing:0.06em;line-height:1;position:absolute;top:3px;left:calc(-100px + 24px);}
#functions .function-main ul li:nth-of-type(1) .text h3::before{content:"01";}
#functions .function-main ul li:nth-of-type(2) .text h3::before{content:"02";}
#functions .function-main ul li:nth-of-type(3) .text h3::before{content:"03";}
#functions .function-main ul li .text p{color: #525766;font-size: 14px;font-weight: 400;line-height: 1.5;letter-spacing:0.03em;}
#functions ul.function-sub{gap:8px;flex-wrap:wrap;}
#functions ul.function-sub li{opacity:0;transform:translateY(-10px);}
@keyframes fadeUp{
0% {opacity: 0;transform: translateY(30px);}
100% {opacity: 1;transform: translateY(0);}
}
#functions ul.function-sub.displayed li{animation: fadeUp 1.6s forwards ease;}
#functions ul.function-sub.displayed li:nth-of-type(1){animation-delay:0ms;}
#functions ul.function-sub.displayed li:nth-of-type(2){animation-delay:100ms;}
#functions ul.function-sub.displayed li:nth-of-type(3){animation-delay:200ms;}
#functions ul.function-sub.displayed li:nth-of-type(4){animation-delay:300ms;}
#functions ul.function-sub.displayed li:nth-of-type(5){animation-delay:400ms;}
#functions ul.function-sub.displayed li:nth-of-type(6){animation-delay:500ms;}
#functions ul.function-sub.displayed li:nth-of-type(7){animation-delay:600ms;}
#functions ul.function-sub.displayed li:nth-of-type(8){animation-delay:700ms;}
#functions ul.function-sub.displayed li:nth-of-type(9){animation-delay:800ms;}
#functions ul.function-sub.displayed li:nth-of-type(10){animation-delay:900ms;}
#functions ul.function-sub.displayed li:nth-of-type(11){animation-delay:1000ms;}
#functions ul.function-sub.displayed li:nth-of-type(12){animation-delay:1100ms;}
#functions ul.function-sub.displayed li:nth-of-type(13){animation-delay:1200ms;}
#functions ul.function-sub.displayed li:nth-of-type(14){animation-delay:1300ms;}
#functions ul.function-sub.displayed li:nth-of-type(15){animation-delay:1400ms;}
#functions ul.function-sub.displayed li:nth-of-type(16){animation-delay:1500ms;}
#functions ul.function-sub li.kanban{background:#fff;align-items: center;width:calc((100% - 24px) / 4);padding:24px;gap:24px;}
#functions ul.function-sub li.kanban figure{display:flex;justify-content: center;width:32px;flex:0 0 32px;}
#functions ul.function-sub li.kanban p{margin:0;color: #2D2A28;font-size: 18px;font-weight: 700;line-height:1.3;flex:1 1 auto;}
#functions ul.function-sub li.kanban p.spacing-small{letter-spacing:-0.03em;}
#functions p.note{margin:8px 0 0;text-align:right;color:#525766;font-size: 14px;font-weight: 400;line-height:1.8;}
#functions ul.function-sub.displayed + p.note{animation: fadeUp 1.6s forwards ease;}

#how{margin:auto;padding:120px 0 100px;}
#how .wrap{width: calc(100% - 32px);max-width: 1400px;padding:0 170px;margin:auto;box-sizing: border-box;}

/*swiper*/
.how{margin:0 auto; padding:56px 0 0;position:relative;}
.how p.align-right{position:absolute;top:100px;right:calc((100% - min(100% - 32px, 1400px)) / 2 + 170px);display:inline-block;color: #525766;font-size: 14px;font-weight: 400;line-height:1;}
.how-tabs{display:inline-flex;gap:8px;margin:0 0 48px;padding:8px;border-radius:16px;overflow:hidden;background:#E2E5EB;}
.how-tab{appearance:none;background:#fff;padding:16px 24px;border-radius:8px;font-weight:700;font-size:16px;transition:all .2s;cursor:pointer;line-height:1;color:#2D2A28;}
.how-tab[aria-selected="true"],.how-tab:hover{background:#2D2A28;color:#fff;box-shadow: 0 21px 6px 0 rgba(0, 0, 0, 0.00), 0 14px 5px 0 rgba(0, 0, 0, 0.01), 0 8px 5px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.09), 0 1px 2px 0 rgba(0, 0, 0, 0.10);}
/* スライダー共通 */
.how-slider{position:relative;padding-left: calc((100% - min(100% - 32px, 1400px)) / 2 + 170px);}
.how-slider[hidden]{ display:none !important; }
.swiper{overflow:visible; padding: 8px 0 32px;}
.swiper-slide{flex: 0 0 auto !important;box-sizing:border-box;border-radius:16px;overflow:hidden;position:relative;width:80%!important;aspect-ratio: 462 / 247;}
.swiper-slide .card{ position:relative; background:#000; }
.swiper-slide .card img{display:block;width:100%;height:100%;object-fit:cover;}
.swiper-slide .card .caption{transition: 0.6s ease-out all;position:absolute;left:24px;opacity:0;bottom:10px;display:inline-flex;flex-direction:column;padding:20px 24px;gap:8px;background:rgba(0,0,0,.55); color:#fff;border-radius:8px;background: rgba(0, 0, 0, 0.30);background-blend-mode: multiply;backdrop-filter: blur(40px);-webkit-backdrop-filter: blur(40px);}
.swiper-slide .card .caption h4{margin:0;color: #FFF;font-size: 20px;font-weight: 700;line-height:1.4;}
.swiper-slide .card .caption p{margin:0;color: rgba(255, 255, 255, 0.85);font-size: 15px;font-weight: 400;line-height:1.6;}
/* 端フェード */
.how-slider::after{content:""; position:absolute; top:0; bottom:0; width:230px;height:100%; pointer-events:none; z-index:5;right:0;background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) -5%, #FFF 72.06%);}
/*カード演出*/
.swiper-slide.swiper-slide-active .card .caption{bottom:24px;opacity:1;}
.swiper-slide figure{position:absolute;transition: 0.5s ease-out all;opacity:0;border-radius:8px;padding:8px;background: rgba(255, 255, 255, 0.40);background-blend-mode: overlay;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.swiper-slide.swiper-slide-active figure{opacity:1;}
.swiper-slide.swiper-slide-active figure:nth-of-type(1){transition-delay:100ms;}
.swiper-slide.swiper-slide-active figure:nth-of-type(2){transition-delay:200ms;}
.swiper-slide.swiper-slide-active figure:nth-of-type(3){transition-delay:250ms;}
.swiper-slide.swiper-slide-active figure:nth-of-type(4){transition-delay:275ms;}
.swiper-slide.swiper-slide-active figure:nth-of-type(5){transition-delay:288ms;}
.swiper-slide.swiper-slide-active figure:nth-of-type(6){transition-delay:300ms;}
.form1-1-1{width:45%;top:13%;left:9%;}
.form1-1-2{width:40%;top:30%;right:9%;}
.form1-2-1{width:50%;top:15%;left:0;right:0;margin:auto;}
.form1-3-1{width:45%;top:13%;left:9%;}
.form1-3-2{width:40%;top:20%;right:9%;}
.form2-1-1{width:25%;top:10%;left:4%;}
.form2-1-2{width:12%;top:7%;left:28%;}
.form2-1-3{width:12%;top:43%;left:31%;}
.form2-1-4{width:20%;top:10%;left:44%;}
.form2-1-5{width:25%;top:20%;right:4%;}
.form2-1-6{width:15%;top:53%;right:20%;}
.form2-2-1{width:40%;top:10%;left:9%;}
.form2-2-2{width:19%;top:7%;left:57%;}
.form2-2-3{width:22%;top:35%;left:45%;}
.form2-2-4{width:22%;top:21%;right:6%;}
.form2-3-1{width:25%;top:10%;left:9%;}
.form2-3-2{width:25%;top:-1%;left:0;right:0;margin:auto;}
.form2-3-3{width:25%;top:-1%;right:9%;}
.form3-1-1{width:20%;top:10%;left:16%;}
.form3-1-2{width:20%;top:10%;left:0;right:0;margin:auto;}
.form3-1-3{width:20%;top:10%;right:16%;}
.form3-2-1{width:35%;top:10%;left:12%;}
.form3-2-2{width:30%;top:45%;left:29%;}
.form3-2-3{width:23%;top:56%;left:61%;}
.form3-2-4{width:35%;top:6%;right:12%;}
.form3-3-1{width:37%;top:10%;left:15%;}
.form3-3-2{width:32%;top:26%;right:15%;}

/*ページャー*/
.fraction{margin:8px 0 0;overflow:hidden;}
.fraction .current{font-size:20px;line-height:1.2;display:inline-block;overflow:hidden;width:24px;}
.fraction .current .num{font-size:20px;letter-spacing:0;color:#2D2A28;display:inline-block;overflow:hidden;line-height:1.2;}
.fraction .current .num.anm-started{-webkit-animation:mv05-fraction .5s cubic-bezier(.2,1,.2,1);animation:mv05-fraction .5s cubic-bezier(.2,1,.2,1)}
.fraction .total{font-size:14px;color:#737b8c;vertical-align:.7em;line-height:1}
.fraction .total::before{content:" / ";color:#737b8c}
@-webkit-keyframes mv05-fraction{
    0%,100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
    50%{-webkit-transform:translateY(-90%);transform:translateY(-90%);opacity:1}
    50.1%{-webkit-transform:translateY(90%);transform:translateY(90%);opacity:0}}
@keyframes mv05-fraction{
    0%,100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
    50%{-webkit-transform:translateY(-90%);transform:translateY(-90%);opacity:1}
    50.1%{-webkit-transform:translateY(90%);transform:translateY(90%);opacity:0}}
.how .meta{justify-content:flex-start;gap:32px;align-items:center;}
.how .swiper-pagination{margin:12px 0 0;position:relative!important;width:auto!important;display:inline-flex;flex-wrap: wrap;gap:2px;justify-content: center;text-align:center;}
.how .swiper-pagination-bullet{width:24px;height:3px;cursor: pointer;transition:0.3s ease-out all;vertical-align:top;background-color:#737b8c;border-radius:0;}
.how .swiper-pagination-bullet-active{width:40px;background:#2D2A28;}

#usecase{padding:0 0 120px;}
#usecase .wrap{width:calc(100% - 32px);max-width: 1400px;margin: 0 auto;padding: 0 170px;}
.list-usecase{display:grid;gap:64px;padding:0 0 64px;margin:56px 0 0;grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));list-style:none;}
.list-usecase .card:nth-of-type(4){display:none;}
.list-usecase .card a{text-decoration:none;}
.list-usecase .card figure{position:relative;}
.list-usecase .card figure figcaption{position:absolute;top:0;left:0;color:#fff;background:#e2e5eb;padding:6px 12px;border-radius:0 0 12px 0;font-size:12px;line-height:1;letter-spacing:0;}
.list-usecase .card.enterprise figure figcaption{background:#e18312;}
.list-usecase .card.salesforce figure figcaption{background:#00a1e0;}
.list-usecase .card .company-name{color:#737b8c;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:0;margin:16px 0 0;}
.list-usecase .card h3{font-size:17px;font-weight: 400;transition-duration: .3s;transition-duration: .15s;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(.4,0,.2,1);letter-spacing: .015em;line-height: 1.5;margin:8px 0 0;color:#2d2a28;}
.list-usecase .card h3 span{transition-duration: .3s;transition-duration: .15s;
    transition-property: background;
    transition-timing-function: cubic-bezier(.4,0,.2,1);padding:0 0 1px;background-repeat: no-repeat;    background-position: 0 100%;    background-size: 0 1px;background-image: linear-gradient(to bottom, currentColor,currentColor);}
.list-usecase .card:hover h3{color:#e2e5eb;}
.list-usecase .card.enterprise:hover h3{color:#e18312;}
.list-usecase .card.salesforce:hover h3{color:#00a1e0;}
.list-usecase .card:hover h3 span{background-size: 100% 1px;}
.list-usecase .card .list-tag{display:flex;gap:4px;flex-wrap: wrap;margin:16px 0 0;}
.list-usecase .card .list-tag li{font-size:12px;color:#737b8c;letter-spacing: .03em;font-weight: 400;line-height: 1;padding:6px 8px;background:#f2f3f5;}
.list-usecase .card .client-figure{border-top:1px solid #ebeef4;margin:20px 0 0;padding:20px 0 0;}
.btn-gradient{transition:0.3s ease-out all;text-decoration:none;display:inline-flex;padding: 12px 24px 12px 16px;align-items: center;gap: 12px;border-radius: 8px;border: 1px solid rgba(255, 255, 255, 0.80);background: linear-gradient(97deg, #F49E00 31.95%, #E66F02 100.16%);box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.07), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02);}
.btn-gradient figure{width:12px;}
.btn-gradient span{color: #FFF;font-size: 13px;font-weight: 700;line-height:1;letter-spacing:0.09em;}
.btn-gradient:hover{transform: scale(0.95);}

#news{background:rgba(241, 242, 244, 0.60);}
#news .wrap{width:calc(100% - 32px);max-width: 1400px;margin: 0 auto;padding:120px 170px;}
#news .wrap .list-news{margin:56px 0;}
#news .wrap .list-news article{max-width:864px;}

.CTA{padding: 96px 40px;background: linear-gradient(90deg, #E66F02 0%, #F49E00 100%);}
.CTA .wrap{justify-content: center;align-items: center;gap: 16px;}
.CTA .wrap p{color:#fff;text-align: center;font-size: 20px;font-weight: 700;line-height:1.3;letter-spacing:0.03em;}
.btn-cta-large{transition:0.3s ease-out all;padding:14px 16px 20px;box-sizing: border-box;width:calc(100% - 32px);max-width:560px;text-decoration:none;display: flex;justify-content: center;align-items: center;gap: 10px;border-radius: 999px;box-shadow: 0 23px 7px 0 rgba(0, 0, 0, 0.00), 0 15px 6px 0 rgba(0, 0, 0, 0.01), 0 8px 5px 0 rgba(0, 0, 0, 0.04), 0 4px 4px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);background:#fff url(img/icon_dl_orange.svg) no-repeat center right 40px;background-size:21px 17px;color:#F49E00;font-size: 18px;font-weight: 700;line-height:1.3;}
.btn-cta-large .en{font-size: 25px;font-weight:600;line-height:1.3;letter-spacing:0;}
.btn-cta-large .en.name{font-size: 22px;}
.btn-cta-large:hover{transform: scale(0.97);box-shadow: 0 11px 3px 0 rgba(0, 0, 0, 0.00), 0 7px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 0 1px 0 rgba(0, 0, 0, 0.16);color:#E66F02;}

footer{padding:80px 0;display:flex;justify-content:center;align-items:center;width:100%;}
footer .wrap{margin:0 auto;display:inline-flex;justify-content:center;flex-direction:column;}
footer .wrap > .flex{gap:4vw;align-items:stretch;}
footer .wrap .inline-flex{}
footer .wrap .inline-flex h5{color: #2D2A28;font-size: 18px;font-weight: 700;line-height:1.8;letter-spacing:0.06em;margin:0 0 8px;}
footer .wrap .inline-flex figure.logo{width:160px;}
.list-link{display:inline-flex;gap:8px;}
.list-link li{font-size: 14px;font-weight: 700;line-height: 1.4;letter-spacing:0;}
.list-link li a{padding:4px 0;color:#2D2A28;text-decoration:none;position:relative;}
.list-link li a::before{background:#F49E00;content: "";width: 100%;height: 1px;position: absolute;left: 0;bottom: 2px;transform-origin: right top;transform: scale(0, 1);transition: transform .3s;}
.list-link li a:hover::before{transform-origin: left top;transform: scale(1, 1);}
.border-hr{width:1px;height:auto;background:rgba(171, 176, 186, 0.40);}
.secondary{}
.list-link-secondary{gap:16px;top:-6px;position:relative;}
.list-link-secondary li{font-size: 12px;font-weight: 400;line-height:1.2;}
.list-link-secondary li a{transition: 0.3s ease-out all;padding:0 4px;color: #525766;text-decoration:none;}
.list-link-secondary li a:hover{opacity:.6;}
footer hr{border-top:1px solid rgba(171, 176, 186, 0.80);margin-top:80px;padding-top:48px;}
footer .copyright{color: #ABB0BA;font-size: 14px;line-height:1;letter-spacing:0;}



/*gnav*/
.navbar{transition:0.3s ease-out all;z-index:50;width:100%;position:fixed;top:40px;left:0;right:0;margin:auto;}
#gnav{width:calc(100% - 80px);max-width:85%;box-sizing:border-box;margin:auto;border-radius: 16px;background: rgba(0, 0, 0, 0.60);box-shadow: 0 191px 53px 0 rgba(0, 0, 0, 0.00), 0 122px 49px 0 rgba(0, 0, 0, 0.01), 0 69px 41px 0 rgba(0, 0, 0, 0.05), 0 31px 31px 0 rgba(0, 0, 0, 0.09), 0 8px 17px 0 rgba(0, 0, 0, 0.10);backdrop-filter: blur(40px);-webkit-backdrop-filter: blur(40px);display:flex;padding: 8px 8px 8px 48px;align-items: center;gap:40px;justify-content:space-between;overflow:hidden;}
#gnav ul.list-link{gap:24px;}
#gnav ul.list-link a{color:#fff;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:0.03em;transition: 0.3s ease-out all;}
#gnav ul.list-link a.en{font-size:17px;font-weight:600;letter-spacing:0.06em;}
#gnav ul.list-link a:hover{color:#F49E00;}
#gnav .navbar_logo{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
#gnav .list-cta{align-items: center;gap:24px;}
#gnav .list-cta .btn-white{display:flex;padding:12px 24px 12px 16px;align-items:center;gap:12px;background:#fff;border-radius:8px;box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.03), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02);text-decoration:none;transition:0.3s ease-out all;}
#gnav .list-cta .btn-white figure{width:17px;}
#gnav .list-cta .btn-white .text{color:#2D2A28;font-size:13px;line-height:1;letter-spacing:0.09em;font-weight:700;}
#gnav .list-cta .btn-white:hover{transform: scale(0.95);}
#gnav .list-cta .btn-text{color:#fff;font-size:13px;text-decoration:none;transition:0.3s ease-out all;letter-spacing:0;}
#gnav .list-cta .btn-text:hover{color:#F49E00;}

.hamburger-menu{cursor:pointer;gap:5px;align-items:center;justify-content:center;width:32px;height:20px;padding:12px 16px;background:#fff;border-radius:8px;box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.03), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02);text-decoration:none;transition:0.3s ease-out all;box-sizing: content-box;}
.hamburger-menu span{display:block;width:6px;height:6px;border-radius:999px;background:#2D2A28;}
.hamburger-menu[aria-expanded="true"]{transform: scale(0.95);}
.hamburger-menu[aria-expanded="true"] span:nth-child(1){-webkit-animation:loadingC .6s .1s linear infinite;animation:loadingC .6s .1s linear infinite;}
.hamburger-menu[aria-expanded="true"] span:nth-child(2){-webkit-animation: loadingC .6s .2s linear infinite;animation: loadingC .6s .2s linear infinite;}
.hamburger-menu[aria-expanded="true"] span:nth-child(3){-webkit-animation: loadingC .6s .3s linear infinite;animation: loadingC .6s .3s linear infinite;}
@keyframes loadingC{
0%{transform: translate(0, 0);opacity: 1;}
33%{transform: translate(0, -4px);opacity: 0.5;}
66%{transform: translate(0, 4px);opacity: 0.75;}
100%{transform: translate(0, 0);opacity: 1;}
}


.sp-menu-wrapper{box-shadow: 0 191px 53px 0 rgba(0, 0, 0, 0.00), 0 122px 49px 0 rgba(0, 0, 0, 0.01), 0 69px 41px 0 rgba(0, 0, 0, 0.05), 0 31px 31px 0 rgba(0, 0, 0, 0.09), 0 8px 17px 0 rgba(0, 0, 0, 0.10);z-index:100;display:none;opacity:0;position:fixed;top:88px;right:0;padding:32px;border-radius: 16px;background: #fff;box-sizing:border-box;}
.sp-menu-wrapper.active{display: block;animation: fadeDown2 .5s forwards ease-out;}
@keyframes fadeDown2{
0%{opacity: 0;transform: translateX(0px) translateY(-40px);}
100%{opacity: 1;transform: translateX(-24px) translateY(0);}
}
.sp-menu-wrapper.fade-out{animation: fadeUp2 0.5s forwards ease-in;display: block;}
@keyframes fadeUp2{
0%{opacity:1;transform: translateX(-24px) translateY(0);}
100%{opacity:0;transform: translateX(0px) translateY(-40px);}
}
.sp-menu-wrapper .list-sp-menu{gap:24px;padding-left:6px;}
.sp-menu-wrapper .list-sp-menu li{position:relative;font-size: 16px;font-weight:700;line-height:1.2;letter-spacing:0;}
.sp-menu-wrapper .list-sp-menu li::before{content:"";width:8px;height:2px;position:absolute;top:10px;left:-12px;background:#F49E00;}
.sp-menu-wrapper .list-sp-menu li a{transition: 0.3s ease-out all;padding:0 4px;color: #2D2A28;text-decoration:none;opacity:1;}
.sp-menu-wrapper .list-sp-menu li a:hover{opacity:0.6;}



/*追従CTA*/
.floating-cta{z-index:49;display:inline-flex;position:fixed;bottom:24px;right:24px;}
.floating-cta a{text-decoration:none;display:inline-flex;padding:8px 12px 8px 8px;box-sizing:content-box;gap:12px;justify-content:center;border-radius:8px;border: 1px solid rgba(255, 255, 255, 0.01);background: rgba(0, 0, 0, 0.60);box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.07), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02);backdrop-filter: blur(40px);-webkit-backdrop-filter: blur(40px);transition: 0.3s ease-out all;}
.floating-cta a figure{width:112px;height:63px;overflow:hidden;border-radius:4px;}
.floating-cta a figure img{object-fit:cover;}
.floating-cta a .text{gap:8px;justify-content: center;}
.floating-cta a .text p{margin:0;color: #FFF;font-size: 18px;font-weight:600;line-height:1;letter-spacing:0;}
.floating-cta a .text h5{margin:0;gap:6px;line-height:1;}
.floating-cta a .text h5 span{color: rgba(255, 255, 255, 0.70);font-size: 16px;font-weight:600;}
.floating-cta a .text h5 figure{width:14px;height:14px;}
.floating-cta a .text h5 figure img{object-fit:contain;}
.floating-cta a:hover{transform: scale(0.95);}






/*レスポンシブ*/
@media screen and (max-width:1410px) {
.logos{width:calc(100% - 32px);margin:32px auto;}
.list-news article{width:calc(100% - 80px);margin:0 auto;}
#about{padding:0 0 80px;}
#about .cards{padding:0;width:calc(100% - 80px);}
#functions{padding:80px 4vw;}
#functions .function-main{margin:32px 0 40px;}
#functions .function-main ul{width:calc(100% + 4vw);}
#functions .function-main ul li .text{padding:48px 24px 32px 24px;}
#functions .function-main ul li .text h3::before{top:-24px;left:0;}
#functions ul.function-sub li.kanban{width: calc((100% - 16px) / 3);padding:24px;}
#functions ul.function-sub li.kanban p{font-size:16px;}
#how .wrap{width: calc(100% - 32px);padding:0 4vw;}
.how-tabs{margin:0 0 32px;border-radius:8px;}
.how-tab{font-size:14px;padding:10px 16px 12px;border-radius:4px;}
.how p.align-right{font-size:14px;letter-spacing:0;}
.how-slider{padding-left:calc(4vw + 16px);width:100%!important;}
.how-slider::after{width:160px;}
.swiper-slide .card .caption{padding:14px 20px;}
.swiper-slide .card .caption h4{font-size:16px;}
.swiper-slide .card .caption p{font-size:14px;letter-spacing:0;}
#usecase{padding:0 0 80px;}
#usecase .wrap{padding:0 4vw;}
#news .wrap{padding:80px 4vw;}
#news .wrap .list-news{margin:32px 0;}

}

@media screen and (max-width:1170px) {
#gnav {width: calc(100% - 32px);max-width:none;padding: 8px 8px 8px 32px;}
#gnav ul.list-link{gap:16px;}

}

@media screen and (max-width:1129px) {
.list-usecase .card:nth-of-type(4){display:block;}
}

@media screen and (max-width:1040px) {
.navbar{top:16px;}
#gnav{justify-content:flex-end;}
#gnav ul.list-link{display:none;}
#gnav .list-cta{display:none;}
.hamburger-menu{display:flex!important;}
}

@media screen and (max-width:980px) {
#gnav{padding:8px;}
#header{padding:0;background-size: auto 82vw;}
#header .wrap{padding:550px 4vw 56px;}
#header .wrap h1{font-size:5.2vw;margin-bottom:16px;}
#header .wrap h2{font-size:3.2vw;margin-bottom:16px;}
#header .wrap p{font-size:14px;}
#header .wrap2 h2.underline{font-size:3.2vw;padding-bottom:16px;}
.logos{padding:16px 0;margin:16px auto 24px;width:100%;border-radius:0;}
.logos .row+.row{margin-top:8px;}
.logos .slider figure{width:120px;}
.logos::before, .logos::after{width:56px;}
.list-news{gap:8px;}
.list-news article{width:calc(100% - 8vw);}
#news .list-news article{width:100%;}
.list-news article a{padding:16px 16px 16px 24px;flex-wrap:wrap;gap:8px;background:#fff;}
.list-news article a:hover{padding:16px 16px 16px 24px;background:#fff;}
.list-news article a .text{gap:4px;width:calc(100% - 130px - 8px);}
.title-content{}
#how{padding:80px 0;}
.how{padding:32px 0 0;}
.how p.align-right{top:auto;bottom:14px;right:4vw;z-index:11;}
#how .wrap{width:100%;}
.how-tabs{margin:0 0 24px;}
.how-slider{padding-left:4vw;}
.swiper-slide{width:80%!important;aspect-ratio:1 / 1.2;}
.swiper-slide .card{width:100%;height:100%;}
.swiper-slide .card img{}
.how-slider::after{width:80px;}
.swiper-slide .card .caption{width:calc(100% - 48px);}
.swiper-slide .card .caption p{font-size:14px;}
.swiper-slide figure{border-radius:4px;padding:4px;}
.form1-1-1{width:65%;top:5%;left:5%;}
.form1-1-2{width:55%;top:35%;right:5%;}
.form1-2-1{width:90%;top:15%;left:0;right:0;margin:auto;}
.form1-3-1{width:65%;top:5%;left:5%;}
.form1-3-2{width:55%;top:35%;right:5%;}
.form2-1-1{width:35%;top:5%;left:4%;}
.form2-1-2{width:20%;top:15%;left:35%;}
.form2-1-3{width:20%;top:45.5%;left:35%;}
.form2-1-4{width:23%;top:5%;left:50%;}
.form2-1-5{width:35%;top:25%;right:4%;}
.form2-1-6{width:20%;top:48.5%;right:17%;}
.form2-2-1{width:55%;top:10%;left:5%;}
.form2-2-2{width:24%;top:5%;left:50%;}
.form2-2-3{width:22%;top:35%;left:42%;}
.form2-2-4{width:30%;top:23%;right:5%;}
.form2-3-1{width:30%;top:auto;bottom:35%;left:4%;}
.form2-3-2{width:30%;top:auto;bottom:35%;left:0;right:0;margin:auto;}
.form2-3-3{width:30%;top:auto;bottom:35%;right:4%;}
.form3-1-1{width:30%;top:12%;left:4%;}
.form3-1-2{width:30%;top:12%;left:0;right:0;margin:auto;}
.form3-1-3{width:30%;top:12%;right:4%;}
.form3-2-1{width:55%;top:10%;left:5%;}
.form3-2-2{width:35%;top:auto;bottom:32%;left:15%;}
.form3-2-3{width:40%;top:auto;bottom:32%;left:53%;}
.form3-2-4{width:40%;top:6%;right:5%;}
.form3-3-1{width:65%;top:10%;left:5%;}
.form3-3-2{width:55%;top:43%;right:5%;}
.floating-cta{bottom:8px;right:8px;}
footer .wrap{padding:0 4vw;}
footer .wrap > .flex{flex-wrap:wrap;}
footer .wrap .inline-flex:nth-of-type(1){width:100%;}
}

@media screen and (max-width:860px) {
#header{padding:0;background-size: auto 700px;}
#functions ul.function-sub li.kanban{width:calc((100% - 8px) / 2);padding:3.2vw;}
#functions ul.function-sub li.kanban p{font-size:14px;}
}

@media screen and (max-width:600px) {
.title-content{width:100%;}
.title-content .title-circle{justify-content: center;}
.title-content .flex{flex-direction:column;gap:12px;transform: scale(0.8);}
.title-circle{width:100%;}
#about::after{aspect-ratio: 1 / 2.4;transform: translateY(15%);width:100vw;}
#about h2 + p{}
#about .cards{max-width:none;width:100%;padding:0 8vw;}
#about .cards ul{gap:8px;}
#about .cards ul li{width:100%;padding:24px;gap:24px;}
#about .cards ul li .flex{gap:8px;}
#about .cards ul li .flex h3{font-size:4vw;}
#about .cards ul li .flex p{font-size:14px;}
#functions .function-main ul{width:100%;flex-direction:column;}
#functions ul.function-sub li.kanban{width:100%;}
#functions ul.function-sub li.kanban p.spacing-small{letter-spacing:0.06em;}
.CTA{padding:80px 4vw;}
.btn-cta-large{max-width:none;width:100%;font-size:15px;background: #fff url(img/icon_dl_orange.svg) no-repeat center right 24px;background-size: 21px 17px;}
.btn-cta-large .en{font-size:19px;}
.btn-cta-large .en.name{font-size:16px;}
.border-hr{width:100%;height:1px;}
}

@media screen and (max-width:440px) {
.how-tab{padding:8px 12px 9px;letter-spacing:0;}
.swiper-slide{width:80%!important;aspect-ratio:1 / 1.614;}
}