@charset "utf-8";
/******************************************
 特設TOP
******************************************/
.special {
	font-family : YuMincho, 'Yu Mincho', serif;
}
.special .title {
	width: 1080px;
	margin: 50px auto 0;
	background: #d6d0cd;
	text-align: center;
}
.special h1 { line-height: 0; }
.special .lead { padding: 0; font-size: 14px; line-height: 160%; }
.special h2 { padding: 12px 0 12px; font-size: 28px; font-weight: bold; line-height: 130%; }
.special .attention { padding: 0 0 5px; font-size: 18px; }
.special .content {
	width: 1080px;
	margin: 0 auto;
	background: #d6d0cd;
}
.special .m_action_list {
	width: 1080px;
	height: 1017px;
	margin: 0;
	position: relative;
	background: url(/decokatsu/coolbiz/img/special/bg_poster.png) no-repeat;
}
.special .content li {
	width: 220px;
	height: 144px;
	margin: 0;
	position: absolute;
}
.special .content li a {
	display: block;
	position: relative;
	outline: none;
	font-size: 17.6px;
	line-height: 136%;
	text-decoration: none;
	color: #000;
	background: #939599;
}
.special .content li a:after {
	display: block;
	content: ' ';
	position: absolute;
	top: 48%;
	right: 9px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.special .content li.scream01 a, .special .content li.scream02 a, .special .content li.scream03 a, .special .content li.scream04 a, .special .content li.scream05 a, .special .content li.scream09 a, .special .content li.scream10 a {
	width: 190px;
	height: 96px;
	padding: 48px 0 0 30px;
}
.special .content li.scream07 a, .special .content li.scream08 a {
	width: 202px;
	height: 96px;
	padding: 48px 0 0 18px;
}
.special .content li.scream06 a, .special .content li.scream09 a {
	width: 190px;
	height: 84px;
	padding: 60px 0 0 30px;
}
.special .content li a:hover {
	background: #5ac9f0;
}
.special .content li a .number {
	position: absolute;
	top: -2px;
	left: 10px;
	font-size: 48px;
}
.special .content li a span.line {
	position: relative;
	display: block;
}
.special .content li a span.line::after {
	display: block;
	position: absolute;
	height: 1px;
	content: '￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣';
	color: #5ac9f0;
	transform-origin: left top;
	transform: scale(0, 1);
	transition: transform .2s;
}
.special .content li a span.line::before {
	position: absolute;
	content: '●';
	font-size: 66%;
	color: #5ac9f0;
	transform: scale(0, 0);
	transition: transform .2s;
}
.special .content li a:hover span.line::before {
	transform: scale(1, 1);
}
/* 個別設定値 */
.special .content li.scream01 { top: 28px; left: 29px; }
.special .content li.scream01 a span.line { transform: rotate(41.5deg); }
.special .content li.scream01 a span.line::after { width: 144%; top: -81px; right: -237px; }
.special .content li.scream01 a:hover span.line::after { transform: scale(0.97, 1); }
.special .content li.scream01 a span.line::before { top: -90px; right: -225px; }

.special .content li.scream02 { top: 188px; left: 29px; }
.special .content li.scream02 a span.line { transform: rotate(21.5deg); }
.special .content li.scream02 a span.line::after { width: 144%; top: -56px; right: -260px; }
.special .content li.scream02 a:hover span.line::after { transform: scale(0.52, 1); }
.special .content li.scream02 a span.line::before { top: -65px; right: -130px; }

.special .content li.scream03 { top: 348px; left: 29px; }
.special .content li.scream03 a span.line { transform: rotate(0deg); }
.special .content li.scream03 a span.line::after { width: 144%; top: -25px; right: -274px; }
.special .content li.scream03 a:hover span.line::after { transform: scale(0.96, 1); }
.special .content li.scream03 a span.line::before { top: -35px; right: -260px; }

.special .content li.scream04 { top: 508px; left: 29px; }
.special .content li.scream04 a span.line { transform: rotate(-32.5deg); }
.special .content li.scream04 a span.line::after { width: 144%; top: 29px; right: -271px; }
.special .content li.scream04 a:hover span.line::after { transform: scale(0.32, 1); }
.special .content li.scream04 a span.line::before { top: 20px; right: -94px; }

.special .content li.scream05 { top: 668px; left: 29px; }
.special .content li.scream05 a span.line { transform: rotate(-25.5deg); }
.special .content li.scream05 a span.line::after { width: 144%; top: 17px; right: -274px; }
.special .content li.scream05 a:hover span.line::after { transform: scale(0.72, 1); }
.special .content li.scream05 a span.line::before { top: 8px; right: -199px; }

.special .content li.scream06 { top: 183px; right: 28px; }
.special .content li.scream06 a span.line { transform: rotate(-190deg); }
.special .content li.scream06 a span.line::after { width: 144%; top: 30px; right: -299px; }
.special .content li.scream06 a:hover span.line::after { transform: scale(0.83, 1); }
.special .content li.scream06 a span.line::before { top: 22px; right: -246px; }

.special .content li.scream07 { top: 343px; right: 28px; }
.special .content li.scream07 a span.line { transform: rotate(-170deg); }
.special .content li.scream07 a span.line::after { width: 144%; top: 3px; right: -311px; }
.special .content li.scream07 a:hover span.line::after { transform: scale(0.91, 1); }
.special .content li.scream07 a span.line::before { top: -5px; right: -263px; }

.special .content li.scream08 { top: 503px; right: 28px; }
.special .content li.scream08 a span.line { transform: rotate(-155deg); }
.special .content li.scream08 a span.line::after { width: 144%; top: -28px; right: -309px; }
.special .content li.scream08 a:hover span.line::after { transform: scale(0.43, 1); }
.special .content li.scream08 a span.line::before { top: -36px; right: -137px; }

.special .content li.scream09 { top: 663px; right: 28px; }
.special .content li.scream09 a span.line { transform: rotate(-138deg); }
.special .content li.scream09 a span.line::after { width: 144%; top: -72px; right: -284px; }
.special .content li.scream09 a:hover span.line::after { transform: scale(1, 1); }
.special .content li.scream09 a span.line::before { top: -80px; right: -278px; }

.special .content li.scream10 { top: 823px; right: 28px; }
.special .content li.scream10 a span.line { transform: rotate(-130deg); }
.special .content li.scream10 a span.line::after { width: 144%; top: -84px; right: -277px; }
.special .content li.scream10 a:hover span.line::after { transform: scale(1, 1); }
.special .content li.scream10 a span.line::before { top: -92px; right: -272px; }

/******************************************
 特設詳細
******************************************/
.detail .content {
	padding: 20px 0 50px;
}
.detail .content .paragraph {
	width: 920px;
	margin: 20px auto 0;
	padding: 20px 30px 40px; 
	background: #939599;
}
.detail .paragraph h3 { padding: 0; font-size: 30px; line-height: 100%; }
.detail .paragraph h3 .number { padding: 0 25px 0 0; font-size: 50px; line-height: 100%; vertical-align: sub; }
.detail .content .paragraph div {
	width: 920px;
	margin: 25px auto 0; 
	overflow: hidden;
}
.detail .content .paragraph div p:first-child { width: 450px; float: left; }
.detail .content .paragraph div p:first-child img { vertical-align: bottom; }
.detail .content .paragraph div p:first-child img:first-child { margin: 0 0 15px; }
.detail .content .paragraph div p:last-child {
	width: 450px;
	float: right;
	overflow: hidden;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 20px;
	line-height: 160%;
}
.detail .content .paragraph div p:last-child a { display: block; width: 100%; position: relative; margin: 40px 0 0; font-size: 16px; text-align: right; text-decoration: none; color: #000; }
.detail .content .paragraph div p:last-child a:after {
	display: block;
	content: ' ';
	position: absolute;
	top: 12px;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}
.detail .banner_wide {
	display: block;
	width: 821px;
	margin: 55px auto 0;
	font-size: 94%;
}
.detail .banner_wide span {
	display: block;
	padding: 0 0 5px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
