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

body{
	margin: 0;
}

.wrapper{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 3%;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.mv{
	margin: 0 auto 10%;
}

.mv-logo{
	width: 40%;
	margin: 10% auto 5%;
}

.mv p{
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.8;
	font-weight: 600;
}

.mv span{
	font-size: 0.85rem;
	font-weight: normal;
}

.lead{
	text-align: center;
	font-size: 0.8rem;
	line-height: 2;
	margin: 10% auto;
}


.movie_y{
	position: relative;
	width:90%; /* 横幅は100%で固定 */
	height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
	padding-top: 56.25%; /* 高さを指定(16:9) */
	margin: 10% auto 20%;
}

/* YouTube埋め込み用のiframe */
.movie_y iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-contents{
	margin: 10% auto 5%;
}

.main-contents h1{
	text-align: center;
	font-size: 1.25rem;
	margin: 5% auto;
}

.contents-inner{
	margin: 0 auto;
	/*display: flex;*/
}

.inner-box{
	margin-bottom: 20%;
}

.box-scene__time{
	text-align: center;
	margin: 3% auto 5%;
}
/* リンク全体のデザイン */
        .video-link {
            display: inline-flex; /* 要素を横並びにする */
            align-items: center;  /* 上下中央に揃える */
            text-decoration: none; /* 下線を消す */
            color: #333;           /* 文字の色 */
            font-family: sans-serif;
            font-weight: bold;
            font-size: 1.2rem;
            gap: 8px;              /* 要素間の隙間 */
			cursor: pointer;
			z-index: 10;
        }

        /* 再生ボタンの外側の円 */
        .play-icon {
            width: 22px;
            height: 22px;
            border: 2px solid #333; /* 円の線 */
            border-radius: 50%;     /* 丸くする */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* 再生ボタンの中の三角形 */
        .play-icon::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 0 5px 7px; /* 三角形の形を作る */
            border-color: transparent transparent transparent #333; /* 右向きの三角形 */
            margin-left: 2px; /* 中心を少し右にずらして調整 */
        }

		.main-img{
			width: 90%;
			margin: 5% auto;
		}

		.item{
			display: block;
			color: #000;
			font-size: 0.75rem;
			text-align: center;
			margin: 5% auto;
		}


@media(min-width:750px){
	.mv{
		margin: 0 auto 5%;
	}

	.mv-logo{
		width: 20%;
		margin: 5% auto 5%;
	}

	.mv p{
		font-size: 1.6rem;
	}

	.mv span{
		font-size: 1.1rem;
	}

	.lead{
		font-size: 1.0rem;
		margin: 5% auto;
	}


	.movie_y{
		width:100%; /* 横幅は100%で固定 */
		margin-bottom: 7%;
	}
	
	.contents-inner{
		display: flex;
		flex-wrap: wrap;
		column-gap: 10px;
		grid-row-gap: 50px;
		justify-content: center;
	}
	
	.inner-box{
		width: calc(25% - 10px);
		margin-bottom: 0;
	}
	
	.main-img{
		width: 100%;
		margin: 5% auto;
	}
	
	.br_s{
		display: none;
	}

}