*{
  margin:0;
  padding:0px;
  box-sizing:border-box;
}
html {
  scroll-behavior: smooth;
}

html,body{
  overflow-x:hidden;
}

/* スマホ（最大幅600pxくらい）向け */
@media only screen and (max-width: 768px) {
.top-image-pc{
  display:none;
}

.name-pc{
  display:none;
}

.top-buttons{
  display: none !important;
}

  .work-item-title {
    border-bottom: 1px solid black; /* 線の太さと色 */
    padding-bottom: 0px; /* 線と文字の間隔 */
    margin-bottom: 0px; /* 線と次の要素の間隔 */
    width: 100%;
  }



}



  body{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
  }

  /* トップフレーム */
.top-frame {
  width: 95%;
  height: 580px; /* 高さ固定 */
  border: 1px solid black;
  position: relative;
  margin: 10px; /* 上下左右に20pxの余白 */
}
  /* ワークフレーム */
  .work-frame{
    width:95%;
    min-height:900px;      /* ここだけ高さ変更 */
    border:1px solid black;
    margin-top:10px;       /* トップとの余白 */
  }
  
 


  /* CONTACTボタン */
  .contact-button{
    position:absolute;
    top:0px;
    right:0px;

    border:1px solid black;
    padding:8px 14px;

    font-family:"Nova Round", sans-serif;
    text-decoration:none;
    color:black;
    font-size:14px;
  }

  .contact-button{
  transition: transform 0.2s ease;
}

.contact-button:hover{
  transform: scale(1.1);
}

.contact-button:active{
  transform: scale(0.95);
}
/* SNSエリア */
.sns {
  position: absolute;
  right: 0; /* 右揃え */
  top: 510px; /* 画像下端とフレーム下端の中央 */
  display: flex;
  gap: 0; /* アイコン間隔 */
  z-index: 100;
}
  /* SNSアイコン枠 */
.sns-icon {
  border: 1px solid black;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.sns-icon{
  transition: transform 0.2s ease;
}

.sns-icon:hover{
  transform: rotate(10deg);
}
.sns-icon img {
  width: 25px;
  height: 25px;
  display: block;
}
  
  /* フレーム既存設定は省略 */
.top-buttons{
  position: absolute;
  left: 37px;                /* フレームの左端 */
  bottom: 0;              /* フレームの下端 */
  display: flex;
  gap: 0;

  transform: rotate(-90deg);      /* 左に90度回転 */
  transform-origin: left bottom;  /* 回転基準を左下に */

  /* 内側余白が欲しければ調整 */
  padding-left: 5px;
  padding-bottom: 5px;
}



.mobile-frames {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 0px;               /* 上下の間隔 */
  width: 40px;            /* 横幅フレームに合わせる */
  position: absolute;      /* top-frame 内で位置指定 */
  left: 0;                /* 左端に揃える */
  bottom: 0;              /* 下端に揃える */
}

/* フレームをタップで少し拡大 */
/* フレームをタップで拡大 */
/* フレーム基本 */
.frame-mobile {
  width: 100%;
  height: 135px;
  border: 1px solid black;
  margin: 0;
  transition: transform 0.2s ease;
}

/* フレームをタップしている間 */
/* フレームをタップしている間 */
.frame-mobile:active {
  transform: scale(1.05);
}

/* フレームと対応ボタンの連動 */
/* ボタン全体ではなくテキストだけ拡大 */
#frame-1:active ~ .mobile-buttons a:first-child .btn-text,
#frame-1:active ~ .mobile-buttons a:first-child .btn-number,
#frame-2:active ~ .mobile-buttons a:last-child .btn-text,
#frame-2:active ~ .mobile-buttons a:last-child .btn-number {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
/* モバイルボタン自体はタップで拡大しない */
.mobile-btn {
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  color: black;
  font-family: "Nova Round", sans-serif;
  font-size: 14px;
  transition: transform 0.2s ease; /* フレーム連動用 */
}

/* 番号と文字の間隔 */
.mobile-btn .btn-number {
  font-weight: bold;
  margin-right: 40px;
}
 .mobile-buttons {
    position: absolute;
    left: 30px;      /* フレーム内に収めるため調整 */
    bottom: 15px;     /* 下端から少し内側 */
    display: flex;
    gap: 40px;
    transform: rotate(-90deg);       /* 左に90度回転 */
    transform-origin: left bottom;   /* 左下を基準に回転 */
    z-index: 10;
  }

/* ボタン内の番号とテキスト */
.mobile-btn .btn-number,
.mobile-btn .btn-text {
  display: inline-block;
  transition: transform 0.2s ease; /* フレーム連動用 */
}


/* ボタン個別 */
.top-btn{
  border:1px solid black;
  padding:7px 15px;
  font-family:"Nova Round", sans-serif;
  text-decoration:none;
  color:black;

  display:flex;           /* 番号とテキストを横並び */
  align-items:center;     /* 縦中央揃え */
  font-size:13px;

  text-align:left;        /* 左寄せ */
}

/* 番号とテキストの間隔 */
.btn-number{
  margin-right:30px;      /* 番号と文字の間隔 */
  font-weight:bold;
}

.top-btn:hover{
  background-color: black;
}

.top-btn:hover .btn-text,
.top-btn:hover .btn-number{
  color: white;
}


/* 中央より少し左寄りの画像 */
.top-image {
  position: absolute;
  top: 385px;      /* 画像縦位置 */
  left: 55.5%;       /* 横中央より少し左 */
  transform: translate(-50%, -77%);
}


  .top-image img {
  width: 315px;
  height: auto;
  display: block;
  border: 1px solid black;
  margin: 0;
              padding:0;               /* 余白なし */
              flex-shrink:0;
                object-fit: cover;
}


.top-dots{
  position:absolute;
  bottom:-15px;
  left:57%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
}

.top-dots span{
  width:6px;
  height:6px;
  border:1px solid black;
  border-radius:50%;
}

.top-dots span.active{
  background:black;
}





  .btn-number{
  margin-right:30px;       /* 番号とテキストの間隔 */
  font-weight:bold;
  color: rgb(0, 0, 0);
}
.top-end-line{
  border:0;                  /* デフォルトの線を消す */
  border-bottom:1px solid black; /* 下線として表示 */
  width:100%;
  margin:0;
}

.top-text{
  position:absolute;
  top:calc(60% + 150px);  /* 画像の下に配置 */
  left:14%;                /* 左揃え */
  display:flex;
  flex-direction:column;   /* 上から下に並べる */
  gap:0px;                 /* 行間 */
  font-family:"M PLUS Rounded 1c", sans-serif; /* 丸ゴシック系 */
}

/* 小さいテキスト */
.top-text .small-text{
  font-size:10px;
  margin-left: 1px;
  color:black;
  letter-spacing: 8px;
    line-height:2;           /* 行の高さをフォントサイズぴったりに */
}

/* 大きいテキスト */
.top-text .large-text{
  
  font-size:28px;
  font-weight:bold;
  color:black;
  letter-spacing: 2px;
    line-height: 1;           /* 行の高さをフォントサイズぴったりに */
}

/* まあまあ小さいテキスト */
.top-text .medium-text{
  font-size:13px;
  color:black;
    line-height:2.5;           /* 行の高さをフォントサイズぴったりに */
}





.work-title{
  border:1px solid black;           /* 枠線 */
  display:inline-block;             /* 文字サイズに合わせて枠 */
  padding:7px 10px;                /* 内側の余白 */
  font-family:"Nova Round", sans-serif; /* のばしたフォント */
  font-size:17px;                   /* 大きめサイズ */
  font-weight:bold;                  /* 太字 */
  text-align:center;                 /* 中央揃え */
  margin:0px 0;                     /* 上下余白 */
}

.work-item{
  border:1px solid black;       /* 枠線 */
  padding:  10px;                 /* 内側余白 */
  margin-bottom:10px;           /* 下のサブフレームとの間隔 */
  font-family:"M PLUS Rounded 1c", sans-serif;  
  font-size:16px;
  margin-top: 10px;
}

.work-item-title{
  display:inline-block;             /* 文字サイズにぴったり */
  padding:10px 15px !important;                 /* タイトル内の余白 */
  font-family:"M PLUS Rounded 1c", sans-serif;  font-size:10px;                   /* タイトル文字サイズ */
  font-weight:bold;
    font-size: 18px !important;
  margin-bottom:5px;               /* サブフレーム内容との間隔 */
}



/* 年タイトル */
.stage-year{
       font-family: "Noto Sans JP", sans-serif ;
  font-size:16px;
  font-weight:bold;
  margin-top:10px;
  margin-bottom:5px;
  letter-spacing: 1px;
}

/* 薄い線 */
.stage-divider{
  border:0;
  border-bottom:1px solid #ccc; /* 薄い線 */
  margin:5px 0;
}

/* 公演ブロック */
.stage-performance{
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-size:14px;
  margin-bottom:5px;
}

/* 公演タイトル */
.performance-title{
  margin-bottom:10px;
  font-size: 15px;
}

/* 公演詳細 */
.performance-detail{
  font-size:12px;
  margin-bottom:10px;
}

/* 役名 */
.performance-role{
  font-size:13px;
  margin-bottom:2px;
}



/* Movie専用 */
.movie-year{
  font-weight:bold;
  margin-top:10px;
  margin-bottom:5px;
  font-size:16px;
         font-family: "Noto Sans JP", sans-serif ;
         letter-spacing: 1px;
}

.movie-divider{
  border:0;
  border-bottom:1px solid #ccc;
  margin:5px 0;
}

.movie-performance{
  font-size:15px;
  margin-bottom:5px;
}

.movie-title{
  margin-bottom:10px;
}

.movie-director{
  font-size:12px;
  margin-bottom:10px;
}

.movie-award{
  font-size:12px;
  margin-bottom:2px;
}

/* Other専用 */
.other-year{
  font-weight:bold;
  margin-top:10px;
  margin-bottom:5px;
  font-size:16px;
           font-family: "Noto Sans JP", sans-serif ;
         letter-spacing: 1px;
}

.other-divider{
  border:0;
  border-bottom:1px solid #ccc;
  margin:5px 0;
}

.other-performance{
  font-size:12px;
  margin-bottom:5px;
}

.other-title{
    font-size: 15px;
  margin-bottom:10px;
}

.other-director,
.other-detail,
.other-broadcast,
.other-role{
  font-size:12px;
}

/* Staff フレーム */


.staff-year {
  font-weight:bold;
  margin-top:10px;
  margin-bottom:5px;
  font-size:16px;
           font-family: "Noto Sans JP", sans-serif ;
         letter-spacing: 1px;
}

.staff-divider {
  border:0;
  border-bottom:1px solid #ccc; /* 薄い線 */
  margin:5px 0;
}

.staff-performance {
  padding:10px 10px;  /* 内側余白 */
  margin-bottom:10px;  /* 下の区切りとの余白 */
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-size:14px;
}

.staff-title {
  font-size:15px;
  margin-bottom:10px;
}

.staff-detail {
  font-size:12px;
  margin-bottom:10px;
  line-height:1.3;
}

.staff-role {
  font-size:12px;
  font-weight:normal;
  color:#000;

}

.work-item{
  width: 95%;      /* 好きな幅に調整 */
  margin: 10px auto;  /* 中央寄せ */
  border: 1px solid black; /* 枠線、モバイルだけ表示 */
  padding: 0px;   /* 内側余白 */
}

.stage-performance,
.movie-performance,
.other-performance,
.staff-performance,
.stage-year,
.movie-year,
.other-year,
.staff-year,
 .work-item-title
 {
  padding: 20px;   /* 内側余白 */
}

/* PC用 */
@media screen and (min-width: 768px) {
  .hamburger {
  display: none;
}


  .top-image,
  .top-dots,
  .swipe-hint{
    display:none;
  }

  .mobile-frames,.mobile-buttons{
    display: none;
  }
  .top-frame{
    width:900px;
    min-height:600px;
    padding:0;
        margin-top:10px; /* ← 上の余白を50pxに設定 */
  }

  .top-image-pc{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

  .top-image-pc img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index: 0;
  }

   .sns{
z-index: 100;
gap: 5px;
top: 1rem;
left: 1rem;
  }

  .contact-button{
    z-index: 1000;
    top: 1rem;
    right: 1rem;
  }

.top-buttons{
  z-index:100;

  transform: rotate(0deg);

  flex-direction:column; /* ←縦並び */

  top:auto;
  left:auto;
   gap: 5px;
  bottom:1rem;
  right:1rem;
}

.top-btn{
  font-size:16px;   /* 好きなサイズ */
  padding:8px 20px;
}


  .work-frame{
    width:900px;
  }

    .work-item{
    width:90%;
    margin-left:auto;
    margin-right:auto;
        border:none;
  }


  .work-item-title{
    border:none;
}


  .work-title{
    margin:20px;
  }
  .stage-year,
  .movie-year,
  .other-year,
  .staff-year{
    margin-top:40px;
  }


  .stage-divider:has(+ .stage-year),
  .movie-divider:has(+ .movie-year),
  .other-divider:has(+ .other-year),
  .staff-divider:has(+ .staff-year){
    display:none;
  }

    .stage-performance,
  .movie-performance,
  .other-performance,
  .staff-performance{
    margin-top:40px;
    margin-bottom: 40px;
  }

  .work-item-title{
    font-size:20px !important;          /* タイトル大きく */
    border:none;             /* 今の枠を消す */
    padding:0;
    margin-top:40px;         /* 上余白 */
    margin-bottom:10px;      /* 下余白 */
    display:block;
       font-family: "Noto Sans JP", sans-serif !important;
         letter-spacing: 1px;
         font-weight: bold;
}
  

  .work-item-title::after{
    content:"";
    display:block;
    width:100%;              /* work-frameいっぱい */
    height:1px;
    background:black;
    margin-top:8px;          /* タイトルとの距離 */
       font-family: "Noto Sans JP", sans-serif ;
}

  .performance-title,
  .movie-title,
  .other-title,
  .staff-title{
    margin-bottom:20px;
  }

  .performance-detail,
  .movie-director,
  .other-detail,
  .staff-detail{
    margin-bottom:16px;
  }

  .performance-role,
  .other-role,
  .staff-role{
    margin-bottom:6px;
  }


    .name-pc{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
    font-family:"M PLUS Rounded 1c", sans-serif;
    font-size:50px;

  }

  .name-pc span{
    position:absolute;
    text-shadow:8px 4px 4px rgba(0, 0, 0, 0.258);
  transition: transform 1.2s ease;
  }

  .top-text{
    display: none;
  }
  .ji1{
    top:21%;
    left:58%;
  }

  .ji2{
    top:30%;
    left:61%;
  }

  .ji3{
    top:36%;
    left:67%;
  }

  .ji4{
    top:45%;
    left:71%;
  }

}





/* ===== WEBページ 3列固定 ===== */
/* ===== WEBページ 3列 ===== */
/* ポートフォリオ セクション見出し */

/* ----------------------------
   フッター
----------------------------- */
.site-footer {
  background-color: #00000047;     /* 黒背景 */
  color: #fff;                     /* 白文字 */
  text-align: center;              /* 中央寄せ */
  padding: 0px 0;                  /* 上下の余白 */
  font-family: 'Noto Sans JP', sans-serif;
  width: 100% !important;
  height: 50px;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 高さはフッターの高さ */
  background-color: #ccc; /* 背景色など適宜 */
  display: flex;
  align-items: center;
  justify-content: center;
}

 ----------------------------
   ビジュアル・フレーム
----------------------------- */
.visual {
  position: relative;
  width: 15%;
  max-width: 600px;
  margin: 50px auto; /* 中央寄せ */
}

.photo {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  transition: filter 0.3s ease; /* アニメーション */
  filter: drop-shadow(0 0 4px #003366); /* ←デフォルトの発光（弱め） */
}

.photo:hover {
  filter: drop-shadow(0 0 20px #025fbd); /* ←ホバー時に強く発光 */
}

.frame {
  position: absolute;
  top: 17%;
  left: 10%;
  width: 80%;
  pointer-events: none; /* フレームがマウスを通す */
  z-index: 2;
}

.name {
  position: absolute;
  top: 40%;
  left: 5%;
  writing-mode: vertical-rl;  /* 縦書き */
  text-orientation: upright;  /* 文字を正立に保つ */
  font-size: 11px;
  font-family: 'Noto Serif JP', serif;
  color: #003366;
  line-height: 1.6;
  letter-spacing: 0.15em;
}

.name:hover {
  filter:
    drop-shadow(0 0 5px #00f2ff)
    drop-shadow(0 0 10px #00f2ff)
    drop-shadow(0 0 20px #00f2ff)
    drop-shadow(0 0 40px #00f2ff); /* ←最強 */
}

.actor-header-line {
  border: none;
  border-top: 1px solid #333;
  width: 95%;
  margin: 3px auto; /* 元は40pxを小さく調整 */
}

.menu {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.menu a {
  color: #333;
  text-decoration: none;
  transition: 0.2s ease;
}

.menu a:hover {
  text-decoration: underline;
}

.big-name {
  text-align: center;
  font-family: 'Poller One', sans-serif;
  font-size: 10.05rem;
  color: #222;
  margin-bottom: 60px;
}



.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
}

/* ----------------------------
   ハンバーガーメニューOFF時（PCなど）
----------------------------- */
/* 左側：名前を左揃え */

/* ヘッダー全体 */
.actor-header {
  display: flex;
  justify-content: space-between; /* 左右端に配置 */
  align-items: center;            /* 高さを中央に揃える */
  padding: 0 40px;
  height: 80px;                   /* 必要に応じて固定高さ */
  margin-top: 0px;
  background-color: #fff;
  
}

/* 左：名前 */
.actor-header-left {
  display: flex;
  flex-direction: row;            /* ← 横並びに戻す */
  align-items: center;            /* 高さ中央揃え */
  justify-content: flex-start;    /* 左寄せ */
    flex: 1; /* 左側はできるだけ伸びる */
}

/* 名前 */
.actor-name-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;                 /* 高さをぴったり */
  letter-spacing: 3px;
  font-family:"M PLUS Rounded 1c", sans-serif; 
  white-space: nowrap; /* 改行させない */
}

/* 右：ナビ */
.actor-header-right {
  display: flex;
  align-items: center;            /* 高さ中央揃え */
  justify-content: flex-end;      /* 右寄せ */
  gap: 30px;
  
}

/* ナビリスト */
.actor-nav {
  display: flex;
  gap: 30px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.actor-nav li a {
  text-decoration: none;
  color: #000;
  font-family: 'Nova Round', sans-serif;
  font-weight: 400;
  font-size: 16px !important;
font-family:"Nova Round", sans-serif;
}






.actor-header-left p {
  margin: 0;                      /* デフォルトマージンをリセット */
  line-height: 1;                  /* 行間をぴったりに */
  font-size: 24px;                 /* 必要に応じて調整 */
    font-family:"M PLUS Rounded 1c", sans-serif; 
}



.actor-header-right ul {
  display: flex;
  gap: 20px;                       /* メニューの間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.actor-header-right li a {
  text-decoration: none;
  color: #000;                     /* メニュー文字色 */
}

/* 波線画像 */
.wave-line-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;   /* 中央寄せ */
  position: relative;
  top: -10px;           /* ヘッダー下に自然に配置 */
}




.actor-nav li a:hover {
  opacity: 0.6;
}


/* ----------------------------
   ポートフォリオ・WEBページ
----------------------------- */

.section-heading {
  display: block;
  width: 100%;
  text-align: center ;
font-size: clamp(1.2rem, 1.8vw, 5rem);
  margin: 30px auto;
    font-family:"M PLUS Rounded 1c", sans-serif; 
}

.portfolio-row {
  display: flex;
  padding: 10px;
  gap: 10px;           /* カード間の間隔 */
  overflow-x: none;    /* 横スクロール */
    flex-wrap: nowraps;     /* 画面幅が狭くなったら折り返す */
  -webkit-overflow-scrolling: touch; /* モバイルでスムーズスクロール */
}

.portfolio-card {
  flex: 0 0 33.333%;        /* 幅を3分割に固定 */
  padding: 15px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;

}
.portfolio-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 4px;
}



.portfolio-card p {
  font-size: 0.6rem;
  line-height: 1.4;
  margin: 4px 0;
}

.portfolio-card a {
  color: #2f5e9c;
  text-decoration: none;
}

.portfolio-card a:hover {
  text-decoration: underline;
}


.portfolio-detail p{
  font-size: clamp(10px, 1.4vw, 14px);
  line-height: 1.8;
      font-family:"M PLUS Rounded 1c", sans-serif; 
}

.portfolio-title{
  font-size: clamp(12px, 2vw, 20px);
  font-weight: bold;
  margin: 10px 0 12px;
      font-family:"M PLUS Rounded 1c", sans-serif; 
}





/* ----------------------------
   レスポンシブ（スマホ）
----------------------------- */
@media screen and (max-width: 768px) {


  .wave-line-img,
  .site-footer {
    display: none;
  }

 

  .photo {
    width: 100%;
    height: auto;
  }

  .section-heading {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 40px auto 30px auto !important;
  }

  .portfolio-row {
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .portfolio-card {
    width: 90%;
  }
}



.name:hover {
  filter:
    drop-shadow(0 0 5px #00f2ff)
    drop-shadow(0 0 10px #00f2ff)
    drop-shadow(0 0 20px #00f2ff)
    drop-shadow(0 0 40px #00f2ff); /* ←最強 */
}



.actor-header-line {
  border: none;
  border-top: 1px solid #333;
  width: 95%;
  margin: 3px auto; /* ← ここを小さくする（元は40px） */
}


.menu {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.2rem;
  margin-bottom: 20px;
}


.menu a {
  color: #333;
  text-decoration: none;
  transition: 0.2s ease;
}

.menu a:hover {
  text-decoration: underline;
}






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



  .photo {
    width: 100%;
    height: auto;
  }
}



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


  .actor-header-right {
    display: none; /* PC用ナビ非表示 */
  }
  .actor-header {
  position: relative; /* 親を基準に配置 */
}


}

.actor-header {
  width: 100%;         /* 画面幅に合わせる */
  position: relative;  /* 絶対配置の基準 */

}
.hamburger {
  position: absolute;
  top: 20px;
  right: 30px; /* 右上からの距離 */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #000;
  cursor: pointer;
  z-index: 100;
}

/* モバイルメニュー初期状態は非表示 */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%; /* 画面外に隠す */
  width: 70%;
  max-width: 300px;
  height: 100%;
  background-color: #ffffff52;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 20px;
}

/* モバイルメニュー */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -250px; /* 最初は右に隠す */
  width: 200px;  /* 幅は控えめ */
  height: 100%;
  background: rgba(255, 255, 255, 0.347); /* ほんのり透明感で上品に */
  backdrop-filter: blur(8px); /* 背景ぼかしで高級感 */
  box-shadow: -4px 0 15px rgba(0,0,0,0.2); /* スッキリした影 */
  transition: right 0.4s ease; /* スライドアニメーション */
  z-index: 1000;
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
   font-family:"Nova Round", sans-serif;
}

/* 開いた状態 */
.mobile-menu.open {
  right: 0;
}


.menu-close:hover {
  color: #000;
}

/* リスト */
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin-bottom: 20px;
}

.mobile-menu a {
  text-decoration: none;
  font-size: 1.1rem;
  color: #222;
  font-weight: 500;
  transition: color 0.3s ease;
}
.mobile-menu a:hover {
  color: #000; /* ホバーで少し濃くして高級感 */
}

/* ハンバーガーアイコン */
.hamburger {
  font-size: 1.5rem;
  cursor: pointer;
  color: #222;
  z-index: 1100;
  transition: color 0.3s ease;
}
.hamburger:hover {
  color: #000;
}

.site-footer {
  position: fixed;     /* 画面下に固定 */
  bottom: 0;           /* 下にピッタリ */
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #555;
  border-top: 1px solid #ddd;
  z-index: 1000;       /* 他の要素より上に出す */
}