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

/*
Theme Name:長栄工業株式会社
*/


/* フェードインさせる要素 */
.box {
    /*width: 250px;
    height: 250px;
    background-color: #333;
    margin-bottom: 100px;*/
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 0.5s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}

/*目隠し → 文字表示*/

.fade_contents{
	opacity: 0;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.4s;
    position: relative;
}

.fade_contents:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #307fce;
    z-index: 50
}

.txt_fadein{
	opacity: 1;
	width: fit-content;
}

.txt_fadein:before {
    animation: 0.8s txt_fadein 0.3s;
}

@keyframes txt_fadein{
    0% {
        width: 0;
        left: 0
    }

    50% {
        width: 100%;
        left: 0
    }

    100% {
        width: 0;
        left: 100%
    }
}


/*　画像の拡大　*/
.zoomIn img{
  transform: scale(1);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
  transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}
.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


/*詳しくボタン*/
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn,
a.btn,
button.btn {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #005BAC;
  border-radius: 0.5rem;
}

a.btn-flat {
  overflow: hidden;
  padding: 20px;
  color: #fff;
  border-radius: 0;
  background: #005BAC;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 450%;
  content: "";
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-93%) translateY(-25%) rotate(45deg);
  background: #0095d9;
}

a.btn-flat:hover{
	color: #fff;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.btn{
	border: none;
}

/*文字がぬるりと現れる
https://b-risk.jp/blog/2021/01/anim-reference/*/
 
.bg-wrap {
    overflow: hidden;
	display: block;
	animation: pagetext 0.5s, pagetext2 0.5s ;
	animation-iteration-count:1;
}

@keyframes pagetext{
	0%{
		transform: translateY(30%);
	}
	
	100%{
		transform: translateY(0);
	}
}

@keyframes pagetext2{
	0%{
		opacity: 0;
	}
	
	100%{
		opacity: 1;
	}
}

/*ホバー時画像縮小*/
.zoomOut img{
  transform: scale(1.1);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOut a:hover img{/*hoverした時の変化*/
  transform: scale(1);/*拡大の値を変更したい場合はこの数値を変更*/
}

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/*ヘッダーの高さ調整*/
#header{
    /*はじめの高さを設定*/
  height: 100px;
  width:100%;
	align-items: center;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
  position: fixed;
  z-index: 9999;/*最前面へ*/
  height:70px;
  animation: DownAnime 0.5s forwards;
	background-color: #f6f6f5;
	box-shadow: 0px 20px 30px rgba(0, 0, 0, .16);
}

@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-170px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}




/*スクロールの現在の位置によってメニューのデザインを変える
https://web-creates.com/code/jquery-menu-change/*/
.header__link {
        position: relative;
        transition: all 0.2s ease-in-out;
        display: block;
        color: #000;
        font-size: 16px;
        text-decoration: none;
      }

      /* スクロールで対応のsectionが現れた時*/
      .header__link.is-active {
        color: #005BAC;
      }

      .header__link.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
		  color: #005BAC;
      }




/*グローバルメニュー*/
.nav_children{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:62px;
	z-index: 4;
    /*形状を指定*/
	background:#28BFE7;
	width:180px;
    /*はじめは非表示*/
	visibility: hidden;
    /*アニメーション設定*/
	transition: all .3s;
	display: none;
	
}

.nav.has-child:hover .nav_children{
	display: block;
}

.nav_children{
	position: relative !important;
	z-index: 100;
	height: 62px;
}





/*aboutスライダー画像*/
@keyframes horizontal-animation {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* スライダーを表示する親コンテナ */
.slider-container {
    display: flex;
    overflow: hidden;
	margin: 80px 50px 0;
}

/* スライダー本体 */
.slider-wrapper {
    display: flex;
    animation: horizontal-animation 40s linear infinite;
}

/* スライドコンテンツ */
.slide {
    width: 400px;
}

.slide img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}