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

/* ---------------------------------------------------------------------------------------------

   Wrap,Contents-wrap

--------------------------------------------------------------------------------------------- */
.wrap{
	width: 100%;
	/*overflow: hidden; ※これを入れるとパララックスが効かなくなる*/
}

.concept-wrap{/*topビジュアル内エリア企業理念*/
    width: 100%;
    padding: 200px 0 400px 0;
    overflow: hidden;
}


/*Title-wrap 
-----------------------------------------------------------*/
.title-wrap{/*index.html*/
    width: 100%;
    padding: 75px 0 50px 0;
    opacity: 1;
    background: #146091;
    overflow: hidden;
}

.mini-title-wrap{/*※他各ページ*/
    width: 100%;
    padding: 75px 0 50px 0;
    opacity: 1;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); 
    overflow: hidden;
}

@media screen and (max-width:1000px) {

.title-wrap{
    padding: 50px 0 25px 0;
}
    
.mini-title-wrap{
    padding: 50px 0 25px 0;
}
}


/*Title 指定一覧
-----------------------------------------------------------*/
.title-wrap .eg-h2{
    width: 80%;
    margin: 0 auto;
	font-size: clamp(24px, 2vw, 36px);
    font-family: "Quicksand", sans-serif;
    line-height: 1.25;
    border-bottom: 1px solid #fff;
    text-align: center;
}

.title-wrap h2{
    width: 80%;
    margin: 0 auto;
    line-height: 2;
    font-weight: normal;
	font-size: clamp(16px, 2vw, 18px);
    text-align: center;
}

#business{/*事業案内 タイトル*/
    z-index: 1;/*palalax 指定------------------1*/
}
#initiatives{/*社会貢献 タイトル*/
    z-index: 250;/*palalax 指定------------------250*/
}

@media screen and (max-width:1000px) {

.title-wrap .eg-h2,.title-wrap h2{
    width: 90%;
}
}


/*Contents-wrap ※各ページ
-----------------------------------------------------------*/
.pock-up-wrap{/*ピックアップ商品エリア*/
	width: 100%;
	padding: 50px 0;
    overflow: hidden;
}

.business-wrap{/*事業案内エリア*/
	width: 100%;
    height: 175vh;
    position: relative;
    overflow: hidden;
}

.summary-wrap{/*総括エリア*/
	width: 100%;
	padding: 250px 0;
    overflow: hidden;
}

.social-wrap01{/*社会貢献への取組みエリア*/
	width: 100%;
    height: auto;
    padding-bottom: 150px;
    overflow: hidden;
}
.social-wrap02{/*代表者挨拶エリア*/
	width: 100%;
    height: auto;
    padding-bottom: 150px;
    overflow: hidden;
}

.middle-nav-wrap{/*下部（会社情報、お問い合わせリンク）エリア*/
	width: 100%;
    overflow: hidden;
}

.contents-wrap1400{/*group-company.html*/
    width: 1400px;
    margin: 0 auto;
    padding: 75px 0;
}

.contents-wrap1000{/*company.html*/
    width: 1000px;
    margin: 0 auto;
    padding: 75px 0 200px 0;
}

.contents-wrap700{/*company.html*/
    width: 700px;
    margin: 0 auto;
    padding: 75px 0 200px 0;
}

.footer-wrap{/*フッター*/
    width: 100%;
    padding: 100px 0 0 0;
    overflow: hidden;
}

@media only screen and (max-width: 1400px) {
    
.contents-wrap1400{
    width: 94%;
}
}

@media only screen and (max-width: 1000px) {
    
.business-wrap{
    height: 150vh;
}
    
.summary-wrap{
	padding: 200px 0;
}
    
.contents-wrap1000{
    width: 90%;
}
}

@media only screen and (max-width: 700px) {
    
.business-wrap{
    height: 115vh;
}
    
.contents-wrap700{
    width: 90%;
}
}

@media only screen and (max-width: 500px) {
    
.summary-wrap{
	padding: 150px 0;
}
    
.contents-wrap1400{
    padding: 50px 0;
}
    
.contents-wrap1000{
    padding: 50px 0 150px 0;
}
    
.contents-wrap700{
    padding: 50px 0 150px 0;
}
}


/* ---------------------------------------------------------------------------------------------

   Pankuzu list

--------------------------------------------------------------------------------------------- */
.pankuzu{
    width: 100%;
    padding: 25px 10%;
}

.pankuzu span,.pankuzu span a{
    font-family: 'Urbanist', sans-serif;
}

.pankuzu .fa-angle-double-left{
	font-size: clamp(10px, 2vw, 12px);
}



/* ---------------------------------------------------------------------------------------------

   hoverでボーダーが回るリンクボタン

--------------------------------------------------------------------------------------------- */
/*Summary 総括コメント箇所
-----------------------------------------------------------*/
.button-wrap{
    width: 700px;
    margin: 25px auto 0 auto;
}

@media screen and (max-width:750px) {

.button-wrap{
    width: 90%;
}
}

.custom-btn {
  background: #fff;
  outline: none !important;
  cursor: pointer;
  transition: all 0.6s ease;
  position: relative;
  display: inline-block;
}

.btn-3 {
  width: 100%;
  height: auto;
  border: none;
}

.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Urbanist', sans-serif;
	font-size: clamp(18px, 2vw, 20px);
	line-height: 3;
    color: #146091;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
    letter-spacing: 0.05em;
}

.btn-3 span .fa-angle-double-right{
    color: #146091;/*#ec6d71*/
}

.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #999;/*ボーダー色（２辺01）*/
  transition: all 0.6s ease;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.btn-3:before {
  height: 0%;
  width: 0.5px;
}
.btn-3:after {
  width: 0%;
  height: 0.5px;
}

.btn-3:hover:before {
  height: 100%;
}

.btn-3:hover:after {
  width: 100%;
}

.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #999;/*ボーダー色（２辺02）*/
  transition: all 0.6s ease;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.btn-3 span:before {
  width: 0.5px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 0.5px;
}

.btn-3 span:hover:before {
  height: 100%;
}

.btn-3 span:hover:after {
  width: 100%;
}



/* ---------------------------------------------------------------------------------------------

   背景アニメーション

--------------------------------------------------------------------------------------------- */
/*Summary 総括コメント箇所　
-----------------------------------------------------------*/
.circles01{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.circles01 li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #add8e6;
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles01 li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles01 li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles01 li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles01 li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles01 li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles01 li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles01 li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles01 li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles01 li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles01 li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-3000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}



/* ---------------------------------------------------------------------------------------------

   ページ遷移アニメーション（topメイン赤※下から上へ）

--------------------------------------------------------------------------------------------- */
.move .animation-bg {
  background: #146091;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.btt .animation-bg {
  animation-name: PageAnime-btt;
}
@keyframes PageAnime-btt {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}


/* ---------------------------------------------------------------------------------------------

   Fadeアニメーション設定

--------------------------------------------------------------------------------------------- */
 .fade{
  opacity: 0;
   transform: translate3d(0, 0, 0);
  transition: all 3s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -100px, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-100px, 0, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .right_fade{
  opacity: 0;
   transform: translate3d(100px, 0, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 100px, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

.fade-content .anm_mod.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}


/* ---------------------------------------------------------------------------------------------

   Page-Top

--------------------------------------------------------------------------------------------- */
#Page-Top {
    position: fixed;
    right: -80px;
    bottom: 100px;
	z-index: 500;
}

#Page-Top a{
    display: flex;
    justify-content: center;
    background: #999;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 100%;
	padding: 22.5px;
    opacity: 0.75;
}

#Page-Top .fa-chevron-up{
	line-height: 1;
	font-size: clamp(20px, 2vw, 24px);
}
#Page-Top a .fa-chevron-up{
	color: #000;
}

@media screen and (max-width:1000px) {
    
#Page-Top {
    bottom: 50px;
}
    
}

@media screen and (max-width:400px) {
    
#Page-Top {
    bottom: 25px;
}
    
}


/* ---------------------------------------------------------------------------------------------

   スクロールダウンのためのCSS

--------------------------------------------------------------------------------------------- */

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom: 50px;/*-15px*/
	left: 50%;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4.0px;/*-4.25px*/
    z-index: 10;
    /*丸の形状*/
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff0;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:75px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width: 1px;
	height: 75px;
	background: #fff;
}