/* 全体設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
body {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ W3', 'メイリオ', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background-color: #f3e4b7;
    color: #333;
  }
  
h1, h2, h3 {
    text-align: center;
  }
  
a {
    text-decoration: none;
    color: #333;
  }
  
ul {
    list-style: none;
  }

.wrapper {
    position: fixed;
    max-width: 100%;
    margin: auto;
    padding: 0 1.5rem;
  }

/* フェードイン画像 */
#transition-image {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   background-color: #fff;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   animation: fadeInOut 4s ease forwards;
  }

#transition-image img {
  width: 200px;
  animation: fadeInOutImage 4s ease forwards;
  }

@keyframes fadeInOut {
  0% {
      opacity: 1;
   }
  50% {
      opacity: 1;
   }
  100% {
      opacity: 0;
      visibility: hidden;
   }
  }

@keyframes fadeInOutImage {
  0% {
      opacity: 0;
   }
  50% {
      opacity: 1;
   }
  100% {
      opacity: 0;
   }
  }

/* 背景レコード画像 */
#background-record {
  position: fixed;
  top: 50%;
  left: -17%;
  transform: translateY(-50%);
  width: 35%; /* サイズをさらに調整 */
  height: 100vh;
  background: url('images/record01_resize00.png') no-repeat;
  background-size: contain;
  animation: spin 20s linear infinite; /* 背景レコード画像回転 */
  background-position: center;
}

@keyframes spin {
  from {
      transform: translateY(-50%) rotate(0deg);
   }
  to {
      transform: translateY(-50%) rotate(360deg);
   }
 }

/* プロジェクトグリッド */
.project-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 50px;
  flex-wrap: wrap;
  text-align: center;
}

.project-card {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.project-card2 {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.project-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover img {
  transform: translateX(-100%);
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.5s ease;
}

/* マウスオーバー時の切り替え画像 */
.project-card[data-hover="neko_01.png"]:hover::before {
  background-image: url('images/neko_01.png');
  transform: translateX(-100%);
}

.project-card[data-hover="kawauso.png"]:hover::before {
  background-image: url('images/kawauso.png');
  transform: translateX(-100%);
}

.project-card[data-hover="packman.png"]:hover::before {
  background-image: url('images/packman.png');
  transform: translateX(-100%);
}

.project-card[data-hover="kika_navy.png"]:hover::before {
  background-image: url('images/kika_navy.png');
  transform: translateX(-100%);
}

.project-card[data-hover="flower_mono.png"]:hover::before {
  background-image: url('images/flower_mono.png');
  transform: translateX(-100%);
}

.project-card[data-hover="dolphin.png"]:hover::before {
  background-image: url('images/dolphin.png');
  transform: translateX(-100%);
}

  
  /* ヘッダー設定 */
  .header {
    background-color: #cd342f;
    color: white;
    width: 100%;
    padding: 10px;
    /* position: fixed; */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .header-content img {
    width: 200px;
    margin-right: 10px;
    padding-top: 5px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  /* ナビゲーション */
  .nav {
    display: flex;
    gap: 20px;
  }
  
  .nav ul {
    display: flex;
    gap: 20px;
  }
  
  .nav a {
    color: white;
    font-size: 1.1em;
  }
  
  .nav a:hover {
    color: #f1c40f;
  }
  
  /* ハンバーガーメニュー */
  .hamburger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
  }
  
  .hamburger-menu .bar {
    width: 30px;
    height: 3px;
    background-color: white;
  }
  
  
    
  
  /* メインコンテンツ設定 */
  .main-content {
    max-width: 960px;
    margin: 0 auto; /* 横幅960pxに制限し中央寄せ */
    padding: 20px;
  }
  
  /* プロジェクトセクション */
  .projects {
    padding: 60px 20px;
    padding-top: 100px; /* ヘッダー分のスペースを確保 */
    /* background-color: #f3e4b7; */
  }

  .projects h2 {
    font-size: 2rem;
    letter-spacing: 0.5rem;
  }
  .projects p {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1rem;
  }
  
  .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
  }

  .project-grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
  }
  
  .project-card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .project-card:hover {
    transform: scale(1.05);
  }
  
  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 正方形に合わせて画像切り取り */
  }
  
  .project-card h3 {
    margin-top: 15px;
    font-size: 1.5em;
  }

/* 誘導ボタン   */
  .container {
    text-align: center;
    margin: 0 auto;
    width: 200px;
  }

  .hover-effect_slide {
      position: relative;
      display: inline-block;
      padding: 0.6em 1.8em;
      font-size: 1rem;
      font-weight: bold;
      color: #183153;
      text-decoration: none;
      user-select: none;
      border: 4px #183153 solid;
      transition: 0.2s ease;
      width: 100%;
      text-align: center;
      border-radius: 5px;
      margin-top: 20px;
    }
    
    .hover-effect_slide::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 0;
      height: 100%;
      content: "";
      background-color: #183153;
      transition: 0.2s ease;
    }
    
    .hover-effect_slide:hover {
      color: #fff;
    }
    
    .hover-effect_slide:hover::before {
      width: 100%;
      background: #183153;
    }
  
  /* 自己紹介セクション */
  .about {
    padding: 100px 20px;
    text-align: center;
  }
  
  .about h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    letter-spacing: 0.5rem;
  }
  
  /* 自己紹介の2カラムレイアウト */
  .about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* 画像とテキストの間にスペース */
    flex-wrap: wrap; /* モバイル表示時に縦並びにする */
    margin-top: 2.5rem;
  }
  
  .about-image {
    flex: 0 0 200px; /* 固定サイズで画像の幅を設定 */
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 画像を円形にする */
    overflow: hidden; /* 画像が円形からはみ出さないように */
  }
  
  .about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を円形内に収める */
  }
  
  .about-text {
    flex: 1;
    max-width: 600px; /* テキストの最大幅設定 */
    font-size: 1rem;
    line-height: 1.6;
    text-align: left; 
  }
  
  /* お問い合わせフォーム */
  .contact {
    background-color: #cd342f;
    color: white;
    padding: 60px 20px;
  }

  .contact h2 {
    font-size: 2rem;
    letter-spacing: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .contact form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .contact form input,
  .contact form textarea {
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    border: none;
  }
  
  .contact form button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #183153;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 auto; 
    box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: none;
  }

  .contact form button:after {
    content: " ";
    width: 0%;
    height: 100%;
    background: #FFD401;
    position: absolute;
    transition: all 0.4s ease-in-out;
    right: 0;
   }

  .contact form button:hover::after {
    right: auto;
    left: 0;
    width: 100%;
   }

  .contact form button span {
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 10px 25px;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
   }

  .contact form button:hover span {
    color: #183153;
    animation: scaleUp 0.3s ease-in-out;
   }

   @keyframes scaleUp {
    0% {
     transform: scale(1);
    }
   
    50% {
     transform: scale(0.95);
    }
   
    100% {
     transform: scale(1);
    }
   }

  /*.contact form button:hover {
     background-color: #e67e22; 
    right: auto;
    left: 0;
    width: 100%;
  }*/
  
  .banner p {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1rem;
  }

  .banner img {
    display:flex;
    flex-direction: column;
  }

  /* フッター */
  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    position: relative;
    bottom: 0;
  }
  
  /* ページトップボタン */
  /*.pagetop {
     position: fixed;
    right: 5%;
    bottom: 7%;
    width: 80px;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    transition: .3s;
    z-index: 100;
    opacity: 0;
    visibility: hidden; 

    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #8b4c39;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    display: none;
    cursor: pointer;
  }*/
  #pagetop {
    position: fixed;
    bottom: 2px;
    right: 30px;
}
  /* #page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    line-height: 1;
    z-index: 99;
  }
  #page-top a {
    background: #72C7CA;
    text-decoration: none;
    color: #fff;
    padding: 28px 5px;
    text-align: center;
    display: block;
    border-radius: 50%;
    opacity: 0.9;
    transition: all .3s ease;
  } */
  
  #page-top a:hover {
    text-decoration: none;
    opacity: .5;
  }
  
  /* .pagetop:hover {
    background-color: #f1c40f;
  } */
  
  /* スマートフォン表示（最大480px） */
  @media screen and (max-width: 480px) {
    .header-content {
      flex-direction: column;
      text-align: center;
    }
  
    .header-content h1 {
      font-size: 2em;
    }
  
    /* ナビゲーションメニューは最初非表示 */
    .nav {
      display: none;
      width: 100%;
      background-color: #cd342f;
      position: absolute;
      top: 70px;
      left: 0;
      padding: 20px 0;
      text-align: center;
    }
  
    .nav ul {
      display: block;
      gap: 20px;
    }
  
    .nav a {
      display: block;
      margin: 10px 0;
      font-size: 1.2em;
    }
  
    /* ハンバーガーメニューを右側に配置 */
    .hamburger-menu {
      display: flex;
      position: absolute;
      top: 20px;
      right: 20px;
    }
  
    /* ナビゲーションが表示された時 */
    .nav.active {
      display: block;
    }

    .projects {
      padding-top: 80px; /* ヘッダー分のスペースを調整 */
    }

   /* メインコンテンツ */
   main {
      text-align: center;
      margin: 0 auto;
      max-width: 100%; 
      padding: 0 10px;
    }

    /* スマートフォン時に2カラム表示 */
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); 
      gap: 10px;
    }

    .project-grid2 {
      display: grid;
      grid-template-columns: repeat(1, 1fr); 
      gap: 2rem;
    }

    .project-card {
      position: relative;
      max-width: 400px;
      max-height: 400px;
      overflow: hidden;
      margin: 0 auto;
    }

    .project-card2 {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
      margin: 0 auto;
    }

    .project-card img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .project-card:hover img {
      transform: translateX(-100%);
    }

    .project-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 100%;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.5s ease;
   }

   .project-card[data-hover="neko_01.png"]:hover::before {
    background-image: url('images/neko_01.png');
    transform: translateX(-100%);
   }

   .project-card[data-hover="kawauso.png"]:hover::before {
    background-image: url('images/kawauso.png');
    transform: translateX(-100%);
   }

  .project-card[data-hover="packman.png"]:hover::before {
    background-image: url('images/packman.png');
    transform: translateX(-100%);
  }

  /* スマートフォン表示時に自己紹介部分を縦並び */
    .about-content {
      flex-direction: column; /* モバイルでは縦並び */
      align-items: center; /* 画像とテキストを中央寄せ */
      text-align: center; 
    }

  .about-image {
      flex: 0 0 200px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
  }

  .about-text {
    font-size: 1rem; /* モバイルのフォントサイズ調整 */
  }


  /* 背景レコード画像 */
#background-record {
  position: fixed;
  top: 25%;
  left: -26%;
  transform: translateY(-50%);
  width: 52%; /* サイズをさらに調整 */
  height: 100vh;
   }
}