/* mitsuwadai.css */
/* .background-image-container { ... } の記述を削除またはコメントアウト */
/*********************************************************************************/
/* bodyに背景画像を直接適用 */
body {
    background-image: url("image/japanese-paper_00025.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* ページをスクロールしても背景を固定する */
    margin: 0; /* bodyのデフォルトの余白を削除 */
}

@media (max-width: 640px) {
  .content-wrapper {
    flex-direction: column;
    align-items: center;   /* 左揃えではなく中央揃えに戻す */
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }

  .content-wrapper img {
    width: 100%;
    height: auto;
    max-width: none;
  }
}

.content-wrapper {

	font-size: 20px;
    font-family: "Noto Sans JP","ヒラギノ角ゴ ProN W3","メイリオ",sans-serif;
    color: navy;
    
    margin: 30px;
    max-width: 640px; /* 指定された幅640px */
    
    gap: 40px;
    
    /* 左右のマージンを auto にすることで、コンテンツを中央に配置 */
    margin-left: auto;
    margin-right: auto;
    
    display: flex; /* Item内の文字を中央寄せするためにもFlexboxを使う */
    justify-content: center;
    align-items: center;

}

.attention {

	font-size: 16px;

    margin: 30px;
    max-width: 640px; /* 指定された幅640px */
    
    /* 左右のマージンを auto にすることで、コンテンツを中央に配置 */
    margin-left: auto;
    margin-right: auto;
    
    display: flex; /* Item内の文字を中央寄せするためにもFlexboxを使う */
    justify-content: center;
    align-items: center;

}

/*********************************************************************************/
/* YouTube 埋め込みのレスポンシブ対応 */
.youtube-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;   /* PC では 640px に収まる */
  margin: 0 auto;
  padding-top: 30%; /* 16:9 のアスペクト比 */
  flex: none; /* ← これが決定的に重要！ */
}

@media (max-width: 640px) {
  .youtube-wrapper {
    max-width: 100%;   /* スマホでは画面幅いっぱい */
    padding-top: 56.25%; /* 16:9 のまま */
  }

}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*********************************************************************************/
/* コンテンツ間の空白 */
.spacer {
    /* 高さ（空ブロックのサイズ）を指定 */
    height: 50px; 
}

/*********************************************************************************/
/* ＳＮＳアイコン */
.social-icons {
    display: flex; /* アイコン全体を水平中央に配置 */
    justify-content: center; 
    padding: 20px 0; 
}
.social-icons a i {
    font-size: 40px; /* サイズを大きくする */
    margin: 0 20px;
}

.fa-youtube {
    color: #ff0000; /* YouTubeのブランドカラー（赤） */
}

.fa-facebook {
    color: #3b5998; /* Facebookのブランドカラー */
}

.fa-instagram {
    /* グラデーションは複雑なので、ここでは代表的な色 */
    color: #c13584; 
}

.fa-x-twitter {
    color: #000000; /* Xのブランドカラー（黒） */
}

.cpright {
	text-align: center;
}

/*********************************************************************************/
/* 問い合わせフォーム */
/* PCでは iframe を表示、リンクを非表示 */
.form-iframe {
  display: block;
}
.form-link {
  display: none;
}

/* 1. フォーム全体とラベルのデザイン (幅640pxを組み込み) */
.form-container {
  /* 幅を640ピクセルに設定 */
  max-width: 640px; 
  margin: 30px auto; /* ページ中央寄せ */
  padding: 30px;
  background-color: #f8f8f8;
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* スマホでは iframe を非表示、リンクを表示 */
@media (max-width: 640px) {
  .form-iframe {
    display: none;
  }
  .form-link {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
  .form-link a {
    font-size: 20px;
    color: #000080;
    font-weight: bold;
    text-decoration: underline;
  }
}

/* ラベル（項目名）のスタイル */
label {
  display: block; 
  margin-bottom: 8px;
  font-weight: 600; 
  color: #000080;
}

/* 2. 入力フィールド（<input> / <textarea>) のデザイン */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea {
  /* 親要素の幅640pxに合わせて幅100%に設定 */
  width: 80%; 
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc; 
  border-radius: 5px; 
  font-size: 16px;
  
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* 💡 フォーカス（入力中）時のクールな効果 */
input:focus,
textarea:focus {
  outline: none; 
  border-color: #000080; 
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.25); 
}

/* 3. 送信ボタンのデザイン */
button[type="submit"] {
  width: 100%; /* 親要素の幅640pxに合わせて幅100%に設定 */
  padding: 12px;
  background-color: #000080; 
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  transition: background-color 0.3s ease;
}

/* 💡 ホバー時の効果 */
button[type="submit"]:hover {
  background-color: #1a1a9e; 
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/*********************************************************************************/
/* Swiper */
/* Swiper全体のコンテナのスタイル */
.swiper-container {
  width: 80%; /* スライダー全体の横幅。親要素に対して80% */
  max-width: 640px; /* 最大横幅。これ以上は広がらない */
  height: 480px; /* スライダー全体の高さ */
  margin: 0 auto; /* 中央寄せにする場合 */
  background-color: transparent;
  overflow: hidden; /* はみ出した内容を隠す */
}

/* 各スライドのスタイル */
.swiper-slide {
  text-align: center;
     font-size: 18px;
     background-color: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     /* ここでスライド自体の高さを指定することも可能だが、通常は.swiper-containerの高さに合わせる */
     /* height: 100%; */
}

/* スライド内の画像などのコンテンツのスタイル */
.swiper-slide img {
  display: block;
  width: 100%; /* スライドの幅に合わせる */
  height: 100%; /* スライドの高さに合わせる */
  object-fit: cover; /* 画像がはみ出さないように、アスペクト比を保ちつつ切り抜き */
}

/*********************************************************************************/
/* 1. テーブル基本設定 */
.stylish-table {
  border-collapse: collapse;
  max-width: 640px; /* 幅を調整 */
  margin: 20px auto; /* ページの中央に配置 */
  font-family: Arial, sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* 浮き上がって見える影 */
}

/* 2. ヘッダー */
.stylish-table thead th {
  background-color: #007bff; /* メインカラー */
  color: #ffffff;
  padding: 15px;
  font-size: 16px;
  text-align: left;
}

/* 3. セルとデータ */
.stylish-table th, 
.stylish-table td {
  padding: 12px 15px;
  /* 最後の行以外に区切り線を引く */
  border-bottom: 1px solid #dddddd; 
}

/* 4. ストライプ（ゼブラ）柄 */
.stylish-table tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}

/* 5. ホバー効果 */
.stylish-table tbody tr:hover {
  color: #007bff; /* ホバー時にテキストの色も変える */
  background-color: #cce5ff;
}

/* 6. 最後の行と角 */
.stylish-table tbody tr:last-of-type {
  border-bottom: 2px solid #007bff; /* 最後の行だけ太い線 */
}

/* 1. テーブル基本設定（サイズ大） */
.stylish-table-big {
  border-collapse: collapse;
  max-width: 640px; /* 幅を調整 */
  margin: 20px auto; /* ページの中央に配置 */
  font-family: Arial, sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* 浮き上がって見える影 */
}

/* 2. ヘッダー */
.stylish-table-big thead th {
  background-color: #007bff; /* メインカラー */
  color: #ffffff;
  padding: 15px;
  font-size: 16px;
  text-align: left;
}

/* 3. セルとデータ */
.stylish-table-big th, 
.stylish-table-big td {
  padding: 12px 15px;
  /* 最後の行以外に区切り線を引く */
  border-bottom: 1px solid #dddddd; 
}

/* 4. ストライプ（ゼブラ）柄 */
.stylish-table-big tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}

/* 5. ホバー効果 */
.stylish-table-big tbody tr:hover {
  color: #007bff; /* ホバー時にテキストの色も変える */
  background-color: #cce5ff;
}

/* 6. 最後の行と角 */
.stylish-table-big tbody tr:last-of-type {
  border-bottom: 2px solid #007bff; /* 最後の行だけ太い線 */
}

/*********************************************************************************/
/* table⇒グリッド */
.flex-table1 {
  display: grid;
  gap: 0px; /* パネル同士の隙間 */
  max-width: 640px;
  
  /* 画面の中央に配置（左右の余白を自動調整） */
  margin: 0 auto;

  /* 【スマホ用】デフォルトを 2列 × 2行 に設定 */
  grid-template-columns: repeat(2, 1fr);
}

/* 【PC用】（640px以上）時は 4列 に変更 */
@media (min-width: 640px) {
  .flex-table1 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 見た目の調整（任意） */
.ft-item {
  background-color: transparent;
  max-width: 160px;
  width: 100%;     /* 親要素に合わせて広がるが、160pxを超えない */
  margin: 0 auto;  /* 中央寄せにしたい場合に便利 */
  text-align: center;
  border: none;
}

/*********************************************************************************/
/* その他 */
a {
  /* 必須：デフォルトの下線を消す */
  text-decoration: none; 
  
  /* オプション：太字にして目立たせる */
  font-weight: 500;
  
  /* オプション：マウスカーソルをポインターにする（ボタン化する場合） */
  cursor: pointer; 
}