body {
    background-color: #E2EBEE;
    background-image: url(images/back.jpeg);  
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color:#4E757A;
}
a {
    text-decoration: none;
}
@media (min-width: 920px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
.sp{
    display: none;
}
@media (max-width:920px){
    .sp{display: inline;}
}
#wrap{
    width:100%;
    max-width:1100px;
    margin: 0 auto;
    padding:0;
}

#head{
    margin: 25px 60px 80px;
    font-size:36px;
}
#head h1 span{
    display: block;
    font-size:20px;
    margin: 0 0 50px;
}
#makasete{
    display: block;
    margin:240px 0 328px 160px;
    font-size:36px;
    font-style: italic;
}
#headToiawase span{
    display: block;
    margin: 0 auto 50px;
    text-align:center;
    font-size:40px;
    line-height: 1.5em;
}
@media (max-width:920px){
    #head{
        margin: 25px 30px 80px;
        font-size:26px;
    }
    #head h1 span{
        font-size:12px;
        margin: 0 0 30px;
    }
    #makasete{
        display: block;
        margin:240px auto 328px;
        text-align: center;
        font-size:32px;
        font-style: italic;
    }
    #headToiawase span{
        font-size:32px;
    }
    
}

#main{
    margin:0 auto 80px;
    max-width:100%;
}

#contents{
    background-color: rgba(255,255,255,0.85);
    padding:0 0 10px;
}
#contents h1{
    font-size:32px;
    margin:0 40px 60px;
    padding:40px 0 0;
}
#contentBox1{
    width:1040px;
    max-width: calc(100% - 60px);
    margin:0 0 220px;
    padding:120px 30px 80px;
    display: flex;
    background-color: #648174;
    color:#fff;
}
#content1-1{
    width:510px;
    max-wdith:calc(50% - 30px);
    display: flex;
}
#content1-1 div{
    text-align: center;
    margin:0 23px 0 0;
    line-height: 1.5em;
}
#content1-1 div h2{
    font-size:28px;
    margin:0 0 50px;
}
#content1-1 img{
    max-width:calc(50% - 30px);
    align-self: flex-start;
}
#content1-2{
    width:510px;
    max-wdith:calc(50% - 30px);
    display: flex;
    margin:0 0 0 24px;
}
#content1-2 div{
    text-align: center;
    margin:0 23px 0 0;
    line-height: 1.5em;
}
#content1-2 div h2{
    font-size:28px;
    margin:0 0 50px;
}
#content1-2 img{
    max-width:calc(50% - 30px);
    align-self: flex-start;
}



@media (max-width:920px){
    
    #contentBox1{
        display: block;
        max-width: 100%;
        margin:0 auto 220px;
        padding:30px 0px 80px;
    }
    #contents h1{
        text-align: center;  
        font-size:28px;
    }
    #content1-1{
        display: block;
        width:100%;
        text-align: center;
    }
    #content1-1 div{
        margin:0;
    }
    #content1-1 div h2{
        font-size:28px;
        margin:30px 0 50px;
        width:100%;
    }
    #content1-1 div p{
        margin:0 30px;
    }
    #content1-1 img{
        margin-top:30px;
        max-width:calc(80% - 30px);
        align-self: flex-start;
    }
    #content1-2{
        display: block;
        width:100%;
        text-align: center;
        margin:0;
    }
    #content1-2 div{
        margin:0;
    }
    #content1-2 div h2{
        font-size:28px;
        margin:80px 0 50px;
        width:100%;
    }
    #content1-2 div p{
        margin:0 30px;
    }
    #content1-2 img{
        margin-top:30px;
        max-width:calc(80% - 30px);
        align-self: flex-start;
    }
    
}

#contentBox2{
    margin: 0 auto 120px;
    width:1040px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
}
.content2{
    text-align: center;
    background-color: #F5F5F5;
    width:33%;
    font-weight: bold;
}
.content2 span{
    display: block;
    font-size:20px;
    margin:45px 0 30px;
}

#contentBox3{
    margin: 0 auto 30px;
    padding:40px 0 40px;
    width:1040px;
    max-width: calc(100% - 60px);
    background-color: #F5F5F5;
}
#contentBox3 h2{
    font-size:40px;
    margin:0px 40px 60px;
}
#contentBox3 ul{
    margin:0 120px 100px 120px;
}
#contentBox3 ul li{
    list-style:none;
    margin:10px 0 20px;
}
#contentBox3 ul li::before{
    content:"● ";
}
#fujo{
    text-align: center;
    background-color: #648174;
    margin:0 40px 0;
    padding:100px;
    color:white;

}
#fujo span{
    display: block;
}


@media (max-width:920px){
    #contentBox2{
    display: block;
    }
    .content2{
        width:calc(100% - 60px);
        margin:0 auto 30px;
        padding-bottom: 30px;
    }
    .content2 span{
        margin: 5px auto 0;
    }
    #contentBox3{
        width: 100%;
        max-width: 100%;
    }
    #contentBox3 h2{
        font-size:28px;
    }
    #contentBox3 ul{
        margin:0 20px 50px;
        font-size:14px;
        padding:0;
    }
    #fujo{
        margin:0 40px 0;
        padding:20px 20px;
        font-size:15px;

    }
}


#aboutOffice{
    margin: 60px auto 120px;
    padding:40px 0px 40px;
    width:1100px;
    max-width: 100%;
    background-color: rgba(255,255,255,0.85);
}
#aboutOffice h1{
    font-size:40px;
    margin:0px 40px 60px;
}
#aboutOffice1 ul{
    margin:0 100px 60px;
}    
#aboutOffice1 ul li{
    margin:40px 0 0;
}    



#aboutOffice2{
    margin:0 0 60px 80px;
    text-align: left;
}
#aboutMe{
    margin-right:30px;
}
#aboutMe h2{
    font-size:20px;
    margin:0 0 40px;
    line-height:1.5em;
}
#aboutMe p{
    line-height:2em;
    margin:0 0 40px;
}


@media (max-width:920px){
    #aboutOffice h1{
        font-size:28px;
    }
    #aboutOffice2{
        display: block;
    }
    #aboutOffice1 ul{
        margin:0 0px 60px 60px;
    }    
    #aboutOffice1 ul li{
        margin:0;
    }  
    #aboutMe{
        margin-right:0px;
    }
    #aboutMe h2{
        font-size:20px;
        margin:0 60px 40px;
    } 
    #aboutMe p{
        margin:0 30px;
        font-size:15px;
    }
    #aboutOffice2{
        margin:0 0 60px;
        text-align: center;
    }
}

#officeAccess{
    margin: 0 auto 120px;
    padding:40px 30px 40px;
    width:1040px;
    max-width: calc(100% - 60px);
    background-color: rgba(255,255,255,0.85);
}

#officeAccess h2{
    font-size:24px;
    margin:0 0 40px;
}
#officeAccess h3{
    font-size:22px;
    margin:0 0 15px;
}
#officeAccess p{
    line-height: 1.8em;
}
#address{
    font-size:20px;
}
#officeAccess1{
    display: flex;
    margin: 0 0 40px;
}
#officeAccess1-1{
    width:60%;
    margin:0 6% 0 0;
}
#officeAccess1-1 ul{
    margin:5px 0 15px 20px;
}
#officeAccess1-1 ul li{
    margin:0 0 10px 0px;
}
#officeAccess1-2{
    width:33%;
}
#officeAccess1-2 p{
    margin: 0 0 50px;
}
#officeAccess h3{
    font-weight: bold;
}
#officeAccess1-2 img{
    width:50px;
    height:50px;
}
@media (max-width:920px){
    #officeAccess1{
        display: block;
    }
    #officeAccess1-1{
        width:100%;
        margin-bottom: 50px;
    }
    #officeAccess1-2{
        width:100%;
    }
}

#googleMap{
    width:100%;
    height:300px;
}

#toiawase{
    text-align: center;
    background-color: #648174;
    color:white;
    padding:100px;
}
#toiawase h2{
    font-size:40px;
    margin:0 auto 50px;
}
.telBox{
    text-align: center;
    width: 280px;
    font-size: 31px;
    color: #ffffff;
    margin: 0 auto 30px;
    padding: 17px 30px;
    background: #5B7F83;
    background: -webkit-gradient(linear, left top, left bottom, from(#5B7F83), to(#375B60));
    background: -webkit-linear-gradient(top, #5B7F83 0%, #375B60 100%);
    background: -webkit-linear-gradient(top, #5B7F83 0%, #375B60 100%);
    background: linear-gradient(to bottom, #5B7F83 0%, #375B60 100%);
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px #666666;
    box-shadow: 0px 1px #666666;
}
.tel{
    color:#FFF ;
    font-weight: normal;
}
#officeAccess1-2 .tel{
    color:#4E757A !important;
    font-weight: normal;
}
.kuwasiku{
    width: 320px;
    height:38px;
    max-width: 90%;
    margin: 0px auto 30px;
    padding:10px 5px 0px;
    background-color: #FFF;
    text-align: center;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 15px 3px  #CCC;
    box-shadow: 0px 0px 15px 3px #CCC;
}
.kuwasiku a{
    text-decoration: underline;
    margin:5px auto 10px;
    font-size:18px;
    vertical-align: middle;
    display:block;
    font-weight: bold;
    color:#666666;
}

@media (max-width:920px){
    #toiawase{
        padding:30px;
    }
    #toiawase h2{
    font-size: 24px;
    -webkit-box-shadow: 0px 0px 0px;
    box-shadow: 0px 0px 0px;
    }
    .telBox{
        width: calc(100% - 30px);
        padding:17px 5px 17px 0px;
        font-size:24px;
    }
}

#footer{
    display: flex;
    margin: 0 auto 120px;
    padding:40px 30px 40px;
    width:1040px;
    max-width: calc(100% - 60px);
    background-color: #778C77;
    color:#FFF;
}
#footer-1{
        width:100% ;
}