@font-face {
  font-family: "PixelMplus12";
  src: url("/fonts/MPLUSRounded1c-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.sec01 {
  height: 100vh;
  position: relative;
  overflow: hidden;
}


/* スライド */
.slides,
.slide {
  position: absolute;
  inset: 0;
}

.slide {
  opacity: 0;
}

.slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

.zennhann {
  width: 100%;          /* 横幅は画面いっぱい */
  height: 1000vh;         /* 高さは画像比率に合わせる */
  background-image: url(images/メディアデザイントップ画1-2.jpg);
  background-size: 100% auto;  /* 横幅100%、縦比率維持 */
  background-repeat: no-repeat;
  background-position: center top; /* 上寄せで表示 */
  
  position: relative;
  opacity: 0;           /* 初期状態は透明 */
  pointer-events: none;
  margin-bottom: 200%;

}

.chuban1{
   width: 100%;
  height: 100%;
  position: relative;
  background-image: url(images/メディアデザイントップ画2-1.jpg);
  background-size: 100% auto;   
  background-repeat: no-repeat;
  background-position: center -7.0%; 
  padding-bottom: 10%;
}

.chuban2{
   width: 100%;
  height: 100%;
  position: relative;
  background-image: url(images/メディアデザイントップ画2-2.jpg);
  background-size: 90% auto;   
  background-repeat: no-repeat;
  margin-left: 10%;
}

.shuban{
  width: 100%;
  height: 100%;
  position: relative;

  background-image: url(images/メディアデザイントップ画3-2.jpg);
  background-size: 70% auto;   /* ← ここがポイント */
  background-repeat: no-repeat;
  background-position: center ;
}

.hit{
  position: absolute;
  width: 9%;
  height: 14%;
   
}



/* 吹き出し画像 */
.fukidashi1 {
  position: absolute;
  bottom: 110%;      /* ← hitの上に出す */
  left: 50%;
  transform: translateX(-115%);
  width: 160px;      /* 吹き出しサイズ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fukidashi2 {
  position: absolute;
  bottom: 100%;      /* ← hitの上に出す */
  left: 50%;
  transform: translateX(25%);
  width: 150%;      /* 吹き出しサイズ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fukidashi3 {
  position: absolute;
  bottom: 90%;      /* ← hitの上に出す */
  left: 50%;
  transform: translateX(10%);
  width: 150%;      /* 吹き出しサイズ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fukidashi4 {
  position: absolute;
  bottom: 80%;      /* ← hitの上に出す */
  left: 70%;
  transform: translateX(5%);
  width: 150%;      /* 吹き出しサイズ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ホバーしたら表示 */
.one:hover .fukidashi1 {
  opacity: 1;
}

.two:hover .fukidashi2 {
  opacity: 1;
}

.three:hover .fukidashi3{
  opacity: 1;
}

.four:hover .fukidashi4 {
  opacity: 1;
}

.one{ top: 75%; left: 18%; }
.two{ top: 62%; left: 31%; }
.three{ top: 41%; left: 61%; }
.four{ top: 11%; left: 58%; }


body{
  margin: 0;
  background-color: #a8dadb;
    font-family: "Noto Sans JP", sans-serif;
}

html, body {
  overflow-x: hidden;
}


img{
    display: block;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 1px;
}

.line{
  padding-top: 40%;
  padding-bottom: 5%;
}

.line2{
  padding-top: 5%;
  padding-bottom: 30%;
}

.line3{
  padding-top: 5%;
  padding-bottom: 2%;
  
}




h2{
  font-size: 300%;
  text-align: center;
  color:#1b2f5c;
  font-family: "PixelMplus12", sans-serif;
  padding-top: 20%;
  margin-bottom: 2%;   
  line-height: 100%;
}

p{
  
  color:#1b2f5c;
  font-size: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 150%;
  margin-top: 0%;      
  padding-top: 0%;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}


h3 {
  color:#1b2f5c;
  font-family: "PixelMplus12", sans-serif;
  padding-top: 3%;
  margin-left: 52%;
  font-size: 300%;
  white-space: nowrap;
}

h4 {
  color:#1b2f5c;
  text-align: center;
  padding-top: 0%;
  padding-left: 20%;
  font-size: 120%;
  white-space: nowrap;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

h5 {
  font-size: 300%;
  text-align: center;
  color:#1b2f5c;
  font-family: "PixelMplus12", sans-serif;
  line-height: 100%;
  padding-bottom: 38%;;
  margin-top: -8%;   
}




@media (prefers-reduced-motion: reduce) {
  .interview {
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {

  h1 {
    font-size: 180%;
    padding-bottom: 22%;
    margin-right: 2%;
  }

  h2 {
     font-size: 16px;
    margin-left: 0;
    padding-left: 0;
    white-space: normal;
  }

  h3 {
     font-size: 16px;
     margin-left: 55%;
    
    white-space: normal;
  }

   h4 {
     font-size: 10px;
     margin-left: 9%;
    line-height: 1.2;
    white-space: normal;
  }

h5{
     font-size: 16px;
    margin-left: 0;
    padding-left: 0;
    white-space: normal;
  }

  .chuban1 {
    background-image: none !important;
    height: auto;
    padding-bottom: 0;
    margin-top: 0;
  }

  .chuban1 .line {
    padding-top: 30%;
    padding-bottom: 35%;
  }

  .line2{
 transform: translateY(-10%);
}




  p {
      font-size: 10px;
    line-height: 1.2;
    padding: 0 1rem;
      text-align: center;
  }

  .chuban1{
     margin-top: -123.5%;
  }

  .line3{
     margin-bottom: 5%;
  }
  
  

  .hit {
    width: 18%;
    height: 18%;
  }

  
  /* 吹き出し画像そのもの */
  .hit img {
       display: none;
  }

  .zennhann {
    opacity: 1;
  }
}