@charset "Shift_JIS";
/*===========================================================================
2009/08/20
media.css 
media.htmへのCSS
=========================================================================== */

/*--media.htm-------*/


h1.media {
background :url(../images/common/title_media.gif) left top no-repeat;
}


table.media {
width: 100%;
margin-left : auto;
margin-right : auto;
font-size:14px;
border-collapse: collapse;
}

table.media td.title1,table.media td.title2 {
text-align : center ;
padding : 7px 0 ;
font-size: 16px;
border-bottom: 2px solid #cccccc;
}

table.media td.photo {
padding : 20px;
border-right : 1px dotted #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
background : #ffffff ;
text-align : center ;
}

table.media td.data {
text-align:left;
border-left : 1px dotted #cccccc;
border-bottom : 1px solid #cccccc;
border-right : 1px solid #cccccc;
font-size:14px;
background : #ffffff;
padding: 15px;
}

.data-text {
font-size:13px;
line-height:1.5em;
color: #222222;
font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*--hydrotect/official.html-------*/

.of_read {
color : #009900 ;
font-weight : bold ;
font-size : 14px ;
padding : 21px 0 ;
}

/*--hydrotect/flowchart.html-------*/

#flow {
width : 565px ;
height : 710px ;
background :url(../images/hydrotect/hy_flow_bg.gif) left 27px no-repeat;
padding : 27px 0 17px 0 ;
position : relative ;
}

#flow p.title {
display : block ;
width : 152px ;
/*	height : 35px ;*/
padding : 10px 0 11px 0;
font-size : 14px ;
text-align : center ;
color : #ff6600 ;
font-weight : bold ;
position : absolute ;
}

#flow p.text {
display : block ;
width : 133px ;
/*	padding : 13px 14px 0 9px ;*/
padding : 7px 10px 0 9px ;
font-size : 11px ;
position : absolute ;
}

/*--hydrotect/faq.html-------*/

#hy_f {
width : 399px ;
height : 176px ;
background :url(../images/hydrotect/hy_faq_bg1.gif) left top no-repeat;
padding : 15px 0 15px 125px ;
}

#hy_f p {
font-size : 14px ;
line-height : 1.4 ;
background :url(../images/hydrotect/hy_faq_img4.gif) left top no-repeat;
padding-left : 20px ;
}

.hy_f {
width : 525px ;
height : 34px ;
background :url(../images/hydrotect/hy_faq_bg2.gif) left top no-repeat;
}

.hy_f p {
font-size : 13px ;
font-weight : bold ;
padding : 10px 0 10px 40px ;
display : block ;
position : relative;
}

.hy_f p span {
display : block ;
position : absolute ;
left : 442px ;
top : 10px ;
font-size : 12px ;
}

/* ----- */

*:first-child+html .hy_f p span {
display : block ;
position : absolute ;
left : 442px ;
top : 12px ;
font-size : 12px ;
padding-top : 2px ;
}

/* ----- */


.hy_content {
width : 442px ;
border-top : 0 ;
border-right : 1px solid #d0d0d0 ;
border-bottom : 0 ;
border-left : 1px solid #d0d0d0 ;
background :url(../images/hydrotect/hy_faq_img2.gif) 37px 11px no-repeat;
padding : 20px 19px 18px 62px ;
}

.fqa_foot {
width : 525px ;
height : 5px ;
background :url(../images/hydrotect/hy_faq_img3.gif) left top no-repeat;
}


/*--hydrotect/cd.html-------*/

p#cd_title {
width : 525px ;
height : 45px ;
display : block ;
background :url(../images/hydrotect/hy_cd_title.gif) left top no-repeat;
text-indent : -2000px ;
}

#cd_main {
width : 524px ;
height : 489px ;
background :url(../images/hydrotect/hy_cd_bg.jpg) left top no-repeat;
position : relative ;
}

#cd_main h3 {
margin : 0 ;
padding : 0 ;
font-size : 11px ;
display : block ;
width : 229px ;
height : 27px ;
text-indent : -2000px ;
}

#cd_main h3.cup1 {
position : absolute ;
top : 17px ;
left : 123px ;
background :url(../images/hydrotect/hy_cd_p1.gif) left top no-repeat;
}

#cd_main h3.cup2 {
position : absolute ;
top : 118px ;
left : 123px ;
background :url(../images/hydrotect/hy_cd_p2.gif) left top no-repeat;
}

@media screen and (max-width: 855px){
table.media {
border-bottom: solid 2px #ccc;
}
table.media td.title1, table.media td.title2 {
display: none;
}
td.photo, td.data {
display: block;
}
table.media td.photo{
border-top: 1px solid #cccccc;
}
table.media td.photo,table.media td.data {
border-right: none;
border-left: none;
border-bottom: none;
}
td.data {
padding-top: 0.2em !important;
}
td.data a {
text-align: center;
display: block;
}
td.data p a {
display: inline;
}
}