/* =========================================================
   塩釜すし哲 営業日カレンダー
   style.css  v1.1
   ========================================================= */


/* ---------------------------------------------------------
   基本設定
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

html {
  background: #ffffff;
}

body {
  background: #ffffff;
  color: #292929;
  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  -webkit-text-size-adjust: 100%;
}


/* ---------------------------------------------------------
   公開カレンダー全体
   --------------------------------------------------------- */

.public-page {
  background: #ffffff;
}

.calendar-wrap {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
  padding: 40px 24px 24px;

  background: #ffffff;
}


/* ---------------------------------------------------------
   タイトル
   --------------------------------------------------------- */

.calendar-head {
  margin: 0 0 28px;
  padding: 0;

  text-align: center;
}

.eyebrow {
  display: block;

  margin: 0 0 10px;

  color: #668b72;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 400;

  letter-spacing: .30em;
}

.calendar-head h1 {
  margin: 0 0 9px;

  color: #292929;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 29px;
  font-weight: 500;

  line-height: 1.5;
  letter-spacing: .08em;
}

.calendar-head p {
  margin: 0;

  color: #77746e;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 13px;

  line-height: 1.8;
  letter-spacing: .04em;
}


/* ---------------------------------------------------------
   月移動
   --------------------------------------------------------- */

.month-nav {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  align-items: center;

  width: 100%;
  max-width: 520px;

  margin: 0 auto 25px;
}

.month-nav strong {
  color: #292929;

  text-align: center;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 20px;
  font-weight: 500;

  white-space: nowrap;
}

.month-nav a {
  color: #5f846b;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size: 13px;

  text-decoration: none;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.month-nav a:hover {
  color: #174f34;
}

.month-nav a:first-child {
  text-align: left;
}

.month-nav a:last-child {
  text-align: right;
}


/* ---------------------------------------------------------
   店舗カレンダー
   --------------------------------------------------------- */

.store-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 26px;

  width: 100%;
}

.store-card {
  min-width: 0;

  padding: 27px 28px 21px;

  background: #ffffff;

  border: 1px solid #e4e4df;

  box-shadow:
    0 5px 20px rgba(30, 40, 32, .045);
}

.store-card h2 {
  margin: 0 0 19px;
  padding: 0 0 15px;

  color: #174f34;

  border-bottom: 1px solid #e8e8e3;

  text-align: center;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 20px;
  font-weight: 500;

  line-height: 1.5;
  letter-spacing: .08em;
}


/* ---------------------------------------------------------
   カレンダー本体
   --------------------------------------------------------- */

.cal-grid {
  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 4px;

  width: 100%;
}


/* 曜日 */

.cal-week {
  padding: 5px 0 8px;

  color: #777;

  text-align: center;

  font-size: 12px;
  font-weight: 400;
}

.cal-week.sun {
  color: #b26666;
}

.cal-week.sat {
  color: #5b7d96;
}


/* 空欄・日付 */

.cal-empty,
.cal-day {
  aspect-ratio: 1 / 1;

  min-width: 0;
  min-height: 38px;
}

.cal-day {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0 auto;

  width: 100%;
  max-width: 54px;

  border-radius: 50%;

  color: #555;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size: 13px;
  font-weight: 400;
}

.cal-day span {
  position: relative;
  z-index: 2;
}


/* 日曜日 */

.cal-day.sun {
  color: #b76d6d;
}


/* 土曜日 */

.cal-day.sat {
  color: #66869d;
}


/* ---------------------------------------------------------
   休業日
   --------------------------------------------------------- */

.cal-day.holiday {
  background: #f4dddd;

  color: #914b4b;

  font-weight: 600;
}


/* ---------------------------------------------------------
   今日
   --------------------------------------------------------- */

.cal-day.today {
  box-shadow:
    inset 0 0 0 1.5px #568267;
}


/*
   今日が休業日の場合も
   緑の輪郭を残す
*/

.cal-day.today.holiday {
  box-shadow:
    inset 0 0 0 1.5px #568267;
}


/* ---------------------------------------------------------
   休業日の凡例
   --------------------------------------------------------- */

.legend {
  margin: 16px 0 0;

  color: #8a8883;

  text-align: right;

  font-size: 11px;
}

.legend i {
  display: inline-block;

  width: 11px;
  height: 11px;

  margin-right: 5px;

  background: #f4dddd;

  border-radius: 50%;

  vertical-align: -1px;
}


/* ---------------------------------------------------------
   カレンダー下部
   --------------------------------------------------------- */

.calendar-note {
  margin: 20px 0 0;

  color: #98958f;

  text-align: center;

  font-size: 11px;

  line-height: 1.7;
}


/* =========================================================
   管理画面
   ========================================================= */

.admin-page {
  min-height: 100vh;

  background: #f5f5f1;
}

.admin-wrap {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
  padding: 40px 24px;
}

.admin-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}

.admin-top h1 {
  margin: 0;

  color: #292929;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 28px;
  font-weight: 500;
}

.logout {
  color: #666;

  font-size: 12px;

  text-decoration: none;
}

.logout:hover {
  color: #174f34;
}

.admin-help {
  margin: 18px 0 26px;

  color: #666;

  text-align: center;

  font-size: 13px;
}


/* ---------------------------------------------------------
   管理画面の日付
   --------------------------------------------------------- */

.admin-grid .cal-day {
  cursor: pointer;

  border: 1px solid #e8e8e3;

  border-radius: 8px;

  transition:
    background .15s ease,
    border-color .15s ease;
}

.admin-grid .cal-day:hover {
  border-color: #7fa18a;

  background: #f4f8f5;
}

.admin-grid .cal-day.holiday {
  background: #f4dddd;

  border-color: #e3bcbc;
}

.admin-grid .cal-day input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


/* ---------------------------------------------------------
   保存ボタン
   --------------------------------------------------------- */

.save-bar {
  margin: 28px 0 15px;

  text-align: center;
}

.save-button {
  min-width: 280px;

  padding: 15px 30px;

  background: #174f34;

  color: #ffffff;

  border: 1px solid #174f34;
  border-radius: 3px;

  cursor: pointer;

  font-size: 15px;
  font-weight: 500;

  transition:
    background .2s ease,
    color .2s ease;
}

.save-button:hover {
  background: #ffffff;

  color: #174f34;
}

.admin-preview {
  margin: 0;

  text-align: center;
}

.admin-preview a {
  color: #174f34;

  font-size: 13px;

  text-decoration: none;
}


/* ---------------------------------------------------------
   メッセージ
   --------------------------------------------------------- */

.success,
.error {
  width: 100%;
  max-width: 600px;

  margin: 16px auto;
  padding: 12px 16px;

  text-align: center;

  font-size: 13px;
}

.success {
  background: #e6f1e8;

  color: #28583b;
}

.error {
  background: #f7e4e4;

  color: #8a3030;
}


/* =========================================================
   ログイン画面
   ========================================================= */

.login-box {
  width: min(92%, 430px);

  margin: 10vh auto;
  padding: 36px;

  background: #ffffff;

  border: 1px solid #deded8;

  box-shadow:
    0 5px 25px rgba(0, 0, 0, .04);
}

.login-box h1 {
  margin: 0 0 25px;

  color: #292929;

  text-align: center;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 26px;
  font-weight: 500;
}

.login-box label {
  display: block;

  margin: 15px 0;

  color: #555;

  font-size: 12px;
}

.login-box input {
  display: block;

  width: 100%;

  margin-top: 7px;
  padding: 12px;

  background: #ffffff;

  border: 1px solid #ccc;

  color: #333;

  font-size: 16px;
}

.login-box input:focus {
  outline: none;

  border-color: #668b72;
}

.login-box button {
  width: 100%;

  margin-top: 10px;
  padding: 15px;

  background: #174f34;

  color: #ffffff;

  border: 0;
  border-radius: 3px;

  cursor: pointer;

  font-size: 15px;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 700px) {

  .calendar-wrap {
    padding:
      30px 14px
      22px;
  }


  /* タイトル */

  .calendar-head {
    margin-bottom: 23px;
  }

  .eyebrow {
    margin-bottom: 8px;

    font-size: 9px;
  }

  .calendar-head h1 {
    margin-bottom: 7px;

    font-size: 24px;
  }

  .calendar-head p {
    padding: 0 10px;

    font-size: 12px;
  }


  /* 月 */

  .month-nav {
    margin-bottom: 18px;
  }

  .month-nav strong {
    font-size: 18px;
  }

  .month-nav a {
    font-size: 12px;
  }


  /* 店舗 */

  .store-grid {
    grid-template-columns: 1fr;

    gap: 17px;
  }

  .store-card {
    padding:
      20px 14px
      17px;
  }

  .store-card h2 {
    margin-bottom: 15px;
    padding-bottom: 12px;

    font-size: 19px;
  }


  /* 日付 */

  .cal-grid {
    gap: 2px;
  }

  .cal-week {
    padding-bottom: 6px;

    font-size: 11px;
  }

  .cal-empty,
  .cal-day {
    min-height: 36px;
  }

  .cal-day {
    max-width: 46px;

    font-size: 13px;
  }


  /* 下部 */

  .legend {
    margin-top: 13px;
  }

  .calendar-note {
    margin-top: 17px;

    padding: 0 10px;
  }


  /* 管理画面 */

  .admin-wrap {
    padding: 28px 14px;
  }

  .admin-top {
    align-items: center;
  }

  .admin-top h1 {
    font-size: 23px;
  }

  .admin-help {
    font-size: 12px;

    line-height: 1.7;
  }

  .admin-grid .cal-day {
    border-radius: 6px;
  }

  .save-button {
    width: 100%;
    min-width: 0;

    min-height: 54px;
  }


  /* ログイン */

  .login-box {
    margin: 6vh auto;

    padding: 28px 22px;
  }

}


/* =========================================================
   小型スマートフォン
   ========================================================= */

@media screen and (max-width: 380px) {

  .calendar-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }

  .store-card {
    padding-left: 10px;
    padding-right: 10px;
  }

  .cal-day {
    max-width: 42px;

    font-size: 12px;
  }

}