@charset "utf-8";

/***************************************************
PC用および共通設定 
***************************************************/

*{
	margin:0;
	padding:0;
	border:none;
	color:#333333;
	font-size:100%;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	line-height:1.0;
}
html,body,div,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,ul,ol,li,dl,dt,dd,
table,th,td,form,fieldset{
	margin:0;
	padding:0;
}
a:link {color:#333333;}
a:visited {color:#333333;}
a:hover{
	text-decoration: none;
	color:#000;
}

ul li {
	list-style-type: none;
}
body {
	text-align:center;
	margin:0;
	padding:0;
	line-height:1.4;
    background: #eeece8;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    width: 100%;
    font-family: "Noto Sans JP";
}
header{
	width:400px;
	margin:1rem auto 3rem;
	}
header p{
	text-align:left;
	}
header p.title_site{
	font-size:0.9rem;
	}
header p.title_url{
	font-size:2rem;
	}

	
h1{ 
	font-size:120%;
	width:400px;
	margin:auto;
	border-bottom:1px solid #000;
	padding-bottom:1rem;
	margin-bottom:1rem;
	}
h2{
	font-size:100%;
	width:400px;
	margin:auto;
	border-bottom:1px solid #ccc;
	padding-bottom:0.5rem;
	margin-top:2rem;
	margin-bottom:1rem;
	}	
table {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	width:400px;
	margin:1rem auto;
	}
table th{
	border-top: 1px solid #CCC;
	display:block;
	width:96%;
	background: #f8f8f7;
	padding:2%;
	}
table td{
	border-bottom: 1px solid #CCC;
	display:block;
	width:96%;
	background: #f1f1f0;
	padding:2%;
	line-height:1.6;
}
p.rating{
	font-weight:bold;
	font-size:120%;
}	
p.comment{
	display:block;
	padding:10px;
	width:380px;
	margin:1rem auto;
	background: #f8f8f7;
	line-height:1.6;
}

.slider { position: relative; max-width: 400px; margin: 20px auto; }
.slide { display: none; }
.slide.active { display: block; }
.slide img { width: 100%; border-radius: 8px; }
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 8px;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

footer{
	margin:2rem 0;
	}

/***************************************************
スマートフォン用 ～768px
***************************************************/
@media screen and (max-width: 768px) {
h1,h2,table{ 
	width:96%;
}
header{
	width:96%;
	}
header p.title_url{
	font-size:1.6rem;
	}
p.comment{ 
	width:92%;
	padding:2%;
	}
.slider{
	width:94%;
	}