/* CSS Document */

#slide_wrp { /*width: 1500px;*/width: 100%;
	max-width: 1500px;
	/*height: 600px;*/
	height: 490px;
	margin: 0 auto 30px auto;
	overflow: hidden;
	position: relative;
} 
#slider {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 0;
	width: 1500px;
	height: 490px;
}

.bonus dl dt {
	background: url(../images/mk_bns.png) no-repeat 6px center #c89f62;
	-webkit-background-size: auto 55%;
	background-size: auto 55%;
}
.bonus dl dt:after { left: -35px; }

.news dl dt {
	background-color: #008344; width: 100px; height: 25px; color: #fff; margin-right: 7px;
	text-align: center; line-height: 25px; font-size: 13px; padding-left: 0;
}
.news dl dd a { color: #595757; }


.wc { border: 1px solid #b4b5b5; padding: 14px 18px; position: relative; height: 120px; margin-bottom: 50px; }
.wc h1 { position: absolute; top: 42px; left: 159px; font-size: 22px; letter-spacing: -2px; }
.wc h2 { position: absolute; top: 84px; left: 165px; font-size: 14px; color: #008344; }
.wc p {
	display: block;
	position: absolute;
	left: 468px;
	top: 0px;
	width: 479px;
	font-size: 14px;
	line-height: 24px;
	border-left: 1px solid #b4b5b5;
	padding: 15px 40px;
}



.point { margin-bottom: /*80px*/50px; }
.point li {
	display: inline-block;
	width: 511px;
	vertical-align: top;
	position: relative;
	z-index: 0;
	margin-top: -1px;
	margin-left: -1px;
}
.point .wrp { border-radius: 30px; overflow: hidden; }
.point li a { display: block; }
.point li a dl {
	display: block;
	position: relative;
	text-decoration: none;
	color: #221814;
	width: 469px;
	padding: 20px;
	z-index: 2;
	border: 1px solid #b4b5b5;
	height: 100%;
}
.point li a:before,.point li a:after, .point li:before,.point li:after {
	content: '';
	display: block;
	width: 0%;
	height: 10px;
	background: url(../images/point_pat.gif);
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
		 -o-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
}
.point li:before,.point li:after { width: 10px; height: 0%; }
.point li a:after { top: auto; left: auto; right: 0; bottom: 0; }
.point li:after { top: auto; left: auto; right: 0; bottom: 0; }
.point li a:hover:before,.point li a:hover:after { width: 100%; }
.point li:hover:before,.point li:hover:after { height: 100%; }

.point dt {
	position: relative;
	text-align: right;
	font-size: 25px;
	color: #595757;
	border-bottom: 2px dotted #b4b5b5;
	padding-bottom: 10px;
	margin: 0 auto;
	margin-bottom: 30px;
	width: 470px;
	display: block;
}
.point dt span.grn { color: #008344; }
.point dt span.sub { color: #595757; font-size: 14px; display: block; line-height: 2; font-family: 'Judson', serif; }
.point dt .img { position: absolute; top: 6px; left: 0; }
.point dd.txt {
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 2px;
	border-bottom: 2px dotted #b4b5b5;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.point dd.txt p { height: 100px; }
.point .pimg { margin: 0 auto 15px auto; display: block; }

.point dt.point_line2 { line-height: 1; padding-bottom: 0; }
.point dt.point_line2 span.sub { line-height: 1.6; }

.wd { position: relative; color: #fff; padding: 20px; margin-bottom: 70px;
	background-color: #008344;
	height: 90px;
	overflow: hidden;
}
.wd .img1 { position: absolute; top: 0; left: 437px; }
.wd .img2 { position: absolute; top: 0; left: 628px; }
.wd .img3 { position: absolute; top: 0; left: 820px; }
.wd h1 {
	font-size: 30px;
	line-height: 1;
	vertical-align: middle;
	letter-spacing: -5px;
	padding-bottom: 9px;
	border-bottom: 2px dotted #fff;
	width: 380px;
	margin-bottom: 13px;
}
.wd h1 span { margin-left: 20px; font-size: 14px; position: relative; top: -7px; letter-spacing: 1px; }
.wd p { width: 359px; letter-spacing: 3px; line-height: 18px; }
.wd .img1:after,.wd .img2:after,.wd .img3:after {
	content: '';
	display: block;
	width: 178px;
	height: 178px;
	border-radius: 50%;
	border: 5px solid transparent;
	position: relative;
	top: -163px;
	left: -4px;
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
		 -o-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
}
.wd:hover .img1:after,.wd:hover .img2:after,.wd:hover .img3:after {
	border: 5px solid #fff;
}



.rp {
    /*display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;*/
    margin-bottom: 80px;
    width: 1021px;
}
.rp li { border: 1px solid #b4b5b5; border-left: none; position: relative; width: 339px;
	display: inline-block; }
.rp li:nth-child(1) { border-left: 1px solid #b4b5b5; }
.rp li a { color: #595757; }
.rp li .mk {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 8px;
	left: 8px;
	background-color: #fff;
	border-radius: 50%;
	padding: 10px;
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
		 -o-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
}
.rp li .mk .j {
	font-size: 15px;
	line-height: 16px;
	display: block;
	text-align: center;
	width: 60px;
	padding: 0 5px;
	margin: 6px auto 0 auto;
}
.rp li .mk .e {
	border-top: 1px solid #595757;
	font-size: 10px;
	width: 70px;
	text-align: center;
	display: block;
	margin: 0 auto;
	margin-top: 4px;
	padding-top: 5px;
}
.rp p.ttl { display: block; text-align: center; font-size: 16px; line-height: 24px; height: 69px; margin: 27px 0 20px 0; }
.rp .price { margin: 20px; border: 1px solid #b4b5b5; padding: 10px; text-align: center; font-size: 14px; }
.rp li a .mk {
	opacity: 1;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	-webkit-transform: translateZ(0) rotateY(0);
	-moz-transform: translateZ(0) rotateY(0);
	-ms-transform: translateZ(0) rotateY(0);
	-o-transform: translateZ(0) rotateY(0);
	transform: translateZ(0) rotateY(0);
}
.rp li a:hover .mk {
	opacity: 0;
	-webkit-transform: translateZ(-1000px) rotateY(90deg);
	-moz-transform: translateZ(-1000px) rotateY(90deg);
	-ms-transform: translateZ(-1000px) rotateY(90deg);
	-o-transform: translateZ(-1000px) rotateY(90deg);
	transform: translateZ(-1000px) rotateY(90deg);
}
.rp li a .mk2 {
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 219px;
	text-align: center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: rgba(50,50,50,0.7);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.35s ease 0.2s;
	-moz-transition: all 0.35s ease 0.2s;
	transition: all 0.35s ease 0.2s;
	-webkit-transform: translateZ(-1000px) rotateY(-90deg);
	-moz-transform: translateZ(-1000px) rotateY(-90deg);
	-ms-transform: translateZ(-1000px) rotateY(-90deg);
	-o-transform: translateZ(-1000px) rotateY(-90deg);
	transform: translateZ(-1000px) rotateY(-90deg);
}
.rp li a:hover .mk2 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateZ(0) rotateY(0);
	-moz-transform: translateZ(0) rotateY(0);
	-ms-transform: translateZ(0) rotateY(0);
	-o-transform: translateZ(0) rotateY(0);
	transform: translateZ(0) rotateY(0);
}

.rp li a .mk2 .j {
	display: block;
	padding-top: 20%;
	font-size: 17px;
	width: 190px;
	margin: 0 auto 10px auto;
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
}
.rp li a .mk2 .e { font-size: 18px; }
.rp li a .img { width: 339px; height: 219px; overflow: hidden; }
.rp li a .img img { object-fit: cover; }
ul.bn_ght { 
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1px dotted #b4b5b5;
	padding-top: 30px;
	flex-wrap: wrap;
}

ul.bn_ght li{
	/*width: 10rem;*/
	margin-bottom: 2rem;
}
ul.bn_ght li a:hover{
	opacity: .5;
	transition: .3s ease;
}

ul.bn_ght img{
	width: 10rem;
}
ul.bn_ght li:nth-child(3) img{
	width: 8rem;
}

/* Go to */
#rsv {
	margin-bottom: 15px;
}
.bnr-containts {
	max-width: 1020px;
	margin:  0 auto 15px;
}
.bnr-containts .inf-bn {
	display: block;
	margin: 0 auto 10px;
}
.bnr-containts .inf-bn:last-child {
	margin-bottom: 0;
}
.bnr-containts img {
	max-width: 100%;
}
.bnr-containts a:hover img {
	opacity: .8;
	transition: .3s all ease;
}

@media screen and (max-width : 600px){

#slide_wrp { width: 100%; max-width: 100%; height: auto; margin: 0 auto 1em auto; overflow: hidden; position: relative; } 
#slider { position: static; top: 0; left: 0; margin-left: 0; width: 100%; height: auto; }

.bonus dl dt { width: auto; display: block; padding: 0 0; margin: 0 0 0.5em 0; text-align: center; }
.bonus dl dt:after { display: none; }
.bonus dl dd { margin-bottom: 1em; }
.wc { height: auto; margin: 0 0.5em 2em 0.5em; padding: 0.5em; }
.wc img { width: 4em; position: absolute; top: 0.5em; left: 0.5em; }
.wc h1 { position: static; display: block; font-size: 1.3em; text-align: right; margin: 0.2em 0; }
.wc h2 {
	position: static;
	text-align: right;
	display: block;
	font-size: 0.9em;
	letter-spacing: -1px;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #b4b5b5;
	margin-bottom: 1em;
}
.wc p {
	position: static;
	width: auto;
	padding: 0;
	border: none;
	font-size: 0.8em;
	line-height: 1.4em;
}
.news dl dt, .news dl dd { display: inline-block; margin: 0 0 0.5em 0; vertical-align: middle; }
.news dl dt { width: 23%; height: auto; font-size: 0.7em; padding: 0.1em 0; }
.news dl dt:after { display: none; }
.news dl dd { width: 75%; padding: 0 0 0.5em 0; border-bottom: 1px dotted #b4b5b5; }



.point { margin: 0 0.5em 2em 0.5em; }
.point li { display: block; width: auto; height: auto; margin: 0 0; border-radius: 0; }
.point li a, .point .wrp { position: static; width: auto; height: auto; }
.point li a:before,.point li a:after, .point li:before,.point li:after { display: none;  }
.point li a dl { color: #221814; width: auto; padding: 10px 0; border: none; }
.point dt {
	border-top: 1px solid #b4b5b5;
	width: auto;
	font-size: 1.2em;
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	margin-bottom: 0.5em;
}
.point dt .img { width: 3.3em; }
.point dt span.sub { font-size: 0.8em; }
.point dd.txt p { padding-bottom: 0; margin-bottom: 0; height: auto;font-size: 0.8em; line-height: 1.5em; padding-bottom: 1em; letter-spacing: 0; }
.point .pimg { width: 100%; margin-bottom: 0; }
.point li:before,.point li a:before,.point li a:after  { display: none; }
.point li a { padding-bottom: 0; margin-bottom: 0; }
.point .wrp { position: relative; top: auto; left: auto; }
.point .wrp:before {
	content: '';
	display: block;
	position: absolute;
	background-color: #fff;
	width: 1.4em;
	height: 1.4em;
	left: 50%;
	bottom: 1em;
	margin-left: -0.7em;
	border-radius: 50%;
}
.point .wrp:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0.9em;
	left: 50%;
	margin-left: -0.4em;
	border: 0.4em solid transparent;
	border-top: 0.7em solid #008344;
}

.wd_img { width: 100%; }
.wd { width: auto; padding: 0.5em; }
.wd h1 { font-size: 1.4em; border-bottom: 1px dotted #fff; width: auto; }
.wd h1 span { font-size: 0.5em; display: block; position: static; margin-left: 0; }
.wd p { letter-spacing: 0; width: 76%; font-size: 0.5em; }
.wd .img1 { left: auto; right: -8em; }
.wd .img1 img { width: 11em; }
.wd .img2 { top: 0.7em; left: 47%; }
.wd .img2 img { width: 3em; }
.wd .img3 { top: 0.7em; left: 62%; }
.wd .img3 img { width: 3em; }

.rp { width: auto; }
.rp li, .rp li img { width: 100%; }
.rp li .mk .j { font-size: 0.9em; }

.rp li a .img { width: 100%; height: 74vw; overflow: hidden; }
.rp li a .img img { object-fit: cover; }

.sericon h2 { padding-left: 5vw; }
 ul.bn_ght { display: flex/*block*/; flex-wrap: wrap; text-align: center; }
 ul.bn_ght li { width: 35vw; margin: 0 auto 5vw; }
 ul.bn_ght img { width: 30vw; }
 ul.bn_ght li a:hover{
	opacity: .5;
	transition: .3s ease;
}
 /*ul.bn_ght li:first-child img, ul.bn_ght li:last-child img { width: 30vw; }*/

 /* Go to */
	#rsv {
		margin-bottom: 3vw;
	}
	.bnr-containts {
		width: 80vw;
		margin:  0 auto 3vw;
	}
	.bnr-containts .inf-bn img {
		max-width: 100%;
		margin: 0 auto 2vw;
	}
	.bnr-containts .inf-bn:last-child img {
		margin-bottom: 0;
	}
	.bnr-containts img {
		max-width: 100%;
	}
}


@media screen and (min-width: 751px) {
	.for_sp { display: none; }
	.for_pc { display: block; }
}

@media screen and (max-width: 750px) {
	.for_pc { display: none; }
	.for_sp {display: block;}
}