@charset "utf-8";

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

a,
img,
figure {
  /*a,img,figureタグをリセット*/
  padding: 0;
  margin: 0;
}

.layoutContainer {
  /*グリッドでヘッダ、メイン、フッタで分割*/
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/*-- ヘッダ --*/

header {
  grid-column: 1 / 4;
}

.headerFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-left: 40px;
}

.headerCaptionLogo {
  flex-grow: 0;
}

.headerCaption {
  font-size: 12px;
  font-weight: 400;
}

.headerLogoImage {
  width: 294px;
}

.headerNavContactFlex {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1%;

  flex-grow: 1;
}

.navFlex {
  flex-wrap: wrap;

  display: flex;
  justify-content: right;
  align-items: center;
  gap: 2%;

  flex-grow: 1;
}

.navFlex span {
  margin: 5px 0;
}

.navFlex span a {
  /*ナビゲーションバーのaタグの下線を消す*/
  text-decoration: none;
  color: #002e5f;
}

.navFlex span a:hover {
  text-decoration-line: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 2px;
}

.mailformButton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #4c7fcb;
  border-style: none;
  width: 110px;
  height: 90px;
}

.mailformButton:hover {
  background-color: #0054ad;
  transition: 0.5s;
}

.mailformIcon {
  width: 39px;
}

.mailformText {
  font-size: 14px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  white-space: nowrap;
}

.sp_icon_flex {
  display: none;
}

/*-- メインコンテンツ 

--*/

main {
  background-color: white;
  grid-column: 1 / 4;

  display: grid;
  grid-template-columns: 17.7% 64.6% 17.7%;
  row-gap: 30px;
}

.recruitTitle {
  background: linear-gradient(
    180deg,
    #73abff 0%,
    rgba(141, 187, 255, 0.81) 0.01%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 120px;

  display: flex;
  align-items: center;

  grid-column: 1 / 4;
  h2 {
    font-size: 36px;
    margin: 0 17.5%;
  }
}

/*  右上ボタン  */
.rightUpButtonBar {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;

  display: flex;
  flex-direction: column;
  gap: 37px;

  position: fixed;
  /*　　位置の固定　　*/
  top: 120px;
  right: 8px;
}

.rightUpButtonBar button {
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.rightUpButtonBar button p {
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  writing-mode: vertical-rl;
  /*縦書き*/
  letter-spacing: 4px;
  /*文字の間隔*/
}

.rightUpContactButton {
  width: 60px;
  height: 184px;
  background-color: #ff974c;
}

.rightUpContactButton:hover {
  transition: 0.3s;
  background-color: #ff7c1f;
}

.rightUpCatalogButton {
  width: 60px;
  height: 184px;
  background-color: #29d14e;
}

.rightUpCatalogButton:hover {
  transition: 0.3s;
  background-color: #07c22f;
}

/* --------------------上に戻るボタン---------------- */
.pagetop {
  height: 45px;
  width: 45px;
  position: fixed;
  right: 20px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #002e5f;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #002e5f;
  border-right: 3px solid #002e5f;
  transform: translateY(20%) rotate(-45deg);
}
/* -----------------↑------------------- */

.mainContainer {
  grid-column: 2;

  display: flex;
  justify-content: space-between;

  padding-top: 60px;
  border-top: 1px solid #4c7fcb;
}

.mainContentContainer {
  /* メインコンテンツ */
  width: 100%;
  margin-bottom: 60px;
}

/*     採用情報       */
.recruit {
  width: 100%;
  padding: 0 20px;
  > .introduction {
    background-color: oklch(94.944% 0.05679 152.224);
    border-radius: 8px;
    padding: 16px;
    > p {
      color: #333;
    }
  }
}

.recruit p.p-bottom span {
  font-weight: 600;
}

.recruit h3 {
  color: #333;
}

.recruit > dl {
  display: grid;
  grid-template-columns: 20% 1fr;
}
.recruit > dl > dt {
  font-weight: 700;
  border-bottom: 1px solid #333;
  padding: 16px 0;
}
.recruit > dl > dd {
  grid-column: 2;
  margin: 0;
  border-bottom: 1px solid #333;
  padding: 16px 0;
}
.recruit > dl > dd > p {
  margin: 0;
}

/*      サイドバー       */
.mainSideberContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;

  width: 20%;
  background-color: white;
  margin-bottom: 300px;
}

.telephoneContainer {
  border: 2px solid #4c7fcb;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.telephoneContainerTitleBg {
  width: 100%;
  background-color: #4c7fcb;
  border-radius: 2px;
}

.telephoneContainerTitle {
  text-align: center;
  color: white;
}

.phoneNumberWithIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 5px;
}

.telephoneIcon {
  width: 20px;
  height: 20px;
}

.phoneNumber {
  margin: 0;
  font-size: 27px;
  font-weight: bold;
}

.receptionHours {
  font-size: 16px;
  font-weight: 400;
}

.sideContactButton {
  width: 90%;
  padding: 0;
  margin: 2px;

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

  background-color: #ff974c;
  border-style: none;
  border-radius: 5px;
}

.sideContactButton > p {
  color: white;
  font-size: 16px;
}

.sideContactButton:hover {
  transition: 0.3s;
  background-color: #ff7c1f;
}

.sideMailicon {
  width: 20px;
  height: 15px;
}

.sideProductListContainer {
  border: 2px solid #4c7fcb;
  border-radius: 5px;
}

.barContainer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 16px;
}

.barContainer > h2 {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

/* 0206追加 ----------------------------*/
.barContainer > h2 > a {
  text-decoration-line: none;
  color: #333;
} /*↑ 0206追加 ↑
    --------------------------*/

.barContainer .bar {
  width: 8px;
  height: 32px;
  background-color: #4c7fcb;
}

.sideProductListItem {
  display: flex;
  gap: 8px;

  margin: 8px 0 8px 16px;
}

.sideProductListItem > a {
  margin: 0;
}

.sideAreaMapContainer {
  border: 2px solid #4c7fcb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-bottom: 5px;
}

.sideAreaMapContainer > h2 {
  font-size: 18px;
  color: #4c7fcb;
}

.sideAreaMapContainer > img {
  width: 100%;
}

.prefContainer {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 10px;
}

/*-- フッタ --*/
footer {
  background-color: #4c7fcb;
  color: #e2e2e2;
  grid-column: 1 / 4;
  padding-bottom: 3vh;

  display: flex;
  flex-direction: column;
}

.footerNavFlex {
  padding: 40px 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.footerNavFlex span a {
  text-decoration-line: none;
  color: #e2e2e2;
}

.footerNavFlex span a:hover {
  text-decoration-line: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 2px;
}

.footerButtonFlex {
  display: flex;
  justify-content: center;
  gap: 37px;
}

.footerButtonFlex button {
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.footerButtonFlex button p {
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.footerContactButton {
  width: 192px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #ff974c;
}

.footerContactButton:hover {
  transition: 0.3s;
  background-color: #ff7c1f;
}

.footerMailicon {
  width: 20px;
  height: 15px;
}

.footerCatalogButton {
  width: 192px;
  background-color: #29d14e;
}

.footerCatalogButton:hover {
  transition: 0.3s;
  background-color: #07c22f;
}

.footerCompanyContactFlex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 5px;

  margin: 10px 0;
}

.footerCompanyContactFlex div img {
  margin: 10px 0;
  filter: brightness(100);
}

.footerHigashiyamaContact {
  display: grid;
}

.footerHigashiyamaContact img {
  width: 358px;
}

.footerCareLiftContact {
  display: grid;
}

.footerCareLiftContact img {
  width: 394px;
}

.copyRight {
  display: flex;
  justify-content: center;

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

@media (width < 520px) {
  /*  ヘッダー   */

  /* -----------------スマホ用ヘッダー追従設定------------------- */

  header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .headerFlex {
    background-color: white;
    margin: 0;
    padding: 50px 16px 16px 16px;
  }

  /* -----------------↑------------------- */
  .headerLogoImage {
    width: 171px;
    height: 20px;
  }

  .sp_icon_flex {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .sp_icon_flex > a,
  .sp_icon_flex > a > img {
    width: 24px;
    height: 24px;
  }

  .sp-menu {
    display: block;
  }

  /* ハンバーガーメニューのボタン */

  /* スマホ用メニュー */

  /* ハンバーガーボタンを押してチェックがONの時だけ
   スマホ用メニューを画面左端に移動する */
  #sp-menu__check:checked ~ .sp-menu__content {
    left: 0;
  }

  .sp-menu__content {
    /* 絶対位置で指定   */
    position: fixed;
    /* 画面全体に表示 */
    width: 100%;
    height: 100%;
    /* 普段は画面外にするために左端を画面右端の位置にする */
    left: 100%;
    top: 0;

    /* 前面に表示するがハンバーガーボタンよりは背後 */
    z-index: 90;
    background: #4c7fcbd9;

    /* 右端からゆっくり移動するように表示 */
    transition: all 0.5s ease;

    /* メニューをスクロール可能にする --------------------- 02/07 */
    overflow-y: scroll;
    overscroll-behavior: contain;
  }

  /* スマホ用メニューのリスト */
  .sp-menu__list {
    padding: 70px 10px 0;
  }

  /* スマホ用メニュー項目 */
  .sp-menu__item {
    border-bottom: solid 1px #ffffff;
    list-style: none;
  }

  /* スマホ用メニュー項目のリンク */
  .sp-menu__link {
    display: block;
    width: 100%;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
  }

  .sp-menu__link:hover {
    background-color: #002e5f;
  }

  /* チェックボックスは常に非表示 */
  #sp-menu__check {
    display: none;
  }

  /* チェックボックスのチェックがON（スマホ用メニューを開いた状態） */
  /* 真ん中の線 */
  #sp-menu__check:checked ~ .sp-menu__box span {
    /* 透明にして見えなくする */
    background: rgba(255, 255, 255, 0);
  }

  /* 上の線 */
  #sp-menu__check:checked ~ .sp-menu__box span::before {
    /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
    bottom: 0;
    /* 右に45度傾けてバツの片側の線にする */
    transition: all 0.2s;
    transform: rotate(45deg);
  }

  /* 下の線 */
  #sp-menu__check:checked ~ .sp-menu__box span::after {
    /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
    top: 0;
    /* 左に45度傾けてバツの片側の線にする */
    transition: all 0.2s;
    transform: rotate(-45deg);
  }

  .sp-menu__box {
    /* 中の要素を上下中央寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
    /* サイズ指定 */
    height: 22px;
    width: 16px;
    /* 最前面にする */
    /* z-index: 100; */
  }

  /* メニューの白線を疑似要素を使って3本作成 */
  .sp-menu__box span,
    /* 真ん中の線 */
    .sp-menu__box span:before,
    /* 上の線 */
    .sp-menu__box span:after {
    /* 下の線 */
    /* contentの値を指定しないと疑似要素が生成されない */
    content: "";
    /* 3本線のサイズと色を指定 */
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #4c7fcb;
    /* 3本線の位置は絶対位置で指定 */
    position: absolute;

    transition: all 0.2s;
  }

  /* 上の線の位置 */
  .sp-menu__box span:before {
    /* 真ん中の線と離す距離 */
    transition: all 0.2s;
    bottom: 8px;
  }

  /* 下の線の位置 */
  .sp-menu__box span:after {
    /* 真ん中の線と離す距離 */
    transition: all 0.2s;
    top: 8px;
  }

  /*閉じるボタンを追加*/
  #closeButton {
    list-style-type: none;
    color: white;
    font-size: 32px;
    font-weight: 700;
    text-align: right;
    margin-top: -40px;
    margin-right: 5px;
  }

  /* メイン */
  main {
    grid-template-columns: 0 100% 0;
  }

  .mainContainer {
    display: grid;
  }

  .mainContentContainer {
    width: 100%;
  }

  .recruit {
    padding: 0;
    > .introduction {
      display: grid;
      gap: 8px 0;
      > .p-top {
        margin: 0;
      }
    }
  }
  .recruit dl {
    display: grid;
    grid-template-columns: 100%;
    border: none;
    > dd {
      grid-column: 1;
    }
  }
  .recruit dl dd,
  .recruit dl dt {
    padding: 8px 0;
  }
  .recruit dl dd p,
  .recruit dl dt p {
    margin: 0;
  }
  .recruit dl dt {
    font-size: 16px;
    font-weight: 700;
    background-color: white;
  }

  .recruit dl dd {
    font-size: 14px;
    font-weight: 400;
  }

  /*各ページごとの調整*/

  .recruitTitle h2 {
    font-size: 22px;
    margin: 0 0 0 16px;
  }

  /* フッター */
  footer {
    padding: 3vh 0;
  }

  .footerButtonFlex {
    display: grid;
    gap: 27px;
  }

  .footerHigashiyamaContact span,
  .footerCareLiftContact span {
    text-align: center;
  }

  .footerHigashiyamaContact img {
    width: 280px;
  }

  .footerCareLiftContact img {
    width: 318px;
  }

  /*pc用の要素を非表示にする*/
  .headerCaption,
  .mailformButton,
  .rightUpButtonBar,
  .navFlex,
  .mainSideberContainer,
  .footerNavFlex,
  .footerHigashiyamaContact > span:last-child {
    display: none;
  }
}