@charset "utf-8";

/* ヘッダー */
header{
	position: relative;
	margin: 0 auto ;
	display: block;
	width: 100%;
}

body::before{
	position: absolute;
	top:50px;
	left: 0;
	width: 100%;
	height: 100%;
	display:block;
	content: '';
	background-image: url('../img/shop/bg01.jpg');
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 100% auto;
}

/* nav */
.pageNav{
	position: relative;
	margin: 50px auto 0 auto;
	padding: 10px 0;
	color: #ffffff;
	text-align: center;
	background: -webkit-linear-gradient(top, rgba(8,52,139,1) 20%, rgba(7,21,49,1));
	background: -o-linear-gradient(top, rgba(8,52,139,1) 20%, rgba(7,21,49,1));
	background: linear-gradient(to top, rgba(7,21,49,1) 20%, rgba(8,52,139,1));
}
.pageNav ul{
	position: relative;
	margin: 0 auto;
	width: 80%;
	text-align: center;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.pageNav ul li{
	position: relative;
	width: 40%;
	margin-bottom: 10px;
}
.pageNav ul li a{
	color: #fff;
}

.ttl{margin: 0 auto;}

/* list*/
#list{
	position: relative;
	margin: 50px auto;
}
#list h2{
	position: relative;
	margin: 30px auto;
	font-size: .24rem;
	color: #0a2252;
	text-align: center;
}
#list h2::after{
	position: relative;
	display: block;
	content: '';
	margin: 10px auto 0 auto;
	width: 1em;
	height: 2px;
	background-color: #08348b;
}
#list h3{
	position: relative;
	width: 80%;
	margin: 50px auto 30px auto;
	padding-bottom: 4px;
	font-size: .18rem;
	color: #0a2252;
	text-align: center;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#list h3::before, #list h3::after{
	position: relative;
	display: block;
	content: '';
	width: 40px;
	height: 1px;
	background-color: #0a2252;
}
#list h3::before{margin-right: 1em;}
#list h3::after{margin-left: 1em;}
#list p.lead{text-align: center; color: #000000; padding-bottom: 30px;}
#list ul{
	position: relative;
	margin: 0 auto 80px auto;
	width: 80%;
}
#list ul li{
	position: relative;
	margin-bottom: 20px;
	color: #011235;
}
#list ul li img{ width: 100%;}
p.name{
	position: relative;
	margin: 5px 0 0 0;
	color: #0e49be !important;
	font-size: .18rem;
}
p.address{
	position: relative;
	margin: 10px 0 0 0;
}
p.access{
	position: relative;
	font-size: .12rem;
}
p.name_en{
	position: relative;
	margin: 0;
	color: #909ebb !important;
	font-size: .15rem;
}
/* swiper */
.swiper {
    width: 100%;
    position: relative;
    margin: 0 auto;
}
/* メニュー用 */
#main-contents .swiper {width: 100%;text-align: center;}
#main-contents .swiper .swiper-container img{width: 90%; padding-bottom: 30px;}

.swiper-container-wrapper {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.swiper-container {
    margin: 0 !important;
    padding: 0;
}
.swiper-button-next{
	width: 10px;
    right: 0;
    background-image: url('../img/shop/btn_next.png');
    background-size: 10px auto;
    background-position: 100% 50%;
}
.swiper-button-prev {
	width: 10px;
    left: 0 !important;
    background-image: url('../img/shop/btn_prev.png');
    background-size: 10px auto;
    background-position: 100% 50%;
}
.swiper-pagination-bullets {width: initial !important;}
.swiper-pagination {
	top: calc(100% - 30px);
	right: 50%;
	left: initial !important;
	bottom: initial !important;
	transform: translateX(50%);
	color: #aaaaaa;
}
.swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: #aaaaaa;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	background: #08348b;
	opacity: 1;
}
/* 店舗画像用 */
.thumb-item {
    text-align: center;
    padding: 0;
	width: 100%;
	height: auto;
}
.thumb-item img {
    vertical-align: bottom;
	width: 100%;
	height: 100%;
}
.thumb-item-nav {
	height: 20%;
	box-sizing: border-box;
	padding: 2px 0;
}
.thumb-item-nav img {width: 99%;}

#shop h2{
	position: relative;
	margin: 5px 0 15px 0;
	font-size: .20rem;
	color: #0a2252;
}

h3{
	position: relative;
	margin: 0 auto 15px auto;
	padding-bottom: 5px;
	font-size: .17rem;
	font-weight: 500;
	color: #0e49be;
	border-bottom: solid 2px #0e49be;
}


/* shop */
#shop{
	position: relative;
	margin: 20px auto;
	color: #323232;
}
#shop .shopType{
	position: relative;
	margin: 0 auto;
	color: #0a2252;
	width: 96%;
}
#shop .shopNameWrap{
	position: relative;
	margin: 0 auto;
	width: 96%;
}
#shop .shopNameWrap .shopName p{
	position: relative;
	margin-top: 5px;
	font-size: .12rem;
}
#shop .shopNameWrap .shopName p img, #shop .shopTel img{padding-right: 10px; vertical-align: middle;}
#shop .shopTel{
	position: relative;
	margin: 15px auto;
	color: #5b5b5b;
	font-size: .22rem;
	font-weight: 900;
}
#shop .shopTel a{color: #5b5b5b;}

#shop .info {
	position: relative;
	margin: 15px auto;
	border: 1px solid #5b5b5b;
	padding: 10px;
	background-color: antiquewhite;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}
#shop ul.shopMenu{
	position: relative;
	margin: 0 auto;
	background-color: #e5e9f4;
	width: 100%;
	padding: 5px 0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#shop ul.shopMenu li{
	position: relative;
	margin: 0 0 5px 0;
	width: 44%;
	padding: 0 ;
	text-align: center;
}
#shop ul.shopMenu li:nth-child(odd){border-right: solid 1px #a0a0a0;}
#shop ul.shopMenu::after{
	content:"";
	display: block;
	width: 44%;
}
#shop ul.shopMenu li a{color: #323232;}
#shop .shopLead{
	position: relative;
	width: 96%;
	margin: 20px auto 40px auto;
	color: #5b5b5b ;
}


#main-contents section{ margin: 0 auto 30px auto;}
#main-contents .caution{ 
	font-size: .12rem;
	color: #5b5b5b;
	text-align: right;
	margin: 20px auto;
}


/* shopdata */
#shopdata{
	position: relative;
	margin: 0 auto ;
}
#shopdata dl{position: relative;}
#shopdata dl dt{
	position: relative;
	background-color: #ededed;
	color: #5b5b5b;
	font-weight: 500;
	padding: 5px;
}
#shopdata dl dd{
	position: relative;
	margin: 10px 0;
	color: #323232 ;
	padding: 5px;
}
#shopdata dl dd iframe{
	margin-top: 10px;
	width: 100%;
}
.chu{
	font-size: .20rem;
	color: #0a2252;
}
.igsWidget iframe {
	/*height: auto!important;*/
	height: 300px;
}
/*--年末年始案内*/
.cal{
  padding: 0;
  border: 1px solid #999;
  text-align: center;
	margin: 0 0 80px 0;
}
.cal li{
  list-style: none;
}
.cal li ul{
  padding: 0;
}
.cal > li:first-child li{
  background: #ffeacf; 
}
.cal li ul li + li{
  border-left: 1px solid #999;
}
.cal li ul{
  display: flex;
}
.cal li ul li{
  flex-basis: 20%;
  padding: .5em 1em;
}
.cal > li + li{
  border-top: 1px solid #999;
}
.red {
	color: brown;
}
@media (max-width: 650px) {
  .cal{
    display: flex;
  }
  .cal > li{
    flex-basis: calc( 100% / 2 );
  }
  .cal > li + li{
    border-left: 1px solid #999;
    border-top: none;
  }
  .cal li ul{
    display: block;
  }
  .cal li ul li + li{
    border-top: 1px solid #999;
    border-left: none;
  }
}
/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	body::before{
		top:80px;
		background-size: 1200px auto;
	}
	
	/* nav */
	.pageNav{margin: 80px auto 0 auto; padding:20px 0;}
	.pageNav ul{width: 700px;}
	.pageNav ul li{
		width: auto;
		margin-bottom: 0;
		margin-left: 2em;
		font-size: .16rem;
	}

	/* list*/
	#list{margin: 20px auto;}
	#list h2{
		margin: 50px auto;
		font-size: .36rem;
	}
	#list h2::after{margin: 25px auto 0 auto;}
	#list h3{
		width: 500px;
		margin: 70px auto 50px auto;
		padding-bottom: 8px;
		font-size: .24rem;
	}
	#list h3::before, #list h3::after{width: 170px;}
	#list ul{
		width: 960px;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	#list ul::after{
	  content:"";
	  display: block;
	  width: 250px;
	}
	#list ul li{
		width: 250px;
		margin-bottom: 50px;
	}
	p.name{
		margin: 20px 0 0 0;
		font-size: .20rem;
	}
	p.address{margin: 15px 0 0 0;}
	p.name_en{font-size: .16rem;}
	
	/* swiper */
	.swiper {width: 960px;}
	/* メニュー用 */
	#main-contents .swiper {width: 800px;}
	#main-contents .swiper .swiper-container img{width: auto; padding-bottom: 50px;}

	.swiper-button-next{
		width: 20px;
		background-size: 20px auto;
	}
	.swiper-button-prev {
		width: 20px;
		background-size: 20px auto;
	}
	/* 店舗画像用 */
	.thumb-item {
		width: 740px !important;
		height: 500px !important;
		display: inline-block !important;
	}
	.thumb-item-nav {
		width: 215px !important;
		height: 500px !important;
		display: inline-block !important;
		padding: 0;
	}
	.thumb-item-nav img {width: 100%;}

	#shop h2{
		margin: 15px 0 20px 0;
		font-size: .30rem;
	}

	#shopdata h3{
		margin: 0 auto 30px auto;
		padding-bottom: 10px;
		font-size: .20rem;
	}


	/* shop */
	#shop{margin: 130px auto;}
	#shop .shopType{width: 960px;font-size: .16rem;}
	#shop .shopNameWrap{
		margin: 0 auto 15px auto;
		width: 960px;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	#shop .shopNameWrap .shopName{
		position: relative;
		width: 700px;
	}
	#shop .shopNameWrap .shopName p{
		display: inline-block;
		width: auto;
	}
	#shop .shopNameWrap .shopName p.address{
		font-size: .14rem;
		padding-right: 50px;
	}
	#shop .shopNameWrap .shopName p.access{font-size: .12rem;}
	#shop .shopTel{
		margin: 15px 0 0 0;
		width: 260px;
		font-size: .30rem;
		font-weight: 600;
		text-align: right;
	}

	#shop ul.shopMenu li{
		margin: 0;
		width: auto;
		padding: 8px 30px;
		font-size: .16rem;
		border-right: solid 1px #a0a0a0;
	}
	#shop ul.shopMenu li:last-child{border-right: none;}
	#shop ul.shopMenu::after{display: none;}
	#shop .shopLead{
		width: 960px;
		margin: 30px auto 50px auto;
	}
	#shop ul.shopMenu li:hover{cursor: pointer; opacity: .7;}

	#main-contents section{ margin: 0 auto 90px auto;}

	/* shopdata */
	#shopdata dl{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
	}
	#shopdata dl dt{
		width: 280px;
		padding: 20px 0;
		font-size: .16rem;
		font-weight: 500;
		text-align: center;
		border-bottom: solid 1px #ffffff;
	}
	#shopdata dl dd{
		width: 600px;
		padding: 20px 30px;
		margin: 0;
		font-size: .16rem;
		border-bottom: solid 1px #ededed;
	}
	#shopdata dl dd a[href*="tel:"] {color: #323232;}

	.igsWidget iframe {
		height: 650px !important;
	}
}