@charset "utf-8";

/*-------------------------------------------
common
-------------------------------------------*/
#wrapper{
	box-sizing: border-box;
	min-height: 100vh;
	padding-bottom: 20px;
}
#wrapper.wFooter{padding-bottom: 54px;}
#wrapper.wFootFix{padding-bottom: 58px;}
main{
	display: block;
}
.contsIn{
	width: 92%;
	margin-right: auto;
	margin-left: auto;
}
.fullScreen,
.fullScreen #wrapper{
	min-height: 100vh;
}
.fullScreen #wrapper{
	padding-bottom: 0;
}
.heightMiddle{
	height: 100vh;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.sectionWrap{
	margin-bottom: 25px;
}
/*-------------------------------------------
ttl
-------------------------------------------*/
.ttlMain{
	font-weight: bold;
	font-size: 18px;
  line-height: 1.4;
	text-align: center;
}
.ttlMain.sml{font-size: 16px;}
.ttlbgBeige{
	background-color: #f5f0ea;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.3;
	padding: 8px 4%;
}
.ttlBold{
	font-weight: bold;
	font-size: 16px;
	line-height: 1.3;
	margin-bottom: 5px;
}
/*-------------------------------------------
btn
-------------------------------------------*/
.btnOval{
	display: block;
	padding: 14px 10px;
	border-radius: 30px;
	color: #fff;
	text-align: center;
	background-color: #fb6895;
	font-weight: bold;
	max-width: 320px;
	margin: auto;
}
.btnOval.bdrPk{
	color: #fb6895;
	background-color: #fff;
	padding: 12px 8px;
	border: 2px solid #fb6895;
}
.btnOval.btnQr:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	background: url(/assets/common/img/icon_qr.png) no-repeat;
	background-size: contain;
	margin: -2px 15px 0 0;
}
.btnOval.camera,
.btnOval.photo{
	padding-left: 45px;
	background-repeat: no-repeat;
	background-size: 25px auto;
	background-position: left 15px center;
}
.btnOval.camera{
	background-image: url(/assets/common/img/icon_camera_wh.png);
}
.btnOval.photo{
	background-image: url(/assets/common/img/icon_photo_wh.png);
}
.btnM{
	width: 200px;
	margin: auto;
}
.btnBack,
.btnNext{
	position: relative;
}
.btnBack:before,
.btnNext:before {
	position: absolute;
	top: 50%;
	margin-top: -7px;
	content: "";
	width: 12px;
	height: 12px;
	border-top: 3px solid #333;
	border-right: 3px solid #333;
}
.btnBack:before {
	left: 10px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.btnNext:before {
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.btnWrap{
	padding: 20px 4% 0;
	max-width: 600px;
  margin: auto;
}
.bgBox .btnWrap,
.footFix .btnWrap{
	padding: 0;
}
.btnWrap.clm2 .btn{
	float: left;
	width: 48%;
}
.btnWrap.clm2 .btn:last-child{
	float: right;
}
.footFix{
	background-color: #efefef;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
}
.footFix .btnOval{
	width: 160px;
	padding: 8px;
}

.linkArrow{
	padding-right: 15px;
	position: relative;
}
.linkArrow:after {
	position: absolute;
	top: 50%;
	margin-top: -5px;
	right: 0;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #015ed0;
	border-right: 1px solid #015ed0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.linkList .list{
	border-bottom: 1px dotted #ddd;
	padding: 0 4%;
}
.linkBtn{
	padding: 14px 20px 14px 0px;
  display: block;
	position: relative;
	color: #333;
}
.linkBtn:after {
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: 5px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btnEdit{
	background-image: url(/assets/common/img/icon_edit.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 18px;
	height: 18px;
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -9px;
	right: 0;
}
.btnAdd{
	background-color: #ccc;
	padding: 10px;
	border-radius: 20px!important;
}
.btnAdd img {
	width: 20px!important;
	height: 20px!important;
  object-fit: contain;
}
.telLink{
	color: #015ed0;
	display: inline-block;
}
.telLink:before{
	content: "";
	width: 14px;
	height: 14px;
	background: url(/assets/common/img/icon_call_blue.png) no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
	margin: -2px 5px 0 0;
}
/*-------------------------------------------
accordion
-------------------------------------------*/
.accBtn{
	padding-right: 20px;
	display: block;
	position: relative;
	color: #333;
}
.accBtn:after{
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: 5px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.accBtn.op:after{
	margin-top: -4px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.accIn{display: none;}

/*-------------------------------------------
parts
-------------------------------------------*/
.iconNum{
	width: 20px;
	line-height: 18px;
	border-radius: 10px;
	padding: 2px 0 0;
	color: #fff;
	background-color: #fb6895;
  text-align: center;
}
.iconNum.over{
	width: 34px;
	padding: 2px 4px 0;
}
.iconNum.over:after{
	content: "+";
	font-size: 11px;
	display: inline-block;
	vertical-align: middle;
	margin: -6px 0 0 2px;
}
.iconMember{
	position: absolute;
	bottom: 0px;
	right: -10px;
}
.iconMember:after{
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background: url(/assets/common/img/icon_ai_group.png);
	background-size: contain;
}
.profilePic{
	width: 120px;
	height: 120px;
	border-radius: 20px;
	border: 2px solid #bfae9a;
	overflow: hidden;
	background-color: #f2f2f2;
	margin: 20px auto;
}
.profilePic.group{
	border-radius: 20px;
}
.profilePic img{
	width: 120px;
	height: 120px;
	object-fit: cover;
}
.phRegister{
	width: 120px;
	position: relative;
	margin: auto;
}
.phRegister .btn {
	width: 35px;
	height: 35px;
	position: absolute;
	bottom: 0;
	right: -10px;
}
.phRegister .group + .btn {
	right: -10px;
}
.phRegister .btn .btnCamera{
	width: 35px;
	height: 35px;
	display: block;
	background: url(/assets/common/img/icon_camera.png) no-repeat center center;
	background-size: contain;
}
.annotation{
	font-size: 13px;
	color: #555;
	margin-top: 10px;
}
.iei{
	width: 80%;
	max-width: 600px;
	height: 50vw;
	margin: auto;
	max-height: 350px;
}
.iei.notSet{background-color: #eee;}
.iei img {
	width: 100%;
	height: 50vw;
	object-fit: contain;
	max-height: 350px;
}
.mapArea{
	width: 100%;
	padding-bottom: 50%;
	background-color: #ddd;
	margin-top: 10px;
	position: relative;
	overflow: hidden;
}
.mapArea .mapIn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.leadTxt{
	margin: 15px 0 10px;
}
.txtRed{color: #e9094d;}
.txtS{font-size: 14px;}

::-webkit-scrollbar{
  width: 8px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 2px #aaa; 
}
::-webkit-scrollbar-thumb{
  background: #ddd;
  border-radius: 8px;
  box-shadow: none;
}
.memberWrap{
	font-size:0;
  margin: 5px auto 0;
	padding-left: 25px;
	background: url(/assets/common/img/icon_person.png) no-repeat left center;
	background-size: 16px auto;
}
.memberWrap .memberName,
.memberWrap .memberNum{
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
}
.memberWrap .memberName{
	max-width: calc(100% - 40px);
	margin-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
  white-space: nowrap;
}
.memberWrap .memberName .name:after{
	content: "、";
}
.memberWrap .memberName .name:last-child:after{
	display: none;
}
.indent1{
	padding-left: 1em;
	text-indent: -1em;
}
/*-------------------------------------------
list
-------------------------------------------*/
.imgLList .list{
	border-bottom: 1px dotted #ddd;
	margin: 0 4%;
}
.imgLList .list.noLink{
	font-size: 0;
	padding: 10px 20px 10px 0px;
	position: relative;
}
.imgLList .btn{
	font-size: 0;
	color: #333;
	padding: 10px 20px 10px 0px;
	display: block;
	position: relative;
}
.imgLList .btn:after {
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: 5px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.imgLList .imgBox,
.imgLList .txtBox{
	display: inline-block;
	vertical-align: top;
}
.algnM .imgBox,
.algnM .txtBox,
.imgLList.withCheck .imgBox,
.imgLList.withCheck .txtBox{
	display: inline-block;
	vertical-align: middle;
}
.imgLList .imgBox{
	overflow: hidden;
}
.imgLList .imgBox,
.imgLList .imgBox img{
	width: 40px;
	height: 40px;
	border-radius: 4px;
}
.imgLList .imgBox img{
	object-fit: cover;
}
.imgLList .txtBox{
	width: calc(100% - 40px);
	padding: 0 0 0 15px;
	font-size: 16px;
}
.imgLList .txtBox .title{font-weight: bold;}

.imgLList.withCheck .imgBox,
.imgLList.withCheck .imgBox img,
.imgLList.icoCircle .imgBox,
.imgLList.icoCircle .imgBox img{
	border-radius: 8px;
}
.imgLList .nameWrap{
	width: 100%;
}
.imgLList .nameWrap .name,
.imgLList .nameWrap .group{
	vertical-align: middle;
	line-height: 1.2;
}
.imgLList .nameWrap .name{
	display: inline;
	font-weight: bold;
	padding-right: 5px;
}
.imgLList .nameWrap .group{
	display: inline-block;
	font-size: 14px;
	color: #666;
}
.imgLList .when{
	position: absolute;
	top: 12px;
	right: 0;
	color: #666;
	font-size: 12px;
}

.imgLList.withCheck .btn input,
.imgLList.withCheck .btn:after{display:none;}
.imgLList.withCheck .btn{
	display: inline-block;
	vertical-align: middle;
	padding: 10px 10px 10px 30px;
	width: 100%;
}
.imgLList.withCheck .txtBox:after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -13px;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-image: url(/assets/common/img/cb_circle_off.png);
}
.imgLList.withCheck input:checked + .txtBox:after{
	background-image: url(/assets/common/img/cb_circle_on.png);
}
.imgLList.withCheck.radio .txtBox:after{
	background-image: url(/assets/common/img/rb_off.png);
}
.imgLList.withCheck.radio input:checked + .txtBox:after{
	background-image: url(/assets/common/img/rb_on.png);
}
.imgLList .list .iconMember{
	bottom: 10px;
	left: 30px;
	right: auto;
}
.imgLList .list .iconMember:after{
	width: 15px;
	height: 15px;
}
.imgLList.withCheck .list .iconMember {
  left: 58px;
}
/*-------------------------------------------
bg
-------------------------------------------*/
.bgBox{padding: 15px 4%}
.bgGray{background-color:#ccc;}
.bgLgray{background-color:#f2f2f2;}
.bgBeige{background-color: #f5f0ea;}
	
/*-------------------------------------------
form
-------------------------------------------*/
.formWrap .formBox{
	border-bottom: 1px solid #f5f0ea;
}
.formWrap .bdr0{
	border: 0;
}
.formWrap .ttlbgBeige{
	position: relative;
}
.formWrap .ttlbgBeige .icon{
	font-size: 12px;
	display: block;
	position: absolute;
	right: 4%;
	top: 8px;
	color: #fff;
	border-radius: 3px;
	padding: 3px 10px 2px;
}
.formWrap .ttlbgBeige .required{background-color: #fb6895;}
.formWrap .ttlbgBeige .optional{background-color: #ccc;}
.formWrap .inputBox{
	border: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	padding: 12px 0;
	font-size: 16px;
	width: 100%;
	outline: none;
}
.formWrap .cont{
	margin: 0 4%;
}
.formWrap .cont .btnModal:not(.iconNum):not(.btnOval){
	padding: 12px 0;
	display: block;
	color: #333;
}
.formWrap .cont.withPd{
	margin: 0 4%;
	padding: 12px 0;
}
.formWrap .cont.withPd + .cont.withPd{
	border-top: 1px dotted #ddd;
}
.formWrap .cont .annotation{
	margin-bottom: 10px;
}
.formWrap .cont .checkList,
.formWrap .cont .radioList{
	margin: 12px 0;
}
.formWrap .cate{
	border-bottom: 1px dotted #ddd;
}
.formWrap .cateTtl{
	margin: 12px 0 0;
}
.formWrap .zipWrap{
	font-size: 0;
}
.formWrap .zipInput,
.formWrap .btnZip{
	display: inline-block;
	vertical-align: middle;
}
.formWrap .zipInput{
	width: calc(100% - 110px);
}
.formWrap .btnZip{
	width: 100px;
	margin-left: 10px;
}
.formWrap .otherInput{
	margin:5px 0 0 35px;
}
.formWrap .otherInput .inputBox{
	border-bottom: 1px dotted #ddd;
  padding: 3px 5px;
}
.formWrap .btnZip .btnOval{
	border-radius: 4px;
	padding: 5px;
	font-size: 14px;
	border: 1px solid #fb6895;
}
.formWrap .dispTable{
	display: table;
	width: 100%;
	table-layout: fixed;
}
.formWrap .dispTable .cateTtl,
.formWrap .dispTable .zipWrap,
.formWrap .dispTable .slctBox,
.formWrap .dispTable .cell{
	display: table-cell;
	vertical-align: middle;
}
.formWrap .dispTable .slctBox .slctIn{
	padding-top: 4px;
	padding-bottom: 4px;
}
.formWrap .dispTable .cateTtl{
	width: 5.5em;
	height: 46px;
	line-height: 1.2;
}
.commentArea textarea{
	width: 100%;
	outline: none;
	padding: 10px;
}
.checkLabel input,
.radioLabel input{
    display: none;
}
.checkList li,
.radioList li{
	margin-bottom: 7px;
}
.check + .checkBox,
.radio + .radioBox{
	display: inline-block;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
	padding: 2px 0 2px 35px;
	font-size: 16px;
}
.check + .checkBox:after,
.radio + .radioBox:after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -13px;
	width: 24px;
	height: 24px;
	background-size: contain;
}
.check + .checkBox:after{
	background-image: url(/assets/common/img/cb_off.png);
}
.check:checked + .checkBox:after{
	background-image: url(/assets/common/img/cb_on.png);
}
.radio + .radioBox:after{
	background-image: url(/assets/common/img/rb_off.png);
}
.radio:checked + .radioBox:after{
	background-image: url(/assets/common/img/rb_on.png);
}

.switchWrap .ttl{float: left;line-height: 1.5;}
.switchWrap .switchBtn input{display: none;}
.switchWrap .switchBtn{
	width: 40px;
	display: block;
	float: right;
}
.switchWrap .switchBtn .switch{
	width: 40px;
	height: 24px;
	display: block;
	border-radius: 15px;
	position: relative;
	border: 1px solid #aaa;
	background-color: #aaa;
}
.switchWrap .switchBtn .switch:after{
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #fff;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: all 0.5s;
}
.switchWrap .switchBtn input:checked + .switch{
	border: 1px solid #fb6895;
	background-color: #fb6895;
}
.switchWrap .switchBtn input:checked + .switch:after{
	background-color: #fff;
	left: auto;
	right: 2px;
}
.slctBox{
	position: relative;
}
.slctBox:after{
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -3px;
	right: 5px;
	pointer-events: none;
	border: 5px solid;
	border-top: 7px solid;
	border-color: #aaa transparent transparent transparent;
}
.slctBox .slctIn{
	border: 1px solid #aaa;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	padding: 8px 15px 8px 8px;
	outline: none;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}
select::-ms-expand {
    display: none;
}
.searchBox{
	margin: 15px 4%;
	border-radius: 20px;
	overflow: hidden;
	padding-left: 24px;
	background: #efefef url(/assets/common/img/icon_search.png) no-repeat left 10px center;
	background-size: 14px;
}
.searchBox .inputBox{
	padding: 4px 10px;
	border-radius: 20px;
	background-color: #efefef;
}
/*-------------------------------------------
eventSwitch
-------------------------------------------*/
.eventSwitch + main{
	padding-top: 80px;
}
.eventSwitch{
	position: fixed;
	top: 46px;
	left: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
	text-align: center;
	z-index: 99;
}
.eventSwitch a{
	display: table-cell;
	padding: 5px 10px 4px;
	color: #333;
}
.eventSwitch a.act{
	color: #fb6895;
	font-weight: bold;
	border-bottom: 3px solid #fb6895;
}
/*-------------------------------------------
modal
-------------------------------------------*/
.modalWrap{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.modalWrap .modalIn{
	width: 90%;
	background-color: #fff;
	border-radius: 10px;
	z-index: 999;
	position: relative;
	margin-top: -35px;
	max-width: 600px;
}
.modalWrap .modalCont{
	margin: 15px 4%;
	max-height: 90vw;
	overflow: auto;
}
.modalWrap .modalCont + .btnWrap{
	padding: 0 0 15px;
}
.modalWrap .modalIn.pd15{
	padding: 15px;
}
.modalWrap .modalCont .imgLList .list{
	margin: 0;
}
.modalWrap .modalTtl{
	background-color: #fb6895;
	color: #fff;
	padding: 8px 10px;
	font-weight: bold;
	font-size: 16px;
}
.modalWrap .modalTtl.top{
	border-radius: 10px 10px 0 0;
	text-align: center;
}
.modalWrap .modalClose{
	position: absolute;
	top: -35px;
	right: 0;
	font-size: 0;
	width: 30px;
	height: 30px;
}
.modalWrap .modalClose::before,
.modalWrap .modalClose::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 30px;
  background: #fff;
}
.modalWrap .modalClose::before {
  transform: rotate(-45deg);
}
.modalWrap .modalClose::after {
  transform: rotate(45deg);
}
/*-------------------------------------------
header
-------------------------------------------*/
#header{
	background-color: #fcf7f1;
	padding: 10px 4%;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}
#header + main,
#headNav + main{
	padding-top: 46px;
}
#header .ttlMain,
#header .btnL,
#header .btnR{
	display: table-cell;
}
#header .ttlMain{
	float: left;
	width: calc(100% - 52px);
	padding: 0 10px 0 10px;
}
#header .ttlMain.sml{padding: 4px 5px 0;}
#header .ttlMain .ttlIn{
	display: inline-block;
	max-width: calc(100% - 15px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
#header .ttlMain.ttlCenter{
	display: block;
	float: none;
	margin: auto;
	width: 100%;
}
#header .ttlMain.slctBox:after{
	display: inline-block;
	position: static;
	vertical-align: middle;
	margin: 4px 0 0 5px;
}
#header .btnL{
	float: left;
	width: 26px;
	position: relative;
}
#header .btnR{
	float: right;
	width:26px;
}
#header .btnL .btn,
#header .btnR .btn{
	display: block;
	width:26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#header .btnL .btnMenu{background-image: url(/assets/common/img/icon_menu.png);}
/*#header .btnR .btnTile{background-image: url(/assets/common/img/icon_tile.png);}
#header .btnR .btnCalendar{background-image: url(/assets/common/img/icon_calendar.png);}*/
.btnHatena{background-image: url(/assets/common/img/icon_hatena.png);}
#header .edit{
	width: 34px;
	margin-right: -8px;
}
#header .edit .btn{
	color:#fb6895;
	width: 34px;
	padding: 3px 0;
}


#header .btnL .noticeNum{
	display: block;
	position: absolute;
	top: -5px;
	right: -10px;
	width: 18px;
	line-height: 16px;
	font-size: 11px;
	pointer-events: none;
}

#header .btnL .noticeNum.over{
	width: 28px;
	right: -15px;
	padding: 2px 2px 0;
}
#header .btnL .noticeNum.over:after{
	font-size: 10px;
	margin-left: 1px;
}
/*-------------------------------------------
header menu
-------------------------------------------*/
.menuOp,
.modalOp{
	position: fixed;
	width: 100%;
}
.menuOp .headerBg,
.modalOp .modalBg{
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	background-color: rgba(0,0,0,0.60);
	z-index: 100;
	cursor: pointer;
}
#headNav{
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: -270px;
	transition: left 0.3s;
	background-color: #fff;
	overflow: auto;
	z-index: 999;
	width: 270px;
}
.menuOp #headNav{
	left: 0;
	transition: left 0.3s;
}
#headNav .profileWrap .btn{
	display: table;
	width: 100%;
	padding: 4px 10px;
	color: #333;
	position: relative;
	float: left;
}
#headNav .profileWrap .btn:after{
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: 15px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#headNav .profilePicWrap,
#headNav .name{
	display: table-cell;
	vertical-align: middle;
}
#headNav .profilePicWrap{
	width: 38px;
}
#headNav .profilePic,
#headNav .profilePic img{
	width: 38px;
	height: 38px;
	border-radius: 8px;
	margin: 0;
}
#headNav .name{
	padding: 0 18px 0 8px;
	font-weight: bold;
}
#headNav .navWrap{
	overflow: auto;
}
#headNav .navList{
	padding: 10px 15px;
}
#headNav .navList.bg{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
#headNav .navList .list{
	position: relative;
}
#headNav .navList .btn{
	padding: 12px 0;
	display: block;
	color: #333;
}
#headNav .navList .list .iconNum{
	font-size: 12px;
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 0;
}


/*-------------------------------------------
helpBox
-------------------------------------------*/
.helpBox{
	position: absolute;
	background-color: #efefef;
	border: 2px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	top: 52px;
	left: 3%;
	width: 94%;
	display: none;
}
.helpBox:before,
.helpBox:after{
  content: "";
  position: absolute;
}
.helpBox:before {
  top: -16px;
  right: 10px;
  border: 6px solid transparent;
  border-bottom: 10px solid #efefef;
  z-index: 2;
}
.helpBox:after {
  top: -24px;
  right: 6px;
  border: 10px solid transparent;
  border-bottom: 14px solid #ddd;
  z-index: 1;
}


/*-------------------------------------------
footer
-------------------------------------------*/
#footer{
	background-color: #3e352f;
	position: fixed;
	width: 100%;
	bottom: 0;
  left: 0;
	z-index: 99;
	padding: 4px 0;
}
#footer .footerNav{
	font-size: 0;
}
#footer .footerNav .nav{
	display: inline-block;
	vertical-align: bottom;
	width: 19%;
	text-align: center;
	position: relative;
}
#footer .footerNav .nav.act:after{
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #efa6b5;
}
#footer .footerNav .comment,
#footer .footerNav .system{
	width: 21%;
}
#footer .footerNav .comment{
	border-right:1px solid #7e7a77;
}
#footer .footerNav .nav .btn{
	display: block;
	color: #fff;
	font-size: 2.8vw;
	padding: 32px 3px 0;
	background-repeat: no-repeat;
	background-size: 22px auto;
	background-position: top 4px center;
}
#footer .footerNav .nav.act .btn{
	color: #efa6b5;
}
#footer .footerNav .calendar .btn{background-image: url(/assets/common/img/icon_calendar_wh.png);}
#footer .footerNav .tile .btn{background-image: url(/assets/common/img/icon_tile_wh.png);}
#footer .footerNav .comment .btn{background-image: url(/assets/common/img/icon_comment_wh.png);}
#footer .footerNav .ceremony .btn{background-image: url(/assets/common/img/icon_ceremony_wh.png);}
#footer .footerNav .calendar.act .btn{background-image: url(/assets/common/img/icon_calendar_pk.png);}
#footer .footerNav .tile.act .btn{background-image: url(/assets/common/img/icon_tile_pk.png);}
#footer .footerNav .comment.act .btn{background-image: url(/assets/common/img/icon_comment_pk.png);}
#footer .footerNav .ceremony.act .btn{background-image: url(/assets/common/img/icon_ceremony_pk.png);}
#footer .footerNav .add .btn{
	background-image: url(/assets/common/img/icon_plus_circle_pk.png);
	background-size: 25px auto;
	background-position: top 2px center;
}
@media screen and (min-width: 380px) {
	#footer .footerNav .nav .btn{
		font-size: 12px;
	}
}
/*-------------------------------------------
eventIcon theme
-------------------------------------------*/
.eventIcon{
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-repeat: no-repeat;
	background-size: 25px auto;
	background-position: center;
}
.eventIcon.anniversary,.anniversary .eventIcon{
	background-color: #c19d48;
	background-image: url(/assets/common/img/icon_ceremony_wh.png);
	background-size: 16px auto;
}
.eventIcon.birthday,.birthday .eventIcon,
.eventIcon.marriage,.marriage .eventIcon,
.eventIcon.funeral,.funeral .eventIcon{background-color: #ef4d4d;}
.eventIcon.shine,.shine .eventIcon,
.eventIcon.flower,.flower .eventIcon,
.eventIcon.smile,.smile .eventIcon{	background-color: #ef8b30;}
.eventIcon.travel,.travel .eventIcon,
.eventIcon.hospital,.hospital .eventIcon,
.eventIcon.school,.school .eventIcon{	background-color: #fdcb35;}
.eventIcon.eat,.eat .eventIcon,
.eventIcon.study,.study .eventIcon,
.eventIcon.cafe,.cafe .eventIcon{background-color: #7fd65b;}
.eventIcon.shopping,.shopping .eventIcon,
.eventIcon.movie,.movie .eventIcon,
.eventIcon.salon,.salon .eventIcon{background-color: #72d0ed;}


.eventIcon.birthday,.birthday .eventIcon{background-image: url(/assets/common/img/icon_birthday_wh.png);}
.eventIcon.shine,.shine .eventIcon{background-image: url(/assets/common/img/icon_shine_wh.png);}
.eventIcon.marriage,.marriage .eventIcon{background-image: url(/assets/common/img/icon_marriage_wh.png);}
.eventIcon.funeral,.funeral .eventIcon{background-image: url(/assets/common/img/icon_funeral_wh.png);}
.eventIcon.flower,.flower .eventIcon{background-image: url(/assets/common/img/icon_flower_wh.png);}
.eventIcon.travel,.travel .eventIcon{background-image: url(/assets/common/img/icon_travel_wh.png);}
.eventIcon.smile,.smile .eventIcon{	background-image: url(/assets/common/img/icon_smile_wh.png);}
.eventIcon.eat,.eat .eventIcon{	background-image: url(/assets/common/img/icon_eat_wh.png);}
.eventIcon.hospital,.hospital .eventIcon{	background-image: url(/assets/common/img/icon_hospital_wh.png);}
.eventIcon.shopping,.shopping .eventIcon{	background-image: url(/assets/common/img/icon_shopping_wh.png);}
.eventIcon.movie,.movie .eventIcon{	background-image: url(/assets/common/img/icon_movie_wh.png);}
.eventIcon.salon,.salon .eventIcon{	background-image: url(/assets/common/img/icon_salon_wh.png);}
.eventIcon.study,.study .eventIcon{	background-image: url(/assets/common/img/icon_study_wh.png);}
.eventIcon.cafe,.cafe .eventIcon{	background-image: url(/assets/common/img/icon_cafe_wh.png);}
.eventIcon.school,.school .eventIcon{	background-image: url(/assets/common/img/icon_school_wh.png);}