/* @import url("//share.cr-cms.net/hp_agency/hpagency.css"); */
/* レスポンシブ */
body {
    font-size: 18px;
    line-height: 1.8;
    /* font-family: Verdana, -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ ProN W3",メイリオ,Meiryo,"ＭＳ Ｐゴシック",sans-serif; */
    /* font-family: -apple-system,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif; */
    /* font-family: Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif; */
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
    color: #242424;
    font-feature-settings: "palt" 1;
    letter-spacing: 1px;
}
@media(max-width: 600px){
  body {
      font-size: 16px;
      font-family: sans-serif;
      letter-spacing: 0.08em;
  }
}

#title #title_outer{
   background: url("/materials/168757157584601.png") no-repeat;
   background-size: 300px;
   background-position: right 14px;
}
#title h1 {
   background: url("/materials/168757047240801.png") no-repeat left center;
   margin: 0 auto;
   padding: 0;
   text-align: left;
   height: 60px;
   width: 300px;
   float: left;
   font-size: 1.5em;
   text-indent: -99999px;
   background-size: contain;
}
#title h1 a{
   display: block;
   width: 100%;
   height: 100%;
}

@media(max-width: 768px){
    #title #title_outer{
        background: none;
     }
     #title h1{
        height: 60px;
        width: 265px;
     }
}


#mainArticles h2, #listTopics h2{
    background: #0071BC;
    font-weight: bold;
    font-size: 34px;
}
/* #mainArticles h2{
    margin-bottom: 0;
} */
#mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3,
#mainTopics h2{
    padding: 0px 0px;
    background: none;
    color: #0071BC;
    position: relative;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 30px;
}
#mainTopics h2:before,
#mainArticles .article h2::before,
.article h3:before,
.gallery h3:before,
.freeHtml h3:before{
    display: none;
}
#mainTopics h2:after, #mainArticles .article h2:after, .article h3:after, .gallery h3:after, .freeHtml h3:after{
    display: none;
}

#mainArticles div[id^="blog"] h2 {
  margin-bottom: 0;
}
ul.topics li p.date {
  font-size: 0.8em;
}
ul.topics li p.description {
  font-size: 0.9em;
}


.article h4 {
    border: none;
    border-bottom: dashed 2px #0071BC;
    border-radius: 0;
    padding: 12px 0 12px 0px;
    margin-bottom: 14px;
    color: #0071BC;
}
.article h4:before{
    display: none;
}

@media(max-width: 768px){
    #mainArticles h2, #listTopics h2{
        font-size: 1.2em;
    }
}



.article.back-image{
    background: url(/materials/168786831098501.jpg) no-repeat;
    background-size: cover;
    background-position: 50%;
    color: #FFF;
    margin-top: -16px;
}
.article.back-image h3 {
    color: #FFF;
}
.back-image .article_outer {
    width: 1024px;
    margin: auto;
    max-width: 100%;
}


/*-------------------------------------------
* TOPMENU
-------------------------------------------*/
#topMenu_outer .topMenu li a:hover{
    background: #0071BC;
}
/*-------------------------------------------
* LIST
-------------------------------------------*/
.checkList li{
   position: relative;
   font-size: 1.2em;
   font-weight: bold;
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: solid 1px;
}
.checkList li::before{
   content: "";
   width: 30px;
   height: 30px;
   background: url(/materials/168455098944501.png) no-repeat center;
   background-size: contain;
   display: inline-block;
   position: relative;
   top: 0.5em;
   margin-right: 8px;
}



.circleList li{
    position: relative;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px;
    padding-left: 32px;
 }
 .circleList li::before {
    content: "";
    /* width: 24px; */
    height: 100%;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 8px;
    margin-right: 8px;
    /* background: #333; */
    position: absolute;
    top: 13px;
    left: 0;
    content: "»";
    display: block;
    font-size: 40px;
    line-height: 0;
}

.ul > *{
    list-style: disc;
    margin-left: 1.5em;
}
.ol > *{
    list-style: decimal;
    margin-left: 1.5em;
}
/*-------------------------------------------
* TABLE
-------------------------------------------*/
.article table.normalTbl th {
    background: #f3f3f3;
}
.article table.normalTbl {
  font-size: 1em;
}

/*-------------------------------------------
* FLOW
-------------------------------------------*/
.mainArticles .article.articleFlow {
    background: #FFF;
    border: 2px solid #0071BC;
    display: block;
    padding: 10px 30px;
    position: relative;
    margin-bottom: 35px;
    box-sizing: border-box;
}

.mainArticles .article.articleFlow.first {
    margin-top: 0px;
}

.mainArticles .article.articleFlow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 20px solid #0071BC;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
}

.mainArticles .article.articleFlow.last::after {
    display: none;
}

.mainArticles .article.articleFlow .image,
.mainArticles .article.articleFlow img {
    max-width: 240px;
}

.mainArticles .article.articleFlow h6 {
    margin: 0px 0 0px;
    padding: 0px 0;
    color: #214290;
    font-size: 102%;
    letter-spacing: 0.1em;
    background: #FAF80E;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(33, 66, 144, 1) 1px, rgba(33, 66, 144, 1) 2px );
    background: none;
    border-bottom: solid 1px;
    margin-bottom: 10px;
}

.mainArticles .article.margin0 {
    margin: 0;
    padding: 0;
}

/*-------------------------------------------
* SIDE
-------------------------------------------*/
.side_address {
    margin-bottom: 30px;
    text-align: center;
}
.side_address .txt{
    margin-top: 10px;
    margin-bottom:20px;
}

.sideContents ul, .sideContents dl {
  font-size: 0.9em;
}
.sideContents .sideMobile p {
  font-size: 0.85em;
}


/*-------------------------------------------
* FOOTER
-------------------------------------------*/
#footer{
    background-color: #0071BC;
}
#footer_body .topMenu li a, #footer_body .services li a {
    background: none;
}
#footer_body .copyright{
    padding-left: 20px;
    padding-right: 20px;
}
/*-------------------------------------------
* OTHER
-------------------------------------------*/
.cleaningPointList {
    display: table;
    margin: 20px auto;
    background: #EBF1EB;
    padding: 50px 60px;
    width: 100%;
}
.cleaningPointList li {
    margin: 10px auto;
    background: url("/materials/168757469860701.png") no-repeat left 4px;
    background-size: 26px;
    padding: 0 0 0 32px;
    font-size: 18px;
}
#mainArticles .envelope{
    overflow: hidden;
    text-align: unset;
    background: #EBF1EB;
}
.align-center{
    text-align: center;
}

.dl{
    overflow: hidden;
}
.dl dt{
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: solid 1px #214290;
    margin-bottom: 8px;
}
@media(max-width: 768px){
    #mainImage_body{
        height: 158px;
    }
    .mainImage img {
        object-fit: cover;
        object-position: top center;
        min-height: 158px;
    }
}

.gallery.siteGuide .comment{
    background: #0071BC;
    color: #FFF;
    padding: 4px 10px;
}

@media (max-width: 768px){
    #mainTopics h2:before, #mainArticles .article h2::before, .article h3:before, .gallery h3:before, .freeHtml h3:before {
        display: none;
    }
    #mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3, #mainTopics h2 {
        padding: 10px 16px;
        font-size: 1.5em;
    }
    .article.articleService{
        padding: 10px;
    }
    #wrap{
        margin-bottom: 45px;
    }
    #bottomLink{
        display: block;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
        box-sizing: border-box;
        left: 0;
        height: 45px;
    }
    #bottomLink a{
        display:block;
        padding: 10px;
        text-align: center;
        color: #FFF;
        background: #ee7948;
    }
}