/**
 * @author sara
 * Copyright (c) 2018 sara Co., Ltd.
 * All rights reserved.
 */
 
/* リセット
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body , html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 62.5%;
}
body{
	margin:0;
	padding:0;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;;
}

h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
ul{list-style: none}
.clearfix:after	{
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

img{
	max-width: 100%;
	height: auto;
	display:block;
}
img[src$=".svg"] {
	width: 100%;
}

a:link { color: #000;text-decoration: none; }
a:visited { color: #000;text-decoration: none; }
a:hover { color: #000; text-decoration: none;}
a:active { color: #000; text-decoration: none;}

input[type="checkbox"]{display: none}


.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .45);
	overflow: hidden;
	overflow-y: auto; /* scrollにはしないことでスクロールの必要がないときはスクロールバーを表示させない */
	-webkit-overflow-scrolling: touch;
}


/* body
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#container {
	width: 100%;
	height: 100%;
}


#panel_body .active{
	display: block;
}
.panel{
	position: absolute;
	right:0;
	top:30px;
	padding-bottom: 30px;
	z-index: 1000;
	width:265px;
	height: 100%;
	max-height: calc(90vh - 30px);
	display: none;
	background-color:rgba(255,255,255,0.8);
	overflow-y: hidden;
}

.panel .panel_close{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 20px 10px 0;
}
.panel .panel_close p{
	font-size: 1.6rem;
	font-weight: bold;
}
.panel .panel_close div{
	width:25px;
	height:25px;
	cursor: pointer;
}

.panel .panel_scroll{
	overflow-y: auto;
	max-height:100%;
	padding: 0 0 0 10px;
}

::-webkit-scrollbar{
	width: 10px;
}
::-webkit-scrollbar-track{
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: inset 0 0 2px #777;
}
::-webkit-scrollbar-thumb{
	background: #ccc;
	border-radius: 10px;
	box-shadow: none;
}

.panel .panel_scroll p{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 10px;
}
.panel .panel_btns{
	margin-bottom: 40px;
	padding-bottom: 20px;
}
.panel ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	align-content: flex-start;
}
.panel ul li {
	padding: 2px;
	box-sizing: border-box;
	font-size: 1.3rem;
	text-align: center;
	margin: 0 0 10px 0;
	cursor: pointer;
}
.panel ul li.active {
	padding: 0;
	border: 2px solid orange;
}

.hs_txt{
	border: 1px solid red;
}