@charset "utf-8";
/* ←これは文字コード */


/*基本設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 画面に隙間ができないようにするおまじない----------------- */
html,
body {
   margin: 0px;
   padding: 0px;
}

/* サイト全体に係わる設定----------------- */
body {
   font-family: "Noto SeP", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   /* フォントの指定 */
   font-size: 1em;
   /* フォントサイズの指定 */
   line-height: 1.8em;
   /* 行間の指定 */
   background-color: #000000;
   /* 背景色の指定 */
   
   /* 外側背景に表示させている画像 */

}

a {
   text-decoration: none;
   /* リンクの文字に下線を表示させない */
   color: #ffffff;
   /* リンクの文字には白色 */
}



/*コンテンツ内の細々した設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 中央のコンテンツ表示部分の設定 ----------------------------*/
#container {
   background-color: #EDE9E5;
   /* 背景色 */
   margin: 0 auto;
   /* 上下の空きなし、左右中央に表示せよ */
   width: 100%;
   /* 横幅は画面いっぱいまで広げてくれ */
   max-width: 390px;
   /* ただし、横幅の最大は430ピクセルな */
   max-height: 844px;
   background-repeat: no-repeat;
   /* 背景画像は1回だけ表示 */
   background-image: url(group\ 48.png);
   background-repeat: no-repeat;
   /* 背景画像は1回だけ表示 */
}

/* 画面上部のキービジュアル部分------------------------- */
#keyvisual {
   width: 100%;
   /* 横幅は左右いっぱい */
   height: 100vh;
   /* 縦幅はデバイスにあわせて縦いっぱい */
   max-width: 390px;
   max-height: 844px;
   background-image: url(group\ 44.png);
   /* 画面上部に表示させている画像 */
   background-repeat: no-repeat;
   /* 背景画像は1回だけ表示 */
   background-size: cover;
   /* 縦横比キープしていっぱいに表示ね */
   background-position: top;
   /* 画像は中心から表示してね */
}

img {
   display: block;
}

.back {
   padding-top: 16px;
   margin-left: 16px;
}

.menu {
   margin-top: -32px;
   margin-left: 352px;
}

.plofile {
   margin-top: -10px;
   margin-left: 96px;
}

.plofilefollower_txt {
   font-size: 1.0em;
   color: #7F4324;
   /* 文字の太さ */
   margin-top: -35px;
   margin-left: 21px;
}

.plofilefollow_txt {
   font-size: 1.0em;
   color: #7F4324;
   margin-top: -39px;
   margin-left: 77px
}

.plofilefollower2_txt {
   font-size: 0.5em;
   color: #B7714D;
   /* 文字の太さ */
   margin-top: -28px;
   margin-left: 21px;
}

.plofilefollow2_txt {
   font-size: 0.5em;
   color: #B7714D;
   margin-top: -37px;
   margin-left: 77px
}

.rist {
   margin-top: -58px;
   margin-left: 278px;
}

.mail {
   margin-top: -39px;
   margin-left: 330px;
}

.name_txt {
   font-size: 2.0em;
   color: #7F4324;
   margin-top: 10px;
   text-align: center
}

.plofile_txt {
   font-size: 0.9em;
   color: #B7714D;
   margin-top: -44px;
   text-align: center
}

.follow {
   position: relative;
   margin-top: -22px;
   margin-left: 130px;
   width: 130px;
   height: 40px;
}

.label1 {
   position: absolute;
   bottom: -8px;
   right: 23px;
   font-size: 0.9rem;
   font-weight: bolder;
   color: #FFF4E3;
}

.photo1 {
   position: relative;
   margin-top: 12px;
   margin-left: 20px;
   width: 170px;
   height: 170px;
}



.comment {
   position: absolute;
   bottom: -10px;
   right: -10px;
}

.label {
   position: absolute;
   bottom: -16px;
   right: 7px;
   font-size: 0.8rem;
   color: #591F12;
}

.photo2 {
   position: relative;
   margin-top: -171px;
   margin-left: 201px;
   width: 170px;
   height: 170px;
}

.photo3 {
   position: relative;
   margin-top: 3px;
   margin-left: 20px;
   width: 170px;
   height: 170px;
}

.photo4 {
   position: relative; 
   margin-top: -171px;
   margin-left: 201px;
   width: 170px;
   height: 170px;
}





.photo5 {
   margin-top: 3px;
   margin-left: 28px;
}

.photo6 {
   margin-top: -56px;
   margin-left: 204px;
}

.hr1 {
   margin-top: -8px;
   margin-left: 0;
}

.icon1 {
   margin-top: -38px;
   margin-left: 26px;
}

.icon2 {
   margin-top: -32px;
   margin-left: 102px;
}

.icon3 {
   margin-top: -35px;
   margin-left: 177px;
}

.icon4 {
   margin-top: -32px;
   margin-left: 256px;
}

.icon5 {
   margin-top: -34px;
   margin-left: 331px;
}

/* 画面上部のキービジュアル内に表示されてるテキスト------------------------- */
#top_txtarea {
   position: absolute;
   /* この要素は絶対位置で配置 */
   top: 70%;
   /* このエリアの上から70％の位置に配置な！ */
   text-align: left;
}

.top_txt {
   padding: 3px 10px 5px 10px;
   /* このエリア内に上3px、右10px、下5px、左10pxの隙間もたせて */
   font-weight: lighter;
   /* フォントは細くしてね */
   letter-spacing: 0.1em;
   /* 字間をすこーし空けてください */
   background-color: #000000;
   /* paddingで空けた部分も含めた背景色は黒ね */
   color: #ffffff;
   /* 文字は白でよろしく */
}

.top_title {
   font-size: 1.1em;
   /* フォントサイズ指定 */
}

.top_name {
   font-size: 0.8em;
}

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




/* 名前表記のテキスト------------------------- */
#profile_name {
   margin: 0 auto;
   /* 上限は隙間なく、左右は中央に配置 */
   margin-bottom: 5px;
   /* このブロックは下に5ピクセル空ける */
   font-size: 1.5em;
   /* 文字サイズ */
   font-weight: normal;
   /* 文字の太さ */
   letter-spacing: 0.2em;
   /* 字間すこーし空ける */
}

/* 名前英語表記のテキスト------------------------- */
#profile_name_en {
   margin: 0 auto;
   margin-bottom: 20px;
   font-size: 0.7em;
   font-weight: normal;
   font-family: "Cinzel", serif;
}

/* 本文テキスト------------------------- */
#maintxt {
   width: 80%;
   margin: 0 auto;
   text-align: left;
   margin-bottom: 60px;
}

/* Backボタン------------------------- */
.button {
   background: #1d1e2e;
   border-radius: 9999px;
   /* 長円形にするおまじない */
   margin: 0 auto;
   width: 150px;
   padding: 3px 10px;
   /* このエリア内に上下3px、左右10pxの隙間もたせて */
   margin-bottom: 60px;
   border: solid 3px #676a8a;
   /* まわりにうっすら縁をつけよう */
}



/*ヘッダー----------------------------------------------------*/



.head_title {
   margin: 0 10px;
}

/*フッター----------------------------------------------------*/



.copyright {
   margin: 0;
   padding: 5px 5px 15px 20px;
   background-color: #000000;
   font-family: "Cinzel", serif;
   font-size: 0.7em;
   color: #ffffff;
}