@charset "UTF-8";

/*背景色*/
/*サイドバー*/
.dark-background {
	background-color: #d46868;
}
/*中央*/
.light-background{
	background-color: #fbf4ea;
}





/*文字関係*/
.circle{
	background: #d46868;
	border-radius: 90%;
	width: 100px;
	height: 80px;
	color: #ffffff;
	text-align: center;
	line-height: 80px;
}

.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
	color:#444444;
}

.kosugi-maru-regular {
  font-family: "Kosugi Maru", serif;
  font-weight: 400;
  font-style: normal;
}

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
color:#FF5555;
}


.oleo-script-regular {
  font-family: "Oleo Script", system-ui;
  font-weight: 400;
  font-style: normal;
}




/*空間*/

.mt_20{
	margin-top:20px;
}

.mt_30{
	margin-top: 30px;
}
.mt_40{
	margin-top: 40px;
}


.mb_20{
	margin-bottom: 20px;
}
.mb_30{
	margin-bottom: 30px;
}
.ml_10{
	margin-left: 10px;
}
.ml_50{
	margin-left: 50px;
}
.ma_20{
	margin: 20px;
}
.ma_70{
	margin: 70px;
}
.mtb_30{
	margin-top: 30px;
	margin-bottom: 30px;
}


/*skills*/
.img{
		max-width: 100%;
		height: auto; 
	}


a:hover img{
	opacity: 0.7;
	
}



/* ---------- Top全体位置（縦:65% / 左寄せ） ---------- */
.hero-text {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  width: 100%;
  color: #fff;
  text-align: left;
  padding-left: 8%;
}

/* ---------- 個別行（位置揃え） ---------- */
.line,
.all-show {
  position: absolute;
  left: 0;              /* hero-text の padding-left が効く */
  top: 52%;               /* hero-text の中心位置に対して 0 でOK */
  width: 100%;
  opacity: 0;
  text-align: left;
}

/* ---------- 表示→消える（ゆっくり） ---------- */
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(8px); }
  25%  { opacity: 1; transform: translateY(0); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-5px); }
}

/* ---------- 最後のフェードイン ---------- */
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- 英文 ---------- */
.line1 {
  animation: fadeInOut 4s ease forwards;
  animation-delay: 0.5s;
  font-size: 22px;
  font-weight: 300;          /* ← px なし！ */
  color: #f3e5c7;
  font-family: "Lobster", sans-serif;
}

/* ---------- 日本語 ---------- */
.line2 {
  animation: fadeInOut 4s ease forwards;
  animation-delay: 5s;
  font-size: 18px !important;
  font-weight: 00;
  color: #f3e5c7;
  font-family: "Kosugi Maru", serif;
}

/* ---------- 名前（表示→消える） ---------- */
.line3 {
  animation: fadeInOut 4s ease forwards;
  animation-delay: 9.5s;
  font-size: 22px;
  font-weight: 300;
  color: #F73939;
  letter-spacing: 2px;
	font-family: 'Great Vibes',cursive;
}

/* ---------- 最後に全文を表示 ---------- */
.all-show {
  animation: fadeIn 3s ease forwards;
  animation-delay: 14s;
}

.all-show h1 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 5px;
  color: #f3e5c7;
  font-family: "Lobster", sans-serif;
}

.all-show p {
  font-size: 18px;
  font-weight: 00;
  margin-bottom: 5px;
  color: #f3e5c7;
  font-family: "Kosugi Maru", serif;
}

.all-show .name {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #F73939;
  font-family: 'Great Vibes',cursive;
}



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

  .hero-text {
    top: 25%;       /* ← 画面高さの25%（安全ゾーン） */
    transform: translateY(0);  /* 中央基準ではなく固定位置にする */
    padding-left: 6%;
  }

  .line,
  .all-show {
    top: 0;         /* ← hero-text の上端から表示する */
    transform: translateY(0);
  }

  /* 行ごとに余白で調整（画像に依存しない） */
  .line1 { 
    margin-top: 0;
    font-size: 17px;
  }

  .line2 { 
    margin-top: 28px;
    font-size: 14px;
  }

  .line3 { 
    margin-top: 56px;
    font-size: 16px;
  }

  /* 最終表示 */
  .all-show h1 { font-size: 19px; }
  .all-show p { font-size: 15px; margin-top: 6px; }
  .all-show .name { font-size: 17px; margin-top: 10px; }
}



/*About*/
.about-text {
  max-width: 650px;
  line-height: 1.4;
  font-size: 16px;
  margin: 0 0 15px !important;
}

.about-wrapper {
  max-width: 700px;
  margin: 0 auto;   /* ←これで文章だけ中央にくる */
  text-align: left; /* ←文章は今の左揃えのまま */
}

.bi_right{
	color:#d46868 !important;
}

.non_name{
	font-family: 'Great Vibes',cursive;
	font-size: 40px !important;
	color: #c85070;
	letter-spacing: 1px;
	margin-bottom: 20px;
	margin-top: -5px;
	margin-left: 10px;
}



/*=============Strength==================*/

.strength-title {
  font-size: 29px;
  font-weight: 700;
  color: #fbf4ea; /* 塗りなし（透明） */

  /* ふわっと赤い縁取り */
  text-shadow:
    0 0 2px #d46868,
    0 0 4px #d46868,
    0 0 8px rgba(212, 104, 104, 0.7),
    0 0 12px rgba(212, 104, 104, 0.5);

  font-family: "Kosugi Maru", sans-serif;
  margin-bottom: 16px;
}