@charset "utf-8";

/*===== #message =====*/
#message {
    padding: 60px 0;
}
#message .box {
}
#message .box h3 {
    width: 50%;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4;
}
#message .box .img {
    width: 47%;
    float: left;
}
#message .box .text-box {
    width: 50%;
    float: right;
}

/*===== #service =====*/
#service {
    padding: 60px 0;
}
#service .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
}
#service .bg01 {
    background: url(../img/common/bg02.jpg) no-repeat center center;
    background-size: cover;
}
#service .bg02 {
    background: url(../img/common/bg03.jpg) no-repeat center center;
    background-size: cover;
}
#service .bg03 {
    background: url(../img/common/bg04.jpg) no-repeat center center;
    background-size: cover;
}
#service .box h3 {
    line-height: 1.4;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}
#service .box .text {
    text-align: center;
    margin-bottom: 0;
}

/*===== #news =====*/
#news {
    padding: 60px 0;
}
#news .box {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
#news .box dl {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.8;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#news .box dl dt {
    width: 15%;
    min-width: 100px;
}
#news .box dl dd {
}

/*===== #company =====*/
#company {
    padding: 60px 0;
}
#company .img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/*===============================================
    ■smart 画面の横幅が800pxまで
===============================================*/
@media screen and (max-width: 800px) {
/*-------- xxx --------*/
}

/*===============================================
    ■smart 画面の横幅が480pxまで
===============================================*/
@media screen and (max-width: 480px) {
/*-------- #message --------*/
  #message .box h3 {
    width: 100%;
    float: none;
    margin-bottom: 15px;
  }
  #message .box .img {
    width: 100%;
    float: none;
    max-width: 544px;
    margin: 0 auto 15px;
  }
  #message .box .text-box {
    width: 100%;
    float: none;
  }
/*-------- #news --------*/
  #news .box dl dt {
    width: 100%;
    min-width: auto;
    margin-bottom: 5px;
  }
  #news .box dl dd {
    width: 100%;
  }
/*-------- #company --------*/
  #company table tr {
    border-bottom: 1px solid #ffffff5e;
  }
}