@charset "UTF-8";
/* CSS Document */

@keyframes bgAnime{
0% {
filter: blur(30px);
transform: scale(1.4);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}

@keyframes loop {
0% {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}

@-webkit-keyframes scroll {
0% {
transform: translate3d(0, -100%, 0);
}
/* 15% {
transform: translate3d(0, -98%, 0);
} */
85% {
transform: translate3d(0, 98%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
@keyframes scroll {
0% {
transform: translate3d(0, -100%, 0);
}
/* 15% {
transform: translate3d(0, -98%, 0);
} */
85% {
transform: translate3d(0, 98%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}


/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}



@keyframes slide {
0% {
-webkit-mask-size: 0% 100%;
mask-size: 0% 100%;
}
100% {
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
}
@keyframes fadeInOut {
0%{ opacity: 0; }
5%{ opacity: 1; }
95%{ opacity: 1; }
100%{ opacity: 0; }
}


@keyframes elm {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(20%);
}
}


/*PC*/
@media print, screen and (min-width: 768px) {

/* slider
--------------------------------------------*/
#mv {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
margin: 0 auto;
overflow: hidden;
}

#mv .mixblend{
mix-blend-mode:overlay;
}

#mv .svg{
position: absolute;
bottom: 0%;
left: -40%;
width:120%;
}

#mv .svg img{
width: 100%;
height: auto;
}

#mask .st1{
fill:none;
stroke:#FFF;
stroke-width:140;/*線の太さを指定する*/
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1500; /* 線の間隔を指定する */
stroke-dashoffset:1500; /* 線の位置を指定する */
}

.slider_txt_box {
position: absolute;
bottom: 1rem;
left: 4rem;
z-index: 10;
}

.slider_txt_box h1{
position: absolute;
bottom: 8%;
left: 96%;
font-size: .9rem;
font-weight: 300;
line-height: 1.4;
letter-spacing: .2em;
white-space: nowrap;
}

.slider_txt_box h2{
font-size:9rem;
font-weight:100;
line-height:1;
white-space:nowrap;
letter-spacing: -0.02em;
position: relative;
}

.slider_txt_box h2 span{
font-size: 12rem;
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
display: block;
}

/* scroll01 */
.scroll01 {
position: absolute;
bottom: 97px;
right: 60px;
width: 2px;
height: 140px;
line-height: 0;
z-index: 5;
transition: opacity .8s ease .3s;
}
.scroll01.-is-show {
opacity: 1;
}
.scroll01 .scrollLine01 {
position: absolute;
bottom: 0;
left: 50%;
display: block;
overflow: hidden;
background: #F1F1F1;
background: rgba(255, 255, 255, 0.19);
}
.scroll01 .scrollLine01 span {
display: block;
z-index: 10;
width: 1px;
height: 140px;
background-color: #000;
-webkit-animation: scroll 2.4s infinite cubic-bezier(0.54, 0, 0, 0.99);
animation: scroll 2.4s infinite cubic-bezier(0.54, 0, 0, 0.99);
}

.animation-container {
width:100%;
padding-bottom: 100%;
position: relative;
}

#canvasContainer {
position: absolute;
top: -30%;
left:42%;
width: 120%;
height: 120%;
}

#canvasContainer canvas{
opacity: 0.2;
}


/* top_slider
--------------------------------------------*/
#top_slider {
position: relative;
overflow: hidden;
}

#top_slider .slider_wrap{
width: 100%;
overflow: hidden;
position: relative;
z-index: 0;
}

#top_slider .slider_wrap .hed_wrap2{
width: 95.3125%;
height: 130px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 0;
}

#top_slider .slider_wrap .hed_wrap2 .hed_tit{
text-align: left;
margin-left: 8rem;
margin-top: 3.2rem;
font-size: 2.2rem;
}

#top_slider .slider {
position: relative;
overflow: hidden;
height: 500px;
}

#top_slider .slider__item {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#top_slider .slider__item img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';/*polifilファイル必要！*/
}
#top_slider .slider__item.pre {
z-index: 2;
}
#top_slider .slider__item.now {
z-index: 3;
}
#top_slider .slider__item.now img {
animation :fadeInOut 8s linear forwards;
}

@supports (-webkit-mask-size: 100% 100%) {
.slider__item img {
-webkit-mask-image: url(../images/index/mask.jpg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-position: left center;
animation:elm 2s infinite;
}
#top_slider .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}
@supports (mask-size: 100% 100%) {
#top_slider .slider__item img {
mask-image: url("../images/index/mask.jpg");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: left center;
}
#top_slider .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}


/* news
--------------------------------------------*/
#news{
margin:0;
padding:30px 0;
box-sizing: border-box;
}

#news .section_wrap{
width: 900px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
background-color: rgba(255,255,255,.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#news .section_wrap .tit_box{
width: 14%;
position: relative;
}

#news .section_wrap .tit_box h2{
font-size: 1.2rem;
font-weight: 100;
font-family: 'Oswald', sans-serif;
line-height: 1;
}

#news .section_wrap .contents_box{
width:86%;
position: relative;
}

#news .section_wrap .contents_box dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 15px;
line-height: 1;
}

#news .section_wrap .contents_box dl:last-child{
margin-bottom: 0;
}

#news .section_wrap .contents_box dl dt{
position: relative;
width: 16%;
font-size: .7rem;
}

#news .section_wrap .contents_box dl dd{
position: relative;
width: 84%;
}

#news .section_wrap .btn_box{
width:100%;
position: relative;
justify-content: flex-end;
display: flex;
}

#news .section_wrap .btn_box a{
line-height: 1;
font-size: .8rem;
padding-right: 10px;
box-sizing: border-box;
}


#news .section_wrap .btn_box a span{
position: absolute;
top: 3px;
right: 0;
width: 6px;
height:6px;
border-top: 1px solid #121212;
border-left: 1px solid #121212;
transform: rotate(135deg);
}

/* about
--------------------------------------------*/
#about{
padding:0 0 140px;
box-sizing: border-box;
}

#about.bgAnime{
animation-name:bgAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}

#about.bgTrigger{
opacity: 0;
}

#about .section_wrap{
position: relative;
width: 900px;
margin:0 auto;
padding: 0;
box-sizing: border-box;
}


#about .section_wrap::before{
}

#about .section_wrap{
position: relative;
margin:0 auto;
text-align: right;
}

#about .section_wrap .hed_tit{
margin:0 auto 0 0;
}

#about .section_wrap .txt_box{
width: 100%;
text-align: left;
border-top: 1px solid #121212;
padding-top: 30px;
box-sizing: border-box;
}


#about .section_wrap .txt_box .hed_tit{
margin-bottom: 100px;
}

#about .section_wrap h3{
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
margin: 0 0 40px;
position: relative;
text-align: right;
}

#about .section_wrap .illust_img{
width: 60%;
margin:30px auto 0;
}


#about .loop_box {
position: relative;
width: 100%;
margin: 20px auto 0 0;
}

#about .loop03 {
width: 100%;
position: absolute;
left: 0;
overflow: hidden;
}
#about .loop03__box {
display: flex;
width: 100vw;
}

#about .loop03__item {
flex: 0 0 auto;
font-size: 6rem;
font-weight: 100;
line-height: 1;
white-space: nowrap;
color: #333;
opacity: 0.1;
white-space: nowrap;
animation: loop 16s -1s linear infinite;
padding: 0 30px;
letter-spacing: -.05em;
}


/* mission
--------------------------------------------*/
#mission{
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0 0 40px;
box-sizing: border-box;
}

#mission .mission_bg{
position: fixed;
top: 0;
right: -20%;
width: 100%;
height:100%;
z-index: -1;
}

#mission .mission_bg img{
width: 100%;
height: auto;
opacity:.03;
}

#mission .section_wrap{
width: 900px;
margin: 0 auto;
position: relative;
}

#mission .section_wrap .hed_tit{
margin-bottom: 0;
}

#mission .mission_block_wrap{
margin: 0 auto;
position: relative;
border-top: 1px solid #161616;
padding: 20px 0 40px;
box-sizing: border-box;
}

#mission .mission_block{
display: flex;
align-items: center;
padding:4.6rem 0;
position: relative;
justify-content: space-between;
}


#mission .mission_block:last-child{
padding-bottom: 0;
}

#mission .mission_block:nth-child(2n){
flex-direction: row-reverse;
}


#mission .mission_block .mission_txt{
width: 50%;
flex-shrink: 0;
position: relative;
box-sizing: border-box;
}

#mission .mission_block .mission_txt .bgno_txt{
position: absolute;
font-size: 5rem;
color:#ddd1b3;
white-space: nowrap;
z-index: -1;
pointer-events: none;
top: -9rem;
left: -2rem;
}

#mission .mission_block .mission_txt .no{
font-size: 1.3rem;
margin: -70px 0 40px;
}

#mission .mission_block .mission_txt h3{
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
margin:0 0 30px;
position: relative;
}

#mission .mission_block .mission_txt h3 .no{
font-family: 'Montserrat', sans-serif;
font-size: 6rem;
-webkit-text-stroke: 1px #FFF;
line-height: 1;
color: transparent;
font-weight: 500;
position: absolute;
bottom: 10%;
left: -12%;
z-index: -1;
opacity: 0.5;
letter-spacing: -.05em;
background: #000;
padding: 5px;
}

#mission .mission_block .mission_txt p{

line-height: 2;
}

#mission .mission_block .misson_img{
width: 42%;
}

#mission .mission_block .misson_img img{
border-radius: 6px;
}

/* consulting
--------------------------------------------*/
#consulting {
position: relative;
overflow: hidden;
}

#consulting .section_wrap{
width: 900px;
margin: 0 auto;
position: relative;
}

#consulting .section_wrap::before{
content: '';
display: block;
width: 100%;
position: absolute;
height: 31px;
left: 0;
mix-blend-mode: multiply;
top: 0;
}

#consulting .section_wrap::after{
content: '';
display: block;
width: 100%;
position: absolute;
height: 31px;
left: 0;
mix-blend-mode: multiply;
bottom: 0;
/*! background-image: linear-gradient(0deg, rgba(226, 220, 221, 0.47) 0%, rgba(243, 243, 243, 0) 75%); */
}

#consulting .section_wrap .hed_tit{
margin-bottom: -10px
}

#consulting .section_wrap .consulting_list{
width:100%;
position: relative;
transition-duration: 500ms;
border-top: 1px solid #161616;
padding-top: 30px;
box-sizing: border-box;
}

#consulting .section_wrap .consulting_list li{
position: relative;
width:100%;
overflow: hidden;
padding-bottom: 20px;
box-sizing: border-box;
}

#consulting .section_wrap .consulting_list li::before{
content: "";
position: absolute;
top: 0;
right: 16%;
width: 40%;
height: 100%;
transform: skewX( -40deg );
background: rgba(0,0,5,.03);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

#consulting .section_wrap .consulting_list li:last-child{
border-bottom: none;
}

#consulting .section_wrap .consulting_list li a{
display: flex;
position: relative;
}

#consulting .section_wrap .consulting_list li .img{
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 220px;
overflow:hidden;
clip-path:polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

#consulting .section_wrap .consulting_list li .img img{
margin-top: -16%
}

#consulting .section_wrap .consulting_list li .txt{
position: relative;
width:67%;
padding-top: 240px;
box-sizing: border-box;
}

#consulting .section_wrap .consulting_list li .txt h3{
font-size:.7rem;
font-weight: 200;
font-family: 'Oswald', sans-serif;
line-height: 1;
white-space: nowrap;
margin: 0 0 10px 2px;
}

#consulting .section_wrap .consulting_list li .txt h4{
font-size: 1.6rem;
font-weight: 200;
white-space: nowrap;
line-height: 1;
margin: 0 0 8px;
}

#consulting .section_wrap .consulting_list li .txt h5{
font-size: 0.9rem;
font-weight: 200;
line-height: 1;
white-space: nowrap;
letter-spacing: 1px;
margin-left: 3px;
}

#consulting .section_wrap .consulting_list li .txt .arrow_img{
position:relative;
width:30px;
margin:0 0 0 auto;
}


/* company
--------------------------------------------*/
#company {
position: relative;
padding: 80px 0 0;
box-sizing: border-box;
overflow: hidden;
}

#company .slider_wrap{
width: 100%;
overflow: hidden;
position: relative;
z-index: 0;
}

#company .slider_wrap .hed_wrap2{
width: 95.3125%;
height: 130px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 0;
}

#company .slider_wrap .hed_wrap2 .hed_tit{
text-align: left;
margin-left: 8rem;
margin-top: 3.2rem;
font-size: 2.2rem;
}

#company .slider {
position: relative;
overflow: hidden;
height: 500px;
}

#company .slider__item {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#company .slider__item img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';/*polifilファイル必要！*/
}
#company .slider__item.pre {
z-index: 2;
}
#company .slider__item.now {
z-index: 3;
}
#company .slider__item.now img {
animation :fadeInOut 8s linear forwards;
}

@supports (-webkit-mask-size: 100% 100%) {
.slider__item img {
-webkit-mask-image: url(../images/index/mask.jpg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-position: left center;
animation:elm 2s infinite;
}
#company .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}
@supports (mask-size: 100% 100%) {
#company .slider__item img {
mask-image: url("../images/index/mask.jpg");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: left center;
}
#company .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}

#company .section_wrap{
background: #FFF;
position: relative;
margin:0 auto;
padding:0 3.5rem 10rem 8rem;
box-sizing: border-box;
}

#company .section_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
background: #f0f0f0;
width: 100%;
height: 110%;
}

#company .hed_wrap2 .en::after{
display: none;
}

#company .section_wrap .company_wrap{
width: 1000px;
margin: auto;
position: relative;
padding: 60px 40px;
box-sizing: border-box;
z-index: 1;
background: #FFF;
}


#company .section_wrap .txt1{
width: 100%;
position: relative;
margin: 0 0 20px;
}

#company .section_wrap .txt1 .sub_txt{
font-size: 1.6rem;
font-weight: 200;
line-height: 1;
position: relative;
margin: 0 0 70px;
}

#company .section_wrap .txt1 .sub_txt::before{
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 50px;
height: 1px;
background: #000;
}

#company .section_wrap .txt2{
width: 100%;
position: relative;
margin: 0 auto;
}

#company .section_wrap .txt2 .hed_tit{
margin-bottom: 5px;
}

#company .section_wrap .txt2 .read_txt{
margin: 0 auto 60px;
}
#company .section_wrap .txt2 .read_txt span{
font-family:'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif
}
}
/*sp*/
@media only screen and (max-width: 767px) {

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#000;
text-align:center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}



/* top_slider
--------------------------------------------*/
#top_slider {
position: relative;
overflow: hidden;
}


#top_slider .slider_wrap{
width: 100%;
overflow: hidden;
position: relative;
z-index: 0;
}

#top_slider .slider_wrap .hed_wrap2{
width:96%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 0;
}

#top_slider .slider {
position: relative;
overflow: hidden;
height: 180px;
}

#top_slider .slider__item {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#top_slider .slider__item img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';/*polifilファイル必要！*/
}
#top_slider .slider__item.pre {
z-index: 2;
}
#top_slider .slider__item.now {
z-index: 3;
}
#top_slider .slider__item.now img {
animation :fadeInOut 8s linear forwards;
}
@supports (-webkit-mask-size: 100% 100%) {
.slider__item img {
-webkit-mask-image: url(../images/index/mask.jpg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-position: left center;
}
#top_slider .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}
@supports (mask-size: 100% 100%) {
#top_slider .slider__item img {
mask-image: url("../images/index/mask.jpg");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: left center;
animation:elm 2s infinite;
}
#top_slider .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}





/* slider
--------------------------------------------*/
#mv {
position: relative;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
overflow: hidden;
}

#mv .mixblend{
}

#mv .svg{
position: absolute;
bottom: 0%;
left: -120%;
width:240%;
mix-blend-mode:overlay;
z-index: -1;
}

#mv .svg img{
width:100%;
height:auto;
}

#mask .st1{
fill:none;
stroke:#FFF;
stroke-width:140;/*線の太さを指定する*/
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1500; /* 線の間隔を指定する */
stroke-dashoffset:1500; /* 線の位置を指定する */
}

.slider_txt_box {
position: absolute;
bottom: 1rem;
left: 2%;
z-index: 1;
}

.slider_txt_box h1{
position: relative;
font-size: 0.6rem;
font-weight: 300;
line-height: 1.4;
letter-spacing: .2em;
margin: 0 0 5px
}

.slider_txt_box h2{
font-size: 3rem;
font-weight:100;
line-height:1;
white-space:nowrap;
letter-spacing: -0.02em;
position: relative;
}

.slider_txt_box h2 span{
font-size: 3rem;
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
display: block;
}

/* scroll01 */
.scroll01 {
position: absolute;
bottom: 97px;
right: 30px;
width: 2px;
height: 140px;
line-height: 0;
z-index: 5;
transition: opacity .8s ease .3s;
}
.scroll01.-is-show {
opacity: 1;
}
.scroll01 .scrollLine01 {
position: absolute;
bottom: 0;
left: 50%;
display: block;
overflow: hidden;
background: #F1F1F1;
background: rgba(255, 255, 255, 0.19);
}

.scroll01 .scrollLine01 span {
display: block;
z-index: 10;
width: 1px;
height: 140px;
background-color: #000;
-webkit-animation: scroll 2.4s infinite cubic-bezier(0.54, 0, 0, 0.99);
animation: scroll 2.4s infinite cubic-bezier(0.54, 0, 0, 0.99);
}

.animation-container {
width:100%;
padding-bottom: 100%;
position: relative;
}

#canvasContainer {
position: absolute;
top: -15%;
left: 0%;
width: 180%;
height: 180%;
z-index: 2;
}

#canvasContainer canvas{
opacity: 0.2;
}

/* news
--------------------------------------------*/
#news{
margin: 0 10%;
padding:40px 0 0;
box-sizing: border-box;
}

#news .section_wrap{
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
background-color: rgba(255,255,255,.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

#news .section_wrap .tit_box{
width: 100%;
position: relative;
margin: 0 0 10px;
display: none;
}

#news .section_wrap .tit_box h2{
font-size:.8rem;
font-weight: 100;
font-family: 'Oswald', sans-serif;
line-height: 1;
}

#news .section_wrap .contents_box{
width: 100%;
position: relative;
}

#news .section_wrap .contents_box dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 10px;
}

#news .section_wrap .contents_box dl:last-child{
margin-bottom: 0;
}

#news .section_wrap .contents_box dl dt{
position: relative;
width: 25%;
font-size: .7rem;
}

#news .section_wrap .contents_box dl dd{
position: relative;
width: 75%;
font-size: .7rem;
}

#news .section_wrap .btn_box{
width: 100%;
position: relative;
justify-content: flex-end;
display: flex;
margin-top: 5px;
}

#news .section_wrap .btn_box a{
line-height: 1;
font-size: .6rem;
padding-right: 10px;
box-sizing: border-box;
}


#news .section_wrap .btn_box a span{
position: absolute;
top: 2px;
right: 0;
width: 6px;
height:6px;
border-top: .5px solid #121212;
border-left: .5px solid #121212;
transform: rotate(135deg);
}

/* about
--------------------------------------------*/
#about{
padding:40px 0 0;
box-sizing: border-box;
margin: 0 auto;
overflow: hidden;
}

#about.bgAnime{
animation-name:bgAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}

#about.bgTrigger{
opacity: 0;
}

#about .section_wrap{
position: relative;
width: 100%;
margin:0 auto;
padding: 0 10% 0 10%;
box-sizing: border-box;
}


#about .section_wrap::before{
content: '';
position: absolute;
top:12%;
bottom: 8%;
left: 0;
right: 0;
background-color:rgba(255,255,255,.3);
transform: skewY(-15deg);
z-index: -1;
}

#about .section_wrap{
position: relative;
margin:0 auto;
text-align: right;
}

#about .section_wrap .hed_tit{
margin:0 auto -10px 0;
}

#about .section_wrap .txt_box{
width: 100%;
text-align: left;
border-top: 1px solid #121212;
padding-top: 20px;
box-sizing: border-box;
}

#about .section_wrap h3{
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
margin: 0 0 20px;
position: relative;
text-align: right;
}

#about .section_wrap p{
line-height: 2;
align-items: center;
}

#about .loop_box {
display: none;
}

#about .illust_img{
width: 90%;
margin: 20px auto 0;
}

/* mission
--------------------------------------------*/
#mission{
position: relative;
overflow: hidden;
margin:0 auto 30px;
}

#mission .mission_bg{
position: fixed;
top: 0;
right: -20%;
width: 100%;
height:100%;
z-index: -1;
}

#mission .mission_bg img{
width: 100%;
height: auto;
opacity:.03;
}

#mission .section_wrap{
margin: 0 auto;
padding: 0 10%;
box-sizing: border-box;
position: relative;
}

#mission .section_wrap .hed_tit{
margin-bottom: -10px;
}

#mission .mission_block_wrap{
border-top: 1px solid #161616;
padding-top: 20px;
box-sizing: border-box;
}

#mission .mission_block{
padding: 20px 0;
position: relative;
}


#mission .mission_block .mission_txt{
position: relative;
box-sizing: border-box;
}

#mission .mission_block .mission_txt .bgno_txt{
position: absolute;
font-size: 2.6rem;
color: #d2bf90;
white-space: nowrap;
z-index: -1;
pointer-events: none;
top: -2.4rem;
left: -6%;
opacity: 0.6;
}

#mission .mission_block .mission_txt .no{
font-size: 0.8rem;
margin: 0 0 20px;
}

#mission .mission_block .mission_txt h3{
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
margin:0 0 10px;
position: relative;
}

#mission .mission_block .mission_txt h3 .no{
font-family: 'Montserrat', sans-serif;
font-size: 6rem;
-webkit-text-stroke: 1px #FFF;
line-height: 1;
color: transparent;
font-weight: 500;
position: absolute;
bottom: 10%;
left: -12%;
z-index: -1;
opacity: 0.5;
letter-spacing: -.05em;
background: #000;
padding: 5px;
}

#mission .mission_block .mission_txt p{
line-height: 2;
}

#mission .mission_block .misson_img{
width: 80%;
margin: auto;
}

#mission .mission_block .misson_img img{
border-radius: 6px;
display: none;
}


/* consulting
--------------------------------------------*/
#consulting {
position: relative;
overflow: hidden;
}

#consulting .section_wrap{
margin: 0 auto;
padding: 0 10%;
box-sizing: border-box;
position: relative;
}

#consulting .section_wrap::before{
content: '';
display: block;
width: 100%;
position: absolute;
height: 31px;
left: 0;
mix-blend-mode: multiply;
top: 0;
}

#consulting .section_wrap::after{
content: '';
display: block;
width: 100%;
position: absolute;
height: 31px;
left: 0;
mix-blend-mode: multiply;
bottom: 0;
/*! background-image: linear-gradient(0deg, rgba(226, 220, 221, 0.47) 0%, rgba(243, 243, 243, 0) 75%); */
}

#consulting .section_wrap .hed_tit{
margin-bottom: -10px
}

#consulting .section_wrap .consulting_list{
width:100%;
position: relative;
transition-duration: 500ms;
border-top: 1px solid #161616;
padding-top: 30px;
box-sizing: border-box;
position: relative;
}

#consulting .section_wrap .consulting_list li{
position: relative;
width:100%;
overflow: hidden;
padding-bottom: 6px;
box-sizing: border-box;
}

#consulting .section_wrap .consulting_list li::before{
content: "";
position: absolute;
top: 0;
right:5%;
width: 40%;
height: 100%;
transform: skewX( -35deg );
background: rgba(0,0,5,.03);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

#consulting .section_wrap .consulting_list li:last-child{
border-bottom: none;
}

#consulting .section_wrap .consulting_list li a{
display: flex;
position: relative;
}

#consulting .section_wrap .consulting_list li .img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
overflow:hidden;
clip-path:polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

#consulting .section_wrap .consulting_list li .img img{
margin-top: -16%
}

#consulting .section_wrap .consulting_list li .txt{
position: relative;
width:100%;
padding-top: 130px;
box-sizing: border-box;
}

#consulting .section_wrap .consulting_list li .txt h3{
font-size:.5rem;
font-weight: 200;
font-family: 'Oswald', sans-serif;
line-height: 1;
white-space: nowrap;
margin: 0 0 10px 2px;
}

#consulting .section_wrap .consulting_list li .txt h4{
font-size: 1.3rem;
font-weight: 200;
white-space: nowrap;
line-height: 1;
margin: 0 0 8px;
}

#consulting .section_wrap .consulting_list li .txt h5{
font-size: 0.65rem;
font-weight: 200;
line-height: 1;
white-space: nowrap;
letter-spacing: 1px;
margin-left: 3px;
}

#consulting .section_wrap .consulting_list li .txt .arrow_img{
position:relative;
width:30px;
margin:0 0 0 auto;
}




/* company
--------------------------------------------*/
#company {
position: relative;
padding: 60px 0 0;
box-sizing: border-box;
overflow: hidden;
}


#company .slider_wrap{
width: 100%;
overflow: hidden;
position: relative;
z-index: 0;
}

#company .slider_wrap .hed_wrap2{
width:96%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 0;
}

#company .hed_wrap2 .en::after{
display: none;
}

#company .hed_wrap2 .en{
font-size: 1.2rem;
}

#company .slider_wrap .hed_wrap2 .hed_tit{
text-align: left;
margin-left: 2rem;
margin-top: 1.6rem;
margin-bottom: 0;
}

#company .slider {
position: relative;
overflow: hidden;
height: 180px;
}

#company .slider__item {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#company .slider__item img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';/*polifilファイル必要！*/
}
#company .slider__item.pre {
z-index: 2;
}
#company .slider__item.now {
z-index: 3;
}
#company .slider__item.now img {
animation :fadeInOut 8s linear forwards;
}
@supports (-webkit-mask-size: 100% 100%) {
.slider__item img {
-webkit-mask-image: url(../images/index/mask.jpg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-position: left center;
}
#company .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}
@supports (mask-size: 100% 100%) {
#company .slider__item img {
mask-image: url("../images/index/mask.jpg");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: left center;
animation:elm 2s infinite;
}
#company .slider__item.now img {
animation: slide 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
}
}

#company .section_wrap{
background: #FFF;
position: relative;
margin:0 auto;
padding:0 4% 60px;
box-sizing: border-box;
}

#company .section_wrap::before{
content: "";
position: absolute;
top:0;
right: 0;
background: #f0f0f0;
width: 100%;
height: 100%;
}

#company .section_wrap .company_wrap{
position: relative;
padding:8%;
box-sizing: border-box;
z-index: 1;
background: #FFF;
}


#company .section_wrap .txt2{
width: 100%;
position: relative;
margin: 0 auto;
}

#company .section_wrap .txt2 .hed_tit{
margin-bottom:0px;
}

#company .section_wrap .txt2 .read_txt{
margin: 0 auto 30px;
font-size: .65rem;
line-height: 1.6;
}


#company .section_wrap .txt2 .read_txt span{
font-family:'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif
}
}