@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

*{margin: 0; padding: 0; list-style: none;}
img{display: block;}

a img{transition: 0.1s ease-in-out;}
a:hover img{opacity: 0.6;}

.hvr{transition: 0.1s ease-in-out;}
.hvr:hover{opacity: 0.6;}
.hvrBtn{transition: 0.1s ease-in-out;}
.hvrBtn:hover{opacity: 1;}

.abn{text-decoration: none !important;}

.sp{display: none;}

#pageTop{position: fixed; right:30px; bottom: 30px;}


body{font-size: 18px; line-height: 2; font-family:"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; color: #000; background: #FFF;}

.nav{display: table; margin: 0 auto;}
.nav li{display:table-cell;}
.nav li:after{content: "/";}
.nav li:last-child:after {display: none;}
.nav li a{padding: 0 40px; font-size: 20px; line-height: normal; font-weight: bold; color:#333; text-decoration: underline;}
.nav li a:hover{text-decoration: none;}

header{padding: 5% 0 0 0;}
header img{margin: 0 auto; margin-bottom: 60px;}

footer #bnr{background: #fff; padding: 30px; margin-bottom: 80px;}
footer #bnr ul{display: flex; width: 100%; padding: 0 15px; box-sizing: border-box; margin: 0 auto;justify-content: center;}
footer #bnr li{padding: 0 15px;}
footer p img{margin: 0 auto; margin-bottom: 30px;}
footer .contact_area { text-align: center; }
footer .contact_area .ttl img { width: 100%; }
footer .contact_area .ttl {  width: 320px;  margin: 0 auto;  position: relative;  margin-top: 30px; }


.clear{clear:both;}
.fl_left{float:left;}
.fr_left{float:right;}
.sp_disp{display:none;}

html{
  /* scroll-behavior: smooth; */
}

.main{
  margin:0 auto;
  padding:10px 0;
  width:80%;
  max-width:950px;
}
h2{
  display: block;
  background-color: #DB4A41;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  position: relative;
  margin: 4% auto;
}
h3{font-size:20px;}
.hero_area {
  width: 100%;
  padding-top: 250px;
  background: #1C96D4 url("../../images/Store/walking_anime_vertical.gif") repeat-x center bottom;
  -webkit-background-size: 1024px;
  -o-background-size: 1024px;
  background-size: 1024px;
  position: relative;
}
.hero_area h1 {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 40px;
  color: #FFF697;
}
footer .contact_area p {
  font-size: 1.2em;
  line-height: 1.8;
  padding: 0;
  color: #003C5F; 
}
footer .contact_ttl img{
  width: 60%;
  margin: 5% auto 0 auto;
}
footer .kumamoto_logo {
  width: 140px;
  margin: 3% auto 2% auto;
}
footer .copyright {
  font-size: 0.8em;
  padding: 0;
}
footer .kumamoto_logo img{
  width: 100%;
}

/************ store_main ************/
.list-area{
	margin-left:50px;
	font-size: 20px;
}
li{
  color: #225269;
}
input{
	margin-right:3px;
}
label{
	cursor: pointer;
}
.list-purpose {
	width:100%;
  margin-left:30px; /*margin-left:50px;*//* Upd 20210204 商品券利⽤可能店舗の対応 : 地域をDBより取得するように変更 */
  padding-bottom:10%;
	}
.list-purpose li {
	padding: 0 0 0 1px;
	width: 19%; /*width: 17%;*//* Upd 20210204 商品券利⽤可能店舗の対応 : 地域をDBより取得するように変更 */
  min-width: 150px; /* Add 20210204 商品券利⽤可能店舗の対応 : 地域をDBより取得するように変更 */
	float: left;
	margin: 0 0 15px 0;
	font-size: 20px;
}
.searchword{
  width: 90%;
  margin-bottom:20px;
  resize:none;
  font-size:16px;
  padding:6px;
  height:30px;
}
.area-submit{
  text-align:center;
}
.btn-submit{
  margin:10px 0px 10px 0px;
  padding: 10px 30px;
  font-size: 1.2em;
  background-color: #333;
  color:#fff;
  border-style:none;
  outline: none;
  border-radius:30px;
  cursor: pointer;
  
}
.tb_border{
  border-top:5px solid #f7c052;
  border-bottom:5px solid #f7c052;
  margin-bottom:20px;
}

/************ store_search ************/
#main_store_search{
 width:100%;
 background-color:#FFFAD2;
}
#main_store_search li{
  float: left;
  width: 49%;
  margin: 0 0% 2% 0%;
  /* min-height:100px; */
  background-color: #fff;
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #e6e6e6;
}
.store_part{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.store_part a{
  text-decoration: none;
  color:#333;
}
#main_store_search li:nth-child(odd) {
  margin: 0 2% 2% 0%;
  clear: both;
}
.store_icon{
  margin:5px;
  display: table-cell;
  font-weight: bold;
  width:100%;
}
.store_icon img{
  margin:3px;
  width:1.5em;
  height:1.5em;
  float:left;
}
.store_icon b{
  /* height:30px; */
  display: table-cell;
  vertical-align: middle;
  font-size:1.0em;
}
.store_name{
  margin-left:10px;
  /* margin-bottom:10px; */
  line-height:1.5;
}
.store_name p{
  font-size:15px;
}
.tokuten{
  margin-left:2%;
  float:left;
  width:58%;
}
.tokuten li{
  /* min-height:50px; */
  border-bottom:1px dotted #f7c052;
  line-height: 1.6;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
.tokuten p{
  background-color:#f7c052;
  text-align:center;
  font-size:15px;
}
#main_store_search .tokuten ul li{
  margin:0;
  padding:8px;
  width:100%;
  font-size:15px;
  line-height:1.2;
  border: 1px solid #e6e6e6;
}
.store_btn{
  clear:both;
  text-align:center;
  padding-top:15px;
}
.store_btn p{
  display:block;
  text-decoration: none;
  color:#fff;
  background-color:#333;
	}
	
.search_rtn{
  text-decoration:none;
}

.category_icon{
  float: left;
  font-weight: bold;
  font-size: 18px;
  color:#333;
}

/************ store_more ************/
#main_store_more{
  width:100%;
  background-color:#FFFAD2;
  color:#333;
}
#main_store_more img{
  float:left;
}
#store_more{
  padding-top:30px;
}
#store_more_name{
  font-size:30px;
}
#introduction{
  margin-left:2%;
  margin-bottom:10px;
  float:right;
  width:58%;
  line-height: 1.6;
}
#store_info{
  margin:20px 0 10px 0;
  background-color:#808080;
  border-radius:20px;
}
#store_info table{
  margin:30px 0 30px 10px;
  float:left;
  color:#fff;
  width:55%;
  border-collapse:collapse
}
#store_info table th{
  width:10%;
}
#store_info table td{
  width:45%;
  line-height: 1.4;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
#store_info table tr{
  border-bottom:1px #fff dashed;
}
#store_info b{
  font-size:20px;
}
#store_info a{
 color:blue;
 text-decoration:none;
}
#more_frame{
  border:0;
  float:right;
  margin:30px 20px 0 10px;
  width:40%;
  height:250px;
}
#main_store_more .tokuten{
  float:right;
}
#main_store_more .tokuten p{
  font-weight:bold;
  color:#000;
}
.store_img_margin{
  margin-bottom: 0;
}



/************ スマホ・タブレット ************/

@media screen and (max-width: 750px) {

	body{font-size: 4vw;}
	img{width: 100%; height: auto;}
	.pc{display: none;}
	.sp{display: block;}

	header{padding: 5% 0 0 0;}
	header h1{width: 45%; margin: 0 auto;}
	header h1 img{margin-bottom: 15%; width: 40%;}

  img.sp{
    width: 60%;
    margin-top: -5%;
  }

	.nav li{font-size: 4vw;}
	.nav li a{font-size: 4vw; padding: 0 1em; white-space: nowrap;}

	footer #bnr{padding: 2%; margin-bottom: 5%;}
	footer #bnr ul{display: block; width: 100%; padding: 3% 3% 0; box-sizing: border-box;}
	footer #bnr li{padding: 0; margin-bottom: 3%;}
	footer p{padding: 15% 0; font-size: 3vw;}
  footer p img{width:30%; margin-bottom: 3%;}
  footer .contact_area .ttl { width: 220px; margin: 10px auto 0; position: relative; }
  footer .contact_area p { font-size: 13px; line-height: 1.8;}
  footer .kumamoto_logo { width: 120px; margin-top: 25px;}
  footer p.copyright { font-size: 0.8em; padding: 0; }

	.sp_disp{display:inline;}
	.pc_disp{display:none;}
	
	.btn-submit{
	  margin:5% 0px;
	}
	.main{
	  width:90%;
  }
  .hero_area {
    padding-top: 165px;
    background-size: 600px;
  }
  .hero_area h1 {
    height: 24px;
    width: 100%;
  }
	/************ main_store ************/
	.list-area{
	margin-left:20px;
	font-size: 4vw;
	}
	.list-purpose {
		width:100%;
		margin-left:20px;
	}
	.list-purpose li {
		padding: 0 0 0 1px;
		box-sizing: border-box;
		/*width: 16.6%;*/
		float: left;
		margin: 0 0 15px 0;
		font-size: 100%;
/*	}
	.list-purpose li{ */
		width: 33%;
    min-width: 150px; /* Add 20210204 商品券利⽤可能店舗の対応 : 地域をDBより取得するように変更 */
	}
	.list-purpose input{
	}
	.list-purpose li input:checked + label:before {
		background-position: left bottom;
	}
	.list-purpose li.list04, .list07, .list010, .list13{
		clear:both;
	}
	/************ main_store_search ************/
	#main_store_search li{
	  float: left;
	  width: 100%;
	  background-color: #fff;
	  box-sizing: border-box;
	  padding: 15px;
	  border: 1px solid #e6e6e6;
	  margin: 0 2% 2% 0%;
	  clear: both;
	}
	#main_store_search li img{
	  max-height:100%;
	}
	.tokuten{
	  margin-left:0;
	  margin-top:10px;
	  float:left;
	  width:100%;
	}
	.tokuten p{
	  background-color:#f7c052;
	  text-align:center;
	}

	/************ store_more ************/
	#store_more_name{
	  font-size:130%;
	}
	#explanation{
		width:100%;
	}
	#store_info table{
	  margin:0 auto;
	  padding:19.5px;
	  text-align:left;
	}
	#more_frame{
	  margin:0 auto;
	  margin:5%;
	  float:left;
	  width:90%;
	  height:250px;
	}
	#store_info table th{
	  width:30%;
	}
	#introduction{
    width:100%;
    line-height: 1.6;
	}

	#store_info table{
	  width:90%;
	  margin-top:5%;
	  margin-left:5%;
	}
	#store_info table th{
	  width:15%;
  }
  
  .category_icon{
    font-size:4vw;
  }
  .category_icon img{
    width:5vw;
    height:5vw;
  }
  .store_img_margin{
    margin-bottom: 3vw;
  }
  
}