/*-------------------------------------------
	共通部分
  -------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Hannotate TC',sans-serif;
}

li {
  list-style: none;
  font-family: 'Hannotate TC',sans-serif;
}

a {
  text-decoration: none;
  color: #000000;
  font-family: 'Hannotate TC',sans-serif;
}

/*-------------------------------------------
  ページ全体
  -------------------------------------------*/
.page-wrapper {
  width: 100%;
  padding: 90px 0 40px;
  margin: 0 auto;
  background-color: #FFF0F5;
}

/*-------------------------------------------
  メインコンテンツ
  -------------------------------------------*/
.main-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
/*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
  background-color: #ffc3c3;
  padding: 0 40px;
  position: fixed; /* 画面に固定 */
  top: 0;          /* 画面の一番上から */
  left: 0;         /* 画面の一番左から */
  z-index: 1000; 
  opacity:0.8;  
}

.header-logo {
  height: 24px;
}
.header ul {
  display: flex;
  gap: 24px;
}
.header li a {
  color: #804600; 
}

.header li a:hover {
  opacity: 0.7;
  color: #00463c;
}
.container {
  max-width: 1200px; /* 例: コンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
  padding: 0 15px; /* 左右のパディング */
}
.title {
  color: #5c3104;/*文字色*/
  text-align: left;
}

/*-------------------------------------------
  セクション 共通部分
  -------------------------------------------*/
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.section-title {
  color: #e0a265;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #e0a265;
  font-size: 2.0em;
}

/* -------------------------------------------
  プロフィール
  -------------------------------------------*/
 .profile {
  display: flex;
  align-items: center;
  gap: 40px;
}
 .profile-image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
 }

 .profile-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
 }
 .profile h3 {
  color: #804600;
  text-align: center;
  border-bottom: dashed 2px #e0a265;
  font-size: 1.5em;
  display: inline-block;
 }
/* -------------------------------------------
  趣味
  -------------------------------------------*/
.interests {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px 16px;
}

.interest {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.2em 0.5em;
  margin: 2em 1em;
  color: #565656;
  background: #ffeaea;
  box-shadow: 0px 0px 0px 10px #ffeaea;
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
}
.interest h3 {
  color: #804600;
  font-size: 1.5em;
  text-align: center;
  border-bottom: dashed 2px #e0a265;
  display: inline-block;
}

.interest-image {
  width: 60%;
  height: 200px;
  object-fit: cover;
  display: block; 
  margin: 0 auto; 
}
/*-------------------------------------------
  フッター
  -------------------------------------------*/
  .footer {
    font-size: small;
    padding: 40px 0;
    text-align: center;
  }