@charset "utf-8";
/*------------------------------------------------------------------------------------------------
creation date 2018.02.01
http://www.sevenbank.co.jp/
Copyright (C) Seven Bank,Ltd. All Rights Reserved.
------------------------------------------------------------------------------------------------*/
/*-------------------------------
Layout
--------------------------------*/
body {
	-webkit-text-size-adjust: 100%;
}
#Wrapper {
	margin:0 auto;
	padding:0;
	border:0;
}
#Header{
	margin: 0 auto 8px;
	width: 882px;
}
img {
	max-width: 100%;
	height: auto;
	line-height:0;
	vertical-align:bottom;
	border-style: none;
}

.mainBlock .caution .txt,
.exampleArea .caution .txt{
	color: #e20000;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;
	width: 60%;
}
@media screen and (max-width: 900px){
	#Wrapper{
		width: 100%;
	}
	#Header{
		width: 97%;
	}
	.mainBlock .caution .txt,
	.exampleArea .caution .txt{
		max-width: 536px;
		width: 100%;
	}
	
	/*responsive margin*/
	.r_mb10{margin-bottom: 10px !important;}
}

/*---------------
.linkBlock
------------------*/
ul.linkBlock01 li a, a.linkBlock01, ul.linkBlock01 li .textNolink, .linkBlock01.textNolink {
	display: inline;
	padding-right: 15px;
	padding-left: 0;
	background: url(/shared/img/cmn_ico_003.png) right center no-repeat;
	margin-right: 5px;
	word-break: break-all;
}
/* agreeArea */
.agreeArea {
	padding: 40px 0 0;
}
.agreeArea p {
	text-align: center;
}
.agreeArea p span {
	font-size: 138.5%;
	font-weight: bold;
	position: relative;
	display: inline-block;
	margin: 0 25px;
}
.agreeArea p span.agreeAreaTxt {
	padding-bottom: 20px;
}
.agreeArea .btnGreen {
	margin: 0 auto 18px;
	width: 300px;
}
.agreeArea .btnGreen a {
	display: block;
	background: #0fab24;
	background: -moz-linear-gradient(top, #0fab24 0%, #02a42a 100%);
	background: -webkit-linear-gradient(top, #0fab24 0%, #02a42a 100%);
	background: linear-gradient(to bottom, #0fab24 0%, #02a42a 100%);
	border-bottom: solid 3px #006e1b;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
}
.agreeArea .btnGreen a:hover {
	text-decoration: none;
	opacity: 0.8;
}
.agreeArea .btnGreen a > span {
	display: block;
	background: url('/personal/account/jcb_debit/shared/img/btngreen_bg.png') no-repeat 0 100%, url("/shared/img/cmn_ico_001.png") no-repeat right;
}
.agreeArea .btnGreen a > span > span {
	display: block;
	padding: 18px 0 16px;
	color: #fff;
	font-size: 138.5%;
	font-weight: bold;
	line-height: 1;
}
 btnGreen lrg 
.agreeArea .btnGreen.lrg a > span {
	background: url('/personal/account/jcb_debit/shared/img/btngreen_bg_lrg.png') no-repeat 0 100%;
}
.agreeArea .btnGreen.lrg a > span > span {
	padding: 25px 10px 24px 0;
	font-size: 153.8%;
}
.agreeArea .btnGreen.lrg.double a > span > span {
	padding: 13px 0 10px;
}
.agreeArea .btnGreen.lrg.double a > span > span span {
	display: block;
	font-size: 100%;
}
.agreeArea .btnGreen.lrg.double a > span > span span img {
	display: inline-block;
	vertical-align: middle;
	padding: 0 0 3px 5px;
}
.agreeArea .btnGreen.lrg.double a > span > span span + span {
	padding: 5px 0 0;
}
.agreeArea .btnGreen.lrg.double a > span > span span span {
	display: inline;
	font-size: 85%;
}
@media screen and (max-width: 900px){
	.agreeArea {
		padding: 30px 0 0;
	}
	.agreeArea p span.agreeAreaTxt {
		line-height: 1.2;
		padding-bottom: 12px;
	}
	.agreeArea .btnGreen {
		margin: 0 auto 10px;
		max-width: 300px;
		width: auto;
	}
	.agreeArea .btnGreen.lrg a > span > span {
		font-size: 125%;
	}
		/*20190423追記*/
	/* CP終了時 
	-------------------------- */
	#CPfinish {
		width:auto;
		color:#e20000;
		font-weight:bold;
		text-align:center;
		border:solid 2px #e20000;
		padding:6px 5px 5px;
		margin:20px 5px;
	}
	#CPfinish p {
		width:100%;
		padding:0;
	}
}

/*---------------
cautionBlock
------------------*/
.cautionBlock01 ul li, ul.cautionBlock01 li {
 /zoom: 1;
	margin-bottom: 5px;
}
.cautionBlock01 ul li span, ul.cautionBlock01 li span {
	float: left;
	display: block;
}
.cautionBlock01 ul li span.text, ul.cautionBlock01 li span.text {
	padding-left: 2em;
	float: none;
}
.cautionBlock01 ul li span.text .txtDecoration , 
ul.cautionBlock01 li span.text .txtDecoration {
	display: inline;
	float: none;
}
.cautionBlock01 ul li .linkBlock01, ul.cautionBlock01 li .linkBlock01 {
	margin-left: 2em;
}
.cautionBlock01 ul li span.text .linkBlock01, ul.cautionBlock01 li span.text .linkBlock01 {
	margin: 0;
}
.cautionBlock01 ul li .listBlock01, ul.cautionBlock01 li .listBlock01 {
	padding-left: 25px;
}
.cautionBlock01 ul li ul, ul.cautionBlock01 li ul {
	padding-left: 25px;
}
.listBlock02 > ul > li > .cautionBlock01 {
	padding-left: 25px;
}
.cautionBlock01 ul li.cautionStxt {
	font-size: 92%;
}

@media screen and (max-width: 900px){
	.cautionBlock01 ul li span.text, ul.cautionBlock01 li span.text {
		text-align: left;
	}
}

/*-------------------------------
.mainBlock
--------------------------------*/
.mainBlock {
	background: #ffccd9;
	margin: 0 auto;
	width: 900px;
}
.mainBlock .inner {
	padding: 10px;
}
.mainBlock .caution {
	background-image: url("/oos/adv/image/tmp_185/tmp185_line_001.png"), url("/oos/adv/image/tmp_185/tmp185_line_001.png");
	background-repeat: no-repeat;
	background-position: top center, bottom center;
	padding: 54px 10px;
}
@media screen and (max-width: 900px){
	.mainBlock{
		width: 100%;
	}
	.mainBlock .inner {
		padding: 20px 10px;
	}
	.mainBlock .caution {
		padding: 54px 0;
	}
}
/*-------------------------------
.contentBlock
--------------------------------*/
.contentBlock {
	background: #ffe3ea;
	background-image: url("/oos/adv/image/tmp_185/tmp185_bg_001.png"), url("/oos/adv/image/tmp_185/tmp185_bg_002.png");
	background-repeat: no-repeat;
	background-position: right 20px bottom 20px, left 20px bottom 20px;
	margin: 0 auto;
	position: relative;
	width: 900px;
}
.contentBlock .inner{
	padding: 60px 20px 128px;
}
.contentBlock .inner h3{
	margin-bottom: 20px;
	text-align: center;
}

/* campaignArea */
.campaignArea {
	pointer-events: none;
}
.campaignArea table tbody th {
	color: #cd001b;
	background: #fffcdb;
}
.campaignArea table tbody td {
	background: #ffffff;
}
.campaignArea table th, .campaignArea table td {
	border: solid 2px #d1001d;
	padding: 9px;
}
@media screen and (max-width: 900px){
	table, tbody, tr, th, td {
		display: block;
	}
	.campaignArea table th, .campaignArea table td {
		border: none;
		border-top: solid 2px #d1001d;
		border-left: solid 2px #d1001d;
		border-right: solid 2px #d1001d;
	}
	.campaignArea table tr:last-child {
		border-bottom: solid 2px #d1001d;
	}
}


/* paymentArea */
.paymentArea{
	margin-bottom: 91px;
}
.paymentArea .paymentAreaInner{
	box-shadow: 0 0 0 1px #f97392, 0 0 0 8px #FFF, 0 0 0 11px #f97392;
	background: #fff;
	margin: 0 10px;
	padding: 18px 27px 40px;
}
.paymentArea .paymentAreaInner a{
	text-decoration: none;
}

/* exampleArea */
.exampleArea .cautionBlock01.exampleAreaCaution{
	font-weight: bold;
	margin: 0 auto 80px;
	width: 65%;
}

@media screen and (max-width: 900px){
	.contentBlock{
		background-position: right 10px bottom 10px, left 10px bottom 10px;
		-webkit-background-size: 23%;
		background-size: 23%;
		width: 100%;
	}
	.contentBlock .inner{
		padding: 30px 10px 128px;
	}
	.paymentArea{
		margin-bottom: 46px;
	}
	.paymentArea .paymentAreaInner{
		padding: 10px;
	}
	.exampleArea .cautionBlock01.exampleAreaCaution{
		margin: 0 auto 30px;
		max-width: 531px;
		width: 100%;
	}
}


/*-------------------------------
pagetop
--------------------------------*/
.pagetop {
	margin:45px auto 0;
	
	text-align:right;
	width: 900px;
}
.pagetop p {
	padding-top:1em;
	padding-right: 10px;
}
.pagetop p.top01 a {
	background: url(/shared/image/ico/ico_pagetop.gif) no-repeat scroll left top transparent;
	font-size: 92%;
	padding-left: 17px;
}

@media screen and (max-width: 900px){
	.pagetop {
		width: 100%;
	}
}

/*-------------------------------
#footer
--------------------------------*/
#footer {
	margin:40px auto 0;
	text-align:center;
	
}
#footer img {
	padding-bottom:10px;
}
#footer address {
	font-size:85%;
	padding-bottom:50px;
	margin-bottom:0;
}






