main .mainarea2{background:url(../img/bg5.jpg) center top no-repeat}

main .service-title{background:url(../img/title.png) repeat center center}

.grad-wrap{ position:relative}
.grad-wrap+.grad-wrap{ margin-top:40px}
.grad-trigger{ z-index:2;  position:absolute;  right:0;  bottom:0;  left:0;  width:148px;  margin:auto;  padding:.5em 0;  border-radius:2px;  background:#1E7981;  color:#fff;  font-size:14px;  text-align:center;  cursor:pointer;  transition:.2s ease;  box-shadow:0 0 3px rgba(0,0,0,.3)}
.grad-trigger::after{ content:"続きを読む"}
.grad-trigger:hover{ background:#fff;  color:#1E7981}
.grad-trigger .fa{ margin-right:.5em}
.grad-item{ position:relative;  overflow:hidden;  margin-bottom:20px}
.grad-item.is-hide{ height:360px}

#content03 .grad-item.is-hide{ height:160px}

.grad-item p+p{ margin-top:1em}
.grad-item::before{ display:block;  position:absolute;  bottom:0;  left:0;  content:"";  width:100%;  height:80px;  background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.9) 50%,#fff 100%);  background:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.9) 50%,#fff 100%)}
.grad-trigger.is-show{ bottom:-44px}
.grad-trigger.is-show::after{ content:"閉じる"}
.grad-trigger.is-show .fa{ transform:rotate(180deg)}
.grad-trigger.is-show+.grad-item::before{ display:none}

.grad-item p{font-size:15px !important}

main .service article div.content .txtBox.w100a{width:auto; padding-left:20px}
main .service article div.content .txtBox.w100a figure{padding-top:40px}
main .service article div.content .txtBox.w100a figure img{width:100%}

.swiper{ width:100%;  height:auto}

.swiper-slide{ height:auto;  text-align:center}
.swiper-box{ height:100%}

.swiper-box img{ max-width:100%}

.header-text{ position:absolute;  z-index:2}

.header-text img{ max-width:90vw;  margin-left:2vw;  padding-top:1.4vw}

@media (min-width:1501px){.header-text img{ padding-left:2vw;  padding-top:22px}

}

.flex-wrapper{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch;  width:1160px;  max-width:100vw;  padding:0 20px;  overflow:hidden}

.flex-between{-webkit-justify-content:space-between !important; justify-content: space-between !important}

.flex-space-around{-webkit-justify-content:space-around !important; justify-content: space-around !important}

.flex-nowrap{ -webkit-flex-wrap:nowrap !important; flex-wrap: nowrap !important}

.flex-aligncenter{ -webkit-align-items:center !important; align-items: center !important}

.flex-center{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:center; justify-content: center; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch;  max-width:600px}

main .service h1{ font-family:'M PLUS 1p',sans-serif;  font-size:24px;  letter-spacing:0.04rem;  color:#1E7981;  font-weight:500;  text-align:center;  margin-top:20px;  padding:0 20px;  line-height:32px}

main article h3{ border-bottom:solid 2px #1E7981;  color:#333;  font-size:22px;  letter-spacing:0.04rem;  padding:0 0 5px;  margin:10px 0;  font-weight:bold !important}

.wide-box{ max-width:1160px;  padding:20px}

.wide-box p{ font-size:15px !important;  line-height:1.9;  margin-bottom:20px}

main .service article{ width:auto !important}

main .service-title:nth-of-type(n+2){ margin-top:40px}

@media (max-width:767px){main .service-title:nth-of-type(n+2){ margin-top:20px}

 .header-pc{ display:none}

.header-sp{ display:block}

.nav-block{padding-bottom:calc(8vw + 34px)}

main .service article{padding:0 0 20px}

main .service h1{ font-size:20px;  line-height:26px}

main article h3{ font-size:20px;  line-height:26px}

.cushion{display:none}

.flex-wrapper .div-text-l{width:100%; font-size:15px !important;  line-height:1.9}

.flex-wrapper .div-image-r{width:100%;  max-width:460px;  margin-bottom:20px}

.flex-wrapper .div-text-r{width:100%; font-size:15px !important;  line-height:1.9}

.flex-wrapper .div-image-l{width:100%;  max-width:460px;  margin-bottom:20px}
main .endbox,
main .footer-slider{padding:35px 7% 35px 7%}

}

@media (min-width:768px){.header-pc{ display:block}

.header-sp{ display:none}

main .topicPath ul{ width:100%}

main .topicPath{ margin-top:10px;  margin-left:30px}

main .service article{padding:10px 0 20px}

.flex-wrapper .cushion{width:3%; order:2}

.flex-wrapper .div-text-l{width:57%; order:1; font-size:15px !important;  line-height:1.9}

.flex-wrapper .div-image-r{width:40%;  max-width:460px; order:3}

.flex-wrapper .div-text-r{width:57%; order:3; font-size:15px !important;  line-height:1.9}

.flex-wrapper .div-image-l{width:40%;  max-width:460px; order:1}

main .service-title{padding:15px 0}
main .endbox,
main .footer-slider{width:980px; margin-left:auto; margin-right:auto}

}

.linkArea{ text-align:center;  margin-bottom:20px}

.linkArea img{ display:block}

.linkArea img.img_outside{ display:inline-block;  height:10px; width:auto; position:relative; top:5px; padding-left:3px}

main .topicPath{ min-width:auto !important}

@media (max-width:767px){.flex-wrapper{ width:100%;  max-width:calc(100vw - 40px)}
}