* {
font-family: 'Noto Sans JP', sans-serif;
}



body{
background-color: #000000;
}

img {
  display: block;
  width: 100%;
  height: auto;
}


.sliderimg {
  width: 100%;       /* コンテナの幅に合わせて拡大 */
  height: 100%;      /* コンテナの高さに合わせて拡大 */
  object-fit: contain; /* アスペクト比を保持しながら全体を表示 */
}


.fade-in {
    opacity: 0;
    transform: translatey(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.fade-in.show {
    opacity: 1;
    transform: translatey(0px);
}



.h2{
    color: #fff;
}



h3 {
    padding: 0.5rem 0rem;
    margin-bottom: 0.2rem;
    border-bottom: 2px solid #e5007f;
    font-weight: bold;
    font-size: 20px;
    color: #e5007f;
}





p {
    color: white;
}


.box{
    width: 95%; /* 横幅90% */
    padding: 5px; /* 内側の余白 */
    margin: 10px auto; /* 外側の余白と中央揃え */
    color: white; /* テキスト色を白に */
    background-color: transparent; /* 背景色を透明に（必要に応じて） */
  }



.magenta-textbox {
    width: 95%; /* 横幅90% */
    border: 3px solid #e5007f; /* マゼンタ色のフチ */
    box-shadow: 0px 0px 12px #e5007f; /* マゼンタ色の影 */
    padding: 5px; /* 内側の余白 */
    margin: 10px auto; /* 外側の余白と中央揃え */
    text-align: center; /* テキストを中央揃え */
    color: white; /* テキスト色を白に */
    background-color: transparent; /* 背景色を透明に（必要に応じて） */
  }



.magenta-textbox2 p {
    line-height: 0; /* 行の高さを調整 */
    /* 他のスタイル設定（必要に応じて） */
}


.magenta-textbox2 {
    width: 95%;
    border: 2px solid #e5007f;
    box-shadow: 0px 0px 10px #e5007f;
    padding: 5px; /* 内側の余白を適切な正の値に変更 */
    margin: 0px auto;
    text-align: center;
    color: white;
    background-color: transparent;
}







news-item{
  padding:1px;
}


.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
}



.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
}

.news-list .item:first-child a{
}

.news-list .item .date{
  margin: 0;
  min-width: 150px;
  font-size: 16px;
  padding: 0 20px 0 0;
  margin-left: 10px;
}

.news-list .item .category{
  margin: 0;
  min-width: 100px;
  padding: 0 15px 0 0;
}


.title{
  margin-left: 10px;
}


.news-list .item .category span{
  background: #e5007f;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1.5;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
  text-align: left;
}


@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}



.news-list2{
  list-style: none outside;
  margin: 0;
  padding: 0;
}


.news-list2 .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #fff;
  padding: 20px 20px;
}

.news-list2 .item:first-child a{

}


.news-list2 .item .date{
  margin: 0;
  min-width: 150px;
  font-size: 16px;
  padding: 0 20px 0 0;
}


.news-list2 .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0 20px 0 0;
}


.news-list2 .item .category span{
  background: #e5007f;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1;
}


.news-list2 .item .title{
  margin: 0;
  width: 100%;
}


@media screen and (max-width: 767px){
.news-list2 .item a{
  flex-wrap: wrap;
}


.news-list2 .item .date{
  min-width: 100px;
}


.news-list2 .item .title{
  margin-top: 10px;
}
}




a {
    text-decoration: none; /* 下線を消去 */
    color: ffffff; /* リンクの色 */
    position: relative; /* 相対位置指定 */
    transition: color 0.3s; /* 色の変化にトランジションを適用 */
  }

  a:hover {
    color: #e5007f; /* ホバー時のテキスト色 */
  }


a:visited {
    color: ffffff; /* 訪問済みでも色を維持 */
    text-decoration: none; /* 下線を消す */
}

  a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #e5007f; /* 下線の色 */
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

  a:hover::after {
    visibility: visible;
    color: ffffff; /* 訪問済みでも色を維持 */
    transform: scaleX(1);
  }



.shopname, .shopitem {
  display: inline-block; /* インラインブロック要素として表示 */
  margin-right: 20px; /* 右側にマージンを設定 */
}



@media screen and (min-width: 1024px) {
  .shopname {
    align-items: flex-end; /* テキストとボタンを下揃えに */
  }

  .shopname .right-content {
    margin-top: 35px; /* ← 1行分下げる（値を8〜15pxで微調整OK） */
  }
}



/* リンクのスタイル設定 */
.shop a:link, .shop a:visited {
  color: white; /* 通常時と訪問済みの色を白に設定 */
  text-decoration: none; /* 下線を消す */
}



.shopname {
    display: flex;
    align-items: center;
    justify-content: space-between;
}






.Feenote ul, .Feenote ol {
  padding: 0.5em 0.5em 0.5em 2em;
  border: solid 3px #fff;

}

.Feenote ul li, .Feenote ol li {
color: #fff;
  line-height: 1.5;
  padding: 0.5em 0;
  text-align: left; /* 左揃えにする */
}





.footer01 {
 color: #000000;
 background-color: #000000;
 padding: 10px;

}

.footer01 a {
 color: #000000;
 text-decoration: none;

}

.footer01 a:hover {
 text-decoration: underline;

}

.footer01 .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;

}

.footer01 .menu li {
 margin: 0;
 padding: 0 10px 0 0;

}

.footer01 .copyright {
 margin: 0;
 padding: 10px 0 0 0;

}

.sns {
    display: inline-block;
    margin-left: 10px; /* これは右側に10pxのスペースを提供します */
}

/* 最後の.sns要素のmargin-rightを0に設定する */
.sns:last-child {
    margin-right: 0;
}



/* 店舗ページスライダーとMAPのスタイル */
@media(min-width: 1024px) {
    .top-sl_map {
        display: flex;
        justify-content: space-between;

    }

    .slider-container {
        width: calc(35% - 20px); /* 画像の幅を30%に設定 */
        margin-left: 10px;
        margin-right: 10px;
    }

    .map-container {
        width: calc(65% - 20px); /* MAPの幅を70%に設定 */
        margin-left: 10px;
        margin-right: 10px;
    }

    .slider-container .slider, .map-container iframe {
        height: 100%; /* コンテナの高さに合わせる */
        width: 100%; /* 幅をコンテナに合わせる */
    }

    .slider-container .sliderimg img {
        width: 100%; /* 画像の幅をコンテナに合わせる */
        height: 100%; /* 画像の高さをコンテナに合わせる */
        object-fit: cover; /* 画像をトリミングしてコンテナに合わせる */
    }
}

@media(max-width: 767px) {
    .map-container iframe {
        height: 300px; /* スマートフォン用の高さを設定 */
    }
}


/* 767pxから1024pxの間の画面幅でのスタイル */
@media(min-width: 768px) and (max-width: 1023px) {
     .map-container iframe {
        height: 350px; /* スマートフォン用の高さを設定 */
    }
}

/* 767px以下の画面幅でのスタイル */
@media(max-width: 767px) {
    .map-container iframe {
        height: 300px; /* スマートフォン用の高さを設定 */
    }
}




.button-containerCP {
  text-align: center;
  margin-bottom: 20px;
}

#showTableButtonCP {
  background-color: #ccac00; /* 背景色を黄色に設定 */
  width: 85%; /* 幅をtable-containerと同じに設定 */
  padding: 8px;
  text-align: center;
  font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #362721; /* 文字色を茶色に設定 */
  border: none;
  cursor: pointer;
  height: 3em; /* 高さを2行分に設定 */
}


.table-containerCP {
  width: 85%; /* テーブルの幅を80％に設定 */
  margin: 0 auto; /* テーブルを中央に揃える */
  display: none; /* 最初は非表示にする */
  overflow: hidden; /* アニメーション用にオーバーフローを隠す */
max-height: 0; /* 最初は高さを0に設定 */
  transition: max-height 0.5s; /* アニメーション時間を設定 */
}




#showTableButtonCP:hover {
  background-color: #ffdf7a; /* マウスオーバー時の背景色 */
}



/* ★ レスポンシブ対応（スマホ用）★ */
@media screen and (max-width: 768px) {
  #showTableButtonCP {
    width: 100%;
    font-size: 15px;
    height: auto; /* 高さを自動調整（2行になる場合も対応） */
    padding: 12px;
  }

  .table-containerCP {
    width: 95%;
  }

  .button-containerCP {
    margin-bottom: 15px;
  }
}



.CP_image-container {
  max-width: 100%;
  overflow: hidden;
  text-align: center; /* 中央寄せ */
}

.CP_image-container img.ryoukin_CP {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

#area-2 {
  margin-top: 40px;
}

/*====================================================================
レスポンシブル
====================================================================*/

@media(max-width:1023px) {
  .Feenote ul, .Feenote ol {
    padding: 0.5em 1em 0.5em 4em;
  }
}