@charset "utf-8";

/* --- Reset Start --- */

/* default property reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,th,td,p {margin:0px; padding:0px;}
table {border-collapse:collapse; border-spacing:0px;}
fieldset,img {border:0px;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:14px; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0px;}
   
body * {line-height:1.6em;}

/* --- Reset End --- */

body {
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  margin:0px;
  padding:0px;
  background:url(../images/bg.gif);
  font-size:14px;
}

h2 {
  font-size:16px;
  font-weight:bold;
  padding-left:0.8em;
  border-left:#F90 5px solid;
  margin:0 0 10px;
}

.pdd_t15 {
  padding-top:15px;
}

.pdd_t20 {
  padding-top:20px;
}

.pdd_b5 {
  padding-bottom:5px;
}

.pdd_b25 {
  padding-bottom:25px;
}

.pdd_tb30 {
  padding:30px 0;
}

a {
  color:#22649D;
  text-decoration:none;
}

a:visited {
  color:#22649D;
  text-decoration:none;
}

a:hover {
  color:#FF6C00;
  text-decoration:underline;
}

a:hover .hover_img{
  opacity: 0.7;
}

.center {
  text-align:center;
}

#wrapper {
  width:750px;
  margin:0 auto;
  text-align:left;
  position:relative;
}

#container {
  background: url(../images/container_bg.gif) repeat-y #D6FAF8;
}

#main {
  padding:0 40px;
}

#content {
  background-color:#FFF;
  padding:0 20px;
  zoom: 1;
}

#header_box {
  width:100%;
  background: url(../images/header_bg.gif) repeat-x;
  height:103px;
}

#header {
  width:750px;
  margin:0 auto;
  position:relative;
}

#top_header{width: 100%;}

.return{float: left; margin: 10px 0 0; background: #FFF;border-radius: 15px;}
.return_sub{position: absolute; top:50px; right:0; background: #FFF;border-radius: 15px; font-size: 12px;}
.return a,.return_sub a{display: block; color:#009E96; border: 2px solid #009E96; border-radius: 15px; padding: 0 8px;}
.return a:hover,.return_sub a:hover{opacity: 0.7; transition: 0.2s; text-decoration: none; border: 2px solid #009E96;}


#hdr_menu {
  float:right;
  background:url(../images/head_nav_bg.gif) no-repeat right top;
  height:40px;
  width:420px;
}

#hdr_menu ul {
  width:430px;
  overflow:hidden;
}

li#hdr_aboutus a {
  position: absolute;
  display:block;
  width:175px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_aboutus_off.gif) no-repeat;
  right:116px;
  top:0;
  overflow:hidden;
}

li#hdr_aboutus a:hover,
li#hdr_aboutus a:focus {
  position: absolute;
  display:block;
  width:175px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_aboutus_on.gif) no-repeat;
  right:116px;
  top:0;
}

li#hdr_hogosha a {
  position: absolute;
  display:block;
  width:105px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_hogosha_off.gif) no-repeat;
  right:8px;
  top:0;
}

li#hdr_hogosha a:hover,
li#hdr_hogosha a:focus {
  position: absolute;
  display:block;
  width:105px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_hogosha_on.gif) no-repeat;
  right:8px;
  top:0;
}

li#hdr_top a {
  position: absolute;
  display:block;
  width:117px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_top_off.gif) no-repeat;
  right:294px;
  top:0;
}

li#hdr_top a:hover,
li#hdr_top a:focus {
  position: absolute;
  display:block;
  width:117px;
  height:31px;
  text-indent:-9999px;
  background:url(../images/head_nav_top_on.gif) no-repeat;
  right:294px;
  top:0;
}

#title {
  padding-bottom:10px;
  text-align:center;
}

#backtotop {
  margin-top:15px;
}

#backtotop a {
  text-indent:-9999px;
  display:block;
  background:url(../images/btn_top2.gif) no-repeat 0 0;
  width:158px;
  height:30px;
}
  
#backtotop a:hover,
#backtotop a:focus {
  text-indent:-9999px;
  display:block;
  background:url(../images/btn_top2.gif) no-repeat 0 -30px;
  width:158px;
  height:30px;
}
  
#menu {
  padding:5px 0;
  margin:10px 0 0;
}

#menu li {
  float:left;
  width: 25%;
}

#menu_oshiete a {
  text-indent:-9999px;
  display:block;
  height:110px;
  margin:5px 15px 5px 0px;
  background:url(../images/bnr_oshiete_off.gif) no-repeat;
  background-size:182px;
}

#menu_oshiete a:hover {
  background:url(../images/bnr_oshiete_on.gif) no-repeat;
  background-size:182px;
}

#menu_labo a {
  text-indent:-9999px;
  display:block;
  height:110px;
  margin:5px 15px 5px 0px;
  background:url(../images/bnr_labo_off.gif) no-repeat;
  background-size:182px;
}

#menu_labo a:hover {
  background:url(../images/bnr_labo_on.gif) no-repeat;
  background-size:182px;
}

#menu_town a {
  text-indent:-9999px;
  display:block;
  height:110px;
  margin:5px 0px 5px 0px;
  background:url(../images/bnr_town_off.gif) no-repeat;
  background-size:182px;
}

#menu_town a:hover {
  background:url(../images/bnr_town_on.gif) no-repeat;
  background-size:182px;
}

#menu_qa a {
  text-indent:-9999px;
  display:block;
  height:110px;
  margin:5px 15px 5px 0px;
  background:url(../images/bnr_qa_off.gif) no-repeat;
  background-size:182px;
}

#menu_qa a:hover {
  background:url(../images/bnr_qa_on.gif) no-repeat;
  background-size:182px;
}

#footer {
  padding:10px 0 20px;
  margin:0;
  text-align:center;
  color:#666;
  font-size:12px;
}

#content_labo {
  background: url(../labo/images/main_bg.png) no-repeat 50% 0 #FFF;
  padding:10px 20px 0;
}

#memo {
  float:right;
  margin:15px 0 0 0;
}

/* --- 実験室 Start --- */  

#labo_menu {
  width:489px;
  margin:0 auto;
  padding:0;
  text-align:center;
  background:url(../labo/images/menu_bg.gif) repeat-y;
}

#labo_menu ul {
  margin:10px 0 0;
}

#labo_menu ul li {
  margin:0;
  padding:0;
  line-height:1px;
}

.labo_sub {
  position:relative;
  height:190px;
  margin:10px 0 30px;
}

.jikken1 {background:url(../labo/images/jikken_bg.jpg) no-repeat;}
.jikken2 {background:url(../labo/images/jikken2_bg.jpg) no-repeat;}
.jikken3 {background:url(../labo/images/jikken3_bg.jpg) no-repeat;}
.jikken4 {background:url(../labo/images/jikken4_bg.jpg) no-repeat;}
.jikken5 {background:url(../labo/images/jikken5_bg.jpg) no-repeat;}
.jikken6 {background:url(../labo/images/jikken6_bg.jpg) no-repeat;}
.jikken7 {background:url(../labo/images/jikken7_bg.jpg) no-repeat;}
.jikken8 {background:url(../labo/images/jikken8_bg.jpg) no-repeat;}
.jikken9 {background:url(../labo/images/jikken9_bg.jpg) no-repeat;}
.jikken10 {background:url(../labo/images/jikken10_bg.jpg) no-repeat;}

.labo_serifu {
  position:absolute;
  width:388px;
  top:37px;
  left:15px;
  background:#FFF;
}

.labo_serifu p {
  margin:15px;
}

#labo_jikken {
  width:489px;
  margin:10px auto;
  padding:0;
  text-align:center;
  background:url(../labo/images/bb_bg.gif) repeat-y;
}

.labo_txt {
  text-align:left;
  color:#FFF;
  padding:10px 30px;
}

.labo_ex {
  margin:5px 0 40px;
  padding:15px 0 0;
  background:url(../labo/images/ex_top.gif) no-repeat top;
}

.labo_ex_txt {
  margin:0;
  padding:0 25px 5px;
  background:url(../labo/images/ex_bg.gif) repeat-y;
}

.labo_ex p.att {
  font-size:12px;
  color:#036;
  padding-top:10px;
}

.labo_video {
  padding:15px 0 25px;
  position:relative;
}

.video_shin {position:absolute; left: 468px; top: 140px;}
.video_etsu {position:absolute; left: 55px; top: 134px;}

.video_shin16-9 {
	position:absolute;
	left: 524px;
	top: 140px;
}
.video_etsu16-9 {
	position:absolute;
	left: -1px;
	top: 134px;
}

ul#labo_footmenu {
  margin-top:5px;
  width:100%;
}

ul#labo_footmenu li {
  float:left;
  display:block;
  width:195px;
  padding:3px 0 3px 15px;
  background:url(../images/arrow.gif) no-repeat 0 4px;
  font-size: 13px;
}

/* 120830追加 */

#labo_usage {
  background:url(../labo/images/bb_top.gif) no-repeat center top;
  padding:9px 0 0 0;
  margin:15px 0 20px 0;
  position:relative;
}

#labo_usage_contents {
  background:url(../labo/images/bb_usage_bg.gif) no-repeat center bottom;
  padding:10px 100px 175px;
  color:#FFF;
}

#labo_usage_contents ul {
  margin:10px 0 10px 10px;
}

#labo_usage_contents ul li {
  background:url(../labo/images/bb_listmark.gif) no-repeat left 7px;
  padding:2px 0 2px 15px;
}

/*ようこそシリコーンタウンへ*/
.tooltip{
    position: relative;
    display: inline-block;
}
.tooltip p{
    margin:0;
    padding:0;
}
.description,.description_left {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #00568E;
    width:auto;
    white-space: nowrap;
    text-align: left;
}
.tooltip span {font-weight: bold; font-size: 13px; line-height: 1.2; padding-bottom: 3px; display: block;}
.tooltip a {color: #FFF; text-decoration: underline;}
.tooltip a:hover{opacity: 0.8;}

.description:before {
    content: "";
    position: absolute;
    top:5px;
    left:-18px;
    border: 12px solid transparent;
    border-top: 12px solid #00568E;
    transform: rotateZ(90deg);
}
.tooltip:hover .description{
    display: inline-block;
    top: 0px;
    left: 35px;
}

.description_left:before {
    content: "";
    position: absolute;
    top:5px;
    right:-18px;
    border: 12px solid transparent;
    border-top: 12px solid #00568E;
    transform: rotateZ(270deg);
}
.tooltip:hover .description_left{
    display: inline-block;
    top: 0px;
    right: 35px;
}
#konnna_box{position: relative; height: 640px; background: url(../town/bg_konna.png) no-repeat; background-size:670px;}
#office{position: absolute; top:120px; left: 210px;}
#eco{position: absolute; top:10px; left: 470px;}
#transportation{position: absolute; top:120px; left: 90px;}
#spreading{position: absolute; top:365px; left: 50px;}
#factory{position: absolute; top:220px; left: 20px;}
#sports{position: absolute; top:90px; left:350px;}
#restaurant{position: absolute; top:190px; left:520px;}
#outdoor{position: absolute; top:70px; right:10px;}
#house{position: absolute; top:215px; left: 200px;}
#room{position: absolute; top:330px; left: 300px;}
#bath{position: absolute; top:330px; left:455px;}
#living{position: absolute; top:410px; left: 270px;}
#kitchen{position: absolute; top:450px; left:430px;}
#automotive{position: absolute; top:410px; right:60px;}
#space{position: absolute; top:30px; left: 280px;}


/* --- キャラクター紹介 Start --- */  

#chara_box {
  position:relative;
  height:620px;
}

#img_sensei{position:absolute; left: 50px; top: 1px; z-index:9999;}
#img_shin{position:absolute; left: 212px; top: 270px; z-index:9999;}
#img_etsu{position:absolute; left: 551px; top: 265px; z-index:9999;}

#chara_sensei {
  position:absolute;
  width:451px;
  left: 143px;
  top: 77px;
}

#chara_shin {
  position:absolute;
  width:317px;
  left: 0px;
  top: 370px;
}

#chara_etsu {
  position:absolute;
  width:317px;
  left: 352px;
  top: 370px;
}

.chara_txt_sensei {
  background:url(../images/chara_sensei_waku.gif) no-repeat;
  width:356px;
  height:88px;
  padding:25px 15px 15px 80px;
}

.chara_txt_shin {
  background:url(../images/chara_shin_waku.gif) no-repeat;
  width:287px;
  height:131px;
  padding:30px 15px 5px 15px;
}

.chara_txt_etsu {
  background:url(../images/chara_etsu_waku.gif) no-repeat;
  width:287px;
  height:131px;
  padding:30px 15px 5px 15px;
}

.chara_txt p {
  margin:5px 0;
}

/* --- わたしたちの会社について Start --- */  

.sensei {
  width:530px;
  margin:0 0 15px 65px;
  background:url(../images/about_img_sensei.gif) no-repeat 0 50%;
  text-align:right;
}

.sensei_txt {
  padding:6px 15px 6px 10px;
  margin-left: 85px;
  text-align:left;
  background-color:#FFF;
}

.shin {
  width:530px;
  margin:0 0 15px 65px;
  background:url(../images/about_img_shin.gif) no-repeat 0 50%;
  text-align:right;
}

.shin_txt {
  padding:6px 15px 6px 10px;
  margin-left: 85px;
  text-align:left;
  background-color:#FFF;
}

.etsu {
  width:530px;
  margin:0 0 15px 65px;
  background:url(../images/about_img_etsu.gif) no-repeat 0 50%;
  text-align:right;
}

.etsu_txt {
  padding:6px 15px 6px 10px;
  margin-left: 85px;
  text-align:left;
  background-color:#FFF;
}

.about_logo {
  width:125px;
  float:right;
  padding:0 0 0 5px;
}

#pagenav {
  padding:20px 0;
}

#pagenav .left {
  float:left;
  text-align:left;
  width:230px;
}

#pagenav .right {
  float:right;
  text-align:right;
  width:230px;
}

/* --- お便り Start --- */  

.contact_btn{
  margin:-10px 0 20px;
  text-align:center;
}

.contact_btn a{
  background-color:#FC0;
  border-left:#FFB649 3px solid;
  border-top:#FFB649 3px solid;
  border-right:#A66400 3px solid;
  border-bottom:#865000 3px solid;
  font-weight:bold;
  width:170px;
  margin:0;
  padding:0;
  padding:3px 12px;
  line-height:24px;
  display:block;
}

.contact_btn a:hover{
  background-color:#FF9400;
  border-left:#FF8E48 3px solid;
  border-top:#FF8E48 3px solid;
  border-right:#A63F00 3px solid;
  border-bottom:#A53F00 3px solid;
  text-decoration:none;
  color:#000;
}

.contact_btn a:active{
  background-color:#F08A00;
  border-left:#A63F00 3px solid;
  border-top:#A63F00 3px solid;
  border-right:#FF8E48 3px solid;
  border-bottom:#FF8E48 3px solid;
  text-decoration:none;
  color:#000;
}

/* Tool tip */

ul#main_menu {
  margin:50px 0 20px 40px;
  width:690px;
  position:relative;
  zoom:1;
}

ul#main_menu li {
  float:left;
  margin:0 5px 20px 0;
  width:220px;
}

a.tooltip1{width:213px; height:238px; background:url(../images/index_oshiete_off.png); display:block; position:relative;}
a.tooltip1:hover, a.tooltip1:focus {background:url(../images/index_oshiete_on.png); text-decoration:none;}
a.tooltip1 span {display:none; padding:2px 3px; margin:0;}
a.tooltip1:hover span{display:inline; position:absolute; left:20px; top:-80px; border:none; background:none; z-index:1000; color:#6c6c6c;}

a.tooltip2{width:213px; height:238px; background: url(../images/index_labo_off.png); display:block; position:relative;}
a.tooltip2:hover, a.tooltip2:focus {background:url(../images/index_labo_on.png); text-decoration:none;}
a.tooltip2 span {display:none; padding:2px 3px; margin:0;}
a.tooltip2:hover span{display:inline; position:absolute; left:0px; top:-80px; border:none; background:none; z-index:999; color:#6c6c6c;}

a.tooltip3{width:213px; height:238px; background: url(../images/index_town_off.png); display:block; position:relative;}
a.tooltip3:hover, a.tooltip3:focus {background:url(../images/index_town_on.png); text-decoration:none;}
a.tooltip3 span {display:none; padding:2px 3px; margin:0;}
a.tooltip3:hover span{display:inline; position:absolute; left:-300px; top:-80px; border:none; background:none; z-index:998; color:#6c6c6c;}

a.tooltip4{width:213px; height:238px; background: url(../images/index_qa_off.png); display:block; position:relative;}
a.tooltip4:hover, a.tooltip3:focus {background:url(../images/index_qa_on.png); text-decoration:none;}
a.tooltip4 span {display:none; padding:2px 3px; margin:0;}
a.tooltip4:hover span{display:inline; position:absolute; left:0px; top:-80px; border:none; background:none; z-index:998; color:#6c6c6c;}


/* End tool tip */

.clear {
  clear:both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.clearfix {
  display: inline-block;
}


/* --- 教えてシリコーン先生 Start --- */
#oshiete_list{width:500px; margin:40px auto;}



/* Hides from IE Mac */

* html .clearfix {
  height: 1%;
}

.clearfix {
  display:block;
}
/* End Hack */