@charset "UTF-8";

/* ==================================================================
CSS information
style info :「guard」 用
================================================================== */

.layout {
	margin:0 auto;
	padding-left:30px; padding-right:30px;
	position:relative;
	width:960px;
}
.side_chara {
	position:absolute;
	top:0; left:0;
	width:960px;
}
.side_chara img {
	vertical-align:top;
}
.side_chara .chara_l { float:left; position:relative; }
.side_chara .chara_r { float:right; position:relative; }

#contents {
	background:#fffef6;
}

/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { overflow:hidden; }
#mainvisual .layout { height:700px; }

#mainvisual #page_lead {
	position:absolute; left:74px; top:38px;
	width:334px;
	text-align:center;
}
#mainvisual #ttl { position:absolute; top:199px; left:25px; }
#mainvisual .monitor { position:absolute; right:17px; top:60px; }
#mainvisual .chara { position:absolute; right:-15px; top:159px; }
#mainvisual .btn_zero {
	position:absolute; left:40px; bottom:66px;
	width:202px;
	text-align:center;
}
#mainvisual .btn_trial {
	position:absolute; left:41px; bottom:66px;
	width:206px;
	text-align:center;
}


#mainvisual .info{
	width: 880px;
	height: 37px;
	background: url(../_img/guard/info_bg.png) center top no-repeat;
	position: absolute;
	left: 40px;
	bottom: 10px;
}

#mainvisual .info p{
	line-height: 1.4;
	font-size: 13px;
	padding: 11px 0 0 200px;
}
#mainvisual .info p a{
	color: #FFF;
}

/* --------------------------------------------------------
#c7
-------------------------------------------------------- */
#c7 {
	background: url(../_img/guard/c7_bg.png) center top no-repeat;
	padding-bottom: 125px;
}
#c7 .c7_ttl { margin-bottom: 42px; padding-top:107px; position:relative; text-align:center; }
#c7 .c7_ttl .inew { position: absolute; top: 84px; left: 50%; margin-left: -36px;}
#c7 #video-box3 {
	padding-left:4px; padding-top:12px;
	position:relative;
	width:872px; height:510px;
	margin: 0 auto;
	background:url(../_img/guard/c7_video_bg.png) center top no-repeat;
}


/* --------------------------------------------------------
#c1
-------------------------------------------------------- */
#c1 {
	background:#2372e8;
}
#c1 .side_chara { top:-164px; }
#c1 .side_chara .chara_r { margin-right:-15px; position:relative; }
#c1 .c1_ttl { margin-bottom:-22px; padding-top:20px; position:relative; text-align:center; z-index:10; }
#c1 .image { text-align:center; background:#10131a; height:540px; overflow:hidden; }

#c1 .txt { padding-top:34px; padding-bottom:80px; position:relative; text-align:center; z-index:10; }


/* --------------------------------------------------------
#c2
-------------------------------------------------------- */
#c2 {
	padding-top:64px;
	background:#1c5be0 url(../_img/guard/c2_bg.png) center top repeat-x;
}
#c2 .chara {
	position:absolute;
	top:-86px; left:252px;
}
#c2 .c2_ttl { margin-bottom:25px; }
#c2 .wide {
	margin-left:-30px; margin-right:-30px; margin-bottom:20px;
	position:relative;
	width:960px;
}
#c2 .c2_head {
	position:relative;
	float:left;
	width:395px;
	text-align:center;
}
#c2 #video-box {
	padding-left:4px; padding-top:14px;
	position:relative;
	float:left;
	width:537px; height:329px;
	background:url(../_img/guard/c2_video_bg.png) center top no-repeat;
}
#c2 .talk .wide {
	position:relative;
	height:258px;
}
#c2 .talk_l {
	position:absolute;
	left:0; top:0;
	width:920px; height:258px;
}
#c2 .talk_l>img { margin-left:30px; }
#c2 .talk_l dt { position:absolute; bottom:0; left:0; }
#c2 .talk_l dd { position:absolute; top:0; left:228px; text-align:left; }
#c2 .talk_r {
	position:absolute;
	right:30px; top:0;
	width:920px; height:258px;
	text-align:right;
}
#c2 .talk_r>img { margin-top:9px; margin-right:14px; }
#c2 .talk_r dt { position:absolute; bottom:0; right:0; }
#c2 .talk_r dd { position:absolute; top:156px; right:213px; text-align:right; }

#c2 .pic { padding-top:5px; padding-bottom:45px; }
#c2 .pic .pic_l { margin-left:-1px; position:relative; float:left; }
#c2 .pic .pic_r { margin-right:-2px; position:relative; float:right; }

/* --------------------------------------------------------
#c3
-------------------------------------------------------- */
#c3 {
	background: #2372e8;
}
#c3 .c3_ttl { padding-top:40px; padding-bottom:13px; text-align:center; }
#c3 .lead { text-align:center; padding-bottom:17px; }

#c3 .side_chara {
	top:-33px;
}
#c3 .headimg {
	height: 360px;
	background: url(../_img/guard/c3_img01.jpg) 0 top repeat-x;
}
#c3 .c3_inner {
	padding-top:60px; padding-bottom:60px;
	background: #fffef6 url(../_img/guard/c3_bg.png) center top repeat-x;
}
#c3 .c3-1 {
	padding-bottom:34px;
}
#c3 .c3-1 .mission {
	padding-top:40px;
	width:431px;
	float:left;
	text-align:right;
}
#c3 #video-box2 {
	padding-left:4px; padding-top:14px;
	position:relative;
	width:437px; height:268px;
	float:right;
	background:url(../_img/guard/c3_video_bg.jpg) center top no-repeat;
}

#c3 .c3-2 {
	padding-bottom:19px;
}
#c3 .c3-2 .mission dt {
	width:431px;
	float:left;
	text-align:right;
}
#c3 .c3-2 .mission dd {
	padding-top:24px; padding-bottom:28px;
	text-align:center;
}
#c3 .c3-3 {
	margin-right:33px; padding-bottom:15px;
	float:left;
	position:relative;
}
#c3 .c3-3 .charaicon {
	position:absolute;
	right:-10px; top:119px;
}
#c3 .c3-4 {
	margin-right:33px; padding-bottom:15px;
	float:left;
	position:relative;
}
#c3 .c3-4 .charaicon {
	position:absolute;
	right:-9px; top:107px;
}
#c3 .c3-5 {
	padding-bottom:15px;
	float:left;
	position:relative;
}
#c3 .c3-5 .charaicon {
	position:absolute;
	right:-23px; top:105px;
}
#c3 .c3_last {  
	text-align:center;
	margin-bottom: 24px;
}

#c3 .c3-amiibo {
	width: 900px; height: 447px;
	background: url(../_img/guard/c3_amiibo.png) center top no-repeat;
	position: relative;
}
#c3 .c3-amiibo .inew {
	position: absolute; top: 2px; left: 1px;
}
#c3 .c3-amiibo .amiibologo {
	position: absolute; top: 25px; right: 18px;
}
#c3 .c3-amiibo .ttl {
	margin: 0 0 14px 22px; padding-top: 37px;
}
#c3 .c3-amiibo .text {
	margin: 0 0 10px 22px;
}
#c3 .c3-amiibo .pic1 {
	position: absolute; top: 140px; right: 26px;
}
#c3 .c3-amiibo .pic2 {
	margin: 0 0 0 22px;
}



/* --------------------------------------------------------
#c4
-------------------------------------------------------- */
#c4 {
	padding-bottom:27px;
	background:#2372e8 url(../_img/guard/c4_bg.png) center top no-repeat;
}
#c4 .c4_ttl { padding-top:30px; padding-bottom:16px; text-align:center; }
#c4 .lead { margin-bottom:40px; text-align:center; }

#c4 .side_chara {
	top:-47px;
}
#c4 .c4-1_ttl, #c4 .c4-2_ttl { margin-bottom:22px; text-align:center; }

#c4 .robo_list li {
	margin-bottom:38px;
	float:left;
	width:417px; height:126px;
	background:url(../_img/guard/c4_li_bg.png) center top no-repeat;
	text-align:center;
}
#c4 .robo_list li.even {
	margin-left:66px;
}
#c4 .robo_list img {
	margin-top:-40px; margin-bottom:-40px;
	position:relative;
}
#c4 .c4_last { margin-top: 10px; margin-bottom: 20px; position:relative; text-align: center; }

/* --------------------------------------------------------
#c5
-------------------------------------------------------- */
#c5 {
	height:763px;
	background:url(../_img/guard/c5_bg.jpg) center 0 no-repeat;
	text-align:center;
}
@media screen and (min-width: 1600px) {
	#c5 { background-size:120% auto; }
}
#c5 .c5_ttl { margin-bottom:-36px; position:relative; padding-top:98px; z-index:10; }

/* --------------------------------------------------------
#c6
-------------------------------------------------------- */
#c6 {
	background: #2372e8 url(../_img/guard/c6_bg.png) center top no-repeat;
}
#c6 .inew { position: absolute; top: 0; left: 0; }

#c6 .c6_ttl { padding-top:15px; padding-bottom:13px; text-align:center; }
#c6 .lead { text-align:center; padding-bottom:38px; }

#c6 .c6_inner {
	padding-top:50px; padding-bottom:60px;
	background: #fffef6 url(../_img/guard/c3_bg.png) center top repeat-x;
}
#c6 .c6_inner .picList { letter-spacing: -.45em; font-size: 12px; vertical-align: top; text-align: center; }
#c6 .c6_inner .picList li { letter-spacing: normal; vertical-align: top; display: inline-block; }

#c6 .c6_inner .create { text-align: center; margin-bottom: 45px; }
#c6 .c6_inner .create .picList { padding-top: 30px;}
#c6 .c6_inner .create .picList li:nth-child(1) { width: 402px; }
#c6 .c6_inner .create .picList li:nth-child(2) { width: 78px; }
#c6 .c6_inner .create .picList li:nth-child(3) { width: 368px; }

#c6 .c6_inner .play { text-align: center; }
#c6 .c6_inner .play .picList { padding-top: 12px;}
#c6 .c6_inner .play .picList li:nth-child(1) { width: 358px; }
#c6 .c6_inner .play .picList li:nth-child(2) { width: 388px; margin-left: 89px; }


/* --------------------------------------------------------
#spec
-------------------------------------------------------- */
#spec-wrap { margin-top:-3px; padding-top:3px; position:relative; background:#fffef6 url(../_img/guard/spec_bg.png); }
#spec { position:relative; background:url(../_img/guard/spec_inner_bg.png) center top; }
#spec:before {
	margin-left:-54px; position:absolute; top:-4px; left:50%;
	content:url(../_img/guard/spec_bgparts.png);
}
#spec .layout {
	padding:12px 20px;
}
#spec .type li {
	position:relative;
}
#spec .type_double {
	float:left;
}
#spec .spec-box .btnset li { position:absolute; }
#spec .spec-box .btnset .amiibo {
	top:84px;
	left:94px;
}
#spec .spec-box .btnset .cero {
	top:122px;
	left:94px;
}
#spec .type_double .btn-more {
	position:absolute;
	left:139px;
	top:136px;
}

#spec .type_single {
	float:right;
}
#spec .type_single .btn-more {
	position:absolute;
	left:81px;
	top:134px;
}


/* #spec #sns-box
-------------------------------------------------------- */
#spec #sns-box { width: 80px; position: absolute; top: 14px; right: 30px; letter-spacing: -.45em; font-size: 0; text-align: right;}
#spec #sns-box li { display: inline-block; text-align: left; margin-left: 10px; letter-spacing: normal; }
#spec #sns-box li a { margin: 0px; }




/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forDP
---------------------------------------------------------------------------------------------------------------- */
.forDP #cboxClose { top: 0px; right: 10px;}

/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forMV
---------------------------------------------------------------------------------------------------------------- */
.forMV #cboxClose { top: 0px; right: 5px;}