body {
  margin: 0;/*ブラウザのデフォルト余白をリセット*/
  padding: 0;
  font-family: "Poppins", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px; /* やや大きく */
  letter-spacing: .08em; /* 字間を広めに */
  color: #e0e0e0; /* ベースの文字色を明るいグレーに */
  background-color: #121212; /* 全体の背景を濃いダークグレーに */
}

/* ファーストビュー */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* お好みのフォントに変更してください */
    color: #ffffff; /* テキストの色 */
}

/* ヒーローセクション（ファーストビュー全体） */
.hero-section {
    display: flex; /* Flexboxで子要素（左右）を並べる */
    height: 100vh; /* ビューポートの高さ全体を使用 */
    width: 100%;
}

/* 左半分（テキストエリア） */
.hero-left {
    flex: 1; /* 親要素の幅の半分を使用 (Flexboxの機能) */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    justify-content: center; /* 垂直方向の中央揃え */
    align-items: center; /* 水平方向の中央揃え */
    background-color: #2a2a2a; /* 背景色（任意） */
    padding: 20px;
    text-align: center;
}

.name {
    font-size: 5vw; /* ビューポートの幅に基づくサイズ */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 0.2em; /* タイトルとの間隔 */
}

.title {
    font-size: 2vw; /* ビューポートの幅に基づくサイズ */
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase; /* 大文字に変換 */
}

/* 右半分（写真エリア） */
.hero-right {
    flex: 1; /* 親要素の幅の半分を使用 */
    overflow: hidden; /* 画像がはみ出さないように */
}

.hero-image {
    width: 100%; /* 親要素の幅全体 */
    height: 100%; /* 親要素の高さ全体 */
    object-fit: cover; /* 画像をトリミングして領域全体を覆う */
    display: block;
}

a {
  transition: all .4s ease-in-out; /* トランジションをスムーズに */
  text-decoration: none;
  color: #bbbbbb; /* アクセントカラーをグレーに変更 */
}

a:hover {
  opacity: 1;
  color: #ffffff; 
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/*--------------------------------
 レイアウト
---------------------------------*/
.wrapper {
  padding-top: 0px; /* ヘッダー分を調整 */
}

.section {
  padding: 120px 0; /* セクションの上下パディングを大きく */
  background-color: #121212; /* 基本のセクション背景 */
}

.section:nth-of-type(odd) {
  /* 偶数セクションの背景を少し濃く */
  background-color: #1a1a1a;
}

.container {
  max-width: 1400px; /* 最大幅を少し広めに */
  margin: 0 auto;
  padding: 0 60px; /* 左右のパディングを大きく */
}

/*--------------------------------
 見出し
---------------------------------*/
.title {
  font-size: 48px; /* 大きく強調 */
  font-weight: 700; /* Bold */
  line-height: 1.1;
  margin-bottom: 60px;
  text-align: center;
  letter-spacing: .1em;
  color: #ffffff; /* 白くシャープに */
  text-transform: uppercase; /* 大文字に変換 */
  border-bottom: 2px solid #444444; /* アクセントカラーを濃いグレーに変更 */
  text-align: center;
  padding-bottom: 10px;
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 40px;
  text-align: center;
  color: #aaaaaa;
}

/*--------------------------------
 ヘッダー 
---------------------------------*/
.header {
  position: fixed;
  top: 0;
  z-index: 99999; /* Z-Indexを高く */
  width: 100%;
  background-color: rgba(0, 0, 0, 0.98); /* 濃いダーク背景（ほぼ黒）に設定 */
  backdrop-filter: blur(5px); /* 背景をぼかす */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7); /* シャドウを濃く */
  color: #ffffff; /* ヘッダー内の全ての文字色を白に強制 */
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px;
}

.header-logo {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-right: 30px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.header-logo a {
  color: #ffffff; /* ロゴの文字色を白に強制 */
}
.header-logo a:hover {
  color: #aaaaaa; /* ホバーでグレーに変化 */
}

.gnav-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.gnav-item:not(:last-child) {
  margin-right: 30px;
}

.gnav-item a {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  padding: 10px 0;
  letter-spacing: .1em;
  color: #e0e0e0; /* ナビゲーションの文字色を白系に維持 */
  text-transform: uppercase;
}

/* ホバーエフェクトの変更 */
.gnav-item a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px; /* 下線を細く */
  content: "";
  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1); /* スムーズなアニメーション */
  transform: translateX(-50%);
  background-color: #ffffff; /* アクセントカラーを白に変更 */
}

.gnav-item a:hover {
  color: #ffffff;
}

.gnav-item a:hover:after {
  width: 100%;
}

/*--------------------------------
 メインビジュアル
---------------------------------*/
.mv {
  margin-top: 0px;
  height: 65vh; /* 画面の高さいっぱいに近く */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 背景画像などを設定するためのスペース */
  /* background: url(./path-to-image.jpg) no-repeat center center / cover; */
  background-color: #000000;
}

.mv-container {
  position: relative;
   padding: 80px 40px;
  z-index: 1;
}

/*--------------------------------
 Works (実績紹介)
---------------------------------*/
.works-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -60px; 
}

.works-item {
  width: 31.74603%;
  margin-right: 2.38094%;
  margin-bottom: 60px;
  color: #e0e0e0;
  background-color: #1a1a1a;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform .3s ease, box-shadow .3s ease;
}

.works-item:hover {
  opacity: 1;
  transform: translateY(-5px); /* 浮き上がるエフェクト */
  /* アクセントカラーのシャドウを白/グレー系に変更 */
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
}

.works-item:nth-of-type(3n) {
  margin-right: 0;
}

.works-img img {
  border: none;
  border-radius: 4px;
}

.works-name {
  font-size: 14px;
  font-weight: 700;
  margin-top: 15px;
  color: #ffffff;
  text-transform: uppercase;
}

.works-info {
  font-size: 12px;
  margin-top: 5px;
  color: #aaaaaa;
}

/*--------------------------------
 Skill
---------------------------------*/
.skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -50px;
}

.skill-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 48%;
  margin-bottom: 50px;
  background-color: #737373;
  padding: 25px;
  border-radius: 8px;
  border-left: 3px solid #444444;
}

.skill-img {
  width: 60px;
  height: auto;
  margin-right: 20px;
   filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.skill-body {
  flex: 1;
}

.skill-name {
  margin-bottom: 10px;
}

.skill-text {
  font-size: 14px;
  line-height: 1.8;
  color: #e0e0e0;
}
/*--------------------------------
 About (自己紹介)
---------------------------------*/
.profile {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}
.profile-img {
  width: 25%; /* 画像サイズを調整 */
  margin-right: 50px;
  border-radius: 50%;
  border: 4px solid #444444; /* アクセントカラーの枠線を濃いグレーに変更 */
  overflow: hidden;
  /* シャドウを白/グレー系に変更 */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.profile-img img {
  border-radius: 0; /* 親要素で丸くしているので不要 */
  transition: transform .5s ease;
}
.profile-img img:hover {
  transform: scale(1.05);
}
.profile
/* ※途中の`.profile`セレクタはオリジナルCSSに倣い未完のまま残しています。 */

/*================================================
  全体設定
================================================*/
body {
  /* 日本語フォントを優先し、欧文フォントはフォールバックとして残す */
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  color: #333; /* 基本の文字色は濃いグレー */
  line-height: 1.7;
}

/* Montserratフォントはロゴ・タイトルなど欧文メインの箇所に限定して使用する */
.header-logo a,
.article-title {
  font-family: 'Montserrat', sans-serif;
}

/* リンク */
a {
  color: #333;
  transition: opacity 0.3s;
  text-decoration: none;
}
a:hover {
  opacity: 0.6; /* ホバーで少し薄くなる（白黒基調のため） */
}

/* 共通レイアウト */
.container {
  max-width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
}
.wrapper {
  overflow: hidden;
}

/*================================================
  ヘッダー (header)
================================================*/
.header {
  background-color: #222; /* 黒（濃いグレー）の背景色 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  height: 80px;
  display: flex;
  align-items: center;
}
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴ */
.header-logo {
  font-size: 24px;
  font-weight: bold;
}
.header-logo a {
  color: #fff; /* ロゴの文字色は白 */
}
.header-logo a:hover {
  opacity: 0.8;
}

/* グローバルナビゲーション */
.gnav-list {
  display: flex;
  gap: 30px;
}
.gnav-item a {
  color: #fff; /* ナビゲーションの文字色は白 */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 10px 0;
  display: block;
}
.gnav-item a:hover {
  opacity: 0.8;
}

/*================================================
  メインコンテンツ (main.content)
================================================*/
.content {
  padding-top: 80px; 
}

/*================================================
  詳細ページ (article)
================================================*/
.article {
  padding: 80px 0;
}
.article-container {
  max-width: 800px;
  padding: 0 40px;
  margin: 0 auto;
}
.article-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
}

.article-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 4px solid #333; 
}

.article-body p {
  margin-bottom: 20px;
}

.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 30px;
  border: 1px solid #ccc; 
}

/* Works一覧へリンク */
.home-link {
  text-align: center;
  margin-top: 60px;
}
.home-link a {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #333;
  color: #333;
  font-weight: 700;
}
.home-link a:hover {
  background-color: #333;
  color: #fff;
  opacity: 1; 
}

/* # =================================================================
   # 4. 今までのキャリア (Timeline)
   # ================================================================= */

.career-section {
    background-color: var(--color-background);
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px; 
}

/* タイムラインの縦線 */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: #e0e0e0;
}

.timeline-item {
    margin-bottom: 40px;
    position: relative;
    padding-left: 40px;
}

/* タイムラインの丸 */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -8px; 
    width: 18px;
    height: 18px;
    background-color: white; 
    border-radius: 50%;
    border: 4px solid #ffffff;
    z-index: 2;
}

.timeline-title {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-text);
}

.timeline-company,
.timeline-date {
    font-size: 0.9em;
    color: var(--color-light-text);
    margin-bottom: 5px;
}


/* # =================================================================
   # 5. 趣味/特技の欄 
   # ================================================================= */

.skills-section {
    background-color: var(--color-light-bg);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.skill-card {
    background-color: #737373;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.skill-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    background-color:#c4c4c4;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.skill-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.skill-description {
    font-size: 0.95em;
    color: var(--color-light-text);
    line-height: 1.6;
}


/* #=================================================================
   # 6. なぜウェブデザインをするか (Passion Section)
   #================================================================= */

.passion-section {
    background-color: var(--color-background);
}

.passion-content {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.passion-image {
    width: 40%;
    min-height: 350px;
    background-color: #ccc;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.passion-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}



.passion-text {
    width: 60%;
    font-size: 1.1em;
    line-height: 1.8;
}

/*================================================
 コンタクト
================================================*/
.contact-list {
text-align: center;
}
/*================================================
  フッター (footer)
================================================*/
.footer {
  text-align: center;
  padding: 20px 0;
  background-color: #f5f5f5; 
  border-top: 1px solid #ddd;
}
.copyright {
  font-size: 12px;
  color: #666;
}

/*================================================
  ページトップボタン (page-top)
================================================*/
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background-color: #333; 
  color: #fff; 
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  cursor: pointer;
  z-index: 100;
}
.page-top.is-show {
  opacity: 1;
  visibility: visible;
}
.page-top:hover {
  background-color: #555;
}
.page-top .material-icons-outlined {
  font-size: 24px;
}

/*================================================
  レスポンシブ (スマートフォン対応)
================================================*/
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  
}
@media (max-width: 768px) {
    .skill-list {
         display: flex; 
        flex-direction: column;
        flex-wrap: nowrap; 
        justify-content: flex-start; 
        margin-bottom: 0; 
        gap: 30px; 
    }
    
    .skill-item {
        width: 100%; 
        max-width: 100%; 
        margin-bottom: 0; 
        
    }

}

@media (max-width: 768px) {

    .passion-content {
        flex-direction: column; 
        max-width: 100%; 
        gap: 40px; 
        margin: 0 15px; 
    }

    .passion-image {
        width: 100%; 
        min-height: 250px; 
    }
    
    .passion-text-content {
        width: 100%;
}



}

@media (max-width: 768px) {
    /* ------------------------------------- */
    /* 共通設定 */
    /* ------------------------------------- */
    .container {
        padding:  30px; /* 左右に適切な余白を確保 */
    }

  }

  /* 768px以下の画面サイズに適用されるスタイル */
@media (max-width: 768px) {

  /* ロゴの調整 */
  .header-logo {
    font-size: 15px;   
  }

}

@media (max-width: 768px) {
  .header .container {
    padding: 10px 30px; 
    
  }

  .header-logo {
    font-size: 15px; 
    margin-right: 5px; 
    /* ナビゲーションが小さいため、ロゴが小さくなりすぎないように調整 */
  }

  /* ナビゲーション全体を格納するコンテナ */
  .gnav {
    -webkit-overflow-scrolling: touch; /* iOSで滑らかなスクロールを実現 */
    white-space: nowrap; /* ナビゲーションリスト内の要素が改行されないように */
    padding-bottom: 0px; /* スクロールバーのためのスペースを確保（必要な場合） */
  }
  
  /* ナビゲーションリスト */
  .gnav-list {
    /* flexを維持し、リスト項目は絶対に折り返さない */
    flex-wrap: nowrap;
    justify-content: flex-start; /* 左寄せ */
    padding-right: 20px; /* スクロール時の終端に余白を追加 */
  }

  /* リスト項目のマージン調整 */
  .gnav-item:not(:last-child) {
    margin-right: 5px; /* マージンを少し狭くしてスペースを稼ぐ */
  }
  
  /* ナビゲーションリンクの文字サイズを小さく */
  .gnav-item a {
    font-size: 8px;
    padding: 7px 0;
  }
}

/* -------------------------------------- */
/* ファーストビュー768px以下の画面に対するレスポンシブ対応 */
/* -------------------------------------- */
@media (max-width: 768px) {
    
    .hero-section {
        /* 写真のみなので、縦積みは不要ですが、念のため高さを調整 */
        flex-direction: column; 
        min-height: 100vh;
        height: auto;
    }

    /* テキストエリアは引き続き非表示 */
    .hero-left {
        display: none;
    }

    /* 写真エリアは全画面（100vh）を維持し、スマホでも画像で覆う */
    .hero-right {
        height: 100vh;
        flex: 1;
    }

    /* PC/SP表示の切り替えは念のため維持 */
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}