@charset "utf-8";


/*基本設定-----------------------------------------*/
/* 隙間なく表示させるおまじない */
html,
body {
  margin: 0px;
  padding: 0px;
}

/* ページ内全体の文字の設定と背景の設定 */
body {
  font-family: "Noto Serif JP", serif;
  font-size: 1em;
  color: #f3f3f3;
  line-height: 1.8em;
  background-color: #322A00;
  background-image: url(img/bed\ back2.png);
}

/* ページ内全体のリンクの文字色 */
a {
  text-decoration: none;
}

a:link {
  color: #333333;
}

/* あとは自分で書いてみよう！ */
#container {
  background-color: #ffffff;
  margin: 0 auto;
  width: 100%;
  max-width: 390px;
  height:1090px;
  text-align: left;
}

#keyvisual {
  width: 100%;
  height: 100vh;
  background-image: url(img/bed.png);
  background-size: cover;
}

.ue_btn {
  width: 96%;
  padding: 45px 0 0 14px;
  display: flex;
}

.ue_btn_migi {
  width: 96%;
  padding: 0 10px 0 0;
  display: flex;
  justify-content: flex-end;
}

.ue_btn_migi1 {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

.ue_btn_migi2 {
  width: 14%;
  display: flex;
  justify-content: flex-end;
}

.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow:0 5px 10px   #1e226d;
  background: #dfdfdf;
  /*背景色*/
  position: absolute;
  top: 0.1%;
  /*←親要素の上からの位置*/
  left: 30%
}

.circle2 {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #cbcbcb;
  /*背景色*/
  margin: auto;
  position: absolute;
  top: 7.4%;
  /*←親要素の上からの位置*/
  left: 33.2%
}

.profiel {
  margin: 80px 0 0 0;
  width: 100%;
  height: 157px;
  position: relative;

}

.hensyu {
  position: absolute;
  left: 62%;
  top: 75%;
}

.warp__placeholder {
  position: absolute;
  color: transparent;
  font-size: .1px;
}

.warp {
  display: block;
  position: relative;
  width: 97%;
  height: 30px;
  font: normal 16px/1 'Afacad Flux';

}

[class*='warp__'] {
  display: block;
  position: absolute;
  left: -25.1%;


}

.warp__0 {
  transform-origin: 50% 12px;
  transform: translate(242.1721px, 1.6917px) rotate(0.505657rad);
}

.warp__1 {
  transform-origin: 50% 12px;
  transform: translate(257.4582px, 5.5202px) rotate(0.315418rad);
}

.warp__2 {
  transform-origin: 50% 12px;
  transform: translate(266.4592px, 7.9136px) rotate(0.20786rad);
}

.warp__3 {
  transform-origin: 50% 12px;
  transform: translate(275.6662px, 9.4069px) rotate(0.115434rad);
}

.warp__4 {
  transform-origin: 50% 12px;
  transform: translate(284.7983px, 10.0747px) rotate(0.031023rad);
}

.warp__5 {
  transform-origin: 50% 12px;
  transform: translate(293.9627px, 9.9734px) rotate(-0.053687rad);
}

.warp__6 {
  transform-origin: 50% 12px;
  transform: translate(303.118px, 9.1388px) rotate(-0.140071rad);
}

.warp__7 {
  transform-origin: 50% 13px;
  transform: translate(311.222px, 7.4962px) rotate(-0.240094rad);
}

.warp__8 {
  transform-origin: 50% 13px;
  transform: translate(320.0839px, 5.4655px) rotate(-0.338563rad);
}

.warp__9 {
  transform-origin: 50% 10px;
  transform: translate(325.029px, 4.7064px) rotate(-0.417145rad);
}

.warp__10 {
  transform-origin: 50% 9px;
  transform: translate(328.3458px, 2.6747px) rotate(-0.549229rad);
}

.profiel_bunsyo {
  width: 100%;
  height: 265px;
  margin: -17px 0 0 0;
}

.onamae {
  width: 100%;
  height: 20px;
  text-align: center;
  font-family: "BIZ Gothic", sons-serif;
  font-size: 1.4em
}

.bunsyo {
  width: 100%;
  height: 40px;
  text-align: center;
  margin: 5px 0 3px 0;
  font-family: "BIZ Gothic", sons-serif;
  font-size: 0.83em
}

.follow {
  width: 100%;
  height: 30px;
  font-family: "BIZ Gothic", sons-serif;
  display: flex;
}

.sikaku1 {
  font-family: "BIZ Gothic", sons-serif;
  font-weight: 500;
  font-size: 0.8em;
  width: 120px;
  height: 30px;
  border-radius: 7px;
  background-color: #ffffff6b;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 60px;
}

.sikaku1 span {
  font-size: 18px;
  font-weight: 600;
}

.sikaku2 {
  font-family: "BIZ Gothic", sons-serif;
  font-weight: 500;
  font-size: 0.8em;
  width: 120px;
  height: 30px;
  border-radius: 7px;
  background-color: #ffffff6b;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 60px 0 20px;
}

.sikaku2 span {
  font-size: 18px;
  font-weight: 600;
}

.friends_profiel {
  width: 95%;
  height: 70px;
  filter:drop-shadow(0 6px 7px #303962);
  display: flex;
  padding: 20px 0 0 10px
  
}

.menu_bar {
  width: 95%;
  height: 40px;
  margin: 10px 0 0 15px;
  justify-content: center;
  display: flex;
}
.toukou{
width: 100%;
background-image: url(img/check.png);
    background-size: cover;

}
.toukou_photo1{
  display: flex;
  margin: 4px;

}

.toukou_photo1 img{
  border-radius:10px
}

  .toukou_photo2{
    display: flex;
    margin: 6px 0 0 5px;
  
}

.toukou_photo2 img{
  border-radius:10px;
}
.sita_menu{
    width: 390px;
    height:220px;
     /* height: 210px; */
    background-image: url(img/sita_menu_photo2.png);
    background-size: cover;
    position:fixed;
    bottom :0;
  }