@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: #87673f; /* 背景色 */
  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(ramen.jpg); /* 画面上部に表示させている画像 */
  filter: brightness(90%);
  background-repeat: no-repeat; /* 背景画像は1回だけ表示 */
  background-size: cover; /* 縦横比キープしていっぱいに表示ね */
  background-position: center; /* 画像は中心から表示してね */
}

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

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

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

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

.photo_radius {
  width: 260px; /* 横20ピクセル */
  height: 260px; /* 縦260ピクセル */
  border-radius: 50%; /* 角をまーるくして */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
  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; /* 字間すこーし空ける */
  color: #ffffff;
}

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

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

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

/*ヘッダー----------------------------------------------------*/
header {
  margin: 0;
  padding: 10px 0 10px 20px;
  background-color: #000000;
  font-family: 'Cinzel', serif;
  font-size: 0.7em;
  line-height: 1.5em;
  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;
}