html {
  scroll-behavior: smooth;
}





/* タイトルとリンクの色 */
.site-title a, nav ul li a, .section-title {
  color: #815A5A;
  text-decoration: none;
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

.site-title {
  font-size: 56px;
  
}

nav ul li a {
  font-size: 28px;
}



/* 全体のベースカラー */
body {
  background-color: #FFF7EB; /* 背景のアイボリー */
  color: #815A5A;            /* 鉛筆・ペン線のブラウン */
  font-family: "noto-sans";  /* フォントはお好みで */
}

.wrapper {
  max-width: 1300px; /* 画面幅を制限して見やすく */
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  padding: 20px 0;
  background-color: #fff7eb; /* サイト全体のベースカラー */
}





/* ヘッダー：固定するとスクロールが楽しくなります */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
}

#header ul {
  display: flex;
  list-style: none;
  gap: 80px;
  margin-right: 20px;
  padding-right: 40px;
}

/* メインビジュアル：砂丘の写真を横いっぱいに */
#main-visual img {
  width: 100%;
  height: auto;
  display: block;
}



/* Works全体のレイアウト */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px; 
  margin: 0 auto;
  gap: 80px 40px;
}


.work-link {
  display: block;        /* 全体をクリッカブルにする */
  text-decoration: none; /* 下線を消す */
  color: inherit;       /* 文字色を継承 */
  width: calc(50% - 20px); /* ★以前 work-item に付けていた横幅をここに移す */
}



.work-item {
  width: 100%; /* 親である .work-link いっぱいに広がる */
}

/* 作品画像：比率を保って表示 */
.work-img img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(129, 90, 90, 0.1); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
  transition: transform 0.3s ease;
  vertical-align: bottom;
}

/* ホバー時のアニメーション（リンク全体に反応させる） */
.work-link:hover .work-img img {
  transform: translateY(-5px);
}

/* タグとカテゴリーの横並びエリア */
.work-info {
  margin: 15px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* タグ：カプセル型 */
.tag {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  color: #815A5A;
}

/* タグの色分け（お好みで調整してください） */
.tag.client { background-color: #EEDADA; } /* クライアントワーク */
.tag.own    { background-color: #DDEAE7; } /* 自主制作 */
.tag.school { background-color: #E2DFED; } /* 学校課題 */

.work-category {
  font-size: 11px;
  color: #815A5A;
  letter-spacing: 0.05em;
}

/* 作品タイトル */
.work-title {
  font-size: 14px;
  font-weight: bold;
  color: #815A5A;
  line-height: 1.4;
}


.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                /* 文字が離れすぎないように0に調整 */
  margin-bottom: 60px;   /* 下のコンテンツとの余白 */
}





/* 「Works」の部分 */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 60px;
  margin-top: 100px;    /* 画像との間の距離。カンプに合わせて 80px〜120px くらいでお好みで！ */
  margin-bottom: 60px;

  /* 親要素の opacity は削除します */
  
  /* 「Works」の設定：色を直接 30% の薄さにします */
  font-family: 'Caveat', cursive;
  font-size: 128px;
  line-height: 1;
  color: rgba(129, 90, 90, 0.3); /* ブラウン(#815A5A)を 30% の濃さに指定 */
  
  transform: rotate(-10deg);
  transform-origin: left center;
  margin-left: -10px;
}

.section-title span {
  display: block;
  font-family: "sans-serif";
  font-size: 12px;
  font-weight: normal;
  
  /* 日本語は 100% の濃さで表示 */
  color: rgba(129, 90, 90, 1); 
  
  /* 斜めを戻す設定 */
  transform: rotate(10deg);
  margin-top: -5px;
  padding-left: 30px;

}

/* --- Aboutセクション共通設定 --- */
#about {
  padding-bottom: 100px;
}

/* ProfileとSkillを包む全体のコンテナ */
.profile-container {
  max-width: 900px; 
  margin: 0 auto;
  padding: 0 40px;
}

/* -Profile, -Skill の小見出し */
.category-sub {
  font-size: 18px;
  color: #815A5A;
  margin-bottom: 30px;
  text-align: left;
  text-indent: 1em;
}

/* --- Profile部分のレイアウト --- */
.profile-flex {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央の塊として配置 */
  gap: 60px;               /* 画像とテキストの間の距離 */
  margin-top: 40px;
  margin-bottom: 80px;     /* Skillとの間隔 */
}

.profile-img img {
  width: 180px;
  height: auto;
  border: 1px solid rgba(129, 90, 90, 0.3);
  border-radius: 20px;
  padding: 10px;
  margin-left: 30px;
  flex-shrink: 0;
}

.profile-text p {
  margin-bottom: 1.2em; /* 段落の下に1.5行分の空白を作る */
  text-align: justify;
}

.profile-text p:last-child {
  margin-bottom: 0; /* 最後の段落だけは余白を消してスッキリさせる */
}

.profile-text h3 {
  font-size: 24px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  color: #815A5A;
}

.profile-text p {
  font-size: 15px;
  line-height: 2.2;
  color: #815A5A;
}



.skill-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  /* ★ここが魔法の数字です★
     Profileの「画像(200px) + 枠・余白(22px) + 隙間(60px)」の合計分だけ左を空けます */
  padding-left: 100px; 
  
  /* Profileの全体幅と同じにするための調整 */
  max-width: 832px; 
  margin: 0 auto;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 30px;
}

.skill-label {
  width: 80px;
  height: 30px;
  border: 1px solid #815A5A;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #815A5A;
}

.skill-text {
  color: #815A5A;
  font-size: 15px;
}




#contact {
  background-color: #ECF3CE; /* カンプの薄い緑色 */
  padding: 140px 0 100px;    /* 上側に余裕を持たせて曲線を見せる */
  text-align: center;
  
  /* 楕円の角を丸める設定：左上と右上を50%ずつ丸めます */
  border-radius: 50% 50% 0 0 / 150px 150px 0 0; 
  
  /* 画面端まで色を広げる設定 */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.contact-button {
  display: inline-block;
  background-color: #fff;    /* ボタンの中は白 */
  color: #815A5A;            /* 文字はパレットのブラウン */
  padding: 20px 80px;
  border-radius: 50px;       /* 角丸ボタン */
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 軽い影を入れると浮いて見えます */
}

.contact-button:hover {
  background-color: #815A5A;
  color: #FFF7EB;
}


#footer {
  background-color: #ECF3CE;
    width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
}



#footer ul {
  display: flex;
  list-style: none;
  gap: 80px;
  margin-right: 20px;
  padding-right: 40px;
}





/* ここから作品詳細ページ */

/* 詳細ページのコンテナ */
.work-detail-container {
  max-width: 900px; /* Aboutのコンテナ幅（image_bdac17.png）と合わせる */
  margin: 0 auto;
  padding: 0 40px;
}

.work-detail-head {
  padding: 100px 0 40px;
  text-align: left;
}

.work-detail-head h1 {
  font-size: 32px;
  color: #815A5A;
  margin: 10px 0;
}

/* メイン画像：大きく表示 */
.work-detail-mainimg {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.work-detail-mainimg img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(129, 90, 90, 0.1);
}

.info-content {
  width: 100%;
  display: block;
}

.work-process-img {
  width: 100%;        /* 親（info-content）の幅いっぱいに広げる */
  max-width: 100%;    /* 物理的に右端を越えさせない */
  margin-top: 20px;
}

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


/* 概要などのテキスト行 */
.info-row {
  display: flex;
  margin-bottom: 40px;
  gap: 40px;
}

.info-row h3 {
  width: 200px; /* ここの幅を揃えることで、AboutのSkillラベルのような整列感が出ます */
  font-size: 18px;
  color: #815A5A;
  border-left: 3px solid #815A5A;
  padding-left: 15px;
  flex-shrink: 0;
}

.info-row p {
  line-height: 2;
  color: #815A5A;
  text-align: justify;
}

/* 戻るボタン */
.back-to-top {
  text-align: center;
  margin: 80px 0 120px;
}

.back-link {
  color: #815A5A;
  text-decoration: none;
  border-bottom: 1px solid #815A5A;
  padding-bottom: 5px;
  transition: opacity 0.3s;
}

.back-link:hover {
  opacity: 0.6;
}


/* ギャラリーセクションの余白 */
.work-gallery {
  padding: 80px 0;
  margin-bottom: 40px;
}



/* ギャラリー：2列に並べる設定 */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* 3列の時より少し広げるとゆとりが出て綺麗です */
}

/* 各画像の箱：2列なので 100% から隙間分を引いた 50% 前後に設定 */
.gallery-item {
  width: calc(50% - 20px); /* 33.333% から 50% に変更 */
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(129, 90, 90, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}



/* カラー・フォント全体のレイアウト */
.design-details {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* サブカラー（円形）の横並び */
.sub-colors {
  display: flex;
  gap: 20px;
}


/* フォント表示部分 */
.font-display {
  display: flex;
  align-items: center;
  gap: 15px;
}

.font-line {
  flex-grow: 1;
  max-width: 300px;
  height: 8px;
  margin: 0 15px;
}

.font-name, .font-code {
  font-size: 13px;
  color: #815A5A;
}


/* ベースカラー（長方形） */
.color-rect {
  width: 100%;
  max-width: 400px;
  height: 100px;
  border: 1px solid rgba(129, 90, 90, 0.2);
}



/* カラーパレットの調整 */

/* カラー内の各ブロックの余白 */
.base-color-section {
  margin-bottom: 25px;
}

.color-palette {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-flex {
  display: flex;
  align-items: center;
  gap: 25px;
}

.color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 8px;
}

.color-circle.is-border {
  border: 1px solid #dcdcdc; /* 背景と区別するための薄いグレー */
  box-sizing: border-box;    /* 枠線を含めて50pxを維持 */
}

.color-item span {
  font-size: 11px;
  font-family: monospace;
  color: #815A5A;
}

.color-note {
  font-size: 12px;
  margin-left: 10px;
}


.sub-label {
  font-size: 13px;
  color: #815A5A;
  margin-top: 16px;
  margin-bottom: 8px;
}

.accent-color-section {
  display: flex;
  flex-direction: column;
}



.visit-site-link {
  display: inline-block;
  margin-top: 15px;
  color: #815A5A;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid #815A5A;
  padding: 8px 20px;
  border-radius: 20px; /* 角丸で柔らかい印象に */
  transition: all 0.3s ease;
}

.visit-site-link span {
  margin-left: 5px;
}

.visit-site-link:hover {
  background-color: #815A5A;
  color: #FFF7EB; /* 背景色（アイボリー）と反転させる */
}

.status-note {
  margin-top: 12px;
  font-size: 13px !important; /* 少し小さくして補足感を出す */
  color: #815A5A;
  opacity: 0.8;
  line-height: 1.6;
}


/* UI/UXリストのスタイル調整 */
.point-list {
  list-style: disc;
  list-style-position: inside;
  padding: 0;       /* 左側の余白をゼロにして左端に揃える */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;         /* 項目間の縦の隙間 */
}

.point-list li {
  font-size: 15px;
  color: #815A5A;
  line-height: 1.6;
  position: relative;
  padding-left: 1.2em; /* 文頭に擬似要素のドットを入れるスペース */
}




/* --- work1（均等タイル並び）用の設定 --- */

/* work1の親要素にクラスを追加するか、以下のように指定します */
.work-gallery-work1 .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列で均等に並べる */
  gap: 20px;
  padding: 40px 0;
}

/* work1用の画像サイズリセット（比率指定を上書き） */
.work-gallery-work1 .gallery-item {
  width: 100% !important; /* work3の比率設定を無効化 */
}



/* ギャラリー全体のレイアウト調整 */
.work-gallery .gallery-grid {
  display: flex;
  align-items: flex-start; /* 上端で揃える */
  justify-content: center; /* 中央寄せ */
  gap: 40px;               /* 画像同士の隙間 */
  padding: 40px 0;
}

/* 比率に基づいた幅の設定 */
.gallery-item:nth-child(1) { width: 45%; } /* PC版 (1400px相当) */
.gallery-item:nth-child(2) { width: 29%; } /* タブレット版 (900px相当) */
.gallery-item:nth-child(3) { width: 13%; } /* スマホ版 (400px相当) */

/* 画像の共通スタイル */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;  /* 境界をはっきりさせる */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 浮き出し効果で実機感を出す */
}


/* バナーギャラリー専用の設定 */
.banner-grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

/* 左右分割用のエリア設定 */
.banner-grid.is-split {
  grid-template-columns: 1fr 1fr; /* 左右均等な2列 */
  grid-template-areas:
    "theme1-sq theme2-sq"  /* 1行目：テーマ1正方形 / テーマ2正方形 */
    "theme1-wd theme2-wd"  /* 2行目：テーマ1横長   / テーマ2横長 */
    "theme1-sm .";         /* 3行目：テーマ1小     / （空き） */
}

/* 各バナーにエリア名を割り当て */
.theme1-sq { grid-area: theme1-sq; }
.theme1-wd { grid-area: theme1-wd; }
.theme1-sm { grid-area: theme1-sm; }
.theme2-sq { grid-area: theme2-sq; }
.theme2-wd { grid-area: theme2-wd; }


.banner-item img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #eee;
  display: block;
}

/* 横長バナーは2列分使うなどの調整（必要に応じて） */
.banner-item.wide {
  grid-column: span 1;
}

/* --- テーマ1の小バナー（image_13.png の左下）専用の設定 --- */
.theme1-sm {
  grid-area: theme1-sm; /* 既存の設定 */
  
  /* 親要素(Grid)の配置設定を上書きし、この要素だけ中央寄せにする */
  align-self: center; 
  
  /* 他のバナー（100%）より小さく表示するための幅調整（例：60%） */
  width: 60%; 
  
  /* 中央に配置するためのマージン設定 */
  margin: 0 auto; 
}











/* スマホ表示の際は縦並びにする */
@media (max-width: 768px) {
  .work-gallery .gallery-grid {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3) {
    width: 90%; /* スマホでは画面いっぱいに */
  }

  .work-gallery-work1 .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .banner-grid {
    grid-template-columns: 1fr;
  }

  .banner-grid.is-split {
    grid-template-columns: 1fr;  /* 1列にする */
    grid-template-areas: none;   /* エリア指定を解除（HTML順に並ぶ） */
  }

  /* スマホ時は横長バナーの横幅をいっぱいにする調整 */
  .banner-item.wide,
  .banner-item.small {
    grid-column: span 1;
  }
}