*{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #272727;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;  
}

/* ===== ファーストビュー ===== */
/*タイトルの文字*/
.title {
  padding: 50px 0;
}
.title-inner {
  max-width: 800px;
  padding: 0 100px;
}
.title h1 {
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  letter-spacing: 1.92px;
  line-height: 1.2;
  position: absolute;
  z-index: 2;
}
.title h1 span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 1px;
  margin-top: 8px;
}
.explanation{
	font-size: 25px;
	font-weight: lighter;
}

/*タイトルレスポンシブ*/
@media screen and (max-width: 768px) {
  .title {
    padding: 30px 0 5px 0;
  }
  .title-inner {
    max-width: 600px;
    padding: 0 50px;
  }
  .title h1 {
     font-size: 24px;
     letter-spacing: 1.5px;
     line-height: 1.3;
     margin-bottom: 24px;
   }
  .title h1 span {
     font-size: 12px;
     letter-spacing: 0px;
     margin-top: 4px;
   }
  .title p{
    font-size:16px;
  }
}

@media screen and (max-width: 480px) {
  .title-inner {
    max-width: 500px;
    padding: 0 20px;
  }
  .title h1 {
     font-size: 24px;
     letter-spacing: 1.5px;
     line-height: 1.3;
     margin-bottom: 24px;
   }
  .title h1 span {
     font-size: 12px;
     letter-spacing: 0px;
     margin-top: 4px;
   }
  .title p{
    font-size:14px;
  }
}
/*---- back-pattern ----*/
.fv-wrap {
  position: relative;
  width: 100%;
  /*height: 1000px;/* fv全体の高さに合わせる */
  /*overflow: hidden;*/
}
/*---- back-pattern ----*/
.pattern {
  width: 100vw;
  height: 255px;
  background: #2f3d4f; /* 濃紺 */
  clip-path: polygon(
    0 0,       /* 左上の角 */
    25% 0,     /* 上辺の70%地点 */
    30% 30%,   /* 右上に少し下がった所（斜め部分の角） */
    100% 30%,  /* 右端で少し下の所 */
    100% 80%,  /* 右下の角 */
    0 80%      /* 左下の角 */
  );
  transform: scaleX(-1); /* 反転 */
  position: relative;
  display: block; /* inline-block だと余白が出やすい */
  margin: 100px 0 0 0;/* 余白リセット */
  padding: 0;
}
.fv-img{
  margin: -60px 0 0 0!important;/* 余白リセット */
  padding: 0!important;
}
.fadein {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 小さい画面向けに微調整 */
@media (max-width: 768px) {
  .pattern {
    height: 200px;
    clip-path: polygon(
      0 0,
      35% 0,
      40% 25%,
      100% 25%,
      100% 75%,
      0 75%
    );
  }
　.fv-wrap {
    height: 100px; /* fv全体の高さに合わせる */
}
  .fv-img{
	height: 300px!important;
	}
}
@media (max-width: 480px) {
  .fv-img{
    margin: -100px 0 0 0 !important;/* 余白リセット */
	height: 200px!important;
}
  .pattern {
    clip-path: polygon(
      0 0,
      40% 0,
      45% 20%,
      100% 20%,
      100% 50%,
      0 50%
    );
  }
}
/*---- photp ----*/
.fv-wrap img {
  width: 100vw;
  height: 400px;
  object-fit: cover;
  display: block;   /* 画像下の隙間を消す */
  margin: 0; 
}


/* ===== フォーム全体 ===== */
.contact-form {
  background: #272727;
  padding: 60px 20px;
  color: #fff;
}

.form-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* 説明文 */
.form-description {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #ddd;
}
.required {
  color: #e60033;
  margin-left: 2px;
}

/* 入力ブロック */
.form-group {
  display: block; /* 横並び解除 */
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

/* 2カラム */
.two-col {
  display: flex;
  gap: 16px;
}
.two-col .form-col {
  flex: 1;
}

/* 入力系共通 */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #4C4C4C;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
  background: #4C4C4C;
  color: #fff;
  height: 48px!important; /* 高さを統一 */  
}
select{
    appearance: none;
    -webkit-appearance: none; /* Safari for iOS */
    -moz-appearance: none;    /* Firefox */
    background: #4C4C4C url("data:image/svg+xml;utf8,<svg fill='white' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
    background-size: 14px;
    padding-right: 36px; /* 矢印分の余白 */
}
input::placeholder,
textarea::placeholder {
  color: #949494;
}
/* セレクトボックス用ラッパー */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #4C4C4C;
  color: #fff;
  padding-right: 36px; /* 矢印用スペース */
  width: 100%;
  border: 1px solid #4C4C4C;
  border-radius: 6px;
  height: 48px!important;
  font-size: 16px;
  box-sizing: border-box;
}

/* 矢印 */
.select-wrapper .arrow {
  position: absolute;
  top: 50%;
  right: 12px; /* select 内右側余白に合わせる */
  transform: translateY(-50%);
  width: 15.7px;
  height: 9.4px;
}

.select-wrapper .arrow::before,
.select-wrapper .arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 12px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% calc(100% - 1.5px);
}

.select-wrapper .arrow::before {
  transform: rotate(45deg);
}

.select-wrapper .arrow::after {
  transform: rotate(-45deg);
}
/* テキストエリア */
textarea {
  resize: vertical;
  min-height: 150px;
}

/* ボタン */
.form-btn {
  text-align: center;
  margin-top: 40px;
}
.form-btn button {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  background: linear-gradient(to right, #FFD700, #FFA500); /* 黄→オレンジ */
  color: #000;
  font-size: 16px;
  font-weight: bold;
  padding: 14px;
  border: none;
  border-radius: 30px; /* 丸み */
  cursor: pointer;
  transition: opacity 0.3s;
}
.form-btn button:hover {
  opacity: 0.85;
}

/* SP対応 */
@media (max-width: 600px) {
  .two-col {
    flex-direction: column;
    gap: 10px; /* フォーム間に10px */
  }
}

/* ===== 確認画面用テーブル ===== */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
}
.confirm-table th,
.confirm-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #555;
  vertical-align: top;
}
.confirm-table th {
  width: 25%;
  background: #333;
  color: #fff; 
  text-align: left;
  font-weight: bold;
}
.confirm-table td {
  color: #fff;
  line-height: 1.6;
}

/* ボタンを横並び */
.two-btn {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.two-btn button {
  flex: 1;
  max-width: 200px;
}

/* ===== thanksページ用スタイル ===== */
.success-message {
  text-align: center;
  margin: 40px 0;
  color: #fff;
}
.success-message h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}
.success-message p {
  font-size: 16px;
  line-height: 1.6;
}

/* ボタンリンクをボタン風に */
.form-btn a.btn-submit {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  background: linear-gradient(to right, #FFD700, #FFA500); /* インデックスと同じボタン配色 */
  color: #000;
  font-size: 16px;
  font-weight: bold;
  padding: 14px;
  border-radius: 30px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.3s;
}
.form-btn a.btn-submit:hover {
  opacity: 0.85;
}