@charset "utf-8";
/* CSS Document */

/* key_v */
#astrocitymini-container #key_v {
	width: 100%;
	position: relative;
	background: url("../img/kay_v_bg.jpg") no-repeat center top;
	height: auto;
}
#astrocitymini-container #key_v #key_v_bg {
	position: absolute;
	top: 0;
	width: 100%;
	height: 683px;
	background-image: url("../img/kay_v_bottom_bg.png"), url("../img/kay_v_middle_bg.png");
	background-repeat: no-repeat, repeat-y;
	background-position: bottom right, top right;
}

#astrocitymini-container #key_v #logo {
	width: 500px;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 200;
}
#astrocitymini-container #key_v #gosega_logo {
	position: absolute;
	width: 100px;
	top: 20px;
	right: 20px;
	transition: .3s;
	transform: scale(1, 1);
	z-index: 300;
}
#astrocitymini-container #key_v #gosega_logo:hover {
	transform: scale(1.1, 1.1);
}
#astrocitymini-container #key_v #catch {
	position: absolute;
	width: 350px;
	bottom: 340px;
	left: 50px;
	z-index: 300;
}
#astrocitymini-container #key_v #sale {
	position: absolute;
	width: 320px;
	bottom: 210px;
	left: 50px;
    z-index: 300;
}
#astrocitymini-container #key_v #news {
	position: absolute;
	width: 316px;
	bottom: 210px;
	right: 0px;
    z-index: 300;
}
#astrocitymini-container #key_v #logo img,
#astrocitymini-container #key_v #sega_logo img,
#astrocitymini-container #key_v #gosega_logo img,
#astrocitymini-container #key_v #catch img,
#astrocitymini-container #key_v #sale img,
#astrocitymini-container #key_v #news img {
	width: 100%;
	height: auto;
}
#astrocitymini-container #key_v #astro {
	width: 371px;
	height: 599px;
	background: url("../img/astro_body_center.png") no-repeat;
	background-size: 100%;
	overflow: hidden;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 200;
}

#astrocitymini-container #support_menu {
	width: 100%;
	margin-bottom: 30px;
	xbackground: #F0F0F0;
}
#astrocitymini-container #support_menu ul {
	width: 100%;
display: flex;
display: inline-flex;
justify-content: center;
	box-sizing: border-box;
}
#astrocitymini-container #support_menu ul li {
	border-left: 2px solid #F0F0F0;
	box-sizing: border-box;
	background: #FFF;
	overflow: hidden;
}
#astrocitymini-container #support_menu ul li:last-child {
	border-right: 2px solid #F0F0F0;
}
#astrocitymini-container #support_menu ul li a {
	display: block;
	padding: 5px 30px;
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: solid 4px #fff;
	box-sizing: border-box;
}
#astrocitymini-container #support_menu ul li a:hover {
	border-bottom: solid 4px #000;
}

#astrocitymini-container #support_menu ul li a span {
	font-size: 130%;
}
#astrocitymini-container .movie_box {
	width: 60%;
	margin-top: 54%;
	margin-left: auto;
	margin-right: auto;
}
#astrocitymini-container .youtube-area {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#astrocitymini-container .youtube-area iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#astrocitymini-container .youtube-area .movie_cover {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  background: url("../img/movie_cover_bg.png") repeat top center;
}

#astrocitymini-container #key_v #top_button {
	position: absolute;
	bottom: 100px;
	left: 50%;
	margin-left: -450px;
	z-index: 300;
}
#astrocitymini-container #key_v #produce {
	position: absolute;
	bottom: 44px;
	right: 50px;
	color: #6e6e6e;
	z-index: 300;
}
#astrocitymini-container #key_v #produce span {
	display: block;
	float: left;
	height: 65px;
	font-family: 'MuseoModerno', cursive;
	font-size: 26px;
	line-height: 65px;
	margin-right: 20px;
}
#astrocitymini-container #key_v #produce img {
	width: auto;
	height: 65px;
}

#astrocitymini-container #key_v #menu_right {
	position: absolute;
	right: 0;
	bottom: 180px;
	width: 390px;
	overflow: hidden;
}
#astrocitymini-container #key_v #menu_right h4 {
	font-family: 'MuseoModerno', cursive;
	font-size: 70px;
	color: #000;
    -webkit-text-stroke: 3px #95dc00;
    text-stroke: 3px #95dc00;
	xtext-shadow: 2px 2px 0 #95dc00, -2px 2px 0 #95dc00, 2px -2px 0 #95dc00, -2px -2px 0 #95dc00;
	margin-left: 40px;
}
#astrocitymini-container #key_v #menu_right ul {
	overflow: hidden;
}
#astrocitymini-container #key_v #menu_right ul li {
	background: url("../img/menu_bg.png") left top;
	height: 49px;
	line-height: 42px;
	padding-left: 60px;
	margin-bottom: 5px;
	color: #FFF;
}
#astrocitymini-container #key_v #menu_right ul li.no_link {
	background: url("../img/menu_gray_bg.png") left top;
	margin-left: 40px;
}
#astrocitymini-container #key_v #menu_right ul a {
	display: block;
}
#astrocitymini-container #key_v #menu_right ul a li {
	display: block;
	color: #FFF;
	transition: .3s;
	transform: translate(40px,0px);
}
#astrocitymini-container #key_v #menu_right ul a:hover li {
	transform: translate(0px,0px);
}

/* intro */
#astrocitymini-container #intro {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url("../img/intro_top_bg.png"), url("../img/intro_bottom_bg.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top right 0, bottom left 0;
}
#astrocitymini-container #intro_box {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: url("../img/astro_body_intro.png") top right no-repeat;
	position: relative;
}
#astrocitymini-container #intro_box .bg_01 {
	width: 1134px;
	height: 1174px;
	position: absolute;
	top: -100px;
	left: -200px;
	z-index: -10;
}
#astrocitymini-container .intro_txt1 {
	width: 650px;
	margin-bottom: 70px;
}
#astrocitymini-container .intro_txt2 {
	width: 500px;
	margin-left: 100px;
	margin-bottom: 70px;
	text-align: center;
}
#astrocitymini-container .intro_txt2 img {
	border: 3px solid #5ec411;
	margin-bottom: 20px;
}
#astrocitymini-container .intro_txt2 p {
	text-align: left;
}

#astrocitymini-container .intro_movie {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
	overflow: hidden;
}
#astrocitymini-container .intro_movie .intro_movie_box {
  position: relative;
  float: right;
  margin-left: 30px;
  width: 100%;
  padding-top: 56.25%;
}
#astrocitymini-container .intro_movie .intro_movie_box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#astrocitymini-container .intro_movie2 {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
	overflow: hidden;
	z-index: 300;
}
#astrocitymini-container .intro_movie2 .left {
  position: relative;
  width: 490px;
  float: left;
	z-index: 300;
}
#astrocitymini-container .intro_movie2 .right {
  position: relative;
  width: 490px;
  float: right;
	z-index: 300;
}

#astrocitymini-container .intro_movie2 .left .intro_movie_box,
#astrocitymini-container .intro_movie2 .right .intro_movie_box {
  position: relative;
  float: right;
  margin-left: 30px;
  width: 100%;
  padding-top: 56.25%;
	z-index: 300;
}
#astrocitymini-container .intro_movie2 .left .intro_movie_box iframe,
#astrocitymini-container .intro_movie2 .right .intro_movie_box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#astrocitymini-container .intro_txt3 {
	margin-bottom: 60px;
    text-shadow: 
    #FFF 2px 0px,  #FFF -2px 0px,
    #FFF 0px -2px, #FFF 0px 2px,
    #FFF 2px 2px , #FFF -2px 2px,
    #FFF 2px -2px, #FFF -2px -2px,
    #FFF 1px 2px,  #FFF -1px 2px,
    #FFF 1px -2px, #FFF -1px -2px,
    #FFF 2px 1px,  #FFF -2px 1px,
    #FFF 2px -1px, #FFF -2px -1px;
}

/* title_list */
#astrocitymini-container #title_list {
	width: 100%;
	xbackground: linear-gradient(to right, #06ad80, #35a8bd);
	background: #5ec411;
	padding-top: 20px;
	padding-bottom: 20px;
}
#astrocitymini-container .title_list_before {
	display: block;
	background: url("../img/title_top_bg.png") no-repeat top center;
	width: 100%;
	height: 53px;
	position: relative;
	z-index: -30;
}
#astrocitymini-container .title_list_after {
	display: block;
	background: url("../img/title_bottom_bg.png") no-repeat top center;
	width: 100%;
	height: 54px;
	position: relative;
	z-index: -30;
}
#astrocitymini-container #title_list_box {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 100;
}
#astrocitymini-container #title_list_box .bg_02 {
	width: 161px;
	height: 1173px;
	position: absolute;
	top: -700px;
	right: -150px;
}
#astrocitymini-container #title_list_box .bg_03 {
	width: 161px;
	height: 1173px;
	position: absolute;
	top: 600px;
	left: -150px;
}
#astrocitymini-container #title_list_box ul {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
#astrocitymini-container #title_list_box ul li {
	float: left;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 40px;
	display: block;
	position: relative;
	padding-bottom: 20px;
	border-bottom: 4px solid #FFF;
}
#astrocitymini-container #title_list_box ul li:nth-child(3n) {
	margin-right: 0%;
}

#astrocitymini-container #title_list_box ul li img {
	width: 100%;
	height: auto;
}
#astrocitymini-container #title_list_box ul li h4 {
	text-align: center;
	font-weight: bolder;
	color: #FFF;
	font-size: 22px;
	margin-bottom: 10px;
}

#astrocitymini-container #title_list_box ul li.comingsoon {
	text-align: center;
	overflow: hidden;
	width: 100%;
	padding-bottom: 0px;
	border-bottom: none;
}
#astrocitymini-container #title_list_box ul li.comingsoon span {
	font-family: 'MuseoModerno', cursive;
	color: #fff;
	font-size: 36px;
	display: block;
animation: comingsoon_flash 2s infinite;
}
@keyframes comingsoon_flash {
0% { transform: scale(1, 1); }
50% { transform: scale(1.3, 1.3); }
100% { transform: scale(1, 1); }
}

#astrocitymini-container #title_list_box li img {
	transform: scale(1, 1);
	z-index: 1000;
}




/* product */
#astrocitymini-container #product {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}
#astrocitymini-container #product_box {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#astrocitymini-container .spec_box {
	overflow: hidden;
}
#astrocitymini-container .spec_img,
#astrocitymini-container .spec_img_2 {
	float: left;
	width: 30%;
}
#astrocitymini-container .spec_img img,
#astrocitymini-container .spec_img_2 img {
	width: 100%;
	height: auto;
}
#astrocitymini-container .spec_details {
	float: right;
	width: 65%;
}
#astrocitymini-container .spec_d_box {
	padding: 20px 40px;
	border: 2px solid #6e6e6e;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
#astrocitymini-container .spec_d_box td {
	padding: 3px 10px;
	vertical-align: top;
}
#astrocitymini-container .spec_d_box td a {
	text-decoration: none;
	color: #ff00b0;
}
#astrocitymini-container .spec_d_box td a:hover {
	background: #FFC9ED;
}

/* more */
#astrocitymini-container #more {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}
#astrocitymini-container #more_box {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#astrocitymini-container #more_box .txt_img_box {
	overflow: hidden;
	width: 100%;
}
#astrocitymini-container #more_box .left_txt {
	float: left;
	width: 50%;
}
#astrocitymini-container #more_box .right_img {
	float: right;
	width: 45%;
}
#astrocitymini-container #more_box .right_img .right_img_set {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#astrocitymini-container #more_box .right_img .right_img_set li {
	width: 48%;
	text-align: center;
}
#astrocitymini-container #more_box .right_img .right_img_set li img {
	width: 100%;
	height: auto;
}
#astrocitymini-container .txt_img_box a {
	text-decoration: none;
	color: #ff00b0;
}
#astrocitymini-container .txt_img_box a:hover {
	background: #FFC9ED;
}

#astrocitymini-container #footer_copy {
	background: #ccc;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	z-index: 500;
	xtext-align: center;
}
#astrocitymini-container #footer_copy .copy {
	clear: both;
	text-align: center;
	font-size: 80%;
}

/*-----------------------------------------------------	*/
/*	for - 1024px以下の記述　*/
/*-----------------------------------------------------	*/

@media screen and (max-width:1024px) {
	
#astrocitymini-container #key_v #gosega_logo {
	width: 80px;
}
#astrocitymini-container #key_v #catch {
	width: 300px;
	left: 2%;
}
#astrocitymini-container #key_v #sale {
	width: 230px;
	left: 2%;
}
#astrocitymini-container #key_v #news {
	position: absolute;
	width: 280px;
}
#astrocitymini-container #key_v #top_button {
	bottom: 48px;
	left: 2%;
	margin-left: 0px;
}
#astrocitymini-container #key_v #produce {
	bottom: 48px;
	right: 2%;
}
#astrocitymini-container #key_v #menu_right {
	width: 250px;
}
#astrocitymini-container #key_v #menu_right h4 {
	font-size: 50px;
}
/* intro */
#astrocitymini-container #intro {
	background-image: url("../img/intro_top_bg.png"), url("../img/intro_bottom_bg.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top right -200px, bottom left -200px;
}
#astrocitymini-container #intro_box {
	width: 96%;
	background: url("../img/astro_body_intro_tb.png") top right no-repeat;
}
#astrocitymini-container .intro_txt1 {
	width: 60%;
}
#astrocitymini-container .intro_txt2 {
	margin-left: 50px;
}
#astrocitymini-container .intro_movie2 {
  width: 96%;
}
#astrocitymini-container .intro_movie2 .left {
  width: 48%;
}
#astrocitymini-container .intro_movie2 .right {
  width: 48%;
}
	
/* title_list */
#astrocitymini-container #title_list_box {
	width: 96%;
}
	
/* product */
#astrocitymini-container #product_box {
	width: 96%;
}
#astrocitymini-container .spec_box {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
}
	
/* more */
#astrocitymini-container #more_box {
	width: 96%;
}
	
}


/*-----------------------------------------------------	*/
/*	for - 767px以下の記述　*/
/*-----------------------------------------------------	*/

@media screen and (max-width:767px) {

#astrocitymini-container #key_v {
	padding-bottom: 20px;
	background: url("../img/kay_v_bg_sp.jpg") no-repeat center top;
	background-size: 100%; 
}
#astrocitymini-container #key_v #key_v_bg {
	height: 0px;
	background-image: url("../img/kay_v_bottom_bg.png"), url("../img/kay_v_middle_bg.png");
	background-repeat: no-repeat, repeat-y;
	background-position: bottom right, top right;
	padding-bottom: 120%;
}
#astrocitymini-container #key_v #logo {
	width: 75%;
	text-align: center;
	margin-top: 10%;
}
#astrocitymini-container #key_v #gosega_logo {
	width: 9%;
	top: 1%;
	right: 2%;
}
#astrocitymini-container #key_v #catch {
	position: relative;
	bottom: 0px;
	left: 0px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
#astrocitymini-container #key_v #sale {
	position: relative;
	bottom: 0px;
	left: 0px;
	width: 66%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
#astrocitymini-container #key_v #news {
	position: absolute;
	width: 45%;
	bottom: 30%;
}
#astrocitymini-container #key_v #astro {
	width: 60%;
	margin-top: 0px;
	height: 0px;
	background: url("../img/astro_body_center_sp.png") no-repeat;
	background-size: 100%;
	padding-bottom: 100%;
}
#astrocitymini-container #key_v #top_button {
	position: static;
	text-align: center;
}
#astrocitymini-container #key_v #produce {
	position: static;
	width: 310px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	text-align: center;
}	

/* intro */
#astrocitymini-container #intro {
	background-image: url("../img/intro_top_bg_sp.png"), url("../img/intro_bottom_bg.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top right -200px, bottom left -160px;
}
#astrocitymini-container #intro_box .bg_01 {
	top: -300px;
}
#astrocitymini-container #intro_box {
	background: none;
}
#astrocitymini-container .intro_txt1 {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
#astrocitymini-container .intro_txt2 {
	width: 96%;
	margin-top: 0%;
	margin-left: auto;
    margin-right: auto;
}
#astrocitymini-container .intro_txt2 img {
	border: none;
	margin-bottom: 20px;
	width: 100%;
	height: auto;
}
#astrocitymini-container .intro_movie {
  width: 80%;
}

#astrocitymini-container .intro_movie2 {
  width: 80%;
}
#astrocitymini-container .intro_movie2 .left {
  width: 100%;
  float: none;
	padding-bottom: 20px;
	overflow: hidden;
}
#astrocitymini-container .intro_movie2 .right {
  width: 100%;
  float: none;
}
	
/* title_list */
#astrocitymini-container .title_list_before {
	background: url("../img/title_top_bg_sp.png") no-repeat left center;
}
#astrocitymini-container .title_list_after {
	background: url("../img/title_bottom_bg_sp.png") no-repeat right center;
}

#astrocitymini-container #title_list_box ul li {
	float: left;
	width: 49%;
	margin-right: 2%;
	margin-bottom: 40px;
}
#astrocitymini-container #title_list_box ul li:nth-child(3n) {
	margin-right: 2%;
}
#astrocitymini-container #title_list_box ul li:nth-child(2n) {
	margin-right: 0%;
}
#astrocitymini-container #title_list_box ul li h4 {
	font-size: 20px;
}	
	
/* product */
#astrocitymini-container .spec_box {
	width: 80%;
}
#astrocitymini-container .spec_img {
	float: none;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#astrocitymini-container .spec_img_2 {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#astrocitymini-container .spec_details {
	float: none;
	width: 100%;
}
#astrocitymini-container .spec_d_box {
	padding: 2% 2%;
}
#astrocitymini-container .spec_d_box td {
	padding: 1% 0%;
}

/* more */
#astrocitymini-container #more_box .txt_img_box {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
#astrocitymini-container #more_box .left_txt {
	float: none;
	width: 100%;
	margin-bottom: 20px;
}
#astrocitymini-container #more_box .right_img {
	float: none;
	width: 100%;
}
	
}