@charset "utf-8";
/* CSS Document */

/*****************************************
***-----------    共　通    -----------***
******************************************/
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after{
		content:".";
		display:block;
		clear:both;
		height:0;
		visibility:hedden;
}
.respo img {
	width:100%;
	max-width: 320px;
	height: auto;
	margin:0 auto;
	text-align:center;
}
.red{
	color:#E60012;
	font-weight:600;
}
.blue{
	color:#06F;
	font-weight:600;
}
.white1{
	background:#ff0000;
	text-align:center;
	color:#ffffff;
	margin:0;
}

.center-img{
	margin:0 auto;
}

.coupon_wrap img{
	 width: 100%;
}
div{
	display:block;
	margin:0px;
	padding:0;
}

/***************************この上までは共通*********************/
section{
	max-width:960px;
	width:100%;
	height:auto;
	margin:0 auto;
	padding-left:1em;/***********これを取る****************/
}
.top01 img{
	max-width:960px;
	width:100%;
	height:auto;
}
.coupon_wrap{
	max-width:960px;
	width:100%;
	height:auto;
	margin:0 auto;
}
.coupon{
	position: relative;
	border:solid 1px #000000;
	max-width:315px;
	width:31%;
	height:auto;
	float:left;
	padding:0;
	margin-right:1em;
	margin-bottom:1em;
  
}
.cbox{
	padding:0.1em;
	height:270px;
	background:#80FFD5;
}
.cbox p{
	font-size:1.0em;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:0;
}
.l_red{
	color:#ff0000;
	font-size:1.2em;
	font-weight:bold;
}
.cc01{
	background:#80FFD5;
}
.waku_red{
	margin-top:3em;
	max-width:958px;
	width:100%;
	height:auto;
	border:solid 2px #ff0000;
}
.a_h1{
	background:#ff0000;
	text-align:center;
	font-size:1.2em;
	padding:0.5em 0;
	color:#ffffff;
	margin:0;
}
.center{
	text-align:center;
}
.code{
	max-width:450px;
	width:100%;
	margin:0 auto;
}
aside img{
	text-align:center;
	max-width:450px;
	width:100%;
	height:auto;
	margin:1em auto;
}
.a_toiawase{
	background:#ffd700;
	text-align:center;
	font-size:1.2em;
	padding:0.5em 0;
	color:#2b2b2b;
	margin:0;
}

/*============================================
アイコン実装 webページへ
============================================*/
.icon_w {
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 10px;
}
/*===============================================
詳しくボタン og、red
===============================================*/
.btn_og{
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: inline-block;
    padding: 0.4em 1em;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    color: #111;
    background: #ffb366;
    transition: .4s;
  }

.btn_og:hover {
    text-decoration: none;
    background: #ff3300;
    color: white;
  }

.btn_red{
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: inline-block;
    font-weight: bold;
    padding: 0.4em 1em;
    text-decoration: none;
    border-radius: 4px;
    color: #111;
    background: #ff1100;
    transition: .4s;
  }

.btn_red:hover {
    background: #ff3300;
    color: white;
  }

/*===============================================
●style.css 画面の横幅が960pxまで
===============================================*/
@media screen and (max-width: 960px){
	section{
		max-width:960px;
		width:100%;
	}
	.top01 img{
		max-width:960px;
		width:100%;
	}
	.coupon_wrap{
		max-width:960px;
		width:100%;
		margin:0 auto;
	}
	.coupon{
		max-width:315px;
		width:30%;
	}
}

/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
	section{
		max-width:768px;
		width:100%;
		margin:0 auto;
	}
	.top01 img{
		max-width:768px;
		width:100%;
	}
	.coupon_wrap{
		max-width:768px;
		width:100%;
	}
	.coupon{
		max-width:380px;
		width:47%;
	}
	.cbox{
		height:230px;
	}
}
/*===============================================
●画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
	section{
		max-width:640px;
		width:100%;
	}
	.top01 img{
		max-width:640px;
		width:100%;
	}
	.coupon_wrap{
		max-width:640px;
		width:100%;
	}
	.coupon{
		border:solid 1px #000000;
		max-width:310px;
		width:45%;
	}
	.a_h1{
		font-size:1.2em;
	}
	.cbox{
		height:270px;
	}
}
/*===============================================
●s画面の横幅が480pxまで
===============================================*/
@media screen and (max-width:480px){
	section{
		max-width:480px;
		width:100%;
		padding-left:0.5em;
	}
	.top01 img{
		max-width:480px;
		width:100%;
		height:auto;
	}
	.coupon_wrap{
		max-width:480px;
		width:100%;
	}
	.coupon{
		max-width:470px;
		width:96%;
		margin:0.5 auto;
	}
	.a_h1{
		font-size:1.2em;
	}
	.message{
		font-size:1.0em;
	}
	.cbox{
		height:auto;
	}
}