@charset "utf-8";

/* ========================================
  基本設定
======================================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


li {
list-style: none;
}


/* ========================================
  ヘッダー
======================================== */
#header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100vw;
height: 80px;

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

margin: 0;
padding: 5px 4%;

background-color: #fff;

box-sizing: border-box;
z-index: 5000;

}



/* ========================================
  ロゴ
======================================== */

header .pc .top_logo {
display: block;
width: 150px;
height: auto;
}


/* PC表示 */
.pc {
display: block !important;
}

.sp {
display: none !important;
}


/* ========================================
  PCヘッダーメニュー
======================================== */

.head_menu {
flex: 1;
display: flex;
justify-content: flex-end;
}

.head_menu .box-a a:hover {
opacity: 0.5;
}


/* メニュー全体 */
.menu_lists {
display: flex;
margin: 0;
padding: 0;
}


/* 各メニュー */
.menu_list {
position: relative;

width: 130px;
height: 60px;

display: block;

transition: background-color 0.3s;
}


/* ホバー */
.menu_list:hover {
background-color: #F1B0B2;
z-index: 9999;
}


/* メニュー間の縦線 */
.menu_list:not(:first-child)::before {
content: "";

position: absolute;
top: 0;
left: 0;

width: 1px;
height: 100%;

background-color: #fff;

transition: background-color 0.3s;
}

.menu_list:hover::before {
background-color: #F1B0B2;
}


/* メニューリンク */
.menu_list > a {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 100%;

color: #CB5266;
text-decoration: none;

font-size: 14px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.05em;

text-align: center;

transition: color 0.3s;
}

.menu_list:hover > a {
color: #fff;
}


/* ========================================
  ドロップダウン
======================================== */

.dropdown_lists {
position: absolute;
top: 60px;
left: 0;

display: none;

width: max-content;
min-width: 130px;

margin: 0;
padding: 0;

white-space: nowrap;

z-index: 9999;
}


/* ホバーで表示 */
.menu_list:hover .dropdown_lists {
display: block;
pointer-events: auto;
}


/* ドロップダウン項目 */
.dropdown__list {
position: relative;

width: 100%;
height: 60px;

padding-left: 4px;

background-color: #CB5266;

transition: background-color 0.3s;
}


/* 項目間の線 */
.dropdown__list:not(:first-child)::before {
content: "";

position: absolute;
top: 0;
left: 0;

width: 100%;
height: 1px;

background-color: rgba(255, 255, 255, 0.35);
}


/* ドロップダウンリンク */
.dropdown__list a {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 60px;

color: #fff;
text-decoration: none;

font-size: 13px;
font-weight: 600;
line-height: 1.3;

text-align: center;
}


/* 小さい文字 */
.dropdown_lists .list_a {
font-size: 11px;
}


/* ホバー */
.dropdown__list:hover {
background-color: #B94459;
}

/* ========================================
  ハンバーガーエリア
======================================== */

#navArea {
position: relative;
z-index: 10000;
}


/* ========================================
  スマホ用ナビ
======================================== */

#navArea nav {
display: none;
}


/* ========================================
  スマホ
======================================== */

@media screen and (max-width: 840px) {

/* ----------------------------------------
    ヘッダー
---------------------------------------- */

header {
width: 100%;
max-width: 100vw;
height: 56px;
padding: 0;
overflow: visible;
z-index: 5000;
}

body {
  padding-top: 56px;

}


/* ----------------------------------------
    ロゴ切り替え
---------------------------------------- */

.pc {
  display: none !important;
}

.sp {
  display: block !important;
}

.sp img {
  display: block;

  height: 55px;
  width: auto;

  padding: 10px 0 10px 10px;
}


/* ----------------------------------------
    PCメニューを非表示
---------------------------------------- */

.head_menu {
  display: none;
}

.menu_wrap,
.menu_lists {
  display: none;
}


/* ----------------------------------------
    その他
---------------------------------------- */

.marquee {
  display: none;
}

.button {
  width: min(300px, calc(100% - 20px));
  max-width: 100%;
  margin: 5px auto;

  font-size: 16px;
  text-align: center;
}

/* ----------------------------------------
    ハンバーガーメニュー
---------------------------------------- */

#navArea {
  position: static;
  z-index: auto;
}

#navArea nav {
  position: fixed;

  top: 0;
  left: 0;

width: min(220px, 80vw);
max-width: 220px;
height: 100dvh;

  display: block !important;

  background-color: #fff;

transform: translate3d(-100%, 0, 0);
  opacity: 0;

  visibility: hidden;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    visibility 0.35s ease;
    
  z-index: 100001;
}



/* OPEN */
#navArea.open nav {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------
    ナビ内部
---------------------------------------- */


#navArea nav .inner {
  width: 100%;
  height: 100%;

  padding: 75px 20px 25px;

  overflow-y: auto;
  box-sizing: border-box;
}

#navArea nav .inner ul {
  margin: 0;
  padding: 0;
}



#navArea nav .inner ul li {
  margin: 0;
  border-bottom: 1px solid #eee;
}



#navArea nav .inner ul li a {
  display: block;

  padding: 12px 10px;

  color: #333;
  background: #fff;

  text-decoration: none;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;

  transition: background-color 0.2s;
}



#navArea nav .inner ul li a:hover {
  background-color: #f5f5f5;
}

/* ----------------------------------------
    ハンバーガーボタン
---------------------------------------- */

.toggle-btn {
position: fixed;
top: 13px;
right: 15px;

width: 30px;
height: 30px;

display: block;
cursor: pointer;

z-index: 100003;
}


.toggle-btn span {
  position: absolute;
  left: 0;

  width: 30px;
  height: 2px;

  background-color: #333;

  border-radius: 4px;

  transition: all 0.4s ease;
}


.toggle-btn span:nth-child(1) {
  top: 4px;
}

.toggle-btn span:nth-child(2) {
  top: 14px;
}

.toggle-btn span:nth-child(3) {
  bottom: 4px;
}


/* -----------------------------
    OPEN時の×
----------------------------- */

#navArea.open .toggle-btn span {
  background: #333;
}

#navArea.open .toggle-btn span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#navArea.open .toggle-btn span:nth-child(2) {
  opacity: 0;
}

#navArea.open .toggle-btn span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* -----------------------------
    背景マスク
----------------------------- */
#mask {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  width: 100vw;
  height: 100dvh;

  background: rgba(0, 0, 0, 0.35);

  cursor: pointer;

  z-index: 100000;
}

}


/* ========================================
  PC専用
======================================== */

@media screen and (min-width: 841px) {

#navArea nav,
.toggle-btn,
#mask {
  display: none;
}

}


/* ========================================
  さらに小さいスマホ
======================================== */

@media screen and (max-width: 600px) {

.sp img {
  height: 55px;
}

}
/* ========================================
  体験レッスン予約だけ緑にする
======================================== */

.menu_list.trial-menu {
  background-color: #6A9B78;
}

.menu_list.trial-menu > a {
  color: #fff;
}

/* ホバー時 */
.menu_list.trial-menu:hover {
  background-color: #578766;
}

.menu_list.trial-menu:hover > a {
  color: #fff;
}

/* 左側の縦線も緑にする */
.menu_list.trial-menu::before {
  background-color: #6A9B78;
}

.menu_list.trial-menu:hover::before {
  background-color: #578766;
}