@charset "UTF-8";

/* ========BASIC======== */
* {
font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif
color: #000000;
font-size: 1em;
line-height: 150%;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

body {
margin: 0;
padding: 0;
line-height: 1.6;
letter-spacing: 1px;
background-color: #ffffff;
}
/* ========#E6E5E1======== */

br {
   letter-spacing:normal;
}

a {
text-decoration: underline;
color: #993300;
}

a:hover {

}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
margin: 0;
font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;
}


/* ========TEMPLATE LAYOUT======== */
div#container {
width: 100%x;
font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
}

div#header {
position: relative;
width: 100%;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

div#contents {
width:800px;
margin: 0 auto;
padding: 0px;
background-color: #FFFFFF;
font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;
}

/* ========#F5F5F5======== */
div#info {
width: 610px;
line-height: 150%;
padding: 0px 0px 0px 10px;
float: left;
margin-top: 20px;
font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;
}

div#menu {
float: right;
width: 330px;
color: #000;
font-size: 1em;
}
div#footer{
text-align: center;
width: 1000px;
clear: both;
font-size: 10px;
position: relative;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
/* ========#696969======== */

div#header h1 {
font-size: 14px;
padding-left: 30px;
color: #CCCCCC;
margin-bottom: 0px;
padding-bottom: 5px;
}



/* ========INFO CUSTOMIZE======== */
div#info h2 {
font-size: medium;
color: #FFFFFF;
height: 32px;
text-align: center;
padding-right: 5px;
padding-top: 5px;
background-image: url(../img_top/t_bg_h2.gif);
background-repeat: no-repeat;
margin-bottom: 10px;
}
div#info h3 {
background: #333333;
font-size: medium;
color: #333333;
clear: both;
height: 25px;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 0px;
}
div#info p{
padding-right: 5px;
letter-spacing: normal;
color: #000000;
}
div#lbox{
padding-top: 10px;
padding-left: 10px;
width: 600px;
margin-top: 20px;
background-color: #FFF;
height: 250px;
}
div#lbox img{
float: left;
padding-bottom: 20px;
}

div#box1{
div#width: 585px;
10600color: #FFFFFF;
0padding: 10px 30px 10px 10px;
width: 600px;
padding-left: 10px;
background-repeat: no-repeat;
margin-top: 30px;
padding-bottom: 10px;
background-color: #FFF;
}
div#box1 img{
float: left;
padding-right: 10px;
margin-bottom: 5px;
}
.itembox{
padding-right: 15px;
padding-left: 10px;
color: #666;
}

/* ========new4======== */

div#top{
div#width: 585px;
10600color: #FFFFFF;
0padding: 10px 30px 10px 10px;
width: 600px;
padding-left: 10px;
background-repeat: no-repeat;
margin-top: 20px;
padding-bottom: 10px;
height: 980px;
padding-top: 30px;
}

div#top img{
float: leftr;
padding-right: 10px;
margin-bottom: 5px;
}
div#tbox{
padding-top: 10px;
padding-left: 10px;
width: 600px;
margin-top: 20px;
background-color: #FFF;
height: 350px;
}
div#tbox img{
float: left;
padding-bottom: 20px;
}
/* ここからRead more　*/

.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #00bcd4;
  color: white;
}

.btn-gradient-3d {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #57617f;
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}

.btn-gradient-3d:active {
-webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}


/* ここから施工例　#960*/

.btn-open {
display: inline-block;
width: 300px;
height: 40px;
text-align: center;
background-color: #9ec34b;
font-size: 18px;
line-height: 52px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #9ec34b;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #9ec34b;
}
.btn-open:hover:after{
  height: 240%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 1;
}



div#sub3{
padding-top: 10px;
}


   


div#topics{
width: 305px;
margin-top: 20px;
margin-bottom: 30px;
background-image: url(../img_top/t_bg_topics.gif);
background-repeat: no-repeat;
padding-right: 5px;
color: #333;
}


div#menucontainer {
width: 300px;
float: right;
clear: both;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
font-size: 12px;
 }
div#menucontainer img{
margin-top: 40px;
margin-bottom: 10px;
 }
div#box2{
width: 580px;
line-height: 150%;
line-height: 150%;
padding: 10px 10px 10px 20px;
font-size: 12px;
height: 50px;
margin-top: 10px;
      }
div#box2 p{
padding-right: 10px;
}
div#box3{
width: 590px;
margin-top: 10px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
div#box3 p{
color: #333333;
}
div#box3 img{
float: left;
padding-right: 10px;
padding-bottom: 5px;
}




div#sub {
float: right;
width: 300px;
clear: both;
margin-right: 20px;
}

/* ========SUBCONTENTS CUSTOMIZE======== */
div#sub .section {
   margin-bottom:10px;
}

div#sub ul {
margin: 0;
padding: 0;
border: 1px solid #000000;
}

div#sub li {
line-height: 1.8;
list-style: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}

div#sub li a {
display: block;
padding: 5px 5px 5px 15px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
background-color: #A18E5C;
}

div#sub li a:hover {
display: block;
color: #666;
text-decoration: none;
background-color: #EFEBEF;
background-position: 5px 50%;
}
div#sub h3 {
height: 30px;
margin-top: 30px;
padding-top: 5px;
padding-left: 10px;
font-size: 10px;
}

div#sub2 {
width: 300px;
margin-top: 40px;
padding-bottom: 15px;
border: 1px solid #CCC;
background-color: #FFF;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
text-align: center;
margin-bottom: 30px;
}
div#sub2 h3{
color: #F00;
font-size: 0.94em;

}

div#sub2 h3 a {
text-decoration: none;
color: #A18E5C;
list-style-position: inside;
}

div#sub2 h3 a:hover {
color: #960;
}

/* ========メニューバー======== */

#me {
padding: 0;
margin: 0;
list-style-type: none;
width: 1000px;

}

#me li {
width: 20%;
float: left;
padding: 0;
text-align: center;
color: #FFF;
}

#me li a {
width: auto;
font-size: 16px;
font-weight: bold;
padding: 10px 0;
text-decoration: none;
display: block;
color: #FFF;
background-color: #666;
}

#me li a:hover {

background-color: #ccc;
}











#contents #menu #sub2 h3 .new em {
font-size: 0.94em;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #666;
color: #F00;
background-color: #CCC;
background-color: #999;
background-color: #CCC;
background-color: #999;
}
hr {
height: 1px;
border-top-width: 1px;
border-top-style: dotted;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #999;
}#contents #menu #sub2 h3 .new em {
font-size: 0.94em;
}
#contents #menu #sub ul p {
font-size: 12px;
}


/* ========スライドショーー======== */
.slide {
 position: relative; /* 親要素にrelativeを指定 */
}
 
.slide img {
 position: absolute; /* absoluteで画像を重ねる */
 display: none; /* 画像を非表示に非表示 */
}
/*これで、画像を重ねて*/