@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------

modal

------------------------------------------------- */
.modalCloseBtn{
}
.modalCloseBtn:before{
	content: "\f057";
	display: block;
	font-family: FontAwesome;
	color:#fff;
	font-size:35px;
	margin: 20px 7px 0 auto;
	width: 35px;
	height: 35px;
	cursor: pointer;
}
.modalCloseBtn:hover:before{
	color:#ffeb07;
}

/* -------------------------------------------------

modalContentKasou

------------------------------------------------- */
.modalContentKasou{
	color:#fff;
}
.modalContentKasou > h4{
	font-size: 1.5em;
	margin: 0 0 10px;
	font-weight: bold;
}
.modalContentKasou > div.priceBox{
	height: auto;
}
.modalContentKasou > div.priceBox table{

}
.modalContentKasou > div.priceBox p img{
	width: 100%;
}
.modalContentKasou > div.priceBox table th,
.modalContentKasou > div.priceBox table td{
	text-align: left;
	font-weight: normal;
}
.modalContentKasou > div.priceBox table th{
	background-color: #504661;
}
.modalContentKasou > div.priceBox table td{
	background-color: #352a49;
}
.modalContentKasou > div.priceBox table tr:nth-of-type(1) th:nth-last-of-type(1){
	font-weight: bold;
	background-color: #93656e;
	color:#ffe933;
}
.modalContentKasou > div.priceBox table tr td:nth-last-of-type(1){
	color:#ffe933;
	font-weight: bold;
	background-color: #6e4850;
}
.modalContentKasou > p.kasouJoken{
	color:#ffeb07;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 15px;
}
.modalContentKasou > p.kasouJoken02{
	color:#ffeb07;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 15px;
	margin: 20px 0 40px;
}
.modalContentKasou > div{
	height: auto;
	margin-top: 20px;
}
.modalContentKasou > div dl{
	width: calc(50% - 15px);
	float: left;
}
.modalContentKasou > div dl:nth-child(1){
	margin-right: 30px;
}
.modalContentKasou > div dl dt{
	margin-bottom: 15px;
	background-color: #ff6600;
	color:#111;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px;
	border-radius: 10px 10px 0 0;
	text-align: center;
}
.modalContentKasou > div dl dd img{
	width: 100%!important;
}
.modalContentKasou > div dl:nth-child(2) dd{
	display: list-item;
	list-style: disc;
	margin-left: 23px;
}
.locker_tit{
	border-top: 2px solid #fff;
	margin: 15px 0 0;
	padding: 15px 0 0;
	font-size: 1.2em;
}
.locker_box{
	padding-bottom: 40px;
}
.locker_box > div table th,
.locker_box > div table td{
	vertical-align: top;
	padding-bottom: 5px;
	text-align: left;
}
.locker_box > div table th{
	padding-right: 15px;
}
/* PC */
@media screen and (min-width:769px) {
.modalContentKasou{
	width: 1000px;
	margin: 0 auto;
	font-size: 1.2em;
}
.modalContentKasou > h4,
.modalContentKasou > p{
	text-align: center;
}
.modalContentKasou > div.priceBox{
	height: auto;
	margin-top: 15px;
}
.modalContentKasou > div.priceBox table{
	width: 100%;
}
.modalContentKasou > div.priceBox p{
	width: 490px;
	float: right;
}
.modalContentKasou > p.kasouSubtit{
	letter-spacing: 2px;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
}
.modalContentKasou > ul{
	width: 870px;
	margin: 0 auto;
}
.locker_box{
	height: auto;
}
.locker_box > p{
	width: 490px;
	float: left;
}
.locker_box > div{
	width: 490px;
	float: right;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.modalContentKasou{
	padding: 0 20px;
}
.modalContentKasou > div.priceBox table{
	width:100%;
	margin:10px 0;
}
.locker_box p img{
	width: 100%;
}
.locker_box > div p{
	margin-bottom: 5px;
}
.locker_box > div table th{
	width: 30px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.modalContentKasou > div dl{
	width: 100%;
	float: none;
}
.modalContentKasou > div dl:nth-child(1){
	margin-bottom: 15px;
}
}


/* -------------------------------------------------

modalContent

------------------------------------------------- */
.modalContent{
	color:#fff;
}
.modalContent a{
	color:#ffeb07;
}
.modalContent > h4{
	font-size: 1.5em;
	margin: 0 0 15px;
	font-weight: bold;
}
.modalContent > table th,
.modalContent > table td{
	font-weight: normal;
	text-align: left;
	border-bottom:2px solid #fff;
	padding:13px 10px 10px;
	vertical-align: top;
}
.modalContent > div{
	margin-bottom: 20px;
}
.modalPhotoBox{
	height: auto;
}
.modalPhotoBox p{
	float: left;
}
.modalPhotoBox p img{
	width:100%;
}
.p01 p{
	text-align: center;
}
.p02 p{
	width: 50%;
}
.p03 p{
	width: 33.33%;
}
.modalContent > ol li strong{
	display: inline-block;
	line-height: 120%;
	color:#111;
	background-color: #ff6600;
	border-radius: 50%;
	padding: 0 5px;
	text-align: center;
	margin-right: 8px;
}
/* PC */
@media screen and (min-width:769px) {
.modalContent{
	width: 1000px;
	margin: 0 auto;
	font-size: 1.2em;
}
.modalContent > h4{
	text-align: center;
}
.modalContent > p{
	text-align: center;
}
.modalContent > table{
	width: 700px;
	margin: 15px auto;
}
.modalContent > table th{
	width: 100px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.modalContent{
	padding: 0 20px 30px;
	margin-top: -15px;
}
.modalContent > table{
	width:100%;
}
.modalContent > table th{
	width: 60px;
}
.p01 p img{
	width: 100%;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.p01 p,
.p02 p,
.p03 p{
	width:100%;
	float: none;
}
}



/* -------------------------------------------------

Others

------------------------------------------------- */
.point5menuTit{
	margin-top: 25px;
	margin-bottom: 20px;
	background-color: #ff6600;
	color:#111;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px 0;
	border-radius: 10px 10px 0 0;
}
.point5menu{
	height: auto;
}
.point5menu li{
	width: calc(25% - 2px);
	float: left;
	margin: 0 0 20px 2px;
	font-size: 0.9em;
}
.point5menu li img{
	display: block;
	width: 100%;
	margin: 0 0 5px;
}
.point5menu li strong{
	color:#f4e108;
	display: block;
}
.point5menu li:nth-child(4n+1){
	clear: both;
}
/* PC */
@media screen and (min-width:769px) {
.point5menuTit{
	letter-spacing: 2px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.point5menuTit{
	padding: 5px 10px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.point5menu li{
	width: calc(50% - 2px);
}
.point5menu li:nth-child(2n+1){
	clear: both;
}
}



/* -------------------------------------------------

spotBox

------------------------------------------------- */
.spotBox{
	height: auto;
}
.spotBox p{
	width: calc(33.33% - 13px);
	float: left;
	padding-bottom: 15px;
}
.spotBox p:nth-child(3n+2){
	margin: 0 20px 0 19px;
}
.spotBox p:nth-child(3n+1){
	clear: both;
}
.spotBox p strong{
	display: inline-block;
	line-height: 120%;
	color:#111;
	background-color: #ff6600;
	border-radius: 50%;
	padding: 0 5px;
	text-align: center;
	margin-right: 8px;
}
.spotBox p img{
	display: block;
	width: 100%;
	margin: 5px 0 0;
}
/* PC */
@media print, screen and (min-width:769px) {
.spotBox{
	
}
}
/* Tablet */
@media screen and (max-width:768px) {
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.spotBox p{
	width: calc(50% - 10px);
}
.spotBox p:nth-child(3n+2){
	margin: 0;
}
.spotBox p:nth-child(3n+1){
	clear: none;
}
.spotBox p:nth-child(2n+1){
	clear: both;
	margin-right: 20px;
}
}





