@charset "UTF-8";

/*/////////////////////////////////////////////////////////////
EncountMe

Copyright (C) KAYAC Inc. All Rights Reserved.
-----------------------------------------------------------
[Base] Formatting browser's default styles
	0. Zeroing out the margins and paddings
	1. HTML, Body, Anchor
	2. Headings, Paragraphs
	3. Lists
	4. Tables
	5. Forms
	6. Others
		6-1. Inline Elements
		6-2. Block-level Elements

[Layout] 
	0. Base Layout
	1. Header
	2. Content
	3. Footer

[Module] 
	1. Common Elements
	2. Intro
	3. How To Use
	4. Media
	5. Available
	6. OtherApp
	90. Others
	99. Clearfix
*/

/* //////////////////////////////////////////////////
[Base] 
////////////////////////////////////////////////// */

/* ------------------------------------------------------------
  0. Resetting default margin and padding
------------------------------------------------------------ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, th, td, form, fieldset, legend{
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
  1. HTML, Body, Anchor
------------------------------------------------------------ */
html{ overflow-y: scroll; } /* for mozilla: always display scrollbar */

body{
  background: #231d1d;
  color: #ffffff;
  font: 13px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  *font-size: 82%; /* for ie6/7 */
}

/* Font-size list (base: 13px)
63% = 10px
69% = 11px
75% = 12px
82% = 13px
88% = 14px
94% = 15px
100% = 16px
107% = 17px
113% = 18px
119% = 19px
125% = 20px
132% = 21px
138% = 22px
144% = 23px
150% = 24px
157% = 25px
163% = 26px
169% = 27px
175% = 28px
*/

a:link{
	color:#CE3459;
	text-decoration: none;
}
a:visited{
	color:#7B193D;
	text-decoration: none;
}
a:hover,
a:active {
	color:#CE3459;
	text-decoration: underline;
}

/* ------------------------------------------------------------
  2. Heading, Paragraph
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6{
  font-size: 100%;
  line-height: 1;
}

/* ------------------------------------------------------------
  3. List
------------------------------------------------------------ */
ul, ol{ list-style: none; }

/* ------------------------------------------------------------
  4. Table
------------------------------------------------------------ */
table{
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
  font-family: inherit;
}
caption, th, td{
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

/* ------------------------------------------------------------
  5. Form
------------------------------------------------------------ */
fieldset{ border: none; }
input, textarea, select, label{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: middle;
}
label{ cursor: pointer; }
textarea{ overflow: auto; }

/* ------------------------------------------------------------
	6. Others
------------------------------------------------------------ */

/*  6-1. Inline Elements
------------------------------------------------- */
img {
	border: none;
	vertical-align: bottom;
}
object {
	vertical-align: middle;
	outline: none;
}
em, strong {
	font-weight: bold;
	font-style: normal;
}
abbr, acronym {
	border: none;
	font-variant: normal;
}
q:before, q:after {
	content: '';
}
address, caption, cite, code, dfn, var {
	font-weight: normal;
	font-style: normal;
}
code {
	font-family: monospace;
}
sup {
	vertical-align: text-top;
}
sub {
	vertical-align: text-bottom;
}

/*  6-2. Block-level Elements
------------------------------------------------- */
hr {
  display: none;
}
pre {
	font-family: monospace;
}

/* //////////////////////////////////////////////////
[Layout] 
////////////////////////////////////////////////// */

/* ------------------------------------------------------------
  0. Container
------------------------------------------------------------ */
#container{
  width: 950px;
  margin: 0 auto;
  position: relative;
	background:url(../img/paw_main_bg.gif) repeat 0 0;
}

/* ------------------------------------------------------------
  1. Header
------------------------------------------------------------ */
#catpaw_head{
	position: relative;
	margin-bottom:20px;
	height:550px;
	background:url(../img/paw_top_bg.jpg) no-repeat 0 0;
}
#bmsp{
	position: absolute;
	top:111px;
	left:35px;
	width:95px;
	height:37px;
	text-indent:-9999px;
	background:url(../img/bmsp.gif) no-repeat 0 0;
}
#navLang{
	position: absolute;
	top:111px;
	left:800px;
	color:#503131;
	font-size: 13px
	font-weight:bold;
}
#navLang a{
	color:#893939;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}
#navLang a:hover{
	font-weight:bold;
	text-decoration: underline;
}
h1{
	position: absolute;
	top:180px;
	left:47px;
	width:353px;
	height:103px;
	text-indent:-9999px;
	background:url(../img/paw_title.gif) no-repeat 0 0;
}
h2{
	position: absolute;
	top:286px;
	left:47px;
	width:614px;
	height:54px;
	text-indent:-9999px;
	background:url(../img/paw_h2.png) no-repeat 0 0;
}
#cat_paw_cent{
	position:absolute;
	display:block;
	top:368px;
	left:47px;
	width:470px;
	font-size:13px;
	color:#503131;
}
#cat_paw_img{
	position: absolute;
	top:155px;
	left:718px;
	width:202px;
	height:301px;
	text-indent:-9999px;
	background:url(../img/paw_ph.jpg) no-repeat 0 0;
}

#navUtility{
	position: absolute;
	top:455px;
	left:57px;
}
#navUtility li{
	float:left;
	margin-right:10px;
}
#navUtility li:first-child{
	margin-right:0;
}
#download_btn{
	position: absolute;
	width:223px;
	height:56px;
	top:472px;
	left:684px;
	text-indent:-9999px;
}
#download_btn a{
	display:block;
	width:223px;
	height:56px;
	background:url(../img/btn_download.gif) no-repeat 0 0;
}
#download_btn a:hover{
	background:url(../img/btn_download_o.gif) no-repeat 0 0;
}


/* ------------------------------------------------------------
  2. Contents
------------------------------------------------------------ */
#content{
margin-left:50px;
}
#content h3#info01{
	width:459px;
	height:26px;
margin-bottom:20px;
	text-indent:-9999px;
	background:url(../img/how_to_use.gif) no-repeat 0 0;
}
#content li.fll{
float:left;
}
dl#step01,
dl#step03{
width:151px;
margin-right:30px;
}
dl#step02{
width:301px;
margin-right:30px;
}
dl#step04{
width:151px;
}

dl#step01 dt,
dl#step02 dt,
dl#step03 dt,
dl#step04 dt{
	width:81px;
	height:26px;
	margin-bottom:5px;
	text-indent:-9999px;
}

dl#step01 dt{background:url(../img/step1.gif) no-repeat 0 0;}
dl#step02 dt{background:url(../img/step2.gif) no-repeat 0 0;}
dl#step03 dt{background:url(../img/step3.gif) no-repeat 0 0;}
dl#step04 dt{background:url(../img/step4.gif) no-repeat 0 0;}

dl#step01 dd#step01_ph,
dl#step03 dd#step03_ph,
dl#step04 dd#step04_ph{
	width:151px;
	height:251px;
	margin-bottom:5px;
	text-indent:-9999px;
}
dl#step02 dd#step02_ph{
	width:301px;
	height:251px;
	margin-bottom:5px;
	text-indent:-9999px;
}
dl#step01 dd#step01_ph{background:url(../img/step1_ph.gif) no-repeat 0 0;}
dl#step02 dd#step02_ph{background:url(../img/step2_ph.gif) no-repeat 0 0;}
dl#step03 dd#step03_ph{background:url(../img/step3_ph.gif) no-repeat 0 0;}
dl#step04 dd#step04_ph{background:url(../img/step4_ph.gif) no-repeat 0 0;}

dl#step01 dd,
dl#step02 dd,
dl#step03 dd,
dl#step04 dd{
	color:#503131;
}

#catpaw_info{
	width:950px;
}
#left{
	width:463px;
	float:left;
}
#right{
	width:407px;
	float:left;
}
#info02{
	width:236px;
	height:26px;
	margin-top:30px;
	text-indent:-9999px;
	background:url(../img/color.gif) no-repeat 0 0;
}
#left ul{
	width:463px;
	margin-top:20px;
}
#left li{
width:155px;
height:190px;
float:left;
color:#503131;
text-align:center;
}
#black,
#brown{
margin-right:20px;
}
#info03{
	width:266px;
	height:26px;
	margin-top:30px;
	text-indent:-9999px;
	background:url(../img/setting.gif) no-repeat 0 0;
}
#right ul{
list-style-type: disc;
margin:20px 0 0 30px;
}
#right li{
color:#503131;
}
#right p{
margin:20px 0 0 15px;
color:#503131;
}
#info03_ph{
	width:402px;
	height:162px;
	text-indent:-9999px;
	background:url(../img/good_for_catpaw.gif) no-repeat 0 0;
}

#download_btn_bottom{
	width:392px;
	height:100px;
	text-indent:-9999px;
	margin:40px auto 60px auto;
}
#download_btn_bottom a{
	display:block;
	width:392px;
	height:100px;
	background:url(../img/btn_download_btm.gif) no-repeat 0 0;
}
#download_btn_bottom a:hover{
	background:url(../img/btn_download_btm_o.gif) no-repeat 0 0;
}
#catpaw_bottom{
	display:block;
	width:950px;
	height:32px;
	text-indent:-9999px;
	background:url(../img/paw_btm_bg.gif) no-repeat 0 0;
}
h5{
width:830px;
padding:8px ;
font-size:16px;
background-color:#5e2323;
}
#app_link{
margin-top:10px;
width:430px;
height:100px;
}
#app_link p{
width:200px;
height:100px;
float:left;
}
#app_link a{
color:#5e2323;
text-decoration:none;
}
#app_link a:hover{
color:#b44949;
text-decoration:underline;
}
#app_link dl{
float:left;
width:230px;
height:100px;
}
#app_link dt{
margin-left:10px;
font-weight:bold;
color:#5e2323;
}
#app_link dd{
margin-left:10px;
color:#5e2323;
}


/* ------------------------------------------------------------
	5. listApp
------------------------------------------------------------ */

#listApp h2 {
	margin-bottom:10px;
}
.blockListApp {
	overflow: hidden;
	font-size:14px;
	margin-top:30px;
	margin-bottom:30px;
}
.blockListApp li {
	position: relative;
	float: left;
	width: 200px;
	margin-left: 15px;
}
.blockListApp li:first-child {
  margin-left:0;
}
.blockListApp dl {
	position:relative;
}
.blockListApp dt {
	padding-top:110px;
	color:#00afd4;
	font-weight:bold;
}
.blockListApp dd.date {
	width:200px;
	font-size:12px;
	color:#5E2323;
}
.blockListApp dd.img {
	position:absolute;
	top:0;
}

.blockListApp dd.img a:hover img{
	filter: alpha(opacity=80);
	opacity: 0.8;
}
.blockListApp dd.qr {
	position:absolute;
	top:110px;
	right:0;
}


/* ------------------------------------------------------------
	3. Footer
------------------------------------------------------------ */
div#footer {
	margin: 50px 20px 20px 20px;
	color: #231d1d;
	font-size: 75%;
}
div#footer a {
	color: #231d1d;
	text-decoration: none;
}
div#footer a:hover {
	text-decoration: underline;
}

/* kayacProject
------------------------------------------------- */
#kayacProject dl {
width:905px;
}
#kayacProject dt {
	font-weight:bold;
	float: left;
	width: 140px;
}
#kayacProject dd {
	line-height:1.2;
	margin-left: 140px;
}
#kayacProject li {
	float: left;
	margin: 0 1em 5px 0;
	white-space: nowrap;
}
#kayacMedia dl {
width:905px;
}
#kayacMedia dt {
	font-weight:bold;
	float: left;
	width: 140px;
}
#kayacMedia dd {
	line-height:1.2;
	margin-left: 140px;
}
#kayacMedia li {
	float: left;
	margin: 0 1em 5px 0;
	white-space: nowrap;
}
.unitKayacLink dl {
	margin-bottom:10px;
}

/* copyright
------------------------------------------------- */
#copyright {
	text-align: center;
}
#copyright a {
	font-weight: bold;
}


/* ------------------------------------------------------------
	90. Others
------------------------------------------------------------ */

/* for Voice Browser */
.hidden {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* Noscript Message */
p#msgNoscript {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	padding: 5px 0;
	border-top: 1px solid #f00;
	border-bottom: 1px solid #f00;
	background: #fcc;
	color: #f00;
	line-height: 1.2;
	text-align: center;
	opacity: 0.7;
}

/* ------------------------------------------------------------
	99. Clearfix
------------------------------------------------------------ */
.group:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

.group {
	display: inline-block;
}