@charset "UTF-8";
/* ==========================================================================
//
// 768px(TABLET & SMARTPHONE)
//
========================================================================== */
@media screen and (max-width:768px){
  /* hero-cmn-page
  -------------------------------------------------------- */
  .hero-cmn-page .bg{
    background-image:url(../img/bg_mainimg_01_tb.jpg?=v1);
  }
  /* ttl-cmn-area
  -------------------------------------------------------- */
  .ttl-cmn-area{
    font-size: 19px;
  }
  /* ========================================================================
  // area-greeting
  ======================================================================== */
  .area-greeting{
    padding-top: 85px;
    padding-bottom: 90px;
  }
  .area-greeting .ttl-area{
    text-align: center;
  }
  .area-greeting .txt-name{
    margin: 55px 0 40px;
    font-size: 15px;
    text-align: center;
  }
  .area-greeting .ph-tb-sp{
    margin: 0 auto;
    max-width: 400px;
  }
  .area-greeting .img-motto{
    padding-top: 60px;
  }
  /* ========================================================================
  // area-overview
  ======================================================================== */
  .area-overview .tbl-overview > tbody > tr > th{
    width: 32%;
  }

  /* list */
  .area-overview .tbl-overview .list span.no-slash:after{
    margin: 0 0.5em;
    content: "／";
  }
  .area-overview .tbl-overview .list span br.only-tb-sp{
    display: inline-block !important;
  }
  /* list-rating */
  .area-overview .tbl-overview .list-rating li:nth-child(1):after,
  .area-overview .tbl-overview .list-rating li:nth-child(4):after{
    margin: 0;
    content: "";
  }
  .area-overview .tbl-overview .list-rating li:nth-child(2):before,
  .area-overview .tbl-overview .list-rating li:nth-child(5):before{
    content: "\A";
    white-space: pre;
  }
  .area-overview .sec-access .ttl-sec{
    text-align: center;
  }
  .area-overview .sec-access{
    border-bottom: none;
    padding-bottom: 0;
  }
  .area-overview .sec-access .box-office{
    width: 100%;
  }
  .area-overview .sec-access .box-office.main-office{
    padding-bottom: 20px;
  }
  .area-overview .sec-access .box-office.hakodate:before{
    position: absolute;
    left: 0;
    display: block;
    width: 100vw;
    height: 1px;
    background: #aaa;
    content: "";
  }
  .area-overview .sec-access .box-office dt,
  .area-overview .sec-access .box-office dd{
    text-align: center;
  }
  .area-overview .sec-access .box-office.hakodate dt{
    padding-top: 30px;
  }
  .area-overview .sec-access .box-office dd .photo,
  .area-overview .sec-access .box-office .map-wrap{
    float: none;
    width: 100%;
  }
  .area-overview .sec-access .box-office dd .photo{
    margin-bottom: 15px;
  }
  /* ========================================================================
  // area-history
  ======================================================================== */
  .area-history{
    padding-bottom: 90px;
  }
  .area-history dt{
    width: 260px;
  }
  .area-history dt span{
    padding: 8px 0;
  }
  .area-history dd{
    flex-wrap: wrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .area-history dd .txt{
    margin: 0 0 5px;
    width: 100%;
  }
  .area-history dd .photo{
    width: 100%;
  }
  /* ==========================================================================
  // area-affiliate
  ========================================================================== */
  .area-affiliate{
    padding: 85px 0 0;
  }
  .area-affiliate .ttl-area{
    margin-bottom: 20px;
  }
  /* sct
  -------------------------------------------------------- */
  .area-affiliate .sct .inner{
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
  }
  .area-affiliate .sct .img-logo{
    max-width: 166px;
  }
  .area-affiliate .sct .txt-name{
    font-size: 15px;
  }
  .area-affiliate .sct .txt-description{
    font-size: 10px;
  }
  /* list-office */
  .area-affiliate .sct .list-office{
    font-size: 12px;
  }
  .area-affiliate .sct .list-office .txt-tel{
    font-size: 29px;
  }
  .area-affiliate .sct .list-office .txt-tel .tel{
    font-size: 24px;
  }
  /* box-photo */
  .area-affiliate .box-photo{
    position: relative;
    width: 100%;
    max-height: none;
  }
  .area-affiliate .box-photo div:before {
    padding-top: 58.5%;
  }
}

/* ==========================================================================
//
// 480px(SMARTPHONE)
//
========================================================================== */
@media screen and (max-width:480px) {
  /* hero-cmn-page
  ---------------------------------------------------------- */
  .hero-cmn-page .bg{
    background-image:url(../img/bg_mainimg_01_sp.jpg?=v1);
  }
  /* ========================================================================
  // area-greeting
  ======================================================================== */
  .area-greeting .txt-name{
    margin-top: 25px;
    font-size: 12px;
  }
  .area-greeting .txt-name img{
    max-width: 160px;
  }
  .area-greeting .ph-tb-sp{
    width: 100%;
    max-width: none;
  }
  /* ========================================================================
  // area-overview
  ======================================================================== */
  .area-overview .ttl-area{
    margin: 0 0 30px;
  }
  .area-overview .tbl-overview .list-rating li:nth-child(6):after{
    margin: 0;
    content: "";
  }
  .area-overview .tbl-overview .list-rating li:nth-child(7):before{
    content: "\A";
    white-space: pre;
  }
  /* ========================================================================
  // area-history
  ======================================================================== */
  .area-history{
    padding-top: 80px;
  }
  .area-history dl{
    font-size: 12px;
  }
  .area-history dt,
  .area-history dd{
    margin: 10px 0;
  }
  .area-history dt{
    width: 140px;
  }
  .area-history dt span:nth-child(2){
    width: 3.5em;
  }
  .area-history dd{
    padding-left: 10px;
  }

  /* ========================================================================
  // area-affiliate
  ======================================================================== */
  /* sct
  -------------------------------------------------------- */
  .area-affiliate .sct .img-logo{
    width: 38%;
  }
  /* list-office */
  /* box-photo */
  .area-affiliate .box-photo div:before {
    padding-top: 93.8%;
  }
  .area-affiliate .box-photo img{
    width: auto;
    max-width: none;
    height: 100%;
    right: 0;
  }
}