@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 新デザイン */
.new-corporate-header {
  width: 100%;
  height: 100px;
}
.new-corporate-header-main {
  padding: 28px 36px 16px 36px;
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
}
.new-corporate-header-logo {
  display: flex;
  align-items: center;
}
.new-header-button {
  display: flex;
  gap: 15px;
  display: flex;
  align-items: center;
}
.new-header-button div {
  padding: 10px 24px;
  height: 40px;
  color: white;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.header-menu {
  /* height: 48px; */
  padding: 8px 36px 8px 12px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  overflow-x: scroll;
  /* width: 1080px; */
  /* min-width: 1000px; */
  gap: 10px;
}

.header-menu > * {
  flex-shrink: 0;
}

.content {
  margin: 0;
}
.content-in {
  max-width: 1440px;
  flex-wrap: nowrap;
}
.wrap {
  width: 100%;
}
.main {
  width: 76%;
  max-width: 1100px;
  padding: 0;
}
.sidebar {
  max-width: 340px;
  padding-top: 0;
  padding-left: 36px;
  width: 24%;
}

.main {
	font-family: "Noto Sans JP", sans-serif;	
}
.article {
  padding: 24px 36px 24px 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
}

/* パンクズ */
.breadcrumb {
  margin: 0;
}

/* 投稿日・更新日 */
.date-tags {
  padding: 8px 0;
  text-align: left;
}
.post-date {
  font-size: 12px;
  font-weight: 700;
  color: #6C6E74;
}
.entry-date {
  font-size: 12px;
  font-weight: 700;
  color: #6C6E74; 
}

/* サムネ */
.eye-catch-image {
  border-radius: 24px;
}
.eye-catch .cat-label {
  top: 1.5em;
  left: 1.5em;
}

/* タイトル */
h1 {
  font-size: 28px;
  font-weight: 700;
  font-family: "Noto Sans JP",  sans-serif;
}

/* ここから記事部分 */
.entry-content {
  padding: 64px 48px;
  margin-top: 0;
}

/* 目次 */
.toc {
  width: 100%;
  /* background-color: rgb(242, 242, 251); */
  border: 1px solid #D9DDE3;
  border-radius: 8px;
  padding: 24px 48px;
}
.toc-title {
  font-size: 16px;
  font-weight: 700;
}
.toc-list a {
  position: relative;
  padding: 0 0 0 16px;
}
.toc-list a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background-color: #007AFF;
  vertical-align: middle;
  margin-right: 12px;
  position: absolute;
  left: 0;
  top: 4px;
}
.toc-content {
  font-size: 14px;
}

/* 見出し */
.article h2 {
  display: block;
  margin: 60px 0;
  background-color: white;
  padding: 0 0 0 24px;
  position: relative;
}
.article h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 8px;
  background-color: #007AFF;
  position: absolute;
  vertical-align: baseline;
  left: 0;
}
.article h3 {
  border: none;
  margin: 40px 0;
  font-size: 20px;
  padding: 0 0 0 12px;
  position: relative;
}
.article h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 100%;
  border-radius: 100px;
  background-color: #007AFF;
  vertical-align: middle;  
  margin-right: 12px;
  position: absolute;
  left: 0;
}

/* アイコンボックス */
.alert-box {
  background: white;
  border: 1px solid #D9DDE3;
  font-size: 14px;
}
.memo-box {
  background: white;
  border: 1px solid #D9DDE3;
  font-size: 14px;
}

/* 白抜きボックス */
.blank-box {
  border-width: 1px;
  font-size: 14px;
  border-color: #D9DDE3;
  padding: 24px 48px;
  border-radius: 8px;
}

/* コードブロック */
pre {
  background: white;
  padding: 16px 48px;
  font-size: 14px;
  border-radius: 8px;
}

/* 会話ブロック */
.speech-balloon {
  font-size: 14px;
  border-color: #D9DDE3;
}

/* サイドバー */
.card-title {
  font-size: 14px;
}
.card-thumb img {
  border-radius: 8px;
}
.sidebar h3 {
  margin: 0;
}
.widget_categories ul {
  padding-left: 5px;
}
.widget_categories ul li a {
  padding: 7px 0 7px 20px;
  /* margin: 14px 0; */
  position: relative;
  border-radius: 8px;
}
.widget_categories ul li a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background-color: #007AFF;
  vertical-align: middle;
  margin-right: 12px;
  margin-left: 6px;
  margin-top: 7px;
  position: absolute;
  left: 0;
  top: 8px;
}
.widget-entry-cards a {
  border-radius: 8px;
}

.sidebar-consult {
  background: #ECF1F6;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 32px;
}

/* 記事一覧ページ */
.archive-title {
  padding-left: 16px;
  font-size: 22px;
}
.archive-title span {
  display: none;
}
.list a {
  border-radius: 8px;
}
.related-list a {
  border-radius: 8px;
}

/* ページネーション */
.page-numbers {
  background-color: #FFF;
  border: none;
  border-radius: 100px;

  font-size: 14px;
  font-weight: 700;
}
.page-numbers.dots {
  background-color: #FFF;;
}

.pagination-next {
  display: none;
}

.pagination .current {
  background-color: #007AFF1F;
  border-radius: 100px;
}

.pager-post-navi {
  display: none;
}

/* 記事一覧 */
.entry-card-title {
  font-size: 16px;
}

.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
  background-color: #007AFF1F; /*背景色*/
  transition: all 0.8s ease; /*アニメーション*/
  color: #333; /*フォントカラー*/
}

.footer-content {
  padding: 24px 96px 24px 88px;
  display: flex;
  justify-content: space-between;
}
.footer-content-menu {
  display: flex;
}
.footer-content-menu-name {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
}
.footer-corporate {
  padding: 16px 112px;
  display: flex;
  justify-content: end;
  color: #1C1C1E;
  font-size: 11px;
  font-weight: 700;
}

@media screen and (max-width: 800px) {
  .footer-content {
    padding: 24px;
  }
}

@media screen and (max-width: 700px) {
  .article {
    padding: 0 0;
  }
  .entry-content {
    padding: 48px 0;
  }
  .new-corporate-header {
    height: 80px;
  }
  .new-corporate-header-main {
    padding: 16px 24px;
  }
  .new-header-button {
    display: none;
  }
  .footer-content {
    flex-direction: column;
    gap: 48px;
  }

  .footer-content-menu {
    flex-direction: column;
  }
  .footer-corporate {
    justify-content: center;
  }
}

/* 新デザインここまで */


/*必要ならばここにコードを書く*/
.corporate-header {
  width: 100%;
  height: 144px;
  background: var(--Linear, linear-gradient(180deg, #433FFE 0%, #0B07BE 100%));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.corporate-header-main  {
  padding: 16px 100px;
  display: flex;
  gap: auto;
  justify-content: space-between;
}
.corporate-header-logo {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  align-self: stretch;
}
.corporate-header-search {
  background-color: white;
  border-radius: 12px;
  width: 350px;
  padding: 4px 4px 4px 16px;
  height: 40px;
  display: flex;
  gap: 4px;
  justify-content: space-between;
}
.corporate-header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ここから削除 */
.corporate-header-menu {
  padding: 4px 100px;
  display: flex;
  gap: 50px;
}
.corporate-header-button {
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  color: white;
  display: flex;
  flex-direction: column;

  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  background-color: transparent;
  border: none;
  text-decoration: none;
}
.corporate-header-button:hover {
  background-color: transparent;
  color: #E5B403;
}
.corporate-header-button-link {
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
}
.corporate-menu-btn {
  position: fixed;
  top: 16px;
  right: 10px;
  display: flex;
  height: 45px;
  width: 45px;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.corporate-header-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;

  border-radius: 12px;

  background-color: transparent;
  color: white;
  text-align: center;

  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
/* ここまで削除 */


/* ここから */
.corporate-header-contact-button {
  background-color: #E5B403;
  color: white;
  border: none;
  height: 44px;
  width: 180px;
  border-radius: 1000px;
  font-weight: 700;
}
.corporate-header-contact-button:hover {
  color: #433FFE;
  background: white;
}
/* ここまで */
@media screen and (max-width: 480px) {
  .corporate-header {
    height: 64px;
  }
  .corporate-header-main {
    padding: 16px 24px;
  }
  .corporate-header-search {
    display: none;
  }
  .corporate-header-menu {
    display: none;
  }
  /* ここから */
  .corporate-header-right {
    display: none;
  }
  /* ここまで */
}

.corporate-footer {
  background: #161535;
  display: flex;
  padding: 32px 80px;
  flex-direction: column;
  gap: 24px;
}
.corporate-footer-style {
  display: flex;
  margin: auto;
}
.corporate-footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 64px;
}
.corproate-footer-navigation {
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.corporate-footer-button {
  background: #161535;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;

  border-radius: 12px;

  color: white;
  text-align: center;

  font-family: Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}
.corporate-footer-button:hover {
  color: #E5B403;
  background: #161535;
}
@media screen and (max-width: 480px) {
  .corporate-footer {
    padding: 32px 24px;
  }
  .corporate-footer-style {
    flex-direction: column;
  }
  .corporate-footer-logo {
    padding: 24px 64px;
  }
}
.footer-navigation-button {
  display: flex;
  gap: 32px;
}
@media screen and (max-width: 480px) {
  .footer-navigation-button {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
  }
}

.footer-line {
  border-top: 1px solid #fff;
  width: 100%;
}

.corporate-main {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.corporate-sub {
  min-width: 274px;
  display: flex;
  flex-direction: column;
}
.corporate-contents {
  display: flex;
  /* width: 100%; */
  margin: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
    gap: 16px;
}

.grid-item {
    display: flex;
    gap: 8px;
}

.grid-item img {
  width: 160px;
  height: 90px;
}
.grid-item a {
  color: var(--black, #2E2E35);
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}

.category-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.category-list-name {
  color: var(--black, #2E2E35);
  font-family: Helvetica;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 19.6px */
}

.article img {
/*   width :  100%; */
  height: auto;
}

/* 新デザイン変更 */
.marker-under {
  /* background: linear-gradient(transparent 60%, #ff9 60%); */
  background: linear-gradient(transparent 60%, #FFECDC 60%);
  /* background: #FFECDC; */
  font-weight: bold;
}

/* 新デザイン変更 */
.sidebar h3 {
  background-color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  padding: 12px 5px;
}

/* いったん削除 */
/* .sidebar h3::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 26 24" fill="none"><path d="M11.16 5.58C11.16 8.66175 8.66175 11.16 5.58 11.16C2.49825 11.16 0 8.66175 0 5.58C0 2.49825 2.49825 0 5.58 0C8.66175 0 11.16 2.49825 11.16 5.58ZM2.77156 5.58C2.77156 7.13106 4.02894 8.38844 5.58 8.38844C7.13106 8.38844 8.38844 7.13106 8.38844 5.58C8.38844 4.02894 7.13106 2.77156 5.58 2.77156C4.02894 2.77156 2.77156 4.02894 2.77156 5.58Z" fill="%23433FFE"/><path d="M25.8602 18.4198C25.8602 21.5016 23.3619 23.9998 20.2802 23.9998C17.1984 23.9998 14.7002 21.5016 14.7002 18.4198C14.7002 15.3381 17.1984 12.8398 20.2802 12.8398C23.3619 12.8398 25.8602 15.3381 25.8602 18.4198ZM17.4718 18.4198C17.4718 19.9709 18.7291 21.2283 20.2802 21.2283C21.8313 21.2283 23.0886 19.9709 23.0886 18.4198C23.0886 16.8688 21.8313 15.6114 20.2802 15.6114C18.7291 15.6114 17.4718 16.8688 17.4718 18.4198Z" fill="%23433FFE"/><rect x="8.5498" y="6.75" width="5.36758" height="3.13643" rx="1.56821" transform="rotate(41.0517 8.5498 6.75)" fill="%23433FFE"/><rect x="20.5502" y="0.835449" width="3.16876" height="26.1503" rx="1.58438" transform="rotate(37.1475 20.5502 0.835449)" fill="%23433FFE"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: middle;
} */

.container {
  background-color: white;
}

/* 新デザインにより修正 */
/* .toc {
  width: 100%;
  background-color: rgb(242, 242, 251);
  border: none;
  border-radius: 12px;
} */

.sidebar a {
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

article {
  /* font-family: Helvetica; */
  /* font-size: 18px; */
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
}

.common-icon-box {
  border-radius: 12px;
}

.wp-block-heading {
  background-color: white;
}

/* 新デザインにより変更 */
.article h1 {
  /* font-size: 32px; */
}
/* ここまで */

.banner-container {
  position: relative;
  width: 80%;
  border: 1.5px solid #D9D9D9;
  border-radius: 3px;
  display: flex;
	line-height: 100%;
}
.sp-banner-container {
  display: none;
}
.banner-text {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-title {
  font-size: 24.8px;
  font-weight: 700;
  height: 57.5px;
  justify-content: center;
  flex-direction: column;
  display: flex;
}
.banner-description {
  font-size: 11px;
  color: #A1A1A1;
  height: 25px;
  font-weight: 700;
}
.banner-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-image img {
  width: 125px;
  height: 200px;
  margin: 20px 0;
}
.banner-button {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.banner-button-1 {
  background: #D7A700;
  width: 165px;
  height: 40px;
  color: white;
  border-radius: 3px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}
.banner-button-2 {
  background: #238F76;
  width: 165px;
  height: 40px;
  color: white;
  border-radius: 3px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 800;

  margin-top: 15px;
}
.banner-button-1:hover {
  background: rgba(215, 167, 0, 0.8);
}
.banner-button-2:hover {
  background: rgba(35, 143, 118, 0.8);
}
@media screen and (max-width: 840px) {
  .banner-container {
    flex-direction: column-reverse;
    align-items: center;
  }
}
@media screen and (max-width: 550px) {
  .banner-container {
    display: none;
  }
  .sp-banner-container {
    display: block;
    border: 1.5px solid #D9D9D9;
  }
  .banner-text {
    padding: 28px;
  }
  .banner-button {
    flex-direction: column;
    gap: 0px;
  }
  .banner-title {
    width: 100%;
    height: auto;
  }
  .banner-description {
    height: auto;
	  line-height: 150%;
	  padding: 10px 0;
  }
  .banner-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner-button a {
    display: flex;
    justify-content: center;
  }
	.banner-button-1 {
		width: 100%;
	}
	.banner-button-2 {
		width: 100%;
	}
}
.banner-button-af {
	background: rgba(229, 180, 3);
}
.banner-button-af:hover {
	background: rgba(229, 180, 3, 0.8);
}

/* hover */
.custom-html-widget img,
#article-tob-button div,
.sidebar-banner-image,
.sidebar-consult a div,
.new-header-button div {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.custom-html-widget img:hover,
.sidebar-banner-image:hover,
.sidebar-consult a div:hover,
.new-header-button div:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
#article-tob-button div:hover {
  transform: scale(1.05);
}

/* udemy記事内バナー */
.udemy-article-banner {
  display: flex;
}
.udemy-article-banner-img {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.udemy-article-banner-content {
  display: flex;
  align-items: center
}
.udemy-bannner-button-pc {
  display: flex;
  flex-direction: column;
}
.udemy-bannner-button-sp {
  display: none;
}

@media screen and (max-width: 900px){
  .udemy-article-banner {
    flex-direction: column;
    align-items: center;
  }
  .udemy-article-banner-content {
    padding-top: 30px;
  }
}
@media screen and (max-width: 500px){
  .udemy-article-banner-img {
    width: 100%;
  }
  .udemy-bannner-button-pc {
    display: none;
  }
  .udemy-bannner-button-sp {
    display: flex;
    flex-direction: column;
  }
}

#udemy-article-banner a {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1); 
}
#udemy-article-banner a:hover{
  opacity: 0.8; 
}

.tob-button-sp {
  display: none;
}
@media screen and (max-width: 500px) {
  .tob-button {
    display: none;
  }
  .tob-button-sp {
    display: block;
  }
}

/* 記事下バナー */
.lp_banner_article_bottom {
  padding: 40px 80px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  .lp_banner_article_bottom {
    flex-direction: column;
    padding: 0;
  }
	.lp_banner_article_bottom img {
    width: 100%;
  }
}

.questions_top_img {
  padding-right: 24px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 770px) {
  .questions_top_img {
    display: none;
  }
}

.qa-button {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1); 
}
.qa-button:hover{
  opacity: 0.8;
  transform: scale(1.05);
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.editor-styles-wrapper p::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper h2::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper h3::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper h4::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper td::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper li::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper textarea::selection {
  background: #B5D8FE !important;
}
.editor-styles-wrapper .marker-under {
  background: linear-gradient(transparent 60%, #FFECDC 60%)!important;
}
.editor-styles-wrapper .blank-box {
  border-width: 1px!important;
  font-size: 14px!important;
  border-color: #D9DDE3!important;
  padding: 24px 48px!important;
  border-radius: 8px!important;
}

.supervisor-container {
  border: 1px solid #ced0d4;
  padding: 40px;
  display: flex;
  gap: 30px;

  @media screen and (max-width: 750px) {
    flex-direction: column;
  }
}

.table-scrollable {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scrollable table {
  min-width: 600px;
  width: auto !important;
  border-collapse: collapse;
}

/* ハンバーガーメニュー */
.hamburger-menu-btn {
  display: none; /* PCでは非表示 */
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: transparent;
  border: none;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.hamburger-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #393B3F;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* ハンバーガーボタンがアクティブな時 */
.hamburger-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* オーバーレイ */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-overlay.active {
  display: block;
  opacity: 1;
}

/* メニューコンテナ */
.header-menu-container {
  position: relative;
}

@media screen and (max-width: 700px) {
  /* ハンバーガーボタンを表示 */
  .hamburger-menu-btn {
    display: flex;
  }

  /* メニューコンテナをスライドメニューに変更 */
  .header-menu-container {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: white;
    z-index: 999;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .header-menu-container.active {
    right: 0;
  }

  /* メニュー内のスタイル調整 */
  .header-menu {
    flex-direction: column;
    padding: 80px 20px 20px;
    overflow-x: visible;
  }

  .header-menu > div {
    width: 100% !important;
    border-bottom: 1px solid #D9DDE3;
  }

  .header-menu > div:last-child {
    border-bottom: none;
  }

  /* 区切り線を非表示 */
  .header-menu .menu-separator {
    display: none;
  }
}