@charset "utf-8";

/*========================
 見出し
=========================*/
#page-mv {
    background: url(../img/common/bg03.jpg) no-repeat center top;
    background-size: cover;
    line-height: 1.4;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#page-mv .ttl {
    font-size: 28px;
    font-weight: bold;
    color: #771b2b;
}

/*========================
 下層ページ
=========================*/
/*===== [#company] =====*/
#company {
}
/*--- [会社概要] ---*/
#company #gaiyo {
  padding: 30px 3%;
}
#company #gaiyo table {
    width: 100%;
    line-height: 1.4;
    border-top: 1px solid #000;
    max-width: 900px;
    margin: 0 auto;
}
#company #gaiyo table tr {
    border-bottom: 1px solid #000;
}
#company #gaiyo table tr th {
    width: 140px;
    text-align: center;
    padding: 20px 2%;
    font-weight: bold;
}
#company #gaiyo table tr td {
    vertical-align: middle;
    padding: 20px 2%;
}
#company #gaiyo table tr td.kanren a {
    color: #0101c5;
    display: block;
}

/*===== [#blog] =====*/
#blog {
}
/*--- [一覧 #blog-list] ---*/
#blog #blog-list {
  padding: 30px 0;
}
#blog #blog-list .list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
}
#blog #blog-list .list-box .box {
  width: 49%;
    border: 1px solid #f33180;
  background-color: #fff;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#blog #blog-list .list-box .box .img {
  width: 42%;
  line-height: 0;
}
#blog #blog-list .list-box .box .text-box {
  width: 55%;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#blog #blog-list .list-box .box .text-box .txt .day {
  font-size: 14px;
  color: #555;
  padding-bottom: 2px;
  border-bottom: 1px solid #f33180;
  margin-bottom: 8px;
}
#blog #blog-list .list-box .box .text-box .txt .ttl {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
}
#blog #blog-list .list-box .box .text-box .link a {
  display: block;
  width: 90px;
  background-color: #fff;
  color: #f33180;
  border: #f33180 1px solid;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  padding: 2px 0;
  margin-left: auto;
}
#blog #blog-list .list-box .box .text-box .link a:hover{
  background-color: #f33180;
  color: #fff;
  border: #f33180 1px solid;
}
/*--- [詳細 #blog-page] ---*/
#blog #blog-page {
  padding: 30px 0;
}
#blog #blog-page .page-box {
  border: 1px solid #f33180;
  background-color: #fff;
  padding: 3%;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
#blog #blog-page .page-box .day {
  font-size: 14px;
  line-height: 1.4;
  color: #555;
  margin-bottom: 20px;
}
#blog #blog-page .page-box h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  padding-bottom: 5px;
  border-bottom: 1px solid #f33180;
  margin-bottom: 30px;
}
#blog #blog-page .page-box .img {
  margin-bottom: 20px;
}
#blog #blog-page .page-box .img img {
  margin-bottom: 20px;
}

/*===== [#reservation] =====*/
#reservation {
}
/*--- [#contact-box] ---*/
#reservation #contact-box {
    padding: 30px 3%;
}
#reservation .form-box {
}
#reservation .form-box .nitiji p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#reservation .form-box .nitiji p span {
    display: block;
    width: 49%;
}
#reservation .form-box .nitiji p .day {
}
#reservation .form-box .nitiji p .time {
}

/*===== [#faq-page] =====*/
#faq-page {
}
/*--- [#faq] ---*/
#faq-page #faq {
    padding: 30px 3%;
}
#faq-page #faq .faq-box {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#faq-page #faq .faq-box .box {
    width: 49%;
    background-color: #f1f6fb;
    line-height: 1.4;
    padding: 3%;
    margin-bottom: 15px;
}
#faq-page #faq .faq-box .box.w100 {
    width: 100%;
}
#faq-page #faq .faq-box .box dl {
}
#faq-page #faq .faq-box .box dl dt {
    font-size: 18px;
    font-weight: bold;
    color: #5988c1;
    background: url(../img/common/icon-q.png) no-repeat left top;
    background-size: 35px;
    border-bottom: 2px solid #9abfeb;
    padding: 6px 0 12px 45px;
    margin-bottom: 15px;
}
#faq-page #faq .faq-box .box dl dd {
    background: url(../img/common/icon-a.png) no-repeat left top;
    background-size: 35px;
    padding: 7px 0 7px 45px;
}

/*===== [#menu] =====*/
#menu {
}
/*--- [#menu-list] ---*/
#menu #menu-list {
    padding: 30px 0;
}
#menu #menu-list .menu-box {
    padding: 0 3%;
    margin-bottom: 30px;
}
#menu #menu-list .menu-box .menu-tbl {
    line-height: 1.4;
    width: 100%;
    margin-bottom: 15px;
}
#menu #menu-list .menu-box .menu-tbl tr {
}
#menu #menu-list .menu-box .menu-tbl tr th {
    font-weight: bold;
    vertical-align: middle;
    padding: 15px 2%;
    background-color: #ffe59d;
    border: 1px solid #c1992a;
    text-align: center;
}
#menu #menu-list .menu-box .menu-tbl tr td {
    vertical-align: middle;
    padding: 15px 2%;
    background-color: #fff;
    border: 1px solid #c1992a;
    text-align: center;
}
#menu #menu-list .menu-box .text {
}

/*===== [#staff] =====*/
#staff {
}
/*--- [#staff-list] ---*/
#staff #staff-list {
    padding: 30px 0;
}
#staff #staff-list .box {
    padding: 0 3%;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#staff #staff-list .box .img {
    width: 37%;
}
#staff #staff-list .box .text-box {
    width: 60%;
}
#staff #staff-list .box .text-box table {
    line-height: 1.4;
    width: 100%;
}
#staff #staff-list .box .text-box table tr {
    border-bottom: 1px dashed #c9c6c6;
}
#staff #staff-list .box .text-box table tr th {
    width: 30%;
    font-weight: bold;
    vertical-align: middle;
    padding: 15px 2%;
}
#staff #staff-list .box .text-box table tr td {
    vertical-align: middle;
    padding: 15px 2%;
}
#staff #staff-list .box .text-box dl {
    width: 100%;
    line-height: 1.4;
    padding: 15px 2%;
    border-bottom: 1px dashed #c9c6c6;
}
#staff #staff-list .box .text-box dl dt {
    font-weight: bold;
    margin-bottom: 10px;
}
#staff #staff-list .box .text-box dl dd {
}

/*===== [#first] =====*/
#first {
}
/*--- [#top-step] ---*/
#first #top-step {
    padding: 30px 0;
}
#first #top-step .top-hx {
    margin-bottom: 25px;
}
#first #top-step .top-hx .hx-img img {
    height: 175px;
}
#first #top-step .step-box {
    position: relative;
    width: 90%;
    max-width: 850px;
    margin: 0 auto;
    padding-left: 37px;
    padding-top: 16px;
}
#first #top-step .step-box .icon {
    width: 75px;
    position: absolute;
    top: 0;
    left: 0;
}
#first #top-step .step-box h3 {
    width: 43%;
    background-color: #ff8fa7;
    border-radius: 10px;
    line-height: 1.4;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 10px 3% 10px 45px;
    text-align: center;
}
#first #top-step .step-box .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 3px solid #ff8fa7;
    padding-left: 37px;
    padding-bottom: 15px;
}
#first #top-step .step-box.last .box {
    border-left: none;
}
#first #top-step .step-box .box .img {
    width: 37%;
}
#first #top-step .step-box .box .text-box {
    width: 60%;
    padding-top: 10px;
}
#first #top-step .step-box .box .text-box .text {
}


/*===============================================
    ■tablet 画面の横幅が800pxまで
===============================================*/
@media screen and (max-width: 800px) {
/*===== [#blog] =====*/
  #blog #blog-list .list-box .box {
    width: 100%;
  }
/*===== [#faq-page] =====*/
  #faq-page #faq .faq-box .box {
    width: 100%;
  }
}

/*===============================================
    ■smart 画面の横幅が570pxまで
===============================================*/
@media screen and (max-width: 570px) {
/*===== [#company] =====*/
  #company #gaiyo table tr th {
    display: block;
    width: 100%;
    padding: 8px 2%;
    text-align: left;
    border-bottom: 1px dashed #8f8f8f;
  }
  #company #gaiyo table tr th br {
    display: none;
  }
  #company #gaiyo table tr td {
    display: block;
    width: 100%;
    padding: 15px 2%;
  }
/*===== [#blog] =====*/
  /*----- #blog-list -----*/
  #blog #blog-list .list-box .box .img {
    width: 100%;
    margin-bottom: 10px;
  }
  #blog #blog-list .list-box .box .text-box {
    width: 100%;
  }
  #blog #blog-list .list-box .box .text-box .txt {
    margin-bottom: 25px;
  }
  #blog #blog-list .list-box .box .text-box .txt .ttl {
    line-height: 1.4;
  }
  #blog #blog-list .list-box .box .text-box .link a {
    width: 100%;
    font-size: 15px;
    padding: 8px 0;
  }
  #blog #blog-list .list-box .box.last {
    margin-bottom: 0;
  }
  /*----- #blog-page -----*/
  #blog #blog-page .page-box {
    padding: 4%;
  }
/*===== [#staff] =====*/
  #staff #staff-list .box .img {
    width: 60%;
    max-width: 600px;
    margin: 0 auto 10px;
  }
  #staff #staff-list .box .text-box {
    width: 100%;
  }
/*===== [#first] =====*/
  #first #top-step .top-hx {
    align-items: flex-end;
  }
  #first #top-step .top-hx .hx-img img {
    height: 100px;
  }
  #first #top-step .step-box h3 {
    width: 100%;
  }
  #first #top-step .step-box .box .img {
    width: 95%;
  }
  #first #top-step .step-box .box .text-box {
    width: 95%;
  }
}