@media (max-width: 768px) {
/* ハンバーガーメニュー */
#hamburger {
  position: fixed;
  top: 15px;
  right: 18px;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 101;
}
#hamburger span {
  background: #434343;
  width: 30px;
  height: 3px;
  display: block;
  transition: 0.5s;
}

/* gnav初期非表示 */
.gnav {
  position: fixed;
  top: -100%;
  right: 0;
  left: 0;
  width: auto;
  height: 100%;
  background: #c4ca58; 
  z-index: 100;
  background: 
    linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),
    url("../topimages/main12.jpg");
  background-size: 100% 650px;
  transition: 1.5s ease;
  background-repeat: no-repeat;
}
.gnav ul{
  margin-top: 40%;
}
.gnav li{
  background-color: #c4ca589c;
  width: 50%;
  font-size: 20px;
  letter-spacing: 0.1em;
  margin-top: 20px;
  margin-left: 55px;
  border-radius: 3px;
  height: 25px;
  padding-left: 20px;
}
.gnav li a:hover{
color:#00bfcd;
}



/* 開いたとき */
body.active .gnav {
  top: 0;
}

#hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#hamburger.active span:nth-child(2) {
  opacity: 0;
}
#hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

body.active {
  overflow: hidden;
  height: 100vh;
}

body{
  height: auto;
}


/* Leo NAIL */
h1 {
  position: absolute;
  top: 150px;
  left: 15px;
  font-size: 35px;
}
#pc-top{
  display: none;
}

/* カラム */
.two-column{
  flex-direction: column;
}

/* gallery */
  /* まずPC用デザインを無効化する */
  .nail-list,
  .salon-list {
    display: contents;       /* ulを無視して中身だけ配置に参加させる */
    position: static;        /* absolute解除 */
    margin: 0;
    padding: 0;
    gap: 0;
  }

  /* ギャラリー全体を2列にする */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 20px; /* 左右に少し余白 */
  }

  /* h2は1行目に横いっぱいに表示 */
  .gallery h2 {
    grid-column: 1 / -1;
    margin: 20px 0;
    text-align: left;
    font-size: 22px;
  }

  /* 画像をスマホ向けに調整 */
  .gallery img {
    width: 100%;
    height: auto; /* 固定値より自動の方が崩れない */
    display: block;
    border-radius: 3px;
  }
.go {
  grid-column: 1 / -1; /* ギャラリーの2列分をぶち抜いて横幅いっぱいに使う */
  width: 100%;
}

.go p {
  display: block !important;
  width: 100% !important;     /* 画面の端から端まで広げる */
  margin: 20px 0 !important;   /* PC版の margin-left: 1000px を完全にリセット */
  text-align: right !important; /* 文字を右側に寄せる */
  padding-right: 20px;         /* 画面の右端に少し余白を作る */
  position: static !important;  /* PC版の absolute を解除 */
}


/* menu&price */
h2 {
    grid-column: 1 / -1;
    margin: 30px 0;
    text-align: left;
    font-size: 22px;
    margin-left: 20px;
  }
.left-colnmn img{
  width: 80%;
  height: auto;
  margin-left: 40px;
}
.menu-img{
  position: static;
  width: 100%;
  animation: slideFromLeft 5s ease-out forwards;
}

/* SNS */
.sns{
  display: flex;
  justify-content: center;
  gap: 45px;
}
.sns-icons {
  display: flex;
  justify-content: center; /* 中央に寄せる */
  gap: 60px;              /* アイコン同士の隙間 */
  margin: 90px auto 20px -25px !important;
  transform: none !important; /* PC版の translateX(-28px) をリセット */
  padding: 0;
}
.sns-icons li img {
  width: 80px; /* アイコンの大きさを調整 */
  height: auto;
}

/* reservation */
.reservation p{
  width: 80%;
  margin-left: 40px;
  font-size: 14px;
}

/* news */
/* newsセクション全体の余白をリセット */
.news {
  width: 100% !important;
  margin-left: 0 !important;
  padding: 0 !important;
  text-align: center; /* 中身のインライン要素を中央へ */
}

/* リンクを包んでいるpタグの設定 */
.news p {
  width: 100% !important;
  margin: 0 auto 15px !important; /* 左右marginをautoにして中央化、PC版の100pxを強制解除 */
  padding: 0 !important;
  text-align: center !important; /* 文字を中央寄せ */
  font-size: 17px;
}

/* リンク自体の設定 */
.news p a {
  display: inline-block; /* 幅を持てるようにして中央に配置 */
  text-align: center;
}

/* store */
.store-list{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.store-list img{
  width: 100px;
  border-radius: 3px;
}
.store-list h3{
  font-size: 12px;
  margin-left: 20px;
}
.comment p{
  width: 95%;
  margin-top: 10px;
  text-align: end;
  font-size: 8px;
  color: #003859;
}

/* access */
.map{
  display: flex;
  justify-content: center;
  gap: 20px
}
iframe{
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.time{
  font-size: 15px;
  margin-top: 17px;
}
.address p{
  width: 100%;
  font-size: 12px;
}

/* フッター */
footer{
  background-color: #6aa6a3;
  height: 40px;
  position: relative;
  margin-top: 20px;
}
#copy{
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.scroll_down{
  display: none;
}


  /* 1. 横スクロールを強制的に止める魔法のセット */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* 2. アニメーションによるはみ出しを防止 */
  .wrap {
    overflow: hidden; /* これで左から出てくる画像のはみ出しをカット */
  }

  /* 3. PC版の absolute 配置と margin を一括リセット */
  .nail-list, 
  .salon-list, 
  .go p, 
  /* h1,  */
  /* .menu-img, */
  .access,
  .left-colnmn {
    position: static !important; /* 浮いている要素を地面に着地させる */
    margin-left: 0 !important;   /* PC版の大きな余白を消す */
    margin-right: 0 !important;
    width: 100% !important;
    transform: none !important;  /* PC版のズレをリセット */
  }

  /* 4. 並び崩れの修正（Accessセクション） */
  .map {
    display: flex;
    flex-direction: column; /* 横並びを縦並びに変更 */
    align-items: center;
    gap: 20px;
  }
  
  .address {
    margin-right: 0 !important; /* PC版の margin-right: 300px をリセット */
    text-align: center;
  }

  iframe {
    width: 90% !important; /* 画面幅に合わせる */
    height: auto;
  }

  /* 5. 画像が画面を突き抜けないようにする（共有設定の補強） */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 6. 余白の微調整（文字が詰まりすぎないように） */
  .reservation p, .news p {
    width: 90% !important;
    margin: 0 auto 3px !important; /* 100pxなどの大きな余白を適正化 */
    text-align: left;
  }
  
  h2{
    margin-left: 20px !important; /* 見出しの左余白をスマホサイズに */
    font-size: 24px !important;
  }



}