@charset "utf-8";

/* module ------------------------------- */
.exp-block {
  border: 2px solid var(--c-blue);
  border-radius: 8px;
}
.exp-block h3 {
  background-color: var(--c-blue);
  color: #fff;
  text-align: center;
  padding: var(--space-24);
  font-size: var(--fs-24);
  border-radius: 5px 5px 0 0;
}
.exp-block ul {
  margin:var(--space-40) var(--space-48);
}

.feat-block__cont {
  background-color: #fff;
  padding: var(--space-32);
  border-radius: var(--space-fix-8);
}
.feat-block__cont h3 {
  margin-top: var(--space-24);
}
.feat-block__cont p {
  margin-bottom: 0;
}
.dec-block--pink {
  background-color: var(--c-red-light);
}

@container (max-width: 999px) {
  .feat-block { grid-template-columns: 1fr; }
  .feat-block img {max-width: 600px; display: block; margin-inline:auto;}
}

/* -----------------------------------
medical check
------------------------------------------ */
.m-check {
  background-color: #fff;
  padding: var(--space-48);
  margin: var(--space-56) auto;
}

@media (max-width: 840px) {
  .grid--check {
    display: block;
  }
  .grid-block__image {
    margin-bottom: 15px ;
  }
}

/* -----------------------------------
jihi
------------------------------------------ */
.jihi-block {
  background-color: var(--c-blue-light);
  padding: var(--space-48);
  margin:var(--space-56) auto 0;
}
.table--price th {
  width: 25%;
}
@media (max-width: 767px) {
  .table--price th,
  .table--price td {
    display: block;
    width: 100%;
  }
}

.btn-first {
  margin-top: var(--space-fix-8);
}
  .btn-first a {
    padding: var(--space-24) var(--space-80);
    text-decoration: none !important;
    display: inline-block;
  }

@media (max-width: 839px) {
  .btn-first a {
    display: block;
    background-color: var(--c-red);
    border-radius: 30vw;
  }
}

/* ----------------------------------------------
    about
------------------------------------------------ */
.grid--facility div h3 {
  margin: 0 auto var(--space-16);
}
.grid--facility div {
  background-color: var(--c-blue-light);
  border-radius: 8px;
  padding: var(--space-24);
}
.grid--facility div p {
  margin-bottom: 0;
}

@container (max-width: 860px) and (min-width: 601px)  {
  .about-related {grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 1030px) and (min-width: 601px)  {
  .grid--machine{grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------
    access
------------------------------------------------ */
.access-map {
  aspect-ratio: 2/1;
  overflow: hidden;
  background-color: #fff;
  border-radius: var(--space-fix-8);
}

/* ----------------------------------------------
    staff
------------------------------------------------ */
.stf-wrapper{
  position: relative;
  overflow: hidden;
}
.stf-title {
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--c-blue-dark) ;
  text-align: center;
}

.stf-cont {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  width: 86%;
}
.stf-cont--02 {
  text-align: right;
}

  .stf-cont__cont {
    max-width: 580px;
    margin: 0 auto var(--space-56);
  }
  .stf-cont__txt {
    display: inline-block;
    max-width: 580px;
    text-align: left;
    position: relative;
    padding-bottom: var(--space-80);
  }

.stf-img {
  position: absolute;
  left: 50%;
  border-radius: 8px;
  overflow: hidden;
}
  .stf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .stf-img--01 {
    top: 0;
    translate: 0 -40%;
    margin-left: min(60%, 380px);
    width: clamp(200px, 135.439px + 17.544vw, 360px);
    aspect-ratio: 3/4;
  }
  .stf-img--02 {
    top: 0;
    translate: -100% -50%;
    margin-left: calc(min(58%, 400px) * -1);
    width: clamp(200px, 167.719px + 8.772vw, 280px);
    aspect-ratio: 4/3;
  }
  .stf-img--03 {
    top: 50%;
    translate: -100% -90%;
    margin-left: calc(min(65%,460px) * -1);
    width: clamp(200px, 135.439px + 17.544vw, 360px);
    aspect-ratio: 4/3;
  }
  .stf-cont__txt::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../img/page/staff/img-staff-04.jpg) center center / cover no-repeat;
    width: clamp(320px, 263.509px + 15.351vw, 460px);
    aspect-ratio: 4/3;
    translate: -120% 0;
    border-radius: 8px;
  }


@container (max-width: 1400px) and (min-width: 1080px)  {
  .stf-cont__txt::before {
    background-image: url(../img/page/staff/img-staff-05.jpg);
  }
}

.stf-img__sp {
  display: none;
  margin-top: var(--space-48);
} 
  .stf-img__sp div {
    border-radius: 8px;
  }
@container (max-width: 1079px)  {
  .stf-img__sp {
    display: grid;
  }
}

.stf-info {
  padding: var(--space-64) 0 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--space-64) auto;
}
  .stf-info::before {
    content: "";
    width: 50%;
    height: 50%;
    
    position: absolute;
    top: 0;
    border-radius: var(--space-16);
  }
  .stf-history::before {
    left: 0;
    background-color: var(--c-blue-dark);
  }
  .stf-license::before {
    right: 0;
    background-color: var(--c-red);
  }

.stf-info h2 {
  font-size: var(--fs-32);
  padding: 0 clamp(12px, -2.526px + 3.947vw, 48px);
  position: relative;
  color: #fff;
}
.stf-info__cont {
  background-color: #fff;
  border-radius: var(--space-16);
  padding: var(--space-40) var(--space-56);
  width: 80%;
  position: relative;
}

.list--history li {
  border-bottom: 1px solid var(--c-gray);
  padding-bottom: var(--space-24);
  margin-top: var(--space-24);
  display: flex;
  gap: var(--space-32);
}
  .list--history li span {
    width: 4em;
    color: var(--c-blue);
    font-weight: 600;
  }

.stf-license{
  flex-direction: row-reverse;

}

@media (max-width: 1065px) {
  .list--history li {
    display: block;
  }
  .list--history li span {
    display: block;
  }
}

@media (max-width: 768px) {
  .over-clip {
    overflow: clip;
  }
  .stf-info {
    display: block;
    padding-top: 2em;
  }
  .stf-info__cont {
    width: 100%;
  }
  .stf-info::before {
    height: 90%;
  }
  .stf-history::before  {
    left: -6%;
    border-radius: 0 8px 0 0;
  }
  .stf-license::before  {
    right: -6%;
    border-radius: 8px 0 0 0;
  }

  .stf-info h2 {
    padding:0;
    margin-bottom: 1em;
  }
    .stf-license h2 {
      text-align: right;
    }
}

/* ----------------------------------------------
    flu（インフルエンザ・フルミスト システム流し込み）
------------------------------------------------ */
/* heading */
#flu .hA {
  font-size: var(--fs-38);
  text-align: center;
  font-weight: 600;
  margin: var(--space-80) 0 var(--space-64);
  padding-top: var(--space-80);
  background: url(../img/common/ic-heading-a.svg) center top / var(--space-80) auto no-repeat;
  color: var(--c-blue-dark);
}
#flu .hA::first-letter { color: var(--c-red); }
#flu .hA:first-child { margin-top: 0; }

#flu .hB {
  font-size: var(--fs-28);
  padding: var(--space-24) var(--space-32) calc(var(--space-24) + 3px);
  background: var(--c-blue);
  box-shadow: 3px 3px 0 var(--c-blue-dark);
  border-radius: var(--space-fix-8);
  color: #fff;
  margin: var(--space-80) 0 var(--space-48);
}

#flu .hC {
  font-size: var(--fs-24);
  padding-bottom: var(--space-16);
  font-weight: bold;
  color: var(--c-blue-dark);
  margin: var(--space-64) 0 var(--space-32);
  border-bottom: 2px solid var(--c-blue-dark);
}
#flu .hC::first-letter { color: var(--c-red); }

#flu .hD {
  position: relative;
  font-size: var(--fs-20);
  color: var(--c-blue-dark);
  font-weight: bold;
  margin: var(--space-56) 0 var(--space-32);
  padding-left: 1.5em;
}
#flu .hD::before {
  content: "";
  width: 1em;
  height: 5px;
  background-color: var(--c-red);
  position: absolute;
  left: 0;
  top: 0.6em;
}

/* list */
#flu .listDot li,
#flu .listCheck li { position: relative; margin: var(--space-fix-4) 0; }
#flu .listDot li { padding-left: 1em; }
#flu .listDot li::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--c-red);
  position: absolute;
  left: 0.25em;
  top: 0.75em;
}
#flu .listCheck li { padding-left: 2em; }
#flu .listCheck li::before {
  content: "check_box";
  font-family: var(--ff-symbol);
  font-variation-settings: 'FILL' 1;
  color: var(--c-red);
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: -0.3em;
}

/* table */
#flu .tblA {
  width: 100%;
  border: 1px solid var(--c-blue-dark);
}
#flu .tblA th,
#flu .tblA td {
  border: 1px solid var(--c-blue-dark);
  padding: var(--space-fix-12);
}
#flu .tblA th {
  background: var(--c-blue);
  color: #fff;
  width: 30%;
}
#flu .tblA td {
  background: #fff;
  color: #333;
}

/* decBox */
#flu .decBox {
  padding: var(--space-32);
  margin-bottom: var(--space-32);
  border-radius: var(--space-fix-8);
  background: #fff;
}
#flu .decBox01 { border: 1px solid var(--c-red); }
#flu .decBox02 { border: 1px solid var(--c-blue); }
#flu .decBox :is(h3, h4):first-child { margin-top: 0; margin-bottom: var(--space-16); }
#flu .decBox > :last-child { margin-bottom: 0; }
#flu .flu_point p { font-weight: 600; }

/* flexBox（3カラム） */
#flu .flexBox.flexCol3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}
#flu .flexBox .decBox { margin-bottom: 0; }

@container (max-width: 840px) {
  #flu .flexBox.flexCol3 { grid-template-columns: 1fr; }
}

/* button */
#flu .flu_btn { margin: var(--space-32) 0; }
#flu .flu_btn .linkArrow {
  display: block;
  position: relative;
  width: min(100%, 460px);
  font-size: var(--fs-20);
  padding: var(--space-24) var(--space-48);
  background-color: var(--c-blue-dark);
  color: #fff;
  text-align: center;
  line-height: 1.5;
  font-weight: 600;
  border-radius: var(--space-fix-8);
  border-bottom: 3px solid var(--c-blue);
  border-right: 3px solid var(--c-blue);
  text-decoration: none;
}
#flu .flu_btn .linkArrow::before {
  content: "";
  width: var(--space-fix-12);
  aspect-ratio: 1/1;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  right: var(--space-20);
  top: 50%;
  translate: 0 -50%;
  rotate: 45deg;
}