@charset "UTF-8";
/* COMMON・RESET */
#sa-common img { max-width: 100%; height: auto;}
#sa-common ul { margin: 0; list-style-type: none;}
#sa-common p { margin: 0; line-height: 1.8;}
#sa-common .mv { padding: 60px 0 0;}
#sa-common .mv-inr { width: 100%; min-width: 320px; max-width:1030px; margin: 0 auto; padding: 0 20px;}
#sa-common h2 { width: 100%; font-size: 28px; font-weight: 500;  text-align: center;}
#sa-common .notes { font-size: 12px;}
#sa-common .text-right { text-align: right!important;}
#sa-common .text-bold { font-weight: bold!important;}
#sa-common section .contents-inr { padding-top: 40px!important; padding-bottom: 40px!important;} 
@media print, (min-width: 768px) { 
  a[href^="tel:"] { pointer-events: none;}
  #sa-common section .contents-inr { padding-top: 80px; padding-bottom: 80px} 
}
#sa-common .flex-start { display: flex; justify-content: flex-start}
#sa-common .flex-between { display: flex; justify-content: space-between}
#sa-common .flex-center { display: flex; justify-content: center}
#sa-common .flex-between-center { display: flex; justify-content: space-between; align-items: center}
#sa-common .flex-center-center { display: flex; justify-content: center; align-items: center}
#sa-common .flex-end-center { display: flex; justify-content: flex-end; align-items: center}
#sa-common .flex-wrap { flex-wrap: wrap}
#sa-common .items-center { align-items: center}
#sa-common .direction-row-reverse { flex-direction: row-reverse}
/* SERVICE LINK */
.sec-sa-common { background: #eee;}
.sec-sa-common h2 { color: #333!important}
.sec-sa-common ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sec-sa-common ul li a { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 20px 15px 20px 20px; background: #fff; border-radius: 4px;}
.sec-sa-common ul .logo { width: 100px;}
.sec-sa-common ul .box-text { width: calc(100% - 120px); font-size: 12px; line-height: 1.5;}
.sec-sa-common ul .ttl { margin-bottom: 6px!important; color: #d62c29; font-size: 14px; font-weight: bold;}
.sec-sa-common ul .spot-baitoru .ttl { color: #edb200;}
.sec-sa-common ul .ba-next .ttl { color: #004ea2;}
.sec-sa-common ul .ba-pro .ttl { color: #7b0000;}
.sec-sa-common ul .baitoru-talk .ttl { color: #06b46b;}
.sec-sa-common ul .hatarako .ttl { color: #f08200;}
.sec-sa-common ul .kobot .ttl { color: #009bdc;}
.sec-sa-common ul .kaigo .ttl { color: #fa508c;}
@media only screen and (max-width: 767px) {
  .sec-sa-common ul li:nth-child(n + 2) { margin-top: 20px;}
}
@media print, (min-width: 768px) {
  .sec-sa-common ul li { width: 49%;}
  .sec-sa-common ul li:nth-child(n + 3) { margin-top: 20px;}
  .sec-sa-common ul li a { border: 1.5px solid #fff;}
  .sec-sa-common ul li a:hover { color: #333!important; border-color: #d82d2a;}
  .sec-sa-common ul li.spot-baitoru a:hover  { border-color: #edb200;}
  .sec-sa-common ul li.ba-next a:hover  { border-color: #004ea2;}
  .sec-sa-common ul li.ba-pro a:hover  { border-color: #7b0000;}
  .sec-sa-common ul li.baitoru-talk a:hover  { border-color: #06b46b;}
  .sec-sa-common ul li.hatarako a:hover  { border-color: #f08200;}
  .sec-sa-common ul li.kobot a:hover  { border-color: #009bdc;}
  .sec-sa-common ul li.kaigo a:hover  { border-color: #fa508c;}
  .sec-sa-common ul .logo { width: 150px;}
  .sec-sa-common ul .box-text { width: calc(100% - 170px); font-size: 13px;}
  .sec-sa-common ul .box-text .ttl { font-size: 16px;}
}
/* MODAL */
.modal-container, .modal-tel-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8); overflow: auto; opacity: 0; visibility: hidden; transition: .3s; z-index: 20;}
.modal-container:before, .modal-tel-container:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;}
.modal-container.active, .modal-tel-container.active { opacity: 1; visibility: visible;}
.modal-body { position: relative; display: inline-block; vertical-align: middle; width: 90%; max-width: 760px;}
.modal-tel-body { position: relative; display: inline-block; vertical-align: middle; width: 50%; max-width: 360px;}
.modal-tel-body img { width: 90%;}
.modal-close, .modal-tel-close { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 10px; width: 40px; height: 40px; font-size: 40px; color: #000; cursor: pointer;}
.modal-content { padding: 40px 20px 20px; text-align: center; background: #fff; border-radius: 6px;}
@media only screen and (max-width: 767px) {
  .modal-content { width: calc(100% - 40px);}
}