@charset "UTF-8";

/* 変数
----------------------------------------------------*/
:root {
  --light-gray: #e1eeee;
  --back-gray: #f7f9fb;
  --dark-gray: #738588;
  --divider-high: #AFB8C1;
  --divider-middle: #D0D7DE;
  --divider-low: #EAEEF2;
  --neutral-200: #D0D7DE;


  --main-font-color: #646e7a;
  --link-color: #646e7a;
  --link-hover-color: #646e7a;

  --fs-10-13: clamp(10px,calc(10px + (13 - 10) / (1240 - 360) * (100cqw - 360px)),13px);
  --fs-11-14: clamp(11px,calc(11px + (14 - 11) / (1240 - 360) * (100cqw - 360px)),14px);
  --fs-13-16: clamp(13px,calc(13px + (16 - 13) / (1240 - 360) * (100cqw - 360px)),16px);
  --fs-15-18: clamp(15px,calc(15px + (18 - 15) / (1240 - 360) * (100cqw - 360px)),18px);




  --fs-13-16: clamp(13px,calc(13px + (16 - 13) / (1240 - 360) * (100cqw - 360px)),16px);
  --fs-13-17: clamp(13px,calc(13px + (17 - 13) / (1240 - 360) * (100cqw - 360px)),17px);

  --fs-24-40: clamp(24px,calc(24px + (40 - 24) / (1240 - 360) * (100cqw - 360px)),40px);
  --fs-18-24: clamp(18px,calc(18px + (24 - 18) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-17-24: clamp(17px,calc(17px + (24 - 17) / (1240 - 360) * (100cqw - 360px)),24px);

  --fs-14-20: clamp(14px,calc(14px + (20 - 14) / (1240 - 360) * (100cqw - 360px)),20px);
  --fs-14-22: clamp(14px,calc(14px + (22 - 14) / (1240 - 360) * (100cqw - 360px)),22px);

  --fs-14-28: clamp(14px,calc(14px + (28 - 14) / (1240 - 360) * (100cqw - 360px)),28px);
  --fs-18-28: clamp(18px,calc(18px + (28 - 18) / (1240 - 360) * (100cqw - 360px)),28px);
  --fs-20-28: clamp(20px,calc(20px + (28 - 20) / (1240 - 360) * (100cqw - 360px)),28px);

  --fs-48-72: clamp(48px,calc(48px + (72 - 48) / (1240 - 360) * (100cqw - 360px)),72px);
  --fs-24-60: clamp(24px,calc(24px + (60 - 24) / (1240 - 360) * (100cqw - 360px)),60px);
  --fs-22-36: clamp(22px,calc(22px + (36 - 22) / (1240 - 360) * (100cqw - 360px)),36px);
  --fs-18-36: clamp(18px,calc(18px + (36 - 18) / (1240 - 360) * (100cqw - 360px)),36px);

  --fs-16-21: clamp(16px,calc(16px + (21 - 16) / (1240 - 360) * (100cqw - 360px)),21px);

  --fs-13-18: clamp(13px,calc(13px + (18 - 13) / (1240 - 360) * (100cqw - 360px)),18px);
  --fs-15-18: clamp(15px,calc(15px + (18 - 15) / (1240 - 360) * (100cqw - 360px)),18px);


}

/* 使用Webフォント
  font-family: ;
  .font-ko {font-family: 'Klee One', serif;}
  .font-zom {font-family: 'Zen Old Mincho', serif;}
*/


/* 初期設定
----------------------------------------------------*/
html {scroll-behavior: smooth;}
body {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-13-16);
  line-height: 1.5;
  color: var(--main-font-color);
}
a {
  text-decoration: none;
  color: var(--link-color);
  transition-property: color,background-color;
  transition-duration: 0.4s;
}
a:hover {color: var(--link-hover-color);}
a,button {
  border-radius: 6px;
}
a.textLink {
  text-decoration: 1px dotted underline;
  color: #274245;
  &:hover {
    text-decoration: none;
    filter: brightness(101%);
  }
}
button {
  transition-property: color,background-color;
  transition-duration: 0.4s;
}

.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}


/* ブレイクポイント出し分け
----------------------------------------------------*/
/* スクリーンリーダー用 */
.for-ScreenReader {display: none;}

.distribute {
  display: none;
  /* 未満 */
  &.under640 {
    @media (width < 640px) {
      display: block;
    }
  }
  &.over640 {
    @media (640px <= width) {
      display: block;
    }
  }
  /* 未満 */
  &.under860 {
    @media (width < 860px) {
      display: block;
    }
  }
  &.over860 {
    @media (860px <= width) {
      display: block;
    }
  }


}

/* 汎用class
----------------------------------------------------*/
.mt-6 {margin-top: min(1vw,6px)}
.mt-12 {margin-top: min(3vw,12px)}
.mt-24 {margin-top: min(4vw,24px)}
.mt-36 {margin-top: min(5vw,36px)}
.mt-48 {margin-top: min(6vw,48px)}
.mt-60 {margin-top: min(7vw,60px)}
.mt-72 {margin-top: min(8vw,72px)}
.mt-96 {margin-top: min(9vw,96px)}
/* min(10vw,108px) */
/* min(11vw,120px) */

.mb-6 {margin-bottom: min(1vw,6px)}
.mb-8 {margin-bottom: min(2vw,8px)}
.mb-12 {margin-bottom: min(3vw,12px)}
.mb-24 {margin-bottom: min(4vw,24px)}
.mb-36 {margin-bottom: min(5vw,36px)}
.mb-48 {margin-bottom: min(6vw,48px)}
.mb-60 {margin-bottom: min(7vw,60px)}
.mb-72 {margin-bottom: min(8vw,72px)}
.mb-96 {margin-bottom: min(9vw,96px)}

.mr-6 {margin-right: min(1vw,6px)}
.mr-12 {margin-right: min(3vw,12px)}
.mr-20 {margin-right: min(3.5vw,20px)}
.mr-24 {margin-right: min(4vw,24px)}
.mr-36 {margin-right: min(5vw,36px)}
.mr-48 {margin-right: min(6vw,48px)}
.mr-60 {margin-right: min(7vw,60px)}
.mr-72 {margin-right: min(8vw,72px)}
.mr-96 {margin-right: min(9vw,96px)}


/* スティッキーフッター
----------------------------------------------------*/
html, body {
  height: 100%;
  background-color: #FEFEFF;
}
.all-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main-wrap {
  flex: 1;
  padding-bottom: min(5vw,36px);
  &:not(:has(.edit-bar)) {
    padding-top: min(5vw,36px);
  }
}
.edit-bar {
  background-color: #424A53;
  color: #fff;
  padding-block: 0.6em;
  margin-bottom: min(4vw,24px);
  & .inner-wrap {
    display: flex;
    justify-content: space-between;
    & .return-wrap {
      display: flex;
      align-items: center;
      column-gap: min(3.5vw,20px);
      & > p {
        white-space: nowrap;
      }
    }
  }
}

/* ヘッダー
----------------------------------------------------*/
.fixed-header {
  position: sticky;
  display: block;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: 0px -1px 3px #ccc;
  z-index: 100;
  &:has(.openMenu){
    z-index: 200;
  }
}
.com-header {
  box-shadow: 0px -1px 3px #ccc;

  & .inner-wrap {
    display: flex;
    justify-content: space-between;
    padding: min(18px,4vw) min(24px,4vw);
    & .first-side {
      flex-basis: 25%;
      & .logo {
        max-width: 228px;
        padding-top: 2px;
      }
    }
    & .second-side {
      flex-basis: 75%;
      & > p {
        display: flex;
        justify-content: flex-end;
        gap: 0 12px;
        @media (860px <= width) {
          display: none;
        }
        & img {
          width: 22px;
          margin-inline: auto 0;
        }
      }
    }
  }
}



/* フッター
----------------------------------------------------*/
.com-footer {
  padding-block: 24px;
  & .inner-wrap {
    max-width: 1248px;
    margin-inline: auto;
    padding-inline: min(24px,4vw);
    & .copy {
      text-align: center;
      font-size: var(--fs-11-14);
      color: #AFB8C1;
    }
  }
}


/* グロナビ
----------------------------------------------------*/
@media (860px < width) {
  .com-header {
    & .inner-wrap {
      padding: 20px;
      & nav {
        & ul {
          font-family: "Noto Sans", sans-serif;
          display: flex;
          justify-content: flex-end;
          font-size: 14px;
          & li {
            display: flex;
            align-items: center;
            & a {
              padding-inline: 0.6em;
              position: relative;
              /* text-decoration: underline 1px dotted var(--dark-gray); */
              &::after {
                position: absolute;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #738588;
                bottom: -4px;
                transform: scale(0, 1);
                transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
                transition: transform 0.3s;   /*変形の時間*/
              }
              &:hover{
                /* text-decoration: none; */
                &::after {
                  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
                }
              }
            }
            &:last-of-type {
              & a {
                &:hover {
                  &::after {
                    transform: scale(0, 1);
                  }
                  & img {
                    border-color: #738588;
                  }
                }
              }
            }
            & .userIcon {
              background: #fff;
              width: 24px;
              aspect-ratio: 1 / 1;
              height: auto;
              border-radius: 50%;
              border: 1px solid #ddd;
              /* border-radius: 6px;
              border: 1px solid #ddd; */
            }
            & .profileSetting {
              display: none;
            }
          }
        }
      }
      & .viewMenu {
        display: none;
      }
    }
  }
}
@media screen and (max-width:860px){
  .nav-wrap {
    background-color: #fff;
    color: #777;
    transition-property: left;
    transition-duration: 0.2s;
    flex-basis: 320px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
    position: relative;
    width: 320px;
    box-shadow: 0 0 0 0;
    height: 100svh; /* URLバーの高さによってズレる */
    position: fixed;
    left: -320px;
  }
  .viewMenu {
    display: block;
    position: fixed;
    left: 0px;
    bottom: 24px;
    z-index: 95;
    background-color: #c3a380;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    transition-property: left;
    transition-duration: 0.2s;
  }
  /* .topPage .viewMenu {
    bottom: 84px;
  } */
  .viewMenu span {
    display: block;
    padding: 24px 26px 24px 20px;
    background: #424A53 url(../img/menu-w.svg) no-repeat center center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .viewMenu.openMenu span {
    position: absolute;
    left: 0;
    bottom: 24px;
    background: #424A53 url(../img/x-w.svg) no-repeat 50% center;
  }
  .topPage .viewMenu.openMenu span {
    bottom: 84px;
  }
  .viewMenu.openMenu {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 320px;
    top: 0;
    background-color: rgba(5, 40, 60, 0.5);
    z-index: -1;
  }
  .fullScreenMenu {
    left: 0;
    top: 0;
    z-index: 95;
  }
  body:has(.fullScreenMenu){
    overflow-y: hidden;
  }
  .nav-wrap .userIcon {
    display: none;
  }
  /**/
  .nav-wrap ul {
    border-top-style: dotted;
    border-top-width: 1px;
    margin-bottom: 1px;
  }
  .nav-wrap ul li {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
  }
  .nav-wrap ul li b,
  .nav-wrap ul li em,
  .nav-wrap ul li a {
    display: block;
    padding: 12px 12px 12px 12px;
  }
  .nav-wrap ul li a {
    text-decoration: none;
    transition-property: color,background-color;
    transition-duration: 0.2s;
  }
  .nav-wrap ul li b {
    background-color: #738588;
    opacity: 0.5;
    font-weight: normal;
    font-size: 0.8rem;
  }
  .nav-wrap ul li img {
    transform: translateY(-2px);
  }
  .nav-wrap .banner {
    padding: 10px;
    font-size: 0.9rem;
  }
  .nav-wrap .banner .textLink {
    color: #ff99a6;
  }
  .nav-wrap .banner .textLink:hover {
    border-bottom: 1px solid #ff99a6;
  }
}


/* レイアウト
----------------------------------------------------*/
.wrap-mini {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  & .inner-wrap {
    width: 80%;
    max-width: 420px;
    margin-inline: auto;
    padding-inline: min(24px,4vw);
  }
}
.h1_type1 {
  font-weight: 700;
  font-size: var(--fs-13-18);
  color: #24292F;
  /* border-bottom: 1px solid #777;
  padding: 4px 4px 4px 4px; */
  margin-bottom: min(5vw,36px);
}
.h2_type1 {
  font-size: var(--fs-13-18);
  border-bottom: 1px solid #777;
  padding: 4px 4px 4px 4px;
  margin-bottom: min(5vw,36px);
}
.inner-wrap {
  padding-inline: min(24px,4vw);
	margin-inline: auto;
  &.w720 {
    max-width: calc(720px + calc(24px * 2));
  }
  &.w960 {
    max-width: calc(960px + calc(24px * 2));
  }
  &.w1240 {
    max-width: calc(1240px + calc(24px * 2));
  }
}
.vacant-wrap {
  margin-top: min(5vw,36px);
  border: 1px solid #D0D7DE;
  background-color: #FAFAFA;
  text-align: center;
  padding: 2.2223em;
  & .txt {
    font-size: 18px;
    font-weight: 700;
  }
}
.edit-wrap {
  margin-top: min(5vw,36px);
  border: 1px solid #D0D7DE;
  border-radius: 6px;
  background-color: #EAEEF2;
  padding: 2.2223em;
}

/* 汎用パーツ
----------------------------------------------------*/
.lead-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  & h1 {
    font-size: var(--fs-15-18);
    font-weight: 700;
  }
}


/* フォームパーツ
----------------------------------------------------*/
label {
  color: #6E7781;
}
input {
  display: block;
  width: 100%;
  border: 1px solid #6E7781;
  line-height: 1;
  padding: 6px 10px;
  &[type="date"] {
    padding: 8px 10px;
  }
}
.btn {
  display: inline-block;
  border: 1px solid #24292F;
  background-color: #24292F;
  line-height: 1;
  cursor: pointer;
  padding: 0.8em 2.4em 0.7em;
  color: #fff;
  font-family: inherit;
  &.align-center {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
  &.text-icon::after {
    content: ">";
    display: inline-block;
    transform: translate(4px,-1px);
  }
  &:hover {
    background-color: #fff;
    color: #24292F;
  }
}
.btn-def {
  display: inline-block;
  border: 1px solid #3e8be9;
  background-color: #61B3FF;
  line-height: 1;
  cursor: pointer;
  padding: 0.6em 2.4em 0.7em;
  color: #fff;
  font-family: inherit;
  &.align-center {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
  &.text-icon::after {
    content: ">";
    display: inline-block;
    transform: translate(4px,-1px);
  }
  &:hover {
    background-color: #fff;
    color: #3e8be9;
  }
}
.btn-cancel {
  display: inline-block;
  border: 1px solid #fff;
  background-color: #fff;
  line-height: 1;
  cursor: pointer;
  padding: 0.6em 1em 0.7em;
  color: #424A53;
  font-family: inherit;
  &.align-center {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
  &.text-icon::after {
    content: ">";
    display: inline-block;
    transform: translate(4px,-1px);
  }
  &:hover {
    background-color: #eee;
    color: #424A53;
  }
}

.btn-period {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  border: 1px solid #61B3FF;
  background-color: #61B3FF;
  line-height: 1;
  cursor: pointer;
  padding: 0.29em 2.4em 0.28em;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  &.align-center {
    width: fit-content;
    margin-inline: auto;
  }
  &.icon::before {
    content: " ";
    width: 1.71428571429em;
    aspect-ratio: 1/1;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
  }
  &.ic-plus::before {
    background-size: 14px;
    background-image: url(../img/ic_plus_hover.svg);
  }
  &:hover {
    background-color: #fff;
    color: #61B3FF;
    &.ic-plus::before {
      background-image: url(../img/ic_plus_blue.svg);
    }
  }
}


.btn-white {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  border: 1px solid #424A53;
  background-color: #fff;
  line-height: 1;
  cursor: pointer;
  padding: 0.29em 2.4em 0.28em;
  color: #424A53;
  font-family: inherit;
  font-size: 14px;
  &.align-center {
    width: fit-content;
    margin-inline: auto;
  }
  &.icon::before {
    content: " ";
    width: 1.4em;
    aspect-ratio: 1/1;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
  }
  &.ic-edit::before {
    background-image: url(../img/ic_edit.svg);
  }
  &.ic-create::before {
    background-image: url(../img/ic_pen.svg);
  }
  &.ic-plus::before {
    background-size: 14px;
    background-image: url(../img/ic_plus.svg);
  }
  &:hover {
    background-color: #424A53;
    color: #fff;
    &.ic-edit::before {
      background-image: url(../img/ic_edit_hover.svg);
    }
    &.ic-create::before {
      background-image: url(../img/ic_pen_hover.svg);
    }
    &.ic-plus::before {
      background-image: url(../img/ic_plus_hover.svg);
    }
  }
}
.btn-save {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  border: 1px solid #61B3FF;
  background-color: #61B3FF;
  line-height: 1;
  cursor: pointer;
  padding: 0.29em 2.4em 0.28em;
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  font-size: var(--fs-11-14);
  &.align-center {
    width: fit-content;
    margin-inline: auto;
  }
  &.icon::before {
    content: " ";
    width: 1.4em;
    aspect-ratio: 1/1;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
    background-image: url(../img/ic_save_hover.svg);
  }
  &.ic-save::before {
    background-image: url(../img/ic_save.svg);
  }
  &:hover {
    border: 1px solid #2DA44E;
    background-color: #fff;
    color: #2DA44E;
    &.ic-save::before {
      background-image: url(../img/ic_save_hover.svg);
    }
  }
}

.btn-delete {
  display: inline-block;
  border: 1px solid #A40E26;
  background-color: #CF222E;
  line-height: 1;
  cursor: pointer;
  padding: 0.6em 2.4em 0.7em;
  color: #fff;
  font-family: inherit;
  &.align-center {
    width: fit-content;
    margin-inline: auto;
  }
  &.icon::before {
    content: " ";
    width: 1.4em;
    aspect-ratio: 1/1;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
    background-image: url(../img/ic_save_hover.svg);
  }
  &.ic-save::before {
    background-image: url(../img/ic_save.svg);
  }
  &:hover {
    background-color: #fff;
    color: #A40E26;
    &.ic-save::before {
      background-image: url(../img/ic_save_hover.svg);
    }
  }
}



.btn-re {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  border: 1px solid #fff;
  border-radius: 2px;
  background-color: transparent;
  line-height: 1;
  cursor: pointer;
  padding: 0.5em 0.75em 0.5em;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  &::before {
    content: " ";
    width: 0.666666667em;
    aspect-ratio: 6.8/11.45;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
    background-image: url(../img/ic_arrow_left_white.svg);
  }
  &:hover {
    background-color: #fff;
    color: #424A53;
    &::before {
      background-image: url(../img/ic_arrow_left_hover.svg);
    }
  }
}

.btn-more {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  border: 1px solid #6E7781;
  background-color: #fff;
  line-height: 1;
  cursor: pointer;
  padding: 0.5em 1em 0.49em 1.2em;
  color: #6E7781;
  font-family: inherit;
  font-size: 12px;
  &.icon::after {
    content: " ";
    width: 3.57px;
    aspect-ratio: 3.57/6.48;
    height: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: background-image;
    transition-duration: 0.4s;
  }
  &.ic-arrow::after {
    background-image: url(../img/ic_arrow_right_gray.svg);
  }
  &:hover {
    background-color: #6E7781;
    color: #fff;
    &.ic-arrow::after {
      background-image: url(../img/ic_arrow_right_hover.svg);
    }
  }
}



/* swalカスタム
----------------------------------------------------*/
.swal-footer {
  text-align: center;
  padding: 12px 12px 24px;
}
.swal-button-container {
  & .btn,
  & button:not(.no-style),
  & button[type="submit"] {
    padding: 0.5em 2.4em 0.6em;
    background-color: #fff;
    &:hover {
      background-color: #9eb2be;
      color: #7a5454;
    }
  }
}



/* ナビ
----------------------------------------------------*/
.nav-admin {
  background-color: var(--divider-high);
  /* margin-top: min(4vw,24px); */
  padding-block: min(24px,4vw);
  padding-inline: min(24px,4vw);
  display: flex;
  justify-content: center;
  gap: 0 1.5em;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  & a {
    color: #fff;
    &:hover {
      text-decoration: underline;
    }
  }
  & .current a {
    font-weight: bold;
    color: #555;
    background-color: #fff;
    border-radius: 6px;
    padding: 0.2em 1.5em 0.3em;
  }
}