/* .Work */

.section-work{
    margin-top: 120px;
    display: flow-root;
}

.section_topicWork{
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.section_topicWork::first-letter {
    font-size: 4.8rem;  
    font-weight: bold;    
    float: inherit;         
    margin-right: -4px;   
    line-height: 0.4;       
}

/* 1. タイトル（Work）の設定：中央に配置 */
.section_topicWork {
  text-align: center;
  margin-bottom: 40px; /* 画像との間のすき間（お好みで調整） */
}

/* 2. 画像を囲む親要素：2つの画像を横並びにして中央に配置 */
.work_preview {
  display: flex;
  align-items: flex-end;   /* パソコンとスマホの下のラインを揃える */
  gap: 40px;               /* パソコンとスマホの間のすき間 */
  max-width: 1060px;       /* 画面全体での最大の横幅（ここで全体の大きさを調整） */
  margin: 0 auto;          /* 画面の真ん中に固定 */
  padding: 0 20px 0 48px;         /* スマホ画面での左右のはみ出し防止 */
  box-sizing: border-box;
}

/* 3. パソコンの画像サイズ（画質を保ちながら大きく） */
.work_photoMac {
  width: 60%;              /* 親要素（1200px）に対して60%の大きさ */
  max-width: 700px;        /* パソコン画像の最大サイズ */
  height: auto;            /* 縦横比を維持して画質劣化を防ぐ */
  object-fit: contain;
}

/* 4. スマホの画像サイズ（画質を保ちながら大きく） */
.work_photoMobile {
  width: 20%;              /* 親要素に対して25%の大きさ */
  max-width: 300px;        /* スマホ画像の最大サイズ */
  height: auto;            /* 縦横比を維持して画質劣化を防ぐ */
  object-fit: contain;
}



.work_content{
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px;
}

.work_product{
    display: block;
    margin-top: 48px;
    justify-items: flex-start;
}

.work_need{
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.work_productAnswer{
    display: block;
    margin-top: 48px;
    justify-items: flex-start;
}
.work_answer{
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    flex-wrap: wrap;
}

/* 1. 全体のレイアウト（左右の配置） */
.sitemap-container {
  display: flex;
  align-items: center; /* 上下の中央揃え */
  justify-content: center;
  gap: 60px;          /* 左のボタンと、右のリストの間の距離（線の長さになります） */
  position: relative;
  padding: 20px;
  margin-bottom: 120px;
  margin-top: 80px;
}

/* 2. 白いボタンの共通デザイン */
.sitemap-top,
.sitemap-list li {
  font-family: "Hiragino Mincho ProN";  
  background-color: #ffffff;
  color:#69A0CA;
  width: 100px;       /* ボタンの横幅（文字量に合わせて調整してください） */
  padding: 10px 0;
  text-align: center;
  position: relative; /* 線を配置する基準点 */
}

/* 3. 右側のリストの並び */
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;          /* ボタン同士の上下の隙間 */
  position: relative;
}

/* ===================================================
   💡 ここから「枝分かれの線」を作る記述
   =================================================== */

/* 【中央の横一本線】Topから右へ伸びる線 */
.sitemap-container::before {
  content: "";
  position: absolute;
  left: calc(50% - 50px); /* 画面中央（Topの右端）付近からスタート */
  top: 50%;
  width: 50px;            /* 横線の長さ */
  height: 1px;            /* 線の太さ */
  background-color: #ffffff;
}

/* 【右側の縦一本線】4つのボタンを繋ぐ縦のメイン線 */
.sitemap-list::before {
  content: "";
  position: absolute;
  left: -30px;           /* ボタンの左側に配置 */
  top: 18px;             /* 1番上のボタンの中央 */
  bottom: 18px;          /* 1番下のボタンの中央 */
  width: 1px;            /* 線の太さ */
  background-color: #ffffff;
}

/* 【各ボタンから左に伸びる短い横線】 */
.sitemap-list li::before {
  content: "";
  position: absolute;
  left: -30px;           /* 縦線がある位置から */
  top: 50%;
  width: 30px;           /* ボタンの左端まで伸ばす */
  height: 1px;           /* 線の太さ */
  background-color: #ffffff;
}

.flex-gallerySP{
  display: flex;
  justify-content: center;
  gap: 40px; /* 列同士の隙間 */
  max-width: 400px;
  margin: 0 auto;
}
.gallery-columnSP {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 上下の画像同士の隙間 */
  width: 50%; /* 2列なので半分ずつ */
}
.gallery-columnSP img {
  width: 100%;
  height: auto;
}

.flex-galleryPC{
  display: flex;
  justify-content: center;
  gap: 40px; /* 列同士の隙間 */
  max-width: 400px;
  margin: 0 auto;
  margin-top: 84px;
  margin-bottom: 84px;
}
.gallery-columnPC {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 上下の画像同士の隙間 */
  width: 50%; /* 2列なので半分ずつ */
}
.gallery-columnPC img {
  width: 100%;
  height: auto;
}



/* .Work pc */
@media screen and (min-width:769px) {

   
    .section_topicWork{
        font-size: 9.6rem;
        display: block;
        margin-left: 42px;
        margin-bottom: 64px;
        margin-top: 160px;
    }

    .section_topicWork::first-letter {
        font-size: 28.4rem;  
        font-weight: bold;    
        float: inherit;         
        margin-right: -48px;   
        line-height: 0.01;        
    }

     .workphoto_sp{
      display: none;
    }
    .workphoto_pc{
        display: flex;
        padding: 0 20px;
        max-width: 100%;
        margin: 0 auto; 
    }

    .work_tittle{
        font-size: 3rem;
        margin-top: 90px;
    }
    .work_preview {
        gap: 20px;             /* 画面が狭くなったら画像同士の間隔を狭くする */
    }
    .pc_content{
        display: flex;
        justify-content: center;
        margin-top: 84px;
        margin-bottom: 120px;
        padding: 20px;
    }

    .work_product{
    margin-top: 0;
    }

    .work_need{
        font-size: 1.8em;
    }

    .work_productAnswer{
        display: block;
        justify-items: flex-start;
        margin-top: 0;
    }
    .work_answer{
        font-size: 1.6rem;
    }


    .sitemap-container {
        margin-top: 0;
        margin-bottom: 0;
    }

    .flex-gallerySP {
    align-items: flex-start;
    gap: 15px;               /* 画像と画像の間隔 */
    max-width: 1400px;  
    margin-bottom: 48px;
    padding: 18px;
  }

  /* 親のdivを透明化し、7枚をダイレクトに横並びにする */
  .gallery-columnSP {
    display: contents;       
  }

  /* 7枚の画像それぞれのサイズ（7枚均等に並べるための計算） */
  .flex-gallerySP img {
    /* 100% ÷ 7枚 ≒ 約14.2% から隙間分を引く */
    width: calc(14.2% - 13px); 
    max-width: 180px;        /* 1枚あたりの最大の大きさ（お好みで調整） */
  }
 
  /* 左の箱（奇数グループ）の中身の並び順指定 */
  .gallery-columnSP:nth-of-type(1) img:nth-of-type(1) { order: 1; } /* 1_SP.png */
  .gallery-columnSP:nth-of-type(1) img:nth-of-type(2) { order: 3; } /* 3_SP.png */
  .gallery-columnSP:nth-of-type(1) img:nth-of-type(3) { order: 5; } /* 5_SP.png */

  /* 右の箱（偶数グループ）の中身の並び順指定 */
  .gallery-columnSP:nth-of-type(2) img:nth-of-type(1) { order: 2; } /* 2_SP.png */
  .gallery-columnSP:nth-of-type(2) img:nth-of-type(2) { order: 4; } /* 4_SP.png */
  .gallery-columnSP:nth-of-type(2) img:nth-of-type(3) { order: 6; } /* 6_SP.png */
  .gallery-columnSP:nth-of-type(2) img:nth-of-type(4) { order: 7; } /* 7_SP.png */



  
  .flex-galleryPC {
    display: flex;
    justify-content: center; /* 4枚全体を画面中央に寄せる */
    align-items: flex-start; /* 画像の上端のラインを揃える */
    gap: 20px;               /* 画像と画像の間隔（お好みで調整） */
    max-width: 1400px;       /* 全体の最大幅（大きく広げたい場合は数値を上げる） */
    margin: 0 auto;          /* 全体を真ん中に固定 */
    width: 100%;
    margin-bottom: 48px;
    padding: 18px;
  }

  /* 【重要】現在の「左列（1枚）」と「右列（3枚）」の枠組みを無視して、4枚を直列にする */
  .gallery-columnPC {
    display: contents;       /* 親のdivを透明化し、中身のimgをダイレクトに横並びにする */
  }

  /* 4枚の画像それぞれのサイズ（画質を保ったまま綺麗に縮小拡大） */
  .flex-galleryPC img {
    width: calc(25% - 15px); /* 4枚で画面幅を均等に分ける計算（100%÷4 − 隙間分） */
    max-width: 350px;        /* 1枚あたりの最大の大きさを制限（画質維持のため） */
    height: auto;            /* 縦横比を完全に維持して画質劣化を防ぐ */
    object-fit: contain;     
    display: block;
  }
}
 



/* pc 769px */