@charset "utf-8";


/*==================================================
/* 機能編 8-1-2 ページの指定の高さを超えたら下から出現*/
/*===================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#666;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    letter-spacing: 0.1em;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

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

/*==================================================
機能編 6-1-7 複数画像を中央に注目させて見せる
===================================*/

.slider{
    position: relative;
    z-index: 1;
}

.slider img {
    width:50vw;/*スライダー内の画像を50vwにしてレスポンシブ化*/
    height:auto;
    border-radius: 10px;
}

.slider .slick-slide {
	transform: scale(0.85);/*左右の画像のサイズを85%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
}

@media screen and (max-width:1020px){
 .slider img {
    width:70vw;/*スライダー内の画像を55vwにしてレスポンシブ化*/
}
}

@media screen and (max-width:768px){
 .slider img {
    width:96vw;/*スライダー内の画像を55vwにしてレスポンシブ化*/
}

}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

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

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

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

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

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

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

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#8160fc;/*ドットボタンの色*/
}

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


/*==================================================
機能編 6-2-4　サムネイルをクリックすると、メイン画像が切り替わる1
===================================*/


/*画像の横幅を100%にしてレスポンシブ化*/
#newitems img{
	width: 100%!important;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

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

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

/*矢印の設定*/

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

@media screen and (max-width:350px){
.choice-btn li{
    width:48%!important;
    margin:0 1% 10px 1%;
}
}

.choice-btn li img{
    opacity: 0.6;
}

.choice-btn li.slick-current img{
    opacity: 1;
}

.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}

/*==================================================
/*機能編 9-6-1 ページを開くと、背景が暗くなりテキストを表示*/
/*===================================*/

/*infoエリアをはじめは非表示*/
#info{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close{
    background-color:#8160fc!important;
}
.modaal-close:after, 
.modaal-close:before{
	background:#fff;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#B25938;
}

/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/
/* 4-1 ふわっ（下から） */

.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);
  }
}

/* 4-1 ふわっ（上から）*/

.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

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

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


/* スマホ表示用。flipRightTriggerを指定している親要素に指定しないとうまく動かない*/

/* 4-2 パタッ（右へ） */
.flipRight{
animation-name: flipRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

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

/* 4-3 くるっ（ Y 軸（横へ）） */
.rotateY{
	animation-name: rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}


/*==================================================
/*7 画像リンクの動き*/
/*===================================*/

/* 7-17　回転＋テキスト（Y 軸）
   ----------------------------- */
/* スマホ表示用。flipYを指定している親要素に指定しないとうまく動かない*/
.choice-btn{
    transform:translate3d(0, 0, 0);
}

.flipY a{/*テキストの基点となる位置を定義*/
  position: relative;
  display: block;
}

.flipY img {
  transition: all 0.35s;/*移り変わる速さを変更したい場合はこの数値を変更*/
  backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}

.flipY:hover img{/*hoverした時の変化*/
  transform: rotateY(-180deg);
  opacity: 0!important;
}

.flipY span.detail-cap {
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*ここまでエリアの絶対配置の指定*/
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotateY(90deg);/*横軸に回転*/
  transform-origin: 50% 0%;/*回転する基点*/
  opacity: 0;
  background:#666;/*背景色*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
 /*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
 /*ここまでテキスト中央寄せの指定*/
  font-size: 0.9rem;
  text-align: center;
}

.flipY:hover span.detail-cap{/*hoverした時の変化*/
  transform: rotateY(0);/*横軸に回転*/
  opacity: 1;
  transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}



@media screen and (max-width:880px){
.flipY span.detail-cap{
  font-size: 0.9rem;;
}
    
}


@media screen and (max-width:550px){
.flipY span.detail-cap{
  font-size: 0.7rem;;
}

}


@media screen and (max-width:375px){
.flipY span.detail-cap{
  font-size: 0.5rem;;
}

}