@charset "utf-8";
/* CSS Document */

/* ハンバーガーメニューが開いているときの背景スクロール禁止 */
#overlay.open {
  overflow-y: hidden;
}

body.scroll-lock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

/* モーダルが開いているときの背景スクロール禁止 */
body.modal-open {
  overflow: hidden;
}


.sp-navigation{
    position: fixed;
    width: 100%;
    top: 10%;
    z-index: 999;
}
/* ハンバーガーメニューボタン */
/*.menu-btn {
  position: fixed;
  top: -3%;
  right: 5%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 101;
  transition: all 0.3s ease-in-out;
}*/

/* --- 通常時のテキスト (MENU) --- */
#js__btn {
  position: relative;
  width: 30%; 
  height: 50px; 
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: -8px;
  left: 0;
}

#js__btn .menu-btn-line {
  position: relative;
  height: 1px;
  width: 32px;
  background: transparent; 
  transition: all 0.3s ease-in-out;
}

#js__btn .menu-btn-line::before,
#js__btn .menu-btn-line::after {
  content: "";
  height: 1px;
  width: 100%;
  background: var(--base-color);
  position: absolute;
  left: 0;
  transition: inherit;
  transform-origin: center center; 
}

#js__btn .menu-btn-line::before {
  top: -6px;
}

#js__btn .menu-btn-line::after {
  top: 6px;
}

#js__btn::after {
  content: "MENU";
  position: absolute;
  font-size: 10px;
  color: var(--base-color);
  letter-spacing: 0.1em;
  transition: all 0.3s ease-in-out;
  width: 100%;
  margin: auto;
  top: 80%;
  left: 0;
}

#js__btn.active .menu-btn-line::before {
  top: 0;
  transform: rotate(-25deg); 
}

#js__btn.active .menu-btn-line::after {
  top: 0;
  opacity: 0; 
  transform: rotate(0deg); 
}

#js__btn.active::after {
  content: "CLOSE";
}

/*.menu-btn-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  width: 35px;
  background: #c3c3c3;
  transition: all 0.3s ease-in-out;
}

.menu-btn-line::before,
.menu-btn-line::after {
  content: "";
  height: 1px;
  width: 100%;
  background: #c3c3c3;
  position: absolute;
  left: 0;
  transition: inherit;
}

.menu-btn-line::before {
  top: -10px;
}

.menu-btn-line::after {
  top: 10px;
}*/

/* ハンバーガーメニュー開閉時のスタイル */
.open .menu-navi {
  display: block;
  opacity: 1;
  transition: all 0.5s;
}

.open .menu-btn {
  border-color: #fff;
}

.open .menu-btn-line {
  background-color: transparent;
}

.open .menu-btn-line::before,
.open .menu-btn-line::after {
  top: 0;
  background: #fff;
}

.open .menu-btn-line::before {
  transform: rotate(45deg);
}

.open .menu-btn-line::after {
  transform: rotate(-45deg);
}

.open #header_temp, #header_temp a,
.open #header_temp .comm_flex #h_navi ol li a,
.open #js__btn::after{
    color: inherit;
}

.open #header_temp{
    background: rgba(234, 232, 229,0.65);
}

.open #js__btn .menu-btn-line::before,
.open #js__btn .menu-btn-line::after{
    background-color: var(--base-color);
}
.open #header_temp .comm_flex #h_logo img,
.open #header_temp .comm_flex #h_navi ol li img{
    filter: invert(100%);
}




/* 開いたメニュー */
.menu-navi {
  position: fixed;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ebe8e5;
  transition: all 0.5s;
  display: none;
  opacity: 0;
  z-index: 100;
  overflow-y: auto;
}

.menu-navi #sp_text_navi{
    border-bottom: 1px solid;
    padding-bottom: 3em;
    margin: 12em auto 3em;
}

.menu-navi .w85{
    width: 85%;
    margin: auto;
}

.menu-navi .w85.comm_flex,
.menu-navi  #sp_info ol{
    align-items: flex-start;
    justify-content: left;
    text-align: left;
    margin-top: 3em;
}

.menu-navi  #sp_text_navi dl,
.menu-navi  #sp_info ol li{
    width: 47%;
}

.menu-navi .w85 dt {
    margin-bottom: 2em;
}

.menu-navi .w85 dd{
    margin-bottom: 0.8em;
    font-size: clamp(1.3rem, 1.113rem + 0.52vw, 1.5rem);
}

.menu-navi  #sp_text_navi dd{
    padding-left: 1.5em;
}

.menu-navi  #sp_text_navi dd:before{
    content: "―";
    text-indent: -1.5em;
    padding-left: 0.2em;
    display: inline-block;
}

.menu-navi  #sp_info{
    padding-bottom: 2em;
}


.menu-navi  #sp_info ol li{
    font-size: 85%;
    margin-bottom: 1.5em;
}