@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/
.inner {
	width: 1026px;
}
body {
	background: #edf8ff;
}

.hajimete .main img{
	border-radius: 15px;
	box-shadow: 1px 0 20px 0 #c0e2f3;
}
/*CONTENT*/
.areaBanner {
    margin-bottom: 23px;
}
.areaBanner img {
	border-radius: 15px;
}

/*areaCamp*/

.areaCamp {
	margin-top: 38px;
	margin-bottom: 37px;
}

/*AREATITLE*/
.areaTitle {
    text-align: center;
    margin-bottom: 29px;
}

.areaTitle .titleEn {
    font-size: 17px;
    color: #14263f;
    letter-spacing: 1.4px;
    margin-bottom: 11px;
}

.areaTitle .titleJp {
    position: relative;
    font-size: 36px;
    color: #14263f;
    background: url(../images/hajimete/area-title-bg.png) no-repeat center bottom/100%;
    padding-bottom: 42px;
}

.areaTitle .titleJp:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    width: 54px;
    height: 37px;
    background: url(../images/index/icon-hand.png) no-repeat center center/100%;
}

.areaTitle .titleJp:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 16px;
    width: 54px;
    height: 37px;
    background: url(../images/index/icon-hand.png) no-repeat center center/100%;
    transform: rotateY(180deg);
}

.areaTitle.white .titleEn {
    color: #fff;
}

.areaTitle.white .titleJp {
    color: #fff;
    background: url(../images/index/area-title-white-bg.png) no-repeat center bottom/100%;
}

.areaTitle.white .titleJp:before,
.areaTitle.white .titleJp:after {
    background: url(../images/index/icon-hand-white.png) no-repeat center center/100%;
}

/*AREATITLE*/


/*wrapListCamp*/

.wrapListCamp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.wrapListCamp .itemListCamp {
	width: calc(100% / 2 - 26px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 1px 0 20px 0 #c0e2f3;
	margin-bottom: 39px;
	overflow: hidden;
}
.wrapListCamp .itemListCamp .boxDetail {
	padding: 25px 25px 13px 25px;
}
.wrapListCamp .itemListCamp .titleList {
	text-align: center;
	margin-bottom: 10px;
}
.wrapListCamp .itemListCamp .titleList img{
	width: 70%;
	margin: 0 auto;
}
.wrapListCamp .itemListCamp .descrip {
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 13px;
}
.wrapListCamp .itemListCamp .imageCamp {
	margin-bottom: 15px;
}
.wrapListCamp .itemListCamp .boxCorres {
	display: flex;
	border: 1px solid #cfe3ee;
	margin-bottom: 15px;
}
.wrapListCamp .itemListCamp .boxCorres .nameCorres {
	background: #edf8ff;
	width: 133px;
	font-size: 13px;
	font-weight: bold;
	padding: 6px 20px 5px;
}
.wrapListCamp .itemListCamp .boxCorres .subCorres {
	width: calc(100% - 137px);
	font-size: 13px;
	padding: 5px 10px 5px 5px;
}

.wrapListCamp .itemListCamp .boxSub {
	position: relative;
	background: #fffdf7;
	border: 2px solid #ffebaf;
	border-radius: 5px;
	padding: 12px 70px 12px 12px;
	min-height: 95px;
}
.wrapListCamp .itemListCamp .boxSub:before {
	content: "";
	position: absolute;
	background: url(../images/hajimete/camp-sub-before.png) no-repeat;
	background-size: cover;
	width: 95px;
	height: 95px;
	bottom: -1px;
	right: -21px;
}
.wrapListCamp .itemListCamp .boxSub .titleSub {
	font-size: 15px;
	color: #fe8900;
	margin-bottom: 4px;
}
.wrapListCamp .itemListCamp .boxSub .cntSub {
	font-size: 13px;
	font-weight: bold;
	color: #2f2f2f;
	line-height: 1.7;
	letter-spacing: -0.7px;
	padding-left: 6px;
}

.boxButton {
	background: #fbf8f6;
	padding: 6px 5px 12px 22px;
	/*border-radius: 0 0 15px 15px;*/
	margin-bottom: -2px;
}
.boxButton .itemButton {
	display: inline-block;
	width: 187px;
	margin-right: 7px;
}
.boxButton .itemButton.btnReview a {
	background: url(../images/hajimete/camp-arrows-black.png) no-repeat center right 20px, #feed2b;
}
.boxButton .itemButton.btnDetail a {
	background: url(../images/hajimete/camp-arrows-white.png) no-repeat center right 10px, #0096ff;
	color: #fff;
}
.boxButton .itemButton a {
	display: block;
	font-size: 17px;
	border-radius: 5px;
	padding: 7px 40px 10px 20px;
	text-align: center;
	letter-spacing: 0.5px;
	text-shadow: 1px 0 2px #333;
}
.boxButton .itemButton a .txtShadow {
	text-shadow: 1px 0 2px #333;
}
.boxButton .btnFavorite {
	display: inline-block;
	width: 65px;
	vertical-align: middle;
	text-align: center;
	transform: translate(-4px, -3px);
}

.boxButton .btnFavorite a{
	display: block;
	position: relative;
}
.boxButton .btnFavorite img {
	border-radius: 50%;
	box-shadow: 0 0 10px #ededed;
}


.boxButton .btnFavorite .fav-action,
.boxButton .btnFavorite.fav-active img{
    display: none;
}

.boxButton .btnFavorite img,
.boxButton .btnFavorite.fav-active .fav-action{
    display: block;
    margin-right: 0;
}

.boxButton .btnFavorite .fav-action{
	width: 49px;
	height: 49px;
}

.boxButton .btnFavorite a:after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 49px;
    height: 49px;
    background: #fff url(../images/common/loading.gif) no-repeat center;
    background-size: 100%;
    border-radius: 50%;
    display: none;
}
.boxButton .btnFavorite a.loading{
    pointer-events: none;
}
.boxButton .btnFavorite a.loading:after{
    display: block;
}

#content .dbNone {
	margin-bottom: 0;
}


@media (max-width: 768px) {
	.inner {
		width: 100%;
	}

	#breadCrumbs{
		margin-top: 18px;
	}
	.areaCamp{
		margin-top: 22px;
	}
	
	.areaBanner {
		margin-top: -278px;
		margin-bottom: 8px;
	}
	.areaBanner img {
		border-radius: 5px;
	}

	/*.areaTitle*/
	.areaTitle {
		margin-bottom: 22px;
	}
	.areaTitle .titleEn {
		margin-bottom: 7px;
	}
	.areaTitle .titleEn img {
		width: 120px;
	}
	.areaTitle .titleJp {
		font-size: 20px;
		letter-spacing: -0.6px;
		padding-bottom: 13px;
	}
	.areaTitle .titleJp:after,
	.areaTitle .titleJp:before {
		width: 27px;
		height: 21px;
		top: 4px;
	}
	.areaTitle .titleJp:after {
		right: 1px;
	}
	.areaTitle .titleJp:before {
		left: 1px;
	}
	.wrapListCamp .itemListCamp .titleList img {
		width: 221px;
	}





	.wrapListCamp .itemListCamp {
		width: 100%;
		border-radius: 5px;
		margin-bottom: 17px;
	}
	.wrapListCamp .itemListCamp .boxDetail {
		padding: 19px 20px 9px;
	}
	.wrapListCamp .itemListCamp .descrip {
		font-size: 11px;
		letter-spacing: 0.5px;
		margin-bottom: 12px;
	}
	.wrapListCamp .itemListCamp .titleList {
		margin-bottom: 5px;
	}
	.wrapListCamp .itemListCamp .imageCamp {
		margin-bottom: 8px;
		text-align: center;
	}
	.wrapListCamp .itemListCamp .boxCorres {
		margin-bottom: 8px;
	}
	.wrapListCamp .itemListCamp .boxCorres .nameCorres {
		font-size: 11px;
		width: 73px;
		padding: 5px 8px;
	}
	.wrapListCamp .itemListCamp .boxCorres .subCorres {
		font-size: 11px;
		padding: 5px 10px 5px 5px;
	}

	.wrapListCamp .itemListCamp .boxSub {
		padding: 10px 50px 10px 10px;
		min-height: 105px;
	}
	.wrapListCamp .itemListCamp .boxSub .titleSub {
		margin-bottom: 1px;
	}
	.wrapListCamp .itemListCamp .boxSub .cntSub {
		font-size: 11px;
		font-weight: normal;
		letter-spacing: 0;
	}

	.wrapListCamp .itemListCamp .boxSub:before {
		background-image: url(../images/hajimete/camp-sub-before-sp.png);
		background-size: cover;
		width: 46px;
		height: 57px;
		bottom: 0px;
		right: 0px;
	}

	.boxButton {
		padding: 3px 5px 4px 22px;
		border-radius: 0 0 10px 10px;
	}
	.boxButton .itemButton {
		width: calc(100% / 2 - 36px);
	}
	.boxButton .itemButton a {
		font-size: 12px;
		padding: 8px 10px 10px 5px;
	}
	.boxButton .itemButton.btnReview a {
		background-position: center right 10px;
		background-size: 5px 10px;
	}
	.boxButton .itemButton.btnDetail a {
		background-position: center right 10px;
		background-size: 5px 10px;
	}

	.boxButton .btnFavorite {
		width: 50px;
		transform: translate(-6px, -3px);
	}
}

@media(max-width: 667px){
    .areaBanner {
		margin-top: -268px;
	}
}

@media(max-width: 375px) {
    .areaBanner {
		margin-top: -182px;
	}
}

@media (max-width: 350px) {
	#content {
		transform: translateY(-120px);
	}
	.wrapListCamp .itemListCamp .boxDetail {
		padding: 15px 10px 10px;
	}
	.boxButton {
		padding: 5px 3px 10px 10px;
	}

	.areaTitle .titleJp:after {
		right: -3px;
	}
	.areaTitle .titleJp:before {
		left: -3px;
	}
	.areaBanner {
		margin-top: -32px;
	}
}

@media(max-width: 320px) {
    .areaBanner {
		margin-top: -20px;
	}
}