/* gnavふんわり表示 */
.gnav {
  opacity: 0;     /* 最初は非表示 */
  pointer-events: none;   /* クリックできないように */

  transition: opacity 0.8s ease, transform 0.6s ease;

  padding: 20px 10px;
  border-radius: 20px;
}
.gnav.show {
  opacity: 1;
  pointer-events: auto;
}
.gnav a {
  opacity: 0.5;
  color: #0D2249;
  transition: opacity 0.4s ease, transform 0.3s ease;
}
.gnav a:hover {
  opacity: 0.8;
}

/* 背景色 */
body{
  background-color: #CFCED1;
}
/* 名前 */
.profile{
  padding: 40px 0;
  padding-left: 80px;
}
.profile-header{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.about-icon{
  width: 90px;
  height: auto;
}
.about-plane{
  width: 350px;
  height: auto;
  margin-left: 90px;
  margin-bottom: -70px;
}
.profile-header h1{
  font-size: 2.5rem;
  position: relative;
  width: 300px;
}
.profile-header h1::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 490px;
  height: 2px;
  background: #4F4B4B;
  opacity: 0.8;
}
.profile-header h2{
  margin-top: 40px;
}

/* 顔写真＋メアド他 */
.profile-body{
  display: flex;
}
.profile-body img{
  width: 260px;
  height: auto;
  margin: 100px;
  border-radius: 40px;
}
/* address{
  margin-top: 160px;
  font-size: 2em;
  margin-left: 100px;
    letter-spacing: 0.05em;

  width: 0;
  overflow: hidden;
  white-space: nowrap;  /* 改行しない
  animation: typing 2.5s steps(27, end) forwards;
  animation-delay: 0.8s;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
} */
.profile-text{
  margin-top: 60px;
}
.intro-title{
  margin-top: 160px;
  font-size: 0.8rem;
  margin-left: 30px;
}
.intro-text{
  margin-top: 10px;
  max-width: 500px;
  margin-left: 20px;
  letter-spacing: 0.05em;
}
.love-box{
  background: #ededed;
  border-radius: 30px;
  padding: 20px 60px;
  margin-top: 20px;
}
.love-title{
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 1.3em;
}
.love-list{
  line-height: 1.6;
  font-size: 1.1em;
}

/* text */
.text{
  max-width: 900px;
  margin: 0 auto;
}
.text-title{
  display: flex;
  align-items: baseline;
  gap: 20px;

  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;    /* 表示させるのにかかる時間 */
}
.text-title.is-visible{
  opacity: 1;
}
.fade-text{
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  letter-spacing: 0.05em;
}

.fade-text.show{
  opacity: 1;
  transform: translateX(0);
}

.text-title h3,.sub-title,.intro-text h3{
  font-size: 0.8em;
  color: #6d6d82;
}
.text-content p{
  margin-top: 20px;
}
.intro-text{
  padding-top: 0;
}

/* skills */
.skills-title{
  font-size: 1.3em;
}
.skill-tags{
  display: flex;
  gap: 12px;
  padding: 0;
  margin-top: 10px;
  font-size: 0.8em;
}

.skill-tags li{
  background: #a9a9a9;
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 0.9em;
}
.skills-text{
  margin-bottom: 35px;
}



/* 大切にしてること */
.value-item{
  display: flex;
  gap: 35px;
  margin-bottom: 20px;
}

.value-item dt{
  font-weight: bold;
  min-width: 120px;
}

.value-item dd{
  margin: 0;
}


/* footer */
footer{
  position: relative;
  text-align: center;
  margin-top: 60px;
}
.footer{
  position: relative;
}
.footer a{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
}

.footer a:hover{
  color: #6b6f9e;
  transition: color 0.3s ease;
}

footer img{
  width: 170px;
  margin-left: 60%;
}


@media screen and (max-width:768px){

body{
  font-size: 14px;
}
main{
  padding: 0 16px; /* 左右余白 */
}

/* profile */
.profile{
  padding: 50px 16px; /* PCの80pxをSP用に縮小 */
}
.profile-header{
  flex-direction: column; /* 横並び → 縦 */
  align-items: center;   /* 中央寄せ */
  position: relative;
}
.profile-header h1{
  width: auto;        /* 固定幅解除 */
  font-size: 1.6rem; /* 名前をSPサイズに */
}
.profile-header h1::after{
  width: 250px;                 /* 下線短く */
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
}

/* 飛行機はSPでは消す */
.about-plane{
  display: none;
}

/* icon */
.about-icon{
  width: 50px;
  position: absolute;
  left: 8px;
  bottom: 28px;
}

/* 顔写真＋テキスト */
.profile-body{
  flex-direction: column; /* 横 → 縦 */
  align-items: center;
}
.profile-body img{
  width: 50%;        /* 写真を画面に収める */
  margin: 25px 0;   /* PCの100px margin解除 */
}
address{
  margin: 0;               /* PCの大きい余白削除 */
  font-size: 1.2rem;        /* メール文字サイズ調整 */
  text-align: center;
}
.love-box{
  padding: 20px 40px; /* Loveボックスをコンパクトに */
}
.love-title{
  font-size: 1rem;   /* Love♡ 少し小さく */
}
.love-list{
  font-size: 0.8rem;  /* 中の文章も縮小 */
  line-height: 1.5;
}

/* textエリア */
.text{
  margin: 0 auto;
}
.text-title{
  flex-direction: column; /* 英語＋日本語 縦並び */
  gap: 4px;
}
.text-title h2{
  font-size: 1.4rem; /* セクションタイトル */
}
.text-title h3{
  font-size: 0.75rem; /* サブタイトル */
}
.text-content p{
  font-size: 0.7rem; /* 本文サイズ */
  line-height: 1.7; /* 読みやすく */
}

/* skills */
.skills-item .skills-title{
  font-size: 1.2rem; /* skills見出し小さく */
  margin-bottom: -15px; /* サブタイトルと詰める */
  line-height: 1;
}
.skills-item .sub-title{
  font-size: 0.65rem;
  opacity: 0.8;
  line-height: 1;
}
.skill-tags{
  flex-wrap: wrap;      /* タグ折り返し */
}
.skill-tags li{
  font-size: 0.75rem;  /* タグ文字サイズ */
  padding: 4px 12px;
}
.skills-text{
  font-size: 0.7rem;
  line-height: 1.7;
}

/* 大切にしていること */
.value-item{
  flex-direction: column; /* 横並び → 縦 */
  gap: 8px;
}
.value-item dd{
  font-size: 0.7rem;
  line-height: 1.7;
}

/* footer */
footer img{
  margin-right: 40px;
  width: 100px;
}
.footer a{
  top: 25px;
  margin-top: 0;
}

}