@charset "UTF-8";

/*================================================
 *　トップ
 ================================================*/
#top{
    width: 100%;
    height: 650px;
    margin: 0;
	color: #0C0F0A;
    padding-top: 260px;
   background: url("../img/top.jpg") no-repeat ;  
    background-position: right /*80px*/;  
    background-size: cover;
    /*background-size: 1000px auto;*/
    text-align: center;
	 position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
}

#video-area{
	    width: 100%;
    height: 650px;
	top: 0;
    position: fixed;
    z-index: -1;/*最背面に設定*/
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}



h1.top_txt{
    font-size: 38px;
    width:90%;
    margin: 0 auto;
	font-weight: 700;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 文字を読みやすくする影 */
    /*要素を天地中央寄せ*/

}

/* ====================================
   スライダー
   ==================================== */
.hero-slider {
position: relative;
    width: 100%;
    /* ブラウザの高さの半分(50vh)に設定 */
    height: 65vh; 
    margin-top: 80px; /* ヘッダーの高さ分下げる */
    overflow: hidden;
    background-color: #000;
}

/* スライド共通の設定 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* 初期状態は透明 */
    /* アニメーション: 18秒(6秒×3枚)かけて無限ループ、進行は一定(linear) */
    animation: slide-zoom 18s infinite linear; 
	/* Firefox向けレンダリング補正 */
    image-rendering: -webkit-optimize-contrast; /* レンダリング品質の指定 */
    will-change: transform, opacity;
    transform-origin: center center;
}

/* 各スライドの背景画像と開始タイミング（遅延）の設定 */
.slide1 {
    background-image: url('../img/slide1.jpg');
    animation-delay: 0s;  /* 1枚目は0秒から開始 */
}
.slide2 {
    background-image: url('../img/slide2.jpg');
    animation-delay: 6s;  /* 2枚目は6秒後から開始 */
}
.slide3 {
    background-image: url('../img/slide3.jpg');
    animation-delay: 12s; /* 3枚目は12秒後から開始 */
}

/* ズームとフェードイン・フェードアウトのアニメーション */
@keyframes slide-zoom {
    0% {
        opacity: 0;
        transform: scale(1) translateZ(0); /* translateZ(0) でGPUアクセラレーションを強制 */
    }
    5% {
        opacity: 1; /* 約0.9秒かけてフワッと表示 */
    }
    33.33% {
        opacity: 1; /* 6秒間は表示したまま */
    }
    38.33% {
        opacity: 0; /* 次の画像に切り替わる時にフワッと消える */
    }
    100% {
        opacity: 0;
        transform: scale(1.15); /* 18秒かけて1.15倍までゆっくり拡大 */
    }
}


/*テロップ*/
 .typewriter-container {
            display: inline-block;
        }

        .typewriter-text {
/*            background-color: #3554a4;
            color: #ffffff;*/
			/*↓グラデ下線*/
			background: linear-gradient(transparent 50%, #3554a4 100%);
			/*↑ここまで*/
            /*font-size: 38px;*/
			font-size: 1.2em; 
            font-weight: bold;
            margin: 0;
            padding: 5px 0;
            overflow: hidden; 
            white-space: nowrap; 
            display: inline-block;
            width: 0;
            opacity: 0;
            /* 3秒待機(3s)、終了状態維持(forwards) */
            animation: smooth-open 2s ease-out 2s forwards;
        }

        /* 背景と文字が滑らかに広がりながらフェードインするアニメーション */
        @keyframes smooth-open {
            0% { 
                width: 0; 
                opacity: 0;
                padding-left: 0;
                padding-right: 0;
            }
            20% {
                opacity: 1; /* 動き出しの早い段階で不透明にする */
            }
            100% { 
                width: 100%; 
                opacity: 1;
                padding-left: 10px;
                padding-right: 10px;
            }
        }


h2{
	text-align: center;
	font-size: 2.2em;
	font-weight: 800;
	margin: 50px auto;
	color: #004098;
}

h2 p{font-size: 20px;
	margin: 20px auto 0 auto;
		max-width: 1100px;
	text-align: center;
font-weight: normal;
color: #0C0F0A;}

h2 .emphasis{
	color: #fff;
	background-color: #BB3925;
	padding: 0 10px;
}

/*セクションタイトル*/
h3{
	width: 100%;
	margin: 50px auto;
	text-align: center;
	font-size: 2.2em;
	font-weight: 800;
}

h3 p{font-size: 0.4em;
font-weight: normal;}


/*特徴ブロック*/

.top_service{
	width: 100%;
	background-color: #004098;
	padding: 80px 50px;
}

.service_category{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: flex;
	vertical-align: top;
	padding: 0;
	color: #fff;
}


.service_category_imgR{
	width: 50%;
	object-fit: contain;
	float: right;
}

.service_category_imgL{
	width: 50%;
	object-fit: contain;
	float: left;
}


.service_category p{
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.4em;
}

.service_category_txtR{
	width: 50%;
	font-size: 1.1em;
	letter-spacing: normal;
		padding-left: 60px;
	margin-top: 80px;
	float: right;
	line-height: 1.7em;
		text-align: left;
}

.service_category_txtL{
	width: 50%;
	font-size: 1.1em;
	letter-spacing: normal;
		padding-right: 60px;
	margin-top: 80px;
	float: left;
	line-height: 1.7em;
		text-align: left;
}

.link_btn{
	display: inline-block;
  *display: inline;
  zoom: 1;
	width: 80%;
  min-width: 450px;
  vertical-align: middle;
  text-align: center;
  line-height: 2.7em;
  margin: 30px auto 0 auto;
  overflow: visible;
  text-decoration: none;
  border-radius: 50px;
  color: #004098;
  font-size: 1em;
  font-weight: bold;
  background: #fff;
	border: 1px solid #fff;}

.link_btn:hover{
   background: #004098; 
	color: #fff;
	border: 1px solid #fff;
transition: all .3s ease; 
}



/*事業内容ブロック*/

.top_block{
	width: 100%;
	max-width: 1400px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

#top_solution{
	width: 100%;
	margin: 0 auto;
	display: flex;
  justify-content: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
/*	justify-content: flex-start;*/
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.top_solution_cel{
	width: 29%;
	height: 380px;
	margin: 0 20px;
}

#top_solution a{
	display: block;
	width: 100%;
	height: 100%;
  position: relative; 
  overflow: hidden; 
	 cursor : pointer;
	border-radius: 15px;
	
}
.sol:after{
		text-align: center;
  position: absolute; 
  content: ""; 
  display: block;  
  width: 100%; 
  height: 100%;
	top: 0;
	  transition: all .5s ease; 
	
}


.sol01:after{
	background: url("../img/top_service_youzai.jpg") no-repeat center center;
	  background-size: cover; 
}

.sol02:after{
	background: url("../img/top_service_funtai.jpg") no-repeat center center;
		  background-size: cover; 
}

.sol03:after{
	background: url("../img/top_service_denchaku.jpg") no-repeat center center;
	  background-size: cover; 
}

.sol04:after{
	background: url("../img/top_service_maesyori.jpg") no-repeat center center;
	  background-size: cover; 
}

.sol05:after{
	background: url("../img/top_service_assembly.jpg") no-repeat center center;
	  background-size: cover; 
}

.sol:hover:after {
  transform: scale(1.05);
}

.sol-content {
	color: #fff;
	font-size: 1em;
  z-index: 1;  
  position: absolute; 
	bottom: 0;
	width: 100%;
	height: 140px;
	background-color: #004098;
	margin: 0 auto;
	padding: 0 20px;
	opacity: 0.9;
	border-radius: 0 0 15px 15px;
}

.sol-content p{
	margin: 20px auto 10px auto;
	font-size: 1.3em;
	font-weight: bold;
}


.sol_btn{display: inline-block;
  *display: inline;
  zoom: 1;
  width: 450px;
  vertical-align: middle;
  text-align: center;
  line-height: 2.7em;
  margin: 40px 0 50px 0;
  overflow: visible;
  text-decoration: none;
  border-radius: 50px;
  color: #fff;
	font-size: 1.1em;
  font-weight: bold;
  background: #BB3925;
border: 1px solid #BB3925;}

.sol_btn:hover{
	background: #c4000f;
 transition: 0.3s;}



/*ニュース*/
#news{
		width: 100%;
	margin: 0 auto;
	padding: 1px 0 30px 0;
	background-color: #fff;
	
}

.news-list{
  list-style: none outside;
	width: 100%;
		max-width: 900px;
	  margin: 50px auto;
  padding: 0;
	
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #0C0F0A;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 140px;
  font-size: 16px;
  color: #0C0F0A;
  padding: 0 20px 0 0;
	font-weight: 700;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}
.news-list .item .category span{
  background: #BB3925;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #BB3925;
}

/*================================================
 *　汎用
 ================================================*/
.sp100 {
	height: 100px;
}

.bk_white{
	background-color: #fff;
}