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

#ytWrap {
	width: 90%;
	max-width: 1600px;
}

.ytBox {
	width: 47.5%;
	position: relative;
	max-width: 1000px;
	margin-top: 30px;
margin-bottom: 2%;
}
.ytBox .ifWrap {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.ytBox .ifWrap iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


/* H3タイトル装飾 */

h3.backLine {
	font-size: 28px;
	padding: 0.5em 0;
	position: relative;
	text-align: center;
}
h3.backLine span {
	background-color: #fff;
	padding: 0 0.5em;
}
h3.backLine::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top:50%;
	left: 0;
	background-color: #000;
	z-index: -1;
}
/* ********* */


@media screen and (max-width: 959px) {
	#ytWrap {
		max-width: 640px;
	}
	.ytBox {
		width: 100%;
		margin-bottom: 3%;
	}
}

@media screen and (max-width: 599px) {}




		.ytBox {
			background-color: #000;
			color: #fff;
			padding: 15px;
		}
		.ytBox h4 {
			font-size: 18px;
			padding-top: 0.5em;
		}
		
/* H3タイトル装飾 */

h3.backLine {
	font-size: 28px;
	padding: 0.5em 0;
	position: relative;
	text-align: center;
}
h3.backLine span {
	background-color: #fff;
	padding: 0 0.5em;
}
h3.backLine::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top:50%;
	left: 0;
	background-color: #000;
	z-index: -1;
}
div.h3Note{
    padding-bottom: 20px;
}
/* ********* */

	@media screen and (max-width: 599px) {
		.ytBox {
			padding: 3%;
		}
	.ytBox h4 {
		font-size: 4.3vw;
		font-size: clamp(15px, 4.3vw, 17px);
	}
    h3.backLine{
        font-size: clamp(19px, 5.3vw, 21px);
    }
}


.shortWrap {
	gap:0 5%;
}
.shortWrap .shortBox {
	width: 30%;
	position: relative;
}
.shortWrap .shortBox a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
}
.shortWrap .shortBox a:hover {
	opacity: 0.5;
}
.shortWrap .shortBox div {
	width: 100%;
	height: 0;
	padding-top: 178%;
	position: relative;
}
.shortWrap .shortBox iframe {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
}


.lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container {
    width: 51vh;
	height: 90vh;
    max-height: 90vh;
}
.lity-iframe-container {
    width: 100%;
    height: 0;
    padding-top: 178%;
    overflow: auto;
    pointer-events: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

	@media screen and (max-width: 599px) {
		#sec01 {
			width: 90%;
			margin: 0 auto;
			overflow-x: scroll;
			}
		}
		.shortWrap {
			width: calc(90% * 3);
			gap: 0px 0px;
		}
		.shortWrap .shortBox {
	width: calc(90% / 3);
		}
}