@charset "utf-8";


/*基本設定-----------------------------------------*/
/* 隙間なく表示させるおまじない */
html, body { 
  margin: 0px;
  padding: 0px;
 }
 /* ページ内全体の文字の設定と背景の設定 */
body {
    font-family: "Noto Serif JP", serif; 
    font-size: 1em;
    color: #241a13;
    line-height:1.8em;
    background-color: #ccbfb0;
    }
/* ページ内全体のリンクの文字色 */
a{text-decoration: none;}
a:link {color: #333333;} 

#container{
  background-color: #ffffff; /* 背景色 */
    margin: 0 auto; /* 上下の空きなし、左右中央に表示せよ */
    width: 100%; /* 横幅は画面いっぱいまで広げてくれ */
    max-width :430px; /* ただし、横幅の最大は430ピクセルな */
    text-align: center; /* この中にあるものは中央揃えで配置してくれ */
    overflow:hidden;
    position: relative;
  } 
 .site-header {
  
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 70px; /* 高さを指定する */
    background-color: #ccbfb0;
    color: #fff;
    padding: 10px 20px;
  }
  #main-nav{
    width: 50%;
    margin: 10px auto;
    display: flex;
    align-items: flex-end;
  }
  .btn_photo img{
    width: 30px;
    height: auto;
  }
  .logo a {
    color: #fff;
    text-decoration: none;
    font-family: "Parisienne", cursive;
    font-size: 1.5em;
    font-weight: bold;
  }
  #keyvisual {
    display: flex;
    justify-content: flex-start; /* ← 左寄せ */
    align-items: center;       /* 下に寄せる */
    height: 5px;               /* 高さをお好みで調整 */
    background-color: #ffffff;
    background-size: cover;
    padding: 10px 20px;
    overflow: hidden;            /* はみ出し防止 */
  }
  .tensen{
    margin-left: -13px;
    margin-top: -5px;
  }
  .tensen img {
    max-width: 118%;
    height: auto;
    display: block;
  }
  #body1{
    display: flex;
    justify-content: flex-start; /* ← 左寄せ */
    align-items: top;       /* 下に寄せる */
    height: 400px;               /* 高さをお好みで調整 */
    background-color: #ffffff;
    background-size: cover;
    padding: 10px 20px;
    overflow: hidden;
        
  }
  .illust_radius{
    margin-left: -40px;
    margin-top: 50px; 
    max-width: 85%;
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
  }
  .photo_radius{
    margin-left: -190px;
    margin-top: -10px; 
    width: 90px; /* 横20ピクセル */
    height: 90px; /* 縦260ピクセル */
    border-radius: 50%; /* 角をまーるくして */
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
    border: solid 2px #ffffff; /* まわりに7ピクセルの縁をつけてね */
  }
  .name{
    position: relative;
  }
  #profile_name{
    margin: 0;
    position: absolute;
    top: -10px;
    left: 5px;
    font-size: 1.3em;
    font-weight: normal;
  }
  #profile_id{
    position: absolute;
    top: 0px; /* 名前からどれくらい下に置くか */
    left: 5px;
    font-size: 0.75em;
    font-weight: normal;
    color: #878787;
  }
  .followbotan{
    position: relative;
  }
  .follow_radius{
    margin: 0;
    max-width: 32%;
    position: absolute;
    top: 125spx;
    left: 260px;
  }
  #follow_text{
    position: absolute;
    top: 108px; /* 名前からどれくらい下に置くか */
    left: 290px;
    font-size: 1em;
    font-weight: normal;
    color: #ffffff;
  }
  
  #rist_area{
    position: relative;
  }
  .rist_text_left{
    position: absolute;
    margin-left: -35px;
    margin-top: 40px;
    font-size: 0.8em;
    font-weight: normal;
  }
  #shousai{
    margin-left: 100px;
    margin-top: 52px;
    font-size: 0.8em;
    font-weight: normal;
  }
 #kwskbtn{
    max-width: 30%;
 }
 .kwsk1{
  position: absolute;
  left: 175px;
  top: 52px;
  width: 28px; 
  height: 28px; 
 }
 .kwsk2{
  position: absolute;
  left: 175px;
  top: 92px;
  width: 28px; 
  height: 28px; 
 }
 .kwsk3{
  position: absolute;
  left: 175px;
  top: 132px;
  width: 28px; 
  height: 28px;
 }
 #blandbtn{
  position: absolute;
  max-width: 0%;
 }
 .bland1{
  position: absolute;
  left: 90px;
  top: 3px;
  height: 25.5px; 
  width: 110px;
 }
 .bland2{
  position: absolute;
  left: -30px;
  top: 33px;
  height: 25.5px;
 }
 .bland3{
  position: absolute;
  left: 60px;
  top: 33px;
  height: 25.5px;
 }
 .nano{
  position: absolute;
  left: 100px;
  top: -1px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
 }
 .hon{
  position: absolute;
  left: -16px;
  top: 29px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
 }
 .uni {
  position: absolute;
  left: 75px;
  top: 31px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
  writing-mode: horizontal-tb; /* 横書きに固定！ */
  white-space: nowrap; /* 改行を禁止して1行に収める */
}
.keitou1{
  position: absolute;
  left: 80px;
  top: 75px;
  height: 25.5px; 
}
.keitou2{
  position: absolute;
  left: 80px;
  top: 107px;
  height: 25.5px; 
}
.kire{
  position: absolute;
  left:107px;
  top: 73px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
  writing-mode: horizontal-tb; /* 横書きに固定！ */
  white-space: nowrap; /* 改行を禁止して1行に収める */
}
.caj{
  position: absolute;
  left: 107px;
  top: 105px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
  writing-mode: horizontal-tb; /* 横書きに固定！ */
  white-space: nowrap; /* 改行を禁止して1行に収める */
}
.rasen1{
 position: absolute;
 left: -30px;
 top: 82px;
 max-width: 160%;

}
#menue{
  width: 100%;
  max-width: 390px;
}
.menuebtn1{
  position: absolute;
  left: -40px;
  top: 385px;
  max-width: 70%;
}
.menuebtn2{
  position: absolute;
  left: 100px;
  top: 385px;
  max-width: 70%;
}
.menuebtn3{
  
  position: absolute;
  left: 240px;
  top: 385px;
  max-width: 70%;
}
.menue_text_1{
  position: absolute;
  left: 65px;
  top: 455px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
}
.menue_text_2{
  position: absolute;
  left: 210px;
  top: 455px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
}
.menue_text_3{
  position: absolute;
  left: 340px;
  top: 455px;
  font-size: 0.9em;
  font-weight: normal;
  color: #ffffff;
}
.btn2025{
  position: absolute;
  left: 105px;
  top: 430px;
  height: 160px;
}
.btn2024{
  position: absolute;
  left: 185px;
  top: 430px;
  height: 160px;
}
.btn2023{
  position: absolute;
  left: 265px;
  top: 430px;
  height: 160px;
}
.toshi_text_1{
  position: absolute;
  left: 189px;
  top: 494px;
  font-size: 0.8em;
  font-weight: normal;
  color: #ffffff;
}
.toshi_text_2{
  position: absolute;
  left: 269px;
  top: 494px;
  font-size: 0.8em;
  font-weight: normal;
  color: #ffffff;
}
.toshi_text_3{
  position: absolute;
  left: 349px;
  top: 494px;
  font-size: 0.8em;
  font-weight: normal;
  color: #ffffff;
}
#calender{
  position: relative;
}
.october_btn{
  position: absolute;
  margin-left: -220px;
  margin-top: -100px;
  max-width: 70%;
}
.september_btn{
  margin-left: -220px;
  margin-top: 110px;
  max-width: 70%;
}
.page_btn_1{
  position: absolute;
  width: 28px;
  top: 130px;
  left: 108px;
}
.page_btn_2{
  position: absolute;
  width: 28px;
  top: 340px;
  left: 108px;
}
.calender_text_1{
  position: absolute;
  left: 34px;
  top: 25px;
  font-size: 2.6em;
  font-weight: bold;
  color: #3d2303;
}
.calender_text_2{
  position: absolute;
  left: 34px;
  top: 70px;
  font-size: 2.6em;
  font-weight: bold;
  color: #3d2303;
}
.calender_text_3{
  position: absolute;
  left: 34px;
  top: 240px;
  font-size: 2.6em;
  font-weight: bold;
  color: #3d2303;
}
.calender_text_4{
  position: absolute;
  left: 34px;
  top: 285px;
  font-size: 2.6em;
  font-weight: bold;
  color: #3d2303;
}
.page_text_1{
  position: absolute;
  left: 114px;
  top: 127px;
  font-size: 0.8em;
  font-weight: normal;
  color: #3d2303;
}
.page_text_2{
  position: absolute;
  left: 114px;
  top: 337px;
  font-size: 0.8em;
  font-weight: normal;
  color: #3d2303;
}
#photo_area{
  position: relative;
}
.photo_bg{
  position: absolute;
  height: 420px;
  left: 155px;
  margin-top: -455px;
}
.tuika1{
  position: absolute;
  width: 108px;
  left: 170px;
  top: -435px;
}
.tuika2{
  position: absolute;
  width: 108px;
  left: 170px;
  top: -223px;
}
.photo1{
  position: absolute;
  width: 108px;
  left: 285px;
  top: -435px;
}
.photo2{
  position: absolute;
  width: 108px;
  left: 285px;
  top: -223px;
}
.day1{
  position: absolute;
  left: 290px;
  top: -290px;
  font-weight: normal;
  color: #ffffff;
}
.day2{
  position: absolute;
  left: 292px;
  top: -80px;
  font-weight: normal;
  color: #ffffff;
}
.hert1{
  position: absolute;
  width: 30px;
  left: 293px;
  top: -315px;
}
.hert2{
  position: absolute;
  width: 30px;
  left: 293px;
  top: -103px;
}
.wku_1{
  position: absolute;
  left: 284px;
  top: -437px;
  height: 152px;
}
.wku_2{
  position: absolute;
  left: 284px;
  top: -225px;
  height: 150px;
}
#footer{
  position: relative;
  background-color: #ccbfb0;
  display: flex;
}
.footer_bg{
  margin-top: -45px;
  width: 430px;
}
.footer_icon1{
  position: absolute;
  height: 33px;
  top: -20px;
  left: 20px;
}
.footer_icon2{
  position: absolute;
  height: 33px;
  top: -20px;
  left: 150px;
}
.footer_icon3{
  position: absolute;
  height: 33px;
  top: -20px;
  left: 247px;
}
.footer_icon4{
  position: absolute;
  height: 28px;
  top: -18px;
  left: 350px;
}