@charset "UTF-8";
html {
}

body {
  margin: 0;
  padding: 0;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, figure, input, textarea, p, blockquote, table, th, td, address {
  margin: 0;
  padding: 0;
  color: #000;
  font-style: normal;
  font: 87.5% "Hiragino Kaku Gothic Pro W3",Meiryo,arial,helvetica,"ms pgothic",hirakakupro-w3,sans-serif;
  line-height: 1.5;
  color: #333;
}

select,
input,
button,
textarea {
  font-size: 99%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
  font: 100%;
}

textarea, input {
  margin: 0;
  padding: 0;
}

caption, th {
  text-align: left;
}

td, th {
  vertical-align: top;
}

fieldset, img, abbr {
  border: none;
}

li {
  list-style-type: none;
}

hr {
  display: none;
}

strong {
  font-weight: normal;
}

body {
  -webkit-text-size-adjust: 100%;
}

a, a:link {
  color: #333333;
  text-decoration: none;
}

a:visited {
  color: #333333;
}

a:hover {
  color: #0092d7;
}

a.notice-red{
  color:#f00 !important;
}

.alpha {
	transition-duration:.3s;
	-webkit-transition-duration:.3s;
	-moz-transition-duration:.3s;
}

.alpha:hover {
	transition-duration:.3s;
	-webkit-transition-duration:.3s;
	-moz-transition-duration:.3s;
	filter: alpha(opacity=60); -ms-filter: 'alpha(opacity=60)'; opacity: .6;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

#wrap { min-width: 1000px; margin: 0 auto; }
#wrap h2,
#wrap h3,
#wrap h4,
#wrap li { line-height: 1; }
#wrap img { vertical-align: top; }

/*---------------------------------*/

.pc{
  display: block;
}

.sp{
  display: none;
}

.attention1 { text-align: center; font-size: 10px; color: #666; }
.attention1 a,
.attention1 a:hover,
.attention1 a:visited,
.attention1 a:active { color: #0e5da0;text-decoration:underline; }


.bgType01 { background-image: url(../images/bg-content01.png)}
.section { border-bottom: 1px solid #e1e1df; }
.btnOlsBox {  height: 83px; background: url(../images/btn-ols-buy.png) center top no-repeat; }
.mb30 { margin-bottom: 30px!important; }

h2.origin { text-align: center; width: 100%; margin: 0 auto; line-height: 1.0; }
h2.origin img { margin: 0 auto;}
#logo { background: url(../images/bg-header.png);}
#logoInner { width: 960px; margin: 0 auto; text-align: left;}
#logoInner img { vertical-align: middle; }
#logoInner span { vertical-align: middle; color: #585858; font-size: 12px; font-weight: normal; }

#main { max-width: 1280px; margin: 0 auto; background: url(../images/mainvis-pc.jpg) 50% 50% no-repeat; height: 540px; position: relative; }
body#type02 #main{background-image: url(../images/mainvis-pc_02.jpg);}
#mainOuter { background: url(../images/bg-mainouter.png); }
#lvyou { position: absolute; bottom: 0; right: 0; }

#mainBnr { position: relative; height: 0; width: 100%; max-width: 960px; margin: 0 auto; }
#mainBnr a { position: absolute; bottom: 15px; left: 50%; margin-left: -167px; }

#nav { border-bottom: 2px solid #0099ff; height: 58px;}
#nav ul { width: 960px; margin: 0 auto; border-left: 1px dotted #000; height: 58px; }
#nav ul li { width: 238px; float:left; border-right: 1px dotted #000; }
#nav ul li a { text-align: center; display: block; height: 58px; overflow: hidden; font-size: 0; background: 50% 50% no-repeat; }

#nav ul li:nth-child(1) a { background-image: url(../images/nv01.png); }
#nav ul li:nth-child(2) a { background-image: url(../images/nv02.png); }
#nav ul li:nth-child(3) a { background-image: url(../images/nv03.png); }
#nav ul li:nth-child(4) a { background-image: url(../images/nv04.png); }

body#type02 #nav ul li:nth-child(1) a { background-image: url(../images/nv02.png); }
body#type02 #nav ul li:nth-child(2) a { background-image: url(../images/nv01.png); }

/* content Common */
#lineup,
#point1,
#point2,
#point3,
#point4 { padding: 50px 0 60px;}

#tax { width: 100%; max-width: 960px; margin: 0 auto; text-align: right; padding-bottom: 15px;  }
#tax img{max-width: 100%;}

#lineup { padding-top: 15px!important;}

#lineup h2 { margin-bottom: 50px; }
#lineup ul { width: 630px; margin: 0 auto;}
#lineup li {
	float: left;
	text-align: center;
	width: 300px;
	background: #fff;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px;
	margin-left: 10px;
	padding: 30px 0;
		   -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
		-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
			box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
	font-size: 16px;
	position: relative;
}

#lineup li img.linup-batch { position: absolute; top: -35px; left: -20px;}

#lineup li a{ display: block; }

#lineup li:first-child { margin-left: 0; }
#lineup li img.prodct {  }
#lineup li p { margin-bottom: 20px; }

.lineupBtnBox { height: 44px; background: url(../images/btn-lineup-buy.png) center top no-repeat; }

#point1 .top-point { background: url(../images/top-point1.png) center top no-repeat; height: 100px;}
#point2 .top-point { background: url(../images/top-point2.png) center top no-repeat; height: 100px;}
#point3 .top-point { background: url(../images/top-point3.png) center top no-repeat; height: 100px;}
#point4 .top-point { background: url(../images/top-point4.png) center top no-repeat; height: 100px;}


/* point1 */

#point1 h2.origin { background: url(../images/h2-point1.png) center top no-repeat; height: 153px;}
body#type02 #point1 h2.origin{background:none;height: auto; padding: 20px 0 40px;}

#point1Contentbox { width: 100%; max-width: 960px; margin: 0 auto; }
.point1ContentLeft { float: left; width: 366px; padding-top: 65px; }
.point1ContentLeft .attention1 {  }
.point1txt { background: url(../images/point1txt.png) no-repeat; padding-top: 280px; height: 0; overflow: hidden; line-height: 2.0; font-size: 18px;  }
.point1ContentRight { width: 594px; float: right; position: relative; }
/*#point1ContentRight img { position: absolute; top: 0; left: 0; }*/
#point1 .attention1 { padding: 15px 0 70px; text-align: left; line-height: 1.8; }
#point1Btn1 { text-align: center; margin-bottom: 60px; }
#point1Btn1 a { padding: 0 20px;}
#point1Btn1 img { }
#point1Btn2 { text-align: center; }
#point1Btn2 a { display:block; max-width: 480px; margin: 0 auto; }

#bnr-point1-speed { max-width: 960px; width: 100%; text-align: center; margin: 0 auto 60px; }

/* point2 */
#point2 h2.origin { padding: 20px 0 40px;}
body#type02 #point2 h2.origin{padding:0;}
.point2Contentbox {
	max-width: 948px;
	margin: 0 auto;
	background: #fff;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius:14px;
	border: 6px solid #b8e2fe;
	text-align: center;
	padding: 60px 0;
}

.point2Contentbox ul { width: 810px; margin: 0 auto; padding-top: 40px; }
.point2Contentbox ul li { position: relative; text-align: left; font-size: 11px; line-height: 1.3!important; margin-bottom: 8px; padding-left: 2.5em; }
.point2Contentbox ul li span { position: absolute; left: 0; }

.point2Contentbox h3{margin-bottom:30px;}

body#type02 #point2 .attention1 { text-align: left; }

/* point3 */
#point3 { position: relative; }
#point3 h2 {  }
.point3TxLink01 { text-align: center; color: #0e5da0; font-weight: bold; font-size: 16px; padding-top: 10px; margin-bottom: 40px; text-decoration: underline; }
.point3TxLink01 a,
.point3TxLink01 a:hover,
.point3TxLink01 a:visited,
.point3TxLink01 a:active { color: #0e5da0; text-decoration: underline; }
.point3Contentbox {
	max-width: 960px;
	margin: 0 auto;

	background: #fff;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius:14px;
	border: 1px solid #003399;
}

.point3Contentbox h3{ position: relative; }

#point3-h3-01 { background: url(../images/h3-point3-1.png) center top; width: 960px; height: 96px; }
#point3-h3-02 { background: url(../images/h3-point3-2.png) center top; width: 960px; height: 96px; }
.point3Contentbox h3 img.gacha { position: absolute; bottom: 0; left: -20px; }
.point3Contentbox h3 img.mukku { position: absolute; bottom: 0; right: 0; }
.point3Contentbox h3 img.osusume { position: absolute; bottom: 0; right: 0; }

#point3 ul { width: 100%; margin: 0 auto; border-bottom: 1px solid #003399; }
#point3 li { height: 118px; width: 480px; display: table-cell; vertical-align: middle; text-align: center; }
#point3 li:nth-child(2) { background: #def1ff; }

.point3-total { padding: 40px 0; text-align: center; }
.point3-total span#total1 { display: block; background: url(../images/point3-plan1-total.png); width: 880px; margin: 0 auto; height: 100px;  }
.point3-total span#total2 { display: block; background: url(../images/point3-plan2-total.png); width: 600px; margin: 0 auto; height: 100px;  }
.point3-total img { margin: 0 auto; }
#point3 .attention1 { padding: 0 40px 40px; text-align: left; line-height: 1.8; }
#point3 .btn-detail { padding: 0 0 40px; text-align: center;}
#point3 .btn-detail a { display: block; width: 360px; height: 0px; overflow: hidden; line-height: 2.0; padding-top: 60px; margin: 0 auto; background: url(../images/btn-detail.png) no-repeat center top;}

#point3Btn1 { text-align: center;  }
#point3Btn1 a { padding: 0 ; display: block; max-width: 480px; margin: 0 auto;}

#point3-change { text-align: center; }

/* point4 */
#point4 h2.origin { padding: 20px 0 60px;}
#point4 .attention1 { padding: 15px 0 0px; margin-bottom:0!important; }
.point4Contentbox {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border: 1px solid #0099ff;
	background: #fff;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
	overflow: hidden;
	height:730px;
}

#point4 ul { width: 100%; margin: 0 auto; }
#point4 li { width: 479px; text-align: center; padding: 50px 0; float: left; position: relative; }
#point4 li:nth-child(1),
#point4 li:nth-child(2) { border-bottom: 1px solid #0099ff; }
#point4 li:nth-child(1),
#point4 li:nth-child(3) { border-right: 1px solid #0099ff; }
#point4 li:nth-child(2),
#point4 li:nth-child(4) { }
#point4 li:nth-child(4) { }
#point4 li:nth-child(4) { }

#point4 li p { font-size: 12px; margin-bottom: 40px; padding-top: 10px; }

.point4batch { position: absolute; top: 0; left:0; }

.point4Contentbox a {
	display: block; width: 50%; float: left;
	text-align: right;
	height: 44px;
	background: url(../images/btn-point4-1-1.png) no-repeat right top;
}
.point4Contentbox a.btnLeft { text-align: left; background: url(../images/btn-lineup-buy.png) no-repeat 5px top;}
.point4Contentbox a.btnLeft img { margin-left: 5px;}

#btmbnr { padding: 8px 0 30px; text-align: center; }

/* SNS */
#snsArea { padding: 30px 0 0; text-align: center; }
#snsAreaInner { width: 100%; max-width: 960px; margin: 0 auto; text-align: right;  }
#snsArea ul { margin-bottom: 25px; }
#snsArea li{ display: inline; text-align: right; margin-right: 8px; }
#snsArea p { height: 19px; }


/* Footer */
footer {
  text-align: center;
  padding: 10px 0;
  background: #363636;
}

footer #copy {
  font-size: 10px;
  color: #797979;
}

/*
.btn01 { display: table-cell;
	vertical-align: middle;
	height:60px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	border: #c1c1c1 1px solid;
	background: #fff;
}

.btn01 span { font-size: 10px;}
*/
@media screen and (min-width: 768px) {
    body#type02 #main{background-image: url(../images/mainvis-pc_02.jpg); height:580px;}
}

@media screen and (max-width: 768px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .btnOlsBox { width: auto; height: auto; background:none; }

	#logo { background: url(../images/bg-header.png);}
	#logoInner { width: 100%; margin: 0 auto; text-align: center;}
	#logoInner img { vertical-align: middle; width: 130px; }
	#logoInner span { display: none; }


	#main { max-width: 1280px; margin: 0 auto; background: none; height: auto; position: relative; }
  	#main img#mainvis { width: 100%; }
  	#wrap { min-width: 100%; margin: 0 auto; }

	#lvyou { width:22%; }
	#lvyou img { width:100%; }

	#mainBnr { position: relative; height: auto; padding: 20px 0; width: 100%; max-width: 960px; margin: 0 auto; text-align: center; }
	#mainBnr a { position: relative; bottom: auto; left: auto; display: block; margin: 0 auto!important;  }

  	h2.origin { text-align: center; width: 100%; margin: 0 auto;}
  	h2.origin img { width: 100%;}

	#mainBnr img { width: 90%;}

	#nav { border-bottom: 2px solid #0099ff; height: auto;}

	#nav ul { width: 100%; margin: 0 auto; border-left: none; height: auto; }
	#nav ul li { width: 50%; display: inline-block; border-right:none; background:none; background: url(../images/icon-nav-arrow.png) center bottom no-repeat!important; }
	#nav ul li a { text-align: center; display: block; height: auto; padding: 22px 0 22px; font-size: 14px; border-right: 1px dotted #000; line-height: 1; font-weight: bold }

	#nav ul li:nth-child(1) { border-bottom: 1px dotted #000; }
	#nav ul li:nth-child(2) { border-bottom: 1px dotted #000;  }
	#nav ul li:nth-child(3) {  }
	#nav ul li:nth-child(4) {  }

	#nav ul li:nth-child(1) a{ background:none; }
	#nav ul li:nth-child(3) a{ background:none; }
	#nav ul li:nth-child(2) a{ border-right: none; background:none; }
	#nav ul li:nth-child(4) a{ border-right: none; background:none; }

    body#type02 #nav ul li:nth-child(1) a{ background:none; }
    body#type02 #nav ul li:nth-child(2) a{ background:none; }

	#point1 .top-point { background-size: cover; height: 90px;}
	#point2 .top-point { background-size: cover; height: 90px;}
	#point3 .top-point { background-size: cover; height: 90px;}
	#point4 .top-point { background-size: cover; height: 90px;}

	#lineup,
	#point1,
	#point2,
	#point3,
	#point4 { padding: 30px 0;}


	#lineup h2 { margin-bottom: 50px; }
	#lineup h2 img { width: auto; }

  	#lineup { padding: 30px 20px;}
	#lineup ul { width: 100%;}
	#lineup li {
		display: inline-block;
		width: 45%;
		margin-right: 0;
		margin-bottom: 20px;
		float: left;
	}
	#lineup li:nth-child(2),
	#lineup li:nth-child(4) { float: right; }
	#lineup li img { width: 60%; max-width: 260px;}
	#lineup li img.linup-batch { position: absolute; top: -25px; left: -20px; width: 25%; }

	.lineupBtnBox { height: auto; background: none; }

  	#point1 ul,
	#point2 ul,
	#point3 ul,
	#point4 ul { width: 100%; max-width: 540px; margin: 0 auto; }

	#point1 li,
	#point2 li,
	#point3 li,
	#point4 li { width: 100%; display: block; margin-bottom: 0px; }

	#point1 li:last-child,
	#point2 li:last-child,
	#point3 li:last-child,
	#point4 li:last-child { margin-bottom: 0; }

	#point1 li img,
	#point3 li img{ width: 100%;}



	#point1 h2.origin { background: none; height: auto;}
	#point1 { max-width: 1280px; margin: 0 auto; background: none; padding-bottom: 60px; }
	.point1ContentLeft { max-width:540px; float: none; width: 91%; margin: 0 auto; padding-top: 20px; }
	.point1txt { background: none; padding-top: 0px; height: auto; overflow: inherit; line-height: 1.5; font-size: 16px; font-weight: bold;  }
	.point1txt span { font-size: 12px; font-weight: normal;  }
	.point1ContentRight { width: auto; float: none; position: relative; text-align: center; }
	.point1ContentRight img { max-width:540px; width: 94%; position: relative; margin-bottom: 20px; }
	#point1 .attention1 { padding: 20px 0 20px; text-align: left; color: #666; line-height: 1.8; }

	#point1Btn1 { text-align: center; margin-bottom: 40px; }
	#point1Btn1 a { padding: 0;}
	#point1Btn1 img { width: 85%; margin-bottom: 20px; max-width: 460px; }
	#point1Btn2 img { width: 90%; max-width: 500px; }

	#bnr-point1-speed img { /*max-width: 540px;*/ width: 90%; }

	/* point2 */
	.point2Contentbox {
		max-width:540px;
		width: 90%;
		margin: 0 auto;
		background: #fff;
		-moz-border-radius: 14px;
		-ms-border-radius: 14px;
		-webkit-border-radius: 14px;
		border-radius:14px;
		border: 6px solid #b8e2fe;
		text-align: center;
		padding: 30px 0;
	}

	.point2Contentbox img.crown3 {
		max-width: 476px;
		width: 100%;
	}
	.point2Contentbox img.no1 {
		max-width: 386px;
		width: 100%;
	}
    .point2Contentbox h3 img{width: 100%;}


	.point2Contentbox ul { width: auto!important; margin: 0 auto; padding: 40px 30px 0; }
	.point2Contentbox ul li { width: auto!important; position: relative; text-align: left; font-size: 11px; line-height: 1.3!important; margin-bottom: 8px; padding-left: 2.5em; }
	.point2Contentbox ul li span { position: absolute; left: 0; }

	/* point3 */
	.point3TxLink01 { text-align: center; color: #003399; font-size: 14px; margin-bottom: 30px; }
	.point3Contentbox {
		width: 91%;
		max-width: 540px;
		margin: 0 auto;

		background: #fff;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius:10px;
	}
	#point3-h3-01,
	#point3-h3-02 { background: none; width: auto; height: auto; }
	#point3 h3 img { width: 100%; }
	#point3 .point3Contentbox h3 img.gacha { width: 16%!important; left: -8px; }
	#point3 .point3Contentbox h3 img.mukku { width: 16%!important;  }
	#point3 .point3Contentbox h3 img.osusume { width: 16%!important;  }
	#point3 ul { width: 100%; margin: 0 auto; border-bottom: 1px solid #003399; }
	#point3 li { height: auto; width: 100%; display: block; vertical-align: middle; text-align: center; }
	#point3 li img { width: 60%; margin: 10px 0; }
	#point3 li:nth-child(2) img { width: 70%; margin: 10px 0; }
	#point3 li:nth-child(2) { background: #def1ff; }

	.point3-total { padding: 30px; text-align: center; }
	.point3-total img { width: 100%;}
	.point3-total span#total1,
	.point3-total span#total2 {  background:none; width: auto; height: auto;  }
	#point3 .attention1 { padding: 0 30px; text-align: left; line-height: 1.8; }
	#point3 .btn-detail { padding: 20px 0; text-align: center;}
	#point3 .btn-detail a { display: block; width: 50%; height: auto; margin: 0 auto; background: none; padding-top: 0; }
	#point3 .btn-detail img { width: 100%; margin-bottom: 20px; max-width: 300px; }

	#point3Btn1 { text-align: center; }
	#point3Btn1 a { padding: 0;}
	#point3Btn1 img { width: 85%; margin-bottom: 20px; max-width: 460px; }

	#point3-change img { width: 75%; }

	/* point4 */
	.point4Contentbox {
		width: 91%;
		max-width: 540px;
		margin: 0 auto;
		height:auto;
	}

	#point4 ul { width: 100%; margin: 0 auto; }
	#point4 li { width: 100%; text-align: center; padding: 50px 0; display: block; }
	#point4 li { border-bottom: none; }
	#point4 li:nth-child(1),
	#point4 li:nth-child(3) { border-right: none; }
	#point4 li:nth-child(2),
	#point4 li:nth-child(4) { border: none; }

	#point4 li:nth-child(1),
	#point4 li:nth-child(3),
	#point4 li:nth-child(2){ border-bottom: 1px solid #0099ff; }

	#point4 li p { font-size: 12px; }
	#point4 li img.per50{ width: 80%; }
	#point4 li:nth-child(4) img{ width: 85%; }

	.point4Contentbox a {
		height: auto;
		background: none;
	}

	.point4Contentbox a img { margin-right: 5px;}
	.point4Contentbox a.btnLeft { background: none; }
	.point4Contentbox a.btnLeft img { margin-left: 5px; margin-right: 0;}

	#btmbnr img { width: 90%; max-width: 540px; }


	#snsArea { padding: 30px 0 0; text-align: center; }
	#snsAreaInner { text-align: center;  }
	#snsArea ul { margin-bottom: 25px; margin-left: 8px; }
	#snsArea li{ display: inline; text-align: center; margin-right: 8px; }
	#snsArea p { height: 19px; }


  	footer {
  	  text-align: center;
  	  margin-top: 0;
  	}

}

@media screen and (max-width: 600px) {
	#lineup li img.prodct { width: 100%; }
}

@media screen and (max-width: 480px) {

	#nav ul li a { font-size: 12px;  }

	#point1 .top-point { height: 70px;}
	#point2 .top-point { height: 70px;}
	#point3 .top-point { height: 70px;}
	#point4 .top-point { height: 70px;}

	#lineup { padding: 30px 10px;}
	#lineup li { padding: 20px 0;}
	#lineup h2 img { width: 40%; }
	#lineup li img { width: 85%;}
	#lineup li img.linup-batch { position: absolute; top: -30px; left: -10px; width: 25%; }

	#point1 .attention1 { padding: 20px 0px 20px; text-align: left; }
	#point1Btn1 { margin-bottom: 0; }
	#point1Btn1 img { width: 85%; margin-bottom: 20px; }
	#point1Btn2 img { width: 90%; }
	#point1 li#point1txt { font-size: 14px; line-height: 1.8!important;}

	#bnr-point1-speed { margin-bottom: 20px; }

	.point2Contentbox img.crown3 {
		width: 90%;
	}
	.point2Contentbox img.no1 {
		width: 90%;
	}

	.point3Contentbox {
		-moz-border-radius: 8px;
		-ms-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius:8px;
	}


	#point4 .attention1 { padding: 20px 20px 40px; text-align: left; }

	#point3-change img { width: 80%; }
	#point3 li img { width: 70%; margin: 10px 0; }
	#point3 li:nth-child(2) img { width: 80%; margin: 10px 0; }
	.point3-total { padding: 20px 10px; text-align: center; }
	.point3-total img { width: 100%;}
	.point3TxLink01 { font-size: 12px; margin-bottom: 20px; }
	#point3 .attention1 { padding: 0 10px; text-align: left; line-height: 1.8; }

	#point4 li { padding: 20px 0; }
	#point4 li img{ width: 95%; }
	#point4 li img.point4batch { width: 20%; }

}