@charset "utf-8";
.shion {
	width: 95%;
	margin-top: 3em;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 2.5em;
	display: flex;
	flex-wrap: nowrap;
}
.shion-figure{
	width:auto; 
	margin-right: 50px;
}
.shion-col{
	margin-top: 1.5em;
	color: #333333;
	letter-spacing: 0.1em;
}

.shion h2 {
	margin-bottom: 1.5em;
}
.shion h3 {
	margin-bottom: 1.5em;
}
.shion-col-t{
	margin-bottom: 1em;
	line-height: 2em;
}
.shion-col p{
	line-height: 1.8em;
}
.shion-movie {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5em;
}
.shion-movie h2 {
	text-align: center;
	margin-bottom: 1em;
}
.shion-movie iframe {
	width: 100%;
}

.shion-gallery{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 3em;
}
.shion-gallery h2{
	width: 100%;
	text-align: center;
	margin-bottom: 1em;
}
.shion-gallery-items{
	width: 29%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}
.shion-gallery-items img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:1000px) {
	.shion-figure{
	width:35%; 
	margin-right: 30px;
}
	.shion-figure img{
		width: 100%;
		height: auto;
	}
	.shion-col{
	margin-top: 0em;
}
	.shion h2 {
	margin-bottom: 1em;
}
.shion h3 {
	margin-bottom: 1em;
}
	.shion-col-t{
	margin-bottom: 1em;
	line-height: 1.8em;
}
	.shion-movie {
	width: 75%;
	margin-bottom: 3em;
}
.shion-movie h2 img {
	width: 30%;
	height: auto;
}
	.shion-gallery h2 img{
	width: 35%;
	height: auto;
}
}

@media screen and (max-width:768px) {
	.shion {
	width: 100%;
	margin-top: 2em;
}
	.shion-figure{
	width:45%; 
}
	.shion-col p{
	line-height: 1.8em;
		letter-spacing: 0em;
}
	.shion-movie {
	width: 85%;
}
.shion-movie h2 img {
	width: 32%;
}
	.shion-gallery h2 img{
	width: 45%;
}
}

@media screen and (max-width:480px) {
	.shion {
		flex-wrap: wrap;
		width: 95%;
}
	.shion-figure{
	width:100%; 
	margin-bottom: 1.5em;
}
	.shion-movie {
	width: 95%;
}
.shion-movie h2 img {
	width: 45%;
}
	.shion-gallery h2 img{
	width: 60%;
}
	.shion-gallery-items{
	width: 45%;
	margin-bottom: 1.5em;
}
}

@media screen and (max-width:380px) {
	.shion-movie h2{
		margin-bottom: 0.5em;
	}
	
	.shion-movie h2 img {
	width: 50%;
}
	.shion-gallery h2 img{
	width: 70%;
}
	.shion-gallery h2{
		margin-bottom: 0.5em;
	}
}
