/* CSS Document */


/*- tvcm -*/

/*------------------------------------------------------------------------------------------------------------------------------------------

* all

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 600px未満
---------------------------------------------------------------------*/
#tvcm #contents{
	background:#fff697;
}

#tvcm #contents h3 + p{
	text-align:center;
	margin-top:15px;
}

#tvcm #contents span + p{
	font-weight:bold;
	margin-top:15px;
	color:#583f00;
 font-size: 1.4rem;
}

#tvcm #contents .pc{
	display:none;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
#tvcm #contents span + p{
		font-size:2rem;
}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#tvcm #contents{
		background:url(../../img/common/pcbg_flower.png) no-repeat center 40px, url(../../img/common/pcbg_cloud.png) no-repeat left 98%, #fff697;
	}
	
	#tvcm #contents h3 + p{
		margin-top:20px;
	}
	
	#tvcm #contents .sp{
		display:none;
	}
	
	#tvcm #contents .pc{
		display:block;
	}
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* movie

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#tvcm #movie{
	padding:30px 10px;
	text-align:center;
}

#tvcm #movie h3 + p{
	font-size:1.4rem;
}

#tvcm #movie h3 + p span{
	font-size:1.6rem;
}

#tvcm #movie div{
	margin-top:15px;
}

#tvcm #movie div span{
 display:block;
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}

#tvcm #movie div span iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#tvcm #movie ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#tvcm #movie ul li{
	width:calc(50% - 5px);
	margin-top:30px;
}

#tvcm #movie ul li span {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 display:block;
}

#tvcm #movie ul li span iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
	
	#tvcm #movie{
		padding:30px 20px;
	}
	
	#tvcm #movie ul li{
		width:calc(50% - 10px);
	}
	
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#tvcm #movie{
		padding:30px 20px;
	}
	
	#tvcm #movie ul li{
		width:calc(50% - 20px);
	}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#tvcm #movie{
		padding:0 0 60px;
		margin:0 auto;
		width:980px;
	}
	
	#tvcm #movie h3{
		margin-top:-40px;
	}
	
	#tvcm #movie h3 + p span{
		font-size:2rem;
	}
	
	#tvcm #movie div{
		position:relative;
		margin-top:30px;
	}
	
	#tvcm #movie div > img{
		position:absolute;
		top:-111px;
	}
	
	#tvcm #movie ul{
		justify-content:flex-start;
	}
	
	#tvcm #movie ul li{
		width:300px;
		margin-right:40px;
		margin-top:60px;
	}
	
	#tvcm #movie ul li:nth-of-type(3n){
		margin-right:0;
	}
	
	#tvcm #movie a{
		display:block;
		position:relative;
	}
	
	#tvcm #movie a:before{
		content:"";
		display:block;
		background:url(../../img/tvcm/icon.png) no-repeat left top;
		background-size:contain;
		transform:translate(-50%, -50%);
		position:absolute;
		left:50%;
		top:50%;
	}
	
	#tvcm #movie div a:before{
		height:240px;
		width:240px;
	}
	
	#tvcm #movie ul a:before{
		height:130px;
		width:130px;
	}

}







/*------------------------------------------------------------------------------------------------------------------------------------------

* music

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#tvcm #music{
	background:url(../../img/common/stripe_bg.png) repeat left top;
	position:relative;
}

#tvcm #music:before{
	content:"";
	display:block;
	height:25px;
	width:100%;
	background:url(../../img/tvcm/music_top.png) repeat-x left top;
	position:absolute;
	top:-20px;
	left:0;
}

#tvcm #music > section{
	padding:25px 10px 30px;
}

#tvcm #music h3 ~ *{
	margin-top:15px;
}

#tvcm #music ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#tvcm #music ul li{
	width:calc(50% - 5px);
	text-align:center;
}

#tvcm #music ul li:nth-of-type(2) ~ li{
	margin-top:15px;
}

#tvcm #music ul li span{
 display:block;
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}

#tvcm #music ul li span iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}



/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
	
	#tvcm #music > section{
		padding:25px 20px 30px;
	}
	
	#tvcm #music ul li{
		width:calc(50% - 10px);
	}
	
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#tvcm #music > section{
		padding:25px 20px 30px;
	}
	
	#tvcm #music ul li{
		width:calc(50% - 20px);
	}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#tvcm #music > section{
		padding:50px 0 60px;
		margin:0 auto;
		width:980px;
	}
	
	#tvcm #music h3 ~ *{
		margin-top:30px;
	}
	
	#tvcm #music ul li:nth-of-type(2) ~ li{
		margin-top:30px;
	}
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* line

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#tvcm #line{
	padding:50px 10px 30px;
	position:relative;
}

#tvcm #line:before{
	content:"";
	display:block;
	height:25px;
	width:100%;
	background:url(../../img/tvcm/line_top.png) repeat-x left top;
	position:absolute;
	top:-20px;
	left:0;
}

#tvcm #line a{
	display:block;
}

#tvcm #line .pc{
	display:none;
}

#tvcm #line section{
	padding-top:0 !important;
	border:5px solid #00a73c;
	border-radius:10px;
	background:#ffffff;
	padding:10px;
}

#tvcm #line section h4{
	margin-top:-30px;
}

#tvcm #line section h4 ~ *{
	margin-top:15px;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
	
	#tvcm #line{
		padding:50px 20px 30px;
	}
	
	#tvcm #line section{
		padding:30px;
	}
	
	#tvcm #line section h4{
		margin-top:-40px;
	}
	
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#tvcm #line{
		padding:100px 20px 60px;
	}
	
	#tvcm #line section{
		padding:30px;
	}
	
	#tvcm #line section h4{
		margin-top:-50px;
	}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#tvcm #line section{
		margin:0 auto;
		width:980px;
	}
	
	#tvcm #line section h4{
		margin:-50px auto 0;
		width:420px;
	}
	
	#tvcm #line section h4 ~ *{
		margin-top:30px;
	}
	
	#tvcm #line .sp{
		display:none;
	}
	
	#tvcm #line .pc{
		display:block;
	}
	
}