@charset "UTF-8";

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

ページ 

---------------------------------------- */
#page {
	background-color: #fff1d6;
}



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

パンくず 

---------------------------------------- */
nav[role=breadcrumb] {
	width: 100%;

	background-color: #fff;
}
nav[role=breadcrumb] ol {
	width: 96em;
	margin: 0 auto;
}

.device-pc nav[role=breadcrumb] {
	border-bottom: 4px solid #306fc2;
}



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

コンテンツ 

---------------------------------------- */
#contents {
	padding: 0;

	background-color: #fff;
}
#contents header {
	padding: 32px 0;

	background-color: #306fc2;
}
#contents header h2 {
	overflow: hidden;

	width: 95%;
	max-width: 520px;
	height: 0;
	margin: 0 auto 0 0;
	padding-top: 48.90625%;

	white-space: nowrap;
	text-indent: 200%;

	background: url(../images/movie/main_title_sp.svg) no-repeat left top;
}
#contents header .lead {
	margin: 16px 16px 0 16px;
}
#contents header .lead::before {
	float: right;

	width: 100px;
	margin-bottom: 8px;
	margin-left: 16px;
	padding-top: 89.25px;

	content: "";

	background: url(../images/movie/char.png) no-repeat center center;
	background-size: contain;
}
#contents header .lead p {
	font-family: fot-tsukuardgothic-std,sans-serif;
	font-size: 140%;
	font-weight: 700;
	font-style: normal;
	line-height: 1.5;

	margin-bottom: 1em;

	color: #fff1d6;
}
#contents header .lead p:last-child {
	margin-bottom: 0;
}


/* --------------------
PC
-------------------- */
.device-pc #contents header {
	display: flex;

	padding: 40px 0;
}
.device-pc #contents header h2 {
	margin-right: 40px;
	padding-top: 29.270833333%;

	background-image: url(../images/movie/main_title_pc.svg);
}
.device-pc #contents header .lead {
	position: relative;

	margin: 5% 0 0 0;
}
.device-pc #contents header .lead p {
	font-size: 160%;
	line-height: 1.75;
}
.device-pc #contents header .lead::before {
	position: absolute;
	bottom: -10px;
	left: -240px;

	float: none;

	width: 200px;
	margin: 0;
	padding-top: 178.5px;
}



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

ムービー 

---------------------------------------- */
#movie {
	position: relative;

	width: 100%;
	margin-bottom: 16px;
	padding-top: 56.25%;

	border-bottom: 16px solid #306fc2;
}
#movie iframe {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

/* --------------------
PC
-------------------- */
.device-pc #movie {
	margin-bottom: 40px;
	border-bottom: 40px solid #306fc2;
}



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

クレジット 

---------------------------------------- */
#movie-credit {
	padding-bottom: 32px;

	border-bottom: 4px solid #306fc2;
}
#movie-credit dl {
	display: flex;

	width: 90%;
	margin: 0 auto;

	flex-wrap: wrap;
	align-items: center;
}
#movie-credit dl dt {
	font-size: 110%;
	font-weight: bold;

	width: 50%;
	padding: 4px 8px 4px 0;

	text-align: right;

	color: #666;
}
#movie-credit dl dd {
	font-size: 140%;

	width: 50%;
	padding: 4px 0 4px 8px;
}

/* --------------------
PC
-------------------- */
.device-pc #movie-credit dl dt {
	font-size: 120%;
	padding-right: 20px;
}
.device-pc #movie-credit dl dd {
	padding-left: 20px;
}


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

商品リンク 

---------------------------------------- */
#magazine-items {
	width: 95%;
	margin: 0 auto;

	justify-content: space-between;
}

/* --------------------
PC
-------------------- */
.device-pc #magazine-items {
	justify-content: center;
	padding-top: 16px;
}


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

フッタ

---------------------------------------- */
.device-sp #contents > footer {
	padding: 0;
}
.device-sp #contents > footer > a {
	margin: 32px auto;
}
.device-sp #contents > footer > ul {
	margin: 0 auto;
	padding: 0;

	border: 0 none;
}
.device-sp #contents > footer > p {
	padding: 32px 0;

	border-bottom: 4px solid #306fc2;
}

/* --------------------
PC
-------------------- */
.device-pc #contents > footer {
	padding: 0;
}
.device-pc #contents > footer > p {
	padding-bottom: 40px;
}

.device-pc footer[role=sitemap] {
	border-top: 4px solid #306fc2;
}


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

共通バナー 

---------------------------------------- */
#dayfree-banners {
	margin: 32px auto;
	padding: 32px 0 16px;

	border-top: 4px solid #306fc2;
	border-bottom: 4px solid #306fc2;
}

/* --------------------
PC
-------------------- */
.device-pc #dayfree-banners {
	margin: 40px auto;
	padding: 40px 0 8px;
}