@charset "UTF-8";

/* megamenu-wrapper ---------------------------------------------------*/

  /* pc */
  .menu-toggle-wrapper-pc{
    display: none;
    position: relative;
    z-index: 10;
    top: 6.5rem;
  }

/* common --------------------------------------------------- */
.pc-only{
  display: block;
}

.sp-only{
  display: none;
}

@media (max-width: 736px) {
  .pc-only{
    display: none;
  }

  .sp-only{
    display: block;
  }
}

.area-megamenu-section {
  background: #FAF8E9;
  padding: 100px 0 40px;
  position: relative;
  z-index: 999999;
  height: 660px; /*hover領域を第2階層も確保*/

  @media (max-width: 736px) {
    & {
      z-index: 1;
      background: #F7FFF7;
      padding: 0;
      height: auto;
    }
  }
}

/* scope(.area-megamenu-section) start ------------------*/
@scope (.area-megamenu-section) {

  :scope {
    --key-color: #24942A;
  }


  .area-megamenu-inner_wrap {
    display: block;
    max-width: 1020px;
    padding: 0 20px;
    margin: 0 auto;

    @media (max-width: 736px) {
      & {
        padding: 20px;
      }
    }

  }

  .area-megamenu-section{
    position: relative;
  }
  .close-menu{
    position: absolute;
    top: 40px;
    right: 40px;
    display: inline;
    background: none;
    padding: 0;
    border:none;
    width: auto;
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 80px;
    height: 80px;

    & span{
      position: absolute;
      white-space: nowrap;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &::before,
    &::after{
      content: '';
      display: block;
      background: #333;
      position: absolute;
      width: 30px;
      height: 2px;
      top: 30%;
      left: 50%;
    }

    &::before{
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after{
      transform: translate(-50%, -50%) rotate(-45deg);
    }

  }

/* 共通：第1・第2階層 */
.mega-menu-area-list,
.mega-menu-city-list {
 list-style: none;
 padding: 0;
/*  display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 grid-auto-rows: auto; */
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 position: relative;
 margin: ;

 &.menu-hidden {
  display: none !important;
}

@media (max-width: 736px) {
  & {
    grid-template-columns: 1fr;
    gap:0;
  }
}
}

.area-megamenu-title,
.city-back-btn {
  position: absolute;
  left: 0;
  top: -50px;
  font-size: 20px;
  font-weight: bold;

  & span {
    color: var(--key-color);
  }
}


.mega-menu-city-list {
  display: none;

  &.active {
    display: flex;
  }
}

/* 各アイテム */
.mega-menu-area-item,
.city-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-sizing: border-box;
  width: 180px;

  @media (max-width: 736px) {
    & {
      border-radius: 0;
    }
  }
  

  &:hover {
    background: #F7FFF7;
    box-shadow: 0 0 0 2px var(--key-color);
  }

  & > button,
  & > a {
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .item-inner{
    padding: 20px 20px 10px;


    @media (max-width: 736px) {
      & {
        display: flex;
        padding: 10px;
      }
    }

  }

  h3,
  .city-label {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    display: block;
  }

  .area-info,
  .city-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }

  .facility-link {
    font-size: 16px;
    font-weight: 500;
    background: #F2F2F2;
    padding: 10px 0;
    margin-top: auto;
    position: relative;
    border-radius: 0 0 8px 8px;

    &::after{
      content: url(../images/common/area_megamenu-arrow.svg);
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    @media (max-width: 736px) {
      & {
        display: none;
      }
    }
  }

  &:hover .facility-link{
  background: var(--key-color);
  color: #fff;

  &::after{
    content: url(../images/common/area_megamenu-arrow_w.svg);
  }
}

}





/* 第1階層ボタン */
.area-toggle-btn {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 第2階層の戻るボタン */
.city-back-btn button{
  display: inline;
  background: none;
  padding: 0;
  border:none;
  width: auto;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  /* left: -80px; */

  &::before,
  &::after{
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  &::before{
    content: url(../images/common/area_megamenu-arrow_back.svg);
    left: -30px;
  }

  &::after{
    content: '';
    width: 1px;
    height: 30px;
    background: #333;
    right: -20px;
  }

}

.city-back-btn span {
    position: relative;
    right: -40px;
  }

/* sp-------------------------------------------------------------- */
@media (max-width: 736px) {
  .tree-city-list {
    display: none;
  }

  .tree-city-list.is-open {
    display: block;
  }

  .mega-menu-tree-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .tree-area-toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tree-area-item{
    border-radius: 10px;
    overflow: hidden;
  }

  .tree-area-item .area-info,
  .tree-city-item .city-info{
    display: none;
    background: #FAFAFA;
    padding: 10px;
    border-radius: 6px;
  }

  .tree-area-toggle.is-open .area-name{
    color: var(--key-color);
  }

  .tree-area-toggle.is-open .area-info{
    background: #FCFBF2;
  }


}


}
/* scope (.area-megamenu-section) end ------------------*/

@media (max-width: 736px) {
  .l-header__list__content ul.mega-menu-tree-list{background: none;}
  .l-header__list__content ul li button.area-toggle-btn{
    padding: 0;
    border-radius: 10px;
  }

  .l-header__list__content ul li button.tree-area-toggle{
    padding: 16px 50px 16px 16px;
  }

/*   .l-header__list__content ul li button.tree-area-toggle:after{
    top: 22px;
  } */

  .l-header__list__content ul li.tree-city-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 50px 16px 16px;
  }

  .l-header__list__content ul li.is-active .mega-menu-tree-list button{
    color: #333;
    background: #fff;
  }


}