@charset "utf-8";

*{box-sizing: border-box;}

/* PC
-------------------------------------------------- */
@media screen and (min-width:1200px){
	.pixar_header{
		display: block;
		background: #898989;
		padding: 50px 0;
	}
	
	.pixar_header h1{
		display: flex;
		align-content: center;
		justify-content: center;
	}
	
	.pixar_header h1 img{
		width: 100%;
		max-height: 60px;
	}
	
	.pixar_wrap{
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: auto;
		padding: 60px 0;
	}
	
	.pixar_wrap h2{
		font-size: 40px;
		text-align: center;
		font-weight: 500;
		margin-bottom: 60px;
		color: #000000;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
	.pixar_wrap h2 span{
		padding-left: 0.5em;
	}
	
	.caution a{
		display: flex;
		align-items: center;
		width: 100%;
		border-radius: 10px;
		background: #ffffff;
		margin: 0 auto 60px;
		padding: 25px 30px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
		transition: 0.15s;
		text-decoration: none;
		font-size: 16px;
		color: #000000;
	}
	
	.caution a:hover{
		transform: translateY(2px);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	}
	
	.caution a span:nth-child(1){
		display: inline-block;
		background: #cc0000;
		color: #ffffff;
		text-align: center;
		border-radius: 5px;
		padding: 5px 10px;
		font-size: 14px;
		line-height: 1.6em;
	}
	
	.caution a span:nth-child(2){
		color: #cc0000;
	}
	
	.contents_flex{
		display: flex;
		justify-content: flex-start;
	}
	
	.contents_flex li{
		width: 32%;
		margin-bottom: 40px;
	}
	
	.ip-img{
		display: block;
		margin-bottom: 40px;
	}
	
	.ip-img img{
		width: 100%;
		transition: 0.15s;
	}
	
	.ip-img:hover img{
		opacity: 0.8;
	}
	
	.ip-name{
		font-size: 30px;
		text-align: center;
		margin-bottom: 20px;
		font-weight: 500;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
	.ip-text{
		font-size: 14px;
		line-height: 1.6em;
		height: 3.2em;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.ip-link{
		display: block;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #000 50%);
		background-size: 200% 100%;
		background-position: right bottom;
		text-align: center;
		font-size: 14px;
		padding: 30px 0;
		color: #ffffff;
		text-decoration: none;
		transition: background-position 0.4s ease;
		overflow: hidden;
	}
	
	.ip-link:hover{
		background-position: left bottom;
	}
	
	.link_series{
		display: block;
		width: 100%;
		max-width: 600px;
		margin: auto;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #898989 50%);
		background-size: 200% 100%;
		background-position: right bottom;
		color: #ffffff;
		border-radius: 5px;
		text-align: center;
		padding: 30px 0;
		text-decoration: none;
		font-size: 16px;
		font-weight: 600;
		transition: background-position 0.4s ease;
	}
	
	.link_series:hover{
		background-position: left bottom;
	}
	
	.copy{
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: 30px auto;
		text-align: right;
	}
	
	.copy img{
		width: auto;
		height: 16px;
	}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:1199px){
	.pixar_header{
		display: block;
		background: #000000;
		padding: 40px 0;
	}
	
	.pixar_header h1{
		display: flex;
		align-content: center;
		justify-content: center;
	}
	
	.pixar_header h1 img{
		width: 100%;
		max-width: 150px;
	}
	
	.pixar_wrap{
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: auto;
		padding: 40px 20px;
	}
	
	.pixar_wrap h2{
		font-size: 30px;
		text-align: center;
		font-weight: 500;
		margin-bottom: 40px;
		color: #000000;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
	.pixar_wrap h2 span{
		display: block;
	}
	
	.caution a{
		display: block;
		width: 100%;
		border-radius: 10px;
		background: #ffffff;
		margin: 0 auto 60px;
		padding: 20px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
		transition: 0.15s;
		text-decoration: none;
		font-size: 14px;
		color: #000000;
	}
	
	.caution a:hover{
		transform: translateY(2px);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	}
	
	.caution a span:nth-child(1){
		display: block;
		width: 130px;
		background: #cc0000;
		color: #ffffff;
		text-align: center;
		border-radius: 5px;
		padding: 5px 0;
		font-size: 14px;
		line-height: 1.6em;
		margin-bottom: 10px;
	}
	
	.caution a span:nth-child(2){
		color: #cc0000;
	}
	
	.contents_flex{
		display: flex;
		justify-content: flex-start;
	}
	
	.contents_flex li{
		width: 100%;
		margin-bottom: 40px;
	}
	
	.ip-img{
		display: block;
		margin-bottom: 40px;
	}
	
	.ip-img img{
		width: 100%;
		transition: 0.15s;
	}
	
	.ip-img:hover img{
		opacity: 0.8;
	}
	
	.ip-name{
		font-size: 30px;
		text-align: center;
		margin-bottom: 20px;
		font-weight: 500;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
	.ip-text{
		font-size: 14px;
		line-height: 1.6em;
		height: 3.2em;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.ip-link{
		display: block;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #000 50%);
		background-size: 200% 100%;
		background-position: right bottom;
		text-align: center;
		font-size: 14px;
		padding: 25px 0;
		color: #ffffff;
		text-decoration: none;
		transition: background-position 0.4s ease;
		overflow: hidden;
	}
	
	.ip-link:hover{
		background-position: left bottom;
	}
	
	.link_series{
		display: block;
		width: 90%;
		max-width: 600px;
		margin: auto;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #898989 50%);
		background-size: 200% 100%;
		background-position: right bottom;
		color: #ffffff;
		border-radius: 5px;
		text-align: center;
		padding: 20px 0;
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
		transition: background-position 0.4s ease;
	}
	
	.link_series:hover{
		background-position: left bottom;
	}
	
	.copy{
		display: block;
		width: 90%;
		max-width: 1200px;
		margin: 30px auto;
		text-align: right;
	}
	
	.copy img{
		width: auto;
		height: 16px;
	}
}