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

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

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

@media screen and (min-width:769px), print{
	
	#title{
		display: block;
		width: 1024px;
		height: auto;
		margin: 0 auto;
	}
	h3{
		text-align: left !important;
		margin-bottom: 0 !important;
	}
	h3 p{
		display: inline-block !important;
		font-size: 18px;
		font-weight: normal;
		padding: 2px 10px;
	}
	.cat{
		font-size: 15px !important;
		color: #FFFFFF;
		background-color: #54061A;
		margin: 0 5px 5px 0;
	}
	.cat_r{
		background-color: #CC0000 !important;
		font-weight: bold;
	}
	.state{
		color: #54061E;
		background-color: #EEEEEE;
	}
	
	.day{
		margin: 0 !important;
		padding-left: 8px;
		margin-bottom: 20px !important;
	}
	.day .time{
		margin: 0 0 15px;
		font-size: 90%;
	}
	
	.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: 10px !important;
	}

	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;
	}
	
	#flyer{
		display: block;
		margin-top: 60px !important;
	}
	#flyer img{
		display: block;
		width: 100%;
		height: auto;
		margin: 50px 0 30px;
	}
	#flyer a.pdf::before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 30px;
		height: 30px;
		margin-right: 15px;
		background-image: url("../../../../../../images/pdf.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	#flyer a.img:hover{
		opacity: 1;
	}



	
	
}
/*======================================================

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

@media screen and (max-width: 768px) {
	
	#title{
		display: block;
		width: calc(100vw - 8px);
		height: auto;
		margin: 0 -16px 10px;
	}
	h3{
		text-align: left !important;
		margin-bottom: 0 !important;
	}
	h3 p{
		display: inline-block !important;
		font-size: 14px;
		font-weight: normal;
		padding: 2px 10px;
	}
	.cat{
		color: #FFFFFF;
		background-color: #54061A;
		margin: 0 5px 5px ;
	}
	.cat_r{
		background-color: #CC0000 !important;
		font-weight: bold;
	}
	h3 .cat{
		font-size: 70% !important;
	}
	.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 15px;
	}
	
	#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: 0;
	}

	dl.others .comment{
		margin-top: 25px !important;
	}
	
	#flyer{
		margin-top: 40px !important;
	}
	#flyer a.pdf::before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		height: 25px;
		margin-right: 10px;
		background-image: url("../../../../../../images/pdf.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

}