@charset "euc-jp";

body {
	font-family:'Hiragino Kaku Gothic Pro','MS PGothic';
	background:#FFF;
	text-align:center;
	color:#333333;
}

/* margin, padding */
body,margin,p,h1,h2,h3,h4,form,ul,li { margin:0;padding:0; }

li { list-style-type:none; }
li.disc { margin-left:40px; list-style-type:disc; }
li.none { margin-left:40px; list-style-type:none; }

/* font, text */
.F0 { font-size: 65%; line-height: 120%;}
.L0 { font-size: 65%; line-height: 160%}
.F1 {font-size: 79%; line-height: 120%;}
.L1 { font-size: 79%; line-height: 160%}
.F2 { font-size: 82%; line-height: 130%}
.L2 { font-size: 82%; line-height: 160%}
.F3 { font-size: 90%; line-height: 120%}
.L3 { font-size:90%; line-height: 160%}
.F4 { font-size: 110%; line-height: 110%}
.L4 { font-size: 110%; line-height: 140%}
.alignLeft { text-align:left; }
.alignRight { text-align:right; }
.alignCenter { text-align:center; }
.fontBold { font-weight: bold; }
.fontRed { font-color: #FF0000; }


/* a */
a{ color:#0099CC; text-decoration:none; }
a:visited { color:#0099CC; text-decoration:none; }
a:hover { color:#FF0084; text-decoration:underline; }


/* img */
img {border:0;}
.iconV { vertical-align:middle; margin-bottom:3px; }


/* table */
table { border-collapse:collapse; }
th { font-weight:lighter; text-align:left; }
td { text-align:left; }

.tablePrivacy th, .tablePrivacy td { padding: 5px 5px 10px 5px; vertical-align: top; }
.tablePrivacy th { font-weight: bold; }

.tableGray { width: 100%; }
.tableGray th, .tableGray td { padding: 5px; border: 1px #CCC solid; vertical-align: top; }
.tableGray th { background: #EFEFEF; font-weight: bold; }
.width230 { width: 230px; }
.width750 { width: 750px; }

/* float */
.floatLeft { float:left; }
.floatRight { float:right; }
.clearLeft { clear:left; }
.clearRight { clear:right; }
.clearBoth { clear:both; }

/* margin */
.marginTop5 { margin-top:5px; }
.marginTop10 { margin-top:10px; }
.marginTop15 { margin-top:15px; }
.marginTop20 { margin-top:20px; }
.marginTop30 { margin-top:30px; }
.marginBtm0 { margin-bottom:0; }
.marginBtm5 { margin-bottom:5px; }
.marginBtm10 { margin-bottom:10px; }
.marginBtm15 { margin-bottom:15px; }
.marginBtm20 { margin-bottom:20px; }
.marginLeft40 { margin-left: 40px; }
.marginRight40 { margin-right: 40px; }
.marginRight50 { margin-right: 50px; }

/* layout */
#container { margin:0 auto;width:980px; }
#main { float:left; width:655px; }
#side { float:right; margin-bottom:15px; width:280px; }


/* h2 */
h2 { margin-bottom:20px; padding-bottom:10px; height:16px; border-bottom:1px #D9D9D9 solid; }


/* header */
#header { margin-bottom:0; }
#header h1 { float:left; margin-top:15px; width:173px; height:55px; background:url(/images/corporate/header/logo.png); }
#header h1 a { display:block; width:173px; height:55px; }
/* tab */
#header ul.tab { float:right; margin:25px 0; height:35px; overflow:hidden;_zoom: 1;}
#header ul.tab li{ display:inline; float:left; list-style-type:none; height:35px; }
#header ul.tab li a { display:block; margin-left:40px; background:url(/images/corporate/header/tab_menu.png) no-repeat left top; height:35px; }
#header ul.tab li a span { display:none; }
.selected { background:url(images/corporate/header/tab_menu.png) no-repeat left top; cursor:default; }
/* tab1 */
#header ul.tab li a#tab1 { width:50px; background-position:0px 0px; }
#header ul.tab li a#tab1:hover { width:50px; background-position:0px -35px; }
#header ul.tab li a#tab1.selected { width:50px; background-position:0px -35px; }
/* tab2 */
#header ul.tab li a#tab2 { width:70px; background-position:-91px -0px; }
#header ul.tab li a#tab2:hover { width:70px; background-position:-91px -35px; }
#header ul.tab li a#tab2.selected { width:70px; background-position:-91px -35px; }
/* tab3 */
#header ul.tab li a#tab3 { width:70px; background-position:-201px 0px; }
#header ul.tab li a#tab3:hover { width:70px; background-position:-201px -35px; }
#header ul.tab li a#tab3.selected { width:70px; background-position:-201px -35px; }
/* tab4 */
#header ul.tab li a#tab4 { width:90px; background-position:-304px 0px; }
#header ul.tab li a#tab4:hover { width:90px; background-position:-304px -35px; }
#header ul.tab li a#tab4.selected { width:90px; background-position:-304px -35px; }
/* tab5 */
#header ul.tab li a#tab5 { width:75px; background-position:-426px 0px; }
#header ul.tab li a#tab5:hover { width:75px; background-position:-426px -35px; }
#header ul.tab li a#tab5.selected { width:75px; background-position:-426px -35px;}
/* ta6 */
#header ul.tab li a#tab6 { width:105px; background-position:-541px 0px; }
#header ul.tab li a#tab6:hover { width:105px; background-position:-541px -35px; }
#header ul.tab li a#tab6.selected { width:105px; background-position:-541px -35px;}


/* topPage */
p#topScreen { margin-bottom:25px; width:980px; height:300px; background:url(/images/corporate/top/screen.jpg); }
#topMedia, #topAppli, #topNews { margin-bottom:25px; }
#topMedia ul, #topAppli ul { margin-bottom:15px; }
#topMedia ul li, #topAppli ul li { float:left; width:145px; margin-right:25px; }
#topMedia ul li.last, #topAppli ul li.last { margin-right:0; }
#topNews ul li { text-align:left; margin-bottom:25px; }
.topSideBanner { margin-bottom:5px; }
.topFootterBanner { margin-top:40px; }


/* news */
#news h3 { margin-bottom:25px; text-align:left; letter-spacing:1px; }
#news ul li { margin-bottom:20px; text-align:left; }
#news ul li img { margin:0 5px; }
#news div.gototop { margin-bottom:40px; padding-bottom:5px; border-bottom:1px #333 dotted; }
#news div.gototop a { color:#333; text-decoration:none; }
#news div.gototop a:hover { color:#333; text-decoration:underline; }
#newsMenu { margin-bottom:28px; color:#333; }
#newsMenu a { color:#999; text-decoration:none; }
#newsMenu a:hover { color:#999; text-decoration:underline; }

#newsItem h3 { margin-bottom:30px; text-align:left; }
#newsItem h4 { margin:30px 0 15px 0; text-align:left; }
#newsItem p { margin-bottom:15px; text-align:left; }
#newsItem ul li { margin-bottom:10px; }


/* service */
p#serviceScreen { margin-bottom:28px; width:980px; height:200px; background:url(/images/corporate/service/screen.png); }
#service { margin:25px auto 40px auto; text-align:left; }
/* tab */
#service ul.tab{ margin:0 auto 30px auto; width:977px; }
#service ul.tab li{ list-style-type:none; float:left; }
#service ul.tab li a{ display:block; background:url(/images/corporate/service/tab_menu.png) no-repeat; width:244px; height:35px; }
#service ul.tab li a.current{ background:url(/images/corporate/service/tab_menu.png) no-repeat; cursor:default; }
/* tab1 */
#service ul.tab li a#tab1 { background-position:0px -35px; }
#service ul.tab li a#tab1:hover,
#service ul.tab li a#tab1.current { background-position:0px 0px; }
/* tab2 */
#service ul.tab li a#tab2 { background-position:-244px -35px; }
#service ul.tab li a#tab2:hover,
#service ul.tab li a#tab2.current { background-position:-244px 0px; }
/* tab3 */
#service ul.tab li a#tab3 { background-position:-488px -35px; }
#service ul.tab li a#tab3:hover,
#service ul.tab li a#tab3.current { background-position:-488px 0px; }
/* tab4 */
#service ul.tab li a#tab4 { width:245px; background-position:-732px -35px; }
#service ul.tab li a#tab4:hover,
#service ul.tab li a#tab4.current { background-position:-732px 0px; }
#service ul.tab li a span { display:none; }
/* pannel */
#service ul.pannel { clear:both; margin:0 auto; text-align:center;}
#service ul.pannel li { width:945px; }

.serviceItems { margin-bottom:60px; }
.serviceItems div.smapho { float:left; width:205px; text-align:center;  }
.serviceItemDetail { float:right; width:690px; text-align:left;  }
.serviceItemDetail h3 { height:16px; }
.serviceItemDetail p { margin:25px 0; }
.serviceItemDetail div.link { float:left; }
.serviceItemDetail div.logo { float:right; width:200px; text-align:center; }

/* company */
#concept, #vision, #profile, #map { margin-bottom:50px; }
p#companyScreen { margin-bottom:25px; width:980px; height:300px; background:url(/images/corporate/company/screen.png); }
#concept p,#vision p { margin-bottom:20px; text-align:left; }
p#conceptWord { margin:25px 0;width:193px; height:25px; background:url(/images/corporate/company/concept.png); }
p#visionWord { margin:25px 0;width:400px; height:25px; background:url(/images/corporate/company/vision.png); }
#concept img.president { float:right; margin-right:70px; }
#profile table th { vertical-align:top; }
#profile table th, #profile table td { padding:0 30px 10px 0; }
#map img {  }


/* inquiry */
#inquiryAd, #inquiryRecruit, #inquiryPrivacy { margin-bottom:20px; text-align:left; border:1px #CCC solid; }
#inquiry h3 { margin:15px; height:14px; font-weight:lighter; font-size:100%; }
#inquiryAd p, #inquiryRecruit p, #inquiryPrivacy p { padding:15px; border-top:1px #CCC dotted; text-align:left; }
#inquiry p.rule { padding:0 15px; text-align:left; }
#inquiryAdForm { margin-top:20px; }
#inquiryAdForm table { width:100%; }
#inquiryAdForm table th, #inquiryAdForm table td { padding:10px; border:1px #CCCCCC solid; }
#inquiryAdForm table th { width:150px; background:#F6F6F6; text-align:right; }
#inquiryAdForm table td { width:770px; }
#inquiryAdForm table td input.textform { width:330px; height:20px;  }
#inquiryAdForm table td textarea { width:670px; height:140px;  }
#inquiry div#privacy, #inquiry div.privacyAgree { margin:10px 0; padding:10px; border:1px #CCCCCC solid; background:#FAFAFA; }
#inquiry div#privacy .privacyRule { margin-bottom:10px; }
#inquiry div#privacy .privacyRule span { color:#009900; font-weight:bold; }
#inquiry div#privacy .privacyHandling { float:left; width:500px; }
#inquiry div#privacy .privacyHandling span { float:left; width:500px; font-weight:bold; }
#inquiry div#privacy .privacyInquiry { float:right; width:360px; }
#inquiry div#privacy .privacyInquiry img { float:right; margin-left:10px; }
.inquiryFormBtn { margin-top:20px; }
#inquiryFormRule { margin:20px 0 0 0; text-align:left; }
#inquiryFormRule li { margin-left:20px; list-style-type:disc; }

/* privacy */
#privacy { text-align:left; }
#privacy ul.data { margin-top:25px; text-align:right; }
#privacy p { margin-top:15px; }
#privacy p.detail { margin:15px; }
#privacy h3 { margin-top:40px; font-size:110%; }
#privacy ol li { list-style-type: decimal; }
#privacyInquiry ol li { list-style-type: decimal; }


/* footer */
#footer { background:url(/images/corporate/footer/bg_footer.png) no-repeat center top; }
#footerMenu { margin:0 auto 25px auto; padding-top: 200px; }
#footer p.copyright { margin:0 auto 25px auto; width:305px; height:11px; background:url(/images/corporate/footer/copyright.png?20121229) no-repeat center center; }
#footerMenu a, #footerMenu a:hover, #footerMenu a:visited { color:#868686; }
#footerMenu a.selected { color:#333333; }


/* title */
#topMedia h2 { background:url(/images/corporate/top/h2_media.png) no-repeat left top; }
#topAppli h2 { background:url(/images/corporate/top/h2_appli.png) no-repeat left top; }
#topRecruit h2 { background:url(/images/corporate/top/h2_recruit.png) no-repeat left top; }
#topNews h2 { background:url(/images/corporate/top/h2_news.png) no-repeat left top; }
#concept h2 { background:url(/images/corporate/company/h2_concept.png) no-repeat left top; }
#vision h2 { background:url(/images/corporate/company/h2_vision.png) no-repeat left top; }
#profile h2 { background:url(/images/corporate/company/h2_company.png) no-repeat left top; }
#map h2 { background:url(/images/corporate/company/h2_map.png) no-repeat left top; }
#inquiry h2 { background:url(/images/corporate/inquiry/h2_inquiry.png) no-repeat left top; }
#inquiryAd h3 { background:url(/images/corporate/inquiry/h3_ad.png) no-repeat left top; }
#inquiryRecruit h3 { background:url(/images/corporate/inquiry/h3_recruit.png) no-repeat left top; }
#inquiryPrivacy h3 { background:url(/images/corporate/inquiry/h3_privacy.png) no-repeat left top; }
#news h2 { background:url(/images/corporate/news/h2_news.png) no-repeat left top; }

.serviceItemDetail h3.warau { background:url(/images/corporate/service/h3_warau.png) no-repeat left top; }
.serviceItemDetail h3.fifty { background:url(/images/corporate/service/h3_5050.png) no-repeat left top; }
.serviceItemDetail h3.poimon { background:url(/images/corporate/service/h3_poimon.png) no-repeat left top; }
.serviceItemDetail h3.warauSmapho { background:url(/images/corporate/service/h3_warauSmapho.png) no-repeat left top; }
.serviceItemDetail h3.poimonSmapho { background:url(/images/corporate/service/h3_poimonSmapho.png) no-repeat left top; }
.serviceItemDetail h3.warauMobile { background:url(/images/corporate/service/h3_warauMobile.png) no-repeat left top; }
.serviceItemDetail h3.fiftyMobile { background:url(/images/corporate/service/h3_5050mobile.png) no-repeat left top; }
.serviceItemDetail h3.gasen { background:url(/images/corporate/service/h3_gasen.png) no-repeat left top; }
.serviceItemDetail h3.gakunavi { background:url(/images/corporate/service/h3_gakunavi.png) no-repeat left top; }
.serviceItemDetail h3.siteguide { background:url(/images/corporate/service/h3_siteguide.png) no-repeat left top; }
.serviceItemDetail h3.kensyo { background:url(/images/corporate/service/h3_kensyo.png) no-repeat left top; }
.serviceItemDetail h3.kisekae { background:url(/images/corporate/service/h3_kisekae.png) no-repeat left top; }
.serviceItemDetail h3.janken { background:url(/images/corporate/service/h3_janken.png) no-repeat left top; }
.serviceItemDetail h3.poimonApps { background:url(/images/corporate/service/h3_poimonApps.png) no-repeat left top; }
.serviceItemDetail h3.zoo { background:url(/images/corporate/service/h3_zoo.png) no-repeat left top; }
#privacy h2 { background:url(/images/corporate/privacy/h2_privacy.png) no-repeat left top; }
#privacyInquiry h2 { background:url(/images/corporate/privacy/h2_privacyInquiry.png) no-repeat left top; }
#aboutPrivacy h2 { background:url(/images/corporate/privacy/h2_aboutPrivacy.png) no-repeat left top; }

/* displaynone */
.serviceItemDetail h3 span,
p#serviceScreen span,
#inquiry h3 span,
p#visionWord span,
p#conceptWord span,
#footer p.copyright span,
h2 span,
p#topScreen span,
#header h1 span
{ display:none; }


/* topScreen */
#topScreen { margin-bottom:25px; width: 100%; height: 300px; border: 1px solid #D9D9D9; position: relative; }
#topScreen p { display:none; }
.screenAnime  { height: 100px; width: 105px; overflow: hidden; position: absolute; top: 190px; right: 20px; }

.screenAnime img { margin-top: 0; -webkit-animation: walk 9s steps(18,end) ; animation: walk 9s steps(18,end) ;}
@keyframes walk {
  100% { margin-top: -1800px;}
}

.GrayCircle { width: 30px; height: 30px; background-color: #E5E5E4; border-radius: 50px; position: absolute; box-shadow: 0 2px 2px #BBB;  z-index: 3; }

.circle1 { top: 250px; right: 93px;
  -webkit-animation: circle1 9s linear  2.2s; animation: circle1 9s linear  2.2s; opacity: 0; }
@keyframes circle1 {
  0% { top: 250px; right: 93px; opacity: 1; }
  8% { top: 250px; right: 93px; opacity: 1; }
  35% { top: 250px; right: 930px; opacity: 1; }
  70% { top: 250px; right: 930px; opacity: 1; }
  100% { top: 250px; right: 930px; opacity: 0; }
}

.circle2 { top: 250px; right: 890px;
  -webkit-animation: circle2 9s linear  4.8s; animation: circle2 9s linear  4.8s; opacity: 0; }
@keyframes circle2 {
  50% { top: 250px; right: 890px; opacity: 1; }
  60% { top: 250px; right: 890px; opacity: 1; }
  80% { top: 250px; right: 890px; opacity: 0; }
}

.circle3 { top: 250px; right: 850px;
  -webkit-animation: circle3 9s linear  5s; animation: circle3 9s linear  5s; opacity: 0; }
@keyframes circle3 {
  55% { top: 250px; right: 850px; opacity: 1; }
  60% { top: 250px; right: 850px; opacity: 1; }
  90% { top: 250px; right: 850px; opacity: 0; }
}

.circle4 { top: 210px; right: 930px;
  -webkit-animation: circle4 9s linear  4.8s; animation: circle4 9s linear  4.8s; opacity: 0; }
@keyframes circle4 {
  50% { top: 210px; right: 930px; opacity: 1; }
  60% { top: 210px; right: 930px; opacity: 1; }
  80% { top: 210px; right: 930px; opacity: 0; }
}

.circle5 { top: 210px; right: 890px;
  -webkit-animation: circle5 9s linear  5s; animation: circle5 9s linear  5s; opacity: 0; }
@keyframes circle5 {
  55% { top: 210px; right: 890px; opacity: 1; }
  60% { top: 210px; right: 890px; opacity: 1; }
  90% { top: 210px; right: 890px; opacity: 0; }
}

.circle6 { top: 170px; right: 930px;
  -webkit-animation: circle6 9s linear  5s; animation: circle6 9s linear  5s; opacity: 0; }
@keyframes circle6 {
  55% { top: 170px; right: 930px; opacity: 1; }
  60% { top: 170px; right: 930px; opacity: 1; }
  90% { top: 170px; right: 930px; opacity: 0; }
}

.white { height: 113px; width: 113px ; position: absolute; top: 170px; right: 847px; }
.white img { -webkit-animation: end 9s linear -2s; animation: end 9s linear -2s; opacity: 0; }
@keyframes end {
  0% { top: 170px; right: 847px; opacity: 0; }
  10% { top: 170px; right: 847px; opacity: 1; }
  100% { top: 170px; right: 847px; opacity: 1; }
}

.end { height: 113px; width: 113px ; position: absolute; top: 170px; right: 847px; }

/* #topRecruit 2016.01 */
.topRecruitBoxL {width:274px; border:1px solid #ccc; padding:2px 2px 10px 2px; margin-bottom:15px;}
.topRecruitBoxS {width:274px; border:1px solid #ccc; padding:2px; margin-bottom:15px;}
.recruitLink {font-size:9pt; margin-top:7px;}
.recruitLink:hover { font-size:9pt; margin-top:7px; color:#FF0084; text-decoration:underline; }

.triangle {margin:2px 0 0 5px; border:6px solid transparent; border-left:6px solid #0099CC; width:0; height:0;}
.recruitLink:hover .triangle {margin:2px 0 0 5px; border:6px solid transparent; border-left:6px solid #FF0084; width:0; height:0;}
.topRecruitBoxL h3,.topRecruitBoxS h3{font-size:11pt; font-weight:bold; letter-spacing:2px; color:#555555; margin:7px 0 5px 5px;}
.intern {border-top:1px dotted #CCC; padding-top:7px;}
.hurry {font-size:9px; color:#FFF; padding:1px 3px 1px 5px; background-color:#FF0084; margin:7px 0 0 5px;}