@charset "UTF-8";

/*すべてのページに適用される*/
body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: #ffffff;
  font-size: 1rem;


}




.wrapper {
  margin:0 auto 0 auto;
  width: 90%
  
}


h2 {
  color: #442220;
  font-size: 12px;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #442220;
  margin-top: 10px;/*20heまで10の間隔*/
  margin-right: 0px;
  margin-bottom: 10px;/*20heまで10の間隔*/
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex; 
  flex-wrap: wrap;
}

h2 img {
 height: 20%; 
 width: 20%;
}


h3 {
  color: #ffffff;
  font-size: 12px;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #442220;
  margin-top: 10px;/*20heまで10の間隔*/
  margin-right: 0px;
  margin-bottom: 10px;/*20heまで10の間隔*/
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex; 
  flex-wrap: wrap;

}




p {
  line-height: 160%;
}
a:link {
  color: #0000bb;
  text-decoration: none;
}
a:visited {
  color: #aa2a66;
}
a:hover {
  color: #4faacc;
}
a:active {
  color: #6a3add;
}

h1 {
  text-align: center;
  margin: 15px 0 0px 0;/* 10px*/
  padding: 0 0 0 0;
  line-height: 0;
  background-color: #f9f9f9;
  background-size: auto;
  position: relative; /* これを追加 680909*/
}

h3 {
  font-size: 1rem;
}


img {
  
  border-style: none;
  width: 100%
}




#logo img {
  width: 40%;
  max-width:400px; /* 最大幅を固定 */
  height: auto;     /* 縦横比を維持 */
}

.sale {
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #442220;
	margin-bottom: 20px;
}

/* カルーセル */


.swiper {
  width: 100%;
  height: 280px; /* スマホでは少し小さめに */
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印の色を白に */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

/* ドットの色を白に */
.swiper-pagination-bullet {
  background: #fff;
  opacity: 0.7;
}

/* アクティブなドットも白に */
.swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}


.red {
	color: #ff0000;
}


/*.mp4 {
     width: 100%;
     height: auto;
}
690415削除*/



.flexorder-box {
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	
}



#navi {
  display: none;
}



/* 共通ボタンスタイル 681009add*/
.button-style {
  height: 20px;              /* 高さを統一 */
  border-radius: 8px;        /* 角丸 */
  padding: 0 16px;           /* 左右の余白（上下はheightで調整） */
  display: inline-flex;      /* 横並びにしつつ高さ揃えやすく */
  align-items: center;       /* 中央揃え */
  border: 1px solid #ccc;
  
  background-color: #dddddd; /* お好みで変更可能 */
  color: #000000;
  cursor: pointer;
  font-size: 12px;
}

.button-style:active {
  transform: translateY(2px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}



/* LINEボタン画像にも高さを合わせる681009add */

.line-button img {
  height: 20px;
  border-radius: 8px;
  
}


.messenger_button img{
 height:20px; 
 width:20px; 
 vertical-align:middle; 
 margin-right:8px;"

}

.thank img {
   width: 30%;
   height: auto;
}


.link img {
   width: 5%;
   height: auto;
}


.toi_pc {
	display: none; /* スマホではPC用を非表示 */
}
.toi_sp {
	display: block; /* スマホではスマホ用を表示 */
}
    /* sp-form内の要素のスタイルを定義 */



.tou_pc {
	display: none; /* スマホではPC用を非表示 */
}
.tou_sp {
	display: block; /* スマホではスマホ用を表示 */
}
    /* sp-form内の要素のスタイルを定義 */





/*すべてのページに適用- naviまわり-*/


/* 以前のメニュー

.navi-wrap {
	position: relative;
}

#navi {
  width: 100%;
  background: #eeeeee; /* メニューの背景色 */

/*

  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */

/*
	
}

#navi ul {
  font-size: 20px;
  list-style-type: none;
  padding-right: 20px; /* 右側の固定分余白を空ける */


/*

  padding-left: 20px;
   /*max-width: 2800px; メニューの最大幅 */


/*


  width: 1200px;  /*メニューの最小幅 */

/*
  height: 26px;
  line-height:26px;
  margin: 0 auto;
}

#navi li {
   float: left;
   width: 150px; /* メニューの個別の幅 */

/*

   text-align: center;
}

#navi li + li {
    border-left: 2px solid #aa2a66;
    box-sizing: border-box;
}

#navi li :visited {
  color: #aa2a66;
}

#navi li :hover {
 background: #4faacc; /* マウスホバー時の背景色 */

/*

}


#navi li a {
  display: inline-block;
  color: #0000cc;  /* メニューの文字色 */

/*

  text-decoration: none;
}

.btn { /* 左側に固定する部分 */

/*

  position: absolute;
  : 0;
  left: 0;
  width: 20px;  /* 固定部分の幅 */

/*

  height: 26px;  /* メニューの高さに合わせる */

/*

  line-height: 26px;
  background: #cccccc;
  font-size: 2rem;
  
}



.next-btn { /* 右側に固定する部分 */

/*

  position: absolute;
  top: 0;
  right: 0;
  width: 20px;  /* 固定部分の幅 */

/*

  height: 26px;  /* メニューの高さに合わせる */

/*

  line-height: 26px;
  background: #cccccc;
  font-size: 2rem;
  
}

*/

/* ハンバーガーメニューのスタイル */


 .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

/* nav.navbar の設定 - これが navbar-container の基準になるように */
.navbar {
    position: relative;
    width: 100%;
    /* height: auto; 必要に応じてヘッダーの高さなどを確保 */
    z-index: 1000;
    /* max-width を設定すると、特定の画面サイズ以上では固定幅にできます */
    /* max-width: 1200px; */
    margin: 0 auto; /* 中央寄せ680909syuusei */
}


.navbar-container {
    display: block;
    position: absolute;
    /* height: 20px; */ /* 変更前 */
    /* width: 30px; */ /* 変更前 */
    height: 4vw; /* 画面幅の4% */
    width: 6vw; /* 画面幅の6% */
    /* top: -20%; */ /* 変更前 */
    /* right: 8px; */ /* 変更前 */
    top: -8vw; /* 画面上端から2% (必要に応じて調整) */
    right: 2vw; /* 画面右端から2% (必要に応じて調整) */
    z-index: 1010;
    /* background-color: rgba(0, 255, 0, 0.3); /* デバッグ用: 領域を確認したい場合680909syuusei */
}
/* チェックボックスのスタイル - 実際には見えないがクリック領域となる */
.navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 140%;
    width: 150%;
    /* top:-17px; */ /* 変更前 - 親要素の高さ全体を覆うので不要 */
    top: -1.5vw; /* 親要素の高さ全体を覆うように */
    left: -2vw;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

/* ハンバーガーアイコン（3本線）のスタイル */
.navbar-container .hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 15px; */ /* 変更前 */
    /* width: 20px; */ /* 変更前 */
    height: 3vw; /* 画面幅の3% */
    width: 4.5vw; /* 画面幅の4.5% */
    position: absolute;
    /* top: -13px; */ /* 変更前 - 親要素の中央に配置するように調整 */
    /* right: 5px; */ /* 変更前 - 親要素の中央に配置するように調整 */
    top: 50%; /* 親要素の中央に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translate(-50%, -50%); /* 中央寄せ */
    z-index: 2;
}

/* 各線のスタイル */
.navbar-container .hamburger-lines .line {
    display: block;
    /* height: 2px; */ /* 変更前 */
    height: 0.6vw; /* 画面幅の0.4% (線の太さ)680909syusei */
    width: 100%;
    border-radius: 10px;
    background: #933;
    transition: transform 0.4s ease-in-out;
}


.navbar-container .hamburger-lines .line1 {
    transform-origin: 50% 50%; /* 回転の中心を真ん中680914にする */
}
.navbar-container .hamburger-lines .line2 {
    /* 中央の線はスケールYを0にして消す */
}
.navbar-container .hamburger-lines .line3 {
    transform-origin: 50% 50%; /* 回転の中心を真ん中680914にする */
}

/* ==================================== */
/* メニューアイテムのスタイル */
/* ==================================== */

.menu-items {
    position: fixed; /* 画面に固定 */
    top: 20vw; /* 画面上端から */
    right: -250px; /* 初期値: 画面の右外に隠す (メニューの幅に合わせて調整) */
    width: 100px; /* メニューの幅 (例: 280px) */
    height: 70vh; /* 画面の高さ全体 */
    padding-top: 0px; /* メニュー上部のパディング (ヘッダー部分と重ならないように) */
    padding-right: 10px; /* 左右のパディング調整 */
    padding-left: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: right 0.5s ease-in-out; /* rightプロパティのアニメーション */
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); /* 左側から影を出す */
    z-index: 1005; /* バーガーアイコンより奥、他のコンテンツより手前 */
    overflow-y: auto; /* メニュー項目が多い場合にスクロールできるように */
    list-style: square; /* リストのマーカーを削除=none 四角square 白丸circle 数字decimal 小文字アルファベットlower-alpha 大文字アルファベットupper-alpha  */
    margin: 0; /* ulのデフォルトマージンをリセット */
    /* デバッグ用: メニュー領域を確認したい場合 */
    /* border-left: 1px solid #ccc; */
}

.menu-items li {
    margin-bottom: 0;/*rem*/
    font-size: 1.1rem; /* 少し大きくしても良いかも */
    font-weight: 500;
    text-align: left; /* テキストを右寄せにする */
}

.menu-items li a {
    text-decoration: none; /* リンクの下線を消す */
    color: #333; /* リンクの色 */
    display: block; /* クリック領域を広げる */
    padding: 5px 0; /* リンクのパディング */
}

.menu-items li a:hover {
    color: #933; /* ホバー時の色 */
}


/* ==================================== */
/* チェックボックスがチェックされた時のアニメーション */
/* ==================================== */



/* メニューを開く サイズ未調整*/
.navbar-container input[type="checkbox"]:checked ~ .menu-items {
    right: 0; /* メニューを画面内に表示 */
}

/* メニューを開いたときのXの変形 */
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: translateY(calc(0.6vw + 0.6vw)) rotate(45deg); /* Y軸の移動量を線の太さに合わせて調整 */ /* 微調整 */
    width:120%; /* 線が少し伸びるように */
}

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
    opacity: 0;
}

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
 transform: translateY(calc(-0.6vw - 0.6vw)) rotate(-45deg); /* Y軸の移動量を線の太さに合わせて調整 */    width: 120%; /* 線が少し伸びるように */
}

/*translateY() の 0.3vw の部分:
translateY(calc(0.6vw + 0.3vw)) の 0.3vw を、0.2vw や 0.4vw などに微調整してみてください。これがXの縦方向の隙間や、中心のズレに影響します。
width: 120%; の 120% の部分:
Xの交差部分の見た目が変わります。115% や 125% などに調整して、きれいに交差するか確認してみてください。
top: 50%; と left: 50%;、transform: translate(-50%, -50%);:
もしX全体がずれて見える場合は、.navbar-container .hamburger-lines のこの中央寄せの指定が、親要素との関係でわずかにずれている可能性もゼロではありません。ただし、可能性は低いでしょう。

*/



/*newitem*/

.shin {
	font-size: 1rem;
}
.newitem {
	display: flex;
	justify-content:space-around;
	flex-wrap: wrap;
	margin-right: 0;
	padding-inline-start: 0;	
}

.newitem li {
	list-style-type: none;
	width: 50%;
	height: auto;

}

.newitem img {
	width: 90%;
}


/*すべてのページに適用-footer-*/


.photo {
  display: flex;
  justify-content: center;  /* 水平方向に中央 */
  /*align-items: center; 垂直方向に中央 */
}
span.navy {
  color: #000026;
}




#footer {
  display: flex;
  flex-wrap: wrap;
  background-image: url(../image/Prick.gif);
  background-repeat: repeat-x;
  margin-top: 30px;
  padding: 20px 0 20px 0;
  font-size: 0.5rem;
  color: #440000;
  
}


.table-scroll0 {
	overflow-x: auto; /* 横方向のスクロールを可能にする */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
}

/* thにwhite-space: nowrap; はそのまま適用 */
.table-scroll0 th {
  white-space: nowrap;
  padding: 8px 8px 8px 8px;
  border: 1px solid #dddddd;
  text-align-last: justify;
  vertical-align: middle;
 /* background-color: #dddddd;
  color: #000000;
*/
}

.table-scroll0 td {
  padding: 8px 8px 8px 8px;
  border: 1px solid #dddddd;
  text-align: left;
  vertical-align: middle;
 /* background-color: #eeeeee;*/
}




.table-scroll {
	overflow-x: auto; /* 横方向のスクロールを可能にする */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
}

/* thにwhite-space: nowrap; はそのまま適用 */
.table-scroll th {
  white-space: nowrap;
  padding: 8px 8px 8px 8px;
  border: 1px solid #dddddd;
  text-align-last: justify;
  vertical-align: middle;
  background-color: #dddddd;
  color: #000000;

}

.table-scroll td {
  padding: 8px 8px 8px 8px;
  border: 1px solid #dddddd;
  text-align: left;
  vertical-align: middle;
  background-color: #eeeeee;
}


/*個別のスタイル*/
/*index.html*/
.hyo {

  margin: 20px 0 0 0;
}

.news_item {
  margin: 0 0 0 0;
  color: #440000;
}
/*about.html*/

.gmap {
  position:relative;
  width:100%;
  height:0;
  padding-top:75%;
}

.gmap iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/*annai.html*/

.annai {
  text-align: center;
  padding-right: 1em;
}

.annai img {
  width: 80%;
}


/*table.toia {
  border-collapse: collapse;
  border: 1px solid #666666;
  text-align: left;
  

}
table.toia th, table.toia td {
  padding: 6px 2px 6px 4px;
	border: 1px solid #999999;  
    vertical-align: middle;
	
}
#form th {
  background-color: #c99e73;
  color: #442220;
  
}

table.toia th {
       background-color: #eeeeee;
    color: #442220;
	
}
*/


/*shop_PC.html*/

 
.item {
	display: flex;
	justify-content:space-around;
	flex-wrap: wrap;
	margin: 5px;
	padding: 0 0 0 0;
	
}

.item li {
	list-style-type: none;
	width: 33%;
	height: auto;

}

.item img {
	width: 70%;
}



.shohin {
    text-align: center;
        margin: 5px;
	order: 1;
}

.syosai {
	font-size: 20px;
        margin: 5px;	
	order: 3;
}

.shop_under {
	order: 2;
}





input[type='image'] {
    width: 40%;	
    height: 50%;
}

select {
 font-size: 20px;

}


/*@media only screen and (min-width: 1000px){
*/


}
}

.news_item {
 font-size: 18px;

}

.link {
 font-size: 18px;

}

/* ask2.html*/

#form {
font-size: 2rem;
}

/*ask_tour.html*/


/*table.toia {
  border-collapse: separate;
  border: 1px solid #eeeeee;
  margin-left: auto;
  margin-right: auto;
  
}
*/

.tou_sp {
    width: 100%; /* または固定ピクセル値など、幅を必ず指定する */
    margin-left: auto;
    margin-right: auto;
    background-color: lightblue; *//* 分かりやすいように背景色を追加 */
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box; /* パディングを含めてwidthを計算 */
}

.toi_sp {
    width: 100%; /* または固定ピクセル値など、幅を必ず指定する */
    margin-left: auto;
    margin-right: auto;
    background-color: lightblue; *//* 分かりやすいように背景色を追加 */
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box; /* パディングを含めてwidthを計算 */
}

table.toia {
    border-collapse: separate;
    border: 1px solid #eeeeee;
    width: 100%; /* テーブルの幅を指定します。必要に応じて調整してください */
    margin-left: auto; /* これを追加 */
    margin-right: auto; /* これを追加 */
}

table.toia th {
    /*white-space: nowrap;*/
    padding: 8px 8px 8px 8px;
    border: 1px solid #dddddd;
    text-align: left; /* text-align-lastをtext-alignに変更 */
    vertical-align: middle;
    background-color: #eeeeee;
    color: #000000;
    /* thのフォントサイズをCSSで指定 */
    font-size: 1rem; /* 例として設定。必要に応じて調整 */
    word-break: break-word; /* 長い単語でも折り返す */
    white-space: normal;/* white-space: normal; を明示的に指定して折り返しを許可 */
}

table.toia td {
    padding: 8px 8px 8px 8px;
    border: 1px solid #dddddd;
    text-align: left;
    vertical-align: middle;
   font-size: 1rem; /* 例として設定。必要に応じて調整 */
    word-break: break-word; /* 長い単語でも折り返す */
    white-space: normal;/* white-space: normal; を明示的に指定して折り返しを許可 */
}

input {
    font-size: 1rem;
    padding: 5px; /* 見栄えを良くするために追加 */
}

select {
    font-size: 1rem;
}

option {
    font-size: 1rem;
}

p.btn {
    text-align: center;
    margin-top: 20px; /* ボタンの上に少し余白を追加 */
}

span.must {
    background-color: #FFFFAF;
    color: #ff0000;
    font-size: 1rem;
    padding: 2px 5px; /* 見栄えを良くするために追加 */
    border-radius: 3px; /* 少し角丸に */
    display: inline-block; /* パディングを適用するために */
}

/* メッセージや注意書きのスタイルもCSSで定義 */
.note-message {
    font-size: 0.6rem; /* ふりがなの注意書き */
    color: #555;
    display: block; /* これを追加 */
    margin-top: 5px; /* テキストボックスとの間に少し余白を追加 */
}

.caution-message {
    font-size: 0.6rem; /* お問い合わせの注意書き */
    color: red;
    text-align: center;
    padding: 10px 0;
}

/* メールアドレス（再度入力）のテキストスタイル */
.email-reinput-label {
    font-size: 0.6rem; /* 必要に応じて調整 */
    display: block; /* 改行したい場合 */
    display: block; /* これを追加 */
    margin-top: 5px; /* テキストボックスとの間に少し余白を追加 */
}