@charset "UTF-8";
*{
  margin:0;
  padding:0;
}
body{
  font-family:"ヒラギノ明朝 ProN ", "HiraMinProN-", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;;
}
/* ヘッダー*/
header{
  margin-top:50px;  
}
.header-logo{
  text-align: center;
  font-size:60px;
}
header ul{
  list-style: none;
  display: flex;
  justify-content:space-around ;
  margin:40px 60px 70px 60px;
  font-size:30px;
}
.select{
  color: #E5E5E5;
}
.hed{
  width: 3rem;
  margin-left:10px;
}
.none{
  display: none;
}
/*スライド画像部分*/
.slider{/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}
.slider img{
  width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}
.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}
main .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.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:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}
.slider img{
  height: 500px;
  width: 850px;
  background-size: contain;
}
/*商品紹介部分*/
section{
  display: flex;
  justify-content: space-around;
  margin-top:2rem;
  border-top: 3px solid black;
}
section li{
  list-style: none;
  margin-bottom: 7rem;
  margin-top: 5rem;
  font-size: 25px;
  font-weight: bolder;
}
/*フッター*/
footer{
  background-color:black;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
}
footer h2{
  font-size: 50px;
  margin:40px 0px 15px 0px;
  letter-spacing: 8px;
}
footer p{
  font-size:25px;
}
footer small{
  margin-bottom: 40px;
}
footer img{
  width: 3rem;
  border-radius: 18px;
  margin: 0 auto;
}
.fot{
  height: 1.3rem;
  width: 1.7rem;
  margin-left: 8px;
}
.insta{
  margin-top: 20px;
  margin-bottom: 20px;
}
/*その他部分*/
a{
  text-decoration: none;
  color: black;
}
h1{
  text-align: center;
  padding-top: 50px;
}
/*ファーストビュー部分*/
span{
  display:inline-block;
  width:5rem;
  height:5rem;
  margin-left:48%;
  margin-top: 280px;
}
#box3{
  animation-name: rotation3;
  animation-duration:4s;
  animation-iteration-count:3;
}
.im{
  width: 5rem;
  height: 5rem;
}
@keyframes rotation3{
  0%{ transform:rotateY(0);}
  50%{ transform: rotateY(180); }
  100%{ transform:rotateY(360deg); }
}
.first{
  animation-name: view;
  animation-duration: 12s;
  animation-iteration-count: 1;
  position: absolute;
  top:40%;
  left: 31%;
}