@charset "utf-8";

main.media section.x1 {
	padding:100px 0 0;
}
main.media section.x1 .inner {
	padding:30px 0 33vw;
	position:relative;
	z-index:1;
}
main.media section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}
main.media section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
}

main.media section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
}
main.media section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
}
main.media section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}
main.media section.x1 .inner .bg {
    width: 72vw;
	max-width:1100px;
    height: auto;
    aspect-ratio: 3 / 2;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
main.media section.x1 .inner .bg img {
    width: 100%;
    position: relative;
    top:-7vw;
}
main.media section.x1 .inner .bg .gradation {
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background:linear-gradient(110deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 30%);
	left:0;
	top:0;
}

main.media section.x2 {margin:50px 0 0;}
main.media section.x2 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.media section.x2 .inner h3 {
	font-size:96px;
	color:#e9e1ce;
	font-weight:500;
	border-bottom:solid 1px #d8d8d8;
	margin:50px 0 0;
}
main.media section.x2 .inner h3 span {color:#e9e1ce;}
main.media section.x2 .inner dl {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	border-bottom:solid 1px #d8d8d8;
	padding:50px 0;
}
main.media section.x2 .inner dl.last {border-bottom:none;}
main.media section.x2 .inner dl dt {width:30%;}
main.media section.x2 .inner dl dt p {
	font-size:18px;
	font-weight:bold;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
main.media section.x2 .inner dl dt p .date {width:13em;}
main.media section.x2 .inner dl dd {width:70%;}
main.media section.x2 .inner dl dd h2 {
	font-size:24px;
	line-height:1.6;
	margin:0 0 0.5em;
}
main.media section.x2 .inner dl dd h2 .icon01 {
	width:1.2em;
	margin:0 10px 0 0;
}
main.media section.x2 .inner dl dd a {
	text-decoration:none;
	font-weight:500;
}
main.media section.x2 .inner dl dt p .tv {color:#168926;}
main.media section.x2 .inner dl dt p .youtube {color:#d90007;}
main.media section.x2 .inner dl dt p .web {color:#0093ff;}
main.media section.x2 .inner dl dt p .magazine {color:#b35713;}
main.media section.x2 .inner dl dd a.movie {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	max-width:500px;
	margin:30px 0 0;
}
main.media section.x2 .inner dl dd a.movie svg {
	position:absolute;
	z-index:100;
	width:33%;
	fill:#fff;
}
main.media section.x2 .inner dl dd a.movie::after {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:#000;
	position:absolute;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-opacity:0.4;
	opacity:0.4;
	filter:alpha(opacity=40);
}
main.media section.x2 .inner dl dd a.movie:hover::after {
	-moz-opacity:0.2;
	opacity:0.2;
	filter:alpha(opacity=20);
}

main.media section.x2 .inner dl dd ul {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	margin:2vw 0 0 0;
}
main.media section.x2 .inner dl dd ul li {
	width:auto;
	margin:0 3% 0 0;
}
main.media section.x2 .inner dl dd ul li img {
	width:auto;
	height:12vw;
}


/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (max-width:1600px){
	main.media section.x1 .inner {padding:30px 0 38vw;}
}
@media print, screen and (max-width:1500px){
	main.media section.x2 .inner dl dt p .date {
		width:10em;
	}
	main.media section.x2 .inner dl dd {width:70%;}
}
@media print, screen and (max-width:1200px){
	main.media section.x1 .inner .bg .gradation {background:linear-gradient(110deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 50%);}
	main.media section.x2 .inner dl {flex-direction:column;}
	main.media section.x2 .inner dl dt p {margin:0 0 0.5em;}
	main.media section.x2 .inner dl dt p .date {
		width:fit-content;
		margin:0 2em 0 0;
	}
	main.media section.x2 .inner dl dt {width:100%;}
	main.media section.x2 .inner dl dd {width:100%;}
	main.media section.x2 .inner dl dd ul {
		flex-wrap:wrap;
	}
	main.media section.x2 .inner dl dd ul li {/*width:30%;*/}
	main.media section.x2 .inner dl dd ul li img {height:18vw;}
}
@media print, screen and (max-width:1000px){
	main.media section.x2 .inner dl dd ul {margin:2vw 0 0;}
}
@media print, screen and (max-width:768px){
	main.media section.x1 .inner {padding:0;}
	main.media section.x1 .inner .bg .gradation {display:none;}
	main.media section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.media section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.media section.x1 .inner .top_bx p {font-size:6vw;}
	main.media section.x1 .inner .bg {
		position:relative;
		width:100%;
		margin:0 0 5vw 10vw;
	}

	main.media section.x2 .inner {padding:0 5vw;}
	main.media section.x2 {margin:0;}
	main.media section.x2 .inner h3 {
		font-size:16vw;
		margin:0;
		line-height:1;
		padding:10vw 0 0.2em;
	}
	main.media section.x2 .inner dl {padding:10vw 0;}
	main.media section.x2 .inner dl dt p {font-size:4.2vw;}
	main.media section.x2 .inner dl dd h2 {
		font-size:6.8vw;
		line-height:1.4;
	}
	main.media section.x2 .inner dl dd ul li img {height:30vw;}

	.ios main.media section.x2 .inner h3 span {line-height:1;}
}