/*======================================================
ボタンがスクロールで現れる
=======================================================*/

/*「ページトップへ」ボタン　下から現れる*/
#page-top1{
  display: block;
  position: fixed; 
  z-index: 9999; 
  bottom: -100px; 
  right: 0px;
  width: 50px;
/*  background: #06C;
  background: rgba(0,6,c,.7);*/
  transition: .5s; 
}
#page-top1 .top {
	font-size:12px;
}
#page-top1 img{
	vertical-align:middle;
	padding-right:5px;
}
#page-top1:hover{
/*  background: rgba(0,6,c,.8);*/
}

/*「問い合わせ」ボタン　常時表示*/
#to_toiawase{
  display: block;
  position: fixed; 
  z-index: 9999; 
  bottom: 200px; 
  right: 0px;
  width: 50px;
/*  background: #06C;
  background: rgba(0,6,c,.7);*/
  transition: .5s; 
}
/*#to_toiawase .top {
	font-size:12px;
}*/
#to_toiawase img{
	vertical-align:middle;
	padding-right:5px;
}
#to_toiawase:hover{
/*  background: rgba(0,6,c,.8);*/
} 

/*======================================================
BOXが順にスクロールで現れる
=======================================================*/

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

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}
.delay-time06{
animation-delay: 0.6s;
}
.delay-time1{
animation-delay: 1s;
}
/*----------------------------------------------------
スタート時は要素自体を透過0にするためのopacity:0;を指定する
*/

.box{
	opacity: 0;
}


/* スクロールで表示
------------------------------------------------------------*/
.fadein {
    opacity : 0;
    transform : translate(0, 0px);
    transition : all 1500ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadein_auto {
    opacity : 0;
    transform : translate(0, 0px);
    transition : all 1500ms;
}
.fadein_auto.scrollin {
    opacity : 0;
    transform : translate(0, 0);
}
/*----------------------------------------------------
動き自体の指定：今回は「ふわっ」
*/
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

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

/*======================================================
ロールオーバーで画像の拡大
=======================================================*/

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

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

/*　画像のマスク　*/

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

/*==================================================
ギャラリースライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/

.gallery li img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

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

.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.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;
	background:#2B5DFF;
	width:33.3333%!important;
list-style:none;
}

.choice-btn li img{
	opacity: 1;/*選択されていないもの*/
}

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

/*******************************************************
スマートフォン
*******************************************************/

@media only screen and (max-width:799px){
/*「問い合わせ」ボタン　常時表示*/
#to_toiawase{
    display: none;
    }
    
}