@charset "UTF-8";

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

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}


@keyframes flowX {
from { transform: translateX(0); }
to   { transform: translateX(-240vw); }
}

@keyframes fade-switch {
0%   { opacity: 0; }
10%  { opacity: 1; }
60%  { opacity: 1; }
65%  { opacity: 0; }
100% { opacity: 0; }
}

.updwn {
animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-y {
0% {
transform: translateY(-8%);
}
100% {
transform: translateY(8%);
}
}


/*PC*/
@media print, screen and (min-width: 769px) {
/* mv
--------------------------------------------*/
#mv {
position: relative;
overflow: hidden;
}

#mv .mv_txt_box{
position: absolute;
top: 25%;
left: 3%;
z-index: 20;
padding: 35px;
box-sizing: border-box;
backdrop-filter: blur(12px);
border-radius: .6rem;
white-space: nowrap;
}

#mv .mv_txt_box h1{
font-size:5.5rem;
font-weight: 800;
font-style: italic;
letter-spacing: -.1rem;
line-height: 1.3;
margin:0px 0 15px;
}

#mv .mv_txt_box h1 span{
color:#e73829;
}

#mv .mv_txt_box p{
font-weight: 800;
font-size: 1.3rem;
}

#mv .mv_img{
position: absolute;
top: 50px;
right: -100px;
z-index: -1;
}

#mv article{
position: absolute;
bottom:-70px;
left:0;
overflow: hidden;
z-index:0;
}

#mv .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:10rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#e73829;
opacity: .2;
}

#mv .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

.mv_updwn {
animation: skijump 4s linear infinite;
}

@keyframes skijump {
0%   { transform: translate(5%,-5%) rotate( 0deg) scale(1.6); opacity: 1; }
80% { transform: translate(-40%,40%) rotate( 0deg) scale(.4); opacity:1; }
100% { transform: translate(-50%,50%) rotate( 0deg) scale(.4); opacity:0; }
}


/* about
--------------------------------------------*/
#about {
position: relative;
width: 100%;
margin: 0 auto 60px;
background: url("../images/com/bg_red.jpg") 0 0 repeat;
padding: 120px 0;
box-sizing: border-box;
overflow: hidden;
}

#about .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#about .flex_wrap .imgbox {
width: 50%;
overflow: hidden;
}
#about .flex_wrap .imgbox img {
border-radius: 0 .6rem .6rem 0;
}

#about .flex_wrap .txtbox {
position: relative;
width: 50%;
padding: 0 5%;
box-sizing: border-box;
}

#about .flex_wrap .txtbox .i_img{
width: 100px;
margin: 0 0 20px -50px;
}

#about .flex_wrap .txtbox .ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#about .flex_wrap .txtbox .ttl span{
display: inline-block;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-left:10px;
}

#about .flex_wrap .txtbox .sub_ttl{
font-size: 3.4rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
color: #FFF;
margin: 0 0 30px;
}

#about .flex_wrap .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#about .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: left;
}


/* future_potential
--------------------------------------------*/
#future_potential {
position: relative;
width: 100%;
margin: 0 auto 120px;
overflow: hidden;
}

#future_potential .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}

#future_potential .flex_wrap .imgbox {
width: 50%;
overflow: hidden;
}
#future_potential .flex_wrap .imgbox img {
border-radius: .6rem 0 0 .6rem;
}

#future_potential .flex_wrap .txtbox {
position: relative;
width: 50%;
padding:5%;
box-sizing: border-box;
}

#future_potential .flex_wrap .txtbox .i_img{
width: 100px;
margin: 0 0 20px -50px;
position: relative;
}

#future_potential .flex_wrap .txtbox .ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #e73829;
margin: 0 0 40px;
}

#future_potential .flex_wrap .txtbox .sub_ttl{
font-size: 3.4rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
}

#future_potential .flex_wrap .txtbox .txt {
font-size: 1rem;
}

#future_potential .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: left;
}



/* career_path
--------------------------------------------*/
#career_path {
position: relative;
width: 100%;
margin: 0 auto;
background: url("../images/com/bg_red.jpg") 0 0 repeat;
padding: 120px 0;
box-sizing: border-box;
overflow: hidden;
}

#career_path .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#career_path .flex_wrap .imgbox {
width: 50%;
overflow: hidden;
}
#career_path .flex_wrap .imgbox img {
border-radius: 0 .6rem .6rem 0;
}

#career_path .flex_wrap .txtbox {
position: relative;
width: 50%;
padding: 0 5%;
box-sizing: border-box;
}

#career_path .flex_wrap .txtbox .i_img{
width: 100px;
margin: 0 0 20px -50px;
}

#career_path .flex_wrap .txtbox .ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#career_path .flex_wrap .txtbox .ttl span{
display: inline-block;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-left:10px;
}

#career_path .flex_wrap .txtbox .sub_ttl{
font-size: 3.4rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
color: #FFF;
margin: 0 0 30px;
}

#career_path .flex_wrap .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#career_path .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: left;
}



/* track_record
--------------------------------------------*/
#track_record {
position: relative;
width: 90%;
margin: 0 auto;
padding: 160px 0;
box-sizing: border-box;
}

#track_record .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}

#track_record .flex_wrap .imgbox {
width: 55%;
}

#track_record .flex_wrap .imgbox ul .slick-list {
position: relative;
border-radius: 10px;
line-height: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

#track_record .flex_wrap .txtbox{
position: relative;
width: 40%;
}

#track_record .flex_wrap .txtbox .i_img{
width: 100px;
margin: 0 0 20px -50px;
}

#track_record .flex_wrap .txtbox .ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #e73829;
margin: 0 0 40px;
}

#track_record .flex_wrap .txtbox .sub_ttl{
font-size: 3.4rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
}

#track_record .flex_wrap .txtbox .txt {
font-size: 1rem;
}

#track_record .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: left;
}

/* work_style
--------------------------------------------*/
#work_style {
position: relative;
width: 90%;
margin: 0 auto 150px;
padding: 50px;
background: url("../images/index/work_style.jpg") no-repeat center;
background-size: cover;
box-sizing: border-box;
border-radius: 1rem;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

#work_style::after {
content: '';
display: block;
background: rgba(0,0,0,.3);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius:1rem;
}

#work_style .txtbox{
position: relative;
width: 100%;
z-index: 5;
}

#work_style .txtbox .i_img{
width: 100px;
margin: 0 0 20px -30px;
}

#work_style .txtbox .ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#work_style .txtbox .ttl span{
display: inline-block;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-left:10px;
}

#work_style .txtbox .sub_ttl{
font-size: 3.4rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
color: #FFF;
}

#work_style .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#work_style .txtbox .common_btn_box {
margin-top: 30px;
text-align: left;
}



/*------------idx_box0809-------------*/
#idx_box0809 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#idx_box0809 .idx_tit_C {
color: #fff;
margin-bottom: 0px;
}
#idx_box0809 .idx_tit_C span.en {
color: #fff;
}
#idx_box08 {
width: 50%;
}
#idx_box09 {
width: 50%;
}
.idx_box0809_box a {
width: 100%;
display: block;
height: 100%;
mix-blend-mode: normal !important;
}
.idx_box0809_box a#cursor.hov_ {
mix-blend-mode: normal !important;
}
.idx_box0809_txtbox {
position: absolute;
z-index: 10;
top: 50%;
left: 0;
right: 0;
margin: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.idx_box0809_s {
position: relative;
overflow: hidden;
height: 25vw;
mix-blend-mode: normal !important;
}
.idx_box0809_s:hover::before {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s
}
.idx_box08_bg::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("../images/index/rrBtn_img01.png") center center;
background-size: cover;
mix-blend-mode: normal !important;
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.idx_box08_bg::after {
width: 100%;
height: 100%;
}
.idx_box09_bg::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("../images/index/rrBtn_img02.png") center center;
background-size: cover;
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.entry_box_tit {
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
color: #fff;
}
.entry_box_tit span.en {
display: block;
font-size: .8rem;
margin-bottom: 10px;
}
.entry_box_tit span.jp {
font-size: 2rem;
line-height: 1;
}

}
/*sp*/
@media only screen and (max-width: 768px) {
/* mv
--------------------------------------------*/
#mv {
position: relative;
overflow: hidden;
}

#mv .mv_txt_box{
width: 90%;
position: absolute;
top: 35%;
left: 5%;
z-index: 20;
padding: 15px;
box-sizing: border-box;
backdrop-filter: blur(12px);
border-radius: .6rem;
}

#mv .mv_txt_box h1{
font-size:2rem;
font-weight: 800;
font-style: italic;
letter-spacing:0;
line-height: 1.3;
margin:0px 0 15px;
}

#mv .mv_txt_box h1 span{
color:#e73829;
}

#mv .mv_txt_box p{
font-weight: 800;
font-size: 1rem;
}

#mv .mv_img{
position: absolute;
top: 50px;
right: -100px;
z-index: -1;
}

#mv article{
position: absolute;
bottom:-70px;
left:0;
overflow: hidden;
z-index:0;
}

#mv .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:4rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#e73829;
opacity: .2;
}

#mv .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

.mv_updwn {
animation: skijump 4s linear infinite;
}

@keyframes skijump {
0%   { transform: translate(5%,-5%) rotate( 0deg) scale(1.6); opacity: 1; }
80% { transform: translate(-40%,40%) rotate( 0deg) scale(.4); opacity:1; }
100% { transform: translate(-50%,50%) rotate( 0deg) scale(.4); opacity:0; }
}


/* about
--------------------------------------------*/
#about {
position: relative;
width: 100%;
margin: 0 auto 60px;
background: url("../images/com/bg_red.jpg") 0 0 repeat;
padding: 60px 0;
box-sizing: border-box;
overflow: hidden;
}

#about .flex_wrap {
}

#about .flex_wrap .imgbox {
width: 95%;
overflow: hidden;
margin: 0 0 30px;
}
#about .flex_wrap .imgbox img {
border-radius: 0 .6rem .6rem 0;
}

#about .flex_wrap .txtbox {
position: relative;
width: 90%;
margin: 0 auto;
}

#about .flex_wrap .txtbox .i_img{
width: 50px;
margin: 0 0 20px -10px;
}

#about .flex_wrap .txtbox .ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#about .flex_wrap .txtbox .ttl span{
display: table;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-top: 10px;
}

#about .flex_wrap .txtbox .sub_ttl{
font-size:1.8rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
color: #FFF;
margin: 0 0 30px;
}

#about .flex_wrap .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#about .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: center;
}


/* future_potential
--------------------------------------------*/
#future_potential {
position: relative;
width: 100%;
margin: 0 auto 60px;
overflow: hidden;
}

#future_potential .flex_wrap {

}

#future_potential .flex_wrap .imgbox {
width: 95%;
overflow: hidden;
margin: 0 0 30px auto;
}
#future_potential .flex_wrap .imgbox img {
border-radius: .6rem 0 0 .6rem;
}

#future_potential .flex_wrap .txtbox {
position: relative;
width: 90%;
margin: auto;
}

#future_potential .flex_wrap .txtbox .i_img{
width: 50px;
margin: 0 0 20px -10px;
position: relative;
}

#future_potential .flex_wrap .txtbox .ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: #e73829;
margin: 0 0 40px;
}

#future_potential .flex_wrap .txtbox .sub_ttl{
font-size:1.8rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
}

#future_potential .flex_wrap .txtbox .txt {
font-size: 1rem;
}

#future_potential .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: center;
}



/* career_path
--------------------------------------------*/
#career_path {
position: relative;
width: 100%;
margin: 0 auto;
background: url("../images/com/bg_red.jpg") 0 0 repeat;
padding: 60px 0;
box-sizing: border-box;
overflow: hidden;
}

#career_path .flex_wrap {
}

#career_path .flex_wrap .imgbox {
width: 95%;
overflow: hidden;
margin: 0 0 30px;
}
#career_path .flex_wrap .imgbox img {
border-radius: 0 .6rem .6rem 0;
}

#career_path .flex_wrap .txtbox {
position: relative;
width: 90%;
margin: auto;
}

#career_path .flex_wrap .txtbox .i_img{
width: 50px;
margin: 0 0 20px -10px;
}

#career_path .flex_wrap .txtbox .ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#career_path .flex_wrap .txtbox .ttl span{
display: table;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-top: 10px;
}

#career_path .flex_wrap .txtbox .sub_ttl{
font-size:1.8rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
color: #FFF;
margin: 0 0 30px;
}

#career_path .flex_wrap .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#career_path .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: center;
}



/* track_record
--------------------------------------------*/
#track_record {
position: relative;
width: 90%;
margin: 0 auto;
padding: 60px 0;
box-sizing: border-box;
}

#track_record .flex_wrap {
}

#track_record .flex_wrap .imgbox {
width: 96%;
margin:0 auto 30px;
}

#track_record .flex_wrap .imgbox ul .slick-list {
position: relative;
border-radius: 10px;
line-height: 0;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

#track_record .flex_wrap .txtbox{
position: relative;
width: 90%;
margin: auto;
}

#track_record .flex_wrap .txtbox .i_img{
width: 50px;
margin: 0 0 20px -10px;
}

#track_record .flex_wrap .txtbox .ttl{
font-size:1.4rem;
font-weight: 800;
line-height: 1;
color: #e73829;
margin: 0 0 40px;
}

#track_record .flex_wrap .txtbox .sub_ttl{
font-size: 1.8rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
}

#track_record .flex_wrap .txtbox .txt {
font-size: 1rem;
}

#track_record .flex_wrap .txtbox .common_btn_box {
margin-top: 30px;
text-align: center;
}

/* work_style
--------------------------------------------*/
#work_style {
position: relative;
width: 90%;
margin: 0 auto 60px;
padding: 20px;
background: url("../images/index/work_style_sp.jpg") no-repeat center;
background-size: cover;
box-sizing: border-box;
border-radius: 1rem;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

#work_style::after {
content: '';
display: block;
background: rgba(0,0,0,.3);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius:1rem;
}

#work_style .txtbox{
position: relative;
width: 100%;
z-index: 5;
}

#work_style .txtbox .i_img{
width: 50px;
margin: 0 0 20px -10px;
}

#work_style .txtbox .ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: #FFF;
margin: 0 0 40px;
}

#work_style .txtbox .ttl span{
display: table;
padding:0 5px;
box-sizing: border-box;
font-size: 1rem;
color: #FFF;
background: #121212;
margin-top: 10px;
}

#work_style .txtbox .sub_ttl{
font-size:1.8rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 30px;
color: #FFF;
}

#work_style .txtbox .txt {
font-size: 1rem;
color: #FFF;
}

#work_style .txtbox .common_btn_box {
margin-top: 30px;
text-align: center;
}




/*------------idx_box0809-------------*/
#idx_box0809 {}
#idx_box0809 .idx_tit_C {
color: #fff;
margin-bottom: 0px;
}
#idx_box0809 .idx_tit_C span.en {
color: #fff;
}
#idx_box08 {
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
#idx_box09 {
width: 100%;
margin-bottom: 5px;
}
.idx_box0809_box a {
width: 100%;
display: block;
height: 100%;
mix-blend-mode: normal !important;
}
.idx_box0809_box a#cursor.hov_ {
mix-blend-mode: normal !important;
}
.idx_box0809_txtbox {
position: absolute;
z-index: 10;
top: 50%;
left: 0;
right: 0;
margin: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.idx_box0809_s {
position: relative;
overflow: hidden;
height: 25vw;
mix-blend-mode: normal !important;
}
.idx_box0809_s:hover::before {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s
}
.idx_box08_bg::before {
background: url("../images/index/rrBtn_img01.png") center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
mix-blend-mode: normal !important;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.idx_box08_bg::after {
width: 100%;
height: 100%;
}
.idx_box09_bg::before {
background: url("../images/index/rrBtn_img02.png") center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.entry_box_tit {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
color: #fff;
}
.entry_box_tit span.en {
display: block;
font-size: .5rem;
line-height: 1;
margin-bottom: 5px;
}
.entry_box_tit span.jp {
font-size: 1.2rem;
line-height: 1;
}
}