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


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

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

/* サイト全体に係わる設定----------------- */
body {
    font-family: "Noto Serif JP", serif; /* フォントの指定 */
    font-size: 1em; /* フォントサイズの指定 */
    line-height:1.8em; /* 行間の指定 */
    background-color: #1d1e2e; /* 背景色の指定 */
    background-image: url(../back.png); /* 外側背景に表示させている画像 */
}

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



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

/* 中央のコンテンツ表示部分の設定 ----------------------------*/
#container{ 
    background-color: #EDE9E5; /* 背景色 */
    margin: 0 auto; /* 上下の空きなし、左右中央に表示せよ */
    width: 100%; /* 横幅は画面いっぱいまで広げてくれ */
    max-width :430px; /* ただし、横幅の最大は430ピクセルな */
    text-align: center; /* この中にあるものは中央揃えで配置してくれ */
    background-image: url(../back2.png); /* 背景に表示させている画像 */
}
/* 画面上部のキービジュアル部分------------------------- */
#keyvisual{ 
    width: 100%; /* 横幅は左右いっぱい */
    height: 100vh; /* 縦幅はデバイスにあわせて縦いっぱい */
    background-image: url(sugai_top.jpg); /* 画面上部に表示させている画像 */
    background-repeat: no-repeat; /* 背景画像は1回だけ表示 */
    background-size:cover; /* 縦横比キープしていっぱいに表示ね */
    background-position: center; /* 画像は中心から表示してね */
}

/* 画面上部のキービジュアル内に表示されてるテキスト------------------------- */
#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ピクセルにしてね（上のエリアに食い込む） */
}

.photo_radius{
    width: 260px; /* 横20ピクセル */
    height: 260px; /* 縦260ピクセル */
    border-radius: 50%; /* 角をまーるくして */
    object-fit: cover; /* 縦横比キープしていっぱいに表示 */
    border: solid 7px #EDE9E5; /* まわりに7ピクセルの縁をつけてね */
}

/* 名前表記のテキスト------------------------- */
#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; /* まわりにうっすら縁をつけよう */
}



/*ヘッダー----------------------------------------------------*/
header{
    margin: 0;
    padding: 10px 0 10px 20px;
    background-color: #000000;
    font-family: "Cinzel", serif;
    font-size: 0.7em;
    line-height:1em;
    color: #ffffff;
    text-align:left;
}
.header{
    display: flex; /* Flexbox を使うよ！ */
    align-items: center; /* 縦中央に並べよう */
    color: #ffffff;
}
.head_title{
    margin: 0 10px;
}

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

.hr1 {
    border: none;
    border-top: 2px solid #000000;
    margin-bottom: 2px;
}

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