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

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  width: 90%;
  margin:0 auto;
  /* max-width: 1300px; */
  /* box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.8);  */
  box-sizing:border-box
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 50%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #009165;
  z-index: 5;
  /* filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.8)); */
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -5%;
  transform: rotate(-180deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right:-5%;
  transform: rotate(0deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
 position: relative;
  text-align:center;
margin:0px 0 0 0;
top:-40px;
z-index: 2;
opacity: 0.8;
margin-bottom: -40px;
}

.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:6px;/*ドットボタンのサイズ*/
  height:6px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:rgb(4, 13, 40);/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#008fa1;/*ドットボタンの現在地表示の色*/
}

/* ナビゲーション部分 */
.slider-nav{
  top: 0;
  width: 100%;
  margin: 0 auto;
  background-color: hsla(0, 0%, 0%, 0.46);
  opacity: .8;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.5rem;
  position: fixed;
}


/* .slider-nav .slick-slider{

} */

.slider-nav .slick-list {
  height: 50px;
  margin:0 auto;
  max-width: 900px;
  padding-top: 35px;
}

.slider-nav .slick-slide:hover{
  color: #45fdcf;
  transition: 0.1s ease 0s;
  cursor : pointer;
}

@media screen and (max-width: 480px) {
  .slider {
  width: 100%;
}

.slider-nav{
  z-index: 1;
}

.slider-nav .slick-list {
  padding-top: 20px;
  font-size: 1.3rem;
}

}

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

  .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.9s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(80px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }


/*　画像の拡大＋テキスト出現　*/

.zoomInText{
	position: relative;
  box-shadow: 0 0px 5px 0 #4a595b; 


}

.zoomInText span.mask{
	position: relative;
	transition: .3s ease-in-out;
	display: block;
  line-height: 0;
}

.zoomInText:hover span.mask::before{
	content:"";
	position: absolute;
	z-index:2;
	width: calc(100% + 8%);
  height: calc(100% + 8%);
	background:rgba(0, 0, 0, 0.788);
}

.zoomInText img{
	filter: blur(0);
}

.zoomInText:hover img{
	filter: blur(0.5px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomInText span.cap {
	opacity:0;
	transition: .4s ease-in-out;
	position: absolute;
  top: 50%;
	z-index:3;/*テキストを前面に出す*/
	color: rgb(255, 255, 255);/*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5;/*行の高さを1.5にする*/
  text-align: left;
  width: 200px;
  left: 50%;
	transform: translate(-50%,-50%);
}

.zoomInText:hover span.cap{
	opacity:1;
}

/*tabの形状*/

.tab{
	display: flex;
	flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: column;
  text-align: center;
}

.tab li a{
	display: block;
	margin:0 2px;
	padding:5px 20px;
  width: 80px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#080e3139;
  border-radius: 10px ;
}

@media screen and (max-width: 1350px) {
  .tab{
    flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
}

.tab li a{
width: 80px;
}

}

@media screen and (max-width: 480px) {
  .tab{
    max-width: 300px;
  }

.tab li a{
  width: 80px;
}

}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display:block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

 /*========= ぼかしのためのCSS ===============*/

.mainblur{
	filter: blur(0px);
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	  z-index: -1;
	  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	  top:20px;
    right: 5px;
	  width:96%;
    height: 400px;/*ナビの高さ*/
    background-color: #080e31e0;
    /*動き*/
	  transition: all 0.3s;
    margin: 0 auto;
    background-color: #080e31e0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.5rem;
    border-radius: 50px;
    box-shadow: #4a595b 0px 0px 10px;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;/*はじめは非表示*/
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}
/*リストのレイアウト設定*/
#g-nav li a{
  margin: 2px 0;
	padding:10px;
	display: block;
	text-transform: uppercase;
}

#g-nav li a:hover{
  color: #00d4a0;
}

#g-nav img{
  box-shadow: none;
  width: 40px;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
  width: 50px;
  height:50px;
  background-color: #0b554798;
  border-radius: 50px;
  display: none;
  
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	  background-color: #00d4a0;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active {
  transition: all .4s;
  transform: translateY(0px);
}

.openbtn {
  transition: all .4s;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


/* PC用ヘッダー */
#pc-nav {
  position: fixed;
  top: 0px;
right: 0px;
z-index: 3;
padding: 10px;
background-color: #e3e4ea80;
border-radius: 0 0 0 10px;
}

#pc-nav ul{
display: flex;
justify-content: flex-end;
}

#pc-nav li{
  margin: 0 10px;
}

@media screen and (max-width: 620px) {
  .openbtn  {
display: block;

   }
#pc-nav{
  display: none;
}

}

/*アコーディオン全体*/
.accordion-area{
  list-style: none;
  width: 100%;
  max-width: 900px;
}

.accordion-area li{
  margin: 10px 0;
}



/*アコーディオンタイトル*/
.title {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size:1.2rem;
  font-weight: normal;
  padding: 1% 1% 1% 50px;
  transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
  position: absolute;
  content:'';
  width: 15px;
  height: 2px;
  background-color: #333;
  
}
.title::before{
  top:48%;
  left: 15px;
  transform: rotate(0deg);
  
}
.title::after{    
  top:48%;
  left: 15px;
  transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
transform: rotate(45deg);
}

.title.close::after{
transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  background: #e6e8ea;
  margin:0 3% 3% 3%;
  padding: 3%;
}

@media screen and (max-width: 480px) {
.s-nav{display: none;}
}