@charset "UTF-8";

/* -- グローバルメニュー -- */
ul#menu li.contact a{
border-bottom: 2px dotted #ccc;
}

/* -- #contsBox -- */
#contsBox {
margin-top: 5rem;	
}
#contsBox p{
margin: 2.5rem 0;	
line-height: 1.6; 
}
#contsBox h3.title03{
margin: 5rem 0;	
}
#contsBox h4{
font-size: 1.6rem;
background: #eee;
padding: 0.5rem;
margin: 2rem 0 2rem 0;
letter-spacing: 0.3rem;
}
/* -- .contactInfo -- */
#contsBox .contactInfo{
margin: 0 0 10rem 0;
}
#contsBox .contactInfo dl{
line-height: 1.6;
width:80%;
background: #fff;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
padding: 1rem 3rem 3rem 3rem ;
margin: 0 auto;
}
#contsBox .contactInfo dt{
width: 20%;
float: left;
margin: 0;
padding: 2rem 0 0 0;
font-size: 1.8rem;
border-top: 1px dotted #ddd;
}
#contsBox .contactInfo dt i{
color:#99cc00;
font-size: 2.2rem;
}
#contsBox .contactInfo dt.tel{
border-top: none;
}
#contsBox .contactInfo dd{
width: 80%;
margin: 0 0 0 20%;
padding: 0;
border-top: 1px dotted #ddd;
}
#contsBox .contactInfo dd.tel{
border-top: none;
}
#contsBox .contactInfo strong{
font-size: 3rem;
display: block;
margin: 0 0 1.5rem 0;
padding: 0;
line-height: 0.5;
}

/* -- .formBox -- */
#contsBox .formBox section{
width:80%;
background: #fff;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
padding: 1rem 3rem 3rem 3rem ;
margin: 0rem auto 3rem;
}
#contsBox .formBox section dl{
margin: 2rem 0 0 0;
}
#contsBox .formBox section p {
margin: 0 0 0 0;
}
#contsBox .formBox section p a{
color: #333;
border-bottom: 1px dotted #999; 
}
#contsBox .formBox textarea {
border: 1px solid #ccc;
}
#contsBox .formBox section .w100{
width: 100%;
}
#contsBox .formBox section label span{
display: block;
width: 100%;
}
#contsBox .formBox section label:hover{
background: #ddd;
}
#contsBox .formBox section figure{
text-align: center;
}
#contsBox .formBox section figcaption{
font-size: 1.2rem;
text-align: center;
}
/* ===========
:: TB 481px〜768px
============ */
@media screen and (max-width: 768px) {
#contsBox .contactInfo dt{
width: 100%;
float: none;
}
#contsBox .contactInfo dd{
width: 100%;
margin: 0;
border-top: none;
}
#contsBox .formBox section{
width:100%;
}
}
/* ===========
:: SP 〜480px
============ */
@media screen and (max-width: 480px) {
#contsBox .contactInfo dl{
width:100%;
}
}