@charset "UTF-8";
/* CSS Document */

.main{
	padding-bottom: 50px;
}
/* .main a{
	transition: .3s;
} */


/* title */
.title img{
	margin: auto;
	width: 100%;
	max-width: 1000px;
}
.title-sub{
	background: #f2efea;
	padding: 20px;
	text-align: center;
}



/* top-navi */
.top-navi ul{
	display: flex;
	justify-content: center;
}
.top-navi ul > li{
	margin: 0 5px;
	width: calc(25% - 10px);
	max-width: 105px;
}

.top-navi ul > li img{
	width: 100%;
}



/* content */
.content{
	margin: 0;
	padding-bottom: 30px;
}
.content-wrapper{
	max-width: 1000px;
	margin: auto;
}


.content-imgbox{
	display: block;
	margin: auto;
	position: relative;
}
.content-imgbox img{
	margin: auto;
	width: 100%;
	max-width: 1000px;
}
.content-imgbox-txt{
	text-align: center;
	position: absolute;
	top: 260px;
	right: 0;
	left: 0;
}



/* flexbox */
.flexbox{
	display: flex;
	flex-wrap: wrap;
}



/* itembox */
.itembox{
	margin-left: 2%;
	width: 47%;
}



/* itembox-list */
.itembox-list{
	border-top: 2px solid #333;
	margin-top: 10px;
}

.itembox-list > li{
	margin-top: 4px;
}

.itembox-list a{
	border-top: 1px dashed #ccc;
	display: block;
	font-size: 10px;
	padding: 4px 0;
	position: relative;
}
.itembox-list > li:first-of-type a{
	border-top: none;
}

.itembox-list-sub a{
	padding: 12px 0;
}
.itembox-list-sub > li:last-of-type a{
	border-bottom: 1px dashed #ccc;
}



/* check-icon */
.check-icon{
	background: #45423f;
	border-radius: 4px;
	color: #fff;
	font-size: 10px;
	padding: 5px 10px;
	position: absolute;
	text-align: center;

	right: 0;
	bottom: 4px;
}
.check-icon-inactive{
	background-color: #fff;
	border: 1px solid #45423f;
	color: #45423f;
}



/* recomendbox */
.recomendbox{
	margin-top: 30px;
}

.recomendbox .head{
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .3em;
}

.recomendbox-list > li{
	margin-left: 1%;
	width: calc(96% / 3)
}

.recomendbox-list > li:nth-of-type(n+4){
	margin-top: 24px;
}
.recomendbox-list > li a{
	display: block;
	font-size: 11px;
	position: relative;
}
.recomendbox-list > li img{
	width: 100%;
}
.recomendbox-list .check-icon{
	display: block;
	position: static;
	margin-top: 8px;
}


.content-btn{
	background: #958c84;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 14px;
	margin: 40px auto;
	padding: 20px 0;
	text-align: center;
	width: 80%;
	max-width: 320px;
}



.con_under_mailbox{
	margin: 10px auto 50px;
  padding: 30px 0;
  border: solid 1px #d1c0a5;
  text-align: center;
	width: 95%;
}






@media screen and (min-width:641px){
/*----------*/
/* PC style */
/*----------*/

	.main a{
		transition: .3s;
	}
	.main a:hover{
		opacity: .7;
	}

	.main a.content-imgbox:hover{
		opacity: 1;
	}


	/* title PC */
	.title-sub{
		margin-top: 40px;
	}


	/* itembox PC */
	.itembox-list{
		padding-top: 8px;
	}

	.itembox-list a{
		border:none;
		font-size: 12px;
		padding: 4px 0;
	}

	.itembox-list-sub > li:last-of-type a{
		border: none;
	}

	.itembox{
		margin-left: 0;
		width: calc(50% - 110px)
	}

	.itembox:nth-of-type(2n){
		margin-left: 220px;
	}


	/* check-icon PC */
	.check-icon{
		padding: 3px 8px;
	}


	/* recomendbox-list PC */
	.recomendbox-list > li{
		margin-left: 0;
		width: calc( calc(100% - 60px) / 6 )
	}
	.recomendbox-list > li:nth-of-type(n+2){
		margin-left: 12px;
	}
	.recomendbox-list > li:nth-of-type(-n+6){
		margin-top: 0
	}


	/* con_under_mailbox PC */
	.con_under_mailbox{
		width: 500px!important;
	}



}/* end media */