@charset "UTF-8";

/* プレページ */
@media (min-width: 768px) {
	.main{ margin: 0 auto; width: 100%; max-width: 1920px; text-align: center; padding-top: 90px; position: relative;}
	.main img{ width: 100%;}
	
	main .banner{ position: absolute; top: 160px; left: calc(50% - 250px); z-index: 2; color: #fff000; font-size: 50px; text-align: center; display: block; width: 500px; margin: 0 auto 20px;}
	main .banner img{ width: 60px; margin: 0 0 0 10px; position: relative; top: -5px;}
	main .banner:hover{ opacity: 0.8;}
	
	.top_lead{ margin: 90px auto 0; width: 100%; max-width: 1000px; text-align: center; padding: 200px 0 80px; position: relative;}
	.top_lead img{ width: 90%; padding: 0 30px;}
	
	.point{ margin: 0 auto; width: 100%; background-image: url("../images/pc5.jpg"); background-size: cover; text-align: center; background-repeat: no-repeat; padding: 70px 0;}
	.point img{ width: 100%; max-width: 1000px; padding: 0 30px;}
	
	.open_box{ margin: 0 auto; width: 100%; max-width: 1100px; text-align: center; padding: 70px 0;}
	.open_box img{ width: 100%; padding: 0 30px;}
}
@media (max-width: 767.98px) {
	.main{ margin: 0 auto; padding-top: 60px; position: relative;}
	.main img{ width: 100%;}
	
	main .banner{ position: absolute; top: 80px; left: 0; z-index: 2; color: #fff000; font-size: 30px; text-align: center; display: block; width: 100%; margin: 0 0 20px 0;}
	main .banner img{ width: 40px; margin: 0 0 0 10px; position: relative; top: -5px;}
	
	.main{ margin: 0 auto; width: 100%; text-align: center;}
	.main img{ width: 100%;}
	
	.top_lead{ margin: 60px auto 0; width: 100%; text-align: center; padding: 100px 50px 30px;}
	.top_lead img{ width: 100%;}
	
	.point{ margin: 0 auto; width: 100%; background-image: url("../images/sp5.jpg"); background-size: cover; text-align: center; background-repeat: no-repeat; padding: 30px;}
	.point img{ width: 100%;}
	
	.open_box{ margin: 0 auto; width: 100%; text-align: center; padding: 30px 25px;}
	.open_box img{ width: 100%;}
}


/*@media (min-width: 768px) {
	.btn{ position: relative; overflow: hidden; text-decoration: none; padding: 10px 30px; text-align: center; outline: none; transition: ease .2s; color: #fff; width: 800px; margin: 70px 0 0 0; border: 6px solid #555; border-image: linear-gradient(to right, #c59f3b 0%, #fbf1b4 50%, #c59f3b 100%); border-image-slice: 1; background-color: #222; height: 110px; display: inline-flex; justify-content: center; align-items: center; background: linear-gradient(to right, #c59f3b, #fbf1b4, #c59f3b);}
	.btn::after{ content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../common/images/arrow_black_right.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px auto;}
	.btn span { position: relative; z-index: 3; color: #000; font-size: 38px; font-weight: bold; letter-spacing: 1px;}
	.btn:hover span{ color:#fff;}
	.btn:hover::after{ content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../common/images/arrow_white_right.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px auto;}
	.bgskew::before { content: ''; position: absolute; top: 0; left: -130%; background: #111; width: 120%; height: 100%; transform: skewX(-25deg);}
	.bgskew:hover::before { animation: skewanime .5s forwards;}
}
@media (min-width: 768px) and (max-width: 1000px) {
	.btn{ width: 650px;}
}
@media (max-width: 767.98px) {
	.btn{ position: relative; overflow: hidden; text-decoration: none; padding: 10px 30px; text-align: center; outline: none; transition: ease .2s; color: #fff; width: 100%; margin: 30px 0 0 0; border: 6px solid #555; border-image: linear-gradient(to right, #c59f3b 0%, #fbf1b4 50%, #c59f3b 100%); border-image-slice: 1; background-color: #222; height: 80px; display: inline-flex; justify-content: center; align-items: center; background: linear-gradient(to right, #c59f3b, #fbf1b4, #c59f3b);}
	.btn::after{ content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../common/images/arrow_black_right.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px auto;}
	.btn span { position: relative; z-index: 3; color: #000; font-size: 24px; font-weight: bold; letter-spacing: 1px;}
	.btn:hover span{ color:#fff;}
	.btn:hover::after{ content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../common/images/arrow_white_right.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px auto;}
	.bgskew::before { content: ''; position: absolute; top: 0; left: -130%; background: #111; width: 120%; height: 100%; transform: skewX(-25deg);}
	.bgskew:hover::before { animation: skewanime .5s forwards;}
}
@keyframes skewanime {
  100% { left: -10%;}
}


@media (min-width: 768px) {
	.bottom_menu{ display: none;}
}
@media (max-width: 767.98px) {
	.bottom_menu{ position: fixed; bottom: 0; z-index: 100; width: 100%;}
	.bottom_menu .btn{ height: 60px;}
	.bottom_menu .btn span { font-size: 22px;}
}*/


/* Instagram */
@media (min-width: 768px) {	
	.insta_box { background-color: #444; padding: 70px 0;}
	
	.scroll_left { width: 100%; list-style: none; margin: 0; padding: 0;}
	.scroll_left li{ width: 220px; height: 220px; position: relative; margin: 0 10px;}
	.scroll_left li a{ width: 220px; height: 220px;}
	.scroll_left li:hover { }

	.image2{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; background-color: #fff;}
}
@media (max-width: 767.98px) {
	.insta_box { background-color: #444; padding: 40px 0;}
	
	.scroll_left { width: 100%; list-style: none; margin: 0; padding: 0;}
	.scroll_left li{ width: 150px; height: 150px; position: relative; margin: 0 5px;}
	.scroll_left li a{ width: 150px; height: 150px;}

	.image2{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; background-color: #fff;}
}