@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Sedan+SC&display=swap');



body{color:#333333;
	font-family:sans-serif;
	position:relative;}
#page{width:1200px;
	margin:0 auto;}
/*パンくずリスト*/
.topicpath{font-size:12px;}

/*ページの先頭へ戻る*/
.pagetop{
	font-size: 12px;
	text-align:right;
	margin-top:30px;
	}
/*ページヘッダー*/

#siteTitle{font-size:30px;
			line-height:1.2;
			margin-bottom:0;
			font-family: "Sawarabi Mincho", serif;
			}

/*グローバルナビ*/
#pagehead .globalnavi ul{
	margin: 0;
	padding: 0;
	}
	
#pagehead .globalnavi ul:after{
	content: "";
	clear: both;
	display: block;
	}
	
#pagehead .globalnavi ul li{
	list-style: none;
	width: 200px;
	float: left;
	border-collapse:collapse;
	border:solid 1px #CCCCCC;
	padding: 1px 10px;
	box-sizing: border-box;
	text-align: center;
	font-size: 14px;
	line-height: 1.429;
	}

#pagehead .globalnavi ul li:first-child{
	border-bottom:none;
	border-right:none;}
#pagehead .globalnavi ul li:nth-child(2){
	border-bottom:none;
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(3){
	border-bottom:none;
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(4){
	border-bottom:none;
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(5){
	border-bottom:none;
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(6){
	border-bottom:none;}
	#pagehead .globalnavi ul li:nth-child(7){
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(8){
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(9){
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(10){
	border-right:none;}
	#pagehead .globalnavi ul li:nth-child(11){
	border-right:none;}



#pagehead .globalnavi ul li a{
	color: inherit;
	text-decoration :none;
	display: block;
	padding: 5px 0;
	}
	
#pagehead .globalnavi ul li a:hover {
	background-color: #F2F2E5;
	}
			
#pagefoot{border-top:solid 1px #CCCCCC;
			margin-top:15px;
			clear:both;}
			
/*ページボディ*/
#pagebody{margin-top:0px;}
#pagebody:after{content:"";
				clear:both;
				display:block;}
#pagebody{width:980px;
				}
					
/*ローカルナビ*/
#pagebodymain{
	width:980px;
	margin:auto;
	float:right;
	}
/*店舗情報*/
.joho{
	font-size:14px;
	width:180px;
	float:left;
	text-align:left;
}
.joho ul{
	margin:0;
	padding:0;
	}
.joho ul li{
	list-style:none;
	}	
	
/*画像拡大*/
.zoom{
 cursor: pointer;}

#zoomback {
position:fixed;
top:0;
width:1200px;
height:100vh;
background-color:rgba(0,0,0,0.8);
display:flex;
justify-content:center;
align-items:center;
}
#zoomimg {
width:50%;
border:solid 5px #fff;
}
#zoomback {
display:none;
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}

/* モーダルの画像スタイル */
.modal-content {
    display: block;
    width: 80%;
    max-width: 700px;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ココから下は画像を並べてる部分のスタイルなので
　　モーダルとは直接関係がない部分です　　　　　 */
/********************************************/
.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.img  {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 20px;
    border: 1px solid #000;
    cursor: pointer;
    transition: opacity 0.3s ;
}

.img:hover {
    opacity: 0.7;
}

.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*SNSボタン*/
.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  max-width: 350px;/* ボタンを設置する場所の最大横幅 */
  margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
  padding: 0!important;
  list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
  flex: 0 0 33%;/* ボタンを3つ並びへ */
  text-align: center!important;
}

/* ボタン全体 */
.flowbtn {
  font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
  position: relative;
  display: inline-block;
  width: 75px; /* 背景横幅 */
  height: 65px;/* 背景高さ */
  font-size: 30px;/* アイコンサイズ */
  border-radius: 4px;
  color: #fff!important;/* ボタン内カラー */
  transition: .5s;
  text-decoration: none;
  box-shadow: 0 1px 2px #999;
  margin-bottom:10px;/* ボタン下余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn i {
  position: relative;
  top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn div {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
}

/* ボタンマウスホバー時少し浮き上がる */
.flowbtn:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  text-decoration: none;
  cursor: pointer;
}

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn i.fa-brands.fa-instagram,.flowbtn i.fa-brands.fa-amazon {
  font-size: 35px;
}

/* エックス背景 */
.my_x1 {
  background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
 background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}			

/*見出しサイズ変更*/
.pageTitle{font-size:30px;
			background-color:#F2F2E5;
			padding:5px 15px;
			line-height:1.231;
			margin-top:0;}
.heading-TypeA{font-size:18px;
				color:#349FA6;
				border-bottom:solid 1px #349FA6;
				padding:5px;
				line-height:1.333;}
.heading-TypeB{font-size:16px;
				border-left:solid 5px #E3E4D9;
				padding-left:10px;
				line-height:1.375}
.heading-TypeC{font-size:16px;
			    color:#349FA6;
			    margin-bottom:0;
			  	}

.title{font-size:20px;}
/*区切り線・余白について*/

.newlist{margin-bottom:30px;
		patting-bottom:15px;
		}

.articledetailfoot{border-top:solid 1px #CCCCCC;
					margin-top:30px;
					patting-bottom:15px;}
					
.articledetilbody section{margin:10px 0;}

/*地図*/
.tizu{
	margin:0;
	width:980px;
	float:center;}
.tizu:after{
	content:"";
	clear:both;
	display:block;
	}
.maptext{
	float:right;
	width:420px;
	}
.map{
	width:720px;
	float:left;
	margin:0;
	}

.akusesumaptext{
	width:380px;
	float:right;
	}
.akusesumap src{
	float:left;
	}
				
/*お知らせ*/

.pagebodypicture:after{
	content:"";
	clear:both;
	display:block;
	}

.pagebodypicture article{
	width:270px;
	float:left;
	margin:0 0 20px 40px;
	box-sizing: border-box;
	}
	

.pagebodypicture article:nth-child(4n+1){
	margin-left:0;
	}
	
.pagebodypicture article figure,figcaption{
	margin:0;
	}

.pagebodypicture table{
	font-size:14px;
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	width:270px;
	}
.pagebodypicture table caption{
	text-align:center;
	line-height:1.429;
	margin:0;
	}
.pagebodypicture table caption h3{
	font-size:18px;
	margin:0;
	}
	
.pagebodypicture table th{

	width:100px;
	}
	
.pagebodypicture table th,table td{
	border:1px solid #CCCCCC;
	padding:5px 10px;
	}



/*スマホ設定*/
@media (max-width: 500px){
#page{width:350px;
	margin:0 auto;}
#siteTitle{font-size:20px;
			line-height:1.2;
			margin-bottom:0;
			font-family: "Sawarabi Mincho", serif;
			}
#pagebody{width:350px;
		float:center;}
		
#pagebodymain{width:350px;}


	
#pagehead .globalnavi ul li{
	list-style:none;
	width: 174px;
	float: left;
	border:none;
	padding:0px;
	box-sizing: border-box;
	text-align: center;
	font-size: 14px;
	line-height: 1.429;
	}
.topicpath{font-size:0px;}
.heading-TypeA{font-size:16px;}
.pageTitle{font-size:16px;}

.zoom{
 cursor: pointer;}

#zoomback {
position:fixed;
top:0;
width:350px;
height:100%;
background-color:rgba(0,0,0,0.8);
display:flex;
justify-content:center;
align-items:center;
}
#zoomimg {
width:100%;
border:solid 5px #fff;
}
#zoomback {
display:none;
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}

/* モーダルの画像スタイル */
.modal-content {
    display: block;
    width: 80%;
    max-width: 700px;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ココから下は画像を並べてる部分のスタイルなので
　　モーダルとは直接関係がない部分です　　　　　 */
/********************************************/
.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.img  {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 20px;
    border: 1px solid #000;
    cursor: pointer;
    transition: opacity 0.3s ;
}

.img:hover {
    opacity: 0.7;
}

.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
	
.pagebodypicture:after{
	content:"";
	clear:both;
	display:block;
	}

.pagebodypicture{
	width:350px;
	float:center;
	margin:20px 40px;
	box-sizing: border-box;
	}
.pagebodypicture article{
	width:270px;
	float:left;
	margin:10px 0px;
	box-sizing: border-box;
	}
.newlist{width:350px;
		}
.tizu{
	margin:0;
	width:350px;
	float:center;}
.tizu:after{
	content:"";
	clear:both;
	display:block;
	}
.maptext{
	float:center;
	width:350px;
	}
.mapp{
	width:350px;
	float:center;
	}

.akusesumaptext{
	width:350px;
	float:center;
	}
.akusesumapp{
	width:350px;
	float:center;
	}
.toiawase{
	width:350px;
	float:center;
	}
	}