@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{
		font-size: 15px !important;
		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;
	}

	#nyujo{
		margin-top: 5px;
		padding-left: 20px;
	}
	#nyujo span{
		font-weight: bold;
		color: #54061A;
	}
	
	#caution{
		margin-top: 30px;
	}
	#caution ul{
		list-style-type: none !important;
	}
	
	
	#story{
		display: block;
		width: 800px;
		text-align: center;
		background-color: #E6E1D5;
		background-image:
			url("../images/kousha.png"),
			url("../images/line.png"),
			linear-gradient(180deg,  rgba(220, 210, 195, 1.0) 20%, rgba(220, 210, 195, 0.0) 60%);
		background-repeat: no-repeat, repeat-y, no-repeat;
		background-size: 470px auto, 100% 30px, 100% 100%;
		background-position: right bottom, center, center;
		box-shadow: 3px 6px 8px 0px rgba(0, 0, 0, 0.5);
		margin: 45px auto 60px;
		padding: 45px 70px 60px;
		box-sizing: border-box;
		font-size: 20px;
		line-height: 2.4;
		color: #701406;
	}
	#story p{
		color: #A15C52;
		text-align: center;
		font-weight: bold;
		font-size: 25px;
		margin-bottom: 25px;
	}
	#story div{
		display: inline-block;
		text-align: left;
	}
	#story span{
		display: inline-block;
		margin: 20px 0;
		font-size: 24px;
		
	}
	
	.line{
		font-weight: bold;
		color: #CC0000;
		background-image: linear-gradient(0deg, rgba(255, 200, 200, 1.0) 40%, rgba(255, 200, 200, 0.0) 40%)
	}

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

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

@media screen and (max-width: 768px) {
	
	#title{
		display: block;
		width: calc(100vw - 8px - var(--scrollbar));
		min-width: 312px;
		height: auto;
		margin: 0 -16px 10px;
	}
	h3{
		text-align: left !important;
		margin-bottom: 0 !important;
	}
	h3 p{
		display: inline-block !important;
		font-size: 14px !important;
		font-weight: normal;
		padding: 2px 10px;
	}
	.cat{
		color: #FFFFFF;
		background-color: #54061A;
	}
	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-top: 5px dotted #F6ECEF;
	}
	
	dl.others > dt{
		width: 90%;
		max-width: 450px;
		margin: 0 auto 5px;
	}
	
	#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;
	}
	
	#nyujo{
		margin: 3px 0 15px;
		padding-left: 10px;
	}
	#nyujo span{
		display: block;
		font-weight: bold;
		color: #54061A;
	}
	
	#story{
		display: block;
		width: 100%;
		text-align: center;
		background-color: #E6E1D5;
		background-image:
			url("../images/kousha.png"),
			url("../images/line.png"),
			linear-gradient(180deg,  rgba(220, 210, 195, 1.0) 20%, rgba(220, 210, 195, 0.0) 60%);
		background-repeat: no-repeat, repeat-y, no-repeat;
		background-size: 70% auto, 100% 30px, 100% 100%;
		background-position: right bottom, center, center;
		box-shadow: 2px 4px 6px 0px rgba(0, 0, 0, 0.5);
		margin: 20px auto 50px;
		padding: 30px 30px 60px;
		box-sizing: border-box;
		font-size: 18px;
		line-height: 2.0;
		color: #701406;
	}
	#story p{
		color: #A15C52;
		text-align: center;
		font-weight: bold;
		font-size: 25px;
		margin-bottom: 25px;
	}
	#story div{
		display: inline-block;
		text-align: left;
	}
	#story span{
		display: inline-block;
		margin: 20px 0;
		font-size: 24px;
		
	}

	.line{
		font-weight: bold;
		color: #CC0000;
		background-image: linear-gradient(0deg, rgba(255, 200, 200, 1.0) 40%, rgba(255, 200, 200, 0.0) 40%)
	}
	

}