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

#m-contents a,
#m-contents img,
#m-contents button{
	transition: .3s;
}
.m-column{
	font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ ゴシック", sans-serif;
	font-weight: 500;
}

.m-column-btn{
	display: none !important;
}
.is-white-back{
	background: #fff;
}

.is-color-back{
	background: #e5f66d;
}
/* レイアウト */


.headline,
#cp_include_box2 h2.m-tit-column{
	color: #609200;
	font-size: 34px;
	font-weight: 600;
	text-align: center;
	padding: 20px 0;
}
.ttl_box{
	display: block;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	width: 100%;
}
.main_box{
	display: block;
	margin: 10px auto 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
}
.main_box img{
	display: block;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
.main_box_moji{
	color: #a40035;
	display: block;
	float: left;
	font-size: 20px;
	line-height: 1.8em;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: 200px;
	width: 100%;
}

.main_box_moji h1{
	display: block;
	overflow: hidden;
	font-size: 58px;
	font-weight: bold;
	margin: 10px 0;
	color: #795845;
	line-height: 1.2em;
}

.main_box_moji2{
	color: #795845;
	display: block;
	float: left;
	font-size: 16px;
	line-height: 1.8em;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: 290px;
	width: 100%;
	font-weight: bold;
}


.con1{
	display: block;
	overflow: hidden;
	width: 100%;
	text-align: center;
	color: #666;
}
.con1 ul{
	display: block;
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.con1 ul li{
	display: inline-block;
	overflow: hidden;
	margin: 5px;
	width: 300px;
	background-color: #795845;
	color: #fff;
	text-align: center;
	font-size: 20px;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	 /* Firefox用 */
	transition: .3s;
}
.con1 ul li:first-of-type{
	background-color: #609200;
}
.con1 ul li:nth-of-type(2){
	background-color: #ea893c;
}

.con1 ul li a{
	color: #fff;
	display: block;
	padding: 20px 0;
	text-decoration: none;
}


.con1 ul li a::after{
	backface-visibility: hidden;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	content: "";
	display: inline-block;
	height: 18px;
	margin-left: 20px;
	position: relative;
	top: -6px;
	transform: rotate(135deg);
	transition: all 0.2s linear 0s;
	vertical-align: middle;
	width: 18px;
}



.con1 ul li img{
	width: 100%;
}

.con1 > a{
	display: inline-block;
	font-size: 20px;
	margin: 10px 0;
	text-align: center;
}
.con1 > a span::after{
	backface-visibility: hidden;
	border-right: 1px solid #999;
	border-top: 1px solid #999;
	content: "";
	display: inline-block;
	height: 16px;
	margin-left: 20px;
	position: relative;
	top: -6px;
	transform: rotate(135deg);
	transition: all 0.2s linear 0s;
	vertical-align: middle;
	width: 16px;
}
.con1 > a{
	display: inline-block;
}
.con1 > a::after{
	background: #ccc;
	content: "";
	display: block;
	height: 1px;
	opacity: 0;
	transition: .3s;
	width: 100%;
}

/* con3 */
.term{
	border-top: 2px dashed #609200;
	border-bottom: 2px dashed #609200;
	color: #609200;
	font-size: 20px;
	padding: 10px 0;
}


.con3{
	display: block;
	overflow: hidden;
	width: 100%;
	text-align: center;
	margin: 0 0 30px 0;
	color: #666;
	font-size: 14px;
}





.cp_area{
	margin: 20px auto 0;
	padding: 30px 0 0;
	text-align: left;
	width: 100%;
}

.cp_bana_area{
	width: 100%;
	display: block;
	overflow: hidden;
	text-align: center;
	background-color: #609200;
	padding: 40px 0;
	margin: 0 auto;
}
.cp_bana_area img{
	width: 1000px;
	display: block;
	overflow: hidden;
	margin: 0 auto 30px;
}
.cp_bana_area a img{
	width: 1000px;
	display: block;
	overflow: hidden;
	margin: 0 auto 30px;
}

.cp_bana_area2{
	width: 100%;
	display: block;
	overflow: hidden;
	text-align: center;
	margin: 40px 0 0;
}

.cp_bana_area2 ul{
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: 1000px;
}
.cp_bana_area2 ul li{
	margin: 10px;
}
.cp_bana_area2 ul li img{
	display: block;
	width: 100%;
}

.con3 nav{
}
.con3 nav ul{
	margin: 0 auto;
	overflow: hidden;
	width: 930px;
}
.con3 nav ul li{
	box-sizing: border-box;
	float: left;
	list-style: none;
	margin: 0 20px 0 0;
	width: 170px;
}
.con3 nav a{
	background: #aaa;
	color: #fff;
	display: block;
	font-size: 12px;
	padding: 10px 0;
}
.con3 nav ul li:last-of-type{
	margin-right: 0;
}
.con3 nav ul li:last-of-type a{
	background: #666;
}
.con3 nav a::after{
	backface-visibility: hidden;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	content: "";
	display: inline-block;
	height: 6px;
	margin-left: 3px;
	position: relative;
	top: -1px;
	transform: rotate(40deg) skew(-10deg, 0deg);
	transition: all 0.2s linear 0s;
	vertical-align: middle;
	width: 6px;
}
.con3 nav + hr{
	margin: 0 auto;
	overflow: hidden;
	margin: 24px auto 0;
	width: 930px;
}




/* con4 */
.con4{
	color: #666;
	display: block;
	font-size: 14px;
	margin: 0 0 50px 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
}

.con4 h2+p{
	color: #a40035;
	font-size: 12px;
}

.con4 > section{
	background-color: #f1eae1;
	margin: 30px 0 40px;
	padding: 30px 0 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
}

.con4 h3{
	color: #333;
	font-size: 28px;
	font-weight: 600;
}
.con4 h3+p{
	color: #333;
	font-size: 12px;
}
.con4 ul{
	margin: 0 auto;
	overflow: hidden;
	padding: 10px 0 25px;
	width: 810px;
}
.con4 ul li{
	background: #fff;
	box-sizing: border-box;
	border: 2px solid #e3d6c4;
	float: left;
	list-style: none;
	margin: 0 30px 25px 0;
	width: 250px;
}

.close-text{
	font-size:2.0em;
	padding: 10px 0;
	display: block;
}

.hide{
	display: none;
}


.move-btn{
	background: #45423f;
	border-radius: 4px;
	color:#fff;
	font-size: 16px;
	display: block;
	margin: 20px auto 0;
	padding: 12px 0;
	text-align: center;
	max-width: 320px;
}


#cp_include_box2 .m-column-body{
	margin-top: 0;
}


.con6 .m-btn-active{
	max-width: 320px;
	margin: 0 auto;
}

@media screen and (min-width: 641px) {

.con4 ul li:nth-of-type(3n){
	margin-right: 0;
}


.con4 ul li a{
	display: block;
	height:100%;
}
.con4 ul li a img{
	display: inline-block;
	margin: 10px 0 0;
	width: 90%;
}
.con4 ul li a img + img{
margin: 0;
	width: 60%;
}
.con4 ul li a div{
	background: #fff;
	box-sizing: border-box;
	padding: 0 0 10px;
}
.con4 b.item-name{
	color: #333;
	display: block;
	font-size: 14px;
	margin: 12px 0 0;
	text-align: center;
}
.con4 span.sub{
	box-sizing: border-box;
	color: #333;
	display: block;
	font-size: 12px;
	padding: 0 5px;
	text-align: center;
}

.con4 > section ul li{
	height: 152px;
}
.con4 > ul li{
	background: #e3d6c4;
	height: 245px;
}


.con6{
	display: block;
	overflow: hidden;
	width: 100%;
	text-align: center;
	padding: 0 0 80px;
}

.con6 h2{
	display: block;
	overflow: hidden;
	margin: 0;
	font-size: 30px;
	font-weight: lighter;
	color: #333;
	line-height: 50px;
}











.close{
	border-color: #f0e9e1!important;
}
.close a{
	cursor: default;
	display: block;
	background: #f0e9e1;
}
.close a img{
	opacity: .2;
}
.close a span.sub{
	display: none;
}

.close a::after{
	box-sizing: border-box;
	color: #333;
	content: "終了しました";
	display: block;
	font-size: 16px;
	padding: 0 5px;
	text-align: center;
	width: 100%;
}
.con4 > section .close a{
	position: relative;
}
.con4 > section .close a::after{
	position: absolute;
	top: 66px;
}



/*--- クーポンコード ------*/
.coupon_box{
	width: 100%;
	display: block;
	overflow: hidden;
}
.coupon_box ul{
	width: 1000px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	padding: 0;
}
.coupon_box ul li{
	width: 350px;
	margin: 0 20px 30px;
	display: inline-block;
	overflow: hidden;
	padding: 0;
}
.coupon_box ul li img{
	display: block;
  margin: 0 auto;
	width: 100%;
}

.coupon_box li > div{
	background: #609200;
	padding-bottom: 30px;
}

.copy-sub{
	color: #fff;
	font-size: 20px;
}
.copyTarget{
	background: #fff;
	border-right: 20px solid #609200;
	border-left: 20px solid #609200;
	box-sizing: border-box;
	color: #333;
	font-size: 32px;
	line-height: 1;
	padding: 8px 0;
}
.copyButton{
	background: #45423f;
	border-radius: 4px;
	color:#fff;
	display: block;
	font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ ゴシック", sans-serif;
	font-size: 20px;
	margin: 20px auto 0;
	padding: 10px 0;
	width: 200px;
}


.coupon-sub{
	color: #609200;
	font-weight: 600;
	margin-bottom: 30px;
}


.matome {
	width: 100%;
	display: block;
	overflow: hidden;
	background-color: #eee;
	padding: 10px 0 30px;
}
.matome ul{
	width: 1000px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	padding: 0;
}
.matome ul li {
	overflow: hidden;
	padding: 0;
	text-align: left;
	font-size: 12px;
	line-height: 1.5em;
}
.matome img{
	margin: 0 auto;
	display: block;
	overflow: hidden;
	padding: 0;
}
}






/*-----------------------------*/
/*-----------------------------*/
/*----------↓ HOVER ↓----------*/
/*-----------------------------*/
/*-----------------------------*/
@media screen and (min-width: 641px) {
#m-contents a:hover,
#m-contents button:hover{
	opacity: .7;
	text-decoration: none;
}
.con1 ul li:hover{
	opacity: .5;
}
.con1 > a:hover::after{
	opacity: 1;
}
.con4 ul li.close a:hover{
	opacity: 1;
}

}





/*-----------------------------*/
/*-----------------------------*/
/*-----------↓ SMP ↓-----------*/
/*-----------------------------*/
/*-----------------------------*/
@media screen and (max-width: 640px) {
/* 表示領域が640px未満の場合に適用するスタイル */

.main_box img{
	width: 100%;
}


.headline,
#cp_include_box2 h2.m-tit-column{
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2em;
	padding: 10px 0;
	text-align: center;
}
.ttl_box{
	display: block;
	float: none;
	margin: 0 auto 0;
	padding: 0;
	width: 100%;
}
.main_box{
	margin: 0 auto;
	overflow: hidden;.ttl_box
	position: relative;
	text-align: center;
	width: 100%;
}
.main_box img{
	display: block;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
.main_box_moji{
	display: none;
}

.main_box_moji2{
	float: none;
	font-size: 4vw;
	margin: 5vw auto;
	position: static;
	width: 90%;
}

.content{
	margin: 0 0 20px;
}

/* SMP con1 */
.con1{
	display: block;
	overflow: hidden;
	width: 100%;
}
.con1 ul {
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 5vw auto 0;
	text-align: center;
}

.con1 ul li{
	display: block;
	float: left;
	overflow: hidden;
	margin: 2px 4%;
	width: 90%;
	color: #fff;
	padding: 0;
	text-align: center;
	font-size: 5vw;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	 /* Firefox用 */
}
.con1 ul li:first-of-type{
	margin: 0 0 0 4%;
}
.con1 ul li a{
	color: #fff;
	text-decoration: none;
	padding: 10px 0 5px;
}

.con1 ul li a::after {
		backface-visibility: hidden;
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
		content: "";
		display: block;
		height: 4vw;
		margin: 2vw auto 0;
		position: relative;
		top: -6px;
		transform: rotate(135deg);
		transition: all 0.2s linear 0s;
		vertical-align: middle;
		width: 4vw;
}

.con1 ul li img{
	width: 100%;
}



.con1 > a{
	margin: 5vw 0;
}
.con1 > a span::after{
	backface-visibility: hidden;
	border-right: 1px solid #999;
	border-top: 1px solid #999;
	content: "";
	display: inline-block;
	height: 16px;
	margin-left: 20px;
	position: relative;
	top: -6px;
	transform: rotate(135deg);
	transition: all 0.2s linear 0s;
	vertical-align: middle;
	width: 16px;
}
.con1 > a{
	display: inline-block;
}
.con1 > a::after{
	display: none;
}



/* SMP con3 */
.term{
	font-size: 14px;
	padding: 5px 0;
}

.con3{
	margin: 0 0 30px;
}
.content .con3 h2{
	margin: 20px 0;
}
.con3 .campaign_lp_link{
	display: none;
}
.cp_area{
	border-top: 1px solid #ccc;
	margin: 20px auto 0;
	padding: 30px 0 0;
	text-align: left;
	width: 100%;
}
.cp_bana_area img{
	width: 100%;
}

.cp_bana_area a img{
	width: 100%;
}
.cp_area2{
	border-top: 1px solid #ccc;
	margin: 20px auto 0;
	padding: 30px 0 0;
	text-align: left;
	width: 100%;
}
.cp_bana_area2 img{
	width: 100%;
}

.cp_bana_area2 a img{
	display: block;
	margin: 0 0 10px;
	width: 100%;
}

.cp_bana_area2{
	width: 100%;
	display: block;
	overflow: hidden;
	text-align: center;
	margin: 20px 0 0;
}

.cp_bana_area2 ul{
	display: block;
}
.cp_bana_area2 ul li{
	margin: 0 12px;
	width: calc(100% - 24px);
}
.cp_bana_area2 ul li img{
	width: 100%;
}
.cp_bana_area2.one-column ul li{
	max-width: calc(100% - 24px);
}
.con3 nav{
	margin-top: -5vw;
}
.con3 nav ul{
	margin: 11vw auto 0;
	width: 100%;
}
.con3 nav ul li{
	border-radius: 6px;
	float: left;
	list-style: none;
	margin: 0 2% 2vw 4%;
	width: 45%;
}
.con3 nav ul li:nth-of-type(2n){
	margin: 0 0 2vw 0;
}
.con3 nav a{
	color: #fff;
	display: block;
	font-size: 3vw;
	padding: 10px 0;
}
.con3 nav ul li:last-of-type{
	background: #666;
	width: 92%;
}
.con3 nav a::after{
	height: 1.5vw;
	width: 1.5vw;
}
.con3 nav + hr{
	margin: 0 auto;
	overflow: hidden;
	margin: 5vw auto 0;
	width: 100%;
}




/* SMP con4 */
.con4{
	color: #666;
	margin: 0 0 50px;
	padding: 0;
	width: 100%;
}

.con4 h2+p{
	box-sizing: border-box;
	font-size: 3vw;
	padding: 0 4%;
	margin: 1vw 0 0;
}

.con4 > section{
	margin: 8vw 0 3vw;
	padding: 8vw 0 0;
	width: 100%;
}

.con4 h3{
	font-size: 6.5vw;
}
.con4 h3+p{
	font-size: 4vw;
}
.con4 ul{
	margin: 0 auto;
	padding: 8vw 0 8vw;
	width: 100%;
}

.con4 ul li{
	box-sizing: border-box;
	margin: 0 2% 2vw 4%;
	width: 45%;
}
.con4 ul li:nth-of-type(2n){
	margin: 0 0 2vw 0;
}

.con4 ul li a img{
	margin: 2vw 0 0;
	width: 90%;
}
.con4 ul li a img+img{
	margin: 0;
	width: 60%;
}
.con4 ul li a div{
	padding: 0 0 10px;
}
.con4 b.item-name{
	font-size: 4.2vw;
	margin: 2vw 0 0;
}
.con4 span.sub{
	font-size: 3.2vw;
	padding: 0 1vw;
}
.close a::after{
	font-size: 3.2vw;
	padding: 0 5px;
}
.con4 > section ul li{
	height: 30vw;
}
.con4 > ul li{
	background: #e3d6c4;
	height: 62vw;
}


/* smp */
.con6{
	display: block;
	overflow: hidden;
	width: 100%;
	text-align: center;
	padding: 0 0 80px;
}

.con6 h2{
	display: block;
	overflow: hidden;
	margin: 0;
	font-size: 30px;
	font-weight: lighter;
	color: #333;
	line-height: 50px;
}




.con4 > section .close a::after{
	font-size: 4vw;
	position: absolute;
	top: 12.5vw;
}


/*---　　　クーポンコードSMP　　------*/

.coupon_box ul{
	width: 100%;
	margin: 0 auto 30px;
}
.coupon_box ul li{
	width: 70%;
	margin: 10px auto;
}
.coupon_box ul li:first-of-type{
	margin-top: 0;
}
.coupon_box li > div{
	background: #609200;
	margin: 0 auto;
	padding-bottom: 20px;
	width: 100%;
}
.coupon_box ul li img{
	display: block;
  margin: 0 auto;
	width: 100%;
}

.copy-sub{
	color: #fff;
	font-size: 16px;
}
.copyTarget{
	background: #fff;
	border-right: 20px solid #609200;
	border-left: 20px solid #609200;
	box-sizing: border-box;
	color: #333;
	font-size: 32px;
	line-height: 1;
	padding: 8px 0;
}
.copyButton{
	background: #45423f;
	border-radius: 4px;
	color:#fff;
	display: block;
	font-size: 16px;
	margin: 10px auto 0;
	padding: 12px 0;
	width: 70%;
}


.coupon-sub{
	color: #609200;
	font-weight: 600;
	margin-top: -10px;
	margin-bottom: 20px;
}

.matome {
	width: 100%;
	display: block;
	font-size: 11px;
	text-align: left;
	background-color: #eee;
	padding: 0 0 20px;
}
.matome ul{
	width: 90%;
	margin: 0 auto;
}
.matome ul li {
		width: 100%;
		display: block;
}
.matome img{
	margin: 0 auto;
	width: 90%;
}
}

/* smp キャンペーンレイアウト */
@media screen and (max-width: 640px) {
/* 表示領域が640px未満の場合に適用するスタイル */

.campaign_lp_detail,.mfp-content>.campaign_lp_detail{
	width:90%!important;
	position:relative;
	padding: 0 3% ;
}

.campaign_lp_left{
	margin-bottom: 20px;
	text-align: center;
	width:100%;
	float:none;
}
.campaign_lp_right{
	width:100%;
	float:none;
}
.campaign_lp_right p,
.campaign_lp_right div{padding: 10px ;}

.campaign_lp_title h2{
	color: #555;
	padding-bottom: 3vw;
	padding-left: 5px;
	font-size: 5vw;
	line-height:1.6em;
	font-weight: 600;
	text-align: left;
}

.campaign_lp_left_off{
	height: 80vw;
}
.campaign_lp_fincp {
	display: block;
	font-size: 16px;
	overflow: hidden;
	padding: 38vw 0;
	position: relative;
	text-align: center;
	top: -78vw;
	width: 100%;
}

}
/*-----------------------------*/
/*-----------------------------*/
/*-----------------------------*/
/*-----------------------------*/