/* 1. 全体的なフォントと余白の設定 */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  background-color: #f8f9fa; /* 薄いグレーの背景で今風に */
}

/* 2. ヘッダーのレイアウト（ロゴとナビを左右に分ける） */
header.nav-container {
  display: flex;
  justify-content: space-between; /* タイトルは左、メニューは右に */
  align-items: center;           /* 縦方向の真ん中を揃える */
  padding: 15px 5%;              /* 左右に5%の余裕を持たせる */
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 控えめな影 */
}

h1 {
  font-size: 1.5rem;
  margin: 0;
  color: #87a38d; /* ロゴっぽく色をつける */
}

/* 3. ナビゲーション（リンク）の横並び */
ul.nav-container {
  display: flex;        /* リンクを横並びにする */
  list-style: none;     /* 「・」を消す */
  margin: 0;
  padding: 0;
  gap: 25px;            /* リンク同士の間隔 */
}

ul.nav-container a {
  text-decoration: none; /* 下線を消す */
  color: #555;
  font-weight: 500;
  transition: 0.3s;      /* 変化を滑らかに */
}

ul.nav-container a:hover {
  color: #87a38d;        /* マウスを乗せた時の色 */
}

/* 4. 中央揃えの見出し */
.text-center {
  text-align: center;
  margin-top: 50px;      /* 上に少しスペースを空ける */
  font-size: 2rem;
  color: #222;
}

.text-left {
  text-align: left;
  margin: 20px 10%;
  font-size: 1.5rem;
  color: #222;
  display: block;               /* 念のためブロック要素であることを確定 */
  border-bottom: 4px solid #1b4332; /* 太さ4px、一本線、青色 */
  width: 115px;                 /* 線の長さ */
  padding-bottom: 10px;
}
/* Aboutセクション全体 */
.about-section {
    max-width: 800px;
    margin: 80px auto; /* ページの中央に配置（コンテンツ自体は左寄せ） */
    padding: 0 40px;
    text-align: left;  /* 全体を左寄せに */
}

/* 左寄せのタイトルとアクセントの線 */
.about-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

/* タイトルの下の短い線 */
.about-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background-color: #1b4332; /* 青色のアクセント */
    margin-top: 10px;
    border-radius: 10px;
}

/* 紹介文のスタイル */
.intro-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
}

/* 詳細リストの装飾 */
.profile-details {
    border-top: 2px solid #eee;
    padding-top: 20px;
}

.detail-item {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.label {
    font-weight: bold;
    font-size: 1.18rem;
    color: #1b4332;
    width: 100px; /* ラベルの幅を揃える */
    
}

.value {
    color: #555;
    font-size: 1.18rem;
    }

    /* Softwareセクション全体 */
.software-section {
    max-width: 800px;
    margin: 80px auto;
    padding: 0 40px;
}

/* タイトルと線（他と共通のデザイン） */
.software-title {
    font-size: 2.2rem;
    color: #222;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 40px;
}

.software-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background-color: #004d40; /* かっこいい緑 */
    margin-top: 10px;
    border-radius: 10px;
}

/* ソフトウェアごとの箱 */
.software-item {
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 3px solid #eee; /* 左側に薄い線を入れて区切りを出す */
    transition: border-left 0.3s;
}

/* マウスを乗せると左の線が緑になる演出 */
.software-item:hover {
    border-left: 3px solid #004d40;
}

/* ソフトウェアの名前 */
.software-name {
    font-size: 1.4rem;
    color: #004d40; /* 名前を緑にする */
    margin: 0 0 10px 0;
}

/* ソフトウェアの説明文 */
.software-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* プロジェクトへのリンク */
.software-link {
    font-size: 0.9rem;
    color: #004d40;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.software-link:hover {
    border-bottom: 1px solid #004d40;
}

/* デバイスセクション全体 */
.device-section {
    max-width: 800px;
    margin: 80px auto;
    padding: 0 40px;
    text-align: left;
}

/* タイトルと線（About meと共通） */
.device-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.device-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background-color: #004d40; /* かっこいい緑 */
    margin-top: 10px;
    border-radius: 10px;
}

/* 紹介文 */
.device-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
}

/* リスト部分（About meと同じ構造） */
.device-details {
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.device-item {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    align-items: baseline; /* 文字の底辺を揃える */
}

/* 緑のラベル */
.device-label {
    font-weight: bold;
    color: #004d40;
    width: 100px; /* About meのNameラベルと幅を合わせるとさらに綺麗です */
    flex-shrink: 0; /* ラベルが潰れないようにする */
}

/* デバイス名 */
.device-value {
    color: #444;
    line-height: 1.6;
}