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

.pc{ display: block;}
.sp{ display: none;}

body{
font-family: source-han-sans-cjk-ja, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 1.8em;
letter-spacing: 1px;
color: #fff;
}

#wrap{
width: 100%;
height: 100%;
min-width: 1200px;
background-color: #1d334f; 
padding: 100px 0 0;
}


#contentAll{
background-color: #fff;
width: 100%;
padding: 0;
}

#topbtnLine{
background: url("../images/line_top.png") no-repeat left;
background-size: auto 17px;
width: 100%; height: 20px;
}

#btnTop{
width: 100%;
font-family: sui-generis, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 60px;
color: #fff;
text-align: center;
font-style: italic;
}

#btnTop a{
color: #BE0003;
text-decoration: none;
transition: all 0.3s ease;
}

#btnTop a:hover{
color: #FF0004;
}

#top,.linkLabel{
padding-top: 60px;
margin-top: -60px;
}

#introTitle{
background: url("../images/introduction/title.png") no-repeat center;
background-size: auto 100%;
width: 100%; height: 70px;
position: fixed;
top: 60px; left: 0;
z-index: 18;
text-indent: -99999px;
}


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

about

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

#aboutAll{
background: #000 url("../images/introduction/bg01.jpg") no-repeat center fixed;
background-size: cover;
width: 100%;
padding: 50px 0 60px; 
}

.aboutBox{
width: 1100px;
margin: 45px auto 0;
}

.aboutM{
width: 100%;
font-size: 26px;
line-height: 60px;
border-top: 2px solid #c2000f;
border-bottom: 2px solid #c2000f;
font-weight: 900;
color: #e60012;
}

.aboutTxtAll{
width: 100%; height: 400px;
margin: 15px 0 0 0;
text-align: justify;
overflow-y: scroll;
}

.aboutTxt{
width: 98%;
}

.aboutTxtAll2{
width: 100%;
margin: 15px 0 0 0;
text-align: justify;
}

.aboutTxt2{
width: 100%;
}


.aboutImg{
width: 38%;
margin: 5px 0 5px 15px;
pointer-events: none;
float: right;
}

.aboutImg2{
width: 45%;
margin: 5px 0 5px 15px;
pointer-events: none;
float: right;
}


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

mecha

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

#mechaAll{
background: url("../images/introduction/bg02.jpg") no-repeat center;
background-size: cover;
width: 100%;
padding: 0 0 40px ;
position: relative;
overflow: hidden;
}

#mechaM{
width: 1050px;
text-align: center;
padding: 50px 0 15px;
font-size: 26px;
font-weight: 900;
color: #fff;
letter-spacing: 0;
margin: 0 auto;
border-bottom: 1px solid #fff;
}

#mechaMe{
width: 100%;
text-align: center;
padding: 10px 0 40px;
font-family: sui-generis, sans-serif;
font-weight: 500;
font-size: 20px;
color: #fff;
}

#mechaMtxt{
width: 800px;
text-align: center;
padding: 10px 0 40px;
font-size: 14px;
color: #fff;
margin: 0 auto;
}


.swiper-container {
width: 100%; height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-button-next{
background: url("../images/introduction/mecha_btnnext.png") no-repeat center;
background-size: 70px auto;
width: 75px; height: 140px;
top: 50%; margin-top: -70px;
right: 50px;
transition: all .3s ease;
}

.swiper-button-prev{
background: url("../images/introduction/mecha_btnprev.png") no-repeat center;
background-size: 70px auto;
width: 75px; height: 140px;
top: 50%; margin-top: -70px;
left: 50px;
transition: all .3s ease;
}

.swiper-button-next:hover{ transform: translateX(5px); opacity: 0.7;}
.swiper-button-prev:hover{ transform: translateX(-5px); opacity: 0.7;}


#thum{ width: 820px; margin: 0 auto 10px;}

.swiper-slide img {
  max-width: 100%;
  width: 95%;
  cursor: pointer;
  transition: all .3s ease;
}

.swiper-slide img:hover{ opacity: 0.7;}

.thumbs-slider .swiper-slide-thumb-active img {
  /*border-bottom: 4px solid #BE0003;*/
  width: 95%;
}
.thumbs-slider .swiper-slide {
  opacity: 1;
}
.thumbs-slider .swiper-slide-thumb-active {
  opacity: 1;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}




.mechaMain{
width: 820px;
margin: 0 auto;
}

.mechaImg01{background: url("../images/introduction/mecha_img01.png") no-repeat center;}
.mechaImg02{background: url("../images/introduction/mecha_img02.png") no-repeat center;}
.mechaImg03{background: url("../images/introduction/mecha_img03.png") no-repeat center;}
.mechaImg04{background: url("../images/introduction/mecha_img04.png") no-repeat center;}
.mechaImg05{background: url("../images/introduction/mecha_img05.png") no-repeat center;}
.mechaImg06{background: url("../images/introduction/mecha_img06.png") no-repeat center;}

.mechaImg01,.mechaImg02,.mechaImg03,.mechaImg04,.mechaImg05,.mechaImg06{
background-size: cover;
width: 820px; height: 435px;
}

.mechaM{
width: 100%;
font-size: 26px;
line-height: 60px;
border-top: 2px solid #fff100;
border-bottom: 2px solid #fff100;
font-weight: 900;
color: #fff100;
text-align: center;
font-style: italic;
margin: 15px auto;
}

.mechaTxtAll{
width: 100%;
margin: 10px 0 0 0;
}

.mechaTxt{
width: 100%;
font-size: 15px;
line-height: 1.9em;
text-align: justify;
}


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

trivia

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

#triviaAll{
background: url("../images/billing_bg.png") no-repeat left 100px fixed;
background-size: 441px auto;
width: 100%;
padding: 0 0 60px;
}

#triviaM{
width: 1050px;
text-align: center;
padding: 50px 0 10px;
font-size: 26px;
font-weight: 900;
color: #b50000;
letter-spacing: 0;
margin: 0 auto;
border-bottom: 1px solid #b50000;
}

#triviaMe{
width: 100%;
text-align: center;
padding: 10px 0 40px;
font-family: sui-generis, sans-serif;
font-weight: 500;
font-size: 20px;
color: #b50000;
}

#triviaMain{
width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

.triviaBox{
width: 510px;
padding: 0 20px;
margin: 0 0 40px;
}

.triviaNM{
background: #132c4a; 
width: 510px; line-height: 42px;
text-indent: .5em;
font-size: 20px;
font-weight: 900;
color: #fff;
letter-spacing: 0;
position: relative;
}

.triviaNM:before {
height: 0;
display: block;
position: absolute;
right: -3px;
content: "";
border-top: solid 20px #fff;
border-left: solid 20px transparent;
top: -3px;
z-index: 2;
}

.triviaNM:after {
height: 0;
display: block;
position: absolute;
right: -2px;
content: "";
border-top: solid 20px transparent;
border-left: solid 20px transparent;
top: -2px;
}

.txtYellow{ color: #FFF200;}

.triviaTxt{
width: 100%;
padding: 10px 0;
color: #000;
text-align: justify;
}

#triviawarning{
width: 100%;
color: #000;
font-size: 11px;
text-align: center;
}