@charset "UTF-8";
/* CSS Document */
/*--------------------
common
--------------------*/
.inner {
  margin: 0 100px;
}
.section-title {
  font-size: 7.2rem;
  font-weight: 400;
  margin-bottom: 100px;
}
/*--------------------
section-profile
--------------------*/
.section-profile.inner {
  margin-bottom: 150px;
}
.section-profile__wrapper {
  display: flex;
  align-items: center;
}
.section-profile__visual {
  min-width: 300px;
  width: 30%;
  margin-right: 100px;
}
.section-profile__text-name {
  display: flex;
  align-items: center;
  margin-bottom: 35px;
}
.section-profile__text-name h1 {
  font-size: 3.2rem;
  font-weight: 400;
  margin-right: 20px;
}
.section-profile__text-name span {
  font-size: 1.4rem;
  color: #555;
}
.section-profile__text p {
  margin-bottom: 35px;
  line-height: 1.8;
  letter-spacing: 0.2em;
}
.section-profile__text p:last-child {
  margin-bottom: 0;
}
/*--------------------
section-career
--------------------*/
.section-career.inner {
  margin-bottom: 150px;
}
/*タイムライン全体の設定*/
.timeline{
	width: 90%;
	margin: 0 auto;
}
.timeline li{
/*線の起点とするためrelativeを設定*/
  position: relative;
	list-style: none;
	padding-bottom: 100px;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline li .year {
  position: absolute;
  left: 20px;
  font-size: 3.2rem;
  font-weight: bold;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
.timeline li p {
  margin: 0 0 30px 130px;
  line-height: 1.8;
}
.timeline li p:last-of-type {
  margin: 0 0 0 130px;
}
/*絶対配置で線を設定*/
.border-line {
  /*線の位置*/
	position: absolute;
	left:0.2em;
	top:0;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #ccc;
}
.border-line.last{
  opacity: 0;
}
/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: #000;
	border-radius: 50%;
}
/*--------------------
section-skill
--------------------*/
.section-skill.inner {
  margin-bottom: 150px;
}
.skill-bar-box {
  width: 90%;
  margin: 0 auto;
}
/* スキル全体を囲うdiv */
.skill {
  margin-bottom: 30px;
}
.skill:last-child {
  margin-bottom: 0;
}
/* スキルの情報 */
.skill-info {
  display: flex;
  justify-content: space-between;
  font-size: 2.0rem;
  margin-bottom: 15px;
}
/* スキルの熟練度（パーセンテージ） */
.skill-percentage {
  opacity: 0; /* 初期状態では透明に */
  transition: opacity 0.6s;
}
/* スキルバーの親要素 */
.skill-bar-container {
  position: relative;
  width: 100%;
  height: 10px; /* スキルバーの高さ */
  background-color: #C0C0C0; /* スキルバーの背景色 */
  overflow: hidden;
}
/* スキルバー本体 */
.skill-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0; /* 初期状態では0 */
  background-color: #000; /* スキルバーの色 */
  transition: width 5s cubic-bezier(0.22, 1, 0.36, 1); /* スキルバーが伸びる速度を調整 */
}
@media screen and (max-width:1025px){
/*--------------------
section-profile
--------------------*/
  .section-profile__wrapper {
    flex-direction: column;
  }
  .section-profile__visual {
    margin-right: 0;
    margin-bottom: 50px;
  }
/*--------------------
section-career
--------------------*/
  .timeline li {
    padding-bottom: 80px;
  }
  .timeline li p {
    margin: 0 0 40px 100px;
  }
  .timeline li p:last-of-type {
  margin: 0 0 40px 100px;
  }
}

@media screen and (max-width:768px){
/*--------------------
common
--------------------*/
  .inner {
    margin: 0 30px;
  }
  .section-title {
    font-size: 5.6rem;
  }
/*--------------------
section-career
--------------------*/
  .timeline li .year {
    font-size: 3.0rem;
  }
  .timeline li p {
    margin: 0 0 40px 80px;
  }
  .timeline li p:last-of-type {
    margin: 0 0 40px 80px;
  }
}

@media screen and (max-width:400px){
/*--------------------
common
--------------------*/
  .inner {
    margin: 0 15px;
  }
  .section-title {
    font-size: 4.0rem;
    margin-bottom: 60px;
  }
/*--------------------
section-profile
--------------------*/
  .section-profile__text-name {
    flex-direction: column;
    align-items: baseline;
  }
  .section-profile__text-name h1 {
    margin-bottom: 15px;
  }
  .footer-inner2 p {
    font-size: 1.0rem;
  }
}