@charset "utf-8";
/* CSS Document */

#container .inner p {
    margin-bottom: 20px;
}
#container h2 { background-color: rgba(37, 37, 37, .22); font-size: 39px; color: #E503CF; padding: 1em; text-align: center; text-shadow: 0 0 20px #E503CF; border-bottom: 2px solid #E503CF; line-height: 1.4;}
#container .inner { text-align: center; padding: 45px 40px 0 40px;}
#container h3 { color: #FFF; font-size: 28px;text-shadow: 0 0 20px #fff; margin-bottom: 30px; line-height: 1.4;}
#container figure { margin-bottom: 30px;}
#container figure figcaption { color: #FFF;}
#container .inner p { margin-bottom: 20px; color: rgba( 255,255,255,.8);}
.grey { background-color: rgba(243, 243, 243, .18); padding: 50px; }
.black { background-color: #000; padding: 50px; text-align: center; }

table { color: #FFF; width: 680px; margin: -50px auto 0 auto; border: 1px solid rgba(255,255,255,.3); border-collapse: collapse; font-size: 80%;}
th { background-color: #292929; padding: 15px; border: 1px solid rgba(255,255,255,.3); width: 10em; text-align: left;}
td { background-color: #323232; padding: 15px; border: 1px solid rgba(255,255,255,.3);}


@media screen and (max-width: 736px) {
    #container {
    margin-left: 0px;
    margin-top: 60px;
}
   
img.pci {
    width: 60%!important;
}

    #container h2 {
    font-size: 26px;
    padding: 1em 20px;
    text-shadow: 0 0 20px #e503cf;
}
    #container h3 {
    font-size: 20px;
    margin-bottom: 30px;
}
  #container .inner {
    text-align: center;
    padding: 45px 20px 0 20px;
}
    #container h3 br { }
    
    table {
    width: calc( 100% - 40px );
}
   th {
    width: 8em;
}
    #container .inner p { text-align: left; }
    #container img { max-width: 100%;}
    .black {
    padding: 20px;
}
    

}

#miraikenTtl p { margin-bottom: 0;}
#miraikenTtl section h2 { text-align: left;text-shadow:none; border: none; background-color:transparent; padding: 0;}
#miraikenTtl section p { text-align: left;}

.image2 { margin-bottom: 20px;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: space-between;
}
.image2.image3 {align-items: center;}
.image2 li { width: 48%;}
.image2.image3 li:nth-child(1) { width: 30%;}
.image2.image3 li:nth-child(2) { width: 66%;}
.image2.image3.rev li:nth-child(1) { width: 60%;}
.image2.image3.rev li:nth-child(2) { width: 32%;}
.image2 li img { width: 100%; height: auto;}
.miraiken .inner { max-width: 800px; margin-left: auto; margin-right: auto; padding: 20px; box-sizing: border-box;}
.miraiken .inner p { text-align: left;}
.inner p a { color: #E503CF; text-decoration: none;}
.inner p a:hover { text-decoration: underline;}


.view img { width: 100%; height: auto;}

.slick-arrow { position: absolute; top:50%; width: 110px; height: 90px; background-position: center; appearance:none; -webkit-appearance:none; border: none; background: none; background-color: transparent; z-index: 2; text-indent: -9999px; transform: translateY(-50%);}
.slick-prev { left: 0; background-image: url("../img/left.png"); background-size: contain; background-repeat: no-repeat;}
.slick-next { right: 0; background-image: url("../img/right.png"); background-size: contain; background-repeat: no-repeat;}
@media screen and (max-width: 736px) {
.slick-arrow {width: 55px; height: 45px; }
    .grey {
    padding: 50px 20px;
}
    .image2 {flex-wrap: wrap;}
    .image2 li { width: 100%;}
    
    .image2.image3 { display: block;}
.image2.image3 li:nth-child(1) { width: auto; margin-bottom: 15px;}
.image2.image3 li:nth-child(2) { width: auto;}
    .image2.image3.rev li:nth-child(1) { width: auto;}
.image2.image3.rev li:nth-child(2) { width: auto;}
}

table.table { width: 100%; text-align:left; margin-top: -10px; margin-bottom: 20px; }
@media screen and (min-width: 737px) {
table.table.t70 { width: 70%; margin-left: auto; margin-right: auto;}
}

.inner h4 { color: #FFF; margin-bottom: 1.5em;  font-size: 160%;}
.inner .carBox { background-color: rgba(0,0,0,.3); padding: 30px; margin-bottom: 20px; border-radius: .6em;}

.imageList { width: 70%; margin: 0 auto;}
.imageList li { text-align: left; background-color: rgba(255,255,255,.1); margin-bottom: 5px; padding: 15px; 
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.imageList li .num { width: 40px; height: 40px; border-radius: 20px; background-color: #E503CF; color: #FFF; text-align: center; line-height: 40px; font-size: 180%; margin-right:20px; }
#container .imageList li figure { width: 40%; margin-bottom: 0;}
#container .imageList li p { width: 30%; margin-right: 20px; min-width: 30%; margin-bottom: 0;}
@media screen and (max-width: 736px) {
  #container .imageList li p { width: calc( 100% - 70px ); } 
    .imageList li .num { margin-right: 10px; margin-bottom: 0px; }
#container .imageList li figure { width: 100%; margin-right: 0px; margin-top: 15px; text-align: center;}
    .imageList li {}
    .spi { width: 100%;}
    .spi2 { width: 50%!important;}
    .imageList { width: auto;}
    .image2 li figure { text-align: center;}
}

table.tables { margin-top: 0; text-align: left; margin-bottom: 3em; font-size: 100%;}
.inner .image2 h4 { color:#E503CF; font-size: 130%; margin-bottom: .7em;}
h4.pink { color: #E503CF; margin-bottom: .7em;}
h4.blue { color: #00C0D7; margin-bottom: .7em;}
h4.pink+table th { background-color: #E503CF; font-size: 120%; }
h4.blue+table th { background-color: #00C0D7; font-size: 120%; }
@media screen and (max-width: 736px) {
 .inner .image2 h4 {font-size: 100%;}   
}

p.indent { text-indent: -1em; margin-left: 1em;}

.imageclm3 { margin-bottom: 30px; 
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: space-around;
}
.imageclm3 img { width: 100%; height: auto;}
.imageclm3 li { line-height: 0;} 

.blacks { background-color: rgba(255,255,255,.1); padding: 15px; text-align: left;}
#container .inner .blacks p { margin-bottom: 0;}
.blacks+.blacks { margin-top: 10px;background-color: rgba(255,255,255,.05);}
@media screen and (min-width: 737px) {
.image2.textBox li { width: 49%;}
    .imageclm3 { width: 80%; margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 736px) {
  .blacks+.blacks { margin-top: 0px;}
    .blacks { margin-bottom: 10px;}
}

h3.flex { text-align: left; font-style: italic;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;justify-content: center;align-items: center;
}
h3.flex strong { color: rgba(255,253,12,1.00);}
h3.flex span { margin: 0 10px;}

@media screen and (max-width: 736px) {
    h3.flex { display: block;}
    h3.flex span:nth-child(1){ width: auto; display: block; margin: 0 0 15px 0;} 
    h3.flex span:nth-child(2){ width: auto; display: block; margin: 0; text-align: center;} 
    .inner h4 span { font-size: 70%; line-height: 1.4; display: block;}
}
 
.widthText { max-width: 700px; margin-left: auto; margin-right: auto; text-align: left;}
p.center { text-align: center!important;}

@media screen and (min-width: 737px) {
    #under #copy,#under #commonFooter {
        /*width: calc( 100vw - 260px );
    margin-left: auto;
    box-sizing: border-box;*/
    }
}
