/* CSS Document */
main *{
  color: #fff;
}
/*ページタイトル*/
.page_title h1::before{
  content: "Digital Signage";
}
/*コンテンツ*/
.about_top{
  box-sizing: border-box;
  background-color: #000;
}
body[wc-view-type="sp"] .about_top{
  padding: var(--headerHeight) 0;
}
body[wc-view-type="tb"] .about_top{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .about_top{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .about_top{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.about_top .sub_title .sub_t_box .orange_c{
  transition-delay: 0.25s !important;
}
.about_top .a_flex{
}
body[wc-view-type="sp"] .about_top .a_flex{
  margin-top: 1.5rem;
}
body:not([wc-view-type="sp"]) .about_top .a_flex{
  margin-top: 2rem;
}
.about_top .a_flex .a_text{
  box-sizing: border-box;
}

[wc-view-type="sp"] .about_top .a_flex .a_text{
  padding: 0 7vw;
}
body:not([wc-view-type="sp"]) .about_top .a_flex .a_text{
}
body[wc-view-type="tb"] .about_top .a_flex .a_text,
body[wc-view-type="tb-l"] .about_top .a_flex .a_text{
  padding-right: 1.5rem;
}
body[wc-view-type="pc"] .about_top .a_flex .a_text{
  padding: 1.5rem 2.5rem;
}
.about_top .a_flex .a_text p{
  margin-bottom: 1rem;
  line-height: 1.8rem;
  transition: opacity ease 1s,filter ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.about_top .a_flex .a_text p[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body:not([wc-view-type="sp"]) .about_top .a_flex .a_text p{
  text-align: center;
}
.about_top .a_flex .a_slider{
}
body:not([wc-view-type="sp"]) .about_top .a_flex .a_slider{
  -webkit-mask-image: linear-gradient(to right, transparent var(--avesize),black 50px,black calc(100% - 50px),transparent calc(100% - var(--avesize)));
  mask-image: linear-gradient(to right, transparent var(--avesize),black 50px,black calc(100% - 50px),transparent calc(100% - var(--avesize)));
}
.about_top .a_flex .a_slider .slider_box{
  width: 150px;
  margin: 0 0.5rem;
}
body[wc-view-type="tb"] .about_top .a_flex .a_slider .slider_box{
  width: 200px;
}
body[wc-view-type="tb-l"] .about_top .a_flex .a_slider .slider_box,
body[wc-view-type="pc"] .about_top .a_flex .a_slider .slider_box{
  width: 280px;
}
.about_top .a_flex .a_slider .slider_box figure img{
  border-radius: 1rem;
}
/*メリット*/
.merit{
  background-color: #262729;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .merit{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .merit{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .merit{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .merit{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.merit h1.contents_title::before{
  content: "Merit";
}
.merit > .mrit_flex{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  margin-top: 1.5rem;
}
body[wc-view-type="sp"] .merit > .mrit_flex{
  flex-direction: column;
}
body[wc-view-type="tb-l"] .merit > .mrit_flex,
body[wc-view-type="pc"] .merit > .mrit_flex{
  gap:1.5rem;
  justify-content: center;
}
.merit > .mrit_flex > article{
  background-color: #000;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 1.5rem;
  transition: opacity ease 1s,filter ease 1s;
  filter: blur(10px);
}
body[wc-view-type="tb"] .merit > .mrit_flex > article{
  width: 100%;
}
body[wc-view-type="tb-l"] .merit > .mrit_flex > article{
  width: calc(50% - 0.75rem);
}
body[wc-view-type="pc"] .merit > .mrit_flex > article{
  width: calc((100% / 3) - 1rem);
}
.merit > .mrit_flex > article[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
.merit > .mrit_flex > article h2{
  display: flex;
  font-size: 1.15rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  padding: 0 0.5rem 0.75rem 0.5rem;
  box-sizing: border-box;
}
.merit > .mrit_flex > article h2 .num{
  flex: none;
  font-size: 3rem;
  font-family: "Oswald";
  font-weight: 700;
  color: rgba(255,255,255,0);
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
  line-height: 1em;
  letter-spacing: 5px;
  width: 55px;
  margin-right: 0.5rem;
}
.merit > .mrit_flex > article h2 .m_title{
  font-weight: 700;
}
.merit > .mrit_flex > article h2 .change_o{
  font-weight: 700;
  color: #fff;
  transition: color 1s 1.1s ease;
}
.merit > .mrit_flex > article[inview-state="true"] h2 .change_o{
  color: #ff6905;
}
.merit > .mrit_flex > article p{
  padding: 0rem 1rem 0 0.75rem;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  min-height: 70px;
  line-height: 1.7rem;
}
.merit > .mrit_flex > article p .back_icon{
  position: absolute;
  top: -20px;
  right: 0;
  z-index: -1;
  background-color: rgba(255,255,255,0.5);
  width: 70px;
  height: 70px;
}
.merit > .mrit_flex > article p .back_icon{
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.merit > .mrit_flex > article p .back_icon.eye{
  -webkit-mask-image: url("/img/svg/eye.svg");
  mask-image: url("/img/svg/eye.svg");
}
.merit > .mrit_flex > article p .back_icon.info{
  -webkit-mask-image: url("/img/svg/info.svg");
  mask-image: url("/img/svg/info.svg");
}
.merit > .mrit_flex > article p .back_icon.space{
  -webkit-mask-image: url("/img/svg/space.svg");
  mask-image: url("/img/svg/space.svg");
}
.merit > .mrit_flex > article p .back_icon.target{
  -webkit-mask-image: url("/img/svg/target.svg");
  mask-image: url("/img/svg/target.svg");
}
.merit > .mrit_flex > article p .back_icon.cost{
  -webkit-mask-image: url("/img/svg/cost.svg?202501291339");
  mask-image: url("/img/svg/cost.svg?202501291339");
}
/*活用方法*/
.utilization{
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.65);
}
body[wc-view-type="sp"] .utilization{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .utilization{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .utilization{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .utilization{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.utilization .contents_title::before{
  content: "How To Use";
}
.utilization{
}



.ut_flex{
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}
body[wc-view-type="sp"] .ut_flex{
	flex-direction: column;
}
body[wc-view-type="tb-l"] .ut_flex,
body[wc-view-type="pc"] .ut_flex{
	gap:1.5rem;
}
body[wc-view-type="pc"] .ut_flex{
	margin-top: 2.5rem;
}
.utilization .ut_flex > article{
  display: flex;
  transition: all ease 1s;
  opacity: 0;
  filter: blur(10px);
}
body[wc-view-type="tb-l"] .utilization .ut_flex > article,
body[wc-view-type="pc"] .utilization .ut_flex > article{
	width: calc(50% - 0.75rem);
}
/*
body:not([wc-view-type="sp"]) .utilization > article:nth-of-type(even){
  flex-direction: row-reverse;
}*/
.utilization .ut_flex > article[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="sp"] .utilization .ut_flex > article:not(:first-of-type){
  margin-top: 1.5rem;
}
.utilization .ut_flex > article .u_text{
  box-sizing: border-box;
}
.utilization .ut_flex > article .u_text > h2{
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  padding: 0 0.75rem 0.5rem 0.75rem;
  box-sizing: border-box;
}
.utilization .ut_flex > article .u_text > h2 .sc_border{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  width: 0;
  height: 1px;
  background-color: #fff;
  z-index: 2;
  transition: all 1s 0.5s ease;
}
.utilization .ut_flex > article[inview-state="true"] .u_text > h2 .sc_border{
  right: 0;
  width: 100%;
}
.utilization > article .u_text > h2 .sc_border > span{
  position: absolute;
  inset:0;
}
.utilization .ut_flex > article .u_text > h2 .sc_border > span::before,
.utilization .ut_flex > article .u_text > h2 .sc_border > span::after{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 15%;
  transform: translateY(-50%);
  display: block;
  z-index: 3;
  background-color: #fff;
}
.utilization .ut_flex > article .u_text > h2 .sc_border > span::before{
  transition: opacity 0.5s ease;
  opacity: 0;
}
.utilization .ut_flex > article[inview-state="true"] .u_text > h2 .sc_border > span::before{
  opacity: 1;
}
.utilization .ut_flex > article .u_text > h2 .sc_border > span::before{
  left: 0;
}
.utilization .ut_flex > article .u_text > h2 .sc_border > span::after{
  right: 0;
}
.utilization .ut_flex > article .u_text > h2 .sc_border > span::after{
  transition: opacity 0.5s 1.5s ease;
  opacity: 0;
}
.utilization .ut_flex > article[inview-state="true"] .u_text > h2 .sc_border > span::after{
  opacity: 1;
}
.utilization .ut_flex > article .u_text > p{
  line-height: 1.7rem;
  padding: 0.75rem;
  box-sizing: border-box;
}
.utilization .ut_flex > article figure{
  filter: grayscale(100%);
  transition: filter 0.75s 0.75s linear;
}
body:not([wc-view-type="sp"]) .utilization .ut_flex > article figure{
  width: 50%;
}
.utilization .ut_flex > article[inview-state="true"] figure{
  filter: grayscale(0);
}
.utilization .ut_flex > article figure img{
  aspect-ratio:1.4141/1;
  border-radius: 1.5rem;
}
/*利用例*/
.use{
  box-sizing: border-box;
  background-color: #000;
  padding: var(--headerHeight) 0;
}
body[wc-view-type="sp"] .use{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .use{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .use{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .use{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.use .contents_title::before{
  content: "Usage Example";
}
.use > p{
  line-height: 1.8rem;
  margin: 0 auto 1.5rem auto;
}
body:not([wc-view-type="sp"]) .use > p{
  text-align: center;
}
.use_blck{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  justify-content: center;
}
body:not([wc-view-type="sp"]) .use_blck{
  gap:1.5rem;
}
.use_blck article{
  display: flex;
  flex-direction: column-reverse;
  background-color: #262729;
  border-radius: 1rem;
  transition: all ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.use_blck article[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="sp"] .use_blck article{
  width: calc(50% - 0.5rem);
}
body[wc-view-type="tb"] .use_blck article{
  width: calc(50% - 0.75rem);
}
body[wc-view-type="tb-l"] .use_blck article,
body[wc-view-type="pc"] .use_blck article{
  width: calc((100% / 3) - 1rem);
}
.use_blck article > h2{
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  text-align: center;
}
body:not([wc-view-type="sp"]) .use_blck article > h2{
  padding: 1rem;
}
.use_blck article figure{
  transition: filter 0.75s 0.75s linear;
  filter: grayscale(100%);
}
.use_blck article[inview-state="true"] figure{
  filter: grayscale(0);
}
.use_blck article figure img{
  aspect-ratio:1.414/1;
  border-radius: 1rem;
}
/*サービス*/
.service{
  box-sizing: border-box;
  background-color: #262729;
}
body[wc-view-type="sp"] .service{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .service{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .service{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .service{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.service .contents_title::before{
  content: "Service";
}
.service .s_flex{
  display: flex;
  gap:1.5rem;
	flex-wrap: wrap;
	justify-content: center;
}
body[wc-view-type="sp"] .service .s_flex{
  flex-direction: column;
  gap: 1.5rem;
	  flex-wrap: nowrap;
}
body[wc-view-type="tb-l"] .service .s_flex{
	gap:1rem;
}
body[wc-view-type="tb-l"] .service .s_flex{
  align-items: center;
  justify-content: center;
}
.service .s_flex > a a,
.service .s_flex > a article,
.service .s_flex > a article > figure::before,
.service .s_flex > a figure img{
  border-radius: 1rem;
}
.service .s_flex > a{
  display: block;
  text-decoration: none;
  transition: all ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.service .s_flex > a[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="tb-l"] .service .s_flex > a{
  width: calc((100% / 3) - 0.67rem);
}
body[wc-view-type="pc"] .service .s_flex > a{
	width: calc((100% / 3) - 1rem);
}
body[wc-view-type="tb"] .service .s_flex > a{
  width:calc(50% - 0.75rem);
}
.service .s_flex > a article{
  width: 100%;
  height: 100%;
  aspect-ratio: 6/3.5;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-direction: column;
  box-shadow: -1px -1px rgb(255,255,255), 1px -1px rgb(255,255,255), 1px 1px rgb(255,255,255), -1px 1px rgb(255,255,255), 0 0 0.1em rgb(255,255,255), 0 0 0.05rem rgb(255,105,5) inset, 0 0 0.5em rgb(255,255,255), 0 0 0.1rem rgb(255,255,255) inset, 0 0 1em rgb(255,255,255), 0 0 0.2rem rgb(255,255,255);
}
.service .s_flex > a article > h2{
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
}

body[wc-view-type="tb-l"] .service .s_flex > a article > h2{
	font-size: 1.25rem;
}
body[wc-view-type="tb"] .service .s_flex > a article > h2 br,
body[wc-view-type="pc"] .service .s_flex > a article > h2 br{
	display: none;
}
.service .s_flex > a article > h2::before{
  font-size: 3.75rem;
  line-height: 1em;
  font-family: "Oswald";
  font-weight: 700;
  color: rgba(255,255,255,0);
  -webkit-text-stroke: rgba(255,255,255,0.4) 1px;
  text-stroke: 1px #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: exclusion;
  z-index: -1;
  letter-spacing: 1px;
}

body[wc-view-type="tb-l"] .service .s_flex > a article > h2::before{
	font-size: 3.25rem;
}
body[wc-view-type="pc"] .service .s_flex > a article > h2::before{
  font-size: 4rem;
}
.service .s_flex > a article.selection > h2::before{
  content: "Selection";
}
.service .s_flex > a article.management > h2::before{
  content: "Management";
}
.service .s_flex > a article.production > h2::before{
  content: "Production";
}
.service .s_flex > a article > span{
  display: flex;
  width: fit-content;
  font-weight: 700;
  align-items: center;
}
.service .s_flex > a article > span::after{
  content: "";
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  margin-left: 0.25rem;
  background-color: #fff;
}
.service .s_flex > a article > figure{
  position: absolute;
  inset:0;
  z-index: -1;
  transition: filter 0.75s 0.75s linear;
  filter: grayscale(100%);
}
.service .s_flex > a[inview-state="true"] article > figure{
  filter: grayscale(0);
}
.service .s_flex > a article > figure::before{
  content: "";
  position: absolute;
  inset:0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}
.service .s_flex > a article > figure img{
  aspect-ratio: 6/3.5;
}