@charset "utf-8";

/* ===================================================================
SmartPhone CSS
ウィンドウ幅[0～640px]の場合に適用
=================================================================== */
@media screen and (max-width:767px) {
#h_wrap {
padding: 0;
}

#header {
padding: 10px;
}

#header ul li.csl,
#header ul li.tel img{
display: block;
}

#header ul li.tel span {
display: none;
}

#header ul li {
margin-left: 10px;
}

.ind_main {
margin-top: 40px;
}

section {
margin: 0;
}

section h2 {
font-size: 22px;
text-indent: 20px;
}

section p {
font-size: 16px !important;
}

#sec01,
#sec02,
#sec03{
margin: 0 10px 20px;
}

#sec01 h2,
#sec02 h2,
#sec03 h2{
margin-bottom: 10px;
}

#sec01 p,
#sec02 p,
#sec03 p{
padding: 0 10px 20px;
}


.cta_bg {
padding: 10px;
margin-bottom: 20px;
}

.cta dl.csl {
display: block;
}

.cta dl.csl dt {
max-width: 453px;
margin: 20px auto;
padding: 0;
}

.cta dl.csl p.txt img,
.cta dl.csl p.tel img {
max-width: 100%;
}


.cta .hc {
display: block;
margin-top: 20px;
}

.cta .hc .left,
.cta .hc .right {
width: 100%;
}

.cta .box {
display: block;
}

.cta .box .btn {
  max-width: 100%;
  margin-bottom: 10px;
}

.cta .box .tel {
  max-width: 100%;
}

#sec01 p {
padding: 0 10px 20px;
}

#sec01 ul {
padding: 0 10px;
}

#sec01 ul li {
padding: 7px 0 15px 35px;
font-size: 18px;
background-size: 30px;
}




#sec02 .bg {
padding: 0 10px;
}

#sec02 .bg h3 {
padding-bottom: 20px;
font-size: 24px;
}

#sec02 .bg ul {
padding: 20px 0 30px 0;
}

#sec02 .bg ul li {
padding: 7px 0 15px 35px;
font-size: 18px;
background-size: 30px;
}

#sec02 .bg ul li br {
display: none;
}

#sec02 p.sub_ttl {
margin: 0 10px 25px;
padding: 20px 0;
font-size: 18px !important;
}

#sec03 h3 {
padding: 20px 10px 35px;
font-size: 28px;
}

#sec03 p.ttl {
padding: 0 0 30px;
}



#sec04 dl {
display: block;
padding-top: 20px;
}

#sec04 dt {
margin: 0 auto 20px;
}

#sec04 dd {
max-width: 100%;
}

#sec04 dd img {
margin: 0 auto;
}


#sec05 {
padding: 20px 10px 0;
}

#sec05 h2 {
margin-bottom: 10px;
text-indent: 0;
font-size: 24px;
}

#sec05 ul {
width: 250px;
margin: 0 auto;
}

#sec05 li {
margin-bottom: 20px;
}

#sec05 p.center {
margin: 0;
padding-bottom: 20px;
font-size: 20px;
text-align: left;
}

#sec05 p.last {
margin-bottom: 30px;
}

#sec05 .map {
  -webkit-flex-direction: column; /* Safari */
flex-direction:         column;
}

#sec05 .map ul.area {
width: 100%;
}

#sec05 .map img {
width: 100%;
margin-right: 45px;
}


#sec05 .map figure{
margin-bottom :20px;
}

#sec05 .map .area li h3,
#sec05 .map .area li{
width: 100%;
}

#sec05 .map .area li p {
text-align: center;
}

#sec06 {
padding: 20px 10px;
}

#sec06 h2 {
margin-bottom: 20px;
text-indent: 0;
font-size: 24px;
}

#sec06 li figure {
display: block;
}

#sec06 li figure figure {
width: 100%;
padding: 0 0 15px;
}

#sec06 li figure figure img {
display: block;
width: 298px;
margin: 0 auto;
}

#sec06 li figcaption {
width: 100%;
margin: 0 0 15px;
padding: 0;
background: none;
}

#sec06 li figcaption h3 {
text-align: center;
margin-bottom: 10px;
}

#sec06 li figcaption p {
margin-bottom: 10px;
}


#sec07 {
padding: 0 10px 20px;
}

#sec07 h2.center {
margin-bottom: 20px;
font-size: 24px;
}

#sec07 .voice_bg {
margin-bottom: 10px;
padding: 10px;
}

#sec07 .voice {
padding: 10px;
}

#sec07 .box {
padding-bottom: 0;
}

#sec07 .box h2 {
margin-bottom: 20px;
}

#sec07 .box p {
padding: 0 10px 20px;
}

/*	footer
--------------------------------------------------------------------*/
#footer .copyright {
padding: 20px 0;
}

}