/* PC・タブレット共通 */
.top-image {
  margin-top: 20px; /* ヘッダーの高さに合わせて調整 */
  text-align: center; /* 画像を中央寄せに */
}

/* 画像を幅いっぱいに */
.top-image img {
  width: 100%;
  height: auto;
  display: block;
}



.round-icon {
    width: 400px;
    height: 400px;

    background-image: url('top_back.png');
    background-size: cover;
    background-position: center;
    background-color: #D70413;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* スマホ画面用のスタイル */
@media (max-width: 768px) {
    .round-icon {
        width: 130px; /* スマホでは幅を130pxに */
        height: 130px; /* 高さも130pxに */
        top: 13%; /* スマホ表示ではもっと上に */
        /* 必要に応じてここでtransformプロパティも調整する */
        transform: translate(-50%, -20%); /* 中央上部により寄せる調整 */
    }
}



#slideshow {
  overflow: hidden;
  max-width: 100%;
  position: relative;
}

.slide-wrapper {
  display: flex;
  width: calc(100% * 2); /* 2枚の画像の幅 */
}

#slideshow img {
  width: calc(100% / 2); /* 各画像の幅を画面の50%に設定 */
  height: auto;
  display: block;
}





.midasi {
    color: #D70413;/* テキストの色を赤に設定 */
    font-size: 32px; /* PC用の基本フォントサイズ */
    font-weight: bold; /* フォントを太字に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    margin-top: 20px; /* 上のマージンを設定（必要に応じて調整） */
}

/* スマホ画面用のスタイル調整 */
@media (max-width: 768px) {
    .midasi {
        font-size: 20px; /* スマホではフォントサイズを20pxに設定 */
    }
}

.midasi2 {
    font-size: 24px; /* 基本のフォントサイズ設定 */
    font-weight: bold; /* フォントを太字に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    /* スタイル設定が他に必要な場合はこちらに追加 */
}

/* もし.midasi2もレスポンシブにしたい場合は、同様にメディアクエリを追加 */
@media (max-width: 768px) {
    .midasi2 {
        font-size: 20px; /* スマホではフォントサイズを10pxに小さく設定 */
    }
}



.introduction-title {
    text-align: center; /* テキストを中央揃えに設定 */
    font-size: 36px; /* フォントサイズを大きく設定 */
    font-weight: bold; /* フォントを太字に設定 */
    margin: 20px 0; /* 上下にマージンを設定して、周囲の要素とのスペースを作る */
    color: #000; /* 文字色を設定 */
}


/* スマートフォン向けのスタイル */
@media screen and (max-width: 500px) {
    .introduction-title {
        font-size: 24px; /* スマホでのフォントサイズを小さく調整 */
        margin: 10px 0; /* スマホでのマージンを調整 */
    }
}



.logo-container {
  text-align: left; /* ロゴとテキストを左揃えにする */
}

.logo-container img {
  
 
float: left; /* 画像を左寄せにする */
  width: 30%; /* 画像のサイズを30%に設定 */
  margin-right: 20px; /* 画像とテキストの間に余白を設ける */
}

.store-name {
  color: #D70413; /* テキストの色を赤に設定 */
  font-size: 40px; /* フォントサイズを指定 */
  line-height: 1.5; /* 行間を調整 */
  display: inline-block; /* テキストをインラインブロック要素として扱う */
  width: 100%; /* 親要素と同じ幅に設定 */
}

@media (max-width: 768px) {
    .store-name  {
        font-size: 30px; /* スマホではフォントサイズを10pxに小さく設定 */
    }
.logo-container img {
  width: 50%; 
}
}






/* トップ画像下の余白を消す */
.c_photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;       /* ←ここで余白ゼロ */
  padding: 0;
  border: none;
}

/* リニューアルポイントセクション上の余白を消す */
.renewal-points.normal-box6 {
  margin-top: 0 !important;  /* ←上の余白を強制的にゼロ */
  padding-top: 0;            /* ←必要なら内側の余白も消す */

}

/* リニューアルセクション全体 */
.renewal-section {
  padding: 40px 20px;
  background: #fff;
}

.renewal-section__title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #D70413;
  margin: 0px 0 40px 0; /* 上に20pxだけ余白 */
}

/* 見出し帯 */
.renewal-heading {
  width: 100%;
  background-color: #f5a9c5;   /* 薄ピンク */
  border-left: 12px solid #800080; /* 紫ライン */
  padding: 12px 20px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 15px 0; /* 上の余白ゼロ、下だけ15px */
  text-align: left;
}

/* 枠付きブロック */
.renewal-block {
  background: #fff;
  border: 1px solid #000;   /* 黒枠（細め） */
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 40px auto; /* 上余白ゼロ、下に40px */
  max-width: 1000px;        /* PC時の最大幅 */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* コンテンツ部分 */
.renewal-content {
  text-align: center;
}

.renewal-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0; /* 下余白はキャプションに任せる */
}

/* キャプション */
.renewal-caption {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-top: 12px;
  font-weight: 500;
  text-align: center;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .renewal-section__title {
    font-size: 24px;
    margin: 10px 0 20px 0;
  }
  .renewal-heading {
    font-size: 18px;
    padding: 10px 15px;
    border-left-width: 8px;

  }
  .renewal-block {
    border-width: 1px;
    padding: 6px;
    margin-bottom: 20px;
  }
  .renewal-caption {
    font-size: 14px;
  }
}



/* キャッチコピー（白背景に赤文字強調） */
.catchcopy {
  text-align: center;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; 
  font-size: 28px;
  font-weight: 800;        /* より太く強調 */
  line-height: 1.6;
  color: #D70413;          /* カラオケマックの赤 */
  margin: 20px auto 30px;
  max-width: 1000px;       /* 横幅を広げすぎないように中央寄せ */
  letter-spacing: 1px;     /* 文字間隔を少し空けて読みやすく */
}

.catchcopy span {
  display: block;          /* 強制改行 */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .catchcopy {
    font-size: 20px;
    line-height: 1.5;
    margin: 15px auto 25px;
  }
}



/* ボタン全体の配置 */
.renewal-buttons {
  text-align: center;
  margin: 20px 0 40px;
}

/* 共通ボタンデザイン */
/* ボタン全体 */
.renewal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.3s ease;
}

/* ピンクボタン */
.renewal-btn.pink {
  background: #e6007e;
}

.renewal-btn.pink:hover {
  background: #c40067;
}

/* アイコン */
.btn-icon {
  width: 20px;
  height: 20px;
  stroke: #fff;       /* 白で表示（背景ピンクに映える） */
  fill: none;
  stroke-width: 2;
  margin-right: 8px;
}

/* スマホ用 */
@media (max-width: 768px) {
  .renewal-btn {
    display: block;
    margin: 10px auto;
    width: 80%;
    font-size: 14px;
    padding: 12px;
  }
}




/* ===== アクセス / マップ ===== */

/* セクション全体（上のセクションとの隙間を抑える） */
.map-section {
  padding-top: 0;
  margin-top: 0;
}

/* 帯（renewal-headingと同トーンで横幅いっぱい） */
.map-heading {
  width: 100%;
  background: #f5a9c5;          /* 薄ピンク */
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  padding: 12px 20px;
  border-left: 12px solid #800080; /* 紫アクセント */
  margin: 0 0 16px 0;
}

/* 枠ボックス（renewal-blockと同系） */
.map-embed {
  background: #fff;
  border: 2px solid #000;       /* 黒の細枠 */
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
  padding: 12px;
  margin: 0 auto 40px;
  max-width: 1000px;            /* PCは中央寄せ */
}

/* 16:9のレスポンシブ埋め込み */
.map-embed__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;          /* 16:9 */
  overflow: hidden;
  border-radius: 8px;
}

.map-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* アクセス文言を目立たせて中央配置 */
.map-caption {
  margin: 30px auto 40px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  color: #d70413;              /* 赤文字で強調 */
  background: #fff;
  padding: 20px 25px;
  border: 3px solid #d70413;   /* 太めの赤枠 */
  border-radius: 10px;
  max-width: 90%;            /* PC時は横幅制限して中央に */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* スマホ調整 */
@media (max-width: 768px) {
  .map-caption {
    font-size: 16px;
    padding: 15px;
    width: 100%;                 /* スマホは横幅いっぱい */
  }
}


/* スマホ調整 */
@media (max-width: 768px) {
  .map-heading { font-size: 18px; padding: 10px 15px; border-left-width: 8px; }
  .map-embed   { padding: 10px; border-width: 2px; }
  .map-caption { font-size: 14px; }
}