@charset "UTF-8";
body {
  margin: 0px;
  padding: 0px;
}
.top {
	padding-top: 20vw;
	height: 100vh;
	width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url("images/topimage.jpg");
}
.top img{
	height: 15vw;
	top: 12vw;
	left: 30.5%;
	position: absolute
}
.top p{
	color: #0023E4;
	font-size:3.1vw;
	top: 144vw;
	position: absolute;
	text-align: left;
    margin-left: 9vw;
	font-family: "YuGothic";
    font-weight:600
}
.back{
	height: 80vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url("images/recipeback.jpg")
}
.party{
	padding-top: 40%;
	padding-bottom: 20%;
	height: 80vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url("images/partyback.jpg")
}
.party p{
	color: #0023E4;
	font-size: 2.2vh;
	top: -33vw;
	position: relative;
	text-align: left;
	margin-left: 10%;
	font-family: "YuGothic";
	font-weight:600
}
#party1 {
	width:75vw;
	margin-top:-32vw;
	float: right;
	position: relative
}
#party2{
	width: 75vw;
	margin-top: 23vw;
	position: relative
}
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
	top: 35%;
    width:90%;
    margin:0 auto;
}

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

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

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

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 54%;
    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);
}

.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 55vw;
	height: 10vw;
	color: aliceblue;
	font-size: 4.2vw;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
	margin-top: 54vw;
	margin-left: auto;
	margin-right: auto;
	font-family: "YuGothic";
	font-weight:600
}

.btn a:hover {
	color: #f2f2f2;
}
.btn02 a {
	background-color: #0023E4;
	border: 5px solid #0023E4;
	border-radius: 35vw;
}

.btn02 a:hover {
	color: #0023E4;
	background-color: white
}
.products{
	height: 100vh;
}
#moji{
	width: 89%;
	top: 10%;
	position: relative;
	left: auto;
	display: block;
	margin: auto
}
#pack{
	width: 57%;
	top: 15%;
	left: auto;
	display: block;
	margin: auto;
	position: relative
}
#roppy{
	color: #0023E4;
	font-size: 5vh;
	top: 20%;
	position: relative;
	text-align: left;
	text-align: center;
	margin-top: 0%;
    font-family: "YuGothic";
	font-weight:600
}
#gaiyou{
	color: #0023E4;
	font-size: 2.2vh;
	top: 20%;
	position: relative;
	text-align: left;
	margin-left: 18%;
	margin-top: 0%;
	font-family: "YuGothic";
	font-weight:600
}
.end{
	height: 90vw;
	background-color: #0023E4;
	padding-bottom: 10vw
}
#twitter{
	height: 10%;
	position: relative;
	padding-top: 20%;
	left: 32%
}
#instagram{
	height: 10%;
	position: relative;
	padding-top: 20%;
	left: 35.5vw
}
#facebook{
	height: 10%;
	position: relative;
	padding-top: 20%;
	float: right;
	right: 32%
}
#page_top{
  width: 8vh;
  height: 8vh;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  border-radius: 50%;
  top: 10%
}
#page_top a{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 6vw;
  color: #0023E4;
  position: absolute;
  width: 5vw;
  height: 5vw;
  top: -2vw;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#megmilk{
	height: 10%;
	position: relative;
	padding-top: 20%;
	left: 28%
}