@charset "utf-8";

#main {margin:0; position:relative;}

#body {width:100%; position:relative;}
#body > header {position:relative;}
#body > header > .image {display:block; height:0; position:relative; padding:56.25% 0 0; background:#f2f2f2; text-decoration:none; overflow:hidden;}
#body > header > .image > video {
	width:auto; min-width:500%; height:auto; min-height:500%; position:absolute; top:50%; left:50%; 
	transform:translate(-50%,-50%) scale(0.2);}
#body > header > .image > video.pc {display:block;}
#body > header > .image > video.sp {display:none;}
#body > header > h1 {
	width:280px; height:0; position:absolute; left:0; right:0; top:0; bottom:190px; margin:auto; padding:280px 0 0; 
	background:url(images/header_title_real.png) center center no-repeat; pointer-events:none; overflow:hidden; transition:opacity 0.3s ease-in-out;}
#body > header > .image:hover + h1 {opacity:0.7;}
	
	#who-we-are {width:940px; position:relative; z-index:2; margin:-190px auto 0; background:#fff; padding:20px 30px 40px;}
	#who-we-are > h1 {}
	#who-we-are > h1 > a {display:block; height:80px; background:url(images/who-we-are_title.png) center center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
	#who-we-are > ul {margin-top:30px;}
	#who-we-are > ul:after {display:block; clear:both; height:0; content:"";}
	#who-we-are > ul > li{float:left;}
	#who-we-are > ul > li > a{display:block; font-size:15px; text-decoration:none; text-align:center; transition:all 0.3s ease-in-out 0s;}
	#who-we-are > ul > li > a:hover{opacity:0.7;}
	#who-we-are > ul > li > a i{display:block; line-height:1.1;}
	#who-we-are > ul > li > a i:after{display:inline-block; content:""; width:14px; height:14px; background:url(images/link_arrow_01.png) no-repeat; margin-left:10px;}
	#who-we-are > ul > li.future{width:460px;}
	#who-we-are > ul > li.future > a{padding:260px 20px 0; background:url(images/who-we-are_message_image_01.jpg) no-repeat;}
	#who-we-are > ul > li.future > a > div{background:#fff; padding:0 20px;}
	#who-we-are > ul > li.future > a > div > h2{height:140px; background:url(images/who-we-are_message_title.png) center center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden; border-bottom:1px #e6e6e6 solid;}
	#who-we-are > ul > li.future > a > div > i{font-size:15px; color:#000000; padding:20px 0;}
	#who-we-are > ul > li.message{width:460px; margin-left:20px;}
	#who-we-are > ul > li.message > a{padding:200px 20px 0; background:url(images/who-we-are_message_image_02.jpg) no-repeat;}
	#who-we-are > ul > li.message > a > i{background:#f8f8f8; padding:20px 0;}
	#who-we-are > ul > li.outline{width:200px; margin:40px 0 0 40px;}
	#who-we-are > ul > li.outline > a{padding:100px 0 0; background:url(images/who-we-are_message_image_03.gif) no-repeat;}
	#who-we-are > ul > li.outline > a > i{background:#f8f8f8; padding:20px 0;}
	#who-we-are > ul > li.outline > a.sub{padding:0 0 0; text-align:right; background:none;}
	#who-we-are > ul > li.outline > a.sub > i{display:inline-block; border-radius:20px; padding:5px 20px; font-size:12px; margin-top:10px;}
	#who-we-are > ul > li.outline > a.sub > i:after{display:inline-block; content:""; width:3px; height:6px; background:url(images/link_arrow_02.png) no-repeat; margin-left:5px;}
	#who-we-are > ul > li.history{width:200px; margin:40px 0 0 20px;}
	#who-we-are > ul > li.history > a{padding:100px 0 0; background:url(images/who-we-are_message_image_04.gif) no-repeat;}
	#who-we-are > ul > li.history > a > i{background:#f8f8f8; padding:20px 0;}
	
	#what-we-do {}
	#what-we-do > h1 {}
	#what-we-do > h1 > a {display:block; height:70px; background:url(images/what-we-do_title.png) center center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
	#what-we-do > ul {width:100%; margin-top:35px;}
	#what-we-do > ul:after {display:block; clear:both; height:0; content:"";}
	#what-we-do > ul > li {float:left; width:20%; margin:0; position:relative;}
	#what-we-do > ul > li > a {display:block; text-align:center;}
	#what-we-do > ul > li > a:after{display:block; content:""; width:100%; height:100%; background:#ffffff; position:absolute; top:0; left:0; z-index:2; opacity:0; transition: opacity 0.3s ease-in-out 0s;}
	#what-we-do > ul > li > a:hover:after{opacity:0.3;}
	#what-we-do > ul > li > a > img{display:block; width:100%; height:auto;}
	#what-we-do > ul > li > a:hover > img{opacity:1;}
	#what-we-do > ul > li > a > i{display:inline-block; width:195px; height:80px; text-align:center; text-indent:110%; white-space:nowrap; overflow:hidden; margin-top:-40px; position:relative; z-index:2;}
	#what-we-do > ul > li.digital-media > a > i {background:#f8f8f8 url(images/what-we-do_digital-media_title.png) center no-repeat;}
	#what-we-do > ul > li.magazine      > a > i {background:#f8f8f8 url(images/what-we-do_magazine_title.png) center no-repeat;}
	#what-we-do > ul > li.book          > a > i {background:#f8f8f8 url(images/what-we-do_book_title.png) center no-repeat;}
	#what-we-do > ul > li.promotion     > a > i {background:#f8f8f8 url(images/what-we-do_promotion_title.png) center no-repeat;}
	#what-we-do > ul > li.data          > a > i {background:#f8f8f8 url(images/what-we-do_data_title.png) center no-repeat;}
	
	
	#press-room {width:940px; margin:40px auto 60px; position:relative;}
	#press-room:after {display:block; clear:both; height:0; content:"";}
	#press-room > h1 {border-bottom:1px solid #e6e6e6;}
	#press-room > h1 > a {display:block; height:60px; background:url(images/press-room_title.png) top center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
	#press-room > #news{float:left; width:580px; padding-right:30px; margin-top:15px;}
	#press-room > #news > ul {padding:5px 0 20px;}
	#press-room > #news > ul > li {padding:9px 0; border-bottom:none; letter-spacing:-0.4em;}
	#press-room > #news > ul > li > a {display:block; margin:-9px 0; padding:9px 0; text-decoration:none; letter-spacing:-0.4em;}
	#press-room > #news > ul > li time, 
	#press-room > #news > ul > li i, 
	#press-room > #news > ul > li h2 {
		display:inline-block; *display:inline; *zoom:1; vertical-align:top; letter-spacing:normal; 
		transition:color 0.3s ease-in-out 0s; -webkit-transition:color 0.3s ease-in-out 0s;}
	#press-room > #news > ul > li time {width:80px; margin-right:5px; color:#999999; font-size:12px; font-weight:bold; vertical-align:middle;}
	#press-room > #news > ul > li i {
		width:50px; margin-right:10px; padding:2px 5px; border-radius:5px; background:#000000; 
		color:#ffffff; font-size:10px; text-align:center; vertical-align:middle;}
	#press-room > #news > ul > li h2 {width:425px; color:#000000; font-size:14px; font-weight:normal;}
	#press-room > #news > ul > li > a:hover time {}
	#press-room > #news > ul > li > a:hover i {}
	#press-room > #news > ul > li > a:hover h2 {color:#999999;}
	#press-room > #news > ul > li.format-link  h2:after {
		display:inline-block; *display:inline; *zoom:1; content:""; width:15px; height:1em; min-height:22px; position:relative; top:-3px; margin-left:8px; 
		background:url(../common/images/icon_blank.gif) 0 center no-repeat; vertical-align:middle;}
	#press-room > #news > ul > li.format-aside h2:after {
		display:inline-block; *display:inline; *zoom:1; content:""; width:22px; height:1em; min-height:22px; position:relative; top:-3px; margin-left:8px; 
		background:url(../common/images/icon_pdf.gif) 0 center no-repeat; vertical-align:middle;}
	#press-room > #news > ul > li.not-found {padding:30px 0; border:none; font-size:16px; font-weight:bold;}
	#press-room > #special{float:right; width:299px; border-left:1px #e6e6e6 solid; padding-left:30px; margin-top:25px}
	#press-room > #special > a{display:block; text-decoration:none;}
	#press-room > #special > a > figure{margin:0 0 -40px 0;}
	#press-room > #special > a > div{width:230px; background:#f8f8f8; padding:15px; margin:0 auto; position:relative; z-index:2;}
	#press-room > #special > a > div > b{display:block; width:100%; height:20px; background:url(images/what-we-do_special_title.png) center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden; margin-bottom:5px; transition:all 0.3s ease-in-out 0s;}
	#press-room > #special > a:hover b{opacity:0.5;}
	#press-room > #special > a > div > h2{font-size:15px; font-weight:bold; text-align:center;}
	#press-room .more {display:inline-block; background:#f8f8f8; border-radius:20px; padding:5px 20px; font-size:12px; text-decoration:none;}
	#press-room .pos1{position:absolute; top:0; right:0;}
	#press-room .pos2{position:absolute; bottom:0; right:360px;}
	
	#recruit {width:940px; margin:0 auto 60px; position:relative;}
	#recruit > a{display:block;}
	#recruit > a:after{display:block; content:""; width:100%; height:100%; background:#ffffff; position:absolute; top:0; left:0; z-index:2; opacity:0; transition: opacity 0.3s ease-in-out 0s;}
	#recruit > a:hover:after{opacity:0.3;}
	#recruit > a:hover img{opacity:1;}
	#recruit dl{}
	#recruit dl:after {display:block; clear:both; height:0; content:"";}
	#recruit dl > dt{float:left; clear:both; width:470px;}
	#recruit dl > dd{height:300px; padding:0 0 0 470px; background:#f8f8f8; text-align:center;}
	#recruit dl > dd > h1{width:460px; height:240px; margin:0 5px; background:url(images/recruit_title.png) center 100px no-repeat; border-bottom:1px #e6e6e6 solid; text-indent:110%; white-space:nowrap; overflow:hidden;}
	#recruit dl > dd > i{display:inline-block; font-size:15px; margin-top:17px;}
	#recruit dl > dd > i:after{display:inline-block; content:""; width:14px; height:14px; background:url(images/link_arrow_01.png) no-repeat; margin-left:10px;}


@media screen and (max-width:960px) {

#main {margin:0; position:relative;}

#body {width:100%; position:relative;}
#body > header {}
#body > header > .image {padding:100% 0 0;}
#body > header > .image > video {}
#body > header > .image > video.pc {display:none;}
#body > header > .image > video.sp {display:block;}
#body > header > h1 {width:55%; bottom:15%; padding:55% 0 0; background-size:contain;}

	#who-we-are {width:auto; margin:-15% 20px 0; background:#fff; padding:0;}
	#who-we-are > h1 {}
	#who-we-are > h1 > a {display:block; width:100%; height:auto; background:url(images/sp/who-we-are_title.png) bottom center no-repeat; background-size:contain; padding-top:28%;}
	#who-we-are > ul {margin-top:0}
	#who-we-are > ul > li{float:none;}
	#who-we-are > ul > li > a{font-size:12px;}
	#who-we-are > ul > li > a i:after{display:inline-block; content:""; width:7px; height:12px; background:url(images/sp/link_arrow_01.png) no-repeat; background-size:contain; margin-left:10px;}
	#who-we-are > ul > li.future{width:100%;}
	#who-we-are > ul > li.future > a{padding:56% 20px 0; background:url(images/who-we-are_message_image_01.jpg) no-repeat; background-size:contain;}
	#who-we-are > ul > li.future > a > div{background:#fff; padding:0 0;}
	#who-we-are > ul > li.future > a > div > h2{width:100%; height:auto; background:url(images/sp/who-we-are_message_title.png) bottom center no-repeat; background-size:contain; padding-top:31%;}
	#who-we-are > ul > li.future > a > div > i{font-size:12px; color:#000000; padding:20px 0;}
	#who-we-are > ul > li.message{width:100%; margin-left:0; margin-top:10px;}
	#who-we-are > ul > li.message > a{padding:45% 0 0; background:url(images/who-we-are_message_image_02.jpg) no-repeat; background-size:contain;}
	#who-we-are > ul > li.message > a > i{background:#f8f8f8; padding:20px 0; margin:0 20px;}
	#who-we-are > ul > li.outline{float:left; width:48%; margin:10px 0 0 0;}
	#who-we-are > ul > li.outline > a{padding:60% 0 0 20px; background:url(images/who-we-are_message_image_03.gif) no-repeat; background-size:contain;}
	#who-we-are > ul > li.outline > a > i{background:#f8f8f8; padding:20px 0;}
	#who-we-are > ul > li.outline > a.sub{padding:0 0 0; text-align:right; background:none;}
	#who-we-are > ul > li.outline > a.sub > i{display:inline-block; border-radius:20px; padding:5px 20px; font-size:9px; margin-top:10px;}
	#who-we-are > ul > li.outline > a.sub > i:after{display:inline-block; content:""; width:3px; height:6px; background:url(images/link_arrow_02.png) no-repeat; margin-left:5px;}
	#who-we-are > ul > li.history{float:right; width:48%; margin:10px 0 0 0;}
	#who-we-are > ul > li.history > a{padding:60% 20px 0 0; background:url(images/who-we-are_message_image_04.gif) no-repeat; background-size:contain;}
	#who-we-are > ul > li.history > a > i{background:#f8f8f8; padding:20px 0;}
	
	#what-we-do {}
	#what-we-do > h1 {}
	#what-we-do > h1 > a {display:block; height:auto; background:url(images/sp/what-we-do_title.png) bottom center no-repeat; background-size:contain; padding-top:26%;}
	#what-we-do > ul {width:100%; margin-top:0;}
	#what-we-do > ul > li {float:left; width:50%; margin:0; position:relative;}
	#what-we-do > ul > li.data {margin:0 25%;}
	#what-we-do > ul > li > a > i{display:inline-block; width:90%; height:auto; text-align:center; margin:-15% 0 20px; position:relative; z-index:2; padding-top:25%;}
	#what-we-do > ul > li.digital-media > a > i{background:#f8f8f8 url(images/sp/what-we-do_digital-media_title.png) center center no-repeat; background-size:contain;}
	#what-we-do > ul > li.magazine > a > i{background:#f8f8f8 url(images/sp/what-we-do_magazine_title.png) center center no-repeat; background-size:contain; }
	#what-we-do > ul > li.book > a > i{background:#f8f8f8 url(images/sp/what-we-do_book_title.png) center center no-repeat; background-size:contain; padding-top:25%;}
	#what-we-do > ul > li.promotion > a > i{background:#f8f8f8 url(images/sp/what-we-do_promotion_title.png) center center no-repeat; background-size:contain;}
	#what-we-do > ul > li.data > a > i{background:#f8f8f8 url(images/sp/what-we-do_data_title.png) center center no-repeat; background-size:contain;}
	
	#press-room {width:auto; margin:0 20px 30px;}
	#press-room:after {display:block; clear:both; height:0; content:"";}
	#press-room > h1 {border-bottom:1px solid #e6e6e6;}
	#press-room > h1 > a {display:block; height:auto; background:url(images/sp/press-room_title.png) bottom center no-repeat; background-size:contain; padding-top:22%;}
	#press-room > #news{float:none; width:auto; padding-right:0; margin-top:0;}
	#press-room > #news > ul > li > a {
	min-height:30px; margin:-10px 0; padding:10px 50px 10px 0; background:url(../common/images/sp/icon_arrow_right.png) right center no-repeat;
	-webkit-background-size:50px; background-size:50px;}
	#press-room > #news > ul > li h2 {display:block; width:auto; margin-top:0.5em;}
	
	#press-room > #special{float:none; width:auto; border-left:none; padding-left:0; margin-top:0;}
	#press-room > #special > a{display:block; text-decoration:none;}
	#press-room > #special > a > figure{margin:0 0 -12% 0;}
	#press-room > #special > a > figure > img{width:100%; height:auto;}
	#press-room > #special > a > div{width:auto; background:#f8f8f8; padding:15px; margin:0 20px; position:relative; z-index:2;}
	#press-room > #special > a > div > b{display:block; width:100%; height:10px; background:url(images/sp/what-we-do_special_title.png) bottom center no-repeat; background-size:contain;}
	#press-room > #special > a:hover b{opacity:0.5;}
	#press-room > #special > a > div > h2{font-size:14px; font-weight:bold; text-align:center;}
	#press-room .more {display:block; background:#f8f8f8; border-radius:20px; padding:10px 20px; font-size:12px; text-decoration:none; text-align:center;}
	#press-room .pos1{display:none;}
	#press-room .pos2{position:static; margin-bottom:30px;}

	#recruit {width:auto; margin:0 20px 30px; position:relative;}
	#recruit > a{display:block;}
	#recruit > a:after{display:none;}

	#recruit dl > dt{float:none; clear:both; width:100%;}
	#recruit dl > dt > img{width:100%; height:auto;}
	#recruit dl > dd{height:auto; padding:0 10px 0 10px; background:#f8f8f8; text-align:center;}
	#recruit dl > dd > h1{width:100%; height:auto; margin:0 0; background:url(images/sp/recruit_title.png) bottom center no-repeat; background-size:contain; padding-top:48%;}
	#recruit dl > dd > i{display:inline-block; font-size:12px; margin:17px 0;}
	#recruit dl > dd > i:after{display:inline-block; content:""; width:7px; height:12px; background:url(images/sp/link_arrow_01.png) no-repeat; background-size:contain; margin-left:10px;}


}

@media print {

	#who-we-are.slideshow > h1 {display:none;}
	#who-we-are.slideshow .image {display:block;}
	#who-we-are.slideshow > .slider {display:none;}
	
	#what-we-do > h1, 
	#special    > h1, 
	#press-room > h1 {
		font-size:18px; font-weight:normal; text-align:center; 
		font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","游明朝","YuMincho","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;}
	
	#what-we-do > h1 > a, 
	#special    > h1 > a, 
	#press-room > h1 > a {height:auto; padding:0 0 10px; background:none; text-indent:0; white-space:normal; text-decoration:none;}

}