@charset "utf-8"; 

img{
  max-width: 100%;
  height: auto;
}
body{
  color: black;
  font-family: 'Times New Roman', Times, serif;
}

#slider {
  width: 100%;
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

h1{
  font-size: 1.5rem;
  /* margin-bottom: 30px; */
}
h1 img{
  width: 300px;
}


.main{
  position: relative;
  margin: 0 auto;
}

.flex{
  width: 800px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    /* outline: 1px solid black; */
}

.h1{
  width: 49%;
  /* outline: 1px solid red; */
}
h1{
  font-size: 2rem;
  font-weight: bold;
  letter-spacing:10px;
}
p{
  font-size: 1.5rem;
  letter-spacing:5px;
}
span{
  font-weight: bold;
}
.link{
  width: 49%;
  /* outline: 1px solid blue; */
}
a{
  text-decoration: none;

}
.footer{
  position: absolute;
    bottom:5px;
    right: 2px;
    font-size: 0.5rem;
}

.footer p{
    font-size: 0.5rem;
}

li{
  font-size: 2rem;
  font-weight: bold;
  letter-spacing:10px;
  color: black;
  margin-bottom: 20px;

}
li a{
  font-size: 2rem;
  font-weight: bold;
  letter-spacing:10px;
  color: black;
  margin-bottom: 20px;
  border-bottom: 1px solid black;
}
li :hover{
  font-size: 2.3rem;
  font-weight: bold;
  letter-spacing:10px;
  color: rgb(228, 219, 93);
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(228, 219, 93);
  transition: 0.5s;
}

.sns{
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 共通のアイコンエフェクト */
.socialEffect__link {
  margin: .3em;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 65px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  transition: transform ease-out 0.2s;
}

.socialEffect__box li {
  display: inline-block;
}


/* インスタ用アイコン設定 */
.icon-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.8);
  

}
.fab.fa-instagram {
  display: inline-block;
  color: #fff;
}
.icon-instagram:hover {
  background: radial-gradient(
      circle farthest-corner at 32% 106%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 10%,
      rgb(250, 145, 55) 28%,
      rgb(235, 65, 65) 42%,
      transparent 82%
    ),
    linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(0.9);
}

/* フェイスブック用アイコン設定 */
.icon-facebook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-facebook-f {
  display: inline-block;
  color: #fff;
}
.icon-facebook:hover {
  background: #3b5998;
  transform: scale(0.9);
}

/* ツイッター用アイコン設定 */
.icon-twitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-twitter {
  display: inline-block;
  color: #fff;
}
.icon-twitter:hover {
  background: #00b0ed;
  transform: scale(0.9);
}
.socialEffect__box li :hover{
  font-size: 2.3rem;
  font-weight: bold;
  letter-spacing:10px;
  margin-bottom: 20px;
  border-bottom: none;
  transition: 0.5s;
}

i{
  margin-left: 10px;
  text-decoration: none;
}


@media (max-width: 850px){
  .flex{
   width: 100%;
    flex-direction: column;
    margin: 0 auto;
    top:40%;

  }

  h1{
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing:5px;
  }
  p{
    font-size: 1.0rem;
    letter-spacing:2px;
  }
  span{
    font-weight: bold;
  }
  li{
    font-size: 1rem;
    font-weight: bold;
    letter-spacing:5px;
  }
  li a{
    font-size: 1.5rem;
  }
  li :hover{
    font-size: 1.8rem;
  }
  .h1{
    width: 100%;
    /* outline: 1px solid red; */
    margin-bottom: 20px;
  }
  .link{
    width: 100%;
    /* outline: 1px solid blue; */
  }
  .sns{
    top:90%;
    width: 300px;
    text-align: center;
  }

  
}