﻿@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
/* ----------　all　---------- */
.linkStyle{
	color:#38A9E3;
	text-decoration: underline;
}
.linkStyle:hover{
	color:#38A9E3;
	opacity: 0.7;
	transition: all 0.5s;
}


body {
    font-family: 'Roboto', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



/* nav */

#pc_nav li a {
    font-weight: bold;
}


/* footer */


/* ----------　TOP　---------- */

/* main-img */

#main_img #video {
    height: 100vh;
}

#main_img #video .video {
    height: 100vh;
    object-fit: cover;
}

#main_img .main_txt_wrap {
    top: 55%;
    bottom: auto;
}

.main_txt img {
    filter: drop-shadow(2px 4px 6px rgba(1,139,211,0.3));
}

.top-btn {
    padding: 30px 60px;
}

/* top */

.intro_img {
    bottom: 0;
    right: 0;
}

.intro_wrap {
    z-index: 0;
    background-image: url(Dup/img/industry.png);
    background-repeat: no-repeat;
    background-position: 30px -8px;
    background-size: 55%;
}

.intro_wrap:before {
    content: "";
    position: absolute;
    display: block;
    width: 130%;
    height: 50%;
    background-color: #088BD3;
    top: 50%;
    left: -250px;
    transform: rotate(-20deg);
    opacity: 0.2;
    z-index: -1;
}

.sup {
    z-index: 1;
    left: 15px;
    opacity: 0.65;
    top: 20px;
}

.con2_box {
    background-color: #F1F5F8;
    z-index: 0;
}

.ab {
    top: 20px;
    left: 15px;
    opacity: 0.7;
    z-index: -1;
}

/* ---------- loopSlider ---------- */
.loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
.loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
.loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
.loopSlider .ul .li img{
    border-radius: 0;
}
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}



/* top-cms */

#top_cms .cms_box:nth-of-type(even) {
    background-color: #F1F5F8;
}

.cms_title_s {
    display: inline-block;
    background: linear-gradient(to bottom right, rgb(8, 139, 211), rgb(104, 242, 240));
    background: -webkit-linear-gradient(to bottom right, rgb(8, 139, 211), rgb(104, 242, 240));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#top_cms .cms_box::before {
    display: none!important;
}

/* ----------　下層ページ　---------- */

#page_title .page_title_gradient {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgb(255,255,255))!important;
}

#page_title .page_title_bg {
    background-color: rgba(8,139,211,0.5);
}


/* 会社情報 */
/* お問い合わせ */
/* プライバシーポリシー */
/* サイトマップ */


/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){
    
#main_img {
    height: 80vw!important;
}

#main_img #video {
    height: 80vw;
}

#main_img #video .video {
    height: 80vw;
}

#main_img .main_txt_wrap {
    width: 85%!important;
    top: 65%;
    left: 0;
}

.main_txt {
    margin-bottom: 30px;
}

.top-btn {
    padding: 20px 35px;
}
    
.intro_wrap {
    padding: 50px 50px 0 50px;
    background-size: 95%;
}

.intro_wrap:before {
    width: 140%;
    height: 45%;
    top: 78%;
    left: -95px;
    opacity: 0.8;
}

.intro_item {
    margin-left: 0;
}
    
.intro_img {
    position: initial;
}

.sup {
    left: 0px;
    opacity: 0.5;
    top: 20px;
}

.ab {
    left: 0;
    opacity: 0.6;
    z-index: -1;
}

#top_conveyor,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 280px;
}
.loopSlider .ul .li{
    width: 280px;
}
#top_conveyor {
    padding-bottom: 0;
    padding-top: 0;
}


#top_cms .more a {
    background-color: #088BD3;
}
    
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){
    
#main_img .main_txt_wrap {
    width: 80%!important;
    top: 60%;
    left: 15px;
    display: block;
    padding-left: 0;
    text-align: left;
    transform: none;
}

.main_txt {
    margin-bottom: 20px;
    display: block;
}

.top-btn {
    padding: 15px 25px;
    text-align: left;
}
    
.intro_wrap {
    background-position: 0 -3px;
}

.intro_wrap:before {
    width: 140%;
    height: 45%;
    top: 80%;
    left: -30px;
    opacity: 0.8;
}

.ab {
    opacity: 0.45;
}
    
#top_conveyor,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
.loopSlider .ul .li{
    width: 179px;
}

#page_title .page_title_gradient {
    height: 70px;
}
    
}