/*基本構造*/

html {
	height:100%;
	margin: 0;
	padding: 0;
}

body { 
	height:100%;
	margin: 0;
	padding: 0;
	position: relative;
	min-width: 800px;  /*wide_boxの横幅と一致*/
	min-height: 600px;  /*wide_boxの縦幅と一致*/
	background: #337E99;
	overflow: hidden;
}

header {
	width: 100%;
	height: 50px;
	background:#060;
	position: absolute;  /*body要素に対して絶対配置*/
	top: 0%;  /*画面上端に配置*/
	left: 0%;  /*左端に配置*/
}

footer {
	width: 100%;
	height: 50px;
	background:#060;
	position: absolute;  /*body要素に対して絶対配置*/
	bottom: 0%;  /*画面下端に配置*/
	left: 0%;  /*左端に配置*/
}

footer p {
	margin:15px 20px;
	color:#FFF;
	font-size:11px;
	font-weight: normal;
	text-align:right;
}


/*アニメーションするライン*/

#header_line {
	width: 1px;
	height: 20px;
	position: absolute;  /*body要素に対して絶対配置*/
	top: 50px;
	left: 0%;  /*左端に配置*/
}

#footer_line {
	width: 1px;
	height: 20px;
	position: absolute;  /*body要素に対して絶対配置*/
	bottom: 50px;
	left: 100%;  /*右端に配置*/
}

.line_01 {background:#999933;}
.line_02 {background:#cc9999;}
.line_03 {background:#6699cc;}
.line_04 {background:#cccc33;}
.line_05 {background:#cc9933;}
.line_06 {background:#cc99cc;}
.line_07 {background:#cc6666;}

/*リンク、ヘッダー*/

a {
    color:#06C;
}

a:visited {
    color: #551a8b;
}

a:hover {
	color:#09C;
}

h1 {
	font-size:25px;
	font-weight: bold;
	color:#FFF;
	margin: 15px 0 0 20px;
	float:left;
}

h2 {
	font-weight: normal;
	font-size:12px;
	color:#FFF;
	padding:28px 0px 0px 20px;
	float:left;
}

/*bodyに対して上下左右位置が中央に配置されるボックス*/

#wide_box {
	width: 800px;
	height: 600px;
	margin: -300px 0 0 -400px;  /*縦横の半分をネガティブマージンでずらす*/
	position: absolute;  /*body要素に対して絶対配置*/
	top: 50%;  /*上端を中央に*/
	left: 50%;  /*左端を中央に*/
	background: #339999;
}

/*wide_box内子ボックス*/

#wrapper {
	width: 800px;
	height: 600px;
	display: block;
	margin:0;
	position:relative;
	background: #339999 url(../img/bg_wrapper.png) no-repeat;
}


/*トップページのナビボタン*/

#box01 {
	background: url(../img/btn_top_nigaoe.png) no-repeat;
}

#box02 {
	background: url(../img/btn_top_dtp.png) no-repeat;
}

#box03 {
	background:url(../img/btn_top_illust.png) no-repeat;
}

#box04 {
	background: url(../img/btn_top_web.png) no-repeat;
}

#box05 {
	background: url(../img/btn_top_media.png) no-repeat;
}

#box06 {
	background: url(../img/btn_top_about.png) no-repeat;
}

#box07 {
	width: 130px;
	height: 130px;
	display: block;
	position: absolute;
	left:335px;	
	top:235px;
}

#box07 a {
	display:block;
	width: 130px;
	height: 130px;
}

#ini_img {
	background: #339999;
/*	background: #339999 url(../img/ani_taiko_01.png) no-repeat;*/
}

/*トップページnavi*/

.box {
	width: 130px;
	height: 130px;
	display: block;
	position: absolute;
	left:335px;	
	top:235px;
}

.box a{
	display:block;
	width:130px;
	height:130px;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}


/*トップページEMイラストロゴ（右下）*/

.logo01 {
	display:block;
	width:186px;
	height:44px;
	background-image:url(../img/logo_em01.png);
	background-repeat: no-repeat;
}

#logo01_top {
	position: absolute;
	top:-1000px;
	left:620px;	
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}

#logo01_cont {
	position: absolute;
	top:530px;
	left:600px;	
}

#logo01_cont a {
	display:block;
	width:186px;
	height:44px;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}

/*トップページEM文字ロゴ（中央）*/

#logo02 {
	display:block;
	width:300px;
	height:60px;
	background-image:url(../img/logo_em02.png);
	background-repeat: no-repeat;
	position: absolute;
	left:250px;	
	top:270px;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
	opacity:0;
}

/***コンテンツページ用***/

/*コンテンツページ：body内を横切るキャラクター*/
#chara {
	width:103px;
	height:33px;
	position: absolute;
	bottom:70px;
	left:-600px;
}

#chara a {
	width:103px;
	height:33px;
	display:block;
	z-index: 1;
}

#charaimg {
	width:103px;
	height:33px;
}

/*コンテンツページロゴ*/
#ttl_logo {
	width: 311px;
	height: 34px;
	display: block;
	overflow: hidden;
	position: absolute;
	top:30px;
	left:30px;
	z-index: 1;
	background-color:#339999;
	opacity:0;
}

/*コンテンツページ用ナビゲーション外枠*/

#nav_cont_wrap {
	width: 740px;
	height: 80px;
	display: block;
	overflow: hidden;
	position: absolute;
	top:80px;
	left:30px;
	z-index: 1;
	background-color:#339999;
}

#nav_cont {
	width: 740px;
	height: 80px;
	display: block;
	position: relative;
	overflow: hidden;
	background-color:#339999;
}

/*コンテンツページ用ナビゲーション*/

/*大きなナビゲーションボタン*/
.nav_cont_b {
	width: 80px;
	height: 80px;
	display: block;
	float:left;
}

.nav_cont_b a {
	width:80px;
	height:80px;
	display:block;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}

#nav_cont_01_b {
	position: absolute;
	top:0px;
	left:0px;
}

#nav_cont_01_b a{
	background-image:url(../img/btn_nigaoe_b.png);
	background-repeat:no-repeat;
}

#nav_cont_02_b {
	position: absolute;
	top:0px;
	left:138px;
}

#nav_cont_02_b a{
	background-image:url(../img/btn_dtp_b.png);
	background-repeat:no-repeat;
}

#nav_cont_03_b {
	position: absolute;
	top:0px;
	left:266px;
}

#nav_cont_03_b a{
	background-image:url(../img/btn_illust_b.png);
	background-repeat:no-repeat;
}

#nav_cont_04_b {
	position: absolute;
	top:0px;
	left:394px;
}

#nav_cont_04_b a{
	background-image:url(../img/btn_web_b.png);
	background-repeat:no-repeat;
}

#nav_cont_05_b {
	position: absolute;
	top:0px;
	left:522px;
}

#nav_cont_05_b a{
	background-image:url(../img/btn_media_b.png);
	background-repeat:no-repeat;
}

#nav_cont_06_b {
	position: absolute;
	top:0px;
	left:650px;
}

#nav_cont_06_b a{
	background-image:url(../img/btn_about_b.png);
	background-repeat:no-repeat;
}


/*小さなナビゲーションボタン*/
.nav_cont_s {
	width: 60px;
	height: 60px;
	display: block;
	float:left;
}

.nav_cont_s a {
	width:60px;
	height:60px;
	display:block;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}

#nav_cont_01_s {
	position: absolute;
	top:20px;
	left:0px;
}

#nav_cont_01_s a{
	background-image:url(../img/btn_nigaoe_s.png);
	background-repeat:no-repeat;
}

#nav_cont_02_s {
	position: absolute;
	top:20px;
	left:138px;
}

#nav_cont_02_s a{
	background-image:url(../img/btn_dtp_s.png);
	background-repeat:no-repeat;
}

#nav_cont_03_s {
	position: absolute;
	top:20px;
	left:266px;
}

#nav_cont_03_s a{
	background-image:url(../img/btn_illust_s.png);
	background-repeat:no-repeat;
}

#nav_cont_04_s {
	position: absolute;
	top:20px;
	left:394px;
}

#nav_cont_04_s a{
	background-image:url(../img/btn_web_s.png);
	background-repeat:no-repeat;
}

#nav_cont_05_s {
	position: absolute;
	top:20px;
	left:522px;
}

#nav_cont_05_s a{
	background-image:url(../img/btn_media_s.png);
	background-repeat:no-repeat;
}

#nav_cont_06_s {
	position: absolute;
	top:20px;
	left:650px;
}

#nav_cont_06_s a{
	background-image:url(../img/btn_about_s.png);
	background-repeat:no-repeat;
}




/*左右スクロールボタン共通*/

.btn_lr {
	width: 30px;
	height: 260px;
	display: block;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}


/*左スクロールボタン*/

#btn_l a {
	display:block;
	width:30px;
	height:260px;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
	background-image: url(../img/btn_l.png);
	background-repeat: no-repeat;
	position: absolute;
	left:0px;	
	top:190px;
}

#btn_l a:hover {
	opacity:0.8;
}

/*右スクロールボタン*/

#btn_r a {
	display:block;
	width:30px;
	height:260px;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
	background-image: url(../img/btn_r.png);
	background-repeat: no-repeat;
	position: absolute;
	left:770px;	
	top:190px;
}

#btn_r a:hover {
	opacity:0.8;
}

/*スクロール親ボックス*/

#cont_wrap{
	width: 740px;
	height: 260px;
	display: block;
	position: absolute;
	overflow: hidden;
	left:30px;	
	top:190px;
	z-index: 1;
	background-color:#FFF;
}

/*スクロール親ボックス内でスクロールするための全体を入れるボックス*/
/*１スクロール用*/
#cont_wrap_scrl01{
	width: 740px;
	height: 260px;
	display: block;
	background-color:#FFF;
}
/*２スクロール用*/
#cont_wrap_scrl02{
	width: 1480px;
	height: 260px;
	display: block;
	background-color:#FFF;
}
/*３スクロール用*/
#cont_wrap_scrl03{
	width: 2220px;
	height: 260px;
	display: block;
	background-color:#FFF;
}

/*スクロール子ボックス*/

#cont_m{
	width: 740px;
	height: 260px;
	display: block;
	background-color:#FFF;
	float:left;
}

/*スクロール子ボックス内・上段（about以外）*/

#cont_m_u{
	width: 740px;
	height: 130px;
	display: block;
	background-color:#FFF;
 display: flex;
 justify-content: space-around;
}

/*スクロール子ボックス内・下段（about以外）*/

#cont_m_d{
	width: 740px;
	height: 130px;
	display: block;
	background-color:#FFF;
 display: flex;
 justify-content: space-around;
}

/*スクロール子ボックス内左右余白*/

.cont_s_b {
	width: 20px;
	height: 130px;
	display: block;
	margin: 0px;
	float:left;
	background-color:#FFF;
}

/*スクロール子ボックス内ボックス（about用）*/

.cont_a {
	width: 350px;
	height: 230px;
	display: block;
	margin: 15px 10px;
	float:left;
}

.overflow {
 overflow: scroll;
}

.a_title {
	font-size:17px;
	font-weight:bold;
	color:#369;
}

.a_subt {
	font-size:13px;
	font-weight:bold;
	color:#369;
}

.a_detail {
	font-size:13px;
	line-height:1.2em;
}

li.a_detail {
	list-style-type:disc;
	list-style-position:inside;
	padding-left:1.5em;
	text-indent:-1.4em;
}

/*スクロール子ボックス内サムネイル共通（about以外）*/

.cont_s {
	width: 100px;
	height: 100px;
	display: block;
	margin: 15px 20px;
	float:left;
}

.cont_s a{
	display:block;
	width:100px;
	height:100px;
}

#cont_s001, #cont_s002, #cont_s003, #cont_s004, #cont_s005, #cont_s006,
#cont_s007, #cont_s008, #cont_s009, #cont_s010, #cont_s011, #cont_s012,
#cont_s013, #cont_s014, #cont_s015, #cont_s016, #cont_s017, #cont_s018,
#cont_s019, #cont_s020, #cont_s021, #cont_s022, #cont_s023, #cont_s024
{
	width: 100px;
	height: 100px;
}


/*サムネイルクリックで表示させるディスプレイボックス*/
#cont_d {
	width: 400px;
	height: 500px;
	display: block;
	position: absolute;
	left:200px;	
	top:50px;
	background-color:#337E99;
	background-image:url(../img/bg_display.png);
	background-repeat:no-repeat;
	opacity:0;
	z-index: 0;
}

#cont_img{
	width: 340px;
	height: 340px;
	display: block;
	background-color:#ccc;
	margin: 30px 30px 0px 30px;
}

#cont_text{
	width: 340px;
	height: 80px;
	display: block;
	background-color:#FFF;
	margin: 0px 30px;
}

#cont_text p{
	width:320px;
	height:60px;
	font-size:15px;
	color:#030;
	padding:10px;
	text-align:center;
}

#cont_btn{
	width: 100px;
	height: 25px;
	display: block;
	margin: 15px 0px 0px 280px;
	background-image:url(../img/btn_close.png);
	background-repeat: no-repeat;
}

#cont_btn a{
	width: 100px;
	height: 25px;
	display: block;
	overflow: hidden;
	font-size:12px;
	text-align:center;
	text-indent: -9999px;
}


/*文字修飾*/
.bold {
	font-weight:bold;
}


/*　clearfix指定　*/
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix{
	display: inline-block;
} 
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}
/* End Hack */