html{
  font-size: 62.5%;
}
html,body,main,article{
  width: 100%;
  margin: 0;
  padding: 0;
}
body{
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  height: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  color: #4C4948;
}
.din{
  font-family: din-2014, sans-serif;
  font-weight: 400;
  font-style: normal;
}
img{
  width: 100%;
  height: auto;
}
img.blank{
  width: 1rem;
  vertical-align:top;
}
#loading{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#ffffff;
  text-align:center;
  top: 0;
  left: 0;
  visibility: visible;
  transition: 0.6s visibility,0.6s opacity;
}
#loading.complete{
  opacity: 0;
  visibility: collapse;
}
.progressbar-text{
  font-family: din-2014, sans-serif;
}
#loading-logo{
  width: 7rem;
  height: auto;
  position: absolute;
  margin-top: -6rem;
}
@-webkit-keyframes loading-logo-animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
@keyframes loading-logo-animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
#loading-logo .svg-elem-1 {
  -webkit-animation: loading-logo-animate-svg-fill-1 1s ease-in-out 0.5s both;
  animation: loading-logo-animate-svg-fill-1 1s ease-in-out 0.5s both;
}
@-webkit-keyframes loading-logo-animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: url("#_loading-logo_177");
  }
}
@keyframes loading-logo-animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: url("#_loading-logo_177");
  }
}
#loading-logo .svg-elem-2 {
  -webkit-animation: loading-logo-animate-svg-fill-2 1s ease-in-out 0.6s both;
  animation: loading-logo-animate-svg-fill-2 1s ease-in-out 0.6s both;
}
@-webkit-keyframes loading-logo-animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
@keyframes loading-logo-animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
#loading-logo .svg-elem-3 {
  -webkit-animation: loading-logo-animate-svg-fill-3 1s ease-in-out 0.7s both;
  animation: loading-logo-animate-svg-fill-3 1s ease-in-out 0.7s both;
}
@-webkit-keyframes loading-logo-animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
@keyframes loading-logo-animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(68, 68, 68);
  }
}
#loading-logo .svg-elem-4 {
  -webkit-animation: loading-logo-animate-svg-fill-4 1s ease-in-out 0.8s both;
  animation: loading-logo-animate-svg-fill-4 1s ease-in-out 0.8s both;
}
#scroller{
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  width: 1px;
  height: 10rem;
  z-index: 0;
  background: #eeeeee;
}
.progress-bar{
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
  background: #84B43E;
}
body.home #scroller{
  z-index: 2;
}
.c-scrollbar_thumb{
  width: 3px;
  margin: 4px;
}
#notfound{
  height: calc(100vh - 26.8rem);
}
#notfound .inner{
  height: 100%;
}
#notfound .conductor{
  position: absolute;
  z-index: 1;
}
#notfound .conductor p.title{
  font-size: 2rem;
  margin-bottom: 1em;
}
#notfound .conductor p.note{
  margin-bottom: 4rem;
}
#cgx_notfound_logo{
  opacity: 0.3;
  filter: blur(10px);
}
br.sp{
  display: none;
}
/**/
.flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content:center;
  -moz-justify-content:center;
  -ms-justify-content:center;
  -o-justify-content:center;
  justify-content:center;
  -webkit-align-items:center;
  -moz-align-items:center;
  -ms-align-items:center;
  -o-align-items:center;
  align-items:center;
}
.nowrap{
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  -o-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
.reverse{
  -webkit-flex-flow: row-reverse wrap;
  -moz-flex-flow: row-reverse wrap;
  -ms-flex-flow: row-reverse wrap;
  -o-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
}
.column{
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  -o-flex-flow: column;
  flex-flow: column;
}
.column-reverse{
  -webkit-flex-flow: column-reverse;
  -moz-flex-flow: column-reverse;
  -ms-flex-flow: column-reverse;
  -o-flex-flow: column-reverse;
  flex-flow: column-reverse;
}
.flex-align-left{
  -webkit-align-items:flex-start;
  -moz-align-items:flex-start;
  -ms-align-items:flex-start;
  -o-align-items:flex-start;
  align-items: flex-start;
}

.flex-align-right{
  -webkit-align-items:flex-end;
  -moz-align-items:flex-end;
  -ms-align-items:flex-end;
  -o-align-items:flex-end;
  align-items: flex-end;
}
.flex-align-baseline{
  -webkit-align-items:baseline;
  -moz-align-items:baseline;
  -ms-align-items:baseline;
  -o-align-items: baseline;
  align-items: baseline;
}
.flex-align-end{
  -webkit-align-items:flex-end;
  -moz-align-items:flex-end;
  -ms-align-items:flex-end;
  -o-align-items: flex-end;
  align-items: flex-end;
}
.flex-align-stretch{
  -webkit-align-items:stretch;
  -moz-align-items:stretch;
  -ms-align-items:stretch;
  -o-align-items: stretch;
  align-items: stretch;
}
.flex-between{
  -webkit-justify-content:space-between;
  -moz-justify-content:space-between;
  -ms-justify-content:space-between;
  -o-justify-content:space-between;
  justify-content: space-between;
}
.flex-evenly{
  -webkit-justify-content:space-evenly;
  -moz-justify-content:space-evenly;
  -ms-justify-content:space-evenly;
  -o-justify-content:space-evenly;
  justify-content:space-evenly;
}
.flex-justify-center{
  -webkit-justify-content:center;
  -moz-justify-content:center;
  -ms-justify-content:center;
  -o-justify-content:center;
  justify-content: center;
}
.flex-justify-left{
  -webkit-justify-content:flex-start;
  -moz-justify-content:flex-start;
  -ms-justify-content:flex-start;
  -o-justify-content:flex-start;
  justify-content: flex-start;
}
.flex-justify-right{
  -webkit-justify-content:flex-end;
  -moz-justify-content:flex-end;
  -ms-justify-content:flex-end;
  -o-justify-content:flex-end;
  justify-content: flex-end;
}
.wrapper{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.dots::before,.dots::after,.dots span{
  width: 0.4rem;
  height: 0.4rem;
  background: #8B8B8B;
  border-radius: 0.4rem;
  transition: transform 0.3s cubic-bezier(.1,.5,.2,1), ease-out 0.3s,-webkit-transform 0.3s cubic-bezier(.1,.5,.2,1);
}
.dots::before,.dots::after{
  content: '';
}
.dots span{
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.link.btn{
  padding: 1.6rem 3.2rem;
  border-radius: 6.4em;
  background: #8B8B8B;
  line-height: 1;
}
.btn.dots:hover span{
  opacity: 0;
}
.link.btn.more{
  font-size: 1.2rem;
  color: #ffffff;
}
.link.btn.more .dots{
  width: 2.8rem;
}
.link.btn.more .dots::before, .link.btn.more .dots::after, .link.btn.more .dots span{
  background: #ffffff;
}
.link.btn.more .cap{
  margin-left: 0.5em;
}
.link.btn.more:hover{
  background: #84B43E;
}
.archive.single .link.btn.more,
#related .link.btn.more{
  width: 26rem;
}
/**/
header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background: rgb(255 255 255 / 0%);
  transition:background-color 1s ease;
  z-index: 100;
}

header.on{
  background: rgb(255 255 255 / 100%);
}
header ul.inner{
  padding: 2.4rem;
  position: relative;
  z-index: 10;
}
header li#bi img,
header li#bi #cgx_head_logo{
  width: 18rem;
}
header li#bi:hover #cgx_head_logo,
header li#bi:hover span{
  filter: invert(1);
}
header li#bi #cgx_head_logo,
header li#bi span{
  margin-left: 1.4rem;
  transition: filter 0.3s ease;
}
header li#content_main{
  margin-left: auto;
  margin-right: 2.4rem;
}
header li#content_main li{
  margin-left: 2.4rem;
}
header li#content_main li a:hover{
  color: #84B43E;
}
header li#cv{
  line-height: 0;
}
#gmenu{
  display: none;
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgb(239 239 239 / 97%) 0% 0% no-repeat padding-box;
  mix-blend-mode: lighten;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  top: 0;
  left: 0;
  z-index: 9;
  padding: 0 3.2rem;
}
#gmenu.on{
  display: flex;
}
#gmenu .menu_list{
  margin-top: auto;
  margin-left: 3.2rem;
}
#gmenu .menu_list li.menu{
  font-size: 1.8rem;
  margin-bottom: 1.75em;
}
#gmenu .menu_list li.menu:last-of-type{
  margin-bottom: 0;
}
#gmenu .lower{
  margin-top: auto;
  padding-bottom: 3.2rem;
  width: 100%;
  align-items: flex-end;
}
#gmenu .menu_list li.menu .hovermenu{
  position: absolute;
  padding-left: 35%;
  width: 100%;
  height: max-content;
  margin-left: auto;
  margin-right: 6.4rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  display: none;
}
#gmenu .menu_list li.menu .works.list{
  gap: 0;
}
#gmenu .menu_list li.menu .hovermenu.creators{
align-items: flex-start;
gap: 3.2rem;
}
#gmenu .menu_list li.menu .hovermenu.creators::after{
  content: '';
  width: calc(100% / 4 - 2.4rem);
}
#gmenu .menu_list li.menu .sp.link{
  display: none;
}
#gmenu .menu_list li.menu a.flex{
  position: relative;
  z-index: 1;
}
.hvrTxt{
  display: none;
}
#gmenu .menu_list li.menu:hover a{
  color: #84B43E;
}
#gmenu .menu_list li.menu.hvr .hvrTxt{
  display: inline-block;
  margin-right: 0.25em;
}
#gmenu .menu_list li.menu.hvr .hovermenu{
  display: flex;
  align-items: flex-start;
}
#menubg_logo{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  opacity: .3;
}
.menu_list .link.dots{
  margin-right: 0.6rem;
}
.menu.btn{
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 2.4rem;
  border-radius: 100%;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.1,.5,.2,1), ease-out 0.3s,-webkit-transform 0.3s cubic-bezier(.1,.5,.2,1);
}
.menu.btn:hover{
  background: #84B43E;
  transform: rotate(90deg);
}
.menu.btn.dots:hover span{
  display: none;
}
.menu.btn.dots:hover::before,
.menu.btn.dots:hover::after{
  width: 2rem;
  height: 0.2rem;
  background: white;
  position: absolute;
  transform: rotate(90deg);
}
.menu.btn.dots:hover::before{
  left: 0.5rem;
}
.menu.btn.dots:hover::after{
  right: 0.5rem;
}
.menu.btn.on{
  background: #84B43E;
}
.menu.btn.dots.on::before,
.menu.btn.dots.on::after,
.menu.btn.dots.on:hover::before,
.menu.btn.dots.on:hover::after{
  width: 2rem;
  height: 0.2rem;
  background: white;
  position: absolute;
  transform: rotate(45deg);
}
.menu.btn.dots.on::before,
.menu.btn.dots.on:hover::before{
  transform: rotate(315deg);
}
.menu.btn.dots.on:hover::before{
  left: inherit;
}
.menu.btn.dots.on:hover::after{
  right: inherit;
}
.modal.on .menu.btn.dots.on:hover::after{
  right: 0.8rem;
}
.link.btn.contact{
  background: transparent linear-gradient(270deg, #84b43e 0%, #c0df91 100%) 0% 0% no-repeat padding-box;
  color: white;
  transition: all 0.3s ease;
}
.link.btn.contact:hover{
  filter: grayscale(0.9);
}
header .link.btn.contact{
  font-size: 1.2rem;
  padding: 1rem 2.8rem;
}
footer{
  background: #ffffff;
  position: relative;
  z-index: 1;
}
.lower footer{
  border-top: 1px solid #444444;
}
footer .inner{
  padding: 0 3.2rem 3.2rem;
}
footer .upper{
  text-align: center;
  margin-bottom: 9.6rem;
  position: relative;
}
footer .upper .menu.btn{
  margin-left: 0;
  position: absolute;
  right: 3.2rem;
  top: -1.8rem;
  background: white;
}
footer .upper .menu.btn:hover{
  background: #84B43E;
  transform: rotate(0deg);
}
footer .upper .menu.btn.dots span{
  margin: 0.4rem 0;
}

footer .upper .menu.btn.dots:hover::before{
  transform: rotate(-45deg);
  left: 1rem;
  margin: auto;
  top: 1.1rem;
  width: 1rem;
}
footer .upper .menu.btn.dots:hover span{
  display: block;
  opacity: 1;
  transform: rotate(45deg);
  width: 1rem;
  height: 0.2rem;
  background: #ffffff;
  top: 0.7rem;
  position: absolute;
  right: 1rem;
}
footer .upper .menu.btn.dots:hover::after{
  transform: rotate(0deg);
  width: 0.2rem;
  height: 2rem;
  left: 0;
  right: 0;
  margin: auto;
}
footer .upper p{
  font-size: 1.2rem;
  line-height: 1.75;
}
footer .lower{
  align-items: flex-end;
}
footer .company img,
#gmenu .company img{
  max-width: 12rem;
}
footer .company li,
#gmenu .company li{
  font-size: 1.2rem;
  letter-spacing: 0;
}
footer .company li::before,
#gmenu .company li::before{
  content: '|';
  margin: 0 0.6rem;
}
footer .company li:first-of-type::before,
#gmenu .company li:first-of-type::before{
display: none;
}
footer .company .jp .lang-item-ja,
#gmenu .company .jp .lang-item-ja,
footer .company .en .lang-item-en,
#gmenu .company .en .lang-item-en{
display: none;
}

footer .copyright,
#gmenu .copyright{
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}
#isms{
  width: 3.2rem;
  vertical-align: middle;
  margin-left: 1rem;
}
footer .link.btn.contact{
  position: relative;
  top: -2.3rem;
  min-width: 26rem;
}
.contents{
  position: relative;
}
.tbox{
  writing-mode: vertical-lr;
  /*position: sticky;*/
  position: absolute;
  left: 2.4rem;
  height: max-content;
}
#top .tbox{
  top: 9.6rem;
}
.tbox h2{
  font-size: 3rem;
  margin-bottom: 1.4rem;
}
.tbox h3{
  font-size: 1.4rem;
}
.contents .inner{
  max-width: calc(1480px + 19.2rem);
  width: 100%;
  margin: 0 auto;
  padding: 9.6rem;
}
.post_tags{
  margin-bottom: 1.8rem;
}
.creators.post .post_tags{
  margin-top: 1rem;
}
.post_tags a{
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  color: #8B8B8B;
  border: 1px solid #8B8B8B;
  border-radius: 3.2rem;
  letter-spacing: 0.1em;
  margin-right: 0.8rem;
  margin-bottom: 0.8rem;
}
.post_tags a.all{
  background: #8B8B8B;
  color: #ffffff;
}
.tag .post_tags a.all{
  background: #ffffff;
  color: #8B8B8B;
}
.post_tags a:hover{
  opacity: 0.5;
}
li.post{
  border-radius: 1.6rem;
  overflow: hidden;
  margin-bottom: 5rem;
  position: relative;
  width: 100%;
  transition: opacity 0.5s ease 0.3s;
  opacity: 0;
}
li.post.is-inview{
  opacity: 1;
}
li.post a.cover{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
li.post .view.detail{
  font-size: 1rem;
  letter-spacing: 0.1em;
}
li.post .view.detail .cap{
  opacity: 0;
}
.post.wrap.hvr .view.detail .dots::before,
.menu_list a:hover .dots::before,
.link.btn.more:hover .dots::before{
  width: 2rem;
  background: #84B43E;
}
.pagenavi a.next .dots,
.pagenavi a.prev .dots{
  width: 2.8rem;
}
.pagenavi a.next:hover .dots::before,
.pagenavi a.prev:hover .dots::after{
  width: 2rem;
  background: #84B43E;
}
.link.btn.more:hover .dots::before{
  width: 2rem;
  background: #ffffff;
}

.post.wrap.hvr .view.detail .dots .dot,
.post.wrap.hvr .view.detail .dots::after,
.menu_list a:hover .dots .dot,
.menu_list a:hover .dots::after,
.link.btn.more:hover .dots .dot,
.link.btn.more:hover .dots::after,
.pagenavi a.next:hover .dots .dot,
.pagenavi a.next:hover .dots::after,
.pagenavi a.prev:hover .dots .dot,
.pagenavi a.prev:hover .dots::before{
  width: 0;
  opacity: 0;
}


.post.wrap.hvr .view.detail .cap{
  opacity: 1;
  color: #84B43E;
}
li.post .post_tags{
  position: relative;
  z-index: 10;
}
.postAnim{
  transition: transform 0.5s cubic-bezier(.1,.5,.2,1), ease-out 0.5s,-webkit-transform 0.5s cubic-bezier(.1,.5,.2,1);
}
/*bg*/
#top{
  background-color: #F4F4F4;
}
#top::before{
  content: '';
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -0;
  opacity: 0.15;
  background-image: url('../img/bg/to_bg_material.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
/*intro*/
.tagline{
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  height: max-content;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  /*margin: auto;*/
  transition: .8s ease-in-out;
}
.tagline.change{
  color: white;
}
.tagline.change.finish{
  /*margin-top: calc(100svh - 10.75vw);*/
  margin-top: calc(100svh - 6.35vw);
}

.tagline .smoothText{
  overflow: hidden;
  display: block;
  /*font-size: 10.75vw;*/
  font-size: 6.35vw;
  margin-left: -1.35vw;
  letter-spacing: 0;
}
.tagline .smoothTextTrigger{
  transition: .8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin: left;
  display: block;
}
.tagline .smoothTextTrigger.smoothTextAppear{
  transform: translate3d(0,0,0) skewY(0);
}
.tagline.change.finish .smoothTextTrigger.smoothTextAppear{
  background: linear-gradient(90deg, #ffffff 10%, rgb(255 255 255 / 0%) 100%);
  background: -webkit-linear-gradient(90deg, #ffffff 10%, rgb(255 255 255 / 0%) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.copy{
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  font-weight: 300;
  line-height: 1.5;
  width: max-content;
  transition: .5s ease-in-out;
  opacity: 0;
  z-index: 1;
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  z-index: 4
}
.copy.change{
  left: calc(-100vw + 24rem + 14rem);
}
/*fv*/
#fv{
  width: 100vw;
  height: 100svh;
  position: relative;
}
#fv::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(239 239 239 / 30%) 0% 0% no-repeat padding-box;
  mix-blend-mode: lighten;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1;
}
#fv video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  position: relative;
  z-index: 0;
  transform: scale(1.5);
  transition: 1s ease-in-out 0.3s;
  will-change: transform,opacity;
}
#fv #title_logo{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  opacity: 0;
  transform: scale(1.2);
  transition: transform 3s cubic-bezier(.1,.5,.2,1), ease-out 3s,-webkit-transform 3s cubic-bezier(.1,.5,.2,1);
}
#fv #title_logo.on{
  opacity: 1;
  transform: scale(1);
}
#fv video.on{
  transform: scale(1);
  opacity: 1;
}
#playMov{
  width: 7.6rem;
  height: 7.6rem;
  position: absolute;
  z-index: 5;
  font-size: 1rem;
  color: #84B43E;
  border: 1px solid #84B43E;
  border-radius: 100%;
  text-align: center;
  cursor: pointer;
  position: absolute;
  visibility: hidden;
  mix-blend-mode: multiply;
  transform: translateY(50px);
  transition: transform 1s cubic-bezier(.1,.5,.2,1), ease-out 1s,-webkit-transform 1s cubic-bezier(.1,.5,.2,1);
}
#playMov.on{
  visibility: visible;
  transform: translateY(0);
}
#playMov span{
  white-space: nowrap;
  margin-left: 0.25rem;
}
#playMov .dot{
  content: '';
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  background: #84B43E;
  opacity: 0;
  border-radius: 100%;
}
#playMov:hover{
  background: white;
  transform: scale(0.7);
}
#playMov:hover span{
  color: #BF4AD8;
  transform: scale(1.5);
}
/*works*/
.works.post.wrap{
  position: relative;
  z-index: 0;
}
.works.post.wrap .alpha,.works.post.wrap .beta{
  width: 50%;
}
.works.post.wrap .alpha.related,.works.post.wrap .beta.related{
  width: 100%;
}
.works.post.wrap .alpha .works_thumb{
  aspect-ratio: 1 / 1;
}
.works.post.wrap .alpha.related .works_thumb.solution,
.works.post.wrap .alpha.related .works_thumb.insights{
  aspect-ratio: 16 / 9;
}
.works.post.wrap .beta.related .content_meta-item{
  aspect-ratio: inherit;
}
#related .works.list li.post:first-of-type .works.post.wrap .beta.related .content_meta-item{
  padding: 2rem 0 0 0;
}
#related .works.list li#SOLUTION.post:first-of-type,
#related .works.list li#INSIGHTS.post:first-of-type{
border-radius: 0;
}
#related .works.list li#SOLUTION.post:first-of-type .alpha.related,
#related .works.list li#INSIGHTS.post:first-of-type .alpha.related{
  border-radius: 1.6rem;
  overflow: hidden;
}
.works.post.wrap .beta.related .post_tags{
  font-size: 0.9rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.works.post.wrap .beta.related .post_tags li{
  margin-right: 0.75em;
}
.works.post.wrap .beta.related.solution .content_meta-item h4{
  margin-bottom: 0.5em;
  font-size: 1.3rem;
  color: #808080;
}
.works.list li.post .mark {
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    background: #ffffff;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 100%;
}
.works.list li.post .alpha.related .mark img {
    width: 1.2rem;
    height: auto;
    object-fit: contain;
}
.works.post.wrap .works_thumb{
  position: relative;
  z-index: 0;
}
.works.post.wrap .works_thumb::before,
.solution.post.wrap .solution_thumb::before,
.insights.post.wrap .insights_thumb::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgb(0 0 0 / 0%);
  transition: transform 0.5s cubic-bezier(.1,.5,.2,1), ease-out 0.5s,-webkit-transform 0.5s cubic-bezier(.1,.5,.2,1);
}
.archive .works.post.wrap .works_thumb::before{
  border-radius: 1.6rem;
}
.works.post.wrap.hvr .works_thumb::before,
.solution.post.wrap.hvr .solution_thumb::before,
.insights.post.wrap.hvr .insights_thumb::before{
  background: rgb(0 0 0 / 50%);
}
.works.post.wrap.nolink.hvr .works_thumb::before{
  background: rgb(0 0 0 / 0%);
}
.works.post.wrap .alpha .works_thumb img,
.works.post.wrap .beta .works_thumb img{
  height: 100%;
  object-fit: cover;
  transition-duration: 1s;
}
.works.post.wrap .beta .works_thumb img{
  transform: scale(1.1);
}
.works.post.wrap .beta .works_thumb,
.works.post.wrap .beta .content_meta-item{
  aspect-ratio: 16 / 8;
}
.works.post.wrap .alpha .works_thumb,
.works.post.wrap .beta .works_thumb{
  overflow: hidden;
}
.works.post.wrap.hvr .alpha .works_thumb img,
.solution.post.wrap.hvr .alpha .solution_thumb img,
.insights.post.wrap.hvr .alpha .insights_thumb img{
  transform: scale(1.1);
  transition-duration: 6s;
}
.works.post.wrap.nolink.hvr .alpha .works_thumb img{
  transform: scale(1);
}
.works.post.wrap.hvr .beta .works_thumb img{
  transform: scale(1);
  transition-duration: 6s;
}
.works.post.wrap .beta .content_meta-item{
  padding: 0 4.2rem;
}
.content_meta-item h3{
  font-size: 1.6rem;
  margin-bottom: 1em;
  line-height: 1.5;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#related li.works.post .content_meta-item h3{
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.works.post .content_meta-item h3.din{
  letter-spacing: 0.12em;
}
.archive.contents .creators .content_meta-item h3{
  margin-bottom: 0.25em;
}
.post.wrap.hvr h3,.post.wrap.hvr h6{
  color: #84B43E;
}
.post.wrap.nolink.hvr h3,.post.wrap.nolink.hvr h6{
  color:#4C4948;
}
/*solution - insights*/
#onesource .cls-1{clip-path:url(#onesource_clippath);}
#onesource .cls-2,#onesource .cls-3,#onesource .cls-4{fill:none;}
#onesource .cls-2,#onesource .cls-5,#onesource .cls-6{stroke-width:0px;}
#onesource .cls-7,#onesource .cls-8{stroke-width:2px;}
#onesource .cls-7,#onesource .cls-8,#onesource .cls-9{fill:#fff;}
#onesource .cls-7,#onesource .cls-8,#onesource .cls-3,#onesource .cls-4{stroke-miterlimit:10;}
#onesource .cls-7,#onesource .cls-3,#onesource .cls-4{stroke:#9ece62;}
#onesource .cls-8{stroke:#678446;}
#onesource .cls-10{clip-path:url(#onesource_clippath-1);}
#onesource .cls-11{clip-path:url(#onesource_clippath-2);}
#onesource .cls-12,#onesource .cls-9{font-size:1.4rem;}
#onesource .cls-12,#onesource .cls-9,#onesource .cls-13,#onesource .cls-14{font-weight:500;}
#onesource .cls-12,#onesource .cls-13{fill:#444;}
#onesource .cls-14{fill:#84b43e;font-size:27px;}
#onesource .cls-5{fill:#9ece62;}
#onesource .cls-6{fill:#e2f1d0;}
#onesource .cls-4{opacity:.51;}

#multiuse text{fill:#444444;font-size: 1rem;letter-spacing: 0.1em;}
#multiuse .cls-4{clip-path:url(#multiuse_clippath);}
#multiuse .cls-5,#multiuse .cls-6{fill:none;}
#multiuse .cls-5,#multiuse .cls-7{stroke-width:0px;}
#multiuse .cls-6{opacity:.5;}
#multiuse .cls-6,#multiuse .cls-8{stroke:#bf4ad8;stroke-miterlimit:10;}
#multiuse .cls-8{fill:#fff;stroke-width:2px;}
#multiuse .cls-9{mix-blend-mode:multiply;transform: translate(-8px, -1px);}
#multiuse .cls-10{clip-path:url(#multiuse_clippath-1);}
#multiuse .cls-11{clip-path:url(#multiuse_clippath-4);}
#multiuse .cls-12{clip-path:url(#multiuse_clippath-3);}
#multiuse .cls-13{clip-path:url(#multiuse_clippath-2);}
#multiuse .cls-14{clip-path:url(#multiuse_clippath-7);}
#multiuse .cls-15{clip-path:url(#multiuse_clippath-6);}
#multiuse .cls-16{clip-path:url(#multiuse_clippath-5);}
#multiuse .cls-3{fill:#bf4ad8;font-size:2.7rem;}
#multiuse .cls-17{isolation:isolate;}
#multiuse .cls-7{fill:#dedede;}

#workflow .cls-1{fill:#de5536;opacity:.19;}
#workflow .cls-1,#workflow .cls-2,#workflow .cls-3,#workflow .cls-4,#workflow .cls-5,#workflow .cls-6{stroke-width:0px;}
#workflow .cls-7{font-size:13px;}
#workflow .cls-7,#workflow .cls-8,#workflow .cls-4{fill:#444;}
#workflow .cls-9{opacity:.22;}
#workflow .cls-10{opacity:.3;}
#workflow .cls-11{opacity:.23;}
#workflow .cls-8{font-size:15px;}
#workflow .cls-2{fill:#4ca48a;}
#workflow .cls-3{fill:#343c9e;}
#workflow .cls-5{fill:#8821a6;}
#workflow .cls-6{fill:#fff;}
#workflow .cls-12{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:.5px;}

#workflow_sp .cls-1{fill:#de5536;opacity:.19;}
#workflow_sp .cls-1,#workflow_sp .cls-2,#workflow_sp .cls-3,#workflow_sp .cls-4,#workflow_sp .cls-5,#workflow_sp .cls-6{stroke-width:0px;}
#workflow_sp .cls-7{font-size:13px;}
#workflow_sp .cls-7,#workflow_sp .cls-8,#workflow_sp .cls-4{fill:#444;}
#workflow_sp .cls-9{opacity:.22;}
#workflow_sp .cls-10{opacity:.3;}
#workflow_sp .cls-11{opacity:.23;}
#workflow_sp .cls-8{font-size:15px;}
#workflow_sp .cls-2{fill:#4ca48a;}
#workflow_sp .cls-3{fill:#343c9e;}
#workflow_sp .cls-5{fill:#8821a6;}
#workflow_sp .cls-6{fill:#fff;}
#workflow_sp .cls-12{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:.5px;}

#map-graph,#workflow_wrap{
  position: relative;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
#onesource_wrap{
  position: absolute;
  width: 55%;
  margin-top: 10%;
}
#multiuse_wrap{
  width: 100%;
}
#workflow_wrap{
  margin: 10rem auto 20rem auto
}
#workflow_wrap h4{
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2em;
}
#workflow{
  width: 100%;
}
#workflow_sp{
  display: none;
}
.solution.list li.post a.cover,
.insights.list li.post a.cover{
  z-index: 3;
}
.solution.list li.post,
.insights.list li.post{
  width: calc(50% - 3.2rem);
  border-radius: inherit;
  margin-bottom: 5rem;
}
#top .insights.list li.post{
  width: calc(100% / 3 - 3.2rem)
}
.solution.list li.post .alpha{
  width: 100%;
}
.solution.list li.post .solution_thumb,
.insights.list li.post .insights_thumb{
  aspect-ratio: 16 / 8;
  border-radius: 1.6rem;
  overflow: hidden;
  position: relative;
}
.solution.list li.post .solution_thumb img,
.insights.list li.post .insights_thumb img{
  height: 100%;
  object-fit: cover;
}
.solution.list li.post .content_meta-item,
.insights.list li.post .content_meta-item,
.creators.list li.post .content_meta-item{
  width: 100%;
  padding-top: 2rem;
}
.solution.list li.post .content_meta-item h4,
.creators.list li.post .content_meta-item h4{
  margin-bottom: 0.5em;
  font-size: 1.3rem;
  color: #808080;
}
.creators.list li.post .content_meta-item h4{
  font-size: 1.2rem;
  line-height: 1.5;
}
.creators.list li.post .content_meta-item h5{
  font-size: 1.2rem;
  line-height: 1;
}
#top #solutions .content_meta-item h3,
#top #insights .content_meta-item h3{
  font-size: 1.6rem;
}
.solution.list li.post .mark{
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  background: #ffffff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
}
.solution.list li.post .mark img{
  width: 1.2rem;
  height: auto;
  object-fit: contain;
}
.solution.list li.post .post_tags{
  line-height: 1.5;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.solution.list li.post .post_tags li{
  margin-right: 0.75em;
}
#top .content_meta-item h3{
  font-size: 1.8rem;
}
#top .works.post:first-of-type .works.post.wrap{
  -webkit-flex-flow: row-reverse wrap;
  -moz-flex-flow: row-reverse wrap;
  -ms-flex-flow: row-reverse wrap;
  -o-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
}
#top #works,#top #solutions{
  background: #ffffff;
}
#about{
  overflow: hidden;
  background: #ffffff;
  background-image: url(../img/bg/to_bg_material.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#about .bg{
  background-image: url('../img/bg/about_bg_grade.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .75;
}
#about .inner{
  /*position: relative;*/
  padding-top: 16rem;
  padding-bottom: 16rem;
}
#about .inner .ledecopy{
  font-size: 1.4rem;
  line-height: 3;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
#about .inner .ledecopy h4{
  font-size: 2.4rem;
  line-height: 1.75;
}
#about .inner .ledecopy p{
  margin-bottom: 1em;
}
#about .inner .ledecopy p br.sp{
  display: block;
}
/*blank*/
#blank{
  height: 100svh;
}
.alpha.noimage,
.archive .works .alpha.noimage,
#related .works .alpha.noimage,
.hovermenu .works.post.wrap .alpha.noimage{
  aspect-ratio: 16 / 8;
  background: #eeeeee;
  border-radius: 1.6rem;
  position: relative;
}
.works .alpha.noimage{
  aspect-ratio: 1 / 1;
  border-radius: 0 1.6rem 1.6rem 0;
  background: #eeeeee;
}
.works:nth-child(2) .alpha.noimage{
  border-radius: 1.6rem 0 0 1.6rem;
}

.alpha.noimage::after,
.works.post.wrap .beta .works_thumb.noimage::after{
  content: 'NO IMAGE';
  font-family: din-2014, sans-serif;
}
.works.post.wrap .beta .works_thumb.noimage::before{
  display: none;
}
.works.post.wrap .beta .works_thumb.noimage{
  background: #eeeeee;
  width: 100%;
}
#related .notexist{
  background: #eee;
  aspect-ratio: 16 / 8;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 8rem;
  border-radius: 1.6rem;
  font-size: 1.2rem;
}
/**/
#related .works.list li.post{
  margin-bottom: 5rem;
}
#top li.post,
.archive li.post,
.hovermenu li.post,
#related .works.list li.post{
  width: calc(50% - 3.2rem);
  border-radius: 0;
}

.archive .works.list, #related .works.list,
.archive .works.creators.list{
  gap: 3.2rem;
  margin-bottom: 10rem;
}
.archive .works.creators.list{
  margin-bottom: 0;
}
.archive .works.creators.list.no-post{
  border-top: 1px solid #444444;
  padding-top: 4rem;
}
.archive.tax-creators_tag ul.creators li.works.creators.post.hiddenpage,
.archive.tax-creators_tag ul.creators.no-post li.works.creators.post{
  content-visibility: hidden;
  display: none;
}
.archive.tax-creators_tag ul.creators.no-post li.works.creators.post.hiddenpage{
  content-visibility: auto;
  display: block;
}
#related .works.creators.list{
  margin-bottom: 0;
}
.archive li.post,.solution.list li.post{
  width: calc(100% / 3 - 2.4rem);
}
#related .works.list li.post,
.archive li.works.post{
  width: calc(100% / 4 - 2.4rem);
}
.archive li.post, .hovermenu li.post, #related .works.list li.post:nth-of-type(2), #related .works.list li.post:nth-of-type(3), #related .works.list li.post:nth-of-type(4), #related .works.list li.post:nth-of-type(5), #related .works.list li.post:nth-of-type(6), #related .works.list li.post:nth-of-type(7){
  width: calc(100% / 4 - 2.4rem);
}
#related .works.list li.post:first-of-type .works.post.wrap{
  flex-direction: column;
}
#related .works.list li.post{
  margin-bottom: 0;
}
.archive li.works.creators.post{
  width: calc(100% / 5 - 2.6rem);
}

#related .works.list li.post:nth-of-type(1) .alpha.noimage{
  aspect-ratio: 1 / 1;
  border-radius: 0 1.6rem 1.6rem 0;
}
.hovermenu li.post,
.hovermenu li.works.post,
.hovermenu.solution.list li.post{
  margin-bottom: 3.6rem;
  width: calc(100% / 2 - 2.4rem);
}
.hovermenu.creators.list li.post{
  width: calc(100% / 4 - 2.4rem);
  margin-bottom: 0;
}
.hovermenu.creators.list li.post .alpha .works_thumb{
  aspect-ratio: 1 / 1;
}
#gmenu .menu_list li.menu.hvr .hovermenu li.post{
  opacity: 1;
}
/*
.hovermenu li.post:nth-child(3),
.hovermenu li.post:nth-child(4){
  margin-bottom: 0;
}
  */
#top .works.post.wrap .alpha,
#top .works.post.wrap .beta,
.archive .works.post.wrap .alpha,
.archive .works.post.wrap .beta,
.hovermenu .works.post.wrap .alpha,
.hovermenu .works.post.wrap .beta,
.hovermenu .solution.post.wrap .alpha,
#related .works.list li.post .works.post.wrap .alpha,
#related .works.list li.post .works.post.wrap .beta{
  width: 100%;
}
#top .works.post.wrap .alpha .works_thumb,
#top .works.post.wrap .beta .works_thumb,
.archive .works.post.wrap .alpha .works_thumb,
.archive .works.post.wrap .beta .works_thumb,
.hovermenu .works.post.wrap .alpha .works_thumb,
.hovermenu .works.post.wrap .beta .works_thumb,
.hovermenu .solution.post.wrap .alpha .solution_thumb,
#related .works.list li.post .works.post.wrap .alpha .works_thumb,
#related .works.list li.post .works.post.wrap .beta .works_thumb{
  aspect-ratio: 16 / 8;
  border-radius: 1.6rem;
}
.archive .works.creators.post.wrap .alpha .works_thumb.creators{
  aspect-ratio: 1 / 1;
}

.hovermenu .works.post.wrap .alpha .works_thumb,
.hovermenu .works.post.wrap .beta .works_thumb,
.hovermenu .solution.post.wrap .alpha .solution_thumb{
  overflow: hidden;
}
#top .works.post.wrap .beta .works_thumb,
.archive .works.post.wrap .beta .works_thumb,
.hovermenu .works.post.wrap .beta .works_thumb,
#related .works.list li.post .works.post.wrap .beta .works_thumb{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition-duration: 0.5s;
}
#top .works.post.wrap.hvr .beta .works_thumb,
.archive .works.post.wrap.hvr .beta .works_thumb,
.hovermenu .works.post.wrap.hvr .beta .works_thumb,
#related .works.list li.post .works.post.wrap.hvr .beta .works_thumb{
  opacity: 1;
}
#top .works.post.wrap .beta .content_meta-item,
.archive .works.post.wrap .beta .content_meta-item,
.hovermenu .works.post.wrap .beta .content_meta-item,
#related .works.list li.post .works.post.wrap .beta .content_meta-item{
  aspect-ratio:auto;
  padding: 2rem 0 0 0;
}
/**/
.hovermenu .works.post.wrap .beta .content_meta-item,
.hovermenu.solution.list li.post .content_meta-item{
  padding-top: 1.2rem;
}
.hovermenu .works.post.wrap .beta .content_meta-item h3,
.hovermenu.solution.list li.post .content_meta-item h3,
.hovermenu.creators.list li.post .content_meta-item h3{
  font-size: 1.2rem;
}
.hovermenu.solution.list li.post .content_meta-item h4,
.hovermenu.creators.list li.post .content_meta-item h4{
  font-size: 1.1rem;
}
#top h2.lede,#top h3.lede{
  font-size: 1.4rem;
  line-height: 1.75;
  margin-bottom: 1.75em;
  max-width: 50%;
  letter-spacing: 0.1em;
  text-align: justify;
}
.lower h1{
  font-size: 1.4rem;
  line-height: 1.75;
  margin-bottom: 1.75em;
  max-width: calc(50% - 3.2rem);
  letter-spacing: 0.1em;
  text-align: justify;
}
.lower #solution h1{
  margin-bottom: 10rem;
}
.single.lower h1{
  font-size: 2.2rem;
  line-height: 1.5;
  max-width: 100%;
  text-align: left;
}
.single.lower #creators .profile h1{
  margin-bottom: 0;
}
.single.lower #creators .profile .title{
  margin-bottom: 3rem;
}
.single.lower .title h2{
  margin-bottom: 0.75em;
  line-height: 1.5;
}
.lower .contents .inner{
  padding-top: 12.8rem;
}
.lower .post_tags.head{
  margin-bottom: 10rem;
}
.pagenavi .page-numbers{
  margin: 0 1.2rem;
  letter-spacing: 0;
  color: #D0D0D0;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  font-size: 1.2rem;
}
.pagenavi .page-numbers.current{
  color: #84B43E;
}
.pagenavi .page-numbers.current::before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid;
  border-radius: 100%;
}
.pagenavi .page-numbers:not(.next,.prev,.current):hover{
  color: #84B43E;
}
.pagenavi a.prev,.pagenavi a.next{
  letter-spacing: 0.2em;
  width: auto;
  color: #8B8B8B;
}
.pagenavi a.prev:hover,.pagenavi a.next:hover{
  color: #84B43E;
}
.pagenavi a.disable{
  opacity: 0.3;
  pointer-events: none;
}
.pagenavi a.prev .dots{
  margin-right: 1rem;
}
.pagenavi a.next .dots{
  margin-left: 1rem;
}
.single-header{
  margin-bottom: 6.4rem;
}
.single-header .title,
.single-header .lede{
  width: 50%;
}
.single-header .lede{
  max-width: 54rem;
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
}
.single.lower .post_tags.head{
  margin-bottom: 0;
}
.single.lower .main.alpha,
.single.lower .main.beta{
  margin-bottom: 6.4rem;
}
.single.lower .block.double{
  gap: 3.2rem;
}
.single.lower .block.double .alpha.thumb,
.single.lower .block.double .profile{
  width: calc(35% - 1.6rem);
}
.single.lower .main.alpha img,
.single.lower .main.beta img,
.single.lower .block.double .alpha.thumb img,
.single.lower .normal-content figure img,
.single.lower .normal-content picture img,
.single.lower .normal-content iframe{
  border-radius: 1.6rem;
}
.single.lower .normal-content iframe{
  margin-right: auto!important;
  margin-left: auto!important;
}
.single.lower .block.double .profile{
  padding: 0 0 0 3.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.75;
  text-align: justify;
}
.single.lower .block.double .profile .post_tags{
  margin-top: 3.2rem;
}
.single.lower .main.beta,
.single.lower .normal-content{
  max-width: 1080px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
figcaption.caption,.wp-block-image figcaption{
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-top: 1em;
  margin-bottom: 2em;
}
.single.lower .normal-content p,
.single.lower .normal-content .copyright,
.single.lower .normal-content .wp-block-button,
.single.lower .normal-content ul,
.single.lower .normal-content h1,
.single.lower .normal-content h2,
.single.lower .normal-content h3,
.single.lower .normal-content h4,
.single.lower .normal-content h5,
.single.lower .normal-content h6,
.single.lower #related .copyright{
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.75;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6.4rem;
}

.single.lower #related .copyright{
  margin-bottom: 0;
  margin-top: 6.4rem;
}

.single.lower .normal-content .wp-embed-aspect-16-9 iframe{
  width: 100%;
  height: 100%;
  aspect-ratio:16 / 9;
}
.single.lower .normal-content .wp-embed-aspect-4-3 iframe{
  width: 100%;
  height: 100%;
  aspect-ratio:4 / 3;
}
.single.lower .normal-content p{
  text-align: justify;
}
.single.lower .normal-content a{
  text-decoration: underline;
}
.single.lower .normal-content a:hover{
  text-decoration: none;
  color: #84B43E;
}
.single.lower .normal-content p.has-text-align-center{
  text-align: center;
}
.single.lower .normal-content p.has-text-align-right{
  text-align: right;
}
.single.lower .normal-content h1,
.single.lower .normal-content h2,
.single.lower .normal-content h3,
.single.lower .normal-content h4,
.single.lower .normal-content h5,
.single.lower .normal-content h6{
  font-size: 1.8rem;
  margin-bottom: 1.6rem;
  font-weight: 600;
}
.single.lower .normal-content hr{
  border-bottom: 1px solid #4C4948;
  border-top: none;
  margin-bottom: 6.4rem;
}
.single.lower .normal-content .wp-block-button a{
  padding: 1.6rem 3.2rem;
  border-radius: 6.4em;
  background: #8B8B8B;
  line-height: 1;
  font-size: 1.2rem;
}
.single.lower .normal-content .wp-block-button a:hover{
  background: #84B43E;
}
.single.lower .normal-content .copyright p,
.single.lower #related .copyright p{
  font-size: 1.2rem;
  margin-bottom: 1.2em;
}
.single.lower .normal-content .copyright.works p{
  letter-spacing: 0.09em;
}
.single.lower .normal-content .copyright.works p a{
  color: #84B43E;
  text-decoration: underline;
}
.single.lower .normal-content .copyright.works p a:hover{
  color: silver;
}
.single.lower .normal-content figure{
  margin-bottom: 6.4rem;
}
.single.lower .normal-content .copyright,
.single.lower .normal-content .pagenavi{
  margin-bottom: 9.6rem;
}
.single.lower .normal-content .pagenavi{
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.single.lower .normal-content .pagenavi.bottom{
  margin-top: 9.6rem;
}
.single.lower .normal-content .pagenavi .divide{
  width: 70%;
  height: 1px;
  border-bottom: 1px solid #707070;
}
#related{
  margin-top: 9.6rem;
}
.archive .works.list::after,
#related .works.list::after,
ul.solution.list::after{
content: '';
width: calc(100% / 3 - 2.4rem);
}
.archive .works.creators.list::after{
  width: calc(100% / 4 - 2.4rem);
}

#related .works.list li.post .works.post.wrap{
  flex-flow: column;
}
#related .inner{
  padding-top: 0;
}
/*solution*/
ul.solution.list{
  margin-bottom: 10rem;
}
h2.cat-title{
  font-size: 2rem;
  margin-bottom: 1.6em;
  line-height: 1.5;
  color: #84B43E;
}
h2.cat-title span{
  font-size: 1.2rem;
  color: #888888;
}
/*insights*/
#insights .tbox{
  writing-mode: inherit;
  position: static;
  margin-bottom: 1.75em;
}
#insights .tbox h5 img{
  width: 24rem;
}
#insights .tbox h5{
  font-size: 1.6rem;
  margin-bottom: 1em;
}
#insights .tbox h5 span{
  margin-left: 2.4rem;
  border-left: 1px solid;
  padding-left: 2.4rem;
}
#insights .tbox h6{
  font-size: 1.2rem;
}
#insights ul.insights.flex::after{
  display: block;
  content:"";
  width: calc(100% / 3 - 3.2rem);
}
.insights.post.wrap{
  position: relative;
}
.insights.list li.post .insights_thumb{
  aspect-ratio: 4 / 3;
}
.insights.list li.post .content_meta-item{
  position: relative;
  top: -5rem;
  margin-bottom: -5rem;
  background: #ffffff;
  width: calc(100% - 4.8rem);
  padding: 1.6rem;
  z-index: 2;
  border-radius: 0.8rem;
}
.insights.list li.post .post_tags,
.insights.list li.post .cat{
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.insights.list li.post .cat{
  background: #333;
  border-radius: 1.6rem;
  color: white;
  padding: 0.6em 1.2em;
}
.insights.list li.post .post_tags{
  line-height: 1.5;
}
.insights.list li.post h6{
  font-size: 1.5rem;
  margin-top: 0.5em;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.insights.list li.post .post_tags li{
  margin-right: 0.75em;
}
.insights.list li.post .post_tags li:last-of-type{
  margin-right: 0;
}
.insights.list li.post .insights_thumb .mark{
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  background: #ffffff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
}
.insights.list li.post .insights_thumb .mark .blank{
  width: 1.2rem;
  height: auto;
  object-fit: contain;
}
.modal{
  display: none;
}
.modal.on{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgb(239 239 239 / 90%) 0% 0% no-repeat padding-box;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.modal video{
  width: 80%;
  height: auto;
  margin: auto;
}
.modal .menu.btn{
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
}
.post-password-form{
  background: silver;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.single.lower .normal-content .post-password-form p{
  max-width: 315px;
}
.post-password-form input[type=password]{
  border: 1px solid;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}
.post-password-form input[type=submit]{
  margin-left: 1rem;
}
.scroll-wrap{
  position: relative;
  padding-bottom: 4rem;
}
.noresult{
  width: 100%;
  min-height: 49vh;
}
.archive .works.creators.list:has(.noresult) + ul{
  border-top: none;
}
@media screen and (max-width: 1440px){
  .content_meta-item h3{
    font-size: clamp(1.3rem, 1vw, 1vw);
  }
  .solution.list li.post .content_meta-item h4, .creators.list li.post .content_meta-item h4{
    font-size: clamp(1.1rem, 0.8vw, 1.3rem);
  }
}

@media screen and (max-width: 1260px){
/*#related .works.list li.post,
.archive li.works.post{
  width: calc(100% / 3 - 2.4rem);
}*/
.archive .hovermenu li.works.post{
  width: calc(100% / 2 - 2.4rem);
}
.archive .hovermenu li.works.creators.post{
  width: calc(100% / 4 - 2.4rem);
}
}

@media screen and (max-width: 1024px) {
  #gmenu .menu_list{
    margin-left: 1.6rem;
  }
  #gmenu .menu_list li.menu .hovermenu{
    padding-left: 40%;
  }
  #gmenu .menu_list li.menu {
    font-size: 1.6rem;
  }
  section.contents{
    display: flex;
    align-items: flex-start;
  }
  .single-creators section#related.contents{
    flex-direction: column;
  }
  .contents .inner{
    padding: 9.6rem 6.4rem;
  }
  .tbox{
    top: 2.4rem;
    left: 1.4rem;
    position: sticky;
    padding-top: 9.6rem;
    padding-bottom: 9.6rem;
  }
  .archive .tbox{
    top: 3.8rem;
  }
  #related .tbox{
    padding-top: 0;
    top: 12.6rem;
  }
  .tbox h2{
    font-size: 2.4rem;
    margin-bottom: 1em;
  }
  .tbox h3 {
    font-size: 1.2rem;
  }
  .home #scrl{
    padding-top: 100svh;
  }
  #fv{
    position: fixed;
    top: 0;
    left: 0;
  }
  #top .content_meta-item h3 br{
    display: none;
  }
  .archive li.works.post{
    width: calc(100% / 3 - 2.4rem);
  }
  .works.post.wrap .beta .content_meta-item{
    padding: 0 3.2rem;
  }
  li.post{
    margin-bottom: 6.4rem;
  }
  .post_tags a{
    font-size: 0.8rem;
  }
  #top h2.lede, #top h3.lede{
    margin-bottom: 4em;
  }
  #about{
    overflow: inherit;
  }
  #about .inner .ledecopy h4{
    margin-bottom: 1em;
  }
  #about .inner .ledecopy{
    position: relative;
    z-index: 1;
  }
  #insights .tbox{
    padding-top: 0;
    padding-bottom: 0;
  }
  .insights.list li.post{
    width: calc(100% / 2 - 1.6rem);
  }
  footer .link.btn.contact, .archive.single .link.btn.more, #related .link.btn.more{
    width: 30rem;
  }
  .archive.single .link.btn.more, #related .link.btn.more{
    margin-left: -2.759rem;
  }
  .single.lower .normal-content .pagenavi .divide{
    width: 65%;
  }
}
@media screen and (max-width: 768px){
  #gmenu .menu_list{
    margin-top: 15vh;
    margin-left: 0;
  }
  #gmenu .menu_list li.menu a.flex{
    pointer-events: none;
  }
  #gmenu .menu_list li.menu a.home,
  #gmenu .menu_list li.menu a.link.view.more{
    pointer-events:auto;
  }
  #gmenu .menu_list li.menu .hovermenu{
    padding-left: 0;
    position: static;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  #gmenu .menu_list li.menu.hvr .hovermenu{
    display: flex;
    align-items: flex-start;
    flex-flow: nowrap;
    overflow: scroll;
    width: calc(100vw - 4.8rem);
    padding-bottom: 1.6rem;
  }
  #gmenu .menu_list li.menu.hvr .hovermenu li.post{
    margin-bottom: 0;
    min-width: 65vw;
    margin-right: 2.4rem;
    margin-bottom: 0;
  }
  #gmenu .menu_list li.menu .hovermenu.creators{
    gap: 2.4rem;
  }
  #gmenu .menu_list li.menu.hvr .hovermenu li.post.creators{
    min-width: 35vw;
    margin-right: 0;
  }
  #gmenu .menu_list li.menu.hvr .hvrTxt{
    display: none;
  }
  #gmenu .menu_list li.menu.hvr .sp.link{
    display: flex;
    display: flex;
    margin: 1rem auto;
  }
  #gmenu .menu_list li.menu.hvr .sp.link a{
    color: white;
    background: #84B43E;
    margin-left: -1.6rem;
  }
  #fv{
    height: 80vw;
  }
  #fv.on{
    top: 8.5rem;
  }
  .tagline.change.finish{
    margin-top: calc(80vw - 4.25vw);
  }
  .home #scrl{
    padding-top: 80vw;
  }
  #blank{
    height: 80vw;
  }
  #top h2.lede, #top h3.lede,.lower h1,.lower #solution h1{
    max-width: 100%;
    margin-bottom: 3.2em;
    text-align: left;
  }
  #related .works.list li.post:first-of-type .works.post.wrap{
    flex-flow: column;
    width: 100%;
  }
  #top .works.post.wrap .alpha, #top .works.post.wrap .beta,
  #related .works.list li.post:first-of-type .works.post.wrap .alpha,
  #related .works.list li.post:first-of-type .works.post.wrap .beta{
    width: 100%;
  }
  #top .works.post.wrap .alpha .works_thumb,
  #top .works.post.wrap .alpha.noimage,
  #related .works.list li.post:first-of-type .works.post.wrap .alpha .works_thumb{
    aspect-ratio: 16 / 8;
    border-radius: 1.6rem;
    overflow: hidden;
  }
  #top .works.post.wrap .beta .works_thumb,
  #related .works.list li.post:first-of-type .works.post.wrap .beta .works_thumb{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  #top .works.post.wrap .beta .content_meta-item,
  #related .works.list li.post:first-of-type .works.post.wrap .beta .content_meta-item{
    aspect-ratio: auto;
    padding: 2rem 0 0 0;
  }
  #about .inner .ledecopy{
    width: 100%;
  }
  #about .inner .ledecopy p br.sp{
    display: none;
  }
  li.post{
    border-radius: 0;
  }
  #top li.post,.archive li.works.post,.solution.list li.post, #top .insights.list li.post,
  .archive li.post, #related .works.list li.post:nth-of-type(1),
   #related .works.list li.post:nth-of-type(2), 
   #related .works.list li.post:nth-of-type(3){
    width: 100%;
  }
  .archive li.works.post,
  .archive li.works.creators.post{
    width: 100%;
    margin-bottom: 0;
  }
  .archive .works.list, .archive .works.creators.list{
    gap: 4rem 0;
  }
  .archive .works.creators.list.no-post{
    gap: 1rem 0;
  }
  .hovermenu.creators.list li.post .content_meta-item h4{
    max-height: 3em;
    overflow: hidden;
  }

  .archive li.post, #related .works.list li.post:nth-of-type(1) .alpha.noimage{
    aspect-ratio: 16 / 8;
    border-radius: 1.6rem;
  }
  .archive li.post{
  aspect-ratio: auto;
  border-radius: 0;
  }
  .hovermenu.solution.list li.post {
    width: calc(50% - 3.2rem);
  }
  .insights.list li.post .insights_thumb{
    aspect-ratio: 16 / 8;
  }
  .single-header .title, .single-header .lede{
    width: 100%;
    max-width: 100%;
  }
  .lower .post_tags.head{
    margin-bottom: 6.4rem;
  }
  .archive .post_tags.head a{
    font-size: 1rem;
  }
  .single.lower .post_tags.head{
    margin-bottom: 1.5em;
  }
  li.post .view.detail .cap{
    opacity: 1;
    color: #84B43E;
    margin-left: 0.75rem;
  }
  li.post .dots::before, li.post .dots::after, li.post .dots span{
    background: #84B43E;
  }
  #scroller{
    right: 1.6rem;
    bottom: 1.6rem;
  }
  .single #scroller{
    z-index: 1;
  }
  footer .upper .menu.btn{
    background: #84B43E;
    transform: rotate(0deg);
  }
  footer .upper .menu.btn.dots::before{
    transform: rotate(-45deg);
    left: 1rem;
    margin: auto;
    top: 1.1rem;
    width: 1rem;
    background: #ffffff;
    position: absolute;
    height: 0.2rem;
  }
  footer .upper .menu.btn.dots span{
    display: block;
    opacity: 1;
    transform: rotate(45deg);
    width: 1rem;
    height: 0.2rem;
    background: #ffffff;
    top: 0.7rem;
    position: absolute;
    right: 1rem;
  }
  footer .upper .menu.btn.dots::after{
    transform: rotate(0deg);
    width: 0.2rem;
    height: 2rem;
    left: 0;
    right: 0;
    margin: auto;
    background: #ffffff;
  }
  footer .copyright, #gmenu .copyright{
    margin-top: 1rem;
  }
  footer .company,#gmenu .company{
    display: flex;
  }
  footer .company img, #gmenu .company img{
    max-width: 8rem;
    margin-right: 1rem;
    margin-bottom: -1rem;
  }
  #scrl{
    overflow: clip;
  }
  #related ul.list.flex{
    margin-bottom: 3.2rem;
    flex-flow: nowrap;
    overflow-x: scroll;
    width: calc(100% + 3.8rem);
  }
  .single-creators #related ul.list.flex{
    width: calc(100vw - 6.4rem);
    padding-right: 2.4rem;
  }
  #related ul.list.flex li.post{
    min-width: 80vw;
    margin-right: 1.6rem;
  }
  footer .link.btn.contact, .archive.single .link.btn.more, #related .link.btn.more{
    width: 26rem;
  }
  .archive.single .link.btn.more, #related .link.btn.more{
    margin-left: -7.5vw;
  }
  .single-creators #related .link.btn.more{
    margin-left: 0;
  }
  .single.lower .block.double{
    flex-flow: column;
  }
  .single.lower .block.double .alpha.thumb, .single.lower .block.double .profile{
    width: 100%;
    margin-bottom: 0;
  }
  .single.lower .block.double .profile{
    padding-left: 0;
  }
  .scroll-wrap{
    display: flex;
    align-items: flex-start;
  }
  .pagenavi .page-numbers{
    margin: 0 0.25rem;
  }
}
@media screen and (max-width: 540px){
  header li#bi #cgx_head_logo{
    width: 12rem;
    margin-left: 0;
  }
  header li#bi span{
    font-size: 1rem;
    margin-left: 1rem;
  }
  header .link.btn.contact{
    font-size: 1rem;
    padding: 1rem 2rem;
  }
  .menu.btn{
    margin-left: 1.2rem;
  }
    header li#content_main{
    display: none;
  }

  .contents .inner{
    padding: 6.4rem 3.2rem;
  }
  .lower .contents .inner{
    padding-top: 9.6rem;
    padding-bottom: 9.6rem;
  }
  .tbox{
    padding-top: 6.4rem;
    padding-bottom: 6.4rem;
    left: 0.4rem;
  }
  #top .tbox {
    top: 6.4rem;
  }
  .tbox h2{
    font-size: 1.8rem;
  }
  .single.lower .contents .inner{
    padding-bottom: 0;
  }
  .single.lower .normal-content .pagenavi .divide{
    width: 45%;
  }
  #related{
    margin-top: 1.6rem;
  }
  #related .inner{
    padding-bottom: 9.6rem;
  }
  .single.lower .normal-content .copyright, .single.lower .normal-content .pagenavi{
    margin-bottom: 6.4rem;
  }
  .single.lower #related .copyright{
    padding-right: 2.4rem;
  }
  #insights.contents .inner{
    padding-left: 0;
    padding-right: 0;
  }
  footer .upper{
    position: static;
  }
  footer .upper .menu.btn{
    right: 1.6rem;
    top: inherit;
    bottom: 3.2rem;
  }
  #related ul.list.flex{
    width: calc(100% + 1.2rem);
    gap: 0;
  }
  .single-creators #related ul.list.flex{
    width: calc(100vw - 3.2rem);
  }
  .single-creators .single.lower .normal-content .pagenavi.bottom{
    margin-top: 0;
  }
  .single-creators #related .inner{
    padding-bottom: 3rem;
  }
  .single-creators .normal-content{
    padding: 0 3.2rem;
  }
  .single-creators .single.lower #related .copyright{
    padding-right: 0;
  }
}
@media screen and (max-width: 430px){
  .contents .inner{
    padding: 6.4rem 2.4rem;
  }
  #playMov.on{
    transform: scale(0.8) translateY(0) ;
  }
  #scroller {
    right: 1.2rem;
    bottom: 1.2rem;
  }
  #insights .tbox h5 img{
    display: block;
    margin-bottom: 1.6rem;
  }
  #insights .tbox h5 span{
    margin-left: 0;
    border-left: none;
    padding-left: 0;
  }
  .insights.list li.post .content_meta-item{
    width: calc(100% - 3.6rem);
  }
  #top h2.lede, #top h3.lede, .lower h1, .lower #solution h1{
    margin-bottom: 1.6em;
    word-break: break-word;
  }
  .single.lower .normal-content .pagenavi .divide{
    width: 35%;
  }
  #map-graph{
    margin-top: 6.4rem;
    flex-flow: column-reverse;
  }
  #onesource_wrap{
    width: 95%;
    margin-top: -55%;
    position: static;
  }
  #multiuse_wrap{
    position: relative;
    mix-blend-mode: overlay;
  }
  #workflow_wrap{
    margin: 3.2em auto 6.4rem auto;
  }
  #workflow{
    display: none;
  }
  #workflow_sp{
    display: block;
    margin: auto;
    width: 85%;
  }
  .archive.single .link.btn.more, #related .link.btn.more{
    margin-left: -10.75vw;
  }
  #isms{
    width: 2.2rem;
  }
  footer .company{
    flex-flow: column;
    width: 100%;
    margin-bottom: 4rem;
  }
  footer .company img{
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  footer .copyright{
    text-align: center;
    width: 69%;
    margin: auto;
    line-height: 1.25;
  }
  footer #isms{
    display: block;
    margin: 1rem auto 0 auto;
  }
  #about .inner .ledecopy p{
    letter-spacing: 0.035em;
  }
}
@media screen and (max-width: 390px){
  .single.lower .normal-content .pagenavi .divide{
    width: 37%;
  }
  .pagenavi .page-numbers{
    margin: 0 0.25rem;
  }
}
@media screen and (max-width: 375px){
  .single.lower .normal-content .pagenavi .divide{
    width: 35%;
  }
}
@media screen and (max-width: 320px){
  .single.lower .normal-content .pagenavi .divide{
    width: 21%;
  }
}