*{
	margin:0;
	padding:0;
}
body{
	background:#F5F2F0;
}
.main{
	background:url("../img/bg2.webp") no-repeat;
	background-size:100%;	
}
.in{
	width:100vw;
	height:100vh;
}
header{
	width:100%;
}
#header-inner{
	width:100%;
	position: relative;
}
#logo{
	width:60px;
	height:64px;
	position:absolute;
	top:27px;
	right:17px;
	z-index:100;
}
#title{
	width:100%;
	padding:17px 3% 0 3%;
	z-index:100;
	position:absolute;
	top:17px;
	left:0;

}
.slide-dots {
  margin: 0;
  padding: 0;
  text-align: center;
}
.slide-dots li {
  display: inline-block;
  margin: 0 3px;
}
.slide-dots li button {
  position: relative;
  text-indent: -9999px;
	width:90px;
}
.slide-dots li button::before {
  background-image: url(../img/nactive.png);
  background-repeat: no-repeat;
  content: "";
  cursor: pointer;
  height: 9px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 44px;
  width: 70px;
}
.slide-dots li.slick-active button::before {
  background-image: url(../img/active.png);
}
button {
  background: none;
  border: none;
  outline: none;
  padding: 0 2px;
}
.block1{
	position:relative;
}
.sns-area{
	position:absolute;
	width:32px;
	right:10px;
	top:200px;
	z-index:100;
}
#comment{
	width:150px;
	position:absolute;
	bottom:7px;
	right:10px;
	z-index:100;
}
.sns-area div{
	margin-bottom:15px;
}
.img-area{
	padding-top:60px;
	margin-top:0px;
	margin-left:6%;
	margin-right:6%;
	z-index:98;
	
}
.hash-area{
	position:relative;
}
.hashs{
	padding-top:10px;
	margin-left:6%;
	margin-right:6%;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	position:absolute;
	top:-53px;
	left:0;
}
.block{
	width:100vw;
}
.block-min{
	width:80%;
	margin:0 auto;
}
.block3{
	width:100%;
}
.promotion{
	width:85%;
	margin:0 auto;
	padding-top:40px;
	padding-bottom:20px;
}
.youtube,.attention{
	width:85%;
	margin:0 auto;
	padding-bottom:20px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.sns-b{
	width:60%;
	display:flex;
	align-items: center;
	margin:0 auto 20px auto;
}
.sns-b div.s1{
	width:100px;
	margin:15px;
}
.sns-b div.s2{
	width:130px;
	margin:0px;
}
.sns-b div img{
	width:100%;
}
.f-logo{
	width:75%;
	margin:0 auto;
	padding-top:20px;
	padding-bottom:20px;
}
.block img{
	width:100%;
}
.mg{
	margin-top:-37px;
}
iframe {
  aspect-ratio: 16/9;
  width: 100%;
}
.company p{
	text-align:center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 900;
  	font-style: normal;
	font-size:1.4em;
}
#copyright{
	text-align:center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 900;
  	font-style: normal;
	padding-top:30px;
	padding-bottom:30px;
}

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}
@media screen and (min-width:768px){
	.main{
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		background-size:80%;	
	}
	#title{
		width:95%;
	}
	#logo{
		width:15%;
	}
	.sns-area{
		width:12%;
		right:1%;
		top:30%;
	}
	.sns-area div{
		margin-bottom:60px;
	}
	#comment{
		width:30%;
		bottom:3%;
		right:1%;
		z-index:100;
	}
	.in{
		padding-bottom:80px;
	}
	.img-area{
		width:90%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}
	.in{
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}
	.slide-dots {
	  margin: 0;
	  padding: 0;
	  text-align: center;
	padding-top:40px;
	}
	.hashs{
		padding-top:10px;
		margin-left:0%;
		margin-right:6%;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 600;
		position:absolute;
		top:-53px;
		left:0;
		font-size:1.6em;
	}
	.block,.block1,.block3,.block{
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
	}
	.block-min{
		width:60%;
		margin:0 auto;
	}
	.block-min img{
		width:100%;
	}
	.promotion{
		margin-bottom:40px;
	}
	.mg{
		margin-top:-80px;
	}
	.sns-b{
		width:80%;
		display:flex;
		justify-content :center;
		margin:0 auto 40px auto;
		padding-bottom:40px;
	}
	.sns-b div.s1{
		width:20%;
		margin:30px;
	}
	.sns-b div.s2{
		width:28%;
		margin:0px;
		margin-left:30px;
	}
	.youtube{
		margin-bottom:40px;
	}
	.attention{
		padding-bottom:80px;
	}
	.company p{
		text-align:center;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 900;
		font-style: normal;
		font-size:2.5em;
	}
	.company{
		width:80%;
		padding-top:40px;
		margin:0 auto;
	}
}
@media screen and (min-width:1280px){
	.main{
		width:80%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		background-size:80%;	
	}
	.slick-dotted.slick-slider {
		margin-bottom: 0px; 
	}
	#title{
		width:95%;
	}
	#logo{
		width:15%;
	}
	.sns-area{
		width:12%;
		right:-5%;
		top:30%;
	}
	.sns-area div{
		margin-bottom:60px;
	}
	#comment{
		width:30%;
		bottom:3%;
		right:1%;
		z-index:100;
	}
	.in{
		padding-bottom:80px;
	}
	.img-area{
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}
	.in{
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}
	.slide-dots {
	  margin: 0;
	  padding: 0;
	  text-align: center;
	padding-top:40px;
	}
	.hashs{
		padding-top:0px;
		margin-left:0%;
		margin-right:6%;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 600;
		position:absolute;
		top:-53px;
		left:0;
		font-size:1.6em;
	}
	.block,.block1,.block3,.block{
		width:80%;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
	}
	.block-min{
		width:60%;
		margin:0 auto;
	}
	.block-min img{
		width:100%;
	}
	.promotion{
		margin-bottom:40px;
	}
	.mg{
		margin-top:-80px;
	}
	.sns-b{
		width:80%;
		display:flex;
		justify-content :center;
		margin:0 auto 40px auto;
		padding-bottom:40px;
	}
	.sns-b div.s1{
		width:20%;
		margin:30px;
	}
	.sns-b div.s2{
		width:28%;
		margin:0px;
		margin-left:30px;
	}
	.youtube{
		margin-bottom:40px;
	}
	.attention{
		padding-bottom:80px;
	}
	.company p{
		text-align:center;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 900;
		font-style: normal;
		font-size:3em;
	}
	.company{
		width:100%;
		padding-top:40px;
	}
}
@media screen and (min-width:1480px){
	.mg{
		margin-top:-88px;
	}	
}
@media screen and (min-width:1680px){
	.mg{
		margin-top:-100px;
	}	
}
@media screen and (min-width:1920px){
	#comment{
		width:30%;
		bottom:1%;
		right:1%;
		z-index:100;
	}
	.mg{
		margin-top:-120px;
	}
	.company{
		padding-top:70px;
	}
}