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

.sp {display: none;}
@media (max-width: 768px)  {
.sp {display: block;}}
.pc {display: block;}
@media (max-width: 768px)  {
.pc {display: none;}}

.center {text-align: center;}

.mt32 {margin-top: 32px;}
.mb16 {margin-bottom: 16px !important;}

h3 {font-weight: bold;
margin: 8px 0;}

.btn a {
display: block;
background-color: #006904;
color: #FFF;
text-align: center;
border-radius: 4px;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 32px auto;
box-sizing: border-box;
max-width: 300px;
}
@media (max-width: 768px)  {
.btn a {max-width: 100%;}}

.flex {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}

.flex div, .flex section {width: calc(50% - 16px);
margin-bottom: 16px;}
@media (max-width: 768px)  {
.flex div, .flex section {width: 100%;}}

article {
-webkit-display: flex;
width: 1024px;
margin: 0 auto;
background: #FFF;
padding: 32px 0;
}

@media (max-width: 768px)  {
article {
padding: 16px;
width: 100%;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

.content {
width: 1024px;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 16px;
}
@media (max-width: 768px)  {
.content {
width: 100%;
padding: 0 16px;
}}

#main_img {
width: 100%;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}

#main_img::before {
content:"";
display: block;
padding-top: 33.75%;
}

#main_img h1 {
width: 100%;
margin: 8px auto;
border-bottom: none;
padding: 0;
font-weight: normal;
}

#main_img div {
width: 100%;
background: rgba(255,255,255,0.8);
padding: 8px;
-webkit-box-shadow: 0px 1px 4px 0px #CCC;
box-shadow: 0px 1px 4px 0px #CCC;
text-align: center;
}

#main_img div img {max-width: 300px;}

h1 {
font-weight: bold;
margin-top: 0;
margin-right: auto;
margin-left: auto;
margin-bottom: 16px;
font-size: 1.5rem;
text-align: center;
border-bottom: #CCC solid 1px;
padding-bottom: 8px;
max-width: 400px;
width: 100%;
padding-top: 32px;
}
@media (max-width: 768px)  {
h1 {width: 100%;
}}

h2 {
font-size: 1.2rem;
padding: 8px 0 4px 0;
font-weight: bold;
display: block;
}

#enquete {
background-color: #AA1F00;
width: 50%;
margin: 0 auto 32px auto;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
@media (max-width: 768px)  {
#enquete {
width: 90%;
margin: 16px auto 32px auto;
padding-top: 0;
}}

#enquete h1 {
color: #FFF;
margin: 0;
padding: 8px;
width: 100%;
}

#enquete a {
color: #FFF;
padding: 8px 0;
display: block;
text-align: left;
text-decoration: underline;
}

#astros_logo {
margin: 0 auto;
max-width: 250px !important;
direction: inherit;
display: block;
}

#astros #enquete {width: 100% !important;}

header {
-webkit-align-items: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: #CCC solid 1px;
border-top: #AA1F00 solid 2px;
font-size: 12px;
background: #3E2F46;
}

#astros_header {font-size: 16px !important;}

#header_content {
width: 1024px;
margin: 0 auto;
display: flex;
-webkit-display: flex;
align-items: center;
padding: 8px 0;
}
@media (max-width: 768px)  {
#header_content {
padding: 0;
width: 100%;
}}

#logo img {
height: 40px;
width: auto;
}

#logo {position: static;
margin-right: 16px;}
@media (max-width: 768px)  {
#logo {
position: absolute;
z-index: 999999;
top: 12px;
height: auto;
left: calc(50% - 50px);
margin-right: 0;
padding: 0;
}}

.t_logo {
margin-left: 16px;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
}
@media (max-width: 768px)  {
.t_logo {
margin-left: 0;
left: calc(50% - 20px) !important;}}

.t_logo img {margin-right: 16px;}

header nav {margin-left: 16px;}

header nav ul {display: flex;
-webkit-display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}
@media (max-width: 768px)  {
header nav ul {display: block;}}

header nav ul li {padding: 0 8px;
font-size: 14px;
}

header a {color: #FFF;}

#now {border-bottom: #DF320A solid 3px;}

#overviwe {width:640px;
margin: 0 auto;
display:flex;
-webkit-display:flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
@media (max-width: 768px)  {
#overviwe {width: 100%;}}

#overviwe dt {
width: 7rem;
margin-bottom: 4px;
background: #EEE;
padding: 0 8px 0 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#overviwe dd {
width: calc(100% - 7rem);
margin-bottom: 4px;
padding-left: 8px;
background: #FFF;
}

#overviwe dd a {text-decoration: underline;}

#overviwe dd ol li {
text-indent: -14px;
margin-left: 30px;
margin-bottom: 8px;
list-style-position: inside;
counter-increment: cnt;
line-height: 1.2rem;
}

#overviwe dd ol li:before{
display: inline-block;
content: "(" counter(cnt) ") ";
width: 10px;
text-align: center;
margin-right: 4px;
}

#overviwe dd ol {margin: 16px 0;}

#overviwe dd ul li {
text-indent: -8px;
margin-left: 8px;
margin-bottom: 8px;
list-style-position: inside;
line-height: 1.2rem;
}

iframe {width: 100%;}

#astros iframe {max-width:350px;
margin: 0 auto;
display: block;}

#link {width:640px;
margin: 0 auto;}
@media (max-width: 768px)  {
#link {width: 100%;}}

#link li {
margin-bottom: 16px;
border-bottom: #CCC solid 1px;
padding-bottom: 16px;
padding-left: 8px;
}

#copyright {display: block;
text-align: center;
font-size: 12px;
padding: 8px;
background:#AA1F00;
color: #FFF;}

#please_btn {
text-align: center;
margin: 32px auto;
}

.activity h2 {
display: block;
margin-bottom: 16px;
}

.activity h3 {display: block;
margin: 16px 0;
font-weight: bold;}

.activity li {
text-indent: -14px;
margin-left: 14px;
margin-bottom: 16px;
}

.activity strong {font-weight: bold;
display: block;
margin-bottom: 8px;}

.activity section {margin-bottom: 16px;}

.astros_main img {width: 15% !important;
margin: 16px 0 0 0;}
@media (max-width: 768px)  {
.astros_main img {width: 50% !important;}}

.astros_main h1 {font-weight: bold !important;
font-size: 40px !important;}

.harf_column {display: flex;
-webkit-display: flex;
}
@media (max-width: 768px)  {
.harf_column {display: block;}}

.harf_column .lef_column {
padding: 0 16px;
width: 60%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.harf_column .right_column {
padding: 16px;
width: 40%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

@media (max-width: 768px)  {
.harf_column .lef_column, .harf_column .right_column {width: 100%;
padding: 0 16px;}}

.single_img {text-align: center;}

.single_img img {max-width: 350px;
margin: 16px auto;}
@media (max-width: 768px)  {
.single_img img {max-width: 100%;}}


/**  QandA  **/
#qa {margin: 16px 0;}

#qa dt {display: flex;
-webkit-display: flex;
}

#qa dd {margin: 8px 0 32px 0;
display: flex;
-webkit-display: flex;
}

#qa dd span:last-child {width: calc(100% - 38px);
margin-top: 4px;
}
#qa dt span:last-child {width: calc(100% - 38px);
margin-top: 4px;}

.question {background: #E04E50;
color: #FFF;
margin-right: 8px;
font-weight: bold;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height:30px;
}
.answer {
background: #4298FF;
color: #FFF;
margin-right: 8px;
font-weight: bold;
width: 30px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
}

/**  Link  **/
#link_list li a {display: block;
padding: 16px 0;
border-bottom: #CCC solid 1px;}

/**  Sponsor  **/
.sponsor_list {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
margin-top: 16px;
}

.sponsor_list div {width: calc(50% - 2px);
font-size: 24px;}
@media (max-width: 768px)  {
.sponsor_list div {width: 100%;}}

.sponsor_list dt {text-align: center;
background: #CCC;
font-weight: bold;}

.sponsor_list dd {text-align: center;
padding: 8px 0;
background: #FFF;
}

.sponsor_list .dott_list {font-size:16px;
text-align: left;}

.dott_list, .attention, .text_list {margin: 16px 0;}

.dott_list li {
text-indent: -21px;
list-style: disc;
list-style-position: inside;
margin-left: 21px;
margin-bottom: 4px;
}

.text_list li {
text-indent: -18px;
list-style-position: inside;
margin-left: 18px;
margin-bottom: 4px;
}

.attention li {
text-indent: -16px;
list-style-position: inside;
margin-left: 16px;
margin-bottom: 4px;
list-style: none;
}

.number_list li {text-indent: -18px;
list-style-position: inside;
margin-left: 18px;
margin-bottom: 4px;}

.bana_btn img {
/* [disabled]max-width: 400px; */
margin: 0 auto;
width: 100%;
}

#join_team {max-width: 320px;}
@media (max-width: 768px)  {
#join_team {max-width:none;
width: 70%;}}

.staff {margin-bottom: 16px;}

.staff h2 {font-size: 18px;}

.staff h2 span {color:#AA1F00;
margin-right: 8px;}

.staff dt {padding: 8px !important;
font-weight: bold;}

.staff ul {display: flex;
-webkit-display: flex;
}
@media (max-width: 768px)  {
.staff ul {display: block;}}

.staff ul li::after {content: '-';
display: inline-block;
margin: 0 4px !important;
text-indent: 0 !important;}
@media (max-width: 768px)  {
.staff ul li::after {content: '';}}

.text_box {
background: #FFF;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 768px)  {
.text_box {padding: 0;}}

.staff_info h3 {background: #eee;
margin: 8px 0;
padding: 4px 8px !important;}

.staff_info {max-width: 640px;
margin: 0 auto;}
@media (max-width: 768px)  {
.staff_info {max-width: 100%;}}

#index_list  {padding: 0 16px;}
@media (max-width: 768px)  {
#index_list {padding: 0;}}

#index_list li {border-bottom: #CCC solid 1px;
margin-bottom: 16px;
padding:0 16px 16px 16px;
}

.staff_box {
margin: 16px 0;
background: #FFF;
border-bottom: none;
}
@media (max-width: 768px)  {
.staff_box {border-bottom: #EEE solid 1px;}}

.staff_box img {max-width: 100px;}


.staff_row .staff_box img {max-width: 300px;}
@media (max-width: 768px)  {
.staff_row .staff_box img {max-width: 100%;}}

.staff_box h1 {
border-bottom: none;
max-width: 100%;
padding: 0;
margin: 0;
font-size: 18px;
text-align: left;
display: block;
}

.staff_box>div {
width: 100%;
display: flex;
-webkit-display: flex;
margin-bottom: 16px;
}

.staff_box>div>div {
display: flex;
-webkit-display: flex;
}

.name {width: calc(100% - 50px);}

.staff_box>div span {
background: #AA1F00;
width: 50px;
height: 50px;
display: inline-block;
color: #FFF;
text-align: center;
line-height: 50px;
margin-right: 8px;
font-weight: bold;
}

.no_pohto dl, .no_pohto dt {width: 100% !important;
margin-left: 0;}

.staff_box dl {width: calc(100% - 108px);
margin-left: 8px}
@media (max-width: 768px)  {
.staff_box dl {width: 100%;
margin-left: 0;
margin-top: 16px;}}

.staff_box dt {
background: #EEE;
padding-left: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.staff_box dd {padding:8px;}

.staff_box h2 {
    font-size: 14px;
    line-height: 1rem;
}

.staff_box ul {width: 100%;}

.staff_box li {border-bottom: #EEE solid 1px;
padding: 4px 0;}

#staff_wrap {
    display: flex;
    -webkit-display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 800px;
    margin: 0 auto;
}
@media (max-width: 768px)  {
#staff_wrap {display: block;
width: 100%;}}

#staff_wrap section {width: 100%;}
@media (max-width: 768px)  {
#staff_wrap section {width: 100%;}}

.staff_row section {width: 100% !important;}

.staff_row .staff_box {
width: 600px !important;
margin: 0 auto;
border-bottom: none;}
@media (max-width: 768px)  {
.staff_row .staff_box {
width: 100% !important;}}

#staff_wrap a {
color: #4D4D4D;
width: 30%;
position: relative;
}

.gallery {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
}

.gallery div {width:23%;
margin:0 0 16px 0;}
@media (max-width: 768px)  {
.gallery div {
width: 43%;
}}

#news_twitter {
display: flex;
-webkit-display: flex;
height: 450px;
}
@media (max-width: 768px)  {
#news_twitter {height: auto;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;}}

#news_twitter div {width: calc(100% - 300px);}
@media (max-width: 768px)  {
#news_twitter div {width: 100%;}}

#news_twitter iframe {width: 300px;}
@media (max-width: 768px)  {
#news_twitter iframe {width: 100%;}}

.news_list {margin-bottom: 16px;
margin-right: 16px;
}
@media (max-width: 768px)  {
.news_list {margin-right: 0;}}

.news_list li {
margin-bottom: 8px;
border-bottom: solid 1px #CCC;
padding-bottom: 8px;
word-break: break-all;
}

.news_list li time {display: block;
color: #CCC;
font-size: 12px;
}

#bana {
padding:16px 0;
background: #EEE;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#bana a {
background: #AA1F00;
color: #FFF;
text-align: center;
padding: 16px;
display: inline-block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#bana a::after {content: '';
display: block;
border-bottom: #FFF solid 1px;
margin: 8px 0 0 0;}

#bana li {width: 300px;}
@media (max-width: 768px)  {
#bana li {width: 95%;
margin: 0 auto 16px auto;}}

#bana li:last-child {margin-bottom:0; }

#bana ul, .team_bana ul, .sponser ul {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-around;
padding: 16px 0;
-webkit-justify-content: space-around;
}

.team_bana li, .sponser li {
	margin-bottom: 16px;
	max-width: 420px;
}
.team_bana li:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px)  {
.team_bana li, .sponser li {margin-bottom: 16px;}}

.team_bana img {max-width: 100%;}

footer {background: #3E2F46;}

footer .content {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
}
@media (max-width: 768px)  {
footer .content {
display: block;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

#footer_logo {
margin-top: 32px;
margin-right: 32px;
margin-bottom: 32px;
}
@media (max-width: 768px)  {
#footer_logo {
margin-top: 0;
margin-right: 0;
}}

#footer_logo a {
width: 150px;
margin: 0 auto;
text-align: center;
display: block;
}

footer a {color: #FFF;}

footer nav {
display: flex;
-webkit-display: flex;
width: 100%;
}
@media (max-width: 768px)  {
footer nav {display:block;}}

footer nav ul:first-child, footer nav ul:first-child+ul {margin-right:32px;}
@media (max-width: 768px)  {
footer nav ul:first-child, footer nav ul:first-child+ul {margin-right:0;}}

header h1 {
color: #FFF;
border: none;
padding: 0;
line-height: 1.2rem;
}
@media (max-width: 768px)  {
header h1, header span {display: none !important;}}

header span {
margin-top: 8px;
display: block;
}

.score {text-align: center;
margin: 16px auto;}

.score th {
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
}

.score td {width: 1.2rem;}

.table_header {background: #3E2F46;
color: #FFF;}

.home {background: #EEE;}

.battery {margin: 0 auto 16px auto;}

.battery dt, .game_dev dt {
background: #EEE;
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.battery dd, .game_dev dd {
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-left: #EEE solid 1px;
border-right: #EEE solid 1px;
border-bottom: #EEE solid 1px;
}

.scoreboard p {margin: 16px 0;}

.next_game {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.next_game dt {
width: 7rem;
margin-bottom: 2px;
background: #EEE;
padding: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.next_game dd {
width: calc(100% - 7rem);
padding: 4px;
margin-bottom: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#news h1 {border: none;
word-break: break-all;
text-align: left;
line-height: 1.8rem;
padding: 8px 0;}

@media (max-width: 768px)  {
#player {display: block;}}

hr {height: 1px;
margin: 0 0 16px 0;;
padding: 0;
width: 100%;
border-top: #EEE solid 1px;
border-bottom: 0;
border-right: 0;
border-left: 0;}
@media (max-width: 768px)  {
hr {display: none;}}

#calender_wrap {
width: 900px;
height: 700px;
margin: 0 auto;
position: relative;
}
@media (max-width: 768px)  {
#calender_wrap {
width: 100%;
height: auto;
}}

#sns {
display: flex;
-webkit-display: flex;
margin-top: 16px;
margin-left: auto;
}

#sns div {
width: 40px;
margin-right: 16px;
}

.flex_dl {display: flex;
-webkit-display: flex;
margin-top: 16px;
}

.flex_dl dt {padding-right: 8px;}

address {margin-top: 16px;}

form {
	width: 600px;
	margin: 0 auto;
}
@media (max-width: 768px)  {
form {width:100%;}}

.sponser small {text-align: right;
display: block;}

input, textarea {
    width: 100%;
    border-radius: 8px;
    background: #EEE;
    border: #CCC solid 1px;
    padding: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 16px;
    line-height: 2rem;
    display: inline-block;
}

input[type="submit"] {-webkit-appearance: none;}

button {
background: #AA1F00;
border-radius: 8px;
text-align: center;
color: #FFF;
width: 350px;
margin: 32px auto;
border: none;
display: block;
line-height: 3rem;
font-size: 24px;
font-weight: bold;
letter-spacing: 8px;
}
@media (max-width: 768px)  {
button {width: 90%;}}

#hidden_iframe {display: none;}

input[type="checkbox"], input[type="radio"] {
	display: inline !important;
	transform: scale(2.0);
	width: 20px;
	margin-right: 8px;
}

.checkbox label {display: block;
margin-top: 8px;}

select {
	display: block;
	width: 100%;
	padding: 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 3rem;
}

input[type="file"] {background: none;
border: none;}

.nolink_staff {width: 30% !important;}

/* Add:20200709
---------------------------------------------------- */
section#official_shop {
    display: flex;
    justify-content: center;
    padding: 32px;
    background: #eee;
}
section#official_shop img {
    display: block;
    width: 100%;
    max-width: 550px;
}
section.content.banner {
    display: flex;
    flex-flow: row wrap;
    padding: 40px 16px 0;
}
section.content.banner + section.content.banner {
    padding-top: 48px;
}
section.content.banner a {
    width: 302px;
    margin: 0 14px;
}
section.content.banner a[href]:hover {
    opacity: .8;
}
@media(max-width:768px){
    section#official_shop {
        width: 100vw;
        margin: 0 -16px;
    }
    section.content.banner {
        justify-content: center;
        padding: 32px 0 0;
    }
    section.content.banner + section.content.banner {
        padding-top: 32px;
    }
}

/* Add:20200801
---------------------------------------------------- */
#share_btn {
    display: flex;
    justify-content: flex-end;
    max-width: 1024px;
    margin: auto;
    padding: 16px;
}

/*Add:20230119
---------------------------------------------------- */
.promises{
    text-align: center;
    font-family:"HG行書体", monospace;
    font-size: medium;
}

.promise{
    text-align: left;
    padding: 10px 30%;
}
.img_slogan{
    text-align: center;
    padding:10px 25%;
}

li.promise-content{
    font-size: smaller;
    text-align: left;
}