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


html{
    scroll-behavior: smooth;
}


body{
    display: block;
  width: 100%!important;
	margin: 0 auto;
	padding: 0;  
color: #1f3134;
}


img:hover{
opacity: 1;
}

  
.slidein {
opacity: 0;
}



.slidein.show {
opacity: 1;
transform: none;
        animation: slideIn .7s forwards;
}


@keyframes slideIn {
  0% {
    transform: translateY(180px);
    opacity: 0;
    
  }
  100% {
    transform: translateY(0);
        transition: all 1, ease;
  }
  80%,100% {
    opacity: 1;
  }
}
 
.fadein {
opacity: 0;
}

.fadein.show {
opacity: 1;
     animation: fadeIn .7s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    
  }
    60%{
         opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

.show{
    margin-bottom: 0;
   padding: 0;
}

main{
    display: block;
     position: relative; 
    width:     1000px;
    margin: 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}



#mainimage p{
    text-align: right;
}

    


h1{
    color: #fff;
    background-color: #323232;
    width: 170px;
    text-align: center;
    margin-top: 0;
    font-size: 22px;
    margin: 120px 0 40px 0;
}



.contents1{
  display: flex;
    justify-content:space-between;
    margin: 0 0 120px 0 ;
    padding: 0;
}






.contents1  div:first-child img{
    display: block;
margin-bottom: 40px;
}

.contents1  div:last-child img{
width: 430px;
}



.contents2 img{
     margin-top: 300px;
}




.contents3{
    margin: 300px 0 100px 0;
}


.contents3-1 {
  position: relative;
  width: auto; /* 必要な横幅に調整 */
  height: 50px; /* 高さも調整可能 */
    margin: 100px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents3-1:first-of-type {
margin-top: 0!important;
}


.contents3-1 div {
  position: absolute;
  top: 50%; /* 中央に配置 */
  left: 0;
  width: 100%;
  height: 4px; /* 線の太さ */
  background-color: #E6E8DF; /* 線の色 */
  transform: translateY(-50%); /* 垂直中央に合わせる */
}

.contents3-1 p{
    position: relative;
    display: block;
    width: auto; 
    font-weight: bold;
    font-size: 22px;
    color: #CCCFBC;
    text-align: center;
    background-color: #fff;
    padding: 0px 20px;
}



.blue p{
    color: #8FA3BC;

}

.blue div{
      background-color: #E4E9EF;

}


.red p{
    color: #B68C8D;

}

.red div{
      background-color: #EDE2E2;

}
.green p{
    color: #6EB351;

}

.green div{
      background-color: #E9F3E5;

}








.contents3-2 {
  display: flex;
     justify-content: center; /* 横中央 */
  align-items: center;    /* 縦中央 */
gap: 30px;
   
}

.contents3-2 img{
    width: 500px;
}



.contents3-2 p ,.contents3-3 p{
  font-weight: bold;
text-align:center;
}



.contents3-3 {
  display: flex;
     justify-content: center; /* 横中央 */
  align-items: center;    /* 縦中央 */
    gap: 50px;
}

.contents4 {
    display: block;
width:  850px;
    margin: 0 auto;
    margin-top: 100px;
    line-height: 2em;
}