* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body {
  /*font-family: 'Noto Sans JP', sans-serif;*/
  color: #1f1f1f;
  background: transparent; /* 背景Canvasを見せるため透明に設定 */
  line-height: 1.8;
  padding-top: 80px;

}

  body::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 下部のSVGで定義したパーリンノイズを呼び出し */
    filter: url(#perlin-noise-fixed);
    
    /* ザラザラ*/
    opacity: 1;
    
    /* 合成モード：オーバーレイ */
    mix-blend-mode: screen;
    
    /* ノイズの大きさ（スケール）：1 */
    transform: scale(1);
    
    pointer-events: none; 
    z-index: 9999; /* 必要に応じてコンテンツの背後に回す場合は 1 等に調整してください */
  }

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.15); /* ヘッダーの背景を透過させてデザインと馴染ませる */
  backdrop-filter: blur(10px);
  padding: 10px 30px;
  z-index: 1000;
  color: #414141;
}

.responsive-bg {
  position: fixed; /* 画面に完全に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 画面全体の高さを確保 */
  z-index: -1;   /* 一番裏側に配置 */
  pointer-events: none; /* マウスイベントを邪魔しない */
  
  background-image: 
    radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.42), transparent 60%),
    radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.55), transparent 62%),
    radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.40), transparent 62%),
    radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.45), transparent 62%),
    linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%);
  background-size: cover;
}

.container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo {
  display:flex;
  align-items:flex-end;
}

.container h1 {
  padding-left:10px;
}

.logo img {
  height: 50px;
}

.nav ul {
  display: flex;
  list-style: none;
  justify-content: flex-end;
  gap: 20px;
}

.nav a {
  color: #FFFFFF;
  text-shadow: 0 0 15px rgba(50,50,50,0.6);
  text-decoration: none;
  transition: color 0.3s;

  font-size: 1rem;
  font-weight: bold;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

.nav a:hover {
  color: #fc6161;
}

/* Overlay 背景 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 20%);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}


/* Hero Section */
.hero {
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* Canvas背景を反映 */
  overflow: hidden;
}

.hero-video {
  display: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent); */
  opacity: 0.3;
  z-index: 1;
}
.hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
  font-weight: 900;
}
.headline {
  font-size: 4rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.15em;
  text-shadow: 0 0 15px rgba(50,50,50,0.6); /* テキストの視認性確保 */
}
.sub {
  font-size: 1rem;
  color: #FFFFFF;
  margin-top: 12px;
  font-weight: bold;
}

/* Services */
.services {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;

  font-size:2.2rem;
  font-weight:900;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items:center;
  align-content:center;
  justify-content:center;
  gap: 40px;
  padding: 80px 20px;
  background: transparent; /* 透過 */

  min-height:90vh;
}

.services-row {
  display: flex;
  gap: 20px;
  max-width:1000px;
  flex-wrap: wrap;
}
.services-row.top .service-card {
  flex: 1 1 45%;
  max-width: 490px;
}
.services-row.bottom .service-card {
  flex: 1 1 calc(33.333% - 13.333px);
}
.service-card {
  padding: 30px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75); /* カードの背景を少しだけ不透明にして見やすく */
  color: #000000;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
.service-card h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: #000000;
}
.service-card p {
  font-size: 1rem;
  margin-bottom: 20px;
}
.button {
  display: inline-block;
  padding: 10px 20px;
  background: #0077b6;
  border: none;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}
.button:hover {
  background: #005f8a;
}

.inner{
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 1.2rem;
  color: #1a1a1a;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Our Mind */
  .minimal-concept {
    background: transparent; /* 背景Canvasを透過 */
    color: #FFFFFF;          /* 文字色を白ベースに変更 */
    letter-spacing: 0.05em;
    line-height: 2;
    padding: 120px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
  }
  .minimal-concept .container-mind {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(0, 0, 0, 0.4); /* 背景の動く波に馴染むよう、薄い黒の座布団を配置 */
    backdrop-filter: blur(5px);    /* コンテンツの可読性を上げるためのブレンド処理 */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }
  .minimal-concept .flex-box {
    display: flex;
    align-items: flex-start;
    gap: 80px;
  }

  /* 左側：大きな数字 */
  .minimal-concept .left-col {
    flex: 1;
    position: sticky;
    top: 120px;
  }
  .minimal-concept .huge-text {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 6.5rem;
    font-weight: 900;
    line-height: 0.9;
    color: rgba(255, 255, 255, 0.07); /* 暗い背景に溶け込む美しい透過白 */
    user-select: none;
  }

  /* 右側：コンテンツ */
  .minimal-concept .right-col {
    flex: 2;
    text-align: left; /* 左揃えでスマートに配置 */
  }
  .minimal-concept .sub-caps {
    display: block;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    color: #fc6161; /* サイトのアクセントカラー（赤）と統一 */
    margin-bottom: 15px;
  }
  .minimal-concept h3 {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 40px;
    color: #FFFFFF;
    text-shadow: 0 0 15px rgba(255,255,255,0.2);
  }
  .minimal-concept .txt-main {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 30px;
    color: #FFFFFF;
  }
  .minimal-concept .txt-sub {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 25px;
    text-align: justify;
  }
  .minimal-concept .txt-highlight {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    margin-top: 40px;
    border-left: 3px solid #fc6161; /* アクセントカラーの縦線 */
    padding-left: 15px;
    color: #FFFFFF;
  }

  @media (max-width: 768px) {
    .minimal-concept { padding: 60px 0; }
    .minimal-concept .container-mind { padding: 30px 20px; width: 90%; }
    .minimal-concept .flex-box { flex-direction: column; gap: 30px; }
    .minimal-concept .left-col { position: static; }
    .minimal-concept .huge-text { font-size: 4rem; display: flex; gap: 15px; line-height: 1; }
    .minimal-concept h3 { font-size: 1.5rem; margin-bottom: 25px; }
    .minimal-concept .txt-main { font-size: 1.1rem; }
  }

/* Company Profile */
.company-profile {
  background: transparent; /* 透過 */
  padding: 100px 20px;
}
.company-profile .inner {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.85); /* テーブル透過用 */
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.company-profile h2 {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  color: #000000;
}
.company-profile ul {
  list-style: none;
  padding: 0;
}
.company-profile li {
  font-size: 1rem;
  margin-bottom: 12px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 8px;
}

.about {
  background: transparent;
  padding: 4rem 2rem;
}

.about-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Kosugi Maru', sans-serif;
}

.about-table th,
.about-table td {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 0.7rem;
  background: #333;
  color: #fff;
  font-size: 1rem;
  position: relative;
  z-index: 10;
}

.contact-section {
  background: rgba(255, 255, 255, 0.9); /* 等高線が少し透ける美しいフォームの背景 */
  padding: 80px 20px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  position: relative;
  z-index: 5;
}
.contact-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 30px;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.contact-form label {
  margin-bottom: 8px;
  font-weight: bold;
}
.contact-form input,
.contact-form textarea {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
}
.contact-form button {
  align-self: flex-start;
}

.modal.hidden {
  display: none;
}
.modal {
  z-index: 2000;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
}

.hr1{
    margin: 20px;
    border-top: 1px solid #adadad;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.modal-content .close-modal{
  display: block;
  margin: 2rem auto 0 auto;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  color: #fff;
  background-color: #3d749b;
  border: none;
  border-radius: 4px;
}

#policy-modal-content{
  width:90%;
  height:90%;
  overflow: scroll;
}


/* Responsive */
@media (max-width: 768px) {
  .headline {
    font-size: 2.5rem;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
  }
  .services-row {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .service-card {
    width: 100%;
  }
  .mind h2 {
    font-size: 10rem;
  }
}

/* ハンバーガー共通スタイル */
.menu-toggle {
  display: none;
  font-size: 6rem;
  cursor: pointer;
  color: #FFFFFF;
}

@media screen and (max-width:768px){
  .responsive-bg {
    /* スマホ用のグラデーション */
    background-image: 
      radial-gradient(circle 55vw at 0% 15%, rgba(175, 109, 255, 0.45), transparent),
      radial-gradient(circle 55vw at 95% 25%, rgba(255, 235, 170, 0.65), transparent),
      radial-gradient(circle 55vw at 5% 75%, rgba(255, 100, 180, 0.48), transparent),
      radial-gradient(circle 60vw at 95% 85%, rgba(120, 190, 255, 0.55), transparent),
      linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%);
    
    background-size: cover; 
    }

  .nav ul {
    display:flex;
    flex-direction: column;
    /* background: rgba(255, 255, 255, 0.95); /* モバイルメニュー展開時を見やすく */
    position: absolute;
    top: 70px;
    right: 5%;
    width: 90%;
    height:50vh;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
    z-index: 1001;
    max-height:0;
    overflow: hidden;
    transition: max-height 0.8s ease;
  }

  .nav ul.open{
    visibility: visible;
    opacity: 1;
    align-items: center;
    justify-content:center;
    max-height:500px;
  }

  .nav ul li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .nav ul.open li{
    opacity:1;
    transform: translateY(0);
  }

  .nav ul.open li:nth-child(1) { transition-delay: 0.1s; }
  .nav ul.open li:nth-child(2) { transition-delay: 0.2s; }
  .nav ul.open li:nth-child(3) { transition-delay: 0.3s; }
  .nav ul.open li:nth-child(4) { transition-delay: 0.4s; }

  .menu-toggle {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    color: #FFFFFF;
    text-shadow: 0 0 15px rgba(50,50,50,0.6);
  }
}

/* Scroll Animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.slide-in {
  transform: translateX(-40px);
}
.fade-up {
  transform: translateY(40px);
}