@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.wrapper{
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.midasi_1 {
  font-family: "American Typewriter",'Alfa Slab One', serif;
  font-size: 34px;
  text-align: center;
}




html {
  scroll-behavior: smooth; /* 全てのページ内リンクのスクロールを滑らかにする */
}



/* ----------▼▼▼ ページトップ-------------- ▼▼▼ */
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ページトップ（jQueryの基本形でデザイン変更）の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
  margin: 20px 30px ;
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {							/* スクロールボタンのスタイル設定 */
	display: block;
	width: 60px;
	height: 60px;
	padding-top: 20px;
	border-radius: 8px;
	background: #070707;				/* スクロールボタンの背景色 */
	opacity: 0.8;
	font-size: 2.2rem;
	line-height: 0.8rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a span {
	font-size: 0.6rem;
}
#page-top a:hover{
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */






/*-----------ヘッダー-----------------------*/
header {
    display: flex;
   justify-content: center; /* 中身を中央に寄せる */
    background-color: #fff; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影を追加 */
    max-width: 100%;
    padding: 10px 0;
}


header .container {
    display: flex; /* Flexboxを有効にして子要素を横並びに */
    justify-content: space-between; /* 子要素間のスペースを均等に分配 */
    align-items: center; /* 子要素を垂直方向の中央に揃える */
    margin: 0 auto; /* 中央揃え (任意) */
    padding: 0 20px; /* 左右の余白 (任意) */
}

.header_nav_ul {
    list-style-type: none; /* リストの黒丸を削除 */
    display: flex; /* リストアイテム (li) を横並びに */
    padding-left: 20px;
}

/* リストアイテムのスタイル */
.header_nav_ul li {
    margin-left: 20px; /* 各アイテムの左側に余白を追加 */
    font-family: American Typewriter;
    font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* リンクのスタイル */
.header_nav_ul li a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #707070; /* 文字色 */
    padding: 5px 10px;
    display: block;
}

/* ホバー時のエフェクト (任意) */
.header_nav_ul li a:hover {
    color: #000;
    text-decoration: underline;
}

.logo img {
  width: 100%;    /* 親要素の幅いっぱいに広げる */
  height: auto;   /* 縦横比を維持する */
  display: block; /* 下部の不要な隙間を消す */
}

}

/*ーーーコンセプトーーー*/

#concept h2 {
	margin-bottom:36px;
}

#concept p{
  font-family: 小塚ゴシック Pr6N;
  font-size: 16px;
  
}
.hero img{
    width: 100%;
    margin: auto;
    margin-bottom: 120px;
}


#concept, p{
    text-align: center;
    line-height: 2rem; /* フォントサイズの1.8倍の行高 */
}

.concept_logo_name img{
    max-width:200px;
    height:auto;
    margin-top:40px;
}


/*ーーーースタイルーーーーーーーー*/


#style h2 {
    margin: 120px 0 36px 0 ;

}

/* --- 1. 画像リスト全体のスタイル --- */
.style_img {
  display: flex;
  flex-wrap: wrap;       /* 入りきらない画像を次の行へ送る */
  justify-content: center; /* 中身を中央に寄せる */
  list-style: none;      /* リストの「・」を消す */
  padding: 0;
  margin: 0 auto;        /* 画面の真ん中に配置 */
  max-width: 790px;      /* 横幅の最大を790pxに制限 */
  gap: 10px;             /* 画像同士のすき間（上下左右10px） */
}

/* --- 2. リスト1項目（画像の枠）のスタイル --- */
.style_img li {
  /* calcを使って「3枚並んだ時にすき間(10px×2)を除いた幅」を計算 */
  width: calc((100% - 20px) / 3);
  
}


/* --- 3. 画像自体のスタイル --- */
.style_img li a img {
  width: 100%;           /* 枠の幅いっぱいに広げる */
  height: 370px;         /* 全ての画像の高さを揃える（お好みで調整） */
  object-fit: cover;     /* 画像を縦横に伸ばさず、綺麗に切り抜く */
       /* 画像の下にできる不要な隙間を消す */
}

/* --- 4. スマホ・タブレット用の設定（画面幅が600px以下の時） --- */
@media (max-width: 768px) {
  .style_img {
    padding: 0 10px;     /* スマホの端に少し余白を作る */
  }

  .style_img li {
    width: 100%;         /* 1列（横幅いっぱい）にする */
  }

  .style_img li a img {
    height: auto;        /* スマホでは高さ固定を解除して元の比率で見せる */
    aspect-ratio: 4 / 3; /* 高さを自動調整しつつバランスを保つ（任意） */
  }
}


/*スタッフーーーーーーーー*/


#staff h2{
    margin: 90px 0 36px 0;
}

.staff_img li {
    list-style: none;
    text-align: center;
     width: calc((100% - 20px) / 3);
}

.staff_img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 730px;
    gap: 10px;
    margin: 0 auto;

}

.staff_img li img {
    width: 100%;
    height: 280px;
     object-fit: cover;
     object-position: center; 
      display: block;
}

@media (max-width: 768px) {
  .staff_img {
    padding: 0 20px;       /* 画面端の余白 */
  }
  .staff_img li {
    width: 100%;           /* スマホでは1列 */
  }

   .style_img li a img {
    height: auto;        /* スマホでは高さ固定を解除して元の比率で見せる */
    aspect-ratio: 4 / 3; /* 高さを自動調整しつつバランスを保つ（任意） */
  }
}


/*---------ショッピング------------*/


.Shopping_color {
  background-color: #EAEAEA;
   width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  
}

#Shopping h2{
  margin: 120px 0 36px 0;
}

/* --- 全体のレイアウトコンテナ (.product-grid) --- */
.product-grid {
  max-width: 960px; /* wrapperと同じ幅に指定 */
  margin: 0 auto;   /* 中央寄せ */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 50px 0 50px 0;
}

/* --- 各商品カード (.product-card) のデザイン --- */
.product-card {
  flex: 1 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
  display: flex;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 15px;
  box-sizing: border-box;
}

/* --- 画像エリア (.img-container) と object-fit の適用 --- */
.img-container {
  width: 130px;
  height: 130px;
  margin-right: 15px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- テキストエリア (.product-info) のデザイン --- */
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ★更新された商品タイトルのスタイル（横幅いっぱい、灰色ラベル）★ */
.product-info a {
  display: block;            /* 親要素の横幅いっぱいまで広がる */
  background-color: #707070;    /* 背景色を灰色に変更 */
  color: #fff;               /* テキストの色を白に変更 */
  padding: 5px 0;            /* 上下に余白を追加 */
  text-align: center;        /* テキストを中央揃え */

  font-weight: bold;
  text-decoration: none;
  margin-bottom: 8px;
  font-size: 14px;
}

.product-info p {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #666;
}

.product-info .price {
  font-weight: bold;
  color: #e91e63;
  margin-top: auto;
  font-size: 14px;
}

/* --- スマートフォン対応（画面幅600px以下の場合） --- */
@media (max-width: 768px) {
  .product-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}


/*-------------メニュ----------*/


#Menu h2 {
  margin: 120px 0 36px 0;
}

table {
  width: 100%;/*これが%じゃないと幅合わせられないらしい*/
  margin: 0 auto;
  table-layout: fixed;/*幅を合わせる*/
  border-collapse: collapse; /*子要素のボーダー設定だけだと２重線になる*/
  
}

table tr {
  text-align: center;
  font-size: 12px;

}

th, td {
  border: 1px solid #707070;
  padding: 8px 20px 8px 20px;
}

@media (max-width: 600px) {
 th, td{
  font-size: 10px;
  padding: 5px;
 }
}


/*--------BLOG--------------------*/

#Blog h2{
	font-family: "American Typewriter",'Alfa Slab One', serif;
	font-size: 34px;
}

.Blog_all {
  background-color: #4D4D4D;
  margin-top: 120px;
}

#Blog {
  max-width: 960px;
  margin: 0 auto ;
  padding:40px 0 60px 0 ;
}

.midasi_2 {
  font-family: American Typewriter;
  font-size: 32px;
  color: #FFF;
}

.news-list {
  list-style: none;
  
}

.news-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;  
  padding: 29px 0 29px 0;
  border-bottom: 1px solid #707070;
  width: 70%;
  margin: 0 auto;
}

.news-date {
  padding-right: 50px;
  color: #FFF;
}

.news-title a{
   text-decoration: none; 
   color: #FFF;
}

.Blog-button {
  text-decoration: none; 
  color: #FFF;
}

/*-------Moreボタンデザイン--------*/

/* 矢印を囲む丸のデザイン */
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #FFF; /* 青色の円 */
  border-radius: 50%;         /* 正円にする */
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  /* --- 線の設定を追加 --- */
  border: 2px solid #707070; /* 太さ 種類 色（例：2pxの黒い実線） */
  transition: all 0.3s ease;
}

/* ::before を使って中の矢印「→」を作成 */
.arrow-circle::before {
  content: "\21DB";               /* 矢印記号を入れる */
  color: #707070;               /* 矢印の色 */
  font-size: 16px;            /* 矢印のサイズ */
  font-weight: bold;
  
}

/* リンク全体の装飾（お好みで） */
.link-button {
  text-decoration: none;
  color: #707070;
  font-weight: bold;
}

.Blog-button:hover .arrow-circle {
  background-color: #707070; /* ホバー時に色を濃くする */
}

.Blog-button:hover .arrow-circle::before {
  color: #ffffff;
}

/*-------MoreボタンデザインEND--------*/

@media (min-width: 768px) {
  .news-item {
    /* 2列表示にするための計算式: (全体幅 - 隙間) / 2 */
    flex: 1 1 calc(50% - 10px); 
  }
}

/* 1024px以上の画面幅（PCなど）に適用されるスタイル */
@media (min-width: 1024px) {
  .news-item {
     /* 3列表示にするための計算式 */
    flex: 1 1 calc(33.333% - 14px); 
  }
}




/*----------サロン---------------*/


#Salon h2{
	margin:120px 0 36px 0;
}

/* メインコンテナ: 画像と情報の左右レイアウトを定義 (PC表示用) */
.main-content {
    display: flex; /* 左右並び */
    justify-content: center;
    max-width: 1000px;
    margin: 40px auto; /* 上下左右中央寄せ */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 左側の画像エリア */
.image-area {
    flex: 1; /* 親要素の幅を均等に分ける */
    overflow: hidden; 
}

.image-area img {
    width: 100%; 
    height: 100%; /* 親要素 (image-area) の高さに合わせる */
    display: block;
    filter: brightness(0.9);
    object-fit: cover; /* アスペクト比を維持して画像を埋める */
}

/* 右側の情報エリア */
.info-area {
    flex: 1; /* 親要素の幅を均等に分ける (50:50) */
    padding: 40px;
    box-sizing: border-box; 
}

/* ロゴのスタイル */
.logo_img img {
    max-width: 100%; 
    margin-bottom: 30px; 
}

/* 情報リストコンテナ */
.info-list {
    padding-left: 0; 
}

/* 情報行 */
.ad {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px;
    
}

.info-label {
    font-weight: bold;
    /*---綺麗に並ばなかったのはwidthを設定していなかったから-----------------*/
    width:100px;
    color: #555;
    margin-right: 10px;
}

.Salon_p {
    text-align:	 left;
}

/* =================================================== */
/* レスポンシブ対応: 画面が狭くなったら縦積みに変更 (スマホ表示用) */
/* =================================================== */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* 縦並びに変更 */
        margin: 0; 
        align-items: center; /* 縦並びになった要素を中央に配置 */
    }

    .image-area, .info-area {
        width: 100%; /* 全幅表示 */
        flex: unset; /* flexの比率指定をリセット */
        min-width: unset; 
    }

    .info-area {
        padding: 30px 20px; 
        text-align: center; /* テキスト全体を中央揃えに */
    }
    
    .logo_img {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 30px;
    }

    .ad {
        flex-direction: column; /* ラベルと値を縦に並べる */
        align-items: center; /* 縦並びになった要素を中央揃えに */
        border-bottom: none; 
        margin-bottom: 20px;
        padding-bottom: 0;
    }

    .info-label {
        margin-bottom: 5px;
        margin-right: 0;
    }

    .Salon_p {
        text-align: center; /* 中央揃えに */
    }
}



/*-----------フッター--------------------*/

footer {
  background-color: #2F2F2F;
}
.footer_top_img {
  text-align: center;
}

.footer_logo img {
  max-width: 260px;
}

.fotter_reserve {
  padding: 22px 124px;
  background-color: #e91e63;
  display: inline-block;
}

.fotter_reserve a {
  text-decoration: none;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  font-family: American Typewriter;
}

.qr {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
  gap: 10px;
}

.qr img {
  max-width: 100px;
  padding-top: 10px;
}

.qr_font {
  font-family: 游ゴシック体;
  color: #FFF;
}

.QR_right {
  text-align: center;
}

.QR_left {
  text-align: center;
}

.qr_font {
  font-size: 16px;
  text-align: center;
}




@media (max-width: 768px) {
  .qr {
     flex-direction: column;
    align-items: center;
  }
}

/*------------ナビフッター-------------------*/

/* 全体のコンテナ */
.footer_content {
    background-color: #333333; /* 背景色 */
    color: #FFFFFF;
    text-align: center;
    padding: 80px 0 70px 0; /* 上部の余白を追加 */
    margin-top: 120px;
    /* width: 100%; height は自動調整 */
}

/* ロゴのスタイル */
.footer_logo img {
    margin-bottom: 16px; /* QRコードとの余白 */
    /* ロゴ画像のサイズに合わせて調整してください */
    width: 150px; 
    height: auto;
}

/* Reserveボタンのスタイル */
.footer_reserve {
    margin-bottom: 70px; /* QRコードとの余白 */
    
}

.reserve-button {
    display: inline-block;
    padding: 10px 60px;
    background-color: transparent; /* 背景透過 */
    border: 1px solid #FFFFFF; /* 白い枠線 */
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    /* margin-top: 70px; は .footer_content の padding-top に移動 */
}

/* QRコードセクションのスタイル */
.qr_container {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 50px; /* QRコード間の余白 */
    margin-bottom: 70px; /* ナビゲーションとの余白 */
}

.qr_item {
    text-align: center;
}

.qr_font {
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 10px; /* 画像との余白 */
}

.qr_item img {
    width: 100px; /* QRコードのサイズに合わせて調整 */
    height: auto;
}

/* ナビゲーションメニューのスタイル */
.footer_nav ul {
    display: flex;
    justify-content: center; /* 中央揃え */
    padding: 28px 0;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF; /* 下線は今回は不要 */
    list-style: none;
    margin: 0 10%; /* 画面幅に応じて調整 */
    gap: 30px; /* メニュー項目間の余白 */
}

.footer_nav li a {
    color: #FFF;
    text-decoration: none;
}

@media screen and (max-width: 760px) {
	.footer_nav ul{
		display: none;
	}
}



/* 画面幅が768px以下の場合に適用されるスタイル（スマートフォン向け） */
	@media (max-width: 768px) {
    /* 全体的な余白の調整 */
	  .footer_content {
        padding: 50px 20px 20px 20px;
    }

    /* ロゴの調整 */
    .footer_logo img {
        width: 120px;
    }

    /* Reserveボタン下の余白調整 */
    .footer_reserve {
        margin-bottom: 50px;
    }

    /* QRコードのレイアウトを縦並びに変更 */
    .qr_container {
        /*flex-direction: column;  縦並び */
        gap: 30px; /* 縦方向の余白 */
        margin-bottom: 50px;
    }

    /* ナビゲーションメニューを縦並びに変更 */
    .footer_nav ul {
        /*flex-direction: column; /* 縦並び */
        gap: 20px; /* 縦方向の余白 */
        margin: 0 5%; /* 左右の余白を調整 */
    }

    .footer_nav li a {
        font-size: 14px; /* フォントサイズの調整 */
    }
}

/*間違えて入力ーーーー
		
			.header_nav_ul li{
			width: clac(100%/5);/*親要素の幅の100%を5で割った値/
			font-size: 1.2rem;	//
			border-radius: 5px;	/*□の角丸/
			border: 1px #707070 solid;
			}
		
		.header_nav_ul li a{
			line-higft:1.4; /*行の高さを文字サイズの1.4倍に指定/
			padding: 8px 0px;
			text-align: center;
			display: block;
			}
		*/


nav.header_nav{
	display: block;
}
@media screen and (max-width: 760px) {
	nav.header_nav{
		display: none;
	}
}

/*== スマホ用メニュー ==*/
div.hamburger-menu {
	display: none;						/* 初期状態で非表示にする場合は「none」を設定 */
}
@media screen and (max-width: 760px) {
	div.hamburger-menu {
		display: block;
	}
}
div.hamburger-menu .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(0,0,0,0.3);
	cursor: pointer;
	border-radius: 10px;
}
div.hamburger-menu .menu-btn span,
div.hamburger-menu .menu-btn span:before,
div.hamburger-menu .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 35px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
}
div.hamburger-menu .menu-btn span:before {
    bottom: 10px;
}
div.hamburger-menu .menu-btn span:after {
    top: 10px;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
div.hamburger-menu #menu-btn-check {
    display: none;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-content {
    left: calc(100% - 220px);			/* メニュー領域の引き出し位置（0にすると左端まで） */
}
div.hamburger-menu .menu-content {
	width: 100%;
	height: 100vh;						/* autoにするとコンテンツ領域分までに */
    position: fixed;
    top: 0;
    left: 100%;
	overflow: auto;
    z-index: 80;
    padding: 0 10px;
    background-color: rgba(0,0,0,0.7);
    transition: all 0.5s;				/* メニュー領域の引き出しスピード */
}
div.hamburger-menu .menu-content ul {
	display: block;
	width: 200px;						/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
    padding-top: 80px;
}
div.hamburger-menu .menu-content ul li {
    border-top: solid 1px #fff;
    list-style: none;
}
div.hamburger-menu .menu-content ul li:last-child {
    border-bottom: solid 1px #fff;
}
div.hamburger-menu .menu-content ul li a {
	display: block;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
	font-weight: bold;
    padding: 10px 0px;
    text-align: center;
}
div.hamburger-menu .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
}
div.hamburger-menu .menu-content ul li a:hover {
	opacity: 0.6;
	}
	

/*-----BLOG新しいページcss------*/

.blog_text {
  width: 90%;
  margin: 0 auto;
  

}

h2.main_title{/*空白入れない　h2.ココmain_title*/
	text-align:center;
  background-color: #707070;
  line-height: 3.5rem;
  color: #FFF;
  margin: 80px auto 60px auto;
  font-family: "American Typewriter",'Alfa Slab One', serif;
}

.blog_sabu{
  text-align: left;
  font-family:"游ゴシック体","Noto Sans JP", sans-serif;
  font-optical-sizing: auto;       /*表示サイズに応じて文字の形状（太さや幅など）を自動で最適化する設定*/
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom:1px solid #B9B9B9;
}

.blog_p {
  text-align: left;
  line-height: 2.5rem;
  margin-bottom: 40px;
}

.blog_botan {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin: 0 auto;
  
}

.blog_border {
  border-top: 1px solid #B9B9B9;
  border-bottom: 1px solid #B9B9B9;
  padding: 30px 0 30px 0;
}



/*----------スタイルimg--------------*/

.style_all {
  width:90%;
  text-align: center;
  margin: 0 auto;
  
}

.style_all img{
  max-width: 80%;

}

.styl_braids_name {
  font-size: 1rem;
  margin: 20px 0 10px 0;
}

.style_tantou {
  font-size: 0.9rem;
}

	@media (max-width: 660px) {
    
	  .styl_braids_name {
        font-size: 14px;
        width: 60%;
        width: 300px;
        margin: 10px auto;
    }

    .style_tantou {
      font-size: 14px;
      width: 60%;
      width: 300px;
      margin: 10px auto;
    }
  }


  /*-------スタッフ一覧----------------*/

  .staff_tantou {
    font-size: 1rem;
    margin: 20px auto 20px auto;
  }

/*--------次に行くボタンright---------------------------*/
  /* CSS */
.next-btn_right {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #333; /* 丸の枠線 */
  border-radius: 50%;     /* 正円にする */
  position: relative;
  transition: all 0.3s;
}

/* 矢印部分（疑似要素で作成） */
.next-btn_right::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;   /* 矢印の上の線 */
  border-right: 2px solid #333; /* 矢印の右の線 */
  transform: rotate(45deg);     /* 45度回転させて「>」にする */
  position: absolute;
  top: 18px;
  left: 16px;
}

/* ホバー時の演出（お好みで） */
.next-btn_right:hover {
  background-color: #333;
}
.next-btn_right:hover::after {
  border-color: #fff;
}


/*-------ボタンleft---------------------------*/

.next-btn_left {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #333; /* 丸の枠線 */
  border-radius: 50%;     /* 正円にする */
  position: relative;
  transition: all 0.3s;
}

/* 矢印部分（疑似要素で作成） */
.next-btn_left::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;   /* 矢印の上の線 */
  border-right: 2px solid #333; /* 矢印の右の線 */
  transform: rotate(225deg);    /* -45度回転させて「<」にする */    
  position: absolute;
  top: 18px;
  right: 16px;
}

/* ホバー時の演出（お好みで） */
.next-btn_left:hover {
  background-color: #333;
}
.next-btn_left:hover::after {
  border-color: #fff;
}


.Staff_btn{
  margin: 60px auto;
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  
}


  @media (max-width: 660px) {
	 .staff_tantou {
    font-size: 16px;
     width: 60%;
      width: 300px;
      margin: 10px auto;
   }

   .Staff_btn {
    margin: 20px auto;
    width: 150px;
    margin: 50px auto;
   }

   .next-btn_left {
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 2px solid #333; /* 丸の枠線 */
  border-radius: 50%;     /* 正円にする */
  position: relative;
  transition: all 0.3s;
}
.next-btn_left::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;   /* 矢印の上の線 */
  border-right: 2px solid #333; /* 矢印の右の線 */
  transform: rotate(225deg);    /* -45度回転させて「<」にする */    
  position: absolute;
  top: 16px;
  right: 13px;
}

  .next-btn_right {
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 2px solid #333; /* 丸の枠線 */
  border-radius: 50%;     /* 正円にする */
  position: relative;
  transition: all 0.3s;
}
.next-btn_right::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;   /* 矢印の上の線 */
  border-right: 2px solid #333; /* 矢印の右の線 */
  transform: rotate(45deg);    /* -45度回転させて「<」にする */    
  position: absolute;
  top: 16px;
  right: 13px;
}
  }


/*---------shopの中----------------*/

/*-shopの個数ボタン-*/

  .quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #070707;
    border-radius: 4px;
    width: fit-content;
    background-color: #EAEAEA; /* 画像の背景色に近い色 */
    text-align: left;
    width: 100%;
    height: 46px;
    
}

#quantity-input {
    width: 40px; /* 入力欄の幅 */
    text-align: center;
    border: none;
    padding: 8px 0;
    background-color: transparent;
    font-size: 16px;
    /* デフォルトのスピナー（矢印）を非表示 */
    -moz-appearance: textfield;
    appearance: textfield;
    
}

#quantity-input::-webkit-outer-spin-button,
#quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    
}

#minus-btn,
#plus-btn {
    background-color: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    margin: 0 auto;
    
}

#minus-btn:hover,
#plus-btn:hover {
    color: #000;
    
}

button[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box; /* パディングを含めて100%にする */
  margin: 20px auto;   /* 中央寄せ */
  padding: 10px 0px;
  border: 1px solid #070707;
  border-radius: 4px;
  height: 46px;
}
/*-shopの個数ボタンend-*/

h3.bubble_title{
  font-weight: 800;
  font-size: 40px;
  margin: 0px;
}

.item {
  display: flex;
  justify-content: center;
   /* ★ここを追加★ これがないと sticky が正しく動作しません */
  align-items: flex-start; 
  margin-bottom: 80px;
}

.shop_img_left {
  flex: 1;
  margin-right: 40px;
  position: sticky;    /* スクロールに追従 */
  top: 0;              /* 画面の一番上で固定 */
  height: 80vh;       /* 画面ぴったりの高さ */
   top: 10vh;           /* 画面中央に固定するための位置 */
}

.shop_img_left img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像を枠いっぱいに表示 */
}

.shop_img_setumei {
  flex: 1;
  
 
  padding: 40px;

}
.shop_text {
  text-align: left;
  font-size: 0.8rem;
}

.bubble{
  text-align: left;
  font-size: 12px;
}

.bubble_title {
  font-weight: 700;
  margin: 8px 0;
}

@media screen and (max-width: 760px) {
  .item {
    flex-direction: column; /* 縦並びにする */
    align-items: stretch;   /* 横幅をいっぱいまで広げる */
    margin: 0 auto;
    align-items: center;
  }

 .shop_img_left {
  width: 70%;
  
 }

  .shop_img_left {
    margin-right: 0;        /* 右側の余白を消す */
    margin-bottom: 20px;    /* 下（説明文との間）に余白を作る */
    position: static;       /* スクロール追従を解除 */
    height: auto;           /* 高さを自動にする（または 300px など指定） */
  }

  .shop_img_left img {
    height: auto;           /* 画像の高さも自動に調整 */
    aspect-ratio: 1 / 1;    /* 必要であれば正方形などに固定 */
  }

  .shop_img_setumei {
    padding: 20px 0;        /* スマホ向けにパディングを調整 */
    width: 70%;
    line-height: 1.5;
  }
  .quantity-selector {
    width: 80%;
  }
  .zeikomi{
        text-align: left;
        margin: 10px 0px;

  }

  .quantity-selector{
    width: 100%;
  }
}


/*--------NEWS一覧--------------------------*/

.news1_item {
  width: 90%;
  margin: 30px auto ;
  height: 100%;
  border-bottom: 1px solid #070707;
}


h3.news_midashi {
  background-color: #3b3b3b;
  color: #fff;
  display: inline-block;
  padding: 0.5rem;
  margin: 20px 0px 10px 0px ;
}

.news_title {
  font-weight: bold;
  margin: 10px 0px 8px 0px;
}

p.news_hi {
  text-align: left;
  color: #666;
  margin-bottom: 40px;
}



.news_item {
  width: 90%;
  margin: 30px auto ;
  height: 100%;
  border-bottom: 1px solid #070707;
}


h3.news_midashi {
  background-color: #3b3b3b;
  color: #fff;
  display: inline-block;
  padding: 0.5rem;
  margin: 20px 0px 10px 0px ;
}

.news_title {
  font-weight: bold;
  margin: 10px 0px 8px 0px;
}

p.news_hi {
  text-align: left;
  color: #666;
  margin-bottom: 40px;
}


/*-----予約フォーム-----------------------------*/

/* 全体のスタイル（NORA風のミニマル設定） */
        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 50px 20px;
        }

        .reservation-container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 40px;
            border: 1px solid #eee;
        }

        h2 {
            text-align: center;
            font-size: 1.5rem;
            letter-spacing: 0.2em;
            margin-bottom: 40px;
            text-transform: uppercase;
        }

        /* フォームの各項目 */
        .form-group {
            margin-bottom: 25px;
        }

        label {
            display: block;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 8px;
            letter-spacing: 0.1em;
        }

       /* =================================================
   1. 入力欄（テキスト、メール、日付、時間、選択、長文）の共通設定
   ================================================= */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;             /* 横幅を親要素いっぱい（100%）に広げる */
    padding: 12px;           /* 枠の内側に余白を作り、文字を打ちやすくする */
    border: 1px solid #ccc;  /* 枠線を「1ピクセルの太さ」「一本線」「薄いグレー」にする */
    border-radius: 0;        /* 角を丸めない（0にする）。シャープでモードな印象になる */
    box-sizing: border-box;  /* padding（余白）を足しても横幅が100%からはみ出さないようにする計算設定 */
    font-size: 1rem;         /* 文字の大きさを標準（16px相当）にする */
    outline: none;           /* 入力時に出るブラウザ標準の青い枠線を消す */
    transition: border-color 0.3s; /* 枠線の色が変わる時に、0.3秒かけて「ふわっ」と変化させる */
}

/* =================================================
   2. 入力欄をクリック（フォーカス）した時の設定
   ================================================= */
input:focus, 
select:focus, 
textarea:focus {
    border-color: #000;      /* 入力中（クリック中）は枠線を「黒」に変えて目立たせる */
}

/* =================================================
   3. 送信ボタンのデザイン
   ================================================= */
.submit-btn {
    display: block;          /* ボタンを1つの大きな塊（ブロック）として扱う */
    width: 100%;             /* ボタンの横幅を100%にする */
    padding: 20px;           /* ボタンを上下に厚くして押しやすくする */
    background-color: #000;  /* 背景色を「黒」にする */
    color: #fff;             /* 文字の色を「白」にする */
    border: none;            /* ボタン標準のダサい枠線を消す */
    font-size: 0.9rem;       /* 文字の大きさを少しだけ控えめにする */
    letter-spacing: 0.2em;   /* 文字と文字の間隔を広げて、高級感を出す */
    cursor: pointer;         /* マウスを乗せた時に「指マーク（押せる合図）」にする */
    transition: opacity 0.3s; /* マウスを乗せた時の変化を「ふわっ」とさせる */
    margin-top: 40px;        /* 上の入力欄から40pxの距離を空けて配置する */
}

/* 送信ボタンにマウスを乗せた時（ホバー） */
.submit-btn:hover {
    opacity: 0.8;            /* ボタンを少し透けさせて（80%の濃さ）、反応を出す */
}

/* =================================================
   4. 「必須（REQUIRED）」ラベルの横のマーク
   ================================================= */
.required::after {
    content: "REQUIRED";     /* ラベルの文字の後ろに、この文字を自動で追加する */
    font-size: 0.6rem;       /* 文字サイズをかなり小さくする */
    color: #999;             /* 目立ちすぎないように薄いグレーにする */
    margin-left: 10px;       /* 項目名（MENUなど）との間に10pxの隙間を作る */
    vertical-align: middle;  /* 文字の高さを中央に揃える */
}