@charset "utf-8";

/*==============================
parts.css

CreateDate：2015-05-21
LastUpDate：2015-05-21
==============================*/

/*===================
タグ設定
===================*/
a {
	color: inherit;
	text-decoration: none;
}


/*===================
クラス設定
===================*/
.gold {color: #b49759;}
.bg_gold {
	background-color: #b49759!important;
	color: #fff;
}

.hover-gold:hover {
	background-color: #b49759!important;
	color: #fff;
}

.FilmSector {background-color: #4563b8;}
.RadioSector {background-color: #db424d;}
.MarketingSector {background-color: #2cb633;}
.InteractiveSector {background-color: #d8a825;}
.BlackSector{background-color:#666;}

.FilmSector,
.RadioSector,
.MarketingSector,
.InteractiveSector,
.bg_gold,
.BlackSector {color: #fff;}

.points div.FilmSector {background-image: url('/lib/img/common/film-icon.png');box-shadow: 0px 3px #223d8c;}
.points div.RadioSector {background-image: url('/lib/img/common/radio-icon.png');box-shadow: 0px 3px #8c2028;}
.points div.MarketingSector {background-image: url('/lib/img/common/ME-icon.png');box-shadow: 0px 3px #58830f;}
.points div.InteractiveSector {background-image: url('/lib/img/common/interactive-icon.png');box-shadow: 0px 3px #8c7018;}

.points div.FilmSector,
.points div.RadioSector,
.points div.MarketingSector,
.points div.InteractiveSector {
	background-repeat:no-repeat;
	background-position: top 50% left 2em;
}


.entrance1 {background-color: #000;}
.entrance2 {background-color: #ff1f83;}
.entrance3 {background-color: #ffd325;}
.entrance4 {background-color: #2581ff;}
.entrance5 {background-color: #b038b4;}
.entrance6 {background-color: #39fc25;}
.entrance7 {background-color: #493dc0;}


.bdr-top5 {border-top: 5px solid #ccc !important;}
.bdr-right5 {border-right: 5px solid #ccc !important;}
.bdr-bottom5 {border-bottom: 5px solid #ccc !important;}
.bdr-left5 {border-left: 5px solid #ccc !important;}

.waku-top1 {
	border-top: 5px solid #ccc !important;
	border-left: 5px solid #ccc !important;
	border-right: 5px solid #ccc !important;
}

.waku-bottom1 {
	border-left: 5px solid #ccc !important;
	border-right: 5px solid #ccc !important;
	border-bottom: 5px solid #ccc !important;
}
.waku-btm-left {
	border-left: 5px solid #ccc !important;
	border-bottom: 5px solid #ccc !important;
}
.waku-btm-right {
	border-right: 5px solid #ccc !important;
	border-bottom: 5px solid #ccc !important;
}

b {font-weight: bold;}
.bold {font-weight: bold;}


sup {
	font-size: .8em;
	vertical-align: top;
}

ol.ol {
	padding-left: 2em;
	list-style-type: decimal;
}

.text-box .txtindent{
	padding-left:1em;
	text-indent:-1em;
}

.text-box .txtindent2{
	padding-left:2em;
	text-indent:-2em;
}

.text-box .txtindent15{
	padding-left:1.5em;
	text-indent:-1.5em;
}

.text-box .txtindent3{
	padding-left:3em;
	text-indent:-3em;
}

.text-box .txtindent4{
	padding-left:4em;
	text-indent:-4em;
}

.text-box .mg_top{margin-top:2em;}
.text-box .noboder{border:none!important;}

/*===================
個別設定
===================*/
.mrg-bottom0,
.mb0 {margin-bottom: 0 !important;}
.mb30 {margin-bottom: 30px !important;}

.red a {color:#f01b1b !important; text-decoration: underline !important;}
.red a:hover { text-decoration: none !important;}


/*2016年4月設置　個別クラス設定*/

/*単体設定*/

/*テキストカラー*/
.red{color:#f01b1b !important;}
.FI {color:#4563b8 !important;}
.RA {color:#db424d !important;}
.ME {color:#2cb633 !important;}
.IN {color:#d8a825 !important;}
.EN {color:#7e0046 !important;}
.T-red {color:#ff1f83 !important;}
.T-yellow {color:#ffd325 !important;}
.T-yellow2 {color:#dca216 !important;}
.T-blue {color:#2581ff !important;}
.T-purple {color:#b038b4 !important;}
.T-green {color:#39fc25 !important;}
.T-blue2 {color:#493dc0 !important;}
.T-yellow3 {color:#d8a825 !important;}

/*テキストサイズ*/
.fs05 {font-size: .8em !important;}
.fs10 {font-size: 10px !important;}
.fs12 {font-size: 12px !important;}
.fs14 {font-size: 14px !important;}
.fs16 {font-size: 16px !important;}
.fs18 {font-size: 18px !important;}
.fs20 {font-size: 20px !important;}

/*テキストデコレーション*/
.tdu {text-decoration: underline !important;}

/*テキスト位置*/
.a-t {vertical-align: top !important;}
.a-m {vertical-align: middle !important;}
.a-b {vertical-align: bottom !important;}
.a-r {text-align: right !important;}
.a-l {text-align: left !important;}
.a-c {text-align: center !important;}

/*余白外*/
.m0 {margin: 0 !important;}
.m10{margin: 10px !important;}
.mt30{margin-top: 30px !important;}
.mt32{margin-top: 32px !important;}
.mt64{margin-top: 64px !important;}
.mt96{margin-top: 96px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}

/*余白内*/
.p20 {padding: 20px !important;}
.p30 {padding: 30px !important;}
.pl20 {padding-left: 20px !important;}

.fixed-link {
	padding-top: 119px;
	margin-top: -119px;
}

/*display*/
.dn {display: none !important;}

/*float*/

.float-wrap {overflow: hidden !important;}
.float-left {float: left !important;}
.float-right {float: right !important;}

/*大見出し*/
.head01 {
	font-size: 24px !important;
	padding: 5px 0 !important;
	border: none !important;
	margin: 0 0 30px !important	;
	font-weight: bold !important;
	color: #b49759 !important;
}

/*中見出し*/
.head02 {
	font-size: 20px !important;
	border-left: 4px solid #b49759 !important;
	border-bottom: 1px solid #eee !important;
	padding: 5px 5px 5px 10px !important;
	font-weight: bold !important;
	margin: 0 0 25px !important;
}

/*小見出し*/
.head03 {
	font-size: 18px !important;
	font-weight: bold !important;
	margin: 0 0 25px !important;
}

/*ボタン設定*/
.sample-page .btn {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.sample-page .btn::before,
.sample-page .btn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.sample-page .btn,
.sample-page .btn::before,
.sample-page .btn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*アニメーション設定*/
/*1.背景カラーをふわっと変更する*/
.anime01 {
	background-color: #333;
	color: #fff;
}
.anime01:hover {
	background-color: #b49759;
}

/*2. 背景・ボーダー・文字カラーをふわっと変更する*/
.anime02 {
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}
.anime02:hover {
	background-color: #fff;
	border-color: #b49759;
	color: #b49759;
}

/*3. 背景カラーが左右に分かれていく*/
.anime03 {
	position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}
.anime03:hover {
	background-color: #fff;
	border-color: #b49759;
	color: #b49759;
}
.anime03::before,
.anime03::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #333;
}
.anime03::before {
	right: 0;
}
.anime03::after {
	left: 0;
}
.anime03:hover::before,
.anime03:hover::after {
	width: 0;
	background-color: #b49759;
}

/*4. 背景カラーが上下に分かれていく*/
.anime04 {
	position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}
.anime04:hover {
	background-color: #fff;
	border-color: #b49759;
	color: #b49759;
}
.anime04::before,
.anime04::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #333;
}
.anime04::before {
	top: 0;
}
.anime04::after {
	bottom: 0;
}
.anime04:hover::before,
.anime04:hover::after {
	height: 0;
	background-color: #b49759;
}

/*5. 文字間隔を広げる*/
.anime05 {
	background-color: #333;
	color: #fff;
}
.anime05:hover {
	letter-spacing: 5px;
}

/*6. 背景を透過させ、ホバー時にうっすらと背景色を出す*/
.anime06 {
	background-color: transparent;
	border: 2px solid #fff;
	color: #fff;
	line-height: 50px;
}
.anime06:hover {
	background-color: rgba(255, 255, 255, .2);
}

/*7. ボーダースタイルを変更する*/
.anime07 {
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
}
.anime07:hover {
	border-style: dashed;
}

/*8. 内側にブロックを表示する*/
.anime08 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 48px;
}
.anime08::after {
	top: 4px;
	left: 4px;
	width: 188px;
	height: 42px;
	border: 2px solid #333;
	opacity: 0;
}
.anime08:hover::after {
	opacity: 1;
}

/*9. 上から背景がするっと降りてくる*/
.anime09 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}
.anime09:hover {
	color: #fff;
}
.anime09::after {
	top: -100%;
	width: 100%;
	height: 100%;
}
.anime09:hover::after {
	top: 0;
	background-color: #333;
}

/*10. 左上から背景がするっと降りてくる*/
.anime10 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}
.anime10:hover {
	color: #fff;
}
.anime10::after {
	top: -100%;
	left: -100%;
	width: 100%;
	height: 100%;
}
.anime10:hover::after {
	top: 0;
	left: 0;
	background-color: #333;
}

/*11. 奥から背景をふわっと表示させる #1*/
.anime11 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}
.anime11:hover {
	color: #fff;
}
.anime11::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.anime11:hover::after {
	background: #333;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/*12. 奥から背景をふわっと表示させる #2*/
.anime12 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}
.anime12:hover {
	color: #fff;
}
.anime12::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.anime12:hover::after {
	-webkit-transform: scale(2) rotate(180deg);
	transform: scale(2) rotate(180deg);
	background: #333;
}

/*13. 上からパタッと要素が落ちてくる*/
.anime13 {
	position: relative;
	z-index: 2;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.anime13:hover {
	color: #fff;
}
.anime13::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	opacity: 0;
}
.anime13:hover::after {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 1;
}

/*14. 要素がパタッと開く*/
.anime14 {
	position: relative;
	z-index: 2;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.anime14:hover {
	color: #333;
}
.anime14::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}
.anime14:hover::after {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

/*15. キューブ状にクルッと回転する*/
.anime15 {
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.anime15 span {
	display: block;
	position: absolute;
	width: 200px;
	height: 60px;
	border: 2px solid #333;
	text-align: center;
	line-height: 56px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
.anime15 span:nth-child(1) {
	background-color: #333;
	color: #fff;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.anime15 span:nth-child(2) {
	background-color: #fff;
	color: #333;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.anime15:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.anime15:hover span:nth-child(2) {
	background-color: #333;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

/*16. CSSのみでボタンデザイン #1*/
.anime16 {
	position: relative;
	background-color: #1abc9c;
	border-radius: 4px;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #0e8c73;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.anime16:hover {
	background-color: #31c8aa;
	box-shadow: 0 3px 0 #23a188;
}
.anime16:active {
	top: 3px;
	box-shadow: none;
}

/*17. CSSのみでボタンデザイン #2*/
.anime17 {
	position: relative;
	background-color: #f7d034;
	border-radius: 4px;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #f7ba59;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.anime17:hover {
	top: -4px;
	box-shadow: 0 7px 0 #f7ba59;
}
.anime17:active {
	top: 3px;
	box-shadow: none;
}

/*18. CSSのみでボタンデザイン #3*/
.anime18 {
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
	background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.anime18:hover {
	border:1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
.anime18:active {
	background: #1a92c2;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

/*19. CSSのみでボタンデザイン #4*/
.anime19 {
	position: relative;
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0px 1px 0px #f56778;
}
.anime19,
.anime19:hover {
	border-bottom: 4px solid #cb5462;
	background-color: #f56778;
	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
	background-image: linear-gradient(to bottom, #f997b0, #f56778);
	box-shadow: inset 1px 1px 0 #fbc1d0;
}
.anime19::before,
.anime19::after {
	bottom: -1px;
	left: -1px;
	width: 200px;
	height: 50px;
	border: 1px solid #ee8090;
	border-bottom: 1px solid #b84d5a;
	border-radius: 4px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
}
.anime19::before {
	height: 48px;
	bottom: -4px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}
.anime19:hover {
	background: #f56778;
	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
	background-image: linear-gradient(to bottom, #f56778, #f997b0);
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
.anime19:active {
	bottom: -4px;
	margin-bottom: 4px;
	border: none;
	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.anime19:active::before,
.anime19:active::after {
	border: none;
	box-shadow: none;
}

/*20. CSSのみでボタンデザイン #5*/
.anime20 {
	background-color: rgba(255, 255, 255, .2);
	border-radius: 4px;
	color: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
}
.anime20:hover {
	background-color: rgba(255, 255, 255, .3);
}



@media(max-width:769px){

	.fixed-link {
		padding-top: 0;
		margin-top: 0;
	}

	/*大見出し*/
	.head01 {font-size: 20px !important;}

	/*中見出し*/
	.head02 {font-size: 18px !important;}

	/*小見出し*/
	.head03 {font-size: 16px !important;}
}