@charset "utf-8";

/* ========================================================================
    01. kill browser default
    02. base style
	03. module style
	04. clear style
------------------------------------------------------------------------ */

/* ========================================================================
    01. kill browser default
------------------------------------------------------------------------ */

/* 
    Structure
--------------------------------------------------*/
html{height:100%;}
body{
margin:0;
padding:0;
height:100%;
color:#333;
font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:68.75%;
line-height:1.5;
}

/* Heading Module
--------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6{
margin:0;
padding:0;
}

/* Text Module
--------------------------------------------------*/
p{
margin:0;
padding:0;
}

strong{
color:#b00;
font-weight:bold;
}

em{
font-style:normal;
font-weight:bold;
}

address{
margin:0;
padding:0;
font-style:normal;
}

/* Hypertext Module
--------------------------------------------------*/
a:link{
color:#167dcb;
text-decoration:underline;
}

a:visited{
color:#6c8293;
text-decoration:underline;
}

a:hover,
a:active,
a:focus{
color:#00b69a;
text-decoration:underline;
}

/* List Module
--------------------------------------------------*/
ul,
ol,
dl{
margin:0;
padding:0;
list-style:none;
}

ol{
list-style-type:decimal;
}

li,
dt,
dd{
margin:0;
padding:0;
}

li p,
li li,
li dt,
li dd,
li caption,
li th,
li td,
dd p,
dd li,
dd dt,
dd dd,
dd caption,
dd th,
dd td{
font-size:100%;
}

/* Table Module
--------------------------------------------------*/
table{
margin:0;
padding:0;
}

td p,
td li,
td dt,
td dd{
font-size:100%;
}

/* Image Module
--------------------------------------------------*/
img{
border:0;
vertical-align:bottom;
}

/* Form Module
--------------------------------------------------*/
form,
fieldset{
margin:0;
padding:0;
border:0;
}

legend{
display:none;
}

/* Horizontal Rule
--------------------------------------------------*/
hr{
display:none;
}

/* Get hasLayout
--------------------------------------------------*/
h2, div, ul, li, dl, dt, dd, p{
zoom:1;
}

ol li,
div.image-float p{
zoom:0;
}


/* ========================================================================

    02. base style
	
------------------------------------------------------------------------ */

/* 	str-header
--------------------------------------------------*/
#str-header{
margin:0 auto;
width:900px;
height:100px;
position:relative;
}
#str-header p{
position:absolute;
top:30px;
left:29px;
}
#str-header h1{
position:absolute;
top:12px;
right:23px;
}

/* 	mainVisual
--------------------------------------------------*/
#mainVisual01{
margin-top:-15px;
/* height:384px; */
/* background:url("/sp/recolo_ir5/images/bg_mainvisual01.jpg") no-repeat center top; */
height:400px;
background:url("/sp/recolo_ir5/images/bg_mainvisual01.jpg") no-repeat center top;
}
#mainVisual01 .inner{
margin:0 auto;
width:960px;
height:384px;
position:relative;
background:url("/sp/recolo_ir5/images/bg_animation.gif") no-repeat right 87px;
}
#mainVisual01 p{
position:absolute;
top:95px;
left:290px;
}
#mainVisual01 p.banner{
position:absolute;
top:273px;
left:290px;
}
#mainVisual02{
display:none;
height:253px;
background:url("/sp/recolo_ir5/images/bg_mainvisual02.jpg") no-repeat center top;
}
#mainVisual02 .inner{
margin:0 auto;
width:960px;
height:253px;
position:relative;
}
#mainVisual02 p{
position:absolute;
top:42px;
left:52px;
}

/* 	str-contents
--------------------------------------------------*/
#str-contents{
margin:0 auto;
width:900px;
text-align:left;
font-size:1.2em;
}

/* 	tabArea
--------------------------------------------------*/
#tabNavi{
width:915px;
margin-right:-15px;
}
#tabNavi li{
float:left;
margin-right:15px;
}
.tabPanel{
padding:23px 22px;
border:6px solid #f76305;
}

/* 	str-footer
--------------------------------------------------*/
#str-footer{
margin:0 auto;
width:900px;
}
#nav-top{
text-align:right;
*margin-right:7px;
}
.share-btn-01{
position:relative;
top:-5px;
}
.share-btn-01 li{
float:left;
padding-right:10px;
}
#copyright{
padding-top:15px;
}

/* ========================================================================

    03. module style
	
------------------------------------------------------------------------ */

/* 	Heading
--------------------------------------------------*/
.tabPanel h2,
.tabPanel h3{
margin:0 0 14px;
}

/* 	column
--------------------------------------------------*/
.columnL{
float:left;
display:inline;
}
.columnR{
float:right;
display:inline;
}
.column01 .columnL{
width:514px;
}
.column01 .columnR{
width:309px;
}
.column02 .columnL,
.column02 .columnR{
width:412px;
}
.column03 .columnL{
width:600px;
}
.column03 .columnR{
width:244px;
}
.column04 .columnL,
.column04 .columnR{
width:272px;
}
.column04 .columnL{
margin-right:14px;
}

/* 	box
--------------------------------------------------*/
.box01{
padding:0 13px 17px;
margin:0 0 15px;
background:url("/sp/recolo_ir5/images/bg_box01.gif") no-repeat left bottom;
}
.box01 h4{
margin:0 -13px;
}
.box01 iframe{
float:left;
}
.box01 p{
float:right;
width:143px;
}
.box01.small p{
width:275px;
}
.box02Wrapper{
background:url("/sp/recolo_ir5/images/bg_box02.gif") no-repeat left bottom;
margin:0 0 30px;
position:relative;
}
.box02{
width:246px!important;
min-height:140px;
height:auto !important;
height:140px;
padding:0 13px 120px;
_padding:0 13px 40px;
}
.box02 h4{
margin:0 -13px;
}
.box02 .imgBottom{
width:250px;
text-align:center;
position:absolute;
bottom:10px;
}
.box02 .imgBottom img{
position:relative;
right:2px;
}
.box03{
padding:0 13px 17px;
margin:0 0 15px;
background:url("/sp/recolo_ir5/images/bg_box01.gif") no-repeat left bottom;
}
.box03 h4{
margin:0 -13px;
}
.box03 .image{
margin-top:-15px!important;
position:relative;
z-index:2;
}

/* 	arrow
--------------------------------------------------*/
.txtNav{
text-align:right;
}
.txtNav span,
span.arw{
padding:4px 0 2px 24px;
background:url("/sp/recolo_ir5/images/arw01.gif") no-repeat left center;
zoom:1;
}

/* 	note
--------------------------------------------------*/
p.note{
margin:0 0 20px;
padding:0 0 0 1em;
text-indent:-1em;
}
ul.note{
margin:0 0 20px;
}
.note li{
padding:0 0 0 1em;
text-indent:-1em;
}
.note02{
font-size:0.8em;
}

/* 	table
--------------------------------------------------*/
.dataTable01{
width:100%;
margin-bottom:20px;
border-collapse:separate;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
}
.dataTable01 th,
.dataTable01 td{
border-collapse:separate;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
padding:5px 10px;
}
.dataTable01 th{
font-weight:normal;
vertical-align:top;
background-color:#fffddc;
}
.dataTable02{
width:100%;
margin:0 0 20px;
border-collapse:separate;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
font-size:1em;
line-height:1.2;
}
.dataTable02 th,
.dataTable02 td{
border-collapse:separate;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
padding:3px 10px;
white-space:nowrap;
}
.dataTable02 th{
font-weight:normal;
vertical-align:top;
text-align:left;
background-color:#ffffff;
}
.dataTable02 thead th{
text-align:center;
background-color:#fffddc;
}
.dataTable02 td{
text-align:center;
}

/* 	Image and Text
--------------------------------------------------*/
.imageBox,
.imageBox .txt{
overflow:hidden;
zoom:1;
}
.imageBox.imageR .image{
float:right;
display:inline;
margin:0 0 0 10px;
}

/* 	YouTube Play List
--------------------------------------------------*/
#ytvideo{
text-align:center;
padding-top:10px;
margin-bottom:30px;
}
#ytvideoList{
margin:0 0 15px 50px;
}
#ytvideoList li{
float:left;
width:229px;
padding:10px;
font-size:1.1em;
}
#ytvideoList li.currentvideo{
background-color:#fff6bc;
}

/* 	pagenation
--------------------------------------------------*/
#paginationWrapper{
position:relative;
overflow:hidden;
}
ol#pagination{
float:left;
position:relative;
left:50%;
padding:15px 0 0;
font-size:1.2em;
zoom:1;
}
ol#pagination li{
float:left;
position:relative;
left:-50%;
text-align:center;
list-style:none;
cursor:pointer;
margin:0 5px;
border:1px solid #ccc;
zoom:1;
}
ol#pagination li span{
padding:5px 10px;
}
ol#pagination li.next,
ol#pagination li.prev{
margin-top:1px;
width:23px;
height:23px;
border:none;
}
ol#pagination li.next span,
ol#pagination li.prev span{
display:block;
padding:0;
text-indent:-8000px;
}
ol#pagination li.next{
background:url("/sp/recolo_ir5/images/btn_next.gif") no-repeat 0 0;
}
ol#pagination li.prev{
background:url("/sp/recolo_ir5/images/btn_prev.gif") no-repeat 0 0;
}
ol#pagination li.current{
color:#f76305;
font-weight:bold;
background:#fdd6bd;
border-color:#fdd6bd;
}

/* 	modalbox
--------------------------------------------------*/
#glayLayer{
display:none;
position:fixed;
_position:absolute;
width:100%!important;
height:100%!important;
left:0;
top:0;
background-color:#000000;
filter:alpha(opacity=75);
opacity:0.75;
zoom:1;
}
#overLayer{
font-size:1.2em;
display:none;
width:700px;
max-height:460px;
overflow:auto;
overflow-x:hidden;
background:white;
padding:0 20px;
position:fixed;
top:50%;
left:50%;
}
#overLayer h3{
padding:10px 100px 0 0;
*font-size:1em;
}
#overLayer img.close{
position:absolute;
top:7px;
right:10px;
cursor:pointer;
}
* html #overLayer{
position:absolute;
}

/* btn
----------------------------------------------------------------- */
.column.column02 .btn{
margin:35px 0 55px;
}

/* ========================================================================

    04. clear style
	
------------------------------------------------------------------------ */

/* Adjustment
----------------------------------------------------------------- */
.align-C{text-align:center !important;}
.align-R{text-align:right !important;}
.align-L{text-align:left !important;}

.mb00{margin-bottom:0 !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}

.mt00{margin-top:0 !important;}
.mt05{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mr00{margin-right:0 !important;}
.ml00{margin-left:0 !important;}
.ml10{margin-left:10px !important;}

/* ----------------------------------------------------------------
    Clearfix
----------------------------------------------------------------- */
/* For modern browsers */
#tabNavi:before,
#tabNavi:after,
.column:before,
.column:after,
.box01:before,
.box01:after,
#ytvideoList:before,
#ytvideoList:after,
#paginationWrapper:before,
#paginationWrapper:after,
#pagination:before,
#pagination:after{
content:"";
display:block;
overflow:hidden;
}

#tabNavi:after,
.column:after,
.box01:after,
#ytvideoList:after,
#paginationWrapper:after,
#pagination:after{
clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
#tabNavi,
.colum,
.box01,
#ytvideoList,
#paginationWrapper,
#pagination{
zoom:1;
}