@charset "UTF-8";
/* CSS Document */
	

/*======================================================

	PCサイズ（769px以上）ここから
	
======================================================*/

@media screen and (min-width:769px), print{
	
	h3{
		display: block;
		width: 1024px;
		padding-top: 415px !important;
		margin: 0 auto 5px !important;
		text-align: left !important;
		background-image: url("../images/title.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
	}
	h3 p{
		display: inline-block !important;
		font-size: 18px;
		font-weight: normal;
		padding: 2px 10px;
	}
	.cat{
		color: #FFFFFF;
		background-color: #54061A;
	}
	.state{
		color: #54061E;
		background-color: #EEEEEE;
	}
	
	.day{
		margin: 0 !important;
		padding-left: 8px;
		margin-bottom: 20px !important;
	}
	
	.others{
		margin-bottom: 20px;
	}

	
	dl.comment{
		display: flex;
		align-items: center;
		padding-left: 40px;
		margin-bottom: 25px !important;
	}
	dl.comment dt{
		width: 200px;
		height: 200px;
		border-radius: 100px;
		background-image: url("../images/donguri.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	dl.comment dd{
		padding: 8px 30px
	}
	dl.comment dd p + p{
		margin-top: 12px;
	}
	
	#caution{
		margin-top: 30px;
	}
	#caution ul{
		list-style-type: none !important;
	}
	
	
	
	
	#workshop dl.others{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 15px 0;
	}
	
	dl.others > dt{
		width: 360px;
		margin-right: 40px;
	}
	
	#workshop .others img{
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
	}
	
	dl.others > dd{
		width: calc(100% - 400px);
	}
	dl.others > dd .day{
		font-size: 140% !important;
		margin-bottom: 20px !important;
	}
	dl.others > dd .day .time{
		display: block;
		margin: 5px 0 15px;
		font-size: 90%;
	}
	

	dl.others h5{
		font-size: 156%;
		font-weight: bold;
		color: #54061A;
		margin-bottom: 10px;
		background-color: #F6ECEF;
		padding: 3px 15px;
	}

	dl.others .comment{
		margin-top: 25px !important;
		padding-left: 15px;
		font-size: 120% !important;
	}
	
	#flyer{
		display: block;
	}
	#flyer img{
		display: block;
		width: 100%;
		height: auto;
		margin: 50px 0 30px;
	}
	#flyer a.img:hover{
		opacity: 1;
	}
	
	
	#workshop_2{
		display: block;
		margin: 30px auto;
	}
	#workshop_2 h5{
		font-size: 156%;
		font-weight: bold;
		color: #54061A;
		margin-bottom: 10px;
		background-color: #F6ECEF;
		padding: 3px 15px;
	}
	#workshop_2 .day{
		font-size: 140% !important;
		margin-bottom: 20px !important;
	}
	
	#workshop_2 > div{
		display: flex;
		justify-content: space-around;
	}
	
	#workshop_2 > div dl{
		width: 27%;
	}
	#workshop_2 > div dl dt{
		margin-bottom: 7px;
	}
	#workshop_2 > div dl dt img{
		display: block;
		width: 100%;
		height: auto;
	}
	#workshop_2 > div dl dd{
		color: #54061A;
		font-weight: bold;
		font-size: 18px;
		line-height: 1.3;
		text-align: center;
	}
	#workshop_2 > div dl dd p{
		font-size: 16px;
	}
	
	#workshop_2 .linkButton{
		margin-top: 30px;
	}
	#workshop_2 .linkButton a{
		display: block;
		width: 500px;
		margin: 0 auto;
		padding: 15px;
		box-sizing: border-box;
	}
	
	
}
/*======================================================

	SPサイズ（768px以下）ここから
	
======================================================*/

@media screen and (max-width: 768px) {
	
	h3{
		display: block;
		width: 100%;
		padding-top: 36vw !important;
		margin: 0 auto !important;
		text-align: left !important;
		background-image: url("../images/title.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
	}
	h3 p{
		display: inline-block !important;
		font-size: 14px;
		font-weight: normal;
		padding: 2px 10px;
	}
	.cat{
		color: #FFFFFF;
		background-color: #54061A;
	}
	.state{
		color: #54061E;
		background-color: #EEEEEE;
	}
	
	.day{
		margin: 0 0 20px !important;
		line-height: 1.3 !important;
	}
	.day .time{
		margin: 3px 0 15px;
		font-size: 90%;
	}
	
	dl.comment{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 25px !important;
	}
	dl.comment dt{
		order: 2;
		width: 200px;
		height: 200px;
		border-radius: 100px;
		background-image: url("../images/donguri.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	dl.comment dd{
		order: 1;
		margin-bottom: 15px;
	}
	dl.comment dd p + p{
		margin-top: 18px;
	}
	#caution{
		margin-top: 30px;
	}
	#caution ul{
		list-style-type: none !important;
		text-indent: -1em !important;
	}
	#caution ul li{
		margin: 8px 0;
	}
	
	
	
	#workshop dl.others{
		display: block;
		justify-content: space-between;
		margin-bottom: 10px;
		padding: 15px 0;
		border-bottom: 5px dotted #F6ECEF;
	}
	#workshop dl.others:last-of-type{
		border: none;
	}
	
	dl.others > dt{
		width: 90%;
		max-width: 450px;
		margin: 0 auto 8px;
	}
	
	#workshop .others img{
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
	}
	
	dl.others > dd{
		width: 100%;
	}
	dl.others > dd .day{
		font-size: 140% !important;
		margin-bottom: 10px !important;
	}

	dl.others h5{
		font-size: 156%;
		font-weight: bold;
		color: #54061A;
		margin-bottom: 5px;
	}
	dl.others .day .time{
		display: block;
	}

	dl.others .comment{
		margin-top: 25px !important;
	}
	
	
	#workshop_2{
		display: block;
		margin-bottom: 40px;
	}
	#workshop_2 h5{
		font-size: 156%;
		font-weight: bold;
		color: #54061A;
		margin-bottom: 5px;
		background-color: #F6ECEF;
		padding: 3px 15px;
	}
	
	#workshop_2 > div{
		display: block;
	}
	
	#workshop_2 > div dl{
		display: block;
		margin-bottom: 20px;
	}
	#workshop_2 > div dl dt{
		display: block;
		width: 78%;
		margin: 0 auto 7px;
	}
	#workshop_2 > div dl dt img{
		display: block;
		width: 100%;
		height: auto;
	}
	#workshop_2 > div dl dd{
		color: #54061A;
		font-weight: bold;
		font-size: 18px;
		line-height: 1.3;
		text-align: center;
	}
	#workshop_2 > div dl dd p{
		font-size: 16px;
	}
	
	#workshop_2 .linkButton{
		margin-top: 40px;
	}
	#workshop_2 .linkButton a{
		display: block;
		margin: 0 auto;
		padding: 15px;
		box-sizing: border-box;
	}
	
	#flyer{
		display: block;
		margin: 0 -30px 60px !important;
		
	}
	#flyer img{
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}


}