@charset "Shift_JIS";

#spmailmag_block{
	background-color:#fff;
	margin-bottom:20px;
	padding: 20px 20px 50px;
}
#spmailmag_block .section_title h1 span{
	color:#cc2121;
	font-weight:bold;
}

/*----- タイトル下 特典説明-----*/
#privilege_holder{
	margin-top:30px;
	background:url("/sapporo/spmailmag/images/holder_bg.png") top right no-repeat;
	background-size:180px 113px;
}
#privilege_holder #characteristic{
	margin-bottom:10px;
	padding-right:170px;
}
#privilege_holder #characteristic li{
	float:left;
	width:220px;
	height:20px;
	margin-right:10px;
	padding:5px;
	text-align:center;
	line-height:20px;
	border-radius:5px;
	background-color:#56d4ff;
}
#privilege_holder > p{
	height:60px;
	margin-right:180px;
	line-height:18px;
}
#privilege{
	margin:20px 0 30px;
}
#privilege li{
	position:relative;
	float:left;
	width:184px;
	padding:10px;
	margin-right:10px;
	border:3px solid #1eb9ee;
	border-radius:10px;
	background-color:#fff;
}
#privilege li:nth-of-type(3){
	margin-right:0;
}
#privilege li .privilege_no{
	position:absolute;
	width:38px;
	height:38px;
	padding:6px;
	top:-10px;
	right:-10px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	line-height:18px;
	text-align:center;
	border:5px solid #fff;
	border-radius:30px;
	background-color:#e52267;
	-moz-box-shadow:1px 2px 3px 1px #bbb;
	-webkit-box-shadow:1px 2px 3px 1px #bbb;
	box-shadow:1px 2px 3px 1px #bbb;
}
#privilege li .privilege_no span{
	font-weight:bold;
	font-size:14px;
}
#privilege li .privilege_title{
	margin-bottom:10px;
	font-size:20px;
	font-weight:bold;
}

/*----- 登録フォームなど -----*/

#forpc_inner,
#foripn_inner,
#formobile_inner{
	margin-top:50px;
}
#foripn_inner p,
#formobile_inner p{
	float:left;
	width:540px;
	margin-top:10px;
	line-height:18px;
}
#foripn_inner a,
#formobile_inner a{
	line-height:30px;
}
#spmailmag_block .icon_treatment:before {
	color:#e52267;
	font-size:16px;
	font-weight:normal;
}

/*----- h2タイトル -----*/
#spmailmag_block .h2_inner{
	margin-bottom:20px;
}
#spmailmag_block .h2_inner h2{
	margin-bottom:10px;
	font-size:22px;
	font-weight:bold;
	line-height:30px;
	border-bottom:2px solid #dddfbd;
}
#spmailmag_block .h2_inner p{
	font-size:16px;
}

/*----- 登録フォーム -----*/
#spmailmag_block form dt{
	padding:5px;
	line-height:24px;
	background-color:#dddfbd;
}
#spmailmag_block form dt:before{
	color:#e98862;
}
#spmailmag_block form dd{
	padding:10px 4px 30px 10px;
}
#spmailmag_block form dd:after {
	content: "";
	clear: both;
	display: block;
}
#spmailmag_block form dd input{
	font-size: 16px;
}
#spmailmag_block form dd label{
	float:left;
	width:312px;
	height:24px;
	margin: 0 6px 6px 0;
	line-height:24px;
	-moz-transition: 0.2s linear 0s;
	-webkit-transition: 0.2s linear 0s;
	transition: 0.2s linear 0s;
	border-radius:3px;
}
#spmailmag_block form dd label:hover{
	background-color: #b6eaf7;
	cursor: pointer;
}
#spmailmag_block form dd label.checked{
	border-radius:5px;
	background-color:#fef7d5;
}
#spmailmag_block form dd label img{
	margin-right:5px;
}
#spmailmag_block form dd p{
	line-height: 1.4;
	font-size:14px;
}
#spmailmag_block form dd p span{
	color: #ff0066;
}
#spmailmag_block form dd em.icon_caution{
	display:block;
	margin-bottom:10px;
}
#spmailmag_block form dd input#botton_style{
	width: 628px;
	margin:15px 6px 0 0;
	padding: 5px 0;
	font-size: 16px;
	text-align: center;
	color: #7b6503;
	background-color: #fbe481;
	border-radius: 5px;
	border-style: none;
	border:#debd29 1px solid;
	-moz-transition:0.2s linear ;
	-webkit-transition:0.2s linear ;
	transition:0.2s linear ;
}
#spmailmag_block form dd input#botton_style:hover{
	cursor: pointer;
	color: #ffffff;
	background-color: #eda184;
	border:#e06a3b 1px solid;
}

/*----- QR -----*/
#spmailmag_block .qr{
	float:left;
	width:80px;
	height:80px;
	margin-right:10px;
	padding:10px;
	background-color:#dddfbd;
	border-radius:5px;
}
#spmailmag_block .qr img{
	width:80px;
	height:80px;
}

/*----- 免責 -----*/
#spmailmag_block .disclaimer{
	margin:50px 0 20px;
	padding:5px;
	font-size:12px;
	border:3px solid #1eb9ee;
}
#spmailmag_block .disclaimer dt{
	display:table-cell;
	width:100px;
	padding:5px;
	color:#fff;
	font-size:16px;
	text-align:center;
	background-color:#1eb9ee;
	vertical-align: middle;
}
#spmailmag_block .disclaimer dd{
	display:table-cell;
	width:524px;
	padding:5px 10px;
}
#spmailmag_block .release{
	text-align:right;
}


/*+++++ 登録通知など +++++*/

#end_massege_holder{
	text-align:center;
}
#end_massege_holder p{
	margin-top:20px;
}
#end_massege_holder p span{
	color:#cc2121;
	font-size:18px;
	font-weight:bold;
}
#end_massege_holder ul{
	margin-top:20px;
}
#end_massege_holder li{
	margin:0 50px 10px;
	font-size:18px;
	line-height:30px;
	border-radius:5px;
	background-color:#c4f0ff;
}

/*+++++ エラー通知など +++++*/
#error_massege_holder{
	text-align:center;
}
#error_massege_holder h2{
	margin:40px 0 50px;
	color:#00479d;
	font-size:30px;
	font-weight:bold;
}
#error_massege_holder p{
	line-height:22px;
}
#error_massege_holder p span{
	color:#cc2121;
	font-size:18px;
	font-weight:bold;
}

/*+++++ 追加部分 +++++*/
.magazine__chart-item {
  display: block;
  background-color: #eee;
  -webkit-box-shadow: 0 1px 3px 0px #d4d4d4;
		  box-shadow: 0 1px 3px 0px #d4d4d4;
  font-size: 14px;
  line-height: 1.6;
  padding: 15px;
  position: relative;
}

.magazine__chart-item:not(:last-of-type) {
  margin-bottom: 45px;
}

.magazine__chart-item:not(:last-of-type)::after {
  bottom: -40px;
  content: "▼";
  color: #0AA4AA;
  font-size: 20px;
  font-family: 'Material Icons Round';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  position: absolute;
  left: 0;
  width: 100%;
}

.magazine__chart-item span {
  font-size: 12px;
  display: block;
  margin-top: 15px;
}

.magazine__entry {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
	  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  margin-top: 30px;
}

.magazine__entry-item a {
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  line-height: 1.6;
  padding: 15px;
}

.magazine__attention {
  background-color: #fee;
  margin: 30px auto;
  padding: 15px;
}

.magazine__title {
  font-weight: bold;
  font-size: 16px;
}

.magazine__title--red {
  color: red;
}

.magazine__text {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.magazine__text em {
  color: #2d54f7;
  padding: 0 5px;
}

.basic-title em {
  color: #f72d8a;
  padding: 0 5px;
  font-weight: bold;
}