@charset "utf-8";
/* --------------------------------------------------------------------------------------
	INTERVIEW MOVIE
--------------------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.uc-pc,
	.pc { display: inherit !important; }
	.uc-sp,
	.sp { display: none !important; }
}
@media (max-width: 768px) {
	.uc-pc,
	.pc { display: none !important; }
	.uc-sp,
	.sp { display: block !important; }
}

@media screen and (max-width: 768px) {
	.uc-page-header {
		height: auto;
	}
}



.interviewmovie-container {
	position: relative;
	padding: 100px 30px 200px;
	background: #e3f6fc;
}
.interviewmovie-frame {
	position: relative;
	margin: 0 auto;
	padding-bottom: 150px;
	max-width: 1000px;
	background: #fff;
	border: #009fe8 1px solid;
	border-radius: 20px;
}
@media screen and (max-width: 768px) {
	.interviewmovie-container {
		padding: 10.4167vw 0 26.0417vw;
	}
	.interviewmovie-frame {
		padding-bottom: 21.4844vw;
		max-width: 88.5417%;
		border-radius: 2.6042vw;
	}
}

.interviewmovie-title {
	position: relative;
	padding-top: 70px;
	height: 250px;
	box-sizing: border-box;
	background-color: #f2e5d6;
	background-image: url(/content/dam/sites/jp_unicharmpet_com/manner-wear/gowithwanco/interviewmovie/bg_interviewmovie_kv_pc.png);
	background-position: center bottom;
	background-repeat: repeat-x;
	border-radius: 21px 21px 0 0;
}
.interviewmovie-title h1 small,
.interviewmovie-title h1 strong {
	display: block;
	font-weight: 700;
	line-height: 1;
	color: #009fe8;
	text-align: center;
}
.interviewmovie-title h1 small {
	margin-bottom: 0.5em;
	font-size: 22px;
}
.interviewmovie-title h1 strong span {
	display: inline-block;
	padding: 0.1em 0.2em;
	background: linear-gradient(0deg, #ffffff 0%, #ffffff 40%, transparent 40%, transparent 100%);
	font-size: 44px;
}
.interviewmovie-title .logo {
	position: absolute;
	left: 72px;
	top: 70px;
	width: 179px;
}
.interviewmovie-title .dog {
	position: absolute;
	right: 60px;
	top: 40px;
	width: 208px;
}
@media screen and (max-width: 1024px) {
	.interviewmovie-title .logo {
		left: 30px;
	}
	.interviewmovie-title .dog {
		right: 10px;
	}
}
@media screen and (max-width: 925px) {
	.interviewmovie-title .logo {
		left: 10px;
	}
	.interviewmovie-title .dog {
		right: -20px;
	}
}
@media screen and (max-width: 860px) {
	.interviewmovie-title .logo {
		left: 10px;
		width: 20%;
	}
	.interviewmovie-title .dog {
		right: -30px;
		width: 25%;
	}
}
@media screen and (max-width: 768px) {
	.interviewmovie-title {
		padding-top: 8.4636vw;
		height: 71.6146vw;
		background-image: url(/content/dam/sites/jp_unicharmpet_com/manner-wear/gowithwanco/interviewmovie/bg_interviewmovie_kv_sp.png);
		background-size: 100% auto;
		border-radius: 2.7344vw 2.7344vw 0 0;
	}
	.interviewmovie-title h1 small {
		font-size: 3.9063vw;
	}
	.interviewmovie-title h1 strong span {
		font-size: 7.5521vw;
	}
	.interviewmovie-title .logo {
		left: 3.6459vw;
		top: 34.375vw;
		width: 31.5105vw;
	}
	.interviewmovie-title .dog {
		right: 4.948vw;
		top: 30.599vw;
		width: 47.3959vw;
	}
}

.interviewmovie-grid {
	margin: 85px auto 0;
	width: 840px;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col {
	padding: 0;
	flex: 0 1 auto;
	width: 28.5715%;
	text-align: left;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead {
	margin-bottom: 0.8em;
	text-align: center;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1.6;
	color: #009FE8;
	text-align: center;
	letter-spacing: 0;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span::before,
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span::after {
	content: '';
	position: absolute;
	top: 50%;
	display: block;
	height: 110%;
	border-left: #009FE8 1px solid;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span::before {
	left: -1em;
	transform: translate(0,-50%) rotate(-20deg);
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span::after {
	right: -1em;
	transform: translate(0,-50%) rotate(20deg);
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0 auto 22px;
	max-width: 210px;
	width: 100%;
	height: 44px;
	border-radius: 22px;
	background: #009FE8;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,99.9%);
	display: block;
	width: 20px;
	height: 11px;
	background-image: url(/content/dam/sites/jp_unicharmpet_com/manner-wear/gowithwanco/interviewmovie/bg_balloon_pc.png);
	background-position: center top;
	background-repeat: no-repeat;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title span {
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-align: center;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title span small {
	font-size: 66.6666%;
}

.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .uc-mod-media-02 .uc-object .uc-inner {
	padding-top: 0;
}
.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col iframe {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
}
@media screen and (max-width: 960px) {
	.interviewmovie-grid {
		width: 93.3334%;
	}
}
@media screen and (max-width: 960px) {
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span {
		font-size: 12px;
	}
}
@media screen and (max-width: 768px) {
	.interviewmovie-grid {
		margin-top: 15.625vw;
		width: 67.7084vw;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col {
		width: 100%;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col + .uc-lyt-grid-col {
		margin-top: 11.0678vw;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-lead span {
		font-size: 3.7761vw;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title {
		margin-bottom: 5.2084vw;
		width: 53.3855vw;
		height: 11.198vw;
		border-radius: 5.599vw;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title::after {
		width: 5.0782vw;
		height: 2.8646vw;
		background-image: url(/content/dam/sites/jp_unicharmpet_com/manner-wear/gowithwanco/interviewmovie/bg_balloon_sp.png);
		background-size: 100% auto;
	}
	.interviewmovie-grid.uc-lyt-grid-container > .uc-lyt-grid-col .movie-title span {
		font-size: 5.9896vw;
	}
}

.dropshadow {
	filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.2));
}
.btn-buy {
	margin: 60px auto 0;
	width: 500px;
	border-radius: 10px;
	overflow: hidden;
}
.bnr-sizecheck {
	margin: 150px auto 0;
	width: 600px;
}
.interviewmovie-products-grid {
	margin: 105px auto 0;
	width: 700px;
}
.interviewmovie-products-grid.uc-lyt-grid-container > .uc-lyt-grid-col {
	padding: 0;
	flex: 0 1 auto;
	width: 28.5715%;
	text-align: left;
}
div.feature-movie {
	margin: 150px auto 0;
	width: 80%;
}
div.feature-movie iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}
@media screen and (max-width: 820px) {
	.interviewmovie-products-grid {
		width: 92.1053%;
	}
}
@media screen and (max-width: 768px) {
	.dropshadow {
		filter: drop-shadow(0.7813vw 0.7813vw 0.1954vw rgba(0,0,0,0.2));
	}
	.btn-buy {
		margin-top: 13.9323vw;
		width: 78.125vw;
		border-radius: 1.823vw;
	}
	.bnr-sizecheck {
		margin-top: 13.0209vw;
		width: 78.125vw;
	}
	.interviewmovie-products-grid {
		justify-content: center;
		gap: 0 5.2084vw;
		margin-top: 14.323vw;
		width: 78.125vw;
	}
	.interviewmovie-products-grid.uc-lyt-grid-container > .uc-lyt-grid-col {
		position: relative;
		z-index: 1;
		width: 36.4584vw;
	}
	.interviewmovie-products-grid.uc-lyt-grid-container > .uc-lyt-grid-col:nth-child(3) {
		z-index: 0;
		margin-top: -5.2084vw;
	}
	div.feature-movie {
		margin-top: 13.0209vw;
		width: 78.125vw;
	}
}