/* =========================================================
common
========================================================= */
/* ---------------------------------------------------------
base
--------------------------------------------------------- */
/* リセット
--------------------------------------------------------- */
/* 要素のフォントサイズやマージン・パディングをリセットしています */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

/* 行の高さをフォントサイズと同じにしています */
body { line-height: 1; }

/* 新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }

/* ulのマーカー（行頭記号）を表示しないようにしています */
ol, ul { list-style: none; }

/* a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています */
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* 画像の下に隙間ができてしまうのを防ぎます */
img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/* 全体に関わるスタイル
--------------------------------------------------------- */
body {
	background-color: #fff;
	color: #222;
	font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	letter-spacing: 0.1em;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: #222;
	text-decoration: none;
}
a:hover { opacity: 0.7; }
body,
.is-fixed + .head_area::before { min-width: 1000px; }


/* ---------------------------------------------------------
download_captions
--------------------------------------------------------- */
.download_captions {
	width: 725px;
	margin: 0 auto;
	padding-bottom: 50px;
	color: #888;
	font-size: 80%;
	line-height: 20px;
	letter-spacing: 0;
	text-align:left;
}


/* ---------------------------------------------------------
download_bts
--------------------------------------------------------- */
.download_bts { line-height: 0; }
.download_bts__bt {
	display: inline-block;
	vertical-align: top;
}
/* download_bts--small */
.download_bts--small { padding-top: 25px; }
.download_bts--small .download_bts__bt {
	margin-left: 2px;
	padding-right: 11px;
}
/* download_bts--large */
.download_bts--large {
	position: relative;
	text-align: center;
	margin-bottom:30px;
}
.download_bts--large .download_bts__bt { padding: 0 15px; }


/* ---------------------------------------------------------
footer
--------------------------------------------------------- */
.footer {
	position: relative;
	background-color: #fff;
	text-align:center;
	border-top:1px solid #f0f0f0;
}

.footer__copyright {
	color: #444;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing:0.3px;
	padding:10px;
	
}


/* ---------------------------------------------------------
header
--------------------------------------------------------- */
.header {
	padding: 17px 14px 16px;
	line-height: 0;
}
.header__logo a:hover { opacity: 1; }




/* ---------------------------------------------------------
section
--------------------------------------------------------- */

.mb50{ margin-bottom:50px !important;}

.line{ background-color:#303030; height:5px; position: relative; }
.line:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -18px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 18px 0 18px;
    border-color: #303030 transparent transparent transparent;
    z-index: 0;
}
.centerImg{ margin-bottom:30px;}
.centerImgArrow{ margin-bottom:20px;}
.section { position: relative; }
.inner { position: relative; padding:50px;}
.inner::before {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
}



/* section--lead */
.section--main {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/main_bg.png);
	height:540px;
	background-position:center;
}
.section--main .inner{
	width:1050px;
	margin:0 auto;
	position:relative;
	
	}
.section--main .inner .main{
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
	margin: auto;
	width:901px;
	}	
.section--main .inner .cloudLeft{
	position: absolute;
	top: 200px;
	left: 0;
	margin: auto;
	width:171px;
	}	
.section--main .inner .cloudRight{
	position: absolute;
	top: 200px;
	right: 0;
	margin: auto;
	width:166px;
	}	

.section--main  .caption{
	position: absolute;
	top: 470px;
	left: 0;
	right: 0;
	text-align:center;
	font-size:90%;
	line-height:1.5; transform: scale( 0.9 , 1 );
	font-weight:600;
	color:#222222;
	}


.campaign {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/campaign_bg.png);
	background-position:center;
	text-align:center;
}
.campaign .detailHead{ 
	background-color:#008738;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	width:720px;
	margin:0 auto;
	padding:10px 0px;
		}
.campaign .detailBottom{ 
	background-color:#fff;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	width:720px;
	margin:0 auto;
	padding:25px 0px 35px;
	position:relative;
	}
.campaign .sevenPremium	{
	margin-top:245px;}

.campaign .corn	{
	position:absolute;
	top:91px;
	left:134px;
	}	

.project {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/project_bg.png);
	background-position:center;
	text-align:center;
}


.project .detailHead{ 
	background-color:#fffd39;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	width:720px;
	margin:0 auto;
	padding:10px 0px;
		}
.project .detailBottom{ 
	background-color:#fff;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	width:720px;
	margin:0 auto 15px ;
	padding:25px 0px 35px;
	position:relative;
	}
.project .cap {
    text-align: center;
    color: #222222;
    width: 1050px;
    margin: 0 auto;
    line-height: 1.5;
	transform: scale( 0.9 , 1 );
    font-weight: 600;
}

.about {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/about_bg.png);
	background-position:center;
	text-align:center;
}

.about .detailBox{ 
	background-color:#fff;
	border-radius:10px;
	width:880px;
	margin:0 auto 15px ;
	padding:25px 50px 35px;
	position:relative;
	 overflow:hidden; 
	}	

.about .cap{
	text-align:left;
	color:#222222;
	width:1050px;
	margin:0 auto;
	line-height:1.5;}

.about .cap p{transform: scale( 0.9 , 1 );
	font-weight:600;
	}
	
.colum { width:190px;
	float:left;
	overflow:hidden;
	margin:0px 8px ;
	}

.colum .columHead{
	background-color:#f7931e;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border:2px solid #f7931e;
	padding:5px;
	font-size:80%;
	font-weight:bold;
	line-height:1.2;
		}
.colum .columBottom{
	color:#222;
	background-color:#fff;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	border:2px solid #f7931e;
	padding:10px;
	font-size:80%;
	line-height:1.2;
	height:230px;
	
		}		
.colum .columBottom p{
	margin-bottom:20px;
	text-align:left;
	letter-spacing:0.7px;}
		
.aboutArrow{
	float:left;
	margin-top:140px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #444;
	}		
		
.howto {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/howto_bg.png);
	background-position:center;
	text-align:center;
}		
		
.howto .detailBox{ 
	background-color:#fff;
	border-radius:10px;
	width:880px;
	margin:0 auto 20px ;
	padding:25px 100px 35px;
	position:relative;
	 overflow:hidden; 
	}		
.howto .detailBox .step{ 
	margin-bottom:30px;
	text-align:left;
	}

.info {
	padding: 0px;
	background: linear-gradient(to bottom right, #ff9326, #ff6400);
	color: #fff;
	background-image: url(../imgs/info_bg.png);
	background-position:center;
	text-align:center;
	overflow:hidden;
	}
.grayArea{
	background-color:#3d3d3d;
	position:relative;
	margin-top:30px;
	height:194px;
	margin-bottom:35px;
	}

.grayArea .lead{
	position:absolute;
	top:-10px;
	left:0;
	right:0;
	
	}
.grayArea .btn{
	position:absolute;
	top:73px;
	left:0;
	right:0;
	}				

.info .infoSt{
	font-size:18px;
	color:#222;
	font-weight:500;
	margin-bottom:10px;
	}

.info .alart{
	width:780px;
	margin:0 auto 60px;
	}	
	
.info .alart p{
	font-size:97%;
	color:#222;
	text-align:left;
	letter-spacing:0.5px;
	line-height:1.5;
	text-indent:-1em;
	padding-left:1em;
	}	
	

#end {
  background-color: #ffdede;
  border-top: 1px solid #e50000;
  border-bottom: 1px solid #e50000;
  padding: 24px 0;
}
#end ul {
  width: 400px;
  margin: 0 auto;
}
#end ul li {
  position: relative;
  padding-left: 24px;
  color: #e50000;
  padding-top:3px;
}
#end ul li strong {
  font-weight: normal;
  font-style: normal;
}
#end ul li:before {
  width: 18px;
  height: 18px;
  background-image: url(../imgs/marker.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 0;
  content: "";
}	
	

.overBox{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:900px;
	 height:850px;
	margin: auto;}
.overlay{
	 background-color:rgba( 0, 0, 0, 0.5 );
	 width:100%;
	 height:100%;
	 margin:0 auto;
	 position:relative;
	 z-index:9999;
		}	
	
.endBox{ 
	position:relative;
	background-color:#ffdede;
	border-top:1px solid #e50000;
	border-bottom:1px solid #e50000;
	width:100%;
	padding:30px 0px;
	height:16px;
	margin: auto;
	color:#e50000;}	

.endBox span{position: relative; padding-left:30px;}
	
.endBox span:before {
  width: 18px;
  height: 18px;
  background-image: url(../imgs/marker.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 1px;
  left: 7px;
  content: "";
}

.overBox02{
	position:absolute;
	top:40px;
	left:0;
	right:0;
	width:1100px;
	 height:1020px;
	margin: auto;}
.overlay02{
	 background-color:rgba( 0, 0, 0, 0.5 );
	 width:100%;
	 height:100%;
	 margin:0 auto;
	 position:relative;
	 z-index:9999;
		}	
	
.endBox02{ 
	position:absolute;
	top:40px;
	left:0;
	right:0;
	background-color:#ffdede;
	border:1px solid #e50000;
	width:500px;
	padding:50px 20px;
	height:16px;
	margin: auto;
	color:#e50000;}	

.endBox02 span{position: relative; padding-left:30px;}
	
.endBox02 span:before {
  width: 18px;
  height: 18px;
  background-image: url(../imgs/marker.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 1px;
  left: 7px;
  content: "";
}