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

html {
	overflow-y:scroll;
}

* {
	padding:0;
	font-size:16px;
	color:#505050;
	margin:0;
	line-height: 1.7em;
	-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body{
	font-family:"メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color:#fff;
	position: relative;
	overflow-x :hidden;
    font-size: 16px;
    line-height: 1.7;
}

/*common*/
.mgt10 { margin-top: 10px !important;}



.wrapper{
	width:760px;
	margin:0 auto;
}
@media screen and (max-width: 700px) {
	.wrapper{
	width:95%;
}
}
h1{
	padding:10px 10px 0;
	width:100%;
	font-size:18px;
	color:#505050;
	border-bottom:solid 2px #0a5ebb;
	display:block;
}
@media screen and (max-width: 700px) {
	h1{
		text-align: center;
	}
}
.seico{
	border-bottom:solid 2px #FF5A00;
	margin-bottom:16px;
}
h2{
	margin:24px 0;
	color:#505050;
	background-color: #F3F3F3;
	padding:4px 8px;
	border-left:solid 6px #ADADAD;
}
h3{
	margin:10px 0;
}
img{
	border:none;
	display:block;
	margin:0 auto;
}
.logoArea{
	display: block;
	float:right;
	margin:8px 10px 0;
}
.circlekLogo{
	display: inline!important;
}
.sunkusLogo{
	display: inline!important;
}
@media screen and (max-width: 700px) {
	.logoArea{
	float:none;
	}
	.logoArea img{
	display:block;
	margin:0 auto;
	}
	}
.mainImg{
	text-align: center;
}
.red{
	color:#da5959;
}

.btnArea{
	text-align: center;	
	margin:16px 0;
}
.btnArea a{	
	background-color: #EE8C11;
	border-bottom:solid 2px #CD7200;
	border-radius:20px;
	text-decoration: none;
	color:#fff;font-weight:bold;
	margin:16px;
}
.btnArea a:hover{
	opacity: 0.9;
}
.pcBtn{
	background:url(../mb/conv/images/icon_pc.png) no-repeat 14px;
	
}
.spBtn{
	background:url(../mb//conv/images/icon_sp.png) no-repeat 14px;
}
.pcBtn,.spBtn{
	padding:4px 16px 4px 42px;
}
@media screen and (max-width: 700px) {
	.btnArea a{
		display: block;
		margin:0 auto;
		width:250px;
		margin-top:10px;
	}
}
.cautionBox{
	position: relative;
    margin: 3em 0;
    padding: 0 1em;
    border: solid 3px #da5959;
	padding:8px 24px 8px 32px;
}
.cautionBox ul li,.cautionBox ul li span{
	font-size:15px;
}

.cautionTitle{
	position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 2px 18px;
    height: 25px;
    line-height: 1.7em;
    vertical-align: middle;
    font-size: 15px;
    background: #da5959;
    color: #ffffff;
    font-weight: bold;
}
.stepArea{
	margin-top:20px;
	padding-bottom:16px;
}
.stepArea img{
	float: left;
	margin-right:8%;
}
@media screen and (max-width: 700px) {
	.stepArea img{
	float:none;
	display:block;
	margin:10px auto 24px;
}
}
.enlarge{
	line-height:1.6;
	position:relative;
	margin:0!important;
	
}
.enlarge:before{
	content:"+";
	position:absolute;
	width:20px;
	height:20px;
	background:#AAAAAA;
	color:#fff;
	line-height:19px;
	text-align:center;
	left:0px;
	top:0px;
	font-weight:bold;
	z-index: 2;
	
}
.zoomImage img{
	display:inline-block;
	float:left;
}

.clear:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}



.copyright{
	font-size:12px;
	color:#B5B5B5;
	text-align: center;
	margin:60px 0 10px;
}
#topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:50px;
  height:50px;
  text-align:center;
  line-height:20px;
  border-radius:30px;
  padding-top:24px;
  box-sizing:border-box;
}
#topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.stepBar,.stepBar6{
  position: relative;
  margin: 6px auto 60px;
  text-align: center;
  width:72%;	
}

@media screen and (max-width: 700px) {
	.stepBar,.stepBar6{
  width:90%;	
}
}
.stepBar li{
	font-size: 10px;
  list-style: none;
  position: relative;
  width: 20%;
  float:left;
}
.num3 li{
    width:33%;
}num3
.num6 li{
  width: 16.6%;
}
.num7 li{
  width: 14.2%;
}
.num8 li{
  width: 12.5%;
}
.stepBar li:after{
  background: #E3E3E3;
  content: "";
  width: calc(100% - 28px);
  height: 4px;
  position: absolute;
  left: calc(-50% + 14px);
  top: 12px;
}
.stepBar li span{
  background: #E3E3E3;
  color: #ffffff;
  display: inline-block;
  height: 28px;
  margin-bottom: 5px;
  line-height: 28px;
  width: 28px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.stepBar a,.stepBar6 a{
	text-decoration: none;
	color:#fff;
	border:none;
}
.stepBar .visited:after{
  background:  #71b7d8;
}
.stepBar .visited span{
  background: #71b7d8;
}
.stepBar li:first-child:after,.stepBar6 li:first-child:after{
  display: none;
}
.stepTitle{
	margin-top:20px;
	padding-top:24px;
	text-align: center;
	border-top:solid 1px #EFEFEF;
	font-weight: bold;
}
#topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.3); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:8px;
  width:40px;
  height:40px;
  text-align:center;
  line-height:20px;
  border-radius:30px;
  padding-top:24px;
  box-sizing:border-box;
}
#topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
#topBtn:hover {
  opacity:0.7;
}

/*--セブンイレブン--*/
.seven{
	border-bottom:solid 2px #00A563;
	margin:0 0 16px;
}
.mailSample{
	background-color: #F5FCF3;
	padding:32px 36px;
	margin:16px 0;
}
h1.circleksunkus{
 	border-bottom:solid 2px #E60010;
	
}

/*ファミマ*/
#familymart .stepBar {
    margin: 10px auto 20px auto;
}
.stepArea2 { }

.stepImg {
    text-align: center;
    margin: 0 0 15px 0;
}
.stepImg img {
    width: 240px;
    height: auto;
}
.stepTxt {
    text-align: center;
}