/* all page */
/*fonts*/

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #2451fe;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1, .hvr_txt_color1:hover{color: #3357e2;} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #ff9f65;} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: #f6f6f6;} /* アクセントカラー2 */

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #2451fe;} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: #247eff;} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: #f6f6f6;} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #2451fe;}
.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}
.border_color3, .hvr_border_color3:hover{border-color: #ff9f65;}
.border_color4, .hvr_border_color4:hover{border-color: #c5c5c5;}

.button:hover::after {
    box-shadow: inset 0 0 0 15em rgb(255 159 101);
}

#body{
    overflow: hidden;
}

/* header */
#main_menu ul li a::before {
    background-color: #2451fe;
}

/* top ----------------*/

/* main img */
#video video {
    width: 100%!important;
    height: auto;
}
#main_img::after {
    content: "";
    background-image: url(./Dup/img/catch.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: top right;
    width: 18%;
    height: 95%;
    position: absolute;
    top: 5%;
    right: 18%;
    z-index: 2;
}

/* main */

/* intro */
#contents1 {
    height: 76.3333vh;
}
#contents1 .txt3{
    width: 50%;
    position: absolute;
    bottom: -10px;
    left: 5%;
    background-color: rgba(255,255,255,0.9);
    padding: 20px;
}
#contents1 .intro_title{
    top: 15%;
    left: 5%;
}
.intro_img{
    z-index: -1;
    top: 50px;
    right: 0;
    width: 80%;
}
.animate {
  opacity: 0;
  transition: all 1.7s;
    transform: translateX(80%);
}
.animate.show {
  opacity: 1;
  transform: translateX(5%);
}

/* contents */
#contents2 {
    padding: 150px 5% 100px;
}
/*#contents2 .img4_1, #contents2 .img5_1{*/
/*    top: 0;*/
/*    left: 0;*/
/*    max-width: 400px;*/
/*}*/
/*#contents2 .img4_2, #contents2 .img5_2{*/
/*    top: 0;*/
/*    left: 35%;*/
/*    max-width: 400px;*/
/*}*/
/*#contents2 .img4_3, #contents2 .img5_3{*/
/*    top: 0;*/
/*    right: 0;*/
/*    max-width: 400px;*/
/*}*/

.animate2 {
  opacity: 0;
  transition: all 0.7s;
}
.animate2.show {
  opacity: 1;
}
.animate2.show:nth-of-type(1) {
  transition-delay: 0.2s;
  transform: translateY(-30px);
}
.animate2.show:nth-of-type(2) {
  transition-delay: 0.4s;
  transform: translateY(0);
}
.animate2.show:nth-of-type(3) {
  transition-delay: 0.6s;
  transform: translateY(-30px);
}
#contents2 .img4_3:after, #contents2 .img5_1:after {
	content: "";
    background-image: url("./Dup/img/car.png");
    background-size: 180px;
	background-repeat: no-repeat;
	background-position: right bottom;
    width: 100%;
    height: 130px;
	position: absolute;
    bottom: -60px;
    left: 0;
	z-index: 10;
    animation: poyoyon1 2s infinite;
}
#contents2 .img5_1:after {
    animation: poyoyon2 2s infinite;
    transform: scale(-1, 1);
}
@keyframes poyoyon1 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(0.35deg, 0.35deg);
  }
  15% {
    transform: skew(0deg, 0deg);
  }
  25% {
    transform: skew(0.35deg, 0.35deg);
  }
  40% {
    transform: skew(0deg, 0deg);
  }
}
@keyframes poyoyon2 {
  0%, 40% {
    transform: skew(0deg, 0deg) scale(-1, 1);
  }
  10% {
    transform: skew(0.35deg, 0.35deg) scale(-1, 1);
  }
  15% {
    transform: skew(0deg, 0deg) scale(-1, 1);
  }
  25% {
    transform: skew(0.35deg, 0.35deg) scale(-1, 1);
  }
  40% {
    transform: skew(0deg, 0deg) scale(-1, 1);
  }
}

/* topcms */
#top_cms .top_cms_box .cms_title {
    border-top: none;
    padding-top: 75px;
}
#top_cms .top_cms_box .cms_title::before {
    content: '';
    position: absolute;
    height: 80px;
    width: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 50%;
    transform: translate(-50%,0%);
}
#top_cms .top_cms_box:nth-child(1) .cms_title::before {
    background-image: url(./Dup/img/blog.png);
    left: calc(50% + 10px);
}
#top_cms .top_cms_box:nth-child(5) .cms_title::before {
    background-image: url(./Dup/img/staff.png);
}
/*-------------------------------- slick --------------------------------*/
.p-top-interview__img {
    overflow: hidden;
    position: relative;
}
.p-top-interview__img-wrap .p-top-interview__img::before {
    position: absolute;
    top: calc(50% - 13px);
    right: 0;
    left: 0;
    z-index: 4;
    display: block;
    margin: auto;
    width: 100%;
    color: #fff;
    content: "MORE";
    text-align: center;
    letter-spacing: .3em;
    font-weight: 700;
    font-style: normal;
    font-size: 26px;
    font-family: urw-din-condensed, sans-serif;
    line-height: 1;
    opacity: 0;
    -webkit-transition: opacity .3s .1s;
    transition: opacity .3s .1s;
}
.p-top-interview__img-wrap .p-top-interview__img::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    transform: scale(0);
    content: "";
    transition: all .8s;
    opacity: 0;
}
.p-top-interview__img-wrap:hover .p-top-interview__img::before {
    opacity: 1;
    -webkit-transition: opacity .3s .1s;
    transition: opacity .3s .1s;
}
.p-top-interview__img-wrap:hover .p-top-interview__img::after {
    transform: scale(1);
    opacity: 1;
}
.p-top-txt__ttl{
    letter-spacing: .1em;
    line-height: 1.3;
}
/* Dots */
.link_type_slick .slick-dots{
    position: absolute;
    bottom: -35px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.link_type_slick .slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.link_type_slick .slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.link_type_slick .slick-dots li button:hover,
.link_type_slick .slick-dots li button:focus{
    outline: none;
}
.link_type_slick .slick-dots li button:hover:before,
.link_type_slick .slick-dots li button:focus:before{
    opacity: 1;
}
.link_type_slick .slick-dots li button:before{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '●';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.link_type_slick .slick-dots li.slick-active button:before{
    opacity: .75;
    color: black;
}
/* 最後まで行ったら、矢印透過する */
.link_type_slick .slick-disabled{
	opacity: 0.3;
}
/* 要素の高さを合わせる */
.link_type_slick .slick-slide {
	height: auto !important;
}
.link_type_slick .slick-track {
	display: flex;
}

/* footer */



/* under page */

/* cms1 */

/* cms2 */

/* cms3 */
.flow_type4 .box_description2{
	border-left: dotted 4px #1e2b38;
	background-color: rgba(204, 204, 204, .35);
}
.flow_type4 .box_txt1,
.flow_type4 .box_txt2{
	padding-left:20px;
}
.flow_type4 .box_wrap{
    position: relative;
    padding-left: 30px;
}
.flow_type4 .box_wrap:before{
    content: "";
    display: inline-block;
    height: calc(100% - 30px);
    border-left: 4px dotted #1e2b38;
    position: absolute;
    top: 30px;
    left: 26px;
}
.flow_type4 .cate_box:last-of-type{
	padding-bottom: 0;
}
.flow_type4 .box_description2{
    position: relative;
    border-left: none;
    background-color: rgba(255, 255, 255, 0);
}
.flow_type4 .box_description2 span{
	position: absolute;
    display: inline-block;
    width: 55px;
    top: 10px;
    left: -30px;
}
/*--------タブレット--------*/
@media screen and (max-width: 768px){
.flow_type4 .cate_box{
	flex-direction: column-reverse;
}
.flow_type4 .box_description2 span {
	width: 51px;
	left: -30px;
}
}
/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.flow_type4 .box_wrap{
    padding-left: 23px;
}
.flow_type4 .box_wrap:before {
    left: 19px;
}
}

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main_img::after {
        width: 24%;
        height: 100%;
        right: 15%;
    }
    #contents1 {
        height: 55.3333vh;
    }
    #contents1 .intro_title {
        top: 5%;
        left: 3%;
    }
    #contents1 .txt3 {
        width: 80%;
        bottom: -100px;
        left: 50%;
        transform: translateX(-50%);
    }
    .intro_img {
        top: 150px;
        width: 100%;
    }
    .animate.show {
        transform: translateX(3%);
    }
    #contents2 .img5{
        order: 2;
    }
    #contents2 .img4_1, #contents2 .img5_1, #contents2 .img4_2, #contents2 .img5_2, #contents2 .img4_3, #contents2 .img5_3{
        position: relative;
        left: 0;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #main_img::after {
        width: 28%;
        right: 10%;
    }
    #contents1 {
        padding: 50px 5%;
        height: auto;
    }
    #contents1 .intro_title {
        top: 0;
        left: 0;
        position: relative;
    }
    #contents1 .txt3 {
        width: 100%;
        bottom: 0;
        left: 0;
        transform: none;
        position: relative;
        padding: 0;
    }
    .intro_img {
        top: auto;
        position: relative;
        padding-top: 50px;
    }
    #contents2 {
        padding: 50px 5% 100px;
    }
    #contents2 .img4_2, #contents2 .img5_2 {
        z-index: -2;
    }
    #contents2 .img4_3:after, #contents2 .img5_1:after {
        background-size: 150px;
        width: 150%;
        bottom: -100px;
        left: -50%;
    }
    #contents2 .img5_1:after {
        left: 0;
    }
    #top_cms > .box:first-of-type {
        padding-top: 50px;
    }
    footer .logo{
        text-align: center;
    }
    
}