@charset "utf-8";

.modal{
  display: none;
  width: 100%; height: 100vh;
  position: fixed;
  top: 0px;
}
.modalBG{
  width: 100%; height: 100vh;
  background: rgba(0,0,0,0.5);
  position: absolute;
}
.modal p{
  text-align: left;
  font-weight: bold;
}
.modal a:link,
.modal a:visited,
.modal a:active{
	color: #8484ff;
	text-decoration: none;
}
.modal a:hover{
	color: #ff8484;
	text-decoration: none;
}
.modal .btnClose{
	width: 30px; height: 30px;
	background: url(../kuku/img/entry/btnImg.png) no-repeat -48px 0px;
	position: absolute; top: 15px; right: 15px;
  margin: 0;
}
.modal .btnClose:hover{
	cursor: pointer;
	opacity: 0.8;
}

/* alertArea */
#alertArea{
	width: 620px; min-height: 180px;
	background: #e5ccff url(../kuku/img/entry/kuckAlert.png) no-repeat bottom 20px right 20px;
  border-radius: 10px;
  padding: 30px 24px;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	position: relative;
  box-sizing: border-box;
}
#alertArea .alertHead{
  min-height: 40px;
  margin-bottom: 20px;
  background: url(../kuku/img/entry/iconAlert.png) no-repeat;
}
#alertArea p.head{
  font-size: 16px;
  padding: 5px 30px 0px 52px;
}
#alertArea p.detail{
  line-height: 2.2;
  padding-left: 40px;
}
@media(max-width:699px){/* for mobile */
  #alertArea p.detail{
    padding-left: 1em;
  }
}

/* helpArea */
#helpArea,
#searchArea{
	width: 620px;
	background: #cce5ff;
	border-radius: 10px;
	padding: 30px 24px;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);	
	position: relative;
  box-sizing: border-box;
}
@media(max-width:699px){/* for mobile */
  #alertArea,
  #helpArea,
  #searchArea{
    width: 90%;
    padding: 20px;
  }
}
#helpArea ul.list li{
	margin-bottom: 12px;
}
#helpArea ul.list li.last{
	margin-bottom: 30px;
}
#helpArea ul.list li:not(:first-child){
	margin-left: 1em;
}

/* searchArea */
#searchArea p.head{
  margin: 0px 30px 20px 0px;
}
#searchArea ul{
  margin: 0px 1em;
}
#searchArea ul.flexbox{
  justify-content: flex-start;
}
#searchArea ul.flexbox li{
  margin: 0px 10px 20px;
}
#searchArea ul.flexbox li:first-child{
  margin: 0px 0px 10px 0px;
}
#searchArea ul li.current p{
  color: #ff7f7f;
}
#searchArea .btn.point{
  width: 60px; height: 36px;
  margin: 20px auto 0px;
}
#searchArea .btn.point p{
  font-size: 14px;
  text-align: center;
  padding: 4px 0px;
}

/* hMenuArea */
#hMenuArea{
	width: 40%; height: 100vh;
	background: #e5f2ff;
	top: 0%; left: 60%;
	position: relative;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
  color: #6b3f31;
  overflow: scroll;
}
#hMenuArea.kuku{
  background: #ffe5ff;
}
#hMenuArea.shura{
  background: #f2e5ff;
}
@media(max-width:799px){/* for mobile */
  #hMenuArea{
    width: 50%;
    left: 50%;
  }
}
@media(max-width:599px){/* for mobile */
  #hMenuArea{
    font-size: 12px;
  }
}
#hMenuArea li.head{
  background: #cce5ff;
}
#hMenuArea li:nth-child(even){
  background: #f9fcff;
}
#hMenuArea.kuku li.head{
  background: #ffd6ff;
}
#hMenuArea.kuku li:nth-child(even){
  background: #fff9ff;
}
#hMenuArea.shura li.head{
  background: #e5ccff;
}
#hMenuArea.shura li:nth-child(even){
  background: #f9f4ff;
}
#hMenuArea p{
  padding: 1.2em 1em;
  text-align: center;
}
#hMenuArea li.head p{
  font-size: 18px;
  text-shadow: 1px 1px 0px #ffffff;
}
@media(max-width:599px){/* for mobile */
  #hMenuArea li.head p{
    font-size: 14px;
  }
}
#hMenuArea a:link,
#hMenuArea a:visited,
#hMenuArea a:active{
	color: #6b3f31;
	text-decoration: none;
}
#hMenuArea a:hover{
	color: #ff7f7f;
	text-decoration: none;
}
#hMenuArea .btnClose{
	width: 30px; height: 30px;
	background: url(../img/common/hamMenuClose.png) no-repeat 0px 0px;
	position: absolute; top: 5px; right: 5px;
  margin: 0;
}
#hMenuArea.kuku .btnClose{background-position: -30px 0px;}
#hMenuArea.shura .btnClose{background-position: -60px 0px;}
#hMenuArea p.narrow{/* IE8- padding */
  padding: 0.5em 1em;
}