@charset "utf-8";

html, body {
    margin: 0px;
    padding: 0px;
   }

   /* サイト全体に係わる設定----------------- */
body {
    font-family: "Noto Serif JP", serif; /* フォントの指定 */
    font-size: 1em; /* フォントサイズの指定 */
    background-color: #39271E; /* 背景色の指定 */
    color: #ffffff;
}


/* キービジュアル設定 */
#container{
    position: fixed;
    top: 0;
    z-index: 0;
    height: 105vh;
    margin: 0 auto; /* 上下の空きなし、左右中央に表示せよ */
    width: 100%; /* 横幅は画面いっぱいまで広げてくれ */
    background-size: contain;
    text-align: center; /* この中にあるものは中央揃えで配置してくれ */
    background-image: url(aakari_top.png);
    background-repeat: no-repeat;
    background-position: top center;
    
    }

/* サイト全体に係わる設定----------------- */


   
 #keyvisual{ 
    z-index: -1;
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
    
   
    
} 

#profile_under_photo{
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
    

}

/* プロフィール写真------------------------- */
#profile_photo{
    margin-top: -30px; /* 上の隙間を-20ピクセルにしてね（上のエリアに食い込む） */
    margin-top: 250px;

}

.photo_radius{
    margin-top: 158px;
    position: absolute;
    left: 146px;
    top: 100px;
    z-index: -1;
    width: 80x; /* 横20ピクセル */
    height: 80px; /* 縦260ピクセル */
    border-radius: 50%; /* 角をまーるくして */
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
    border: solid 7px #000000; /* まわりに7ピクセルの縁をつけてね */
} 

.photo_under_radius{
    position: absolute;
    z-index: -2;
    width: 400px; /* 横20ピクセル */
    height: 850px; /* 縦260ピクセル */
    border-radius: 50%; /* 角をまーるくして */
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
} 

#profile_name{
    margin-top: 90px; /* 上限は隙間なく、左右は中央に配置 */
    margin-bottom: 5px; /* このブロックは下に5ピクセル空ける */
    font-size: 2em; /* 文字サイズ */
    font-weight: normal; /* 文字の太さ */
    font-family: "Kaisei Decol", serif;
}



#profile_name_en{
    margin-top: 0px;
    font-size: 1.1em;
    font-weight: normal;
    font-family: "Gothic A1", sans-serif;
}

#btn_area_comment{
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.phototo_radius{
    margin-top: -90px;
    position: absolute;
    z-index: -2;
    width: 400px; /* 横20ピクセル */
    height: 850px; /* 縦260ピクセル */
    
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
}

#btn_area_sousyoku{
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pho_radius{
    margin-top: -420px;
    position: absolute;
    z-index: -2;
    width: 400px; /* 横20ピクセル */
    height: 850px; /* 縦260ピクセル */
    
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
}

#fworower{
    margin-top: 8px; /* 上限は隙間なく、左右は中央に配置 */
    margin-bottom: 2px; /* このブロックは下に5ピクセル空ける */
    font-size: 1.4em; /* 文字サイズ */
    font-weight: normal; /* 文字の太さ */
    word-spacing: 55px;
    text-indent: -10px;
    font-family: "Gothic A1", sans-serif;
}

#fworower_name{
    margin-top: 0px; /* 上限は隙間なく、左右は中央に配置 */
    margin-bottom: 2px; /* このブロックは下に5ピクセル空ける */
    font-size: 0.8em; /* 文字サイズ */
    font-weight: normal; /* 文字の太さ */
    word-spacing: 40px;
    font-family: sans-serif;
    text-indent: 10px;
}


.example2{
    display: flex;
    margin-top: 16px;
}
.example2 label{
    
    font-size: 1.4em;
    display: block;
    width: 80px;
    height: 80px; /* 縦260ピクセル */
    background: #39271E;
    color:#ffffff;
    padding-top: 24px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    cursor: pointer;
    font-family: "Kaisei Decol", serif;
    
}
.example2 input:checked+label{
    background: #e1d657;
    color:#39271E;
}
.example2 input{
    display: none;
}


.box {
  margin-top   : 100px;
  position     : relative;
  margin-left  : 0px;
  width        : 290px;
  height       : 100px;
  border-radius: 20px;
  background   : rgba(153, 153, 153, 0.79);
  box-shadow   : 0 120px rgba(153, 153, 153, 0.79),
                0 240px rgba(153, 153, 153, 0.79),
                0 360px rgba(153, 153, 153, 0.79);
  z-index: -2;
}


#name{
    font-size: 1.0em; /* 文字サイズ */
    font-weight: normal;
    font-family: "Gothic A1", sans-serif;
    margin-left  : -160px;
    margin-top   : -140px;
    line-height: 120px;
    z-index: -2;
    
}

#comment{
    font-size: 1.0em; /* 文字サイズ */
    font-weight: normal;
    font-family: "Gothic A1", sans-serif;
    margin-left  : -40px;
    margin-top   : -450px;
    line-height: 120px;
    z-index: -2;

}

#aaaa{
    font-size: 0.8em; /* 文字サイズ */
    font-weight: normal;
    font-family: "Gothic A1", sans-serif;
    margin-left  : 24px;
    margin-top   : -490px;
    line-height: 120px;
    color:rgba(255, 255, 255, 0.7);
    z-index: -2;

}


#btn_hedder{
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.photto_radius{
    margin-top: -46px;
    position: fixed;
    top: 0;
    z-index: -1;
    width: 400px; /* 横20ピクセル */
    height: 900px; /* 縦260ピクセル */
    
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
}

#btn_yajirusi{
    width: 100%; /* 横幅は左右いっぱい */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.phota_radius{
    position: fixed;
    top: 0;
    z-index: 0;
    height: 100vh;
    margin-left  : -195px;
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
}