@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  /* line-heightをemベースでcalc()で計算。font-sizeを小さくするとline-heightは大きくなり、font-sizeを大きくするとline-heightは小さくなります。参考: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
  line-height: calc(0.25rem + 1em + 0.25rem);
  font-size: 62.5%;
  font-style: normal;
  font-weight: unset;
}

/* より直感的なボックスサイズのモデルを使用 */
*,
::before,
::after {
  box-sizing: border-box;
}

/* fieldset, progress, meter以外のすべての要素でボーダーを削除し、背景に適切なデフォルトを設定 */
*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  /* アプリケーションでパーセントによる高さを許可する  */
  block-size: 100%;
  /* テキストのサイズはfont-sizeのみで制御されるようにする */
  text-size-adjust: none;
  font-size: 62.5%;
  height: fit-content;
  min-height: 100%;
  overflow-x: hidden;
  /* スムーススクロール */
  scroll-behavior: smooth;
}

/* 減速を好まないユーザーのためにスムーズなスクロールを実現 */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  position: relative;
  font-size: 1.6em;
  height: fit-content;
  min-height: 100%;
  overflow-x: hidden;
  min-block-size: 100%;
}

a {
  color: inherit;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

/* 各メディア要素のデフォルトを改善 */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

/* ストロークを削除し、fillの塗りつぶしカラーはフォントカラーを継承 */
:where(svg) {
  stroke: none;
  fill: currentcolor;
}

/* fill属性のないSVG */
:where(svg):where(:not([fill])) {
  /* fillを取り除き、ストロークのカラーはフォントカラーを継承 */
  stroke: currentcolor;
  fill: none;
  /* 丸みを帯びたストローク */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* width属性のないSVGのサイズを設定 */
:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

/* テキストのオーバーフローを回避 */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* リストの役割をするul、ol要素のリストスタイルを削除。デフォルトのスタイルが削除されることを示唆しています */
:where(ul, ol, li)[role=list] {
  list-style: none;
}

ul,
ol,
li {
  list-style: none;
}

/* クラスを持たないアンカータグに、より読みやすい下線スタイルを設定。アンカータグに設定することもできますが、コンフリクトを引き起こす可能性があります */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* フォーカスのアウトラインをアニメーション化 */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}
:where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

/* ユーザーがボタンのテキストを選択できないようにする */
:where(button,
button[type],
input[type=button],
input[type=submit],
input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

/* 無効化されたボタンには無効化されたカーソルを表示 */
:where(button,
button[type],
input[type=button],
input[type=submit],
input[type=reset])[disabled] {
  cursor: not-allowed;
}

time {
  font-size: 1em;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

span,
strong,
em,
small,
i,
b {
  font-size: 1em;
}

button {
  border: none;
  text-decoration: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  appearance: none;
  cursor: pointer;
}

/* ==========================================================
	formタグ
========================================================== */
/* フォーム内のタイポグラフィのスタイルを削除 */
:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* =================================
 * ウィンドウ・フォントサイズ設定
 * ------------------------------ */
/*==========================================================
	フォント指定
==========================================================*/
/* =================================
 * カラー変数
 * ------------------------------ */
/* =================================
 * カラー定義
 * ------------------------------ */
:root {
  /* base */
  --color-white-100: #fdfeff;
  /* semantic */
  --main-white: var(--color-white-100);
  --text-muted: #888780;
  --st-available-bg: #e5f1e8;
}

/* =================================
 * レスポンシブ設定
 * ------------------------------ */
/* =================================
 * ホバー処理
 * ------------------------------ */
/* =========================================
ドロップシャドウ
----------------------------------------- */
/* =========================================
LINKボタン
----------------------------------------- */
/* =========================================
PageLINKボタン
----------------------------------------- */
/*================================
 日付選択
--------------------------------*/
/*================================
 ステータスボックス(JS併用版)
--------------------------------*/
/*================================
 空室ステータス(JS併用版)
--------------------------------*/
body {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c2c2a;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f2;
  z-index: 1;
  font-family: "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.2rem, 0.6163328197vw + 9.688751926px, 1.6rem);
}
@media (max-width: 834px) and (orientation: portrait) {
  body {
    font-size: 1.4vw;
  }
}
@media (max-width: 480px) and (orientation: portrait) {
  body {
    font-size: 3.6vw;
  }
}
body img {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
@media (min-width: 768px) {
  body a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
@media (max-width: 480px) and (orientation: portrait) {
  body br.pc {
    display: none;
  }
}
body br.sp {
  display: none;
}
@media (max-width: 480px) and (orientation: portrait) {
  body br.sp {
    display: inline;
  }
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

/*==========================================================
	共通
==========================================================*/
main {
  position: relative;
  width: 100%;
  padding: 20px 24px 48px;
  font-size: inherit;
}

section,
article {
  width: 100%;
  position: relative;
  font-size: inherit;
}

form {
  position: relative;
  width: 100%;
  font-size: inherit;
}

.inner-body {
  display: grid;
  width: 100%;
  grid-template-columns: 190px 1fr;
  max-width: 1280px;
  background: #f5f5f2;
  align-self: center;
  flex: 1;
  font-size: inherit;
}
@media (max-width: 1194px) and (orientation: landscape) {
  .inner-body {
    grid-template-columns: unset;
    max-width: unset;
  }
}
@media (max-width: 834px) and (orientation: portrait) {
  .inner-body {
    grid-template-columns: unset;
    max-width: unset;
  }
}

/*================================
入力フォーム
--------------------------------*/
input,
select,
textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select,
textarea,
input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=email] {
  flex-grow: 1;
  width: 100%;
  font-size: 1.6rem;
  padding-inline: 0.8em;
  display: flex;
  align-items: center;
  border-radius: 0.6rem;
  letter-spacing: 0.04em;
  border: 1px solid #c3c5bd;
  transition: 0.2s ease-out;
  background-color: #fafafa;
}
select::placeholder,
textarea::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder,
input[type=email]::placeholder {
  color: #b0aea8;
}
select:focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=email]:focus {
  border: 1px solid #e3b7b4;
}
select:active,
textarea:active,
input[type=text]:active,
input[type=password]:active,
input[type=number]:active,
input[type=date]:active,
input[type=email]:active {
  border: 1px solid #335d95;
  background-color: #fafafa;
}
select:hover,
textarea:hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=date]:hover,
input[type=email]:hover {
  border: 1px solid #335d95;
  transition: 0.3s ease-out;
}

input[type=date] {
  background-color: #fff;
}

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=email] {
  background-color: #fafafa;
  height: 4rem;
  padding-block: 0.8em;
}

textarea {
  padding-block: 0.8em;
  field-sizing: content;
}

svg {
  fill: transparent;
  stroke: transparent;
}

/*==========================================================
	HEADER
==========================================================*/
.container-header {
  height: 60px;
  background: #2c2c2a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: inherit;
}
.container-header .brand {
  font-size: inherit;
  display: flex;
}
.container-header .brand h1 {
  font-size: max(12px, 1em);
  font-weight: 700;
  position: relative;
  padding-left: 1.8em;
}
.container-header .brand h1::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 0;
  width: 2rem;
  aspect-ratio: 60/59;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 59" fill="%23fff"><path d="M29.98,59c-8.89,0-15.57-1.51-21.03-4.74-2.94-1.74-5.18-3.69-6.66-5.81-1.52-2.17-2.29-4.56-2.29-7.12,0-2.72.93-5.24,2.75-7.51,1.18-1.46,2.77-2.85,4.72-4.13.25-.16.54-.25.83-.25.43,0,.84.18,1.13.5.51.56.54,1.39.07,1.98-2.71,3.46-4.27,6.48-4.27,8.29,0,3.47,2.37,6.51,7.03,9.04,4.83,2.62,10.79,3.96,17.72,3.96s12.89-1.37,17.72-4.07c4.68-2.62,7.06-5.76,7.06-9.34,0-1.71-1.25-4.61-3.42-7.96-.4-.62-.3-1.44.24-1.95.28-.27.65-.41,1.04-.41.33,0,.65.11.91.3,4.29,3.22,6.46,6.96,6.46,11.14,0,5.19-3.02,9.63-8.97,13.22-5.52,3.32-12.21,4.86-21.05,4.86Z"/><path d="M29.1,44.48c-.27,0-.53-.07-.76-.2-.63-.36-.92-1.13-.69-1.82,1.39-4.08,2.16-7.3,2.16-9.07,0-2.84-.89-6.25-2.65-10.11-1.84-4-2.77-7.66-2.77-10.87,0-4.17,1.61-8.16,4.78-11.86.29-.34.71-.53,1.16-.53.26,0,.52.07.74.19.63.35.93,1.11.71,1.8-1.17,3.71-1.81,6.71-1.81,8.45,0,2.92.86,6.27,2.54,9.96,1.68,3.72,2.54,7.33,2.54,10.71,0,4.86-1.57,9.06-4.79,12.83-.29.34-.71.53-1.16.53Z"/><path d="M16.24,42.23c-.26,0-.51-.07-.74-.19-.64-.36-.94-1.12-.71-1.82,1.18-3.55,1.83-6.35,1.83-7.9,0-2.58-.78-5.57-2.37-9.15-1.66-3.62-2.5-6.93-2.5-9.84,0-3.68,1.39-7.22,4.12-10.53.29-.35.72-.55,1.17-.55.25,0,.5.06.72.18.64.35.95,1.1.73,1.8-.69,2.27-1.52,5.39-1.52,7.32,0,2.63.76,5.66,2.27,8.99,1.52,3.36,2.29,6.64,2.29,9.75,0,4.22-1.39,8.05-4.13,11.39-.29.35-.72.56-1.18.56Z"/><path d="M42.52,42.21c-.26,0-.51-.07-.74-.19-.65-.36-.94-1.13-.71-1.83,1.19-3.53,1.84-6.33,1.84-7.87,0-2.58-.79-5.64-2.35-9.11-1.67-3.7-2.52-7.04-2.52-9.92,0-3.66,1.37-7.18,4.08-10.48.29-.35.72-.56,1.18-.56.25,0,.5.06.72.18.64.34.95,1.1.74,1.8-.69,2.28-1.52,5.4-1.52,7.35,0,2.63.76,5.64,2.27,8.95,1.52,3.37,2.29,6.65,2.29,9.75,0,4.2-1.38,8.03-4.11,11.36-.29.36-.72.56-1.18.56Z"/></svg>');
}
.container-header .brand span {
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.06em;
  font-size: max(12px, 0.875em);
  position: relative;
  padding-left: 1em;
  margin-left: 1em;
}
.container-header .brand span::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: calc(100% - 0.1em);
  background-color: rgba(255, 255, 255, 0.3);
}
.container-header .logout-btn {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: inherit;
}
.container-header .logout-btn span {
  position: relative;
  color: #fff;
  font-size: max(12px, 0.875em);
  padding-left: 1.6em;
}
.container-header .logout-btn span::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 0;
  width: 1.6rem;
  aspect-ratio: 24/24;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M20.944 18.432a2.577 2.577 0 0 1-2.729 2.5c-2.153.012-4.307 0-6.46 0a.5.5 0 0 1 0-1c2.2 0 4.4.032 6.6 0c1.107-.016 1.589-.848 1.589-1.838V5.63a1.545 1.545 0 0 0-.969-1.471a3 3 0 0 0-1.061-.095h-6.159a.5.5 0 0 1 0-1c2.225 0 4.465-.085 6.688 0a2.566 2.566 0 0 1 2.5 2.67Z" /> <path d="M15.794 12.354a.46.46 0 0 0 .138-.312l.006-.042l-.006-.041a.46.46 0 0 0-.138-.313l-3.669-3.668a.5.5 0 0 0-.707.707l2.816 2.815H3.492a.5.5 0 0 0 0 1h10.742l-2.816 2.815a.5.5 0 0 0 .707.707Z" /></svg>');
}

/*==========================================================
	LEFTメニュー
==========================================================*/
.block-sidebar {
  --bg-head: #f0f1ec;
  background: var(--bg-head);
  border-right: 1px solid #d3d4cc;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  font-size: inherit;
}
@media (max-width: 1194px) and (orientation: landscape) {
  .block-sidebar {
    display: none;
  }
}
@media (max-width: 834px) and (orientation: portrait) {
  .block-sidebar {
    display: none;
  }
}
.block-sidebar .menu-label {
  font-size: 11px;
  color: #888780;
  letter-spacing: 0.12em;
  padding: 0 8px 8px;
}
.block-sidebar nav {
  font-size: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem 0;
  width: 100%;
}
.block-sidebar nav a {
  font-size: inherit;
  background-color: #fff;
  border: 1px solid #d3d4cc;
  border-left: 3px solid #7a3f49;
  padding: 12px 12px;
  border-radius: 4px;
}
.block-sidebar nav a span {
  font-weight: 700;
  font-size: max(12px, 0.875em);
  position: relative;
  padding-left: 1.8em;
}
.block-sidebar nav a span::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 0;
  width: 1.6rem;
  aspect-ratio: 50/50;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="%232c2c2a"> <path d="M48,4.5h-10.5V.5c0-.28-.22-.5-.5-.5h-3.5c-.28,0-.5.22-.5.5v4h-16V.5c0-.28-.23-.5-.5-.5h-3.5c-.27,0-.5.22-.5.5v4H2c-1.11,0-2,.89-2,2v41.5c0,1.11.89,2,2,2h46c1.11,0,2-.89,2-2V6.5c0-1.11-.89-2-2-2M45.5,45.5H4.5v-23.75h41v23.75ZM4.5,17.5v-8.5h8v3c0,.27.23.5.5.5h3.5c.27,0,.5-.23.5-.5v-3h16v3c0,.27.22.5.5.5h3.5c.28,0,.5-.23.5-.5v-3h8v8.5H4.5Z"/></svg>');
}

/*# sourceMappingURL=globals.css.map */
