body {
    background-image: url(../img/HomeBack.jpg);
  }

  .hero {
    background: url('../img/Hero.jpg') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
  } 

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1.2s 0.3s forwards;
  }

  .catch {
    font-family: "BIZ UDPMincho", serif;
    font-weight: 500;
    font-style: normal;
  }

  .hero-content h1{
    font-size: 4rem;
  }

  .hero-content h3{
    font-size: 2.2rem;
  }

  .Hero-Logo {
    width: 30%;
    height: auto;
  }


  @keyframes fadeIn {
    to { opacity: 1; }
  }

  .TitleImgA {
    margin: 1%;
    width: 20%;
    height: auto;
  }

  .List {
    width: 80%;
  }

  .ServiceList {
    text-align: center;
  }

  .ServiceTXT {
    color: white;
    margin-left:9%;
    font-size: 30px;
  }

  .TitleImgB {
    margin: 1%;
    width: 17%;
    height: auto;
  }

  .Works {
    list-style: none;
    color: gold;
  }

  .Works li {
    margin-left: 9%;
    font-size: 30px;
  }

  .sp {
    display: none;
  }

  .Gallery {
    justify-content: center;
    display: flex;
    flex-wrap: nowrap;
  }

  .Gallery img {
    margin: 5px;
    width: 13%;
  }

  .FlowTitle {
    margin: 1%;
    width: 14%;
    height: auto;
  }

  .Flow h1 {
    color: white;
    text-align: center;
  }

  .Flow h2 {
    color: white;
    text-align: center;
  }

  .Flow li {
    font-size: 40px;
    color: white;
    margin-left: 15%;
  }

  .Flow p {
    font-size: 25px;
    color: white;
    margin-left: 18%;
  }

  .ContactTitle {
    margin: 2%;
    width: 20%;
    height: auto;
  }

  /* SNSエリア */
    .sns-area {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* 共通ボタン（黒背景上） */
    .sns-btn {
    width: 32px;
    height: 32px;
    background: #fff;              /* 黒背景対策 */
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }

  /* アイコン画像 */
  .sns-btn img {
    display: block;
  }

  /* 個別サイズ */
  .sns-btn.x img {
    width: 18px;
    height: 18px;
  }

  .sns-btn.yt img {
    width: 20px;
    height: 20px;
  }

  /* ホバー（黒背景でも自然） */
  .sns-btn:hover {
    background: #eaeaea;
    box-shadow: 0 0 6px rgba(255,255,255,0.25);
    transform: translateY(-1px);
  }

  /* キーボード操作対応 */
  .sns-btn:focus-visible {
    outline: 2px solid #1abc9c;
    outline-offset: 3px;
  }

  /* ダーク背景専用 微調整 */
  footer .sns-btn {
    border: 1px solid rgba(255,255,255,0.15);
  }

  .pc {
    display: block;
  }

  .Contact {
    color: white;
    text-align: center;
  }

  .Contact ul {
     width: fit-content;
     margin: auto;
     font-size: 40px;
  }

/*スマホ*/
@media (max-width: 768px) {
  .hero {
    background: url('../img/HeroPhone.jpg') center/cover no-repeat;
    height: 85vh;
    padding: 2rem 1rem;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content h3 {
    font-size: 1.3rem;
  }
  .Hero-Logo {
  width: 40%;
  height: auto;
  }

  .TitleImgA {
    width: 40%;
    height: auto;
  }

  .List {
    width: 100%;
  }

  .ServiceTXT {
  color: white;
  margin-left:5%;
  font-size: 20px;
  }

  .TitleImgB {
    width: 38%;
    height: auto;
  }

  .Works li {
    margin-left: 5%;
    font-size: 10px;
  }

  .Gallery img {
    margin: 1%;
    width: 20%;
  }

  .sp {
    display: block;
  }

  .FlowTitle {
    width: 30%;
    height: auto;
  }

   .Flow h1 {
    font-size: 25px;
  }

  .Flow h2 {
    font-size: 13px; 
  }

  .Flow li {
    font-size: 22px;
    margin-left: 1%;
  }

  .Flow p {
    font-size: 11px;
    margin-left: 2%;
  }

  .ContactTitle {
      width: 40%;
      height: auto;
      margin-left: 2%;
  }

  .Contact ul {
     font-size: 20px;
  }
}