@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

.thumb-movie01 {
	background: url('images/popup-thumb01.jpg') no-repeat center center/cover;
}

#sub01 .sub-contents{
	position: relative;
	padding:3rem;
	margin-top: 10rem;
}
#sub01 .sub-contents span.box-title{
	position: absolute;
    display: inline-block;
    top: -17px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 0 1.5em;
    height: 34px;
    line-height: 34px;
    font-size: 1em;
    background: #000;
    color: #ffffff;
    font-weight: 600;
    border-radius: 100px;
	letter-spacing: 0.05em;
}
#sub01 .sub-contents-inner{
	position: relative;
}
#sub01 .sub-contents h4{
	font-size: 1.2em;
    font-weight: 600;
    text-align: center;
	padding: 1em 0;
	border-bottom: 1px solid #000;
}
#sub01 .sub-contents p{
	margin-top:1.5em;
}

/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
	#sub01 .sub-contents{
		height: 440px;
	}
	#sub01 .sub-contents .sub-contents-img{
		position: absolute;
		top:0;
		margin-top:0;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1080px）
===================================== */
@media screen and (768px <=width < 1080px) {}