@charset "utf-8";
/* CSS Document */
.blc_service .blc_in .mv_newopen {
    position: absolute;
    top: -46px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: blinking_1 1s ease-in-out infinite alternate;
    padding: 15px;
}
@keyframes blinking_1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.blc_service .blc_in .mv_newopen p {
    font-weight: bold;
    font-size: 18px;
    background-color: #00B9EF;
    padding: 4px 12px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
}


@media print, screen and (min-width: 768px) {
    .blc_service .blc_in .mv_newopen {
        top: -60px;
        left: 0;
    }
    
    .blc_service .blc_in .mv_newopen p {
        font-size: 24px;
        padding: 6px 18px;
        display: inline-block;
    }
}

@media print, screen and (min-width: 768px) {
    .parts_facility .blc_in {
        -webkit-flex-wrap: inherit;
        -moz-flex-wrap: inherit;
        -ms-flex-wrap: inherit;
        flex-wrap: inherit;
        justify-content: space-between;
    }

    .parts_facility .box {
        width: 32%;
        float: left;
        padding: 36px 20px;
        margin: 0
    }
    
    .parts_facility .box dt {
        width: 100%;
    }
    
    .parts_facility .box dt .ex-txt {
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        align-items: flex-start;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -ms-flex-pack: center
    }

    
    .parts_facility .box dt .btn_item {
        font-size: 2.8rem;
    }
    
    .parts_facility .box dd .location {
        display: flex;
        flex-direction: column;
    }
    
    .parts_facility .box dd .location .map {
        width: inherit;
        display: inherit;
        height: inherit;
        vertical-align: inherit;
    }
}

.newopen {
    position: relative;
}
.newopen_icon {
    position: absolute;
    top: 50%;
    right: -8px;
    z-index: 10;
}
.newopen_icon img {
    width: 90px;
    animation: pulsation .7s alternate infinite;
}
@keyframes pulsation {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1.1); }
}

@media print, screen and (min-width:768px) {
  .nav_page li .btn_item {
    vertical-align: middle;
    display: table-cell;
    width: 12em;
  }
}

/*---------------------------------
施設紹介・アクセスのメニュー体裁
---------------------------------*/
@media print, screen and (min-width:768px) {
    body.facility .nav_wrapper .nav_page {
        display: flex;
    }
}

#murano .murano_open {
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 24px;
    animation: blinking 1s ease-in-out infinite alternate;
    color: #EC5555;
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*---------------------------------
問合せフォームの支店リスト体裁
---------------------------------*/
.content_page #contact_info .parts_facility .box {
    padding: 36px 20px;
}

@media print, screen and (min-width: 768px) {
    .content_page #contact_info {
        display:  flex;
        flex-direction: column;
        align-items: center;
    }
    
    /*.content_page #contact_info .parts_facility {
        width: 100%;
    }*/
    
    .content_page #contact_info .parts_facility .ex-txt {
        font-size: 14px;
    }
    .content_page #contact_info .parts_facility .btn_item {
        font-size: 22px;
    }
    
}


/*---------------------------------
施設紹介ページのマップのサイズ調整
---------------------------------*/
@media print, screen and (min-width:768px) {
  .blc_body .boxR {
    width: 56%
  }
}

/*---------------------------------
施設紹介ページSNSリンク設定
---------------------------------*/
table .blog td a {
    margin-bottom: 8px;
}

@media print, screen and (min-width:768px) {
  table .blog td a {
        margin-right: 8px;
        margin-bottom: 0;
    }
}

/*---------------------------------
空き状況
---------------------------------*/
  :root{
    --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
    --ok:#16a34a; --warn:#d97706; --ng:#dc2626;
    --brand:#5281B0; --tabbg:#f8fafc;
  }
  .availability{max-width:800px;margin:0 auto;padding:16px}
  h1{font-size:18px;margin:0 0 6px}
  .sub{color:var(--muted);font-size:13px;margin:0 0 10px}

  /* tabs */
  .tabs [type="radio"]{position:absolute;opacity:0;pointer-events:none}
  .tablabels{display:flex;gap:6px;flex-wrap:wrap}
  .tablabels label {
    font-size: 14px;
    padding:8px 14px;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:#fff;
    color:var(--ink);
    cursor:pointer;font-weight:600;
  }
  .tablabels label:hover{background:var(--tabbg)}
  #tab-day:checked ~ .tablabels label[for="tab-day"],
  #tab-short:checked ~ .tablabels label[for="tab-short"],
  #tab-gh:checked ~ .tablabels label[for="tab-gh"]{
    background:#fff;border-color:var(--brand);color:var(--brand);position:relative;z-index:2;
  }
  .panels{border:1px solid var(--line);border-radius:0 12px 12px 12px;background:#fff;position:relative;z-index:1}
  .panel{display:none;padding:14px}
  #tab-day:checked ~ .panels .day{display:block}
  #tab-short:checked ~ .panels .short{display:block}
  #tab-gh:checked ~ .panels .gh{display:block}

  /* weekbar */
  .weekbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .cell{border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
  .dow {
    font-size:14px;
    color:var(--muted)
    }

  .stat{display:block;margin-top:6px;font-size:22px;font-weight:700}
  .oktxt{color:var(--ok)} .warntxt{color:var(--warn)} .ngtxt{color:var(--ng)}
  .legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:8px}
  .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
  .ok{background:var(--ok)} .warn{background:var(--warn)} .ng{background:var(--ng)}
  .note{font-size:12px;color:var(--muted);margin-top:10px}
  @media (max-width:640px){
    .weekbar{grid-template-columns:repeat(2,1fr)}
  }
  @media print{.tablabels{display:none}}


/*---------------------------------
フッターポリシーリンク
---------------------------------*/
#footerIn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footerIn a.policy_link {
    font-size: 14px;
    color: #ccc;
}


