/* CSS Document */
main *{
  color: #fff;
}
/*ページタイトル*/
.page_title.management h2::before{
	content: "Management"
}
.page_title.production h2::before{
	content: "Production"
}
.page_title.selection h2::before{
	content: "Selection"
}
/*サービストップ*/
.top{
  background-color: #000;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .top{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .top{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .top{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .top{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.top .sub_title .sub_t_box .orange_c{
  transition:color 1s 0.25s ease !important;
  color: #fff !important;
}
.top .sub_title .sub_t_box .orange_c{
  color: #ff6905 !important;
}
.top > p{
  line-height: 1.8rem;
  margin-top: 1.5rem;
  transition: opacity ease 1s,filter ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.top > p[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body:not([wc-view-type="sp"]) .top > p{
  text-align: center;
}
/*サービス*/
.service{
  background-color: #262729;
  box-sizing:border-box;
}
.service.gradation{
  background: rgb(38,39,41);
  background: linear-gradient(90deg, rgba(38,39,41,1) 0%, rgba(0,0,0,1) 100%);
}
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.strengths .contents_title::before{
  content: "Strengths";
}
.service .sub_title .sub_t_box .orange_c{
  transition-delay: 0.25s !important;
}
.service > article{
  display: flex;
}
.service > article:first-of-type{
  margin-top: 2rem;
}
.service > article:not(:first-of-type){
  margin-top: var(--headerHeight);
}
body[wc-view-type="sp"] .service > article{
  flex-direction: column;
}
body:not([wc-view-type="sp"]) .service > article:nth-of-type(even){
  flex-direction: row-reverse;
}
.service > article .s_text{
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .service > article .s_text{
  padding-left: 3rem;
  box-sizing: border-box;
  padding-bottom: 1rem;
}
body:not([wc-view-type="sp"]) .service > article .s_text{
  width: 50%;
}
body[wc-view-type="tb"] .service > article:nth-of-type(odd) .s_text,
body[wc-view-type="tb-l"] .service > article:nth-of-type(odd) .s_text{
  padding: 0 1.5rem 0 3rem;
}
body[wc-view-type="tb"] .service > article:nth-of-type(even) .s_text,
body[wc-view-type="tb-l"] .service > article:nth-of-type(even) .s_text{
  padding: 0 3rem 0 1.5rem;
}
body[wc-view-type="pc"] .service > article:nth-of-type(odd) .s_text{
  padding: 1.5rem 2.5rem 1.5rem 3.5rem;
}
body[wc-view-type="pc"] .service > article:nth-of-type(even) .s_text{
  padding: 1.5rem 3.5rem 1.5rem 2.5rem;
}
.service > article .s_text .s_number{
  position: absolute;
  top: 0;
  font-size: 2.8rem;
  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;
  writing-mode: vertical-rl;
  transition: opacity 1s 0.25s ease,filter 1s 0.25s ease;
  opacity: 0;
  filter: blur(10px);
}
.service > article[inview-state="true"] .s_text .s_number{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="sp"] .service > article .s_text .s_number{
  left: 0;
}
body:not([wc-view-type="sp"]) .service > article:nth-of-type(odd) .s_text .s_number{
  left: 0;
}
body:not([wc-view-type="sp"]) .service > article:nth-of-type(even) .s_text .s_number{
  right: 0;
}
.service > article .s_text > h2{
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1rem 0.75rem;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.service > article .s_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.25s ease;
}
.service > article[inview-state="true"] .s_text > h2 .sc_border{
  right: 0;
  width: 100%;
}
.service > article .s_text > h2 .sc_border > span{
  position: absolute;
  inset:0;
}
.service > article .s_text > h2 .sc_border > span::before,
.service > article .s_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;
}
.service > article .s_text > h2 .sc_border > span::before{
  transition: opacity 0.5s ease;
  opacity: 0;
}
.service > article[inview-state="true"] .s_text > h2 .sc_border > span::before{
  opacity: 1;
}
.service > article .s_text > h2 .sc_border > span::before{
  left: 0;
}
.service > article .s_text > h2 .sc_border > span::after{
  right: 0;
}
.service > article .s_text > h2 .sc_border > span::after{
  transition: opacity 0.5s 1s ease;
  opacity: 0;
}
.service > article[inview-state="true"] .s_text > h2 .sc_border > span::after{
  opacity: 1;
}
.service > article .s_text > p{
  line-height: 1.8rem;
  padding: 0.75rem 0.75rem 0 0.75rem;
  box-sizing: border-box;
  transition: opacity 1s 0.25s ease,filter 1s 0.25s ease;
  opacity: 0;
  filter: blur(10px);
}
body[wc-view-type="sp"] .service > article .s_text > p{
	min-height: 135px;
}
.service > article[inview-state="true"] .s_text > p{
  opacity: 1;
  filter: blur(0);
}
.service > article figure{
  filter: grayscale(100%);
  transition: filter 0.75s 0.75s linear;
}
.service > article[inview-state="true"] figure{
  filter: grayscale(0);
}
body:not([wc-view-type="sp"]) .service > article figure{
  width: 50%;
}
.service > article figure img{
  border-radius: 1.5rem;
}
/*制作事例*/
.p_case{
  background-color: rgba(0,0,0,0.65);
  box-sizing: border-box;
}
body[wc-view-type="sp"] .p_case{
  padding: var(--headerHeight) 0;
}
body[wc-view-type="tb"] .p_case{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .p_case{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .p_case{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.p_case .contents_title::before{
  content: "Case";
}
.p_case > p{
  margin-bottom: 1.5rem;
  line-height: 1.8rem;
}
body[wc-view-type="sp"] .p_case > p{
  padding: 0 7vw;
  box-sizing: border-box;
}
body:not([wc-view-type="sp"]) .p_case > p{
  text-align: center;
}

.p_case .c_slider_wrap{
  margin-top: 2rem;
}/*
.c_slider_wrap .cs_inner{
  height: inherit !important;
  width: inherit !important;
}*/
body[wc-view-type="sp"] .c_slider_wrap .cs_inner{
	height: calc(292px + 2rem) !important;
}
body[wc-view-type="tb"] .c_slider_wrap .cs_inner{
	height: calc(318px + 2rem) !important;
}
body[wc-view-type="tb-l"] .c_slider_wrap .cs_inner,
body[wc-view-type="pc"] .c_slider_wrap .cs_inner{
	height: calc(375px + 2rem) !important;
}
body:not([wc-view-type="sp"]) .c_slider_wrap .cs_inner{
-webkit-mask-image: -webkit-linear-gradient(left, transparent var(--avesize),black var(--viewdif),black calc(100% - var(--viewdif)),transparent calc(100% - var(--avesize)));
  mask-image: linear-gradient(to right, transparent var(--avesize),black var(--viewdif),black calc(100% - var(--viewdif)),transparent calc(100% - var(--avesize)));
}
.p_case .c_slider_wrap .t_slider_block{
	gap:1.5rem;
}
body[wc-view-type="sp"] .p_case .c_slider_wrap .t_slider_block{
	gap:1rem
}
.p_case .c_slider_wrap .t_slider_block .case_item{
  display: block;
  text-decoration: none;
}
.p_case .c_slider_wrap .t_slider_block .case_item.wcactive{
}
body[wc-view-type="sp"] .p_case .c_slider_wrap .t_slider_block .case_item{
  width: 280px !important;
	height: 292px !important;
}
body[wc-view-type="tb"] .p_case .c_slider_wrap .t_slider_block .case_item{
  width: 300px !important;
	height: 318px !important;
}
body[wc-view-type="tb-l"] .p_case .c_slider_wrap .t_slider_block .case_item,
body[wc-view-type="pc"] .p_case .c_slider_wrap .t_slider_block .case_item{
  width: 380px !important;
	height: 375px !important;
}
.p_case .c_slider_wrap .t_slider_block a article{
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 3.5rem;
  background-color: rgba(38,39,41,0.75) !important;
  border-radius: 1.5rem;
}
body[wc-view-type="sp"] .p_case .c_slider_wrap .t_slider_block a article{
	width: 280px !important;
	height: 292px !important;
}
.p_case .c_slider_wrap .t_slider_block a article figure{
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}
.p_case .c_slider_wrap .t_slider_block a.wcactive article figure{
  filter: grayscale(0);
}
.p_case .c_slider_wrap .t_slider_block a article figure img{
  aspect-ratio:1.414/1;
  width: 100% !important;
  height: auto !important;
  border-radius: 1rem;
}
.p_case .c_slider_wrap .t_slider_block a article .c_slider_box{
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
}
.p_case .c_slider_wrap .t_slider_block a article .c_slider_box > h2{
  color: #fff;
  font-weight: 700;
  white-space: nowrap; /* 横幅のMAXに達しても改行しない */
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 「…」と省略 */
  -webkit-text-overflow: ellipsis; /* Safari用 */
  -o-text-overflow: ellipsis; /* Opera用 */
}
.p_case .c_slider_wrap .t_slider_block a article .c_slider_box > h2 .cs_title{
  display: table;
  padding: 0 1rem;
  font-size: 0.9rem;
  border-radius: 1rem;
  border: solid 1px #fff;
  box-sizing: border-box;
  margin-bottom: 0.25rem;
}
.p_case .c_slider_wrap .t_slider_block a article .c_slider_box > time{
  line-height: 1em;
  font-family: "Oswald";
  letter-spacing: 2px;
  color: #fff;
  font-weight: 700;
  text-align: right;
  margin-bottom: 0.45rem;
}
.p_case .btn{
  margin: 2rem auto 0 auto;
}
/*事例スライダー矢印*/
/*.case .c_slider_wrap .cs_wrap:not(.cssinglemode) .csarrowwrap{
  top: 40% !important;
}*/
.p_case .csarrowwrap{
	top: 45% !important;
}
/*事例スライダーpager*/
.cs_wrap .cs_pagerwrap.cs-pager-timebar .cs_pager .cs_item span.meterbar{
  background-color: #fff !important;
}
.cs_wrap[pager-pos="top"] .cs_pagerwrap.cs-pager-timebar .cs_pager .cs_item span.meterbar, .cs_wrap[pager-pos="bottom"] .cs_pagerwrap.cs-pager-timebar .cs_pager .cs_item span.meterbar{
  height: 1px !important;
}
.cs_wrap[pager-pos="top"] .cs_pagerwrap.cs-pager-timebar .cs_pager, .cs_wrap[pager-pos="bottom"] .cs_pagerwrap.cs-pager-timebar .cs_pager{
  height: 1px !important;
}
/*事例スライダー　文字カウント*/
.csviewcount:not([count-type="digital"]) span{
  font-size: 0.8rem;
}
.cs_wrap:not([class*="comboslider-page"]) .csviewcount {
  padding: 0.25rem 0.75em !important;
  height: auto !important;
  line-height: 1em;
  bottom: 0 !important;
}
body[wc-view-type="sp"] .cs_wrap:not([class*="comboslider-page"]) .csviewcount{
  right: 7vw !important;
}
/*事例mask*/

body:not([wc-view-type="sp"]) .c_slider_wrap .cs_inner {
  -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)));
}
/*事例下の線*/
body[wc-view-type="sp"] .cs_wrap:not(.cssinglemode) .cs_pagerwrap{
  width: 86vw;
  margin: 0 auto;
}

/*制作の流れ*/
.flow{
  background-color: #262729;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .flow{
  padding: var(--headerHeight) 0;
}
body[wc-view-type="tb"] .flow{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .flow{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .flow{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.flow .contents_title::before{
  content: "Flow";
}
.flow > .f_contents{
  display: flex;
}
body:not([wc-view-type="pc"]) .flow > .f_contents{
  flex-direction: column;
}
body[wc-view-type="tb"] .flow > .f_contents,
body[wc-view-type="tb-l"] .flow > .f_contents{
  align-items: center;
}
.flow .f_contents .f_text{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: opacity 1s ease,filter 1s ease;
  opacity: 0;
  filter: blur(10px);
}
.flow .f_contents .f_text[inview-state="true"]{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="pc"] .flow .f_contents .f_text{
  width: 50%;
  padding: 1.5rem 2rem;
}
.flow .f_contents .f_text > p{
  line-height: 1.8rem;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .flow .f_contents .f_text > p{
  padding: 0 7vw;
}
.flow .f_contents .f_text > .btn{
}
body[wc-view-type="sp"] .flow .f_contents .f_text > .btn{
  margin-top: 1.5rem;
}
body[wc-view-type="tb"] .flow .f_contents .f_text > .btn,
body[wc-view-type="tb-l"] .flow .f_contents .f_text > .btn{
  margin: 1.5rem auto;
}
body[wc-view-type="pc"] .flow .f_contents .f_text > .btn{
  margin-top: auto;
}
.flow .f_contents .step_block{
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
}
body[wc-view-type="sp"] .flow .f_contents .step_block{
  padding: 0 7vw;
  margin: 1.5rem 0;
  overflow-x: auto !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 1px;
}
body[wc-view-type="sp"] .contents_box::-webkit-scrollbar,
body[wc-view-type="sp"] .flow .f_contents .step_block::-webkit-scrollbar{
  display: none;
}
body[wc-view-type="pc"] .flow .f_contents .step_block{
  width: 50%;
}
.flow .f_contents .step_block .step_box{
  display: flex;
  flex-direction: column-reverse;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  width: 55px;
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  align-items: center;
  flex: none;
}
.flow .f_contents .step_block .s_arrow{
  width: 2rem;
  display: table;
  position: relative;
  z-index: 1;
  flex: none;
}
.flow .f_contents .step_block .s_arrow::before{
  content: "";
  width: 1rem;
  height: 1rem;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  position: absolute;
  left: 40%;
  top: 45%;
  transform: translate(-50%,-50%) rotate(45deg);
  z-index: 1;
  transition: opacity 1s ease 0.5s,filter 1s ease 0.5s;
  opacity: 0;
  filter: blur(10px);
}
.flow .f_contents .step_block .s_arrow[inview-state="true"]::before{
  opacity: 1;
  filter: blur(0);
}
.flow .f_contents .step_block .step_box::before{
  content: "";
  position: absolute;
  inset: 0;
  border: solid 1px #fff;
  border-radius: 2rem;
  transform: scale(75%);
  z-index: 2;
  transition: all 0.75s ease;
  opacity: 0;
  filter: blur(10px);
}
.flow .f_contents .step_block .step_box[inview-state="true"]::before{
  opacity: 1;
  transform: scale(100%);
  filter: blur(0);
}
.flow .f_contents .step_block .step_box:last-of-type::after{
  display: none;
}
.flow .f_contents .step_block .step_box .step_num{
  display: flex;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Oswald";
  flex-direction: column;
  align-items: center;
  transition: opacity 1s ease 0.5s,filter 1s ease 0.5s;
  opacity: 0;
  filter: blur(10px);
}
.flow .f_contents .step_block .step_box[inview-state="true"] .step_num{
  opacity: 1;
  filter: blur(0);
}
.flow .f_contents .step_block .step_box .step_num::before{
  content: "Step";
  font-weight: 700;
  font-family: "Oswald";
  display: block;
  line-height: 1em;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}
.flow .f_contents .step_block .step_box > h3{
  font-weight: 700;
  writing-mode: vertical-rl;
  margin-top: 0.5rem;
  letter-spacing: 5px;
  transition: opacity 1s ease 0.5s,filter 1s ease 0.5s;
  opacity: 0;
  filter: blur(10px);
	display: flex;
	align-items: baseline;
}
.flow .f_contents .step_block .step_box > h3 .rotate{
	font-weight: 700;
	color: #fff;
	display: table;
  padding: 0.15rem 0.2rem;
	transform: rotate(-90deg);
}
.flow .f_contents .step_block .step_box > h3 .rotate:last-of-type{
	margin-bottom: 0.25rem;
}
.flow .f_contents .step_block .step_box[inview-state="true"] > h3{
  opacity: 1;
  filter: blur(0);
}