@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*
i-functions
-----------------------------------------------------*/
/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
day
-----------------------------------------------------*/
.p-day .-img {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-day .-img {
    display: flex;
    margin-bottom: 48px;
  }
  .p-day .-img img {
    width: 33.3333333333%;
  }
}
.p-day .-tabarea {
  display: flex;
  cursor: pointer;
  gap: 4%;
  margin-bottom: clamp(42px, 0.76vw + 39.6px, 52px);
}
@media screen and (min-width: 768px) {
  .p-day .-tabarea {
    margin-left: 25%;
  }
}
.p-day .-tabarea .-tab {
  width: 48%;
  display: block;
  color: #038c3e;
  font-size: clamp(22px, 0.61vw + 20.1px, 30px);
  border: 1px solid #038c3e;
  border-radius: 10px;
  padding: 0.5em 1em;
}
.p-day .-tabarea .-tab:hover {
  opacity: 0.8;
}
.p-day .-tabarea .-tab.-active {
  color: #fff;
  background: #038c3e;
}
.p-day .-panel {
  display: none;
}
.p-day .-panel.-active {
  display: block;
}
.p-day .-times {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.p-day .-times .-time {
  display: flex;
  align-items: center;
  width: 23%;
  margin-right: 2%;
  color: #fff;
  font-size: clamp(24px, 0.76vw + 21.6px, 34px);
  line-height: 1.3;
  font-weight: 600;
  background: #7abf85;
  border-radius: 10px;
  padding: 0 0.5em;
  margin-bottom: clamp(14px, 0.31vw + 12.9px, 18px);
}
.p-day .-times .-time i {
  font-size: clamp(20px, 0.76vw + 17.6px, 30px);
  margin-right: 0.7em;
}
.p-day .-times .-item {
  display: flex;
  align-items: center;
  width: 75%;
  font-size: clamp(26px, 0vw + 26px, 26px);
  line-height: 1.3;
  border: 1px solid #7abf85;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: clamp(14px, 0.31vw + 12.9px, 18px);
}/*# sourceMappingURL=day.css.map */