html {
    font-size: 17px;
    font-family: sans-serif;
}
* {
    box-sizing: border-box;
 }

body {
    margin: 0 0 0 0;
}
p, li, td {
    line-height: 1.7;
}

/* ヘッダー・メニューバーのスタイル */
header{
  background-color: #111111; /* 真っ黒すぎない、高級感のある上質な黒 */
  padding: 0px 5%;          /* 上下に40px、左右に画面幅の5%の余白を作る */
  width: 100%;               /* 横幅いっぱいに広げる */

  /* タイトルとメニューを左右横並びにする魔法の命令 */
  display: flex;
  justify-content: space-between; /* 左端と右端に綺麗に振り分ける */
  align-items: center;            /* 上下の中心を揃える */
}

/* タイトル全体の基本設定（明朝体・白文字・左寄せ） */
h1 {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400; /* 細めで、最も「しっぽり明朝」の優しさが出る太さです */
  font-size: 34px;       /* 全体の文字サイズ（お好みの大きさに変更してください） */
  color: #ffffff;  
}

/* 「work2の」だけをモダンなゴシック体にする設定 */
h1 span {
  font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", sans-serif;
  font-weight: 500;       /* 少し太めにして存在感を出します */
  font-size: 1.1em;      /* 明朝体と高さを揃えるための微調整（ほぼ同じサイズ） */
  letter-spacing: 0.05em; /* 英数字が詰まりすぎないように少し隙間を空ける */
}
/* 「の」だけはやっぱり少し小さくする */
h1 span small {
  font-size: 0.75em;      /* 文字を少し小さくする */
  margin: 0 0.1em;         /* 左右に「文字の0.4文字分」の余白を空ける */
}

/* ここから右側メニューのCSS */
nav ul {
  display: flex;             /* メニュー文字を横並びにする */
  list-style: none;          /* メニューの「・」を消す */
  margin: 0;
  padding: 0;
  gap: 30px;                 /* メニューごとの隙間の広さ */
}
nav a {
  color: #ffffff;            /* 文字を白にする */
  text-decoration: none;     /* 下線を消す */
  font-family: "Helvetica Neue", "Arial", sans-serif; /* タイトルに合わせてゴシック体に */
  font-size: 16px;
  letter-spacing: 0.05em;    
  transition: opacity 0.3s;  /* マウスを乗せたときのアニメーションを滑らかに */
}
/* マウスを乗せた（ホバーした）ときに、少し薄くして「押せる感」を出す */
nav a:hover {
  opacity: 0.7;
}


/* ★ここから各メニューの個別カラー設定（追加分） */
nav li.menu-home a {
  color: #e4d2d8; /* 鴇鼠 */
}
nav li.menu-gallery a {
  color: #d6e9ca; /* 白緑 */
}
nav li.menu-works a {
  color: #f8e58c; /* 淡黄 */
}
nav li.menu-contact a {
  color: #abced8; /* 秘色色 */
}


/* GALLERYセクション全体 */
.gallery-section {
  padding: 2px 0 50px 0;    /* 上の余白を0にして、下側だけに50px残します */
  margin-top: 20px;     /* ★ここがポイント！ギャラリー全体を上に120px引き上げます */
  position: relative;     /* 引き上げたときに表紙の下に潜り込まないようにします */
  z-index: 10;            /* 表紙よりも上のレイヤーに重ねて表示させます */
  text-align: center;
  width: 100%;
}

/* タイトルエリア */

.gallery-main-title {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: #111111;
  margin-bottom: -5px;
}
.gallery-sub-title {
  font-size: 0.85rem;
  color: #666666;
  margin-bottom: -5px;
}
/* 💡4つの画像を横1行に並べ、メインより左右を広くする箱 */
.gallery-grid-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;                 /* 画像と画像の間のすき間（お好みで調整） */
  
  /* メイン幅より広く見せる設定 */
  width: 75%;                /* 画面幅いっぱいに近く広げる */
  max-width: 1600px;         /* 1行で4枚並ぶため、最大幅を少し広めの1300pxに設定 */
  margin: 0 auto;            /* 中央寄せ */
}

/* 作品ひとつひとつの塊（横1行に4枚並ぶように幅を自動フィットさせます） */
.gallery-grid-item {
  flex: 1;                   /* 4つの幅を均等にする */
  min-width: 180px;          /* 画面が狭くなったときに潰れすぎないための最小幅 */
}

/* リンク全体の装飾を消す（文字の下線などを消す設定） */
.gallery-link {
  text-decoration: none;
  display: block;
}

/* 写真の枠組み */
.gallery-img-box img {
  display: block;
  width: 100%;
  height: auto;              /* 縦長サイズで統一してあるので、autoで完璧に揃います */
  background-color: #f5f5f5; /* 画像がないときのための薄いグレーの座布団 */
  transition: transform 0.3s ease; /* 💡マウスを乗せたときに優しく動くアニメーション効果 */
}

/* 💡おまけ：画像にマウスを乗せたときに少しだけ拡大して、クリックできるワクワク感を出します */
.gallery-link:hover img {
  transform: scale(1.03);
}

/* 作品のキャプション（説明文） */
.gallery-caption {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 0.95rem;
  color: #444444;
  margin: 15px 0 0 0;        /* 写真との間のすき間 */
  text-align: left;          /* 文字は左寄せ */
}



/* ギャラリーの見出し */
.gallery-header {
  text-align: center;        /* 見出しは中央に置いて、美術館の看板のように */
  margin-bottom: 60px;       /* 作品群との間のすき間 */
}
.gallery-header h2 {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: #111111;
  margin: 0 0 5px 0;
}
.gallery-header p {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 0.9rem;
  color: #888888;
  margin: 0;
}
/* 💡4つの作品を横1行に並べ、メインより左右を広くする魔法の命令 */
.gallery-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;                    

/* メイン幅より広く見せる設定 */
  width: 95%;                /* 画面幅いっぱいに近く広げる */
  max-width: 1200px;         /* 1行で4枚並ぶため、最大幅を広めの1200pxに設定 */
  margin: 0 auto;            /* 中央寄せ */
}
/* 作品ひとつひとつの塊（横1行に4枚並ぶように幅を自動フィットさせます） */
.gallery-item {
  display: flex;
  flex-direction: column;
  flex: 1;                   /* 4つの幅を均等にする */
  min-width: 200px;          /* 画面が狭くなったときに潰れすぎないための最小幅 */
}

/* 写真の枠組み */
.gallery-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: #f5f5f5; /* 画像がないときのための薄いグレーの座布団 */
}

/* 作品のキャプション（説明文） */
.gallery-caption {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 0.95rem;
  color: #444444;
  margin: 15px 0 0 0;        /* 写真との間のすき間 */
  text-align: left;          /* 文字は左寄せ */
}


/* ギャラリーページ全体の余白を設定する箱 */
.gallery-page-container {
  max-width: 1200px;         /* 画面が大きくても広がりすぎないように制限 */
  margin: 0 auto;            /* 画面の真ん中に配置 */
  padding: 80px 20px;        /* 上下に70px、左右に20pxのゆったりとした余白 */
}

/* 「COLLECTION / 作品ギャラリー」の見出し部分 */
.gallery-page-header {
  text-align: center;        /* 文字を中央に配置 */
  margin-bottom: 60px;       /* 下に並ぶ作品たちとのすき間 */
  padding-top: 30px; 
}

/* メイン見出し（COLLECTION） */
.gallery-page-header h2 {
 font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: #111111;
  margin-bottom: 5px;
  color: #111111;            /* 深みのある黒 */
  margin-bottom: 10px;
  font-weight: 450;       /* 下の日本語コピーとのすき間 */
}

/* サブ見出し（作品ギャラリー） */
.gallery-page-header p {
  font-size: 0.9rem;
  color: #666666;            /* 少し薄めのグレーにして見出しを引き立てる */
  letter-spacing: 0.1em;
  margin-top: -10px; 

}

/* 1. 6つの作品を綺麗に整列させる魔法の箱（グリッドシステム） */
.gallery-page-grid {
  display: grid !important;             
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 40px 60px !important;            
  width: 100% !important;
}

/* 2. 左端の縦長画像だけを「2段ぶち抜き」にする設定 */
.gallery-page-grid .long-item {
  grid-row: span 2 !important; /* 縦方向に2マス分をぶち抜いて占領します */
  
  /* ★ここが超重要：これを入れることで、中の要素（写真）を下まで引っ張る力をオンにします */
  display: flex !important;
  flex-direction: column !important;
}

/* 3. ★修正：親の名前「.gallery-page-grid」を頭にしっかりくっつけます */
.gallery-page-grid .long-item .gallery-page-image {
  flex-grow: 1 !important;     /* 上下の余ったスペースをすべて使って引き伸ばす命令 */
  height: 100% !important;     
  max-height: 1200px !important; /* 右側2枚分に合わせた最大の高さ制限 */
}

/* 4. 画像自体のトリミング設定（引き伸ばされた箱にぴったり収めます） */
.gallery-page-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  object-position: center top !important; /* 01の頭が切れないように上基準にします */
  display: block !important;
}



/* 作品1つ1つの箱の設定 */
.gallery-page-item {
  background-color: #ffffff; /* 箱の背景を白に */
}

/* 作品画像の設定（歪まないように調整） */
.gallery-page-image img {
  width: 100%;               /* 箱の横幅に画像をぴったり合わせる */
  height: auto;              /* 画像の縦横比を崩さない */
  display: block;
}



/* 作品の下につく文字（キャプション）の設定 */
.gallery-page-caption {
  font-size: 0.85rem;
  color: #333333;
  margin-top: 15px;          /* 画像とのすき間 */
  text-align: left;          /* 文字は左寄せで上品に */
  letter-spacing: 0.05em;
}

/* 画像リンクの装飾をリセットして綺麗にする設定 */
.gallery-link {
  text-decoration: none;     /* 文字の下線を消す */
  color: inherit;            /* 文字の色を元の黒色に合わせる */
  display: block;            /* 箱全体をクリックできるようにする */
  transition: opacity 0.3s;  /* マウスを乗せたときの変化を滑らかに */
}

/* 画像にマウスを乗せたときに、少しフワッと明るく（薄く）させてクリックできることを伝える演出 */
.gallery-link:hover {
  opacity: 0.8;
}

/*デジタルアート（花）専用：掛け軸スリットデザイン*/

/* 1. 外枠（3列のピンタレスト風） */
.gallery-page-grid-art {
  max-width: 1200px;
  margin: 0 auto;
  column-count: 4;  /* 👈 強制的に3列にする魔法の指示 */
  column-gap: 24px;  /* 画像の左右の隙間を24pxあける */
  padding: 30px 20px;
  display: block;    /* 以前のflexboxの並びを完全に解除する */
}

/* 2. 各作品の箱（他のページに影響を与えません） */
.gallery-page-item-art {
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;
  border-radius: 12px;      /* 綺麗な角丸 */
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-page-item-art:hover {
  transform: translateY(-6px); /* ホバー時に静かに浮き上がる */
}

/* 3. 画像を縦長のスリット状に強制的に切り取る魔法の指示 */
.gallery-page-image-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 2.5;    /* 👈 ここで縦横比を固定（横1に対して、縦2.5の細長さ） */
  overflow: hidden;
}

.gallery-page-image-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 画像が潰れず綺麗に中央で収まる */
  object-position: center;
  display: block;
  transition: opacity 0.4s ease;
}

/* 4. ホバーでの2枚切り替え（通常・テクスチャ） */
.gallery-page-image-art .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.gallery-page-item-art:hover .img-hover {
  opacity: 1;               /* マウスオンで文字入り・テクスチャ版に変身 */
}

/* 5. 縦長画像用の調整クラス（必要に応じて高さをキープ） */
.gallery-page-item-art.size-tall-art img {
  min-height: 480px;
}

/* =====================================================================
   【JavaScript不要】HTMLとCSSだけで動くミニマル・ライトボックス================================= */

/* 1. 拡大時の背景（普段は透明で、クリックをすり抜けさせておく） */
.lightbox-overlay-css {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 20, 23, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* 🌟ここが魔法の指示！HTMLでクリックされた画像（ターゲット）だけをフワッと表示する */
.lightbox-overlay-css:target {
  opacity: 1;
  pointer-events: auto;
}

/* 2. 拡大される中身の画像設定 */
.lightbox-content-css {
  position: relative;
  max-width: 90%;
  max-height: 85vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 表示された瞬間に画像が少し前に迫る演出 */
.lightbox-overlay-css:target .lightbox-content-css {
  transform: scale(1);
}


.lightbox-content-css img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}

/* 3. 画面のどこをクリックしても「閉じる」ための透明な巨大ボタン */
.lightbox-close {
  position: absolute;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  cursor: zoom-out;
  z-index: -1; /* 画像の裏側に配置して、画像の周りの黒背景をクリックした時に閉じるようにする */
}






/* ==========================================
   フッター（細い黒帯＋中央ロゴ）の調整
   ========================================== */


.footer {
  background-color: transparent; /* 💡フッター自体の背景は透明にします */
  width: 100%;
  padding: 60px 0 30px 0;        /* 💡上の作品との間に心地よい余白（60px）を作ります */
  position: relative;            /* 魔法の重ね合わせの基準点 */
}

.footer-container {
  width: 100%;
  display: flex;
  justify-content: center;       /* ロゴを完全に中央に配置 */
  align-items: center;
  position: relative;            /* 基準点 */
}

/* 💡【ロゴ画像】高さをこれまでの24pxから約150%（36px）へ大きく拡大 */
.footer-logo {
  height: 36px;                 /* 💡150%の大きさに拡大（お好みで30〜40pxの間で微調整してください） */
  width: auto;
  display: block;
  background-color: #ffffff;    /* 💡ロゴの背景を白にすることで、重なった後ろの黒線を綺麗に隠します */
  padding: 0 15px;              /* 💡ロゴの左右に少し白い隙間を作り、線がロゴにぶつからないようにします */
  z-index: 2;                   /* 💡黒いラインよりも必ず「上（手前）」に重ねる命令 */
}

/* 💡フッター（左右全体の黒ラインの数ミリ上にロゴが乗る） */
footer {
  background-color: transparent; /* フッター自体の背景は透明にします */
  width: 100%;
  padding: 60px 0 30px 0;        /* 上の作品との間のすき間 */
}

.footer-container {
  width: 100%;
  display: flex;
  flex-direction: column;        /* 💡ロゴと黒帯を「縦に並べる」設定 */
  align-items: center;  
}         /* 完全に中央寄せ */
/* 💡【ロゴ画像】150%の大きさに拡大し、下に数ミリのすき間を作ります */
.footer-logo {
  height: 50px;                 /* 💡ロゴの高さ（150%サイズ。お好みで微調整してください） */
  width: auto;
  display: block;
  margin-bottom: 8px;           /* 💡ここがポイント！黒帯との間のすき間（数ミリ分：約8px） */
}

/* 💡【左右全体の細い黒ライン】ロゴの下に敷くベースの線 */
.footer-container::after {
  content: "";
  display: block;
  width: 100%;                  /* 左右全体に真っ直ぐ広げる */
  height: 30px;                  /* 💡黒いラインの太さ（数ミリ：お好みで2px〜5pxで調整） */
  background-color: #000000;    /* 黒いライン */
}


/* WORKSページ独自のスタイル設定 */

.works-menu-section{
  margin-bottom: 10px;
}


.works-sub-title {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-align: center;
  margin-top: -20px;
  margin-bottom: -10px;
  color: #111111;
  font-weight: 400;

}

.works-sub-desc {
  font-size: 0.85rem;
  text-align: center;
  color: #666666;
  margin-bottom: 50px;
  letter-spacing: 0.05em;
}

/* 3列に綺麗に並べるグリッド */
.works-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: -20px;
  margin-bottom: 80px;
}
/* 1. グレーの背景と頭の線を持つ、通常のカード（3つ分）の指定 *//* 1つのグループのカードデザイン */
.works-menu-card{ 
  padding: 5px 30px 2px 30px;
  border-top: 2px solid #111111; /* カードの上にだけ凛とした黒い線を1本引くおしゃれ技 */
 /* 2. ★ここが一番のポイント！高さを固定（px指定）から「自動」に切り替えます */
  height: auto !important; 
}

/* 1つ目のブロックの色 */
.works-menu-card.menu-1 {
  background-color: #f5eae4; /* 優しいペールピンク・ベージュ */
}

/* 2つ目のブロックの色 */
.works-menu-card.menu-2 {
  background-color: #e8ece9; /* 爽やかなセージグリーン */
}

/* 3つ目のブロックの色 */
.works-menu-card.menu-3 {
  background-color: #e6ecf0; /* 落ち着いたペールブルー */
}


/* 2. ★完全に分けて指定！新プロジェクトの黒ベタブロック（1つ分）の指定 */
.works-block {
  height: auto !important;        /* 「高さ自動」も同じように揃えます */
  /* ★ここがポイント！黒ベタの個性をここでガチッとキープ（上書きを防止）します */
  background-color: #000000 !important; /* 背景は絶対に黒！ */
   padding: 40px 20px !important;  /* 上下左右に綺麗な余白（クッション）を作ります */
  
  /* ★この3行で、中にある1枚の画像を上下左右の「完全など真ん中」に配置します */
  display: flex !important;
  justify-content: center !important; /* 左右の真ん中 */
  align-items: center !important;     /* 上下の真ん中 */
}




/* プロジェクトロゴエリアの配置調整 */
.logo-area {
 width: 100% !important;
 text-align: center !important;
}
/* 今ある HTML の「.project-logo」のサイズをちょうどよくします *//* ロゴ画像のサイズ指定 */
.project-logo {
  width: 100% !important;
  max-width: 260px !important;    /* ★パソコン画面での画像の横幅（お好みで調整してください） */
  height: auto !important;
  display: inline-block !important;
}
.works-menu-card h4 {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  margin-bottom: -10px;
  color: #111111;
  font-weight: 500;
}

.works-menu-card h5 {
  font-size: 0.75rem;
  color: #888888;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

.works-menu-card ul {
  list-style: none; /* 点を消す */
  padding: 0;
  margin: 0;
}

.works-menu-card li {
  font-size: 0.85rem;
  line-height: 2.2; /* 行間をゆったり開けて読みやすく */
  color: #333333;
  border-bottom: 1px dashed #c5c5c5; /* 薄い点線を引いて見やすく */
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.works-menu-card li:last-child {
  border-bottom: none; /* 一番最後の点線だけ消す */
}

.works-container {
  display: flex;
  justify-content: space-between;
  gap: 24px;              /* ブロック同士の間隔 */
  flex-wrap: wrap;        /* スマホ対応（狭くなったら縦に並ぶ） */
  margin-top: -20px;
}


.works-item {
  flex: 1;                   /* 3つの幅を均等にする */
  min-width: 280px;          /* スマホの時にこれ以上小さくならず、縦並びにするための境界線 */
  text-align: left;          /* コピーを左寄せにする（中央がよければ center） */
}

/* 💡3つの画像の天地（高さ）を揃えるマジックワード */
.works-item img {
  width: 100%;        /* 3等分された枠幅にぴったり合わせる */
  height: auto;       /* 💡Photoshopで比率を揃えたので、autoにするだけで天地が完璧に揃います */
  margin-bottom: 15px;
}

/* 作品の見出し（h3とh4の両方に対応） */
.works-item h4 {
  font-size: 1.1rem;
  font-weight: 500;
  color: #111111;
  line-height: 1.4;
  margin-top: 10px !important; /* 💡数字を小さくするほど、画像に近づきます。元の余白が広い場合は 5px や 0 にしてみてください */
}

/* 作品の説明文 */
.works-date {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #555555;
  margin-top: -20px !important; 
  text-align: justify;
}







/* ==========================================
   CONTACT（お問い合わせページ）の専用デザイン
   ========================================== */

/* ページ全体の背景や余白の微調整 */
.contact-page-main {
  padding: 50px 0 100px;
  background-color: #ffffff;
}

/* セクションの最大幅（読みやすいスッキリした幅にします） */
.contact-section {
  max-width: 650px;         /* 💡入力しやすいように横幅をキュッと中央に寄せます */
  margin: 0 auto;
  padding: 0 20px;
}

/* タイトルエリア */
.contact-title-area {
  text-align: center;
  margin-bottom: 50px;
}
.contact-main-title {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: #111111;
  margin-bottom: -10px;
}
.contact-sub-title {
  font-size: 0.85rem;
  color: #666666;
  margin-bottom: 20px;
}
.contact-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555555;
}

/* CONTACTセクション全体の文字配置を中央揃えに */
.contact-section {
  text-align: center;
  padding: 60px 20px;
}

.contact-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 40px;
}

/* ★メールエリアを上下の線で囲み、中央に寄せる設定 */
.mail-box-container {
  display: flex;       /* 中身のサイズに合わせて幅を決める */
  justify-content: center;
  align-items: center;
  border-top: 2px solid #cccccc;    /* 上の線（薄いグレー） */
  border-bottom: 2px solid #cccccc; /* 下の線（薄いグレー） */
  padding: 25px 50px;         /* 線の内側の上下左右の余白 */
  margin: 0 auto;
  background-color: #e6f0f5

}



/* メールリンク（画像と文字）の並びとサイズ設定 */
.email-link {
  display: flex;
  align-items: center;
  gap: 15px;                  /* アイコンとアドレスの間の隙間 */
  text-decoration: none;
  color: #003366;             /* アドレスの文字色（お好みで変更してください） */
  transition: opacity 0.3s;
}

.email-link:hover {
  opacity: 0.7;               /* マウスを乗せたときに少し薄くする */
}

/* メールアイコンのサイズ調整 */
.mail-icon {
  width: 32px;                /* アイコンを少し大きめに（現状に合わせて調整してください） */
  height: auto;
}

/* メールアドレスの文字を大きく太く */
.email-address {
  font-size: 24px;            /* 文字の大きさを大きく */
  font-weight: bold;          /* 文字を太字に */
  letter-spacing: 0.03em;
}


 

 

/* ==================================================
   表紙セクション（横型・左右ギリギリレイアウト）の設定
================================================== */
/* 1. 表紙ブロック全体を左右2分割にする */
.fv-section {
  display: flex;
  height: 80vh;         /* 画面の縦幅にほぼぴったり合わせる（下のGALLERYが少し見えてスクロールを促せます） */
  background-color: #e6f0f5; /* 表紙ブロックの背景だけをペールブルーに */
  overflow: hidden;  
  padding-top: 95px; 
}

/* 2. 左側：テキストエリアの装飾と配置 */
.fv-section .left-content {
  flex: 1;
  display: flex;
  align-items: center;       /* 上下の中央に配置 */
  justify-content: center;   /* 左右の中央に配置 */
  padding: 4vw;             /* ★余白も画面幅に比例して縮むように「vw」に変更 */
  font-family: "Yu Mincho", "游明朝", serif; /* 表紙の文字だけを明朝体に */
}

.fv-section .text-inner {
  max-width: 80%;          /* 文章が横に広がりすぎないように制限 */
}

/* タイトル周りの文字サイズや余白 */
.fv-section .sub-title {
  font-size: 1.1vw;
  letter-spacing: 0.1em;
  margin-bottom: 1vw;
  color: #555;
}

.fv-section .main-title {
  font-size:3vw;
  font-weight: normal;
  line-height: 1.5; 
  margin-bottom: 2.5vw;       /* タイトルとCONCEPTの間の余白 */
  color: #666;
}


/* 💡【新しく追加】タイトルの中の「と」だけを小さく、少し薄くする設定 */
.fv-section .main-title span {
  font-size: 2vw;   /* 画面幅に合わせて縮む */
  margin: 0 0.1em;     /* 文字の左右にほんの少しだけ隙間を作ります */
  font-family: "Yu Mincho", "游明朝", serif; 
  color: #666;

}


.fv-section .concept-heading {
  font-size: 1.2vw;
  letter-spacing: 0.0845em;
  line-height: 1.6;
  font-weight: 1.2;
  margin: -0.4vw; 
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 💡中身をすべて右端ベースで整列させます */

}

.fv-section .concept-text {
  font-size: 1vw;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #444;
/* 💡【追加】ボディーコピーの左右の端をピシッと綺麗に揃える魔法のコードです */
  text-align: justify;
}

/* 3. 右側：画像エリア（余白なし・トリミングなしで右端ギリギリへ） */
.fv-section .right-image {
  flex: 1;                   /* ★追加：左側と同じ幅のバランスを保つ */
  display: flex;
  align-items: stretch;    /* ★修正：画像エリアの高さを左側のテキストエリアと常に一致させる */
  background-color: #ffffff;  /* ★追加：もし画像が縮んだ際、画像の背景（白）で隙間を埋めて下を揃える */
}
.fv-section .right-image img {
  display: block;
  width: 100%;               /* ★修正：エリアの横幅いっぱいに広げる */
  height: 100%;              /* ★修正：エリアの縦幅いっぱいに広げる */
  object-fit: cover;       /* 絶対に画像を歪ませない設定 */
  object-position: 50% 20%; 
}

/* 左端の5連画像ブロックの指定 */
.left-image {
  display: flex;
  flex-direction: column; /* 画像を縦一列に並べます */
  gap: 18px;               /* ★画像と画像の間の隙間（お好みで調整してください） */
  padding: 18px 0;         /* ★一番上と一番下にも少し隙間が欲しい場合はこれを入れます */  width: 55px;            /* 画像ブロックの横幅（お好みで調整してください） */
  height: 100%;           /* 表紙の高さぴったりに合わせます */
  background: #e6f0f5;       /* 必要に応じて背景色 */
  flex-shrink: 0;         /* 画面が狭くなっても潰れないようにします */
  box-sizing: border-box; /* ★余白を入れても全体の高さが崩れないようにします */
}

/* 中のリンクと画像の調整 */
.left-image a {
  display: block;
  width: 100%;
  flex: 1;                /* 自動で高さを5等分します */
  height: 0;      
  overflow: hidden;       /* 枠からはみ出た画像を隠します */
}

.left-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 画像を歪ませずに四角くトリミングします */
  display: block;
  transform: scale(2.0);  /* ★ここがポイント！枠の中で画像を【2倍】にガバッと拡大します */
}




/* ==================================================
   ★追加：ヘッドの帯（ヘッダー）を画面最上部に固定する設定
================================================== */
header {  /* お使いのヘッダーのタグ名やクラス名に合わせてください */
  position: fixed;      /* 画面の特定の位置にピン留めする */
  top: 0;               /* 画面の一番上に固定 */
  left: 0;              /* 画面の左端から */
  width: 100%;          /* 横幅いっぱいに広げる */
  z-index: 1000;        /* 他のコンテンツ（画像など）の下に潜り込まないように最前面に設定 */
}

/* ==================================================
   ギャラリーセクションの画像サイズを揃える設定
================================================== */
/* 1. 画像を包む枠（リンク）の設定 */
.gallery-link {
  display: block;        /* リンクエリア全体を四角い箱として扱います */
  text-decoration: none; /* リンクの文字の下線を消します */
}

/* 2. 画像そのもののサイズと切り取り方の設定 */
.gallery-link img {
  display: block;
  width: 100%;           /* 割り当てられた横幅いっぱいに広げる */
  height: 350px;         /* ★ここで高さを全員同じに強制固定します（お好みで 300px〜400px に変えてもOK） */
  object-fit: cover;     /* ★超重要：縦横比を崩さず、指定したサイズいっぱいに敷き詰める */
  object-position: center; /* ★超重要：画像の中心を基準にして、はみ出た上下左右をカットする */
}

/* 3. 作品名（キャプション）の微調整（もし必要であれば） */
.gallery-caption {
  text-align: center;    /* 文字を真ん中に寄せます */
  margin-top: 15px;      /* 画像と文字の間の隙間 */
  font-size: 0.9rem;       /* 文字の大きさ */
  color: #333;           /* 文字の色 */
}

/* 1. 共通のスタイル（文字配置・文字間隔・フォントサイズ） */
.sub-copy,
.subsub-copy,
.subsubsub-copy {
  text-align: center;     /* 文字を真ん中に寄せます */
  letter-spacing: 0.05em;
  /* スマホ（画面が狭いとき）のフォントサイズ */
  font-size: 14px; 
}

/* 2. 各クラス固有のマージン設定 */
.sub-copy {
  margin-top: -25px;
  margin-bottom: 30px;    /* 画像と文字の間の隙間 */
}

.subsub-copy {
  margin-top: -30px;      /* タイトルと文字の間の隙間 */
  margin-bottom: -8px;    /* 画像と文字の間の隙間 */
}

.subsubsub-copy {
  margin-top: 35px;
  margin-bottom: 30px;    /* 画像と文字の間の隙間 */
}








/* ==========================================
   📱 スマホ・タブレット表示用の設定（一括管理）
   ========================================== */
  @media screen and (max-width: 768px) {


/* ★追加：5枚の画像はスマホのときは非表示にする */
.left-image {
   display: flex;
    flex-direction: row;     /* ★縦並びから「横一列」に切り替えます */
    width: 100%;             /* 画面の横幅いっぱいに広げます */
    height: 50px;            /* ★縦幅を「50px」にして、細い可愛い帯にします */
    gap: 5px;                /* 画像どうしの隙間を少し詰めます */
    padding: 5px 10px;       /* 左右に少しだけ余白を作ります */
    background: #eef4f8;     /* 表紙の淡いブルー背景に馴染ませる色（お好みで変えてください） */
    box-sizing: border-box;
    margin-bottom: 15px;     /* ➔ これより下のテキストとの間隔を15pxに縮めます */
  }

   /* 横並びになった5枚のリンクの調整 */
  .left-image a {
    display: block;
    flex: 1;                 /* 画面の横幅を5等分してぴったり収めます */
    height: 100%;            /* 高さを50pxいっぱいに合わせます */
  }

 /* 枠の中の画像のクローズアップ（パソコンの設定をスマホ用に調整） */
  .left--image img {
    transform: scale(1.5);   /* ★スマホの枠に合わせて、拡大率を「1.5倍」程度に優しくします */
  }

  
  .left-content {
    font-size: 1.6rem;       /* スマホ用の文字の大きさ */
    right: 5%;               /* 右側のすき間を少し詰める */
  }
  
  .main-sub-copy {
    font-size: 0.95rem;      /* スマホ用の文字の大きさ */
    left: 15%;               /* 左側の位置を少し詰める */
  }

/* 1. 一番外側のセクションに左右の余白（空き）を作る */
.gallery-section {
  padding-left: 20px;   /* 👈 ここで画面の端に20pxの空きを作ります */
  padding-right: 20px;  /* 👈 ここで画面の端に20pxの空きを作ります */
  box-sizing: border-box; /* 余白を含めて画面幅に収める設定 */
}

/* 2. 画像を並べるコンテナ（箱）の設定 */
.gallery-grid-container {
  display: flex;
  flex-wrap: wrap;       /* 折り返しを許可 */
  justify-content: space-between; /* 2つの画像を左右の端に綺麗に配置 */
  gap: 15px 10px;        /* 上下の隙間 15px、左右の隙間 10px */
  margin-top: 30px;
 /* 👇 左右に引っ張るのではなく、画像の箱全体の横幅を「90%」に少し狭めます */
  width: 90%;
  
  /* 👇 狭めた箱を、画面の「真ん中」にピタッと配置します */
  margin-left: auto;
  margin-right: auto;
}



/* 3. 画像1つあたりの枠の幅（スマホで2列にするための設定） */
.gallery-grid-item {
  /* 左右の余白を引いた画面幅に対して、約半分（48%）のサイズにします */
  width: 48%; 
  box-sizing: border-box;
}

/* 4. 【重要】画像が枠からはみ出さないようにする設定 */
.gallery-img-box img {
  width: 100%;          /* 親要素（48%）の幅いっぱいに自動調整します */
  height: auto;         /* 縦横比を保ちます */
  display: block;
}

/* 5. キャプション（文字）の設定 */
.gallery-caption {
  text-align: center;
  font-size: 12px;      /* スマホで見やすいサイズに調整 */
  margin-top: 8px;
  color: #333;
}

/* リンクの下線を消す */
.gallery-link {
  text-decoration: none;
  color: inherit;
}
 
  
  /*表紙*/
   .fv-section {
    flex-direction: column;   /* 横並びから「縦並び」に変更（gridの場合は display: block; に変更してください） */
    display: flex;            /* 念のためflexを設定 */
    align-items: stretch;     /* ★上詰めしつつ、中の要素を横幅いっぱいに広げます */
    height: auto;            /* ★スマホの時は中身の量に合わせて自動で高さが伸び縮みするようにします */
    margin-top: -30px;        /* お好みで数字を変更してください */
  }
  

  /* 左側：テキストエリアの調整 */
  .left-content {
   width: 100% !important;   /* 横幅を画面いっぱいに */
    padding-left: 0 !important; /* ➔ 左のクッションをゼロに */
    padding-right: 0 !important;/* ➔ 右のクッションをゼロに */
    margin: 0 !important;       /* ➔ 外側の余計な隙間もゼロに */
  }

  .text-inner {
    width: 100%;              /* ➔ 文字の箱を画面いっぱいの92%までグッと広げます */
    margin-left: auto;       /* ➔ 左右中央に綺麗に配置します */
    margin-right: auto;
  
  }

  /* キャッチコピーなどの文字サイズ調整 */
  .sub-title {
    font-size: 13px!important; 
    margin-top: -10px !important;    /* 💡マイナスマージンを使って上に引き上げます */
    margin-bottom: 10px  /* 下（メインタイトル）との隙間を少し詰めます */
  }

  .main-title {
    font-size: 30px !important;        /* 「えんぴつと筆とデザイン」を大きく読みやすく */
    line-height: 1.3;
    margin: 10px 0px 15px 0px!important;
    letter-spacing: -0.05em
  }

  /* タイトル（.main-title）の中にある <span>（＝「と」の文字）だけの指定 */
  .main-title span {
    font-size: 0.65em !important;       /* ★「と」の文字の大きさを、周りの文字の「60%」のサイズに小さくします */
    padding: 0 4px;         /* 小さくなった分、左右にわずかな隙間（クッション）を作ってバランスをとります */
    vertical-align: middle; /* 小さくなった文字が下に沈まないよう、上下中央の高さに揃えます */
    letter-spacing: -0.1em
  }

  .concept-heading {
    font-size: 13px!important;          /* 「一枚の紙から〜」の見出しサイズ */
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .concept-text {
    font-size: 7px!important;          /* 長文テキストをスマホで読みやすいサイズに */
    line-height: 1.7;         /* 行間を広げて読みやすく */
  }

  /* 右側：画像エリアの調整 */
  .right-image {
    width: 100% !important;   /* 画像の枠も横幅いっぱいに */
  }

  .right-image img {
    width: 100%;              /* 画像自体を横幅ぴったりに広げる */
    height: auto;             /* 縦横比を完全に維持 */
    display: block;           /* 下部に謎の隙間ができるのを防ぐ */
  }


   /* 1. ヘッダー全体の高さ（上下の余白）を狭くして、帯をスマートにする */
  header {
    padding: 5px 15px;      /* 上下の余白を狭くし、左右に少しだけ隙間を作ります */
    min-height: auto;        /* もし高さが固定されていたら解除します */
  }

  /* 2. 左側の「WORK2のWORKS」のロゴ文字を少し小さくする */
  header h1 {
    font-size: 1.2rem;       /* 1行に収まるように少しサイズを縮めます */
    margin: 0;
  }

  /* 3. 右側のメニュー（HOME GALLERY...）全体の文字サイズと間隔を調整 */
  header nav ul {
    gap: 8px;                /* メニュー文字どうしの隙間を少し詰めます */
  }

  header nav ul li a {
    font-size: 0.50rem;      /* 文字を少し小さくして、右端が切れないようにします */
    padding: 4px 0;          /* 押しやすさを維持しつつ、上下の余白を調整 */
  }


 /* --- 📱 GALLERYエリアのスマホ2列・2行最適化 --- */

/* 1. 上のブロック（OUR WORKS）の上下の余白設定 */
.gallery-page-header {
  padding-top: 5px !important;     /* 上の黒ベタとの隙間（ご自身が調整したバッチリな状態） */
  padding-bottom: 0px !important;  /* 下側の余白を0にして、渋滞を解消します */
}

/* 1行目（h2）と2行目（p）の間の設定 */
.gallery-page-header h2 {
  margin-top: 0 !important;
  margin-bottom: 0px !important;   /* 1行目と2行目の間の隙間を8pxにします */
}
.gallery-page-header p {
  margin-top: 0 !important;        /* ブラウザの勝手な隙間をリセット */
  margin-bottom: 0 !important;
}





/* 1. 上のブロック（OUR WORKS）の上下の余白設定 */
.gallery-grid-container {
    display: flex !important;        /* 💡念のためflexを強制適用 */
    flex-direction: row !important;  /* 横方向に並べる */
    flex-wrap: wrap !important;      /* 2つ並んだら自動で次の行に折り返す */
    gap: 30px 16px !important;       /* スマホ用のすき間（上下30px、左右16px） */
    padding: 0 3px !important;      /* 画面の左右カツカツになるのを防ぐ */
    justify-content: center !important;
  }

  .gallery-grid-item {
    /* 画面の50%の幅から、左右のすき間（16pxの半分＝8px）を引いたピッタリサイズ */
    flex: 0 0 calc(50% - 8px) !important; 
    min-width: 0 !important;          /* 幅の制限を一度完全にクリア */
    margin: 0 !important;
    text-align: center !important;    /* 中身の画像と文字を中央揃えに */
  }

  

  /* 💡ここが重要：ブロックの中の画像サイズを枠（50%）にピッタリ合わせる */
  .gallery-img-box img {
    width: 100% !important;           /* 枠の幅いっぱいに画像を広げる */
    height: auto !important;          /* 縦横比を完全に維持してボケや歪みを防ぐ */
    display: block !important;
    margin-bottom: 10px !important;   /* 画像とその下の文字（キャプション）とのすき間 */
  }

  /* 画像の下の文字（キャプション）の調整 */
  .gallery-caption {
    font-size: 11px !important;       /* スマホ用に文字を一回り小さく */
    line-height: 1.4 !important;
    color: #333333 !important;        /* 文字の色（お好みに合わせて変更してください） */
    margin: 0 !important;
  }


  /* DOG.dessanエリアのスマホ2列・2行最適化  上と整える要素あり--- */

  .gallery-page-grid {
    display: flex !important;        /* 💡念のためflexを強制適用 */
    flex-direction: column !important; /* 💡row から column（縦並び）に変更 */
    ap: 40px 0 !important;            /* 💡縦に並ぶので、上下のすき間（40px）だけを設定 */
    padding: 0 15px !important;        /* 💡左右の余白を少し広げて、画面端にピタッとくっつかないように調整 */
    align-items: center !important;    /* 💡中央揃えにします */
  }

  .gallery-page-item {
    /* 画面の50%の幅から、左右のすき間（16pxの半分＝8px）を引いたピッタリサイズ */
    flex: 0 0 calc(50% - 8px) !important; 
    min-width: 0 !important;          /* 幅の制限を一度完全にクリア */
    margin: 0 !important;
    text-align: center !important;    /* 中身の画像と文字を中央揃えに */
  }

  /* 💡ここが重要：ブロックの中の画像サイズを枠（50%）にピッタリ合わせる */
  .gallery-page-image img {
    width: 100% !important;           /* 枠の幅いっぱいに画像を広げる */
    height: auto !important;          /* 縦横比を完全に維持してボケや歪みを防ぐ */
    display: block !important;
    margin-bottom: 10px !important;   /* 画像とその下の文字（キャプション）とのすき間 */
  }

  /* 画像の下の文字（キャプション）の調整 */
  .gallery-page-caption {
    font-size: 11px !important;       /* スマホ用に文字を一回り小さく */
    line-height: 1.4 !important;
    color: #333333 !important;        /* 文字の色（お好みに合わせて変更してください） */
    margin: 0 !important;
  }

/* worksの設定 */
  .works-block{
    margin-top: 0 !important;      /* スマホ時の上の詰まりをリセット */
    padding: 30px 15px !important; /* スマホ用の上下左右のクッション */
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* スマホ画面に合わせて、画像を一回り小さく上品なサイズにします */
  .project-logo {
    max-width: 200px !important;   /* ★スマホ画面での画像の横幅（お好みで調整してください） */
  }

 /* 4列の並びをスマホ用に縦一列にする設定 */
  
  .works-menu-grid {
    display: flex !important;       
    flex-direction: column !important; 
    gap: 20px !important;           
    width: 100% !important;
    padding: 0 15px !important;     
    box-sizing: border-box !important;
  }

  /* ★すっきり整理：すべてのブロック（div）の天地を縮めます */
  .works-menu-grid > div {
    width: 100% !important;         
    max-width: none !important;
    height: auto !important;        
    padding-top: 10px !important;    /* 上の余白を狭く */
    padding-bottom: 5px !important; /* 下の余白を狭く */
  }

  /* ブロック内の文字どうしの隙間を狭くします */
  .works-menu-grid > div * {
    margin-top: 0 !important;       
    margin-bottom: 8px !important;  
  }

  /* ワークスメニュー内の <h5> タグだけを狙って上に引き上げる設定 */
  


  /* 1. 上のブロック（co）の上下の余白設定 */
  .contact-page-main {
   padding-top: 5px !important;     /* 上の黒ベタとの隙間（ご自身が調整したバッチリな状態） */
   padding-bottom: 0px !important;  /* 下側の余白を0にして、渋滞を解消します */
}


/* テキストの文字切れが気になるので調整 */
  .contact-desc {
  font-size: 0.8rem;
  line-height: 1.8;
  color: #555555;
}

  /* 2. メールアドレスを少し小さくして、絶対に1行に収める */
  .email-address {
    font-size: 18px; /* もしこれでも2行になる場合は 14px ほどに下げてみてください */
    white-space: nowrap; /* 絶対に途中で改行させないという魔法の命令です */
    letter-spacing: 1; /* 文字と文字の間隔を少し詰めて収まりを良くします */
  }

   /* アイコンとアドレスが横並びで中央に綺麗に収まるように調整 */
  .email-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* アイコンと文字の間のすき間 */
    flex-wrap: nowrap; /* 全体を折り返させない */
  }


  .mail-box-container {
    padding: 25px 60px; 
    display: flex;        /* 線の内側の上下左右の余白 */
    align-items: center;
 }

  .sub-copy,
  .subsub-copy,
  .subsubsub-copy {
    font-size: 18px; /* パソコンで見せたい大きさ */
  }


/* 3. 各クラス固有のマージン設定（前回と同様） */
.sub-copy { margin-top: -25px; margin-bottom: 30px; }
.subsub-copy { margin-top: -30px; margin-bottom: -8px; }
.subsubsub-copy { margin-top: 35px; margin-bottom: 30px; }

/* ↓ 768pxの波カッコの中にこれを追加します */
  header#home {
    display: flex;
    flex-wrap: wrap;       /* 画面幅が狭くなったら自動で折り返す */
    justify-content: space-between;
    align-items: center;
  }

  /* さらに画面が狭いスマホ（横幅480px以下）での微調整 */
  @media screen and (max-width: 480px) {
    header#home h1 {
      font-size: 18px;     /* ロゴの文字を少し小さくして1行に収める */
    }
    .menu-list li a {
      font-size: 11px;     /* メニューの文字も少し小さく */
    }
    .menu-list {
      gap: 8px;            /* メニュー同士の隙間を少し詰める */
    }
  }

  
 }/* ← 一番最後のこの閉じカッコを消さないように注意してください */