@charset "utf-8";
/* 複数ページ共通 */
.img_centering{
	position: relative;
}
.img_centering a{
	display: block;
}
.img_centering .over{
	display: block;
	width: 100%;
	position: absolute;
	top:50%;
	left:50%;
	text-align: center;
	transform: translate(-50%, -50%);
	font-weight: normal;
}
.img_centering .over *{
	color: #ffffff;
	text-decoration: none;
}

#news ul li{
	border-bottom: 1px solid #9d9d9d;
	margin-bottom: 1.5em;
	padding: 0 2em 1.5em;
}
#news ul li a{
	display: block;
	text-decoration: none;
	color: #333333;
}
#news ul li a p{
}

#news ul li a time{
	display: block;
	color: #9d9d9d;
}
#news ul li a .cate{
	display: inline-block;
	background: #d6d6d6;
	padding: 0 2em;
	font-size: 0.9em;
}

#kidsspace ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#kidsspace ul li{
	width: 48%;
	background: #ffffff;
	margin-bottom: 1em;
}
body.shop #kidsspace ul li{
	box-shadow: 3px 3px 5px #cccccc;
}
#kidsspace ul li a{
	text-decoration: none;
}
#kidsspace ul li div{
	padding: 1em;
}
#kidsspace ul li div h6 img{
	height: 1em;
	width: auto;
	vertical-align: middle;
}
#kidsspace ul li div h4{
	padding-bottom: 1em;
	border-bottom: 1px solid #9d9d9d;
	margin-bottom: 1em;
	color: #333333;
}
#kidsspace ul li div p.tags{
	color: #9d9d9d;
}
#kidsspace ul li div p.tags span{
	display: inline-block;
	margin-right: 1em;
	white-space: nowrap;
}
#kidsspace ul li div p.tags span:before{
	content: "#";
}

dl.summary{
	padding: 0 2em;
}
dl.summary dt{
	border-bottom: 1px solid #cccccc;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}
dl.summary dt strong{
	display: block;
	border-left: 5px solid #63D1B1;
	font-size: 1.2em;
	padding-left: 1em;
}
dl.summary dd{
	margin-bottom: 2em;
}
dl.summary dd p{
	margin-bottom: 1em;
}
dl.summary dd ul{
	padding-left: 2em;
}
dl.summary dd ul li{
	list-style: decimal outside;
	margin-bottom: 0.5em;
}

body.login .complete img{
	border-radius: 100%;
	padding: 21px;
}
#spotter_list{
	padding: 2em 0;
	border-top: 1px solid #cccccc;
}
#spotter_list ul.half_box{
	justify-content: space-between;
}
#spotter_list li.half{
	width: 48%;
	box-shadow: 2px 2px 3px #cccccc;
	margin-bottom: 1em;
	position: relative;
}
#spotter_list li.half a{
	color: #333333;
	text-decoration: none;
}
#spotter_list li.half a img.photo{
	display: block;
	margin: 0 auto;
	height: 33vh;
	width: auto;
	object-fit: cover;
}
#spotter_list li.half .benefit{
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	padding: 0 1em;
}
#spotter_list li.half h6 img{
	height: 1em;
	width: auto;
	vertical-align: middle;
}
#spotter_list li.half div.box{
	padding: 1em;
}
#spotter_list li.half h6{
	margin: 0;
}
#spotter_list li.half h4{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size: 1.2em;
}
#spotter_list li.half .rating{
	font-size: 1.2em;
	color: #c89ec4;
}
#spotter_list li.half .rating small{
	color: #9d9d9d;
	font-size: 1.1rem;
}
#spotter_list li.half .ability{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#spotter_list li.half .ability span{
	display: inline-block;
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1;
	color: #c89ec4;
	border: 1px solid #c89ec4;
	border-radius: 3px;
	margin-right: 1em;
}
#spotter_list li.half .pr{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	border-top: 1px solid #cccccc;
	padding-top: 0.5em;
	margin-top: 0.5em;
}
#spotter_list li.half .pr br{
	display: none;
}
.profile_name .inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.profile_name .photo{
	border-radius: 100%;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
.profile_name img.photo + div,
.profile_name h4{
	width: calc(100% - 80px - 1em);
	margin-bottom: 0;
}

body.login input[type=radio]{
	display: none;
}
body.login label.radio input + span{
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
}
body.login label.radio input + span:before{
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #767676;
	border-radius: 50%;
}
body.login label.radio input:checked + span{
}
body.login_sp label.radio input:checked + span:after{
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 3px;
	width: 11px;
	height: 11px;
	background: #C89EC4;
	border-radius: 50%;
}
body.login_mp label.radio input:checked + span:after{
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 3px;
	width: 11px;
	height: 11px;
	background: #63D1B1;
	border-radius: 50%;
}
body.login input[type=checkbox]{
	display: none;
}
body.login label.checkbox input + span{
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
}
body.login label.checkbox input + span:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #767676;
	border-radius: 4px;
}
body.login label.checkbox input:checked + span{
}
body.login_sp label.checkbox input:checked + span:after{
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 10px;
	transform: rotate(40deg);
	border-bottom: 3px solid #C89EC4;
	border-right: 3px solid #C89EC4;
}
body.login_mp label.checkbox input:checked + span:after{
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 10px;
	transform: rotate(40deg);
	border-bottom: 3px solid #63D1B1;
	border-right: 3px solid #63D1B1;
}


/* index.html */
#mainimage{
	width: 100%;
	padding-top: calc(32px + 2em);
}
#mainimage h1{
	padding: 1em;
	font-size: 1.2em;
	font-weight: bold;
}

body.index #concept{
	padding-bottom: 0;
}

body.index #point{
	padding-top: 4em;
}
body.index #point ul{
	padding: 2em 0 0;
}
body.index #point ul li{
	margin-bottom: 2em;
	position: relative;
}
body.index #point ul li img{
	width: 25%;
	margin-bottom: 1em;
}
body.index #point ul li:before{
	color: #ffffff;
	background: #cccccc;
	display: inline-block;
	width: 1em;
	line-height: 1em;
	border-radius: 1.5em;
	padding: 1em;
	position: absolute;
	top: 2em;
	left: 2em;
}
body.index #point ul li.point1:before{	content: "1";}
body.index #point ul li.point2:before{	content: "2";}
body.index #point ul li.point3:before{	content: "3";}
body.index #point ul li.point4:before{	content: "4";}

body.index #newspotter .swiper-slide div{
	padding: 1em;
	box-shadow: 0px 0px 5px #cccccc;
	text-align: left;
}
body.index #newspotter .swiper-slide img.photo{
	height: 20vh;
	width: auto;
	margin-bottom: 10px;
}
body.index #newspotter .swiper-slide h6 img{
	height: 1em;
	width: auto;
	vertical-align: middle;
}
body.index #newspotter .swiper-slide h6{
	margin: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.index #newspotter .swiper-slide h4{
	font-size: 1.2em;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.index #newspotter .swiper-slide .rating{
	font-size: 1.2em;
	color: #c89ec4;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.index #newspotter .swiper-slide .rating small{
	color: #9d9d9d;
	font-size: 1.1rem;
}
body.index #newspotter .swiper-slide .ability{
	color: #c89ec4;
}
body.index #newspotter .swiper-slide .ability b{
	display: block;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.index #newspotter .swiper-slide .ability span{
	display: inline-block;
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1;
	color: #c89ec4;
	border: 1px solid #c89ec4;
	border-radius: 3px;
	margin-right: 1em;
}
body.index #newspotter .swiper-slide .pr{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.index #newspotter .swiper-slide .pr br{
	display: none;
}

body.index #copyright{
	padding-bottom: 5em;
}
body.index #fix_btn{
    width: 100%;
	max-width: 1200px;
    position: fixed;
    bottom: 0px;
	z-index: 99;
}
body.index #fix_btn ul{
	display: flex;
	justify-content: space-between;
}
body.index #fix_btn ul li{
	flex: 1 1 auto;
	line-height: 1;
}
body.index #fix_btn ul li a{
	display: block;
	line-height: 1;
	padding: 2em 0;
	text-align: center;
	border-radius: 2em 2em 0 0;
	text-decoration: none;
}
#mp_navi ul{
	display: flex;
	justify-content: center;
}
#mp_navi ul li{
	border-radius: 10px;
	text-align: center;
	margin: 0 0.2em;
}
#mp_navi ul li a{
	color: #ffffff;
	text-decoration: none;
	padding:1em;
	display: flex;
	justify-content: center;
	align-items: center;
}
#mp_navi ul li a img{
	width: 60%;
	max-width: 90px;
}

#recommended ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 1em;
}
#recommended ul li{
	width: 48%;
	margin-bottom: 1em;
}
#recommended ul li:first-child{
	width: 100%;
}
#recommended ul li a{
	text-decoration: none;
}
#recommended ul li a img{
	display: block;
	margin: 0 auto 0.5em;
}
#recommended ul li a h3{
	color: #000000;
	font-size: 1em;
}
#recommended ul li:first-child a h3{
	font-size: 1.2em;
}

#sp_navi ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#sp_navi ul li{
	width: 50%;
	text-align: center;
	border-bottom: 1px solid #ffffff;
	box-sizing: border-box;
}
#sp_navi ul li:nth-child(2n-1){
	border-right: 1px solid #ffffff;
}
#sp_navi ul li a{
	color: #ffffff;
	text-decoration: none;
	padding: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sp_navi ul li:first-child a,
#sp_navi ul li:last-child a{
	background: #b582b0;
}
#sp_navi ul li a img{
	width: 50%;
	max-width: 122px;
}

/* about.html */
body.about #page_index li a{
	display: block;
	border-bottom: 1px solid #cccccc;
	position: relative;
	padding: 0.5em;
	text-decoration: none;
	color: #333333;
}
body.about #page_index li a:after{
	content: "";
	width: 20px;
	height: 12px;
	background: url("../img/common/arrow.png") no-repeat center center;
	background-size: 100% auto;
	display: inline-block;
	transform: rotate(180deg);
	position: absolute;
	right: 1em;
	top: 1.2em;
}
body.about #flow{
	padding-bottom: 0;
}
body.about #flow #tab{
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
}
body.about #flow #tab li{
	width: 48%;
	text-align: center;
}
body.about #flow #tab li span{
	display: block;
	background: #ffffff;
	padding: 1em;
	border-radius: 10px 10px 0 0;
}
body.about #flow #tab li a{
	display: block;
	padding: 1em;
	color: #333333;
	text-decoration: none;
}
body.about #flow ol{
	background: #ffffff;
	padding: 2em;
}
body.about #flow ol li{
	padding-bottom: 1em;
	margin-bottom: 2em;
	border-bottom: 1px solid #9d9d9d;
}
body.about #flow ol li:after{
	content: "";
	background: url("../img/open/flow_arrow.png") no-repeat center bottom;
	width: 25px;
	height: 12px;
	display: block;
	text-align: center;
	position: relative;
	top: 2em;
	margin: 0 auto;
}
body.about #flow ol li:last-child:after{
	background: none;
}
body.about #flow ol li img{
	float: left;
	width: 20%;
	max-width: 106px;
}
body.about #flow ol li div{
	float: right;
	width: 80%;
	padding-left: 1em;
	box-sizing: border-box;
}
body.about #price .box{
	border: 1px solid #cccccc;
	padding: 1em;
	margin-bottom: 3em;
}
body.about #price h4{
	display: inline-block;
	padding: 0 1em;
	position: relative;
	bottom: 2em;
}
body.about #price p{
	padding: 1em;
}
body.about #price p.left{
	padding:0;
}
body.about #support li{
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid #9d9d9d;
}
body.about #support li img{
	width: 25%;
	max-width: 192px;
}
body.about #spotter_logo .box{
	background: #ffffff;
	text-align: center;
	padding: 4em 0;	
}
body.about #spotter_logo .box img{
	width: 60%;
	max-width: 511px;
}

/* registration_member_provisional.html */
/* registration_sitter_provisional.html */
body.provisional #relieved ol li{
	margin-bottom: 2em;
	line-height: 1.2;
}
body.provisional #relieved ol li span{
	width: 2em;
	font-size: 2em;
	color: #cccccc;
	float: left;
}
body.provisional #relieved ol li p{
	text-align: left;
	float: right;
	width: calc(100% - 4em);
}
body.provisional #need_doc img{
	width: 33%;
	max-width: 280px;
}
body.provisional #mail_register p{
	font-size: 0.9em;
	line-height: 1.2;
	padding-bottom: 1em;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 1em;
}
body.provisional #mail_register small{
	display: block;
	font-size: 0.8em;
	line-height: 1.2;
	color: #9d9d9d;
}

body.authorization #authorization h6{
	background: #f5f5f5;
	color: #9d9d9d;
	padding: 0 2em;
}
body.authorization #authorization .pref{
	padding: 0 2em;
}
body.authorization #authorization span{
	display: inline-block;
	white-space: nowrap;
	margin: 0 1em 1em 0;
	color: #cccccc;
}
body.authorization #authorization span a{
	color: #333333;
}

/* shop_detail.html */
body.shop #shop_detail h6 img{
	height: 1em;
	width: auto;
	vertical-align: middle;
}
body.shop #shop_detail h4{
	padding-bottom: 1em;
	border-bottom: 1px solid #9d9d9d;
	margin-bottom: 1em;
	color: #333333;
}
body.shop #shop_detail p.tags{
	color: #9d9d9d;
}
body.shop #shop_detail p.tags span{
	display: inline-block;
	margin-right: 1em;
	white-space: nowrap;
}
body.shop #shop_detail  p.tags span:before{
	content: "#";
}
body.shop #shop_detail p.url a{
	word-break: break-all;
}
body.shop #shop_detail p.url a:after{
	content: "";
	background: url("../img/open/link.png") no-repeat;
	background-size: 100% auto;
	width: 16px;
	height: 14px;
	display: inline-block;
	margin-left: 1em;
}
body.shop #shop_detail p.info{
	padding: 2em 0;
	margin: 2em 0;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

/* terms.html */
body.terms #page_index li{
	margin-bottom: 1em;
}
body.terms #page_index li a{
	text-decoration: none;
	color: #333333;
}
body.terms #page_index li a:after{
	content: ">";
	margin-left: 1em;
}
body.terms #page_index li a span{
	display: inline-block;
	color: #9d9d9d;
	width: 4em;
}
body.terms #terms div{
	background: #f5f5f5;
	padding: 1em 0;
}
	
/* privacy.html */
body.privacy #privacy div{
	background: #f5f5f5;
	padding: 1em 0;
}


/* mypage.html */
body.login #profile div.photo{
	float: left;
	width: 120px;
	position: relative;
}
body.login #profile div.photo img.photo{
	border-radius: 100%;
	width: 120px;
	height: 120px;
	object-fit: cover;
}
body.login #profile div.photo a{
	position: absolute;
	right: 0;
	bottom: 0;
}
body.login #profile div.info{
	float: right;
	width: calc(100% - 120px - 1em);
}
body.login #profile div.info h4{
	margin-bottom: 0;
}
body.login #profile .rating{
	font-size: 1.2em;
	color: #c89ec4;
}
body.login #profile .rating small{
	color: #9d9d9d;
	font-size: 1.1rem;
}
body.login #profile div.info h6{
	color: #9d9d9d;
}
body.login #profile .ability span{
	display: inline-block;
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1;
	color: #c89ec4;
	border: 1px solid #c89ec4;
	border-radius: 3px;
	margin-right: 1em;
}
body.login #profile .pr br{
	display: none;
}
body.login #profile .pr{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.login #profile div.info p a,
body.login #profile p.right a{
	color: #9d9d9d;
	text-decoration: none;
}
body.login #profile div.info p a:after{
	content: ">";
	display: inline-block;
	margin-left: 1em;
}
body.login #my_joblist ul li{
	position: relative;
	background: #ffffff;
	box-shadow: 3px 3px 5px #cccccc;
	margin-bottom: 2em;
}
body.login #my_joblist ul li div.title{
	padding:1em 2em 1em 1em;
	margin: 0;
	display: flex;
	justify-content: space-between;
}
body.login #my_joblist ul li div.title img{
	width: 3em;
	height: 3em;
	border-radius: 100%;
	object-fit: cover;
}
body.login #my_joblist ul li div.title h4{
	flex: 1 1 auto;
	padding: 0 1em;
	line-height: 1.2;
}
body.login #my_joblist ul li div.title a{
	display: block;
	width: 2em;	
}
body.login #my_joblist ul li div.title a img{
	width: 100%;
	height: auto;
	border-radius: 0px;
}
body.login #my_joblist ul li p.info{
	padding: 0 2em;
	margin-bottom: 1em;
}
body.login #my_joblist ul li p.more{
	padding: 0 2em;
	margin-bottom: 1em;
}
body.login #my_joblist ul li p.more a{
	color: #333333;
	text-decoration: none;
	position: relative;
	z-index: 2;
}
body.login #my_joblist ul li p.more a:after{
	content: ">";
	display: inline-block;
	margin-left: 1em;
}
body.login #my_joblist ul li .status{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: #c1c1c1;
}
body.login #my_joblist ul li .status p{
	text-align: center;
	position: relative;
	z-index: 1;
	width: 20%;
	box-sizing: border-box;
	padding: 1em 0;
	border-right: 1px solid #ffffff;
	white-space: nowrap;
	font-size: 0.8em;
	color: #ffffff;
	line-height: 1;
}
body.login #my_joblist ul li .status p:after{
	position: absolute;
	z-index: 2;
	top: 0;
	right: -10px;
	display: block;
	width: 10px;
	height: 3em;
	content: "";
	background: url("../img/member/status.png") no-repeat left center;
}
body.login_mp #my_joblist ul li .status p.active:after{background: url("../img/member/status_m.png") no-repeat left center;}
body.login_sp #my_joblist ul li .status p.active:after{background: url("../img/member/status_p.png") no-repeat left center;}
body.login #my_joblist ul li .status p:last-child{
	border: none;
}
body.login #my_joblist ul li .status p:last-child:after{
	background: none;
}
body.login #my_joblist ul li .status img{
	width: 24px;
	position: absolute;
	top: -12px;
	right: -10px;
	z-index: 3;
}
body.login_mp #my_joblist ul li .status .active{background: #63D1B1;}
body.login_sp #my_joblist ul li .status .active{background: #C89EC4;}
body.login #my_joblist ul li .status p.stop{
	flex: 1 1 auto;
}
body.login #my_joblist ul li p.status_comment{
	padding: 1em 2em;
	border-bottom: 1px solid #cccccc;
}
body.login_mp #my_joblist ul li .openclose h6{
	padding: 1em 2em;
	background: url("../img/member/profile_m.png") no-repeat left 1em top 1.8em;
	background-size: 1em auto;
	color: #63D1B1;
}
body.login_sp #my_joblist ul li .openclose h6{
	padding: 1em 2em;
	background: url("../img/member/profile_s.png") no-repeat left 1em center;
	background-size: 1em auto;
	color: #C89EC4;
}
body.login #my_joblist ul li .openclose h6 img{
	width: 30px;
	margin-left: 1em;
}
	body.login_sp #my_joblist .openclose .ocbtn:after{
		background: url("../img/common/arrow_s.png") no-repeat center center;
		background-size: 100% auto;
		top: 1.5em;
	}
	body.login_sp #my_joblist .openclose .ocbtn.unread_s:after{
		width: 3em;
		height: 3em;
		background: url("../img/member/bbsunread_s.png") no-repeat center center;
		background-size: 100% auto;
		transform: rotate(0deg);
		top: 0.5em;
	}
	body.login_sp #my_joblist .openclose .ocbtn.upbtn:after{
		width: 20px;
		height: 12px;
		background: url("../img/common/arrow_s.png") no-repeat center center;
		background-size: 100% auto;
		transform: rotate(0deg);
		top: 1.5em;
	}
	body.login_mp #my_joblist .openclose .ocbtn:after{
		background: url("../img/common/arrow_m.png") no-repeat center center;
		background-size: 100% auto;
		top: 1.5em;
	}
	body.login_mp #my_joblist .openclose .ocbtn.unread_m:after{
		width: 3em;
		height: 3em;
		background: url("../img/member/bbsunread_m.png") no-repeat center center;
		background-size: 100% auto;
		transform: rotate(0deg);
		top: 0.5em;
	}
	body.login_mp #my_joblist .openclose .ocbtn.upbtn:after{
		width: 20px;
		height: 12px;
		background: url("../img/common/arrow_m.png") no-repeat center center;
		background-size: 100% auto;
		transform: rotate(0deg);
		top: 1.5em;
	}
body.login #my_joblist ul li .openclose div.ocbox{
	padding: 0 1em;
}
body.login #my_joblist ul li .openclose div.ocbox .sitter{
	padding: 1em;
	border-bottom: 1px solid #cccccc;
	display: flex;
	justify-content: space-between;
}

body.login #my_joblist ul li .openclose div.ocbox .sitter img.photo{
	width: 4em;
	height: 4em;
	border-radius: 100%;
	object-fit: cover;
}
body.login #my_joblist ul li .openclose div.ocbox .sitter h4{
	font-weight: bold;
}
body.login #my_joblist ul li .openclose div.ocbox .sitter div{
	flex: 1 1 auto;
	text-align: left;
	padding: 0 1em;
}
body.login #my_joblist ul li .openclose div.ocbox .sitter p{
}
body.login #my_joblist ul li .openclose div.ocbox .sitter p a{
	color: #333333;
	text-decoration: none;
}
body.login #my_joblist ul li .openclose div.ocbox .sitter p.message{
	width: 3em;
	padding: 0.5em 0;
}

body.login #my_joblist ul li p.next{
	padding: 1em;
}
body.login #job_register_btn{
	position: fixed;
	z-index: 1;
	right: -1em;
	bottom: 2em;
	width: 120px;
}

/* bbs.html */
body.login main.bbs{
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 6em;
}
body.login main.bbs ul li{
	margin-bottom: 1em;
}
body.login main.bbs ul li.gm img{
	width: 2em;
	height: 2em;
	border-radius: 100%;
	object-fit: cover;
	padding: 0.5em;
	background: #f5f5f5;
	float: left;
}
body.login main.bbs ul li div.message{
	background: #f5f5f5;
	float: right;
	width: calc(100% - 4em);
	padding: 1em;
	border-radius: 1em;
	box-sizing: border-box;
}
body.login main.bbs ul li h4{
	float: right;
	width: calc(100% - 4em);
}
body.login main.bbs ul li time{
	float: right;
	width: calc(100% - 4em);
	text-align: right;
	display: block;
	color: #9d9d9d;
}
body.login main.bbs ul li time span{
	display: inline-block;
	padding: 0 1em;
}
body.login main.bbs ul li.opponent img{
	width: 3em;
	height: 3em;
	border-radius: 100%;
	object-fit: cover;
	float: left;
}
body.login main.bbs ul li.own img{
	width: 3em;
	height: 3em;
	border-radius: 100%;
	object-fit: cover;
	float: right;
}
body.login main.bbs ul li.own h4{
	float: left;
	text-align: right;
}
body.login main.bbs ul li.own div.message{
	float: left;
}
body.login main.bbs ul li.own time{
	float: left;
	text-align: left;
}
body.login #bbs_footer{
	position: fixed;
	bottom: 0;
	left: 0;
	background: #f5f5f5;
	width: 100vw;
	padding: 1em;
	text-align: center;
}
body.login #bbs_footer input[type=text]{
	background: #ffffff !important;
	border: 1px solid #9d9d9d !impoprtant;
	width: 50%;
	box-sizing: border-box;
}

/* nominate.html */
body.login #nominate img.photo{
	width: 240px;
	height: 240px;
	border-radius: 100%;
	object-fit: cover;
}

/* job_add.html */
body.login #job_add #tab{
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
}
body.login #job_add #tab li{
	width: 48%;
	text-align: center;
}
body.login #job_add #tab li span{
	display: block;
	background: #ffffff;
	padding: 1em;
	border-radius: 10px 10px 0 0;
}
body.login #job_add #tab li a{
	display: block;
	padding: 1em;
	color: #9d9d9d;
	text-decoration: none;
}
body.login #job_add ul.job_add{
	background: #ffffff;
	margin-bottom: 3em;
	padding: 1em 0;
}
body.login #job_add ul.job_add li{
	padding:0 2em 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #cccccc;
}
body.login #job_add ul.job_add li label{
	display: block;
}

/* member_search_detail.html */
body.login #search_conditions li{
	display: flex;
}
body.login #search_conditions li h6{
	width: 7em;
}
body.login #search_conditions li p{
	width:calc(100% - 7em);
}

body.login #search_conditions li .ability span{
	display: inline-block;
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1;
	color: #c89ec4;
	border: 1px solid #c89ec4;
	border-radius: 3px;
	margin-right: 1em;
}

/* member_pay.html */
body.login #pay label{
	position: relative;
	z-index: 1;
}
body.login img.terms{
	height: 1em;
	width: auto;
	position: relative;
	bottom: 0.5em;
	left: 0.5em;	
}
body.login #pay .btns{
	position: relative;
	z-index: 1;
}

/* member_contract.html */
body.login #contract ol li{
	padding: 1em;
	border-top: 1px solid #cccccc;
}
body.login_mp #contract ol li span{ color: #63D1B1;}
body.login_sp #contract ol li span{ color: #C89EC4;}
body.login #private_info{
	padding: 1em　2em;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}
body.login #contract #private_info{
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 1em 2em;
	margin-bottom: 2em;
}
body.login #contract #private_info h4 img{
	vertical-align: middle;
	height: 2em;
	width: auto;
	margin-right: 0.5em;
}

/* member_profile.html */
body.login #profile_edit{
}
body.login #profile_edit .openclose .ocbtn:after{
	background: url("../img/common/arrow_w.png") no-repeat center center;
	background-size: 100% auto;
}
body.login #profile_edit .openclose .ocbtn.add_card:after{
	background: url("../img/common/arrow.png") no-repeat center center;
	background-size: 100% auto;
}
body.login #profile_edit img.photo{
	width: 30vw;
	height: 30vw;
	border-radius: 100%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}
body.login #profile_edit img.card{
	border: 1px solid #767676;
	box-sizing: border-box;
}
body.login #profile_edit p.regist{
	padding: 1em 0;
}
body.login #profile_edit ul{
	background: #ffffff;
	padding: 1em 0;
}
body.login #profile_edit ul li{
	padding:0 2em 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #cccccc;
}
body.login #profile_edit ul li label{
	display: block;
}
body.login #profile_edit ul li h4 em{
	font-size: 0.8em;
	color: #ff0000;
	display: inline-block;
	margin-left: 1em;
	font-style: normal;
}
body.login #profile_edit ul li h4 span{
	font-size: 0.8em;
	display: inline-block;
	margin-left: 1em;
}
body.login #profile_edit ul li small{
	color: #9d9d9d;
	display: block;
	font-size: 0.9em;
}
body.login #profile_edit ul li div.half_box{
	justify-content: space-between;
}
body.login #profile_edit ul li div.half{
	width: 48%;
	overflow: hidden;
}

/* member_profile.html */
body.login #bank .half_box{
	padding: 1em;
	border-bottom: 1px solid #cccccc;
	flex-wrap: wrap;
}
body.login #bank .half_box p.title{
	width: 100%;
}
body.login #bank .half_box p.title small{
	font-size: 0.9em;
	color: #9d9d9d;
}
body.login #bank .half_box p.point strong{
	font-size: 2em;
}
body.login #bank .half_box p input[type="text"]{
	width: calc(100% - 2em);
}
body.login #bank ul li{
	display: flex;
	justify-content: space-between;
}
body.login #bank ul li p.time{
	color: #9d9d9d;
}
body.login #bank ul li p.time span{
    display: inline-block;
	background: #9d9d9d;
    color: #ffffff;
    font-size: 0.8em;
    border-radius: 3px;
    line-height: 1;
    padding: 0.2em 0.5em;
}
body.login #bank ul li p.right strong{
	font-size: 1.2em;	
}

/* member_report.html */
body.login #report_list .job_title{
	display: flex;
	justify-content: space-between;
}
body.login #report_list li{
	display: flex;
	justify-content: space-between;
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid #cccccc;
}
body.login #report_list li .photo{
	border-radius: 100%;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
body.login #report_list li div{
	width: calc(100% - 80px - 1em);
	margin-bottom: 0;
}
body.login #report_list li div h4{
	margin-bottom: 0;
}
body.login #report_list h6.ocbtn{
	border: none;
	padding: 0;
	margin-bottom: 2em;
}
body.login #report_list h6.ocbtn:after{
	display: none;
}

/* member_report_detail.html */
body.login #report_detail .report_info,
body.login #report_detail .report_spotter,
body.login #report_detail .report_eat,
body.login #report_detail .report_details{
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid #cccccc;
}
body.login #report_detail .report_info .job_title{
	display: flex;
	justify-content: space-between;
}
body.login #report_detail .report_info .photo{
	border-radius: 100%;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
body.login #report_detail .report_info h4{
	width: calc(100% - 80px - 1em);
	margin-bottom: 0;
}
body.login #report_detail .report_details p{
	margin-bottom: 1em;
}

/* member_sitter_detail.html */
body.login #profile_contents{
	padding: 0;
}
body.login #profile_info_summary .inner{
	padding: 2em;
}
body.login #profile_info_summary h6 img{
	height: 1em;
	width: auto;
	vertical-align: middle;
}
body.login #profile_info_summary h4{
	margin-bottom: 0;
}
body.login #profile_info_summary h4 span{
	color: #9d9d9d;
	display: inline-block;
	margin-left: 1em;
	font-size: 0.9em;
}
body.login #profile_info_summary .rating{
	font-size: 1.2em;
	color: #c89ec4;
}
body.login #profile_info_summary .rating small{
	color: #9d9d9d;
	font-size: 1.1rem;
}
body.login #profile_info_detail .box{
	background: #ffffff;
	padding: 1em;
}
body.login #profile_info_detail .box ul li{
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid #cccccc;
}
body.login #profile_info_detail .box ul p{
	margin-bottom: 0.5em;
}
body.login #profile_info_detail .ability span{
	display: inline-block;
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1;
	color: #c89ec4;
	border: 1px solid #c89ec4;
	border-radius: 3px;
	margin-right: 1em;
}
body.login #profile_info_revue .rating{
	font-size: 1.2em;
	color: #c89ec4;
}
body.login #profile_info_revue .rating small{
	font-size: 1.1rem;
	color: #9d9d9d;
}
body.login #profile_info_revue ul li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #cccccc;
}
body.login #profile_info_revue ul li .photo{
	border-radius: 100%;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
body.login #profile_info_revue ul li div{
	width: calc(100% - 80px - 1em);
	margin-bottom: 0;
}


/* sitter_schedule.html */
body.login #schedule_regist{
	padding-bottom: 0;
}
body.login #schedule_regist #tab{
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
}
body.login #schedule_regist #tab li{
	width: 48%;
	text-align: center;
}
body.login #schedule_regist #tab li span{
	display: block;
	background: #ffffff;
	padding: 1em;
	border-radius: 10px 10px 0 0;
}
body.login #schedule_regist #tab li a{
	display: block;
	padding: 1em;
	color: #333333;
	text-decoration: none;
}
body.login #schedule_regist ol{
	background: #ffffff;
	padding: 0 2em;
}
body.login #schedule_regist ol li .ocbtn{
	border-bottom: none;
}
body.login #schedule_regist ol li:last-child .ocbtn{
	border-bottom: 1px solid #cccccc;
}
body.login #schedule_regist ol li .ocbox{
	background: #f5f5f5;
	padding: 1em;
}
body.login #schedule_regist ol li .ocbox .box div{
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}
body.login #schedule_regist p.center{
	background: #ffffff;
	padding: 3em 0;
}

/* sitter_search.html */
body.login #sitter_list li{
	margin-bottom: 1em;
	box-shadow: 3px 3px 5px #cccccc;
	align-items:flex-start;
	justify-content: space-between;
}
body.login #sitter_list li a{
	display: flex;
	text-decoration: none;
	color: #333333;
}
body.login #sitter_list li a .photo{
	width:120px;
}
body.login #sitter_list li a div{
	width: 	calc(100% -120px);
	padding: 1em;
	box-sizing: border-box;
}


/* sitter_revue.html */
body.login #job_add .job_add.revue .ocbtn {
	border: none;
}
body.login #job_add .job_add.revue .ocbtn:after{
	display: none;
}


/* sitter_cal.html */
#sitter_cal{
	max-width: 100%;
	box-sizing: border-box;
}
#sitter_cal table{
	width: 100%;
	line-height: 1;
	box-sizing: border-box;
}
#sitter_cal table tr{
}
#sitter_cal table tr th{
	border: 1px solid #cccccc;
	padding:1em;
	box-sizing: border-box;
}
#sitter_cal table tr th div{
	display: flex;
	justify-content: space-between;
	color: #9d9d9d;
}
#sitter_cal table tr th a{
	text-decoration: none;
	color: #9d9d9d;
}
#sitter_cal table tr td{
	border: 1px solid #cccccc;
	padding: 0.5em;
	text-align: center;
	box-sizing: border-box;
}
#sitter_cal table tr td a{
	display: block;
	text-decoration: none;
	color: #C89EC4 !important;
}
#sitter_cal table tr td span{
	color: #9d9d9d;
	display: block;
}
body.login .schedule_cal iframe{
	width: 100%;
	border: none;
	display: block;
	height: 22em;
	overflow: auto;
}


/* flow.html */
body.flow h3.step{
	padding: 1em 1.5em;
	box-shadow: 2px 2px 5px #cccccc;
	font-size: 1.6em;
	display: inline-block;
	margin-bottom: 2em;
}
body.flow h3.step span{
	font-size: 0.8em;
	color: #767676;
	display: block;
}
body.flow #point{
	padding-top: 4em;
}
body.flow #point ul{
	padding: 2em 0 0;
}
body.flow #point ul li{
	margin-bottom: 2em;
	position: relative;
}
body.flow #point ul li img{
	width: 66%;
	margin-bottom: 1em;
}
body.flow #point ul li:before{
	color: #ffffff;
	background: #cccccc;
	display: inline-block;
	width: 1em;
	line-height: 1em;
	border-radius: 1.5em;
	padding: 1em;
	position: absolute;
	top: 2em;
	left: 2em;
}
body.flow #point ul li.point1:before{	content: "1";}
body.flow #point ul li.point2:before{	content: "2";}
body.flow #point ul li.point3:before{	content: "3";}
body.flow #point ul li.point4:before{	content: "4";}

body.flow .complete img{
	border-radius: 100%;
	padding: 21px;
}
body.flow .openclose .ocbtn:after{
	background: url("../img/common/arrow_s.png") no-repeat center center;
	background-size: 100% auto;
	top: 1.5em;
}