@charset "UTF-8";
/* ==========================================================================
//
// PC SMALL
//
========================================================================== */
@media screen and (max-width:1366px) {
  /* =======================================================================
  // area-greeting
  ======================================================================= */
  .area-greeting{
    padding: 60px 0;
  }
}

/* ==========================================================================
//
// TABLET & SMARTPHONE (768px)
//
========================================================================== */
@media screen and (max-width:768px) {
  /* hero-page
  ---------------------------------------------------------- */
  .hero-page{
    margin-bottom: 50px;
    background-image: url(../img/mainimg_01_tb.jpg);
  }
  /* ========================================================================
  // area-greeting
  ======================================================================== */
  .area-greeting{
    padding: 100px 0 40%;
  }
  .area-greeting .inner{
    max-width: 580px;
  }
  .area-greeting .ttl-area{
    font-size: 19px;
  }
  .area-greeting .txt-name{
    width: 60%;
    text-align: left;
  }
  .area-greeting .txt-name img{
    max-width: 170px;
  }
  /* ========================================================================
  // area-motto
  ======================================================================== */
  .area-motto{
    padding-top: 80px;
  }
  /* ========================================================================
  // area-overview
  ======================================================================== */
  .area-overview{
    padding-top: 80px;
  }
  .area-overview .ttl-area{
    margin-bottom: 50px;
    font-size: 19px;
  }
  .area-overview .tbl-overview > tbody > tr > th,
  .area-overview .tbl-overview > tbody > tr > td{
    padding: 25px 0;
  }
  .area-overview .tbl-overview > tbody > tr > th{
    width: 31.5%;
  }

  /* sec-address
  ---------------------------------------------------------- */
  .area-overview .sec-address{
    padding-bottom: 0;
    border-bottom: none;
  }
  .area-overview .sec-address .ttl-sec{
    margin-bottom: 30px;
    text-align: center;
  }
  .area-overview .sec-address .box-no-photo,
  .area-overview .sec-address .box-photo{
    position: relative;    
  }
  .area-overview .sec-address .box-no-photo{
    display: block;
    margin-bottom: 30px;
  }
  .area-overview .sec-address > div + div{
    padding-top: 30px;
  }
  .area-overview .sec-address > div + div:before{
    position: absolute;
    top: 0;
    content: "";
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background: #646464;
  }
  .area-overview .sec-address .box-no-photo .gmap,
  .area-overview .sec-address .box-photo .gmap{
    width: 100%;
  }
  /* list */
  .area-overview .sec-address .box-no-photo .list{
    margin: 0 0 25px;
    text-align: center;
  }
  .area-overview .sec-address .box-no-photo .list dt .space,
  .area-overview .sec-address .box-photo .list dt .space{
    margin-left: 1.5em;
  }
  /* box-photo */
  .area-overview .sec-address .box-photo .list{
    margin: 0 0 25px;
    text-align: center;
  }
  .area-overview .sec-address .box-photo .img-photo{
    width: 100%;
    float: none;
    margin: 0 0 25px;
  }
  /* headOffice */
  /* hakodate */
  .area-overview .sec-address .headOffice,
  .area-overview .sec-address .hakodate{
    margin-bottom: 30px;
  }

  /* ========================================================================
  // area-affiliated
  ======================================================================== */
  .area-affiliated{
    padding-top: 100px;
  }
  .area-affiliated:after{
    background: url(../img/bg_affiliated_01_tb.jpg) center center no-repeat;
    background-size: cover;
  }
  .area-affiliated .ttl-area{
    font-size: 16px;
  }
  .area-affiliated .ttl-area span{
    font-size: 34px;
  }
  .area-affiliated .logo-sanwa{
    margin-bottom: 0;
  }
  .area-affiliated .logo-sanwa img{
    max-height: 55px;
  }
  .area-affiliated .list .txt-address{
    font-size: 13px;
  }
  .area-affiliated .list .txt-tel{
    font-size: 24px;
  }
  .area-affiliated .list .txt-tel a{
    font-size: 29px;
  }
}

/* ==========================================================================
//
// SMARTPHONE
//
========================================================================== */
@media screen and (max-width:480px) {
  /* hero-page
  ---------------------------------------------------------- */
  .hero-page{
    background-image: url(../img/mainimg_01_sp.jpg);
  }
  /* ========================================================================
  // area-greeting
  ======================================================================== */
  .area-greeting{
    padding: 50px 0 80%;
    background-size: 150% auto;
  }
  .area-greeting .txt{
    margin-bottom:15px;
  }
  .area-greeting .txt-name{
    width: 100%;
    text-align: center;
  }
  .area-greeting .txt-name img{
    /* width: 40%; */
    max-width: 123px;
  }
  /* ==========================================================================
  // area-overview
  ========================================================================== */
  .area-overview .ttl-area{
    margin-bottom: 30px;
  }
  .area-overview .tbl-overview > tbody > tr.founded div{
    display: block;
  }
  /* tbl-sub
  ---------------------------------------------------------- */
  /* tbl-sub-01 */
  .area-overview .tbl-overview .tbl-sub-01,
  .area-overview .tbl-overview .tbl-sub-01 tbody,
  .area-overview .tbl-overview .tbl-sub-01 tr,
  .area-overview .tbl-overview .tbl-sub-01 th,
  .area-overview .tbl-overview .tbl-sub-01 td{
    display: block;
  }
  .area-overview .tbl-overview .tbl-sub-01 tr + tr{
    margin-top: 20px;
  }
  .area-overview .tbl-overview .tbl-sub-01 th{
    padding-right: 0;
  }
  /* tbl-sub-02 */
  .area-overview .tbl-overview .tbl-sub-02,
  .area-overview .tbl-overview .tbl-sub-02 tbody,
  .area-overview .tbl-overview .tbl-sub-02 tr,
  .area-overview .tbl-overview .tbl-sub-02 th,
  .area-overview .tbl-overview .tbl-sub-02 td{
    display: block;
  }
  .area-overview .tbl-overview .tbl-sub-02 tr + tr{
    margin-top: 10px;
  }
  .area-overview .tbl-overview .tbl-sub-02 th{
    padding-right: 0;
  }
  .area-overview .tbl-overview .tbl-sub-02 td:nth-child(3){
    text-align: right;
  }
  /* ==========================================================================
  // area-affiliated
  ========================================================================== */
  .area-affiliated{
    padding-top: 80px;
    padding-bottom: 60px;
  }
}