@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------------------------------------------

　   メインコンテンツ

--------------------------------------------------------------------------------------------- */
#main {
float: none;
width:100%;
text-align: left;
}
/* ---------------------------------------------------------------------------------------------

　   スライド

--------------------------------------------------------------------------------------------- */
.slider {
width: 100%;
margin: 0 auto;
overflow:hidden;
padding-top:80px;
position: relative;
}
.slider img {
max-width:100%;height:auto;width: 100%;
}
@media screen and (max-width : 981px ) {
.slider {
padding-top:50px
}
}
/* ---------------------------------------------------------------------------------------------

　 背景

--------------------------------------------------------------------------------------------- */
#sec_bg_01{
text-align:center;
background-color:#fffcef;
padding:40px 0
}
#sec_bg_02{
text-align:center;
margin:40px 0 ;
}
@media only screen and (max-width: 767px){
#sec_bg_01{
padding:30px 0
}
#sec_bg_02{
margin:30px 0 ;
}
}
/* ---------------------------------------------------------------------------------------------

　   TOP　見出し

--------------------------------------------------------------------------------------------- */
.section-one-h3,
.section-two-h3{
width:100%;
position:relative;
margin-bottom:40px
}
.section-one-h3,
.section-two-h3 a{
text-align:center;
font-size: 30px;
line-height: 180%;
font-weight: 700;
letter-spacing:.05em;
color:#2753b3
}
.section-one-h3::after {
 position: absolute;
top: 110%;
left: 50%;
font-size: 0.5em;
font-weight:lighter;
content: '私たちのサービス';
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color:#333
}
.section-two-h3 a::after {
 position: absolute;
top: 110%;
left: 50%;
font-size: 0.5em;
font-weight:lighter;
content: '最新ニュース';
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color:#333
}
@media only screen and (max-width: 767px){
.section-one-h3,
.section-two-h3 a{
font-size: 22px;
line-height:1.6;
margin-bottom:20px
}}
/* ---------------------------------------------------------------------------------------------

　   SERVICE

--------------------------------------------------------------------------------------------- */
.service_box ul:after {
content: "";
clear: both;
display: block;
}
.service_box ul li{
list-style-type: none;
display: block;
float: left;
margin-bottom: 10%;
width: 100%;
position: relative;
border-radius: 10px;
-webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.24);
transition: all .3s;
}
.service_box ul li .sb_img{
width: 100%;
height:220px;
object-fit:cover;
font-family: 'object-fit: cover;'; /*IE対策*/
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 10px;
}
.btn--absolute{
position: absolute;
left: 0;
right: 0;
bottom:-20px;
margin: auto;
z-index:100
}
.service_icon{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
z-index:100
}
.service_icon img {
padding:10%
}
.color-base-ble::after ,
.color-base-orange::after ,
.color-base-red::after {
content: '';
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
mix-blend-mode: multiply;
width: 100%;
height: 100%;
z-index:1;
display:block
}
.color-base-ble:after{
background-color: #4985ff;
}
.color-base-orange:after{
background-color: #eb6701;
}
.color-base-red:after{
background-color: #d40000;
}
@media only screen and (min-width: 768px) {
.service_box ul li {
width: 31.42%;
margin-right: 2.87%;
margin-bottom: 2.87%;
}
.service_box ul li:nth-child(3n) {
margin-right: 0;
}
.service_box ul li .sb_img{
height:390px;}
.service_icon img {
padding:0
}
}
/* ---------------------------------------------------------------------------------------------

　   NEWS

--------------------------------------------------------------------------------------------- */
.info_t {
margin: 0;
text-align:left
}
.info_box2{
width: 100%;
margin-bottom:30px
}
.info_box {
width: 100%;
float: left;
font-weight: normal;
display: block;
margin: 0 21px 0 0;
padding: 15px 0;
border-bottom: #2753b3 dotted 1px;
}
.info_box p {
float: left;
font-size: 0.8em;
line-height: 150%;
margin: 0 20px 0 0;
text-align: left;
font-weight: normal;
padding:5px 0;
}
.info_box h5 a {
text-decoration: none;
float: left;
font-weight: normal;
font-size: 1.1em;
line-height: 150%;
padding:5px 0;
text-align:left}
.info_box h5 a:hover {
text-decoration: underline;
}
/* ---------------------------------------------------------------------------------------------
　 ボタン
--------------------------------------------------------------------------------------------- */
.btn {
font-size: 0.8em;
line-height: 1.5;
display: inline-block;
padding: 1rem 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #fff;
width:220px
}
.btn--orange {color: #fff;background-color: #eb6701;}
.btn--orange:hover {color: #fff;background: #f5b380;}
.btn--blue{color: #fff;background-color: #2753b3;}
.btn--blue:hover {color: #fff;background: #4e7ad8;}
.btn--red{color: #fff;background-color: #db1a00;}
.btn--red:hover {color: #fff;background: #ff8979;}
@media only screen and (max-width: 767px){.btn {width:250px;}}