/*=======================================
  全体基本設定
=======================================*/
body {
  margin: 0;
  padding: 0;
  background: white;
  color: black;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500; /* 基本ウェイト */
  /* 見切れを防ぐため、横方向のスクロールを非表示にする */
  overflow-x: hidden; 
}

/* 説明文などウェイト400を使う場合 */
/* .contact-itemを追加 */
.description, .work-title, .profile-text p, .detail-desc, .contact-item {
  font-weight: 400;
}

/* 画像がコンテナからはみ出さないように */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*=======================================
  トップ
=======================================*/
#topImage {
  display: block;
  /* PCでの最大幅を固定 */
  width: 600px; 
  /* スマホでの見切れを防ぐ */
  max-width: 90vw; 
  margin: 270px auto 130px;
}

/*=======================================
  固定ナビゲーション
=======================================*/
.fixed-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 20px;
  font-size: 15pt;
  font-weight: 500;
  z-index: 100; /* 最前面に表示 */
}
.fixed-nav a {
  color: black;
  text-decoration: none;
}


/*=======================================
  共通セクション設定
=======================================*/
.section-title {
  font-size: 21pt;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}


/*=======================================
  Works セクション
=======================================*/
.works-section {
  padding: 100px 8%; /* 左右に8%の余白を追加し見切れを防ぐ */
}

.works-grid {
  display: grid;
  /* PCでは2列、最大幅920pxで中央寄せ */
  grid-template-columns: repeat(2, minmax(300px, 450px)); 
  gap: 18px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto 80px;
}

.work-item {
  /* 幅の固定を解除し、グリッドのサイズに合わせる */
  width: 100%; 
  max-width: 100%;
}

.work-item img {
  width: 100%;
  display: block;
}

.work-title {
  font-size: 10pt;
  font-weight: 450; /* 共通設定に合わせる */
  margin-top: 8px;
  color: rgb(95, 95, 95);
  /* 文字間を空けるプロパティ */
  letter-spacing: 0.6px; /* 例: 0.6ピクセル分広げる */
}


/*=======================================
  Profile セクション
=======================================*/
.profile-section {
  padding: 100px 8%; /* 左右に8%の余白を追加し見切れを防ぐ */
}
.profile-grid {
  display: grid;
  /* PCでは2列、最大幅920pxで中央寄せ */
  grid-template-columns: repeat(2, minmax(300px, 450px)); 
  gap: 18px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto 80px;
}

.profile-image {
  /* 幅の固定を解除し、グリッドのサイズに合わせる */
  width: 100%; 
  max-width: 100%;
}

.profile-image img {
  width: 100%;
  display: block;
}

/*=======================================
  Profile コンタクト情報 (追加)
=======================================*/
.contact-info {
  text-align: center;
  /* プロフィール画像の下に余白を設ける */
  margin: 40px auto 80px; 
  max-width: 920px;
}

.contact-item {
  /* .work-titleと同じフォントサイズ、色、文字間隔を適用 */
  font-size: 10pt;
  font-weight: 400; 
  color: rgb(95, 95, 95);
  letter-spacing: 0.6px;
  margin: 8px 0; /* 各アイテム間の縦の余白を調整 */
}

.contact-item a {
  /* リンクの色をテキストと同じにし、下線を追加 */
  color: rgb(95, 95, 95); 
  text-decoration: underline; /* 下線を追加 */
}


/*=======================================
  ページトップに戻るボタン
=======================================*/
.back-to-top {
  text-align: center;
  font-size: 36pt;
  font-weight: 500;
  margin: 50px 0;
  cursor: pointer;
}

/*=======================================
  作品詳細ページ (レスポンシブ対応)
=======================================*/
.detail-main {
  max-width: 750px;
  margin: 120px auto;
  padding: 0 4%; /* 左右に余白を追加 */
}

.detail-title {
  font-size: 22pt;
  font-weight: 500;
  margin-bottom: 20px;
}

.detail-desc {
  font-size: 12pt;
  font-weight: 400;
  margin-bottom: 40px;
}

.detail-images img {
  width: 100%;
  margin-bottom: 20px;
  display: block;
}


/*=======================================
  【モバイル対応】Media Queries (画面幅 600px以下)
=======================================*/
@media screen and (max-width: 600px) {

    /* Works セクション: 1列の縦並びに変更 */
    .works-grid {
        /* スマホでは1列にし、幅いっぱいに広げる */
        grid-template-columns: 1fr; 
        gap: 25px;
        margin-bottom: 50px;
    }
    /* Profile セクション: 1列の縦並びに変更 */
    .profile-grid {
        /* スマホでは1列にし、幅いっぱいに広げる */
        grid-template-columns: 1fr; 
        gap: 10px;
        margin-bottom: 20px;
    }
    
    /* 全体のパディングを調整 */
    .works-section, .profile-section {
        padding: 50px 8%;
    }
    
    /* トップ画像の余白を調整 */
    #topImage {
        margin-top: 100px;
        margin-bottom: 50px;
    }

    /* 固定ナビのフォントサイズを調整 */
    .fixed-nav {
        font-size: 12pt;
        gap: 15px;
    }
}