@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');

/*共通*/
html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body{
	color: #5c5c5c;
	font-size: 1.5rem;
	font-family: 'Quicksand', "Yu Gothic Medium", "游ゴシック Medium", 'YuGothic', "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	line-height: 1.5;
}

h2{
	font-size: 2.4rem;
	font-weight: 300;
}

a:hover{
	transition: 0.2s;
	color: #c5c5c5;
}

header{
	width: 960px;
	margin: 0 auto;
}

.header-wrapper{
	margin: 56px 36px 8px 36px;
	display: flex;
	justify-content: space-between;
}

.left img{
	width: 145px;
}

.nav{
	margin: 30px 0;
}

.nav ul{
	display: flex;
	justify-content: space-between;
}

.nav ul li{
	transform: skewX(150deg);
	border-right: 1px solid #5C5C5C;
}

.nav ul li:last-child{
	border-right: none;
}

.nav ul li a{
	display: block;
	transform: skewX(-150deg);
	padding: 0 24px;
}

.nav ul li .nav-contact{
	padding-right: 0;
}

.sns ul{
	display: flex;
	justify-content: flex-end;
}

.fb{
	margin-right: 32px;
}

.icon{
	opacity: 1;
	transition: 0.2s;
}
.icon:hover{
	opacity: 0.5;
}

footer{
	width: 100%;
	padding: 5px 0;
	margin-top: 30px;
	text-align: center;
	border-top: 1px solid #c5c5c5;
}

.arrow{
	display: flex;
	justify-content: flex-end;
}

.arrow a{
	display: flex;
	justify-content: flex-end;
}

.arrow img{
	margin-left: 30px;
	position: relative;
	transition: all .25s;
	right: 0;
}

.arrow a:hover img{
	position: relative;
	right: -1rem;
}

.link-bar {
	text-decoration: underline;
}
/*共通ここまで*/


/*トップページ*/
.top-image{
	position: relative;
	width: 100%;
	height: 504px;
	margin: 40px 0;
	overflow: hidden;
}

.bgImg{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
	width: 100%;
}

/*トップ画像のアニメーションの指定*/
.top-image .bgImg{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	animation: bgAnime 20s ;/* 4画像 × 各5s = 20s */
}

/*（段差で背景画像のアニメーションを実行）*/
.top-image .src1{
	background-image: url(../images/img_top01_pc.jpg);
}
.top-image .src2{
	background-image: url(../images/img_top02_pc.jpg);
	animation-delay: 5s;
}
.top-image .src3{
	background-image: url(../images/img_top03_pc.jpg);
	animation-delay: 10s;
}
.top-image .src4 {
	background-image: url(../images/img_top04_pc.jpg);
	animation-delay: 15s;
	height: 100%;
	animation: bgAnime2 10s 14s forwards;
}

@keyframes bgAnime {
	0%{ opacity: 0; }
	10%{ opacity: 1; }
	25%{ opacity: 1; }
	35%{ opacity: 0; }
	100%{ opacity: 0; }
}

@keyframes bgAnime2 {
	0%{ opacity: 0; }
	10%{ opacity: 0; }
	25%{ opacity: 1; }
	35%{ opacity: 1; }
	100%{ opacity: 1; }
}
/*トップ画像のアニメーションの指定ここまで*/

main{
	width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

.info{
	width: 600px;
	margin: 0 auto;
}

.info h2{
	text-align: center;
	margin: 100px 0 60px 0;
}

.info-text{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 30px;
}

.info-date{
	width: 100px;
}

.info-content{
	width: 500px;
}

/*Online Shop・Follow共通*/
.box-text{
	text-align: center;
	padding-top:40px;
}
/*Online Shop・Follow共通ここまで*/

.online{
	margin-top: 100px;
	display: flex;
	justify-content: space-between;
}

.online-left{
	width: 460px;
	background-color: #f5f5f5;
	position: relative;
	right: -10px;
	bottom: -40px;
}

.online-right{
	width: 460px;
	position: relative;
	left: -10px;
	z-index: 2;
}

.online-right img{
	width: 100%;
}

.online-text{
	margin: 20px 0;
	line-height: 1.4;
}

.online-btn{
	background-image: url(../images/btn_onlineshop02.jpg);
	background-repeat: no-repeat;
	background-position: center;
	padding: 12px 60px 14px 60px;
	margin: 0 auto;
}

.cart:before{
	content:"";
	display: inline-block;
	width: 22px;
	height: 22px;
	background-image: url("../images/icon_cart02.png");
	background-size: contain;
	vertical-align: middle;
}

.follow{
	margin: 160px 0 80px 0;
	display: flex;
	justify-content: space-around;
	flex-direction: row-reverse;
}

.follow-left{
	width: 460px;
	position: relative;
	right: -10px;
	z-index: 2;
}

.follow-left img{
	width: 100%;
}

.follow-right{
	width: 460px;
	background-color: #f5f5f5;
	position: relative;
	left: -10px;
	bottom: -40px;
}

.follow-btn{
	margin-top: 50px;
	display: flex;
	justify-content: center;
}

.follow-icon{
	background-repeat: no-repeat;
	background-position: center;
}

.icon-inst{
	margin-left: 30px;
}

.follow-fb:hover{
	opacity: 0.5;
	transition: 0.2s;
}

.follow-inst:hover{
	opacity: 0.5;
	transition: 0.2s;
}

#contact{
	text-align: center;
	margin-top: 140px;
}

.contact-title{
	margin-bottom: 30px;
}

.mail{
	margin-bottom: 104px;
	letter-spacing: 0.05rem;
	display: inline-block;
}

.mail:before{
	content:"";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../images/icon_mail.png);
	background-size: contain;
	vertical-align: middle;
}

.mail:hover{
	opacity: 0.5;
	transition: 0.2s;
}
/*トップページここまで*/

/*Information*/
.information-top{
	margin: 40px 0;
}

.information-img-pc{
display: block;
}

.information-img-sp{
display: none;
}

.information-arrow{
	margin-top: 40px;
}

.information-title{
	text-align: center;
	margin: 100px 0 60px 0;
}

.information-box{
	margin: 0 18%;
	padding-bottom: 60px;
}

.box{
	padding-top: 50px;
}

.box h3{
	font-size: 1.8rem;
	border-bottom: 0.5px solid #c5c5c5;
	margin-bottom: 30px;
}

.information-text{
	margin: 10px 0 40px 110px;
}

.information-text p a {
	text-decoration: underline;
}

.schedule{
	margin-top: 15px;
}

.mt20{
	margin-top: 20px;
}

/*Scheduleが2件以上ある場合の指定*/
.info_tabel_1{
	width: 26%;
	padding: 0 10px 0 10px;
	letter-spacing: 0.05em;
}
/*#Schedule2件以上ここまで*/

/*#info_200423のみの指定*/
.text-200423{
	margin-bottom: 40px;
}

.btn-200423{
	margin: 0;
	padding: 12px 40px 14px 40px;
}
/*#info_200423のみの指定ここまで*/
/*Informationここまで*/


/*幅が780px以下のとき*/
@media all and (max-width: 780px) {
	header,
	main{
		width: 100%;
	}

	.information-box{
		margin: 0 10%;
	}

	.online-btn{
		margin: 0 auto 20px;
	}

	.information-arrow {
	    margin: 40px 20px 0 0;
	}
}

/*幅が480px以下のとき*/
@media all and (max-width: 480px) {
	.br-sp{
	display: none;
	}
	
	/*header{
		width: 100%;
	}*/
	
	.header-wrapper{
		display: block;
		margin: 20px auto;
	}
	
	.left{
		text-align: center;
	}
	
	.left img{
		width: 100%;
		max-width: 100px;
	}
	
	.right{
		display: none;
	}
	
/*トップページ-sp*/
	.top-image{
		position: relative;
		width: 100%;
		height: 230px;
		margin: 40px 0;
		overflow: hidden;
	}

	.info{
		width: 100%;
		padding: 0 20px;
	}
	
	.info h2{
		margin: 40px 0;
	}
	
	.info-text{
		display: block;
	}
	
	.info-content{
		width: 100%;
		border-top: 1px solid #5c5c5c;
		padding-top: 3px;
	}
	
	.online{
		display: block;
		background-color: #f5f5f5;
		margin-top: 50px;
	}
	
	.online-left{
		width: 100%;
		right: 0;
		bottom: 0;
		background-color: transparent;
	}
	
	.online-right{
		width: 100%;
		left: 0px;
		z-index: 0;
		padding: 40px 0 50px 0;
	}
	
	.follow{
		display: block;
		margin: 0;
	}
	
	.follow-right {
		width: 100%;
		background-color:transparent;
		left: 0;
		bottom: 0;
	}
	
	.follow-left {
		width: 100%;
		right: 0;
		z-index: 0;
		margin: 50px auto;
	}
	
/*トップページ-spここまで*/
	
/*Information-sp*/
	.information-top{
		margin: 0;
	}
	
	.arrow img{
		margin-left: 10px;
}
	
	.information-top img{
		width: 100%;
	}
	
	.information-img-pc{
		display: none;
	}
	.information-img-sp{
		display: block;
	}
	
	.information-arrow{
		margin: 10px 10px 0 0;
	}
	
	.information-arrow img{
		width: 60px;
	}
	
	main{
		width: 100%;
		padding: 0;
	}
	
	.information-title{
		margin: 60px 0 20px 0;
	}
	
	.information-box{
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.box h3{
	font-size: 1.2em;
	margin-bottom: 16px;
	}
	
	.information-text{
	margin: 0;
	}
	
	.btn-200423{
	margin: 0 auto;
	padding: 12px 50px 14px 50px;
	}
	
	.table-sp th{
		width: 8px;
	}

	.table-sp td{
		display: block;
		padding-left: 10px;
	}

	td.info_tabel_1 {
	    width: 100%;
	}
	
	
/*Information-spここまで*/
}