/* リセット（必要最低限） */
body, h1, h2, p {
  margin: 0;
  padding: 0;
}

/* スマホ向けに文字が小さすぎないように */
body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: #fff;
  background-color: #000; /* 読み込み前の下地 */
}

/* 1画面分の背景画像 */
.hero {
  height: 100vh;
  background-image: url("back2.png"); /* ←自分の画像に差し替え */
  background-image: url(nami2.png);
  background-color: #6CD3FB;
  background-size: 390px;
  background-position: top;
  background-repeat: no-repeat;
  display: flex;
  
}



.hero-text {
  display: grid;
  flex-direction: column; /* 垂直方向に並べる */
  height: 46px;
  gap: 5px;   
  margin-top: 28px;         
}




.hero-content1 {
  margin-top: -400px;
  margin-left: -250px;
}

.hero-content1 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(20deg); } }



.hero-content2{
  margin-top: -350px;
  margin-left: 0px;
}

.hero-content2 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(20deg); } }



.hero-content3 {
  margin-top: -40px;
  margin-left: 66px;
}

.hero-content3 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(-20deg); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(-20deg); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

.hero-content9 {
  margin-top: -370px;
  margin-left: -380px;
}

.hero-content9 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }


.hero-content10 {
  margin-top: -490px;
  margin-left: 310px;
}
    
.hero-content10 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }


.hero-content11 {
  margin-top: -480px;
  margin-left: -270px;
}
    
.hero-content11 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

.hero-content13 {
  margin-top: -390px;
  margin-left: 0px;
}
    
.hero-content13 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

    

 .hero-content14 {
  margin-top: -330px;
  margin-left: -20px;
}
    
.hero-content14 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }   

.hero-content15{
  margin-top: -270px;
  margin-left: -360px;
}
    
.hero-content15 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

.hero-content16{
  margin-top: -250px;
  margin-left: 40px;
}
    
.hero-content16 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

.hero-content17{
  margin-top: -150px;
  margin-left: -350px;
}
    
.hero-content17 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }

.hero-content18{
  margin-top: -160px;
  margin-left: -140px;
}
    
.hero-content18 img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }


.rogo {
  margin-left: -68px;
}

.rogo img {
  
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: rotate(0); }
  5% {
    transform: rotate(0); }
  10% {
    transform: rotate(0); }
  20% {
    transform: rotate(0); }
  25% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(0); }
  100% {
    transform: rotate(0); } }


.hero-text1 {
  width: 205px;
  height: 46px;
  animation: typing 500ms steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  display: inline-block;
  outline: none;
  padding: 3px;
  background-color: #6CD3FB ;
  color:#fff ;
  font-weight: bold;
  font-size: 32px;
  
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}



.info {
  position: absolute;
  bottom: 0;
  padding: 20px;
}

.hero-text2 {
  width: 113px;
  height: 46px;
  animation: typing 500ms steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  display: inline-block;
  outline: none;
  padding: 3px;
  background-color: #6CD3FB ;
  color:#fff ;
  font-weight: bold;
  font-size: 32px;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  70% {
    border-color: transparent
  }
}



.info {
  position: absolute;
  bottom: 0;
  padding: 20px;
}



.hero-text3 {
  width: 113px;
  height: 46px;
  animation: typing 500ms steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  display: inline-block;
  outline: none;
  padding: 3px;
  background-color: #6CD3FB ;
  color:#fff ;
  font-weight: bold;
  font-size: 32px;
  
 
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}



.info {
  position: absolute;
  bottom: 0;
  padding: 20px;
}

.hero-text4 {
  width: 176px;
  height: 46px;
  animation: typing 500ms steps(22), blink .5s step-end infinite alternate;

  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  display: inline-block;
  outline: none;
  padding: 3px;
  background-color: #6CD3FB ;
  color:#fff ;
  font-weight: bold;
  font-size: 32px;
}

keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}



.info {
  position: absolute;
  bottom: 0;
  padding: 20px;
}

.section7 {
  width: 390px;
  background-color: #6CD3FB;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
 }



.wave {
	position:relative;
	overflow:hidden;
	margin:0 auto;
	width:390px;
	height:390px;
	background-color:#6CD3FB;
  margin-top: -390px;
}

.wave::before {
	position:absolute;
		top:-150%;
		left:-50%;
		border-radius:50% 50% / 50% 70%;
		width:200%;
		height:200%;
		content:"";
		background-color:#fff;
		animation:wave linear 6s infinite;
}

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}


.rogo {
  width: 350px;
  height: 268px;
  display: flex;
  align-items: center;
  margin-top: -100px;
 
 }

/* 通常セクション */
.section {
  height: 100vh;
  background-image: url("back3.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
 
}

.comment1 {
  position: relative;
  margin-top: 14px;
  margin-left: 59px;
}

.label {
  position: absolute;
  font-size: 16px;
  margin-top: -99px;
  margin-left: 15px;
  font-weight: bold;
  color: #064393;
}

.hero-content6 {
  margin-top: -15px;
  margin-left: 52px;
}

.hero-content6 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 150px;
  height: 139px;
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-10deg);
  }
  50% {
    transform:translate(0, -10px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(10deg);
  }
}


.hero-content7 {
  margin-top: -126px;
  margin-left: -59px;
}

.comment2 {
  position: relative;
  margin-top: -63px;
  margin-left: 143px;
}

.label2 {
  position: absolute;
  font-size: 16px;
  margin-top: -126px;
  margin-left: 13px;
  font-weight: bold;
  color: #064393;
}

.comment3 {
  position: relative;
  margin-top: -79px;
  margin-left: -26px;
}

.label3 {
  position: absolute;
  font-size: 16px;
  margin-top: -92px;
  margin-left: 15px;
  font-weight: bold;
  color: #064393;
}

.comment4 {
  position: relative;
  margin-top: 19px;
  margin-left: 70px;
}

.label4 {
  position: absolute;
  font-size: 16px;
  margin-top: -92px;
  margin-left: 21px;
  font-weight: bold;
  color: #064393;
}

.hero-content8 {
  margin-top: 35px;
  margin-left: -30px;
}

.hero-content8 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 150px;
  height: 139px;
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-10deg);
  }
  50% {
    transform:translate(0, -10px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(10deg);
  }
}

.comment5 {
  position: relative;
  margin-top: -140px;
  margin-left: 160px;
}

.label5 {
  position: absolute;
  font-size: 16px;
  margin-top: -92px;
  margin-left: 21px;
  font-weight: bold;
  color: #064393;
}



.section2 {
  height: 100vh;
  background-image: url("back4.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment19 {
  position: relative;
  margin-top: -670px;
  margin-left: -30px;
}

.label20 {
  position: absolute;
  font-size: 16px;
  margin-top: -75px;
  margin-left: 17px;
  font-weight: bold;
  color: #064393;
}


.section3 {
  height: 100vh;
  background-image: url("back5.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment6 {
  position: relative;
  margin-top: -480px;
  margin-left: 0px;
}



@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-10deg);
  }
  50% {
    transform:translate(0, -10px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(10deg);
  }
}

.label6 {
  position: absolute;
  font-size: 16px;
  margin-top: -190px;
  margin-left: 200px;
  font-weight: bold;
  color: #064393;
}


.label7 {
  position: absolute;
  font-size: 14px;
  margin-top: -165px;
  margin-left: 200px;
  font-weight: bold;
  line-height: 160%;
  color: #4387E0;
}

.comment7 {
  position: absolute;
  margin-top: -280px;
  margin-left: -9px;
}

.comment7 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) 
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.comment8 {
  position: absolute;
  margin-top: 93px;
  margin-left: 5px;
}

.label8 {
  position: absolute;
  font-size: 16px;
  line-height: 160%;
  margin-top:-213px;
  margin-left: 39px;
  font-weight: bold;
  color: #064393;
}

.label9 {
  position: absolute;
  font-size: 14px;
  line-height: 160%;
  margin-top:-160px;
  margin-left: 39px;
  font-weight: bold;
  color: #4387E0;
}

.comment9 {
  position: absolute;
  margin-top: -370px;
  margin-left: 157px;
}

.comment9 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) 
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.section4 {
  height: 100vh;
  background-image: url("back6.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment10{
  position: absolute;
  margin-top: -522px;
  margin-left: 5px;
}

.label10 {
  position: absolute;
  font-size: 16px;
  line-height: 160%;
  margin-top:-280px;
  margin-left: 127px;
  font-weight: bold;
  color: #064393;
}

.label11 {
  position: absolute;
  font-size: 14px;
  line-height: 160%;
  text-align: right;
  margin-top:-252px;
  margin-left: 117px;
  font-weight: bold;
  color: #4387E0;
}

.comment11 {
  position: absolute;
  margin-top: -230px;
  margin-left: -20px;
}

.comment11 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) 
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.comment12{
  position: absolute;
  margin-top: 264px;
  margin-left: 5px;
}

.label12 {
  position: absolute;
  font-size: 16px;
  line-height: 160%;
  margin-top:-230px;
  margin-left: 136px;
  font-weight: bold;
  color: #064393;
}

.label13 {
  position: absolute;
  font-size: 14px;
  line-height: 160%;
  margin-top:-202px;
  margin-left: 137px;
  font-weight: bold;
  color: #4387E0;
}

.comment13 {
  position: absolute;
  margin-top: -280px;
  margin-left: -20px;
}

.comment13 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) 
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.section5 {
  height: 100vh;
  background-image: url("back7.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.comment14{
  display: flex;
  flex-direction: column;
  margin-left: -165px;
  margin-top: -100px;
  margin-bottom: 70px;
}

.comment14 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) 
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.comment15{
  display: flex;
  flex-direction: column;
  margin-left: 130px;
  margin-top: -150px;

}

.comment15 img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  
  margin-top: 5px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0)
  }
  50% {
    transform:translate(0, -10px) 
  }
  100% {
    transform:translate(0, 0) 
  }
}

.label14 {
  font-size: 16px;
  text-align: right;
  line-height: 160%;
  font-weight: bold;
  color: #fff;
  margin-top: 190px;
  margin-left: 191px;
  text-shadow: 1px 1px 2px rgba(31, 54, 157, 0.4);
}



.label15 {
  
  font-size: 16px;
  line-height: 160%;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(31, 54, 157, 0.4);
}

.label16{
 
  font-size: 12px;
  text-align: right;
  line-height: 160%;
  font-weight: bold;
  color: #fff;
  margin-right: -105px;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(31, 54, 157, 0.4);
}

.label17{
  
  font-size: 16px;
  line-height: 160%;
  font-weight: bold;
  color: #fff;
  margin-left: -65px;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(31, 54, 157, 0.4);
}




.section6 {
  height: 100vh;
  background-image: url("back10.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 552px;
}

.button-container {
  
  display: flex;
  flex-direction: column; /* 垂直方向に並べる */
  gap: 28px;              /* ボタン間の隙間 */
  width: 273px;           /* 必要に応じて幅を指定 */
  margin-bottom:0px ;
   
}
.btn {
  outline: none;
  padding: 10px;
  background-color: #3C62C3 ;
  color:#fff ;
  border-radius: 30px; 
  font-family:"Zen Maru Gothic", sans-serif; 
  font-weight: 700;
  font-size: 16px;
}

.comment16{
   margin-top: -720px;
  margin-left: 0px;
}

.comment17{
    display: block;
    width: 273px;
    background: #3C62C3;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
     font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    
}
.comment17:active{
    background: #fff;
    color: #3C62C3;
}

.comment18{
    display: block;
    width: 273px;
    background: #3C62C3;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
     font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    
}
.comment18:active{
    background: #fff;
    color: #3C62C3;
}


.container {
  width: 100vw;
  height: 648px; /* 好きな高さ */
  background-image: url(back11.png);
  overflow: hidden;
  position: relative;
  
}

.slide-img {
  position: absolute;
  top: 50%;
  margin-top: -100px;
  transform: translateY(-50%);
  animation: slide 6s linear infinite;
  
}

/* アニメーション */
@keyframes slide {
  0% {
    transform: translate(100vw, -50%);
  }
  100% {
    transform: translate(-100%, -50%);
  }
}



/* フッター */
.footer {
  height: 361px;
  background-image: url("back12.png"); /* ←自分の画像に差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.icons{
  display: flex;
  margin-top: 200px;
 

}


.icon{
  display: flex;
  align-items: center;
  gap: 20px;              /* ボタン間の隙間 */
  width: 313px;           /* 必要に応じて幅を指定 */

}