@charset "UTF-8";



/*  説明用　*/

 #details {
	position: fixed;
	width:500px;
	right: -530px;
	top:0;
	background-color: #fff;
	border: 1px solid #eee;
	z-index: 100;
	height: 100%;
	padding:0px;
	box-shadow: 0 0 8px 4px rgba(0,0,0,0.3);
 }
 #details-h2 {
	margin:0;
	height:100%;
 }
 #details-h2 iframe {
	margin:0;
	height:100%;
	width:100%;
 }

 .icon-help,
 .icon-help-on {
	padding:0;
	margin: 0 4px;
 }

.icon-help::before{
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('../img/common_img/common-icon-help.svg');
	background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
	background-repeat: no-repeat;
	background-position: left 0 bottom 0;
	margin: 0;
	margin-bottom: 4px;
	padding: 0;
	vertical-align: middle;
}

a.icon-help:hover::before{
	background-image: url('../img/common_img/common-icon-help-hover.svg');
	background-color:rgba(255,255,255,0);
	background-blend-mode:lighten;
}
a.icon-help-on::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('../img/common_img/common-icon-help-on.svg');
	background-color:rgba(255,255,255,0);
background-blend-mode:lighten;
	background-repeat: no-repeat;
	background-position: left 0 bottom 0;
	margin: 0;
	margin-bottom: 4px;
	padding: 0;
	vertical-align: middle;
}

.icon-help span,
.icon-help-on span {
	display: none;
}





.icon-help-close {
	display: block;
	width:100%;
	padding:10px 10px 4px;
	background-color: #333;
	color: #fff;
	text-align: center;
	cursor: pointer;
   }
.icon-help-close:hover {
	background-color: #666;
	color: #fff;
   
   }

.batsu {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0 10px 4px;
  vertical-align: middle;
}
.batsu::before, .batsu::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 20px; /* 棒の高さ */
  background-color: #fff;
}
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}




/*-------------------------- レスポンシブ用CSS ここから ----------------------*/
@media screen and (max-width:640px) {
/* ↓ここに個別のスマホ用スタイルを指定 */



/* 詳細説明 */
#details {
 position: fixed;
 width:320px;
 right: -320px;
 top:0;
 background-color: #fff;
 border: 1px solid #eee;
 z-index: 100;
 height: 100%;
 padding:0px;
 box-shadow: 0 0 8px 4px rgba(0,0,0,0.3);
}


/* ↑ここまでに個別のスマホ用スタイルを指定 */
}
/*-------------------------- レスポンシブ用CSS ここまで ----------------------*/