@charset "utf-8";

/*レイアウト用*/
html{
	overflow-x: hidden;
	overflow-y: scroll; -webkit-overflow-scrolling: touch
		
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
	box-sizing: border-box;
}

.btn-white{
	background:#fff;
	width:72%;
}

/*index.htmlのみ*/	
/*==================================================
トップスライダーのためのcss
====/*===============================*/



.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
   height: 84vh;
	/*height: 86%;*/
	padding-top:3%;
	object-fit: cover;
	}

@media(max-width:500px){
    .slider img{
        height: 75vh;
    }
}

.topslider{
	max-width:100%;
	padding-top:-10%;
	
	/*height:70vh;*/
}

.top{
	max-width:100%;
	
	padding-top:0%;
}
.top p{
	margin-top: -5px;
}
.rogo{
	margin-top: 1%;
	vertical-align: bottom;
}
@media(max-width:1360px){
    .rogo {
       margin-top: -2%;
    }
}
@media(max-width:992px){
    .rogo {
       margin-top: 0%;
    }
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 0;/*スライド左右の余白調整*/
}

/*h2の位置をスライダー内へ 新築、リフォーム等*/


.topslider h2{
	
	margin-top: -35px;
	color:#FFF;
	font-size:2.2rem;
	font-weight: bold;
	text-align: center;
	z-index: 1;
	padding-bottom: 12px;
    }



/*mainスライドショー*/
.img-frame{
  position: relative;
   max-width: 90%;
	
	padding-top:50%;
    overflow: hidden;
   margin: 0 auto;
}

@media screen and (max-width: 767px){
.img-frame{
   max-width: 100%;
   height: auto;
}
}
.img-01, .img-02, .img-03 ,.img-top{
   position: absolute;
   top:0;
   left:0;
	right:0;
	bottom:0;
	  margin: 0 auto;
   width: 100%;
   height: auto;
   background-size:contain;
   background-repeat: no-repeat;
}

.img-top{
	background-image: url("../img/top/main-top.png");
	z-index: 12;
	/*background-position: center center;	*/
}
.img-01{
   background-image: url("../img/top/main1.jpg");
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url("../img/top/main2.jpg");
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url("../img/top/main3.jpg");
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(0.96);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(0.96);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(0.96);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.0);}
}

/*メインの背景きょくせん*/
.backmain{
	padding-top: 5%;
	padding-bottom: 5%;
  position: relative;
background: rgba(200,230,255,0.5);
	background:#E1F2FF;	
 /*height: 100%;*/
 border-top-left-radius: 40%;
  border-top-right-radius: 40%;
	 border-bottom-left-radius: 40%;
  border-bottom-right-radius: 30% ;
	margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
	
}


.top2{
	margin-top:-10px;
}
.main{
	display:flex;
	position: relative;
	flex-direction: column;/*縦に並べる*/
    /*align-items: flex-end;/*右寄りにする*/
	/*align-content: flex-end;*/
	max-width:100%;
	height:auto;
	
	
	  }

.main h3{
	
	position: relative;
	/*top:10%;*/
	
	font-size:1.9rem;
	color: #fff;
	font-weight: bold;
	background-color: #2E67A3;
	padding: 15px 20px;
	line-height: 2.0;/*上下のスペース*/
	letter-spacing: 5px;/*文字の隙間*/
	border-radius: 5px;/*角丸*/
	margin-top:15px;
	/*margin-right:10%;*/
	white-space: nowrap;
	z-index: 90;
}

.mainh{
	position: absolute;
	display: flex;
	flex-direction: column;/*縦に並べる*/
	align-items: flex-end;/*右寄りにする*/
	top:20%;
	right:5%;
}
/*スマホ時表示しない*/

@media(max-width:1023px){
    .mainh3 {
       display: none;
    }
}
@media(max-width:767px){
    .mainh3, .mainh2 ,.mainh{
       display: none;
    }
}
@media(max-width:1023px){
    .mainh {
       top:50%;
		align-items:center;	
		right:2%;
    }
}
/*
@media(max-width:767px){
    .mainh {
       top:80%;
		align-items:center;	
		left:50%;
		right:50%;
    }
}*/

@media(max-width:1023px){
    .img-top {
       display: none;
    }
}



/*maintop2*/
.maintop2{
	position: relative;
	/*display: flex;*/
	flex-direction: column;/*縦に並べる*/
	   }
.maintop2back{
	background-image: url("../img/top/top_backimg7.png");
	background-repeat: no-repeat;
	background-position: bottom 20% right 1%;
	background-size: 40%;
}

.maintop2 h3{
	
	font-size:1.7rem;
	color: #fff;
	font-weight: bold;
	background-color: #2E67A3;
	padding: 11px 20px;
	line-height: 1.9;/*上下のスペース*/
	letter-spacing: 5px;/*文字の隙間*/
	border-radius: 5px;/*角丸*/
}


.maintop2-1{
	/*align-self: flex-start;
	justify-content: flex-start;*/
	position: relative;
	top:0;
	left:0;
	z-index: 25;
}




/*maintop3*/

.maintop3{
	display: flex;
	flex-direction: column;/*縦に並べる*/
    align-items: flex-end;/*右寄りにする*/
  }

.maintop3 h3{
	font-size:1.7rem;
	color: #fff;
	font-weight: bold;
	background-color: #2E67A3;
	padding: 15px 20px;
	line-height: 2.0;/*上下のスペース*/
	letter-spacing: 5px;/*文字の隙間*/
	border-radius: 5px;/*角丸*/
}



.maintop3l{
	display: flex;
	flex-direction: row;
	align-items: flex-start; /* 画像の縦伸縮防止 */
	}

@media(max-width:1024px){
	.maintop3l{
		flex-direction: column;
	}
}
@media(max-width:768px){
	.maintop3l{
	flex-direction: row;
}
}
.backbb{
	background: #2E67A3;
padding-top: 13%;
	}	

@media(max-width:768px){
	.backbb{
	padding-top: 15%;
}
}
.curved {
  position: relative;
  background: #2E67A3;
	max-width: 100%;
  height: 30vh;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}
/*自己紹介*/

.jiko h2{
	color:black;
	font-weight: normal;
	margin-top: 20px;
}



/*波と釣りイラストと施工例の間*/
.backbwave{
	
	max-width: 100%;
	/*height:100px;*/
	padding: 0;
	margin-top:-80px;
	margin-bottom: -10px;
}

/*施工例*/
.works{
	/*display: flex;
	justify-content: center;*/
	margin: 0 auto;
	text-align: center;
}
@media(max-width:500px){
	.works .col-6{
	padding: 2%;    
}
}
.sekourei{
	width:85%;
	background-color: #fff;
	margin: 0 auto;
	 border-radius: 5%;
		
	}
@media(max-width:500px){
	.sekourei{
	width: 95%;
    border-radius: 2%;
}
}
.sekourei a{
	color:#000;
}
.sekourei .card{
	max-width: 350px;
	padding: 10px;
	margin: 5% auto;
	
}
@media(max-width:500px){
	.sekourei .card{
	margin: 1% 0%;
		padding: 0%;
		width:100%;
}
}
.sekourei h2{
	font-size: 1.8rem;
	color: black;
	margin-top:4%;
	padding-bottom: 2px;
	font-weight: normal;
	
	text-align: center;
	
}
@media(max-width:500px){
	.sekourei .card-body{
	width:100%;
		padding:2%; 
}
}
@media(max-width:500px){
	.sekourei h2{
		text-align: center;
	width:95%;
		padding:1% 3% 1% 0%; 
		font-size: 1.6rem;
}
}
/*お問い合わせ*/
.contact p{
	margin-bottom: 50px;
	text-align: center;
}

.line{
	margin: 0 auto;
}
.contact h3{
	margin-bottom: 5%;
	text-align: center;
	vertical-align: bottom;
	font-weight:500;
	font-size: 2rem;
	}
.contact h3::before{	
	content:"■";
	color: #2E67A3;
	text-align: center;
	vertical-align: top;
	padding-right: 10px;
	
	 }
.contact p{
	margin-top: 10%;
}
/*==================================================
ふわっアニメ―関係
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-200px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(200px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}



/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}



/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}



/*========= レイアウトのためのCSS ===============*/


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}
.delay-time08{  
	animation-delay: 0.8s;
}

.delay-time1{  
	animation-delay: 1s;
}
.delay-time12{  
	animation-delay: 1.2s;
}
.delay-time15{  
	animation-delay: 1.5s;
}
.delay-time18{  
	animation-delay: 1.8s;
}
.delay-time2{  
	animation-delay: 2s;
}

.delay-time23{  
	animation-delay: 2.3s;
}
.delay-time25{  
	animation-delay: 2.5s;
}


/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}

/*アニメーション関係ここまで*/



/*wave3波のアニメ*/
.footer_wave {position: relative;
  left: 0;
 /*bottom:0;*/
 top: 0;
  max-width: 100%;
	
}
.parallax > use {
    animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
}
.parallax > use:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 5s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 3s;
}
@keyframes move-forever {
    0% {
        transform: translate(-90px, 0%);
    }
    100% {
        transform: translate(85px, 0%);
    }
}
.editorial {
    display: block;
    width: 100%;
	height: 4em;
    max-height: 100vh;
    margin: 0;
 /* bottom: 0;*/
	top:0;
 /* opacity:0.7;*/
}

@media (max-width: 50em) {
    .editorial {
        height: 10vw;
    }
}
.waveimg img{
	position: relative;
	bottom: -35px;
	
}

.footer .container-fluid{
	max-width:100%;
	overflow-x: hidden;
}
@media (max-width:500px){
	.footer{
		max-width: 100%;
	min-height: 100%;
    height: 1100px;
	
	    margin-top:0%;
	padding-top:0%;
	padding-bottom: 1%;
 	background-image: url("../img/footer.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	overflow-x: hidden;
	background-attachment: fixed;
	}
}
/*
.footer{
			max-width: 100%;
	min-height: 100%;
    height: 1100px;
	
	    margin-top:0%;
	padding-top:0%;
	padding-bottom: 1%;
 	background-image: url("../img/footer.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	overflow-x: hidden;
	background-attachment: fixed;
}