/*
* YouTube動画埋め込み
*/

.productBg {
	padding: 0px;
	margin: 0 auto 35px auto;
	max-width: 900px;
}
.productDiv {
}
.productWrapper {
	display: flex;
	justify-content: space-around;
	column-gap: 25px;
}
@media screen and (max-width: 767px) {
	.productWrapper {
		flex-wrap: wrap;
	}
}
.productContainer {
	width: 33.3%;
	display: flex;
	flex-direction: column;
	margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
	.productContainer {
		width: 100% !important;
	}
}
.productDescription {
	padding: 0px 30px 2.5px 30px;
}
.productDescription h3 {
	text-align: center;
	margin: 15px 0 10px 0;
}
.productDescription p {
	text-align: justify;
}
.productButtonContainer {
	display: flex;
	margin-top: auto;
}
.productButton {
	display: flex;
	font-size: 16px;
	font-weight: bold;
	color: #555555;
	text-align: center;
	padding: 5px 10px;
	width: 50%;
	box-sizing: border-box;
	border-top: 2px solid #dadada;
	border-right: 2px solid #dadada;
}
@media screen and (max-width: 1180px) {
	.productButton {
		font-size: 13px;
	}
}
@media screen and (max-width: 480px) {
	.productButton {
		font-size: 16px;
	}
}
.productButton:last-of-type {
	text-align: left;
	padding: 5px 5px;
	border-top: 2px solid #dadada;
	border-right: none;
}
.productButton--sub {
	font-size: 11px;
	font-weight: normal;
	letter-spacing: -0.1em;
}
@media screen and (max-width: 1180px) {
	.productButton--sub {
		font-size: 10px;
	}
}
@media screen and (max-width: 480px) {
	.productButton--sub {
		font-size: 11px;
	}
}
.productButton:hover {
	background: #F0F0F0;
}
.arrowContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 100%;
}
.arrowContainer:last-of-type {
	align-items: center;
}
.productButton--subContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 72.5%;
}
@media screen and (max-width: 1180px) {
	.productButton--subContainer {
		width: 95%;
	}
}
@media screen and (max-width: 767px) {
	.productButton--subContainer {
		width: 33%;
	}
}
@media screen and (max-width: 600px) {
	.productButton--subContainer {
		width: 43%;
	}
}
@media screen and (max-width: 480px) {
	.productButton--subContainer {
		width: 70%;
	}
}
.Style__arrow {
	color: #A0A0A0;
	font-weight: bold;
}

.youtubeContainer {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	column-gap: 20px;
	margin: 0 auto 15px auto;
}
@media screen and (max-width: 767px) {
	.youtubeContainer {
		flex-wrap: wrap;
	}
}
.youtubeContainer h3 {
	margin: 0 0 1em 0;
}
@media screen and (max-width: 767px) {
	.youtubeContainer h3 {
		text-align: left;
		margin: 0.75em 0 1em 0;
	}
	.youtubeContainer p {
		margin-top: 0;
	}
	
}

.yotubeDescription {
	color: #FFFFFF;
	width: 50%;
}
@media screen and (max-width: 767px) {
	.yotubeDescription {
		width: 100% !important;
	}
}
.youtubeFlex {
	display: flex;
	flex-wrap: wrap;
}
.topVd {
	width: 50%;
  position: relative;
	cursor: pointer;
	/* border-radius: 4px;
	border-top: 16px solid #000;
	border-left: 6px solid #000;
	border-bottom: 16px solid #000;
	border-right: 6px solid #000;
	box-sizing: border-box; */
}
@media screen and (max-width: 767px) {
	.topVd {
		width: 100% !important;
	}
}
.topVd img {
	border-radius: 4px;
}

.btnWrapper {
	display: flex;
	gap: 10px;
}
@media screen and (max-width: 767px) {
	.btnWrapper {
		flex-direction: column;
		align-items: center;
	}
}

.youtubeBtn {
	display: block;
	max-width: 235px;
	min-width: 188px;
	height: 40px;
	padding: 10px 15px 10px 20px;
	font-size: 14px;
  font-weight: bold;
	color: #FFFFFF;
	background: #ff0000;
	cursor: pointer;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.17);
	box-sizing: border-box;
}
.youtubeBtn:hover {
	filter: opacity(0.7);
}
.instagramBtn {
	cursor: pointer;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.17);
}
.instagramBtn:hover {
	filter: opacity(0.7);
}
@media screen and (max-width: 767px) {
	.youtubeBtn {
		margin: 0 auto 22.5px auto;
	}
	.btnWrapper .youtubeBtn {
		margin: 0 auto;
	}
	.btnWrapper .instagramBtn {
		margin: 0 auto 22.5px auto;
	}
}
@media screen and (max-width: 480px) {
	.youtubeBtn {
		font-size: 13px;
	}
}
.arrowYouTubeContainer {
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: relative;
	width: 100%;
}
.youtube__arrow {
	position: absolute;
	right: 0;
	font-weight: bold;
	top: 14%;
}
.youtubeDialog {
    position: relative;
    z-index: 2;
	text-align: right;
    background: #000000;
    border: 2px solid #ff0000;
	border-radius: 7.5px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.17);
}
.youtubePlayer {
    width: 560px;
    height: 315px;
}
.youtubePlayer.short {
    width: 315px;
    height: 560px;
}
@media screen and (max-width: 480px) {
	.youtubePlayer {
        width: auto;
        height: auto;
	}
}
.youtubeClose {
	display: flex;
    align-items: center;
    justify-content: center;
    margin: -16px -16px 0 auto;
    width: 35px;
    height: 35px;
	font-size: 17px;
	color: #FFFFFF;
	font-weight: bold;
	background: #ff0000;
	cursor: pointer;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.17);
}
.topVd:hover,
.youtubeClose:hover {
	filter: opacity(0.7);
}

.topVd__pbtn2 {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/play_btn_red.svg);
    background-repeat: no-repeat;
    background-size: 50px 50px;
    background-position: center center;
    opacity: 0.9;
}