@charset "UTF-8";

/*google font*/
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&family=Sarpanch:wght@400;500;600;700;800;900&family=Smooch+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&display=swap');

/*----------------remise à zéro-----------------------------*/
* {
    font-family: "Arial", serif;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    border: 0px;
    color: #000000;
}

/*reinitialise la valeur du retour*/
br{
    display: block;
    height: 0;
}


html {
  scroll-behavior: smooth; /* effet de transition */
}

section[id] {
  scroll-margin-top: 100px; /* ヘッダーの高さに応じて調整（例：100px） */
}


/*------------------structure du html-----------------------*/



header {
    background-color: black;
    padding: 0px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

main {
  position: relative;
  z-index: 1;
  padding-top: 124px;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.7; 
  z-index: -2;
}

main.bg-captain::before {
  background-image: url("images/captain-bg.webp");
}
main.bg-kraven::before {
  background-image: url("images/kraven-bg.webp");
}
main.bg-spider::before {
  background-image: url("images/spider-bg.webp");
}
main.bg-doctor::before {
  background-image: url("images/doctor-bg.webp");
}
main.bg-dpl::before {
  background-image: url("images/dpl-bg.webp");
}
main.bg-wolverine::before {
  background-image: url("images/wolverine-bg.webp");
}


footer {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #444;
    background-color: black;
    text-align: center;
    gap: 20px;
    padding: 30px;
    z-index: 1200;
}

.contenu {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  padding: 100px 0 20px 0;
}

.contenu-titre {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  padding: 20px 0 20px 0;
}

.contenu-contest {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  padding: 70px 0 0 0;
}


/* Chaque étage (rangee) */
.rangee {
    display: flex;
    gap: 10px;
}


/* Style des boîtes */
.boite {
    padding: 0 20px;
    flex: 1;
}

.boite-spider {
    padding: 120px 0 20px 0;
    flex: 1;
}


/* Colonne asymétrique */
.large {
  flex: 2; /* 2 parts de largeur */
  padding: 20px;

}

.petite {
  flex: 0.5; /* 0.5 part de largeur */
  padding: 20px;
}


/*--------------------menu navigation------------------------*/
nav {
    border-top: 2px solid #444;
}

/*permet de centrer le menu navigation*/
nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*espacement dans le menu de navigation*/
nav li {
    list-style-type: none;
    margin:0px 30px 0px 30px;
}


/*items dans le menu de navigation*/
nav a {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;

  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding: 20px 0px 20px 0px;

  display: block;
  width: 100%;
  height: 100%;
}

/*survol des items dans le menu de navigation*/
nav a:hover {
    border-bottom: 3px solid red;
    color: red;
}

hr {
  border-bottom:1px solid black;
}

/*------------------ajustements typographiques-------------------*/


h2 {
    font-family: "Sarpanch", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 30px;
    text-align: left;
    color: #A9A9A9;
    margin: 20px 0 30px 0px;
}


h3 {
    font-family: "Sarpanch", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 27px;
    text-align: left;
    color: #ffff;
    margin-bottom: 20px;
    margin-top: 0px;
}

p {
    font-family: "Smooch Sans", sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: justify;
    color: #ffff;
    margin-bottom: 0px;
    margin-top: 0px;
    z-index: 1200;
}

.carre p {
    font-family: "Smooch Sans", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    text-align: left;
    color: #ffff;
    margin-bottom: 0px;
    margin-top: 0px;
    z-index: 1200;
}

small {
    font-family: "Smooch Sans", sans-serif;
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #ffff;
    margin-bottom: 0px;
    margin-top: 0px;
}



/*------------------class effet-------------------*/

img{
    max-width: 100%;
    max-height: 100%;
}

.fv {
    display: flex;
    position: cover;
    width: auto;
    background-color: black;
}

/*bouton ancres*/
.button {
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 40px;
    background-color: #222;
    display: inline-block;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.button-youtube {
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0px 0px 0px;
    padding: 15px 40px;
    background-color: #222;
    display: inline-block;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.button:hover {
    border-bottom: 3px solid red;
    color: red;
}

.button-youtube:hover {
    border-bottom: 3px solid red;
    color: red;
}

/*encadré*/
.carre {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4); /* 半透明の黒 */
  backdrop-filter: blur(3px);
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 25px 0 0 10px;
  width: 300px;
  height: 350px;
}



/*centrer le logo dans le menu navigation*/
.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
}


/*icons survol*/
.icon {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 0 30px 20px 0;
}

.icon:hover {
    opacity: 0.25;
}


.no-padding {
    padding: 0px;
}

.contest img {
  vertical-align: bottom;
}

.spider {
  margin-top: -101px;
}

.bg-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 640px;
}

.captain-bg-image-01 {
  background-image: url('images/captain-bg-image-01.webp');
}


.captain-bg-image-02 {
  background-image: url('images/captain-bg-image-02.webp');
}


.captain-bg-image-03 {
  background-image: url('images/captain-bg-image-03.webp');
}

/*------------------kraven-------------------*/


.kraven-bg-image-01 {
  background-image: url('images/kraven-bg-image-01.webp');
}


.kraven-bg-image-02 {
  background-image: url('images/kraven-bg-image-02.webp');
}


.kraven-bg-image-03 {
  background-image: url('images/kraven-bg-image-03.webp');
}


/*------------------spider-------------------*/

.spider-bg-image-01 {
  background-image: url('images/spider-bg-image-01.webp');
}


.spider-bg-image-02 {
  background-image: url('images/spider-bg-image-02.webp');
}


.spider-bg-image-03 {
  background-image: url('images/spider-bg-image-03.webp');
}

/*------------------doctor-------------------*/

.doctor-bg-image-01 {
  background-image: url('images/doctor-bg-image-01.webp');
}


.doctor-bg-image-02 {
  background-image: url('images/doctor-bg-image-02.webp');
}


.doctor-bg-image-03 {
  background-image: url('images/doctor-bg-image-03.webp');
}

/*------------------dpl------------------*/

.dpl-bg-image-01 {
  background-image: url('images/dpl-bg-image-01.webp');
}

.dpl-bg-image-02 {
  background-image: url('images/dpl-bg-image-02.webp');
}


.dpl-bg-image-03 {
  background-image: url('images/dpl-bg-image-03.webp');
}


/*------------------dpl------------------*/


.wolverine-bg-image-01 {
  background-image: url('images/wolverine-bg-image-01.webp');
}

.wolverine-bg-image-02 {
  background-image: url('images/wolverine-bg-image-02.webp');
}


.wolverine-bg-image-03 {
  background-image: url('images/wolverine-bg-image-03.webp');
}