/*========================================================
　　共通　css
　========================================================*/
/*共通---------------------------------------------------*/
html {
  scroll-padding-top: 99px;
  scroll-behavior: smooth;
}

body {
  font-family: 'noto sans jp','hiragino sans', 'yu gothic',sans-serif;
  font-size: 16px;
  color: #262626;
}

.sp-only {
  display: none;
}

.contents-area {
  max-width: 1600px;
  margin: auto;
  padding: 0 49px;
}


/*セクションタイトル*/
.section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 50px;
  font-weight: normal;
  text-wrap: nowrap;

  span {
    font-size: 30px;
    color: #a6a7a7;
    letter-spacing: .09em;
  }
}

/*セクションタイトル-サブ*/
.section-title-sub {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 69px;
  font-size: 30px;
  font-weight: normal;

  &::after {
    content: '';
    width: 31px;
    height: 5px;
    background: #8E1728;
  }
}
/*------------------*/

/*ページタイトル*/
.page-title-wrap {
  background-image: url(../img/title-bg.jpg);
  background-size: cover;
  background-position: center;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    border-radius: 20px 20px 0 0;
    background: #fff;
  }
}

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 276px 49px 60px;
}
/*------------------*/

/*ボタン_赤*/
.btn-red {
  position: relative;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 20px 20px 20px 25px;
  border: 1px solid transparent;
  border-radius: 50px;
  box-shadow: 4px 4px 20px #8e17284d;
  background: linear-gradient(90deg,#8e1728, #de2b3e);
  font-size: 18px;
  color: #fff;
  transition: .2s ease-out;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #fff;
    opacity: 0;
    transition: .2s ease-out;
  }

  .span-text {
      position: relative;
    }

  .span-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(90deg, #8e1728, #de2b3e);
      opacity: 0;
      transition: .2s ease-out;
    }

    &::after {
      content: '';
      width: 50%;
      aspect-ratio: 1;
      background: linear-gradient(90deg, #8e1728, #de2b3e);
      mask-image: url(../img/mail-icon.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
    }
  }
}

.btn-red-contact .span-icon::after {
  mask-image: url(../img/copy-document.svg);
}

/*ボタン_白*/
.btn-wrap {
  display: flex;
  align-items: center;
}

.link-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px 25px 25px 34px;
  border: 1px solid #a6a7a7;
  border-radius: 50px;
  box-shadow: 4px 4px 20px #a6a7a773;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  transition: .2s ease-out;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(52deg, #8e1728, #de2b3e);
    opacity: 0;
    transition: .2s ease-out;
  }

  .span-text {
    position: relative;
  }

  .span-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(52deg, #8e1728, #de2b3e);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      aspect-ratio: 1;
      border-radius: 50px;
      background: #fff;
      opacity: 0;
      transition: .2s ease-out;
    }

    &::after {
      content: '';
    width: 45%;
    height: 45%;
    background: #fff;
    mask-image: url(../img/arrow.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    }
  }
}

/*ボタン_戻る*/
.return {
  gap: 40px;
  padding: 15px 15px 15px 34px;
  border-radius: 20px;

  &::before {
    border-radius: 19px;
  }

  .span-icon {
    background: #a6a7a7;

    &::after{
      mask-image: url(../img/arrow-return.svg);
    }
  }
}

.btn-right {
  justify-content: end;
}
/*------------------*/


/*ボタン、リンクのホバーアクション--------------------------------*/
@media (hover: hover){
  /*リンク_共通*/
  .link {
    transition: .2s ease-out;

    &:hover {
      opacity: .5;
    }
  }


  /*ボタン_赤*/
  .btn-red {
    &:hover {
      border: 1px solid #a6a7a7;
      box-shadow: 4px 4px 20px #a6a7a773;
      color: #262626;

      &::before {
        opacity: 1;
      }

      .span-icon {
        background: linear-gradient(90deg, #8e1728, #de2b3e);

        &::before {
          opacity: 1;
        }

        &::after {
          background: #fff;
        }
      }
    }
  }

  /*ボタン_白*/
  .link-btn {
    &:hover {
      box-shadow: 0 4px 20px #8e17284d;
      color: #fff;

      &::before {
        opacity: 1;
      }

      .span-icon {
        background: #fff;

        &::before {
          opacity: 1;
        }

        &::after {
          background: linear-gradient(52deg, #8e1728, #de2b3e);
        }
      }
    }
  }

  /*ボタン_戻る*/

}

/*ヘッダー-----------------------------------------------*/
h1 {
  font-size: 16px;
}

header {
  position: fixed;
  z-index: 99;
  width: 100%;
  padding: 10px 23px 0;
}

.header-logo {
  width: 253px;
  height: 100%;
}

.header-contents {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  max-width: 1900px;
  margin: auto;
  padding: 11px 27px;
  border-radius: 40px;
  background: #fff;

  &::after {
    position: absolute;
    z-index: 98;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 40px;
    box-shadow: 7px 4px 10px #3434341a;
    pointer-events: none;
  }
}

/*メニューパネル*/
.menu-panel {
  display: flex;
  gap: 30px;
  align-items: center;
}

.header-nav-ul {
  display: flex;
  gap: 30px;
}

.header-nav-a {
  height: 100%;
  font-size: 13px;
}

.nav-menu-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: .5s ease-out;

  & span {
    display: flex;
    gap: 11px;
    align-items: center;

    &::before {
      content: '';
      width: 10px;
      height: 1px;
      background: #a6a7a7;
    }
  }
}

/*PC　ヘッダーメニューの開閉------------------------------*/
@media (min-width: 1440px) {
  .contact-btn {
    font-size: 13px;
  }
  .header-nav-ul li:hover {
    & .nav-menu-child {
      height: auto;
      overflow: visible;
      opacity: 1;
    }
  }

  .nav-menu-child {
    position: absolute;
    top: calc(100% - 11px);
    padding-top: 14px;

    & .child {
      position: relative;

      & span {
        position: relative;
        z-index: 10;
        padding: 27px;
      }
    }

    & a::after {
      position: absolute;
      top: 0;
      left: 0;
      content:'';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50px;
      box-shadow: 7px 4px 3px #3434341a;
      background: #fff;
    }
  }
}
/*------------------*/

/*フッター-----------------------------------------------*/
footer {
  background: #f0f0f0;
}

/*問い合わせ*/
.contact-wrapper {
  position: relative;
  padding: 60px;
  background-image: url(../img/contact-bg.jpg);
  background-size: cover;
  background-position: center;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: #ffffff4d;
  }
}

.contact-container {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template: auto auto/ 1fr 1fr;
  gap: 50px;
  padding: 100px 130px;
  border-radius: 20px;
  background: #ffffff4d;
  backdrop-filter: blur(8px);
}

.contact-title {
  grid-row: 1/ 3;
  margin: auto;

  span {
    color: #929292;
  }
}

.contact-text {
  font-size: 20px;
  font-weight: 500;

  span {
    display: inline-block;
    margin-top: 25px;
    font-size: 16px;
    font-weight: normal;
  }
}
/*------------------*/

.footer-contents {
  max-width: 1600px;
  margin: auto;
  padding: 50px 50px 20px 50px;
  font-size: 13px;
}

.footer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 27px;
  padding-bottom: 45px;
  border-bottom: 1px solid #a6a7a7;
}

.footer-logo {
  width: 274px;
  height: 100%;
}

.footer-list {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 27px;
  max-width: 500px;
  height: 230px;
}

.footer-list-div {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-list-child {
  display: flex;
  gap: 10px;
  align-items: center;

  &::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #a6a7a7;
  }
}

/*SNSリンク*/
.sns-link {
  display: flex;
  gap: 10px;
}

.sns-icon img {
  width: 40px;
  height: 40px;
}

.icon-x img {
  background: #000;
  padding: 8px;
  border-radius: 10px;
}



/*関連サイト*/
.footer-site-title {
  font-weight: 500;
  color: #262626;

  &:hover {
    cursor: default;
  }
}

.site-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  justify-items: start;
  gap: 10px;
  margin-top: 27px;
  font-size: 12px;
}

.site-a {
  display: flex;
  align-items: center;
  gap: 6px;

  &::after {
    content: '';
    width: 16px;
    aspect-ratio: 1;
    background-image: url(../img/footer-arrow.svg);
    background-size: cover;
  }
}

.copy-right {
  margin-top: 43px;
  text-align: right;
}

/*================================================================================================================*/
@media (max-width: 1439px) {
  html {
    scroll-padding-top: 65px;
  }

  .header-contents::after {
    background: #fff;
  }
  
  /*PC以外　メニューパネル*/
  .menu-panel {
    position: absolute;
    top: -10px;
    left: -23px;
    display: flex;
    flex-direction: column;
    gap: 75px;
    width: 100vw;
    height: 100vh;
    padding: 132px 0 36px;
    background: #fffffff2;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-out;
    
    &.is-active {
      opacity: 1;
      pointer-events: auto;
      overflow-y: scroll;
    }
  }

  .header-front {
    position: relative;
    z-index: 99;
  }

  .header-nav-ul {
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 30px;
  }

  .header-nav-a {
    font-size: 18px;
    font-weight: 500;
  }

  .nav-menu-child {
    grid-column: 1/ 3;
    gap: 20px;
    margin-top: 20px;
    height: auto;
    overflow: visible;
    opacity: 1;

    & .child {
      font-weight: normal;
    }
  }

  /*PC以外　ハンバーガーメニュー*/
  .burger {
    display: grid;
    place-items: center;
    width: 23px;
    aspect-ratio: 1;
    --opacity: 1;
    --rotate: 0;
    --translate: 7px;
    &.is-active {
      --opacity: 0;
      --rotate: 45deg;
      --translate: 0;
    }

    span {
      grid-area: 1/ 1/ -1/ -1;
      width: 100%;
      height: 1px;
      border-radius: 50px;
      background: #a6a7a7;
      transition: .5s ease-out;
      &:nth-child(1) {
        opacity: var(--opacity);
      }
      &:nth-child(2) {
        translate: 0 calc(var(--translate) * -1);
        
        rotate: var(--rotate);
      }
      &:nth-child(3) {
        translate: 0 var(--translate);
        rotate: calc(var(--rotate) * -1);
      }
    }
  }
}

/* 以下　スマホ版css ================================================================================================*/
@media (max-width: 768px) {
  /*スマホ　共通--------------------------------------------*/
  html {
    scroll-padding-top: 55px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .contents-area {
    padding: 0 10px;
  }

  /*スマホ　セクションタイトル*/
  .section-title {
    font-size: 30px;
    gap: 10px;

    span {
      font-size: 18px;

      &.sub-title {
        font-size: 24px;

        &::before {
          width: 30px;
          height: 1px;
        }
      }
    }
  }
  /*------------------*/

  /*スマホ　セクションタイトル-サブ*/
  .section-title-sub {
    gap: 20px;
    margin-bottom: 46px;
    font-size: 27px;

    &::after {
      content: '';
      width: 27px;
      height: 4px;
    }
  }

  /*スマホ　ページタイトル*/
  .page-title {
    flex-direction: column;
    align-items: start;
    gap: 50px;
    padding: 162px 30px 35px;
  }
  /*------------------*/

  /*スマホ　ボタン_赤*/
  .btn-red {
    padding: 20px 41px;
  }

  /*スマホ　ボタン_白*/
  .btn-wrap {
   justify-content: center; 
  }

  .link-btn {
    justify-content: center;
    width: 100%;
    padding: 20px 13px;
    font-size: 16px;
  }

  /*スマホ　ボタン_戻る*/
  .return {
    padding: 10px 10px 10px 25px;
    border-radius: 10px;
    font-size: 16px;

    &::before {
      border-radius: 9px;
    }

    .span-icon {
      width: 25px;
    }
  }

  /*スマホ　ヘッダー----------------------------------------*/
  header {
    padding: 10px 10px 0;
  }
  
  .header-logo {
    width: 149px;
  }
    
  /*スマホ　メニューパネル*/
  .menu-panel {
    left: -10px;
    gap: 20px;
    padding-top: 75px;
  }

  .header-nav-ul {
    gap: 20px;
  }

  .header-nav-a {
    font-size: 16px;
  }

  .nav-menu-child {
    gap: 10px;
    margin-top: 10px;
  }

  /*スマホ　フッター---------------------------------------*/

  /*スマホ　問い合わせ*/
  .contact-wrapper {
    padding: 50px 10px;
  }

  .contact-container {
    grid-template: auto/ auto;
    gap: 40px;
    padding: 40px 20px;
  }

  .contact-title {
    grid-row: 1;
    margin: 0;
  }

  .contact-text {
    font-size: 16px;
  }
  /*------------------*/

  .footer-contents {
    padding: 50px 30px 20px;
  }

  .footer-nav {
    flex-direction: column;
    padding-bottom: 30px;
  }

  .footer-list {
    flex-wrap: nowrap;
    height: auto;
  }

  .site-list {
    grid-auto-flow: row;
    gap: 20px;
  }
  
  .footer-site-title:hover {
    cursor: pointer;
  }

  /*アコーディオンメニュー*/
  .accordion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    &::after {
      content: '';
      width: 10px;
      height: 10px;
      border-right: 2px solid #a6a7a7;
      border-bottom: 2px solid #a6a7a7;
      rotate: 45deg;
      transition: .2s ease-out;
    }

    &.is-open::after{
      rotate: -135deg;
    }
  }
  .accordion-item {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s ease-out;

    &.is-open {
      height: auto;
      overflow: visible;
      opacity: 1;
    }
  }
  /*------------------*/
  .copy-right {
    margin-top: 60px;
    text-align: center;
    font-size: 14px;
  }
}