/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

.fadein{
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1.5s, visibility 1.5s, transform 1.5s;
}
.is-fadein{
    opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}

/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

.swiper{
    display:block;
    position:relative;
    width: 100%;
    height: auto;
    color:white;
}

.swiper-button-next,
.swiper-button-prev{
    --swiper-navigation-color:#A5802A;
}

.swiper-pagination{
    --swiper-pagination-color:#A5802A;
}

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

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

/*　上に上がる動き　*/

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

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

/*　下に下がる動き　*/

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 998;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:70%;
    height: 100vh;/*ナビの高さ*/
	background:rgb(238, 238, 238,0.9);
    /*動き*/
	transition: all 0.4s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

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

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 998;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 100px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 2.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
    width:100%;
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

.gallery li img{
    object-fit:cover;
    aspect-ratio:1/1;
    width:100%;
}
.choice-btn li img{
    object-fit:cover;
    max-height:150px;
    padding:0 3px;
    aspect-ratio:1/1;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

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

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

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	
list-style:none;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

.slick-track{
    width:100%;
}

.choice-btn{
	width:100%;
}

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

    .gallery li img{

        object-fit:cover;
        max-height:600px;
        width:100%;
        height:auto;
        aspect-ratio: 1 / 1;
    }

    .choice-btn li img{
        object-fit:cover;
        max-height:150px;
        padding:0 3px;
        height:auto;
        aspect-ratio: 1/1;
}