@charset "utf-8";
/* ============== 共通 =================== */
#contents {
	background-color: #ffffff;
	padding: 0;
	color: #333333;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.03em;
}
h2, h3 {
	color: #111111;
}
h3 {
	font-size: 20px;
}
.fc-red {
	color: #f50028;
}
.fw-bold {
	font-weight: bold;
}
.note-txt {
	font-size: 14px;
}
#contents * {
	box-sizing: border-box;
}
#contents a {
	color: #0099cc;
	text-decoration: underline;
}
#contents a:hover {
	opacity: 0.7;
}
.display-tb {
	display: none;
}
.display-sp {
	display: none;
}
.u-mt20 {
	margin-top: 20px;
}
.end_txt {
	color: #f50028;
	font-size: 180%;
	font-weight: bold;
	text-align: center;
	margin: 20px auto;
	line-height: 1;
}

/* ============== ボタン =================== */
 .entry {
	margin: 35px auto;
}
.entry .btn {
	width: 78%;
	margin: auto;
}
#contents .btn {
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
}
.btn {
	position: relative;
	margin: 18px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	width: 100%;
	max-width: 400px;
	height: 50px;
	background-color: #ff9123;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/btnarrow_right.png);
	background-size: 20px;
	background-position: center right 30px;
	background-repeat: no-repeat;
}
#contents .btn_secondary {
	color: #ff9123;
}
.btn_att {
	margin-top: 18px;
	color: #999999;
	font-size: 14px;
	text-align: left;
    max-width: 630px;
    width: 100%;
    margin: 18px auto 0;
}
.btn_att_txt-bk {
	color: #333;
}
.btn_mcopy {
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: bold;
	color: #333;
}
.btn_mcopy::before {
	font-size: 14px;
	content: "";
	display: inline-block;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_left.png);
	background-position: bottom;
    background-repeat: no-repeat;
    background-size: 70%;
    width: 20px;
    height: 25px;
    margin-right: 15px;
    vertical-align: bottom;
}
.btn_mcopy::after {
	font-size: 14px;
	content: "";
	display: inline-block;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_right.png);
	background-position: bottom;
    background-repeat: no-repeat;
    background-size: 70%;
    width: 20px;
    height: 25px;
    margin-left: 15px;
    vertical-align: bottom;
}

/* 追従ボタン */
#js-fixedcta {
	display: none;
}
.js-fixedcta {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 999;
	background: rgb(255, 255, 255, 0.95);
	padding: 10px 0 20px;
}
.js-fixedcta .btn {
	margin: 0 auto;
}

/*終了対応*/
#contents .btn_close {
	pointer-events: none;
	position: relative;
}
#contents .btn_close::before {
	content:none;
}
#contents .btn_close::after {
	content:"※本キャンペーンは終了しました";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 105%;
	height: 120%;
	background-color: rgba(0,0,0,0.7);
	margin: 0 auto;
	z-index: 10;
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
}


/* ============== トップ =================== */
.top_ttl {
	background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/bg.png);
	background-color: #FFFFD6;
}
.top_date {
	background-color: #58C65A;
}


/* ============== キャンペーン概要 =================== */
.overview {
	background-color: #FFFFD6;
	padding: 60px 0;
}
.overview .overview_ttl {
	text-align: center;
	font-size: 22px;
	margin-top: 0;
}
.overview .sec_subttl {
	margin-top: 45px;
}
.overview h3 {
	margin-top: 60px;
}
.overview_tag {
	color: #58C65A;
	font-weight: bold;
	font-size: 22px;
	margin-top: 60px;
}
.overview .overview_tag::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic00_left.png);
	background-repeat: no-repeat;
	width: 20px;
	height: 30px;
	margin-right: 5px;
}
.overview .overview_tag::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic00_right.png);
	background-repeat: no-repeat;
	width: 20px;
	height: 30px;
	margin-left: 10px;
}
.overview_content_wrap {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	max-width: 860px;
    width: calc(100% - 60px);
	margin: 20px auto;
	padding: 20px 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.overview_content_txtbox {
	text-align: right;
	margin-top: -30px;
}
.content_ttl_ribbon {
	font-weight: bold;
	color: #FFFFD6;
	background: #333333;
	display: inline-block;
	padding: 0px 70px;
	display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.05em;
}
.content_ttl_ribbon:before, .content_ttl_ribbon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.content_ttl_ribbon:before {
  top: 0;
  left: 0;
  border-width: 20px 0px 20px 10px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.content_ttl_ribbon:after {
  top: 0;
  right: 0;
  border-width: 20px 10px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}
.overview_content_txt {
	text-align: left;
	margin-top: 30px;
}
.overview_content_img {
	margin-left: 60px;
}


/* 3週連続企画　共通（概要、STEP3、タップ対象箇所）
------------------ */
.overview .content_table,
.tap .content_table {
	margin: 0 auto;
	max-width: 970px;
	width: calc(100% - 60px);
	margin-top: 20px;
	
}
.tap .content_table {
	margin-top: 5px;
}
.step .content_table {
	margin: 0 auto;
	max-width: 860px;
	width: 100%;
	margin:  30px auto 0;
	width: calc(100% - 60px);
}

.overview .content_table tbody,
.step .content_table tbody {
	display: flex;
	justify-content: space-between;
}
.overview .content_table tr,
.step .content_table tr,
.tap .content_table tr {
	width: 32%;
	border: 3px solid #333333;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	background: #fff;
}
.step .content_table tr {
	width: 32.5%;
}
.tap .content_table tr {
	width: 100%;
	margin-top: 45px;
}
.content_table .tap01 th {
	background-color: #B2D30B;
}
.content_table .tap01 th span {
	color: #B2D30B;
}
.content_table .tap02 th {
	background-color: #58C65A;
}
.content_table .tap02 th span {
	color: #58C65A;
}
.content_table .tap03 th {
	background-color: #229F27;
}
.content_table .tap03 th span {
	color: #229F27;
}
.overview .content_table th,
.tap .content_table th {
	border-radius: 16px 16px 0 0;
	color: #fff;
	letter-spacing: 0.05em;
	padding: 10px 0;
	border-bottom: 3px solid #333333;
}
.step .content_table th {
	border-radius: 16px;
	color: #fff;
	letter-spacing: 0.03em;
	position: relative;
	display: block;
}
.tap .content_table th {
	font-size: 22px;
	padding: 15px 0;
	margin-bottom: 0;
}
#step_link a {
	text-decoration: none;
	color: #fff;
	display: block;
	height: auto;
	height: auto;
	padding: 10px 0 15px;
	border-radius: 16px;
}
#step_link a:hover {
	opacity: initial;
}
.step .content_table tr:hover {
	filter: brightness(0.85); 
	transition: .3s;
}
/* STEPの内部リンクアイコン▼ */
.step .content_table th img {
	position: absolute;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
}
.overview .content_table th span,
.step .content_table th span,
.tap .content_table th span {
	display: block;
	width: 70px;
	background: #fff;
	padding: 0px 8px;
	border-radius: 3px;
	margin: 0 auto;
	font-weight: bold;
	margin-bottom: 5px;
}
.tap .content_table th span {
	margin-bottom: 0;
}
.tap .content_table th span {
	font-size: 22px;
	width: 100px;
}
.tap .content_table th span {
	display: inline-block;
	margin-right: 25px;
}
.overview .content_table td {
	font-weight: bold;
	padding: 15px 0;
	border-radius: 0 0 16px 16px;
}
.tap .content_table td {
	padding: 40px 0;
	background: #fff;
	border-radius: 0 0 20px 20px;
}
.tap_content_img-icon {
	margin-top: 10px;
}
.overview .content_table td span {
	font-size: 20px;
	color: #FF9123;
}
/* ---------------
3週連続企画　共通（概要、STEP3、タップ箇所） */



/* ============== キャンペーン参加方法 =================== */
.step {
	background: #fff;
	padding: 60px 0;
}
.step_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top:-7px;
	left: 50%;
	transform: translateX(-50%);
}
.step_content_list {
	margin-top: 45px;
}
.step_content_list li {
	margin: 30px auto 0;
	border-bottom: none;
}
.step_coontent_bg-top {
	margin: 0 auto;
    max-width: 970px;
	width: calc(100% - 60px);
	background: #FFFFD6;
	border: 3px solid #333333;
	border-bottom: none;
    border-radius: 8px 8px 0 0;
	padding: 70px 0 30px;
	position: relative;
}
.step_content_bg-bottom {
	margin: 0 auto;
	max-width: 970px;
    width: calc(100% - 60px);
}
.step_content_bg-bottom-sp {
	display: none;
}
.step_content_bg-bottom img  {
	width: 100%;
}

.step_content_ttl {
	letter-spacing: 0.05em;
}
.step_content_img {
	margin: 25px auto;
}
.step_content_txt {
	max-width: 610px;
	margin: 0 auto;
	width: 100%;
	text-align: left;
}
.step_content_list li .note-txt {
	max-width: 610px;
	margin: 0 auto;
	width: 100%;
	text-align: left;
}
.step03 .step_content_txt,
.step_content_list .step01 .note-txt {
	text-align: center;
}
.step .step_content_img {
	max-width: 300px;
}


/* ============== タップ対象箇所 =================== */
.tap {
	background: #FFFFD6;
	padding: 60px 0;
}
.tap_content_subttl_tag {
	background: #229F27;
	border-radius: 3px;
	display: inline-block;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 5px 15px;
}
.tap_content_subttl {
	font-size: 20px;
	color: #111111;
}
.tap_content_subttl::before {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_left.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 25px;
	height: 38px;
	margin-right: 15px;
	vertical-align: middle;
}
.tap_content_subttl::after {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_right.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 25px;
	height: 38px;
	margin-left: 15px;
	vertical-align: middle;
}

.tap_content_subttl03 {
	position: relative;
	margin-top: 15px;
}
.tap_content_subttl03:before {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_left02.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 50px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 100px;
}
.tap_content_subttl03:after {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_right02.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 50px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 100px;
}
.tap .tap_content_img {
	margin-top: 10px;
}


/* ============== Pontaランクとは =================== */
.whats {
	background: #fff;
	padding: 60px 0;
	position: relative;
	max-width: 1030px;
	margin: 0 auto;
}
.whats_content_img-ponta {
	position: absolute;
	right: 30px;
    top: 100px;
    z-index: 100;
}
.whats_content_wrapper {
	max-width: 970px;
	width: calc(100% - 60px);
	margin: 45px auto 0;
}
.whats_content_wrapper li {
 background: #FFFFD6;
 border: 3px solid #333333;
 border-radius: 8px;
 padding: 40px 55px;
 margin-top: 30px;
}
.whats_content_img {
	margin-top: 30px;
}
.whats_content_img-icon {
	max-width: 85px;
	margin: 0 auto;
}
.whats_content_item02 .note-txt {
	text-align: left;
}
.whats_content_item02 h3:before {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic03_left.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 54px;
	height: 30px;
	margin-right: 30px;
	vertical-align: middle;
}
.whats_content_item02 h3:after {
	content: "";
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic03_right.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 54px;
	height: 30px;
	margin-left: 30px;
	vertical-align: middle;
}
.whats_content_ttl02+.note-txt {
	text-align: left;
	margin-top: 20px;
}
.whats_content_item02 .whats_content_wrap {
	border-radius: 8px;
	padding: 20px 0  30px;
	margin-top: 30px;
	border: 3px solid #333333;
	background: #ffffff;
}
.whats_content_item02 .whats_content_wrap:first-of-type {
	border: 1px solid #dddddd;
	padding: 10px 20px;
	margin-top: 5px;
}

.whats_content_item02 .whats_content_list {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.whats_content_item02 .whats_content_list li {
	width: 32%;
	border: none;
	background: none;
	border-right: 3px dotted #333333;
	border-radius: 0;
	padding: 0 30px;
	margin-top: 0;
}
.whats_content_item02 .whats_content_list li:nth-child(3) {
	border-right: none;
} 
.whats_content_item02 .whats_content_wrap .whats_content_img {
	margin-top: 10px;
}
.whats_content_item02 .whats_content_wrap .whats_content_txt {
	margin-top: 10px;
	text-align: left;
}
.whats_content_item02 .whats_content_wrap+.whats_content_txt {
	margin-top: 35px;
}
.whats_content_item03 {
		padding: 40px 55px;
}
.whats_content_item03 .whats_content_list {
	display: flex;
	justify-content: space-between;
}
.whats_content_item03 .whats_content_list li {
	border: none;
	padding: 0;
	text-align: left;
	max-width: 560px;
}
.whats_content_item03 .whats_content_txtbox .whats_content_txt {
	margin-top: 15px;
}


/* ============== キャンペーン詳細 =================== */
.att {
	padding: 6px 0;
	font-size: 14px;
}
.att_content_wrap {
	overflow: hidden;
	padding: 35px 0;
	margin: 0 auto;
	text-align: left;
	line-height: 1.7;
	max-width: 970px;
	width:calc(100% - 60px);
	border-radius: 8px;
	border: 3px solid #333333;
}
.att_ttl {
	font-size: 26px;
	text-align: center;

}
.att_list {
	width: calc(100% - 60px);
	max-width: 830px;
	margin: 40px auto 60px;
}
.att_item + .att_item {
	margin-top: 30px;
}
.att_item_ttl {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 15px;
	padding-left: 1.5em;
	position: relative;
}
/*「●」タイプのリスト用*/
.att_item_ttl::before {
	content: "";
	display: block;
	background-color: #58C65A;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 2px;
	left: 0;
}
.att_item_inner p {
	margin-top: 5px;
}
.att_item_inner .note-txt {
	margin-top: 0;
}
.att_item_inner p + p {
	margin-top: 0;
}
.att_item_img {
	text-align: center;
	margin: 20px auto;
}
.att_list-style {
	text-indent: -1em;
	margin-bottom: 10px;
	padding-left: 1em;
}
.att_num-style {
	text-indent: -1.4em;
	margin-top: 10px;
	padding-left: 1.5em;
	counter-reset: number 0;
}
.att_num-style > li::before {
	counter-increment: number 1;
	content: "(" counter(number) ")";
}
.att_small-unit {
	margin: 10px auto;
}
.att_list-style .att_small-unit {
	text-indent: 0;
}
.att_list-style li > .att_list-style,
.att_list-style li > .att_num-style,
.att_num-style li > .att_list-style,
.att_num-style li > .att_num-style,
.att_small-unit .att_list-style,
.att_small-unit .att_num-style {
	margin-top: 0;
	margin-bottom: 10px;
}
.att_list-style li > .att_num-style,
.att_num-style li > .att_num-style {
	transform: translateX(-0.2em);
}
.att_small-unit .att_list-style,
.att_small-unit .att_num-style {
	margin-left: 0.5em;
}
.att_item_fwb {
	font-weight: bold;
}


/* コンテンツ（SP：767px以下）
========================================================*/
@media screen and (max-width: 767px) {
	/* ============== 共通 =================== */
	.display-pc {
		display: none;
	}
	.display-tb {
		display: none;
	}
	.display-sp {
		display: block;
	}
	#contents {
	font-size: 14px;
}
h3 {
	font-size: 16px;
}
.note-txt {
	font-size: 12px;
}
	.sec_ttl img {
		width: 75%;
		max-width: 270px;
	}
	.fc-red {
		color: #f50028;
		line-height: 1.6;
		text-align: left;
	}
	/* パンくずリスト */
.breadcrumb {
	width: 100%;
    overflow: scroll;
    padding-left: 15px;
    display: inherit;
	white-space:nowrap;
	min-height: initial;
}
.breadcrumb::-webkit-scrollbar {
	display: none;
  }
.breadcrumb li {
	display: inline;
}
.end_txt {
	font-size: 150%;
}

	/* ============== ボタン =================== */
		.entry {
	margin: 30px auto;
    padding: 0 15px;
}
	
	.entry .btn {
	width: 100%;
	margin: auto;
}
	.entry .btn_att {
        margin: 10px auto 0;
    }
	
	.btn {
		margin: 10px auto;
		border-radius: 4px;
		background-position: center right 10px;
		height: 55px;
	}
	.btn_att {
		text-align: left;
		padding: 0;
        margin: 18px auto 0;
		font-size: 12px;
	}

	/* 追従ボタン */
	.js-fixedcta .btn {
		width: 92%;
	}
	
	/*終了対応*/
	#contents .btn_close::after {
		font-size: 1.8rem;
	}


	/* ============== トップ =================== */
	 .top_date img {
		width: 92%;
		margin: 0 auto;
	 }

	 /* ============== キャンペーン概要 =================== */
	 .overview {
		padding: 45px 15px;
	 }
	 .overview .sec_subttl {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	 }
	 .overview .sec_subttl img {
		width: 92%;
		max-width: 325px;
	 }
	 .overview .overview_ttl {
		font-size: 16px;
	 }
	 .overview h3 {
		margin-top: 35px;
	 }
	 .overview_tag {
		margin-top: 35px;
		font-size: 16px;
		margin-bottom: -20px;
	 }
	 .overview_content_wrap {
		flex-direction: column;
		padding: 15px 20px;
		margin: 15px auto 0;
		width: 100%;
	 }
	 .overview .content_ttl_ribbon {
		letter-spacing: 0.07em;
		padding: 0 50px;
		height: auto;
		line-height: 30px;
	 }
	 .overview .content_ttl_ribbon:before {
		border-width: 15px 0 15px 8px;
	 }
	 .overview .content_ttl_ribbon:after {
		border-width: 15px 8px 15px 0px;
	 }
	 .overview_content_txtbox {
		margin-top: 0;
	 }
	 .overview_content_img {
		margin-left: 0;
		margin-top: 10px;
	 }
	 .overview_content_img img {
		width: 92%;
	 }
	 .overview_content_txt {
		margin-top: 15px;
	 }

	 /* ---------------
3週連続企画　共通（概要、STEP3、タップ箇所） */
.overview .content_table tbody, .step .content_table tbody {
	flex-direction: column;
}
.overview .content_table tr, .step .content_table tr {
	width: 100%;
	margin-top: 20px;
	border: 2px solid #333333;
	border-radius: 15px;
}
.overview .content_table {
	margin-top: 10px;
	width: 100%;
}
.overview .content_table th, .tap .content_table th {
	letter-spacing: 0.07em;
	padding: 8px 0 6px;
	border-bottom: 2px solid #333333;
	border-radius: 12px 12px 0 0;
}
.overview .content_table th span, .step .content_table th span, .tap .content_table th span {
	padding: 2px 8px 0;
}
.overview .content_table td {
	padding: 12px 10px;
	border-radius: 0 0 15px 15px;
}
.overview .content_table td span {
	font-size: 18px;
}
.step .content_table {
	margin-top: 0;
	width: 100%;
}
.step .content_table th {
	letter-spacing: 0.07em;
	border-radius: 12px;
}
.step .content_table tr {
	width: 100%;
	margin-top: 25px;
	border: 2px solid #333333;
	border-radius: 15px;
}
.tap .content_table {
	width: 100%;
}
.tap .content_table th {
	font-size: 16px;
}
.tap .content_table th span {
	display: block;
	margin: 0 auto;
	width: 70px;
	padding: 0;
	font-size: 16px;
	margin-bottom: 2px;
}
 .tap .content_table tr {
	border-radius: 15px;
	margin-top: 30px;
	border: 2px solid #333333;
 }
 .tap .content_table td {
	padding: 30px 15px 25px;
 }


/* ============== キャンペーン参加方法 =================== */
	
	.step {
		padding: 45px 15px;
	}
	.step_coontent_bg-top {
		margin: 0 auto;
		width: 100%;
		border: 2px solid #333;
		border-bottom: none;
		padding: 50px 20px 20px;
	}
	.step_content_bg-bottom {
		width: 100%;
	}
	.step_content_list li .step_content_bg-bottom img {
		width: 100%;
		margin-top: -1px;
	}
	.step_list {
		margin-top: 22px;
	}
	.step_icon {
		max-width: 147px;
	}
	.step_content_list {
		margin-top: 30px;
	}
	.step_content_list li {
		width: 100%;
		border-bottom: none;
	}
	.step_content_list .step_content_wrap .note-txt {
		text-align: left;
	}
	.step .step_content_img {
		margin: 25px auto;
		max-width: 260px;
	}
	.step01 .step_content_img {
		margin: 15px auto;
	}
	.step_content_img-app img {
		margin-bottom: -5px;
	}
	#step_link img {
		width: 30px;
		height: 30px;
	}
	.step_content_list .step01 .step_content_wrap .note-txt {
	text-align: center;
	}
	.step03 .step_content_txt {
		margin-bottom: -5px;
	}



/* ============== タップ対象箇所 =================== */
	.tap {
		padding: 45px 15px;
	}
	.tap_content_subttl {
		font-size: 14px;
		position: relative;
		max-width: 305px;
		margin: 10px auto;
	}
	.tap_content_subttl::after,
	.tap_content_subttl::before {
		vertical-align: bottom;
	}
	.tap .content_table .tap_content_subttl+.tap_content_img {
		display: flex;
		justify-content: center;
	}
	.tap .content_table .tap01 .tap_content_subttl+.tap_content_img img {
		width: 95%;
	}
	.tap .tap_content_img  {
		margin: 8px auto 0;
		width: 100%;
	}
	.tap .tap_content_img-mock {
		max-width: 260px;
		margin: 0 auto;
		text-align: center;
	}
	.tap .tap01 .tap_content_img-mock {
		margin: 8px auto 0;
	}
	.tap .tap_content_img-icon {
		width: 36px;
		margin: 8px auto -8px;
	}
	.tap_content_subttl_tag {
		font-size: 14px;
		letter-spacing: 0.07em;
		padding: 3px 10px;
	}

	.tap_content_subttl::before {
		content: "";
		background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_left_sp.png);
		background-repeat: no-repeat;
		background-size: 60%;
		background-position: center;
		display: inline-block;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0;
		margin-right: 0; 
	}
	.tap_content_subttl::after {
		content: "";
		background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/ranktap_2507/img/ic01_right_sp.png);
		background-repeat: no-repeat;
		display: inline-block;
		background-size: 60%;
		background-position: center;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0;
		margin-left: 0;
	}
	.tap_content_subttl01::before {
		left: 30px;
	}
	.tap_content_subttl01::after {
		right: 30px;
	}
	.tap_content_subttl02::before {
		left: 0;
	}
	.tap_content_subttl02::after {
		right: 0;
	}
	.tap_content_subttl03::before {
		left: -15px;
        top: 24px;
	}
	.tap_content_subttl03::after {
		right: -15px;
        top: 24px;
	}


	/* ============== Pontaランクとは =================== */
	.whats {
		padding: 45px 15px;
	}
	.whats_content_img-ponta {
		max-width: 140px;
		top: 110px;
        right: 10px;
	}
	.whats_content_wrapper {
		width: 100%;
	}
	.whats_content_wrapper li {
		margin: 20px auto 0;
		padding: 25px 20px;
		border: 2px solid #333333;
	}
	.whats_content_wrapper .whats_content_item01 {
		margin-top: 60px;
	}
	.whats_content_wrapper .whats_content_item01 .whats_content_img {
		margin: 15px auto 0;
		margin-top: 15px;
		padding: 0 10px;
		max-width: 305px;
		width: 100%;
	}
	.whats_content_txt {
		margin-top: 10px;
	}
	.whats_content_ttl02:after {
		margin-left: 10px;
		content: "";
	background-size: 75%;
		background-repeat: no-repeat;
		display: inline-block;
		background-position: center;
		width: 54px;
    height: 30px;
    vertical-align: middle;
	}
	.whats_content_ttl02:before {
		margin-right: 10px;
		content: "";
		background-size: 75%;
		background-repeat: no-repeat;
		background-position: center;
		display: inline-block;
		width: 54px;
    height: 30px;
    vertical-align: middle;
	}
	.whats_content_ttl02+.note-txt {
		margin-top: 0;
	}
	.whats_content_item02 h3:before {
	content: "";
	background-position: center;
	background-size: 60%;
	width: 60px;
	margin-right: 0;
}
	.whats_content_item02 h3:after {
	content: "";
	background-position: center;
	background-size: 60%;
	width: 60px;
	margin-left: 0;
}
.whats_content_item02 .note-txt {
	max-width: 350px;
	margin: 0 auto;
}
	.whats_content_item02 .whats_content_wrap {
        padding: 15px 10px 20px;
        max-width: 305px;
        margin: 20px auto 0;
    }
	.whats_content_item02 .whats_content_wrap>img {
		margin: 0 auto;
		width: 100%;
	}
	.whats_content_item02 .whats_content_wrap:first-of-type {
		padding: 5px 10px;
		margin: 0 auto;
		margin-top: 0
	}
	.whats_content_item02 .whats_content_wrap {
		padding: 15px 10px 20px;
		border: 2px solid #333333;
		max-width: 350px;
	}
	.content_ttl_ribbon {
        letter-spacing: 0.07em;
        padding: 0 15px;
        height: auto;
        line-height: 30px;
    }
	 .whats .content_ttl_ribbon:before {
		border-width: 15px 0 15px 8px;
	 }
	 .whats .content_ttl_ribbon:after {
		border-width: 15px 8px 15px 0px;
	 }

	.whats_content_list {
		flex-direction: column;
	}
	.whats_content_item02 .whats_content_list {
		margin-top: 10px;
		max-width: 305px;
		margin: 0 auto;
	}
	.whats_content_item02 .whats_content_list li {
		width: 100%;
		border-right: none;
		display: flex;
		align-items: center;
		padding: 0 0 15px;
		border-bottom: 1px dotted #333333;
		margin-top: 15px;
	}
	.whats_content_item02 .whats_content_list li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	.whats_content_item02 .whats_content_wrap .whats_content_img {
		margin-top: 0;
		text-align: left;
		width: 82%;
	}
	
	.whats_content_img-icon  {
		max-width: 72px;
		margin: 0;
		margin-right: 10px;
	}
	.whats_content_item02 .whats_content_wrap .whats_content_txt {
		font-size: 12px;
	}
	.whats_content_item02 .whats_content_wrap+.whats_content_txt {
		margin-top: 20px;
	}
	.whats_content_img-app {
		max-width: 210px;
		width: 100%;
		margin: 0 auto;
	}
	.whats_content_item03 .whats_content_txtbox .note-txt {
		margin-top: 5px;
	}
	.store_btn {
		max-width: 210px;
		margin: 20px auto;
	}

	
	/* ============== キャンペーン詳細 =================== */
	.att {
		padding: 0 15px 15px;
	}
	 .att_content_wrap {
		margin: 0 auto;
		border: 2px solid #333333;
		padding: 25px 0;
		width: 100%;
	}
	.att_ttl {
		font-size: 20px;
	}
	.att_list {
		width: calc(100% - 54px);
		margin: 25px auto 28px;
	}
	.att_item_ttl{
		margin-bottom: 10px;
		padding-left: 1.5em;
	}
}



/* PC小～タブレット調整
========================================================*/
@media screen and (min-width: 768px) and (max-width: 970px) {
	/* 共通 -------------*/
	.display-tb {
		display: block;
	}
	/* キャンペーン概要 -------------*/
	.overview_content_txtbox {
		margin-top: 0;
	}
	/* キャンペーン参加方法 -------------*/
	.step .content_table th img {
    	top: 93px;
	}
	/* タップ対象箇所 -------------*/
	.tap_content_subttl03:before {
    	top: 35px;
		left: 135px;
	}
	.tap_content_subttl03:after {
    	top: 35px;
		right: 135px;
	}
}
@media screen and (min-width: 768px) and (max-width: 860px) {
	/* キャンペーン参加方法 -------------*/
	/* STEPの枠線 */
	.step_coontent_bg-top {
		border: 2px solid #333333;
		border-bottom: none;
	}
	/* Pontaランクとは -------------*/
	/* Ponta */
	.whats_content_img-ponta {
    	right: 20px;
	}
}
@media screen and (min-width: 500px) and (max-width: 768px) {
		.tap .tap_content_img  {
        max-width: 305px;
		margin: 0 auto;
		width: 100%;
	}
	/* Pontaランクとは -------------*/
	/* Ponta */
	.whats_content_img-ponta {
    	right: 20px;
	}
}
@media screen and (max-width: 500px) {
	/* キャンペーン参加方法 -------------*/
	.step_content_list .step01 .step_content_wrap .note-txt {
		text-align: left;
	}
}
@media screen and (max-width: 440px) {
	/* キャンペーン参加方法 -------------*/
	.step_content_bg-bottom-pc {
		display: none;
	}
	.step_content_bg-bottom-sp {
		display: block;
	}
}



/* ミニ 370 345
========================================================*/
@media screen and (max-width: 370px) {
		.display-mini {
		display: block;
	}
	/* キャンペーン概要 -------------*/
	.overview .content_ttl_ribbon  {
		padding: 0 30px;
	}
	/* キャンペーン参加方法 -------------*/
	.step .content_table th img {
    top: 87px;
	}
	/* タップ対象箇所 -------------*/
		 .tap_content_subttl::before,
	 .tap_content_subttl::after {
		display: none;
	 }
	/* Pontaランクとは -------------*/
	/* Ponta */
	.whats_content_img-ponta {
    	display: none;
	}
	 .whats .content_ttl_ribbon:before {
		border-width: 30px 0 30px 10px;
	 }
	 .whats .content_ttl_ribbon:after {
		border-width: 30px 10px 30px 0px;
	 }
}
@media screen and (max-width: 270px) {
	/* キャンペーン概要 -------------*/
	.overview .content_ttl_ribbon:before {
		border-width: 30px 0 30px 10px;
	 }
	 .overview .content_ttl_ribbon:after {
		border-width: 30px 10px 30px 0px;
	 }
	 /* Pontaランクとは -------------*/
	 .whats_content_item02 h3:before,
	 .whats_content_item02 h3:after {
		display: none;
	 }
	     .whats_content_item02 .whats_content_wrap .whats_content_img  {
			width: 100%;
		 }
}