@charset "utf-8";
/*--------------------------------------------------------------------------------
 
  main visual

--------------------------------------------------------------------------------*/
.mv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--side-space), 1fr) repeat(2, minmax(0, calc((var(--base-width) / 2) * 1px))) minmax(var(--side-space), 1fr);
  grid-template-rows: 1fr auto;
  row-gap: var(--space-s);
  container-type: inline-size;
}

/*--------------------------------------------------------------------------------
  .mv_txt
--------------------------------------------------------------------------------*/
.mv_txt {
  background-color: rgb(80 80 80 / 0.8);
  color: #FFF;
  grid-area: 1 / 3 / 2 / 5;
  position: relative;
  z-index: 1;
  text-align: left;
  align-self: end;
  padding: var(--inner-space-s);
  line-height: var(--lh-s);
  font-size: min(2.75cqw, 1rem);
  font-family: var(--ff-min);
  font-weight: 400;
  white-space: nowrap;
}
.mv_txt-main {
  font-size: var(--fs-2l);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .mv_txt {
    grid-area: 1 / 2 / 2 / 5;
    justify-self: end;
  }
}

/*--------------------------------------------------------------------------------
  .mv-slider
--------------------------------------------------------------------------------*/
.mv-slider {
  grid-area: 1 / 1 / 3 / 5;
  min-width: 0;
  overflow: hidden;
}
.mv-slider img {
  width: 100%;
  height: 100%;
  max-height: 720px;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: center center;
}

/*--------------------------------------------------------------------------------
  .mv-slider_dots
--------------------------------------------------------------------------------*/
.mv-slider_dots {
  pointer-events: none;
  grid-area: 2 / 1 / 3 / 5;
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-s);
}

/*--------------------------------------------------------------------------------
 
  banner

--------------------------------------------------------------------------------*/
@media not (max-width: 640px) {
  .bnr-list { --col: 3; }
  .bnr-list:has(> li:nth-child(4)) { --col: 2; --max-width: 1000px; }
}
@media (max-width: 640px) { .bnr-list { --col: 1; --max-width: 500px; } }
.bnr-list {
  list-style: none;
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  justify-content: center;
  gap: var(--space-s);
}

/*--------------------------------------------------------------------------------
 
  instagram

--------------------------------------------------------------------------------*/
.insta-btn {
  --btn-txt: #C80064;
  --btn-txt-hover: #FFF;
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-outline: 1px solid #C80064;
  --btn-outline-hover: 1px solid #C80064;
  --btn-linear-bg: #C80064;
  margin-top: var(--space-m);
}

/*--------------------------------------------------------------------------------
 
  health

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .health-hd
--------------------------------------------------------------------------------*/
.health-hd {
  background-image: url(../image/top/health-hd_bg.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  background-color: #A4ADB2;
  padding-block: var(--space-2l);
}
.health-hd_content {
  text-align: left;
  color: #FFF;
}
@media (max-width: 640px) {
  .health-hd {
    font-size: 90%;
    background-position: 82% top;
    padding-top: var(--space-3l);
  }
}
.health-hd_txt-main {
  font-family: var(--ff-min);
  font-weight: 500;
  font-size: var(--fs-4l);
}
.health-hd_txt {
  font-size: var(--fs-3m);
  line-height: var(--lh-l);
  margin-top: var(--space-2s);
}

/*--------------------------------------------------------------------------------
  .health
--------------------------------------------------------------------------------*/
.health-sec {
  padding-block: var(--space-2l);
}
@media not (max-width: 640px) { .health { --col: 3; } }
@media (max-width: 640px) { .health { --col: 2; } }
.health {
  --link-color: var(--txt-color);
  --link-color-hover: var(--txt-color);
  --link-deco: none;
  --link-deco-hover: none;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  justify-content: center;
  gap: var(--space-l) var(--space-s);
}
.health_img {
  aspect-ratio: 3 / 1.75;
  object-fit: cover;
}
.health_txt {
  font-size: var(--fs-3m);
  line-height: var(--lh-s);
  margin-top: 0.75rem;
}
@media (max-width: 640px) {
  .health {
    row-gap: var(--space-m);
  }
}

/*--------------------------------------------------------------------------------
 
  info

--------------------------------------------------------------------------------*/
.info {
  --archive-list-max-width: 100%;
  --archive-list-mg-inline: 0;
  --archive-list-border-color: var(--border-color);
  --archive-list-item-pd-block: 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-s);
}
@media not (max-width: 640px) {
  .info-sec {
    background: url(../image/top/info_bg.jpg?v=2) no-repeat center bottom;
    padding-block: var(--space-l);
  }
  .info {
    padding-left: 620px;
  }
}
@media (max-width: 640px) {
  .info-sec {
    --container-side-space: 0;
    background: url(../image/top/info_bg-sp.jpg) no-repeat center top;
    background-size: 100% auto;
    background-color: #E9EBEB;
    padding-top: 50%;
    padding-bottom: var(--space-2l);
  }
  .info {
    padding-inline: var(--side-space);
  }
}
.info_hd {
  --link-deco: none;
  --link-deco-hover: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.info_ttl {
  font-family: var(--ff-min);
  font-size: var(--fs-3l);
  font-weight: 500;
}
.info_btn {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.info_btn:before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  line-height: 1;
  background: currentColor;
  color: var(--color-base);
  mask-image: var(--icon-list);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}

/*--------------------------------------------------------------------------------
 
  medical

--------------------------------------------------------------------------------*/
@media not (max-width: 640px) { .medical { --col: 3; --icon-size: 5rem; } }
@media (max-width: 640px) { .medical { --col: 1; --icon-size: 5.5rem; } }
.medical-sec {
  background-color: #FFF;
  padding-block: var(--space-2l);
}
.medical {
  --link-color: var(--txt-color);
  --link-color-hover: var(--txt-color);
  --link-deco: none;
  --link-deco-hover: none;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  justify-content: center;
}
.medical_item {
  border: 1px solid var(--border-color);
}
.medical_item a {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  padding: var(--space-s) var(--inner-space-s);
}
@media not (max-width: 640px) {
  .medical {
    border-top: 1px solid var(--border-color);
  }
  .medical_item {
    border-left: 0;
    border-top: 0;
  }
  .medical_item:first-of-type,
  .medical_item:nth-of-type(4) {
    border-left: 1px solid var(--border-color);
  }
}
@media (max-width: 640px) {
  .medical_item:not(:first-of-type) {
    border-top: 0;
  }
}
@media (hover: hover) {
  .medical_item a:hover {
    background-color: var(--bg-base-light);
  }
}
.medical_icon img {
  width: var(--icon-size);
}
.medical_ttl {
  font-family: var(--ff-min);
  font-size: var(--fs-2l);
  font-weight: 400;
}
.medical_txt {
  text-align: left;
}

/*--------------------------------------------------------------------------------
 
  breath

--------------------------------------------------------------------------------*/
@media not (max-width: 640px) {
  .breath-sec {
    display: grid;
    grid-template-columns: minmax(var(--side-space), 1fr) repeat(2, minmax(0, calc((var(--base-width) / 2) * 1px))) minmax(var(--side-space), 1fr);
    grid-template-rows: var(--space-2l) auto 1fr var(--space-l);
  }
  .breath-sec:before {
    content: "";
    grid-area: 1 / 1 / 4 / 5;
    background: url(../image/top/breath_bg.jpg) no-repeat center top;
  }
  .breath-logo,
  .breath_content * {
    position: relative;
    z-index: 2;
  }
  .breath-logo {
    grid-area: 2 / 3 / 3 / 4;
    padding-top: var(--inner-space-l);
    padding-left: var(--inner-space-l);
  }
  .breath_content {
    grid-area:  3 / 3 / 4 / 4;
    padding-left: var(--inner-space-l);
    text-align: left;
  }
  .breath-sec:after {
    content: "";
    grid-area: 2 / 3 / 5 / 5;
    background-color: #FFF;
  }
  .breath_txt {
    margin-top: var(--space-s);
  }
}
@media (max-width: 640px) {
  .breath_content {
    background-color: #FFF;
    margin-inline: var(--side-space);
    margin-top: calc(-1 * var(--space-m));
    padding: var(--space-m) var(--inner-space-m);
  }
}
.breath_btn {
  margin-top: var(--space-m);
}

/*--------------------------------------------------------------------------------
  .breath-logo
--------------------------------------------------------------------------------*/
.breath-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: 1.5rem;
}
.breath-logo_main {
  width: 300px;
}
.breath-logo_mark {
  width: 110px;
}
@media (max-width: 640px) {
  .breath-logo {
    background: url(../image/top/breath_bg.jpg) no-repeat center top;
    background-size: auto 350px;
    flex-direction: column;
    padding-block: var(--space-l) calc(var(--space-l) + var(--space-m));
  }
  .breath-logo_main {
    order: 2;
  }
  .breath-logo_mark {
    width: 90px;
  }
}

/*--------------------------------------------------------------------------------
 
  links

--------------------------------------------------------------------------------*/
.link-list {
  --btn-width: fit-content;
  --btn-pd-side: min(1.25em, 1.25rem);
  --newwin-size: 0.75rem;
  --newwin-mgr: 0;
  --newwin-mgt: -1rem;
  --newwin-mgb: 0;
  --link-color: var(--txt-color);
  --link-color-hover: var(--txt-color);
  --link-deco: none;
  --link-deco-hover: none;
  list-style: none;
  display: grid;
}
.link-list li {
  background-color: #FFF;
  line-height: var(--lh-s);
}
.link-list a {
  display: grid;
  padding: var(--space-s) var(--inner-space-s);
}
.link-list_img {
  margin-top: 0.5rem;
  align-self: center;
}
.link-list_txt {
  align-self: center;
  margin-block: 1.25rem;
}
.link-list_btn {
  justify-self: center;
  margin-block: 0.5rem;
}
@media not (max-width: 640px) {
  .link-list {
    grid-auto-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
  }
  .link-list li:not(:first-child) {
    border-left: 1px solid var(--border-color);
  }
  .link-list li,
  .link-list a {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
@media (max-width: 640px) {
  .link-list li:not(:first-child) {
    border-top: 1px solid var(--border-color);
  }
}