@charset "utf-8";


ul, 
ol {
    list-style: none;;
}

body {
    font-size: 1rem;
    line-height: 1.7;
    color: white;
    background-image: url(../img/AdobeStock_435141020.jpeg);
    background-size: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

/* header
====================== */

header {
    background-image: url(../img/IMG_0688.JPG);
    max-height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}

.main-nav {
    display: flex;
    font-size: 30px;
    margin-top: 44px;
    list-style: none;
}

.main-nav li {
    padding-left: 30px;
}

.main-nav a {
    color: white;
    font-weight: 800px;
}

.main-nav a:hover {
    color: blue;
}

.page-header {
    display: flex;
    justify-content: space-between;
}



/* index
=============== */
.home-content {
    height: calc(100vh - 110px);
    background-image: url(../img/super-heros.JPG);
    background-repeat: no-repeat;
    background-position: top center bottom;
    min-height: 100vh;
    background-size: cover;
    text-align: center ;
}


.home-content p {
    font-size: 2.13rem;
    margin-top: 10px 0 42px;
}

.home-content img {
    width: 100%;
    height: 100%;
}

.page-title {
   font-family: "Noto Serif", serif;
   font-weight: 400;
   font-size: 5rem; 
}


    

/* footer
================ */

footer {
    margin-top: 20px;
    background-color: #432;
    text-align-last: center;
    padding: 26px 0;
   }

footer p {
    color: white;
    font-size: 12px;
}


/* about
========== */

.about-text {
    text-align: center;
    margin-top: 10%;
}


.about-text p {
    font-size: 1.13rem;
    margin-top: 10px 0 42px;
}

.page-title {
   font-family: "Noto Serif", serif;
   font-weight: 400;
   font-size: 5rem; 
}

.list {
     display: grid;
    grid-template-columns: repeat(4, 300px);
    gap: 26px;
    margin-top: 6px;
    margin-bottom: 50px;
    justify-content: left;
    font-size: 14px;
}

.list img {
    display: block;
    width: 90%;
    height: 300px;
    margin-left: 30px;
}
/* キャラクター
========= */





.page-title {
    font-family: "Noto Serif", serif;
    font-weight: 300px;
    font-size: 50px;
}

.page-title h1 {
    font-size: 50px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}

.page-title h2 {
    font-size: 60px;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
}

.page-title p {
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}

.robotto-list, 
.hero-list {
     display: grid;
    grid-template-columns: repeat(5, 198px);
    gap: 26px;
    margin-top: 6px;
    margin-bottom: 50px;
    justify-content: left;
    font-size: 14px;
}

.robotto-list a, 
.hero-list a {
    display: block;
    transition-duration: 0.25;
}

.robotto-list a:hover, 
.hero-list a:hover {
    transform: scale(1.05);
}

.robotto-list img, 
.hero-list img {
    display: block;
    width: 70%;
    height: 150px;
}

.robotto-list li, 
.hero-list li {
    flex-shrink: 0;
    width: 260px;
    margin-left: 60px;
}

.chracter-contents {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-left: 40px;
}

.title-list-menu ul {
    list-style-type: square;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.fiter li,
.super-meca li {
    display: flex;
    justify-content: start; 
    max-width: 90%;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 50px;
}

.fiter dt,
.super-meca dt {
     margin-top: 40px;
    margin-bottom: 30px;
    margin-left: 45px;
}

.fiter dd,
.super-meca dd {
    margin-left: 45px;
}

.fiter p,
.super-meca p {
    margin-left: 45px;
}

.fiter img,
.super-meca img {
    height: 40%;
    width: 40%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.meca {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    column-gap: 100px;
    margin-top: 6px;
    margin-bottom: 50px;
    margin-right: 30px;
    justify-content: center;
    font-size: 14px;
}

.meca li {
     flex-shrink: 0;
    width: 260px;
    margin-left: 100px;
}


.meca dd {
    margin-bottom: 100px;
}


.meca img {
    height: 50%;
    width: 150%;
    margin-top: 40px;
    margin-bottom: 40px;
    justify-content: space-between;
}


.describe h2 img {
    display: block;
    width: 20%;
    height: 150px;
}

.gundam dt {
    font-size: 20px;
    font-weight: bold;
}


.rider dt {
    font-size: 20px;
    font-weight: bold;
}

.change {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    column-gap: 80px;
    margin-top: 6px;
    margin-bottom: 50px;
    margin-right: 30px;
    justify-content: center;
    font-size: 14px;
}

.change img {
    display: block;
    width: 100%;
    height: 300px;
    margin-top: 0;
}

.change li {
    flex-shrink: 0;
    width: 260px;
    margin-left: 100px;
}

.change dt {
    font-weight: bold;
}

/*  ストーリー
===================== */
.story-content {
    font-family: "Noto Serif", serif;
    font-weight: 300px;
    font-size: 50px;
    text-align: center;
}

.story-content h3 {
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}
.story-content p {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}

.story-content h4 {
    font-size: 34px;;
    text-align: center;
}
.top {
  width: 60px;
  height: 60px;
  border-radius: 40%;
  background-color: rgb(68, 16, 212);
  color: red;
  font-weight: bold;
  display: flex;
  justify-content: center;
  position: fixed;
  right: 3%;
  bottom: 15%;
  }

  .moji {
    font-size: 2rem;
    padding-bottom: 4px;
  }

  /* system
  =========== */

.system-text {
    text-align: center;
}

  .stage,  
  .battle, 
  .machine{
    display: flex;
  }
  
  .stage img {
    display: block;
    width: 90%;
    height: 300px;
    margin-left: 30px;
  }

  .battle img {
    display: block;
    width: 90%;
    height: 300px;
    margin-left: 200px;
  }

  .machine img {
    display: block;
    width: 100%;
    height: 300px;
    margin-left: 200px;
  }