/* スタイルのリセットや基本的な定義 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
}

/* ヘッダーのスタイリング */
header {
    display: flex;
    justify-content: column; /* 子要素を縦に並べる */
    align-items: center;
    padding: 20px;
    background: #fff;
	margin-bottom: 0; /* ヘッダーの下部のマージンをなくす */
}
/* ページ全体に上下の余白を追加 */
body {
    margin: 0;
    padding: 30px 20px; /* 上下に20pxの余白を追加 */
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* ページ全体の背景色 */
	    box-sizing: border-box;

}

/* 各セクションの上下に余白を追加 */
section {
    margin-top: 20px; /* 上部に20pxの余白を追加 */
    margin-bottom: 20px; /* 下部に20pxの余白を追加 */
}
/* サイトメニューの初期状態 */
#site-menu {
    display: block; /* 常に表示させる設定に変更（JavaScriptで制御） */
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 70px;
    right: 20px;
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* スライドとフェードアニメーション */
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none; /* 非アクティブ時にクリック無効化 */
}

/* サイトメニューの初期状態 */
#site-menu {
    display: block;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 70px;
    left: 0; /* 左からスライド */
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* スライドとフェードアニメーション */
    transform: translateX(-100%); /* 初期状態で画面外に隠す */
    opacity: 0;
    pointer-events: none; /* 非アクティブ時にクリック無効化 */
}

/* メニューが開いた状態 */
#site-menu.active {
    transform: translateX(0); /* 左からスライドイン */
    opacity: 1;
    pointer-events: all; /* アクティブ時にクリック有効化 */
}

/* メニューアイテム */
#site-menu p {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5; /* 文字間隔を調整 */
}

#site-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* アイコンの追加例 */
#site-menu a::before {
    content: '▶'; /* シンプルなアイコン */
    margin-right: 8px;
    font-size: 12px;
    color: #007bff;
    transition: transform 0.3s ease;
}

/* ホバー時の効果 */
#site-menu a:hover {
    background-color: #f0f0f0;
    color: #007bff;
}

#site-menu a:hover::before {
    transform: translateX(5px); /* ホバー時にアイコンが動く */
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    #site-menu {
        width: 200px;
    }

    #site-menu p {
        padding: 8px 0;
        font-size: 12px; /* フォントサイズを小さく */
        line-height: 1.4; /* 行間を調整 */
    }

    #site-menu a {
        padding: 8px;
        font-size: 14px; /* フォントサイズを微調整 */
    }
}

/* ヘッダーのロゴコンテナスタイリング */
.logo-container {
    display: flex;
    justify-content: center; /* 子要素を中央寄せに */
    align-items: center;
    flex-direction: column; /* 縦方向に並べる */
    width: 100%; /* 幅を100%に設定 */
}

/* 住所情報のスタイリングを更新 */
.address-info {
    background-color: #f2f2f2; /* 背景色 */
    padding: 8px 16px; /* パディング */
    text-align: center; /* 中央寄せ */
    box-shadow: 0 2px 4px rgba(0,0,0,0.26); /* シャドウ */
    margin-top: 20px; /* ロゴとキャッチコピーの下に間隔を作る */
}

.address, .phone {
    color: #333; /* テキストカラー */
    font-size: 0.9em; /* フォントサイズ */
    margin: 5px 0; /* 上下のマージン */
    font-weight: normal; /* フォントウェイト */
}

/* フッターの住所情報のスタイリング */
footer .address-info {
    background-color: #f2f2f2; /* 背景色 */
    padding: 8px 16px; /* パディング */
    text-align: center; /* 中央寄せ */
    box-shadow: 0 2px 4px rgba(0,0,0,0.26); /* シャドウ */
    margin-top: 20px; /* 余白 */
    width: 100%; /* 幅を100%に設定 */
}

footer .address, 
footer .phone {
    color: #333; /* テキストカラー */
    font-size: 0.9em; /* フォントサイズ */
    margin: 5px 0; /* 上下のマージン */
    font-weight: normal; /* フォントウェイト */
}
/* フッター内のテキストのスタイル */
footer .address-info p {
    color: #333; /* テキストカラー */
    font-size: 0.9em; /* フォントサイズ */
    margin: 5px 0; /* 上下のマージン */
    font-weight: normal; /* フォントウェイト */
}

/* メールアドレスのリンクのスタイル */
footer .address-info .email a {
    color: #000000; /* リンクのテキストカラーを白に変更 */
    text-decoration: none; /* アンダーラインを消去 */
}

footer .address-info .email a:hover {
    text-decoration: underline; /* ホバー時にアンダーラインを表示 */
}

.logo-image {
    max-width: 100px; /* ロゴのサイズ */
    margin-right: 20px; /* ロゴとテキストの間のスペース */
}

.logo-text {
    font-size: 1.5em;
    font-weight: bold;
}

.tagline {
    font-size: 0.9em;
    color: #666;
    margin-left: 20px;
}

/* ヒーローセクションのスタイリング */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
    text-align: center;
    color: #fff;
}

/* 数学記号のスタイリング */
.math-symbol {
    font-size: 8vw; /* ビューポートの幅に基づいてサイズを設定 */
    color: #333; /* 色をダークグレーに変更 */
    font-weight: bold; /* テキストを太くする */
    margin: 0 5px; /* 丸の要素との間隔を調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 13px 13px 10px rgba(0,0,0,0.2); /* 立体感を出すための影を追加 */
}

/* 特徴セクションのスタイリング */
.features {
    display: flex;
    justify-content: center; /* 要素を中央に揃える */
    flex-wrap: nowrap; /* アイテムが折り返されないように設定 */
    padding: 35px 0;
    text-align: center;
    margin: 0 0; /* 水平方向のマージンを自動に設定 */

}

/* 特徴セクションのアイテムスタイリングを更新 */
.feature-item {
    width: 18vw; /* ビューポートの幅に基づいてサイズを設定 */
    height: 18vw; /* ビューポートの幅に基づいてサイズを設定 */
    border-radius: 50%; /* 円形を維持 */
    background: linear-gradient(to right, #56ccf2, #2f80ed); /* 青色のグラデーション */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -50px 0px 0; /* 上のマージンをマイナスにして背景画像の上に重ねる */
    font-size: 4vw; /* ビューポート幅に基づくフォントサイズ */
    color: #fff; /* テキストカラーを白に */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 影を付けて立体感を出す */
    transition: transform 0.3s ease;
    cursor: pointer; /* ホバー時に手の形に変わるように */
    position: relative; /* z-indexを有効にするために必要 */
    z-index: 2; /* 背景より前面に表示 */
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; /* ゴシック体の代替フォント */
    font-weight: bold; /* テキストを太くする */
	flex-wrap: nowrap; /* アイテムが折り返されないように設定 */
    padding: 0; /* パディングをゼロに設定して余白を取り除く */
    animation: pulse-animation 2s infinite ease-in-out; /* 2秒間隔で無限にアニメーション */
	position: relative; /* box-shadowの位置調整のために必要 */
    animation: pulse-animation 2s infinite ease-in-out, /* 拡大縮小アニメーション */
             glow-animation 3s infinite ease-in-out; /* グローアニメーション */
}

/* 特徴セクションの最後のアイテムを四角にして強調 */
.feature-item:last-child {
    border-radius: 0; /* 丸みをなくして四角くする */
    background: #ff7e5f; /* 背景色を変更して強調 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 影を調整して立体感を出す */
    /* 必要に応じて他のスタイルも調整 */
}

/* 3つ目の特徴セクションのアイテムのフォントサイズを変更 */
.features .feature-item:last-child {
    font-size: 4vw; /* 新しいフォントサイズ */
}

.feature-item:hover {
    transform: scale(1.1); /* ホバー時にさらに大きくなるように */
    box-shadow: 0 12px 24px rgba(0,0,0,0.3); /* ホバー時に影を強調 */
}

/* アニメーションのキーフレーム定義 */
@keyframes pulse-animation {
    0%, 100% {
        transform: scale(1); /* 元のサイズ */
    }
    50% {
        transform: scale(1.2); /* 5%拡大 */
    }
}

/* アニメーション遅延をランダムに設定 */
.feature-item:nth-child(1) { 
  animation-delay: 0s; 
  /* 各.feature-item::beforeにも遅延を設定する */
}

.feature-item:nth-child(2) { 
  animation-delay: 1s; 
}

.feature-item:nth-child(3) { 
  animation-delay: 2s; 
}
/* 斜線が通過するアニメーション定義 */
@keyframes line-animation {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


/* お問い合わせフォームのスタイリング */
.contact-form {
    padding: 50px;
    background: #f4f4f4;
}

/* フッターのスタイリング */
footer {
    padding: 20px;
    background: #333;
    color: #fff;
    text-align: center;
}

    .feature-item,
    .math-symbol {
        width: 20vw; /* ビューポートの幅に基づいたサイズ */
        height: 20vw; /* ビューポートの幅に基づいたサイズ */
        margin: -10px; /* アイテム間のスペースを適切に設定 */
        flex: 0 0 auto; /* アイテムのサイズが変わらないように設定 */
		
    }

    /* 映像の丸 */
    .feature-item:nth-child(1) {
        order: 1;
    }

    /* プラス記号 */
    .math-symbol:nth-child(2) {
        order: 2;
        margin-right: -2vw; /* プラス記号の右側の余白を調整 */
        margin-left: -2vw; /* プラス記号の左側の余白を調整 */
		color: white; /* テキストの色を白に設定 */
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 90.7); /* 影を黒色に設定 */
    }

    /* 音楽の丸 */
    .feature-item:nth-child(3) {
        order: 3;
    }

    /* イコール記号 */
    .math-symbol:nth-child(4) {
        order: 4;
		color: white; /* テキストの色を白に設定 */
    text-shadow: 0px 0px 6px rgba(0, 0, 0,60.7); /* 影を黒色に設定 */
    }

    /* 最高の広告の丸 */
    .feature-item:nth-child(5) {
        order: 4;
    }

/* ヘッダーのロゴコンテナスタイリング */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-image {
    max-width: 100px; /* ロゴのサイズ */
    margin-right: 20px; /* ロゴとテキストの間のスペース */
}

.logo-text {
    font-size: 1.5em;
    font-weight: bold;
}

.tagline {
    font-size: 0.9em; /* サイズはお好みで調整 */
    color: #666; /* 色はお好みで */
    margin-left: 20px; /* 社名との間隔 */
}

.hero {
    position: relative;
    /* 既存のスタイル設定... */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 幅を画面全体に広げる */
    height: 100vh; /* 高さを画面全体に設定（100%の高さ） */
    background-image: url('back2.jpg'); /* 背景画像のパス */
    background-size: cover; /* 画像を画面全体にフィットさせる */
    background-repeat: no-repeat; /* 画像の繰り返しを防止 */
    background-position: center; /* 画像を中央揃え */
    z-index: -1;
}
.hero h1-container {
    width: 100%; /* テキストを表示する領域 */
    max-width: 80%; /* 必要に応じて適切な幅を設定 */
    height: auto;
    margin: 0 auto;
    text-align: center; /* テキストを中央寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* はみ出る部分を隠す */
    white-space: nowrap; /* 改行を防ぐ */
}

.hero h1 {
    font-size: 10vw; /* ビューポート幅の10%でフォントサイズを設定 */
    line-height: 1.2; /* 行の高さ */
    color: white;
    margin: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* テキストの影 */
    white-space: nowrap; /* 改行を防ぐ */
    overflow: hidden; /* はみ出しを隠す */
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: calc(14px + 2vw); /* スマホではフォントを小さく */
        max-width: 90%; /* 幅を広げる */
    }
}

.hero p {
    /* 既存のスタイル設定... */
    background-color: transparent; /* 背景を透明に */
    padding: 8px;
    border-radius: 9px;
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 90.5); /* テキストに影を付ける */
}

.hero h1 {
    font-size: 4em; /* タイトルのフォントサイズを2倍に */
}

.hero p {
    font-size: 1.5em; /* パラグラフのフォントサイズを2倍に */
}

/* お問い合わせフォームのスタイリング */
.contact-form {
    background: #f4f4f4;
    padding: 50px;
    text-align: center;
	margin-top: 40px; /* 上の余白を増やす */
}

.contact-form h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
}

label {
    font-size: 1.2em;
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="text"],
input[type="tell"],
textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

textarea {
    resize: vertical;
}

button[type="submit"] {
    background: #2f80ed;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: #1e63d4;
}

.custom-advertisement-text {
    /* グラデーション背景 */
    background: linear-gradient(135deg, #6dd5ed, #2193b0);
    color: white; /* テキストの色を白に設定 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* ボックスに影をつける */
    border-radius: 10px; /* 角を丸くする */
    padding: 20px;
    margin: 30px auto; /* 中央揃えにする */
    width: 80%; /* コンテナの幅を設定 */
    opacity: 0.9; /* 背景の透明度を設定 */
    transition: all 0.3s ease; /* アニメーションの効果を追加 */
	margin-top: 60px; /* 上の余白を増やす */
	text-align: center; /* テキストを中央揃えにする */
	
}

.custom-advertisement-text:hover {
    opacity: 1; /* ホバー時の透明度を変更 /
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5); / ホバー時の影を大きくする */
}

p {
font-family: 'Arial', sans-serif; /* フォントをArialに設定 /
font-size: 1.1em; / フォントサイズを少し大きく /
line-height: 1.6; / 行間を広げる /
text-align: justify; / テキストを両端揃えに /
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); / テキストに軽い影をつける */
}

.line-qr-section {
    text-align: center;
    margin: 30px 0;
	margin-top: 0px; /* 上の余白を増やす */
}

.line-qr-container
{
display: inline-block;
background-color: #00c300; /* LINEのブランドカラー */
padding: 10px;
border-radius: 30px;
box-shadow: 0 9px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.line-qr-container:hover {
transform: translateY(-8px);
}

.line-qr-code {
width: 60%; /* QRコードの大きさ */
height: 60%;
margin-bottom: 5px;
}

.line-qr-link {
display: inline-block;
background-color: #fff;
color: #00c300;
padding: 10px 50px;
border-radius: 35px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 9px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}

.line-qr-link:hover {
background-color: #00e600;
text-decoration: none; /* ホバー時にテキストの下線を消す */
}

.video-container {
    max-width: 600px; /* コンテナの最大幅を親要素に依存させる */
	position: relative; /* ポジショニングの基点を設定 */
    margin: 20px auto; /* 上下の余白と中央揃え */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* シャドウを追加 */
    border: 3px solid #f4f4f4; /* 枠を追加 */
    border-radius: 10px; /* 角丸のスタイリング */
    overflow: hidden; /* 枠内でコンテンツを切り取る */
}

.video-title-section {
    text-align: center; /* テキストを中央揃えに */
    margin: 20px 0; /* 上下のマージンを設定 */
}

.video-title {
    display: inline-block; /* インラインブロック要素として表示 */
    background-color: rgba(0, 0, 0, 0.7); /* 背景色 */
    color: #fff; /* テキストカラーを白に */
    padding: 10px 20px; /* パディングを設定 */
    border-radius: 5px; /* 角丸のスタイリング */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5); /* ボックスに影をつける */
    font-size: 0.6em; /* フォントサイズを大きく */
    font-weight: bold; /* テキストを太字に */
	margin-bottom: 15px; /* ビデオからの距離 */
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

video {
    width: 100%;
    height: auto;
    display: block;
}

.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.loading-text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.loading-text3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none;
}
.promo-text {
    text-align: center; /* テキストを中央寄せに */
    margin: 10px 0; /* 上下の余白 */
    font-size: 18px; /* フォントサイズ */
    font-weight: bold; /* フォントを太く */
    color: #333; /* テキストの色 */
}

.map-container {
    width: 100%; /* コンテナの幅を100%に */
    height: auto; /* コンテナの高さを設定 */
    margin: 20px 0; /* 上下のマージン */
}

iframe {
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを450pxに設定 */
    display: block; /* ブロックレベル要素として表示 */
    border: none; /* 枠線を非表示に */
}

/* コピーライトセクションのスタイリングを追加する場合 */
.copyright {
    text-align: center; /* テキストを中央寄せに */
    padding: 10px 0; /* 上下のパディングを10pxに */
    font-size: 0.75em; /* フォントサイズを小さく */
}
/* フェードアウトのキーフレーム */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}


/* フェードインアニメーションのキーフレーム定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* アニメーションを適用するクラス */
.fade-in-section {
  opacity: 0; /* 初期状態では不透明度を0に */
  animation-name: fadeIn; /* アニメーション名を指定 */
  animation-fill-mode: forwards; /* アニメーションが終了した状態を保持 */
  animation-duration: 1s; /* アニメーションの時間 */
  animation-timing-function: ease-out; /* タイミング関数 */
}

/* ページ読み込み時には表示されないようにする */
.hidden {
  display: none;
}

/* 既存のCSSに追加 */
.section {
  opacity: 0; /* 初期状態では見えない */
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* ビューポートに入ったらフェードインする */
.section.visible {
  opacity: 1;
  transform: translateY(0px);
}

.high-quality-video-section {
    margin: 0px 0; /* Adjust the top and bottom margin as needed */
    text-align: center; /* Center the text */
    padding: 20px;
    background-color: none; /* Light grey background for the heading section */
    border-radius: 8px; /* Rounded corners for the heading section */
}

.high-quality-video-section h2 {
    color: #333; /* Dark text color for the heading */
    margin-bottom: 5px; /* Space between the heading and the text */
    font-size: 24px; /* Size of the heading text */
}

.high-quality-video-section p {
    color: #666; /* Lighter text color for the paragraph */
    font-size: 13px; /* Size of the paragraph text */
}

.stylish-header {
    font-size: 24px; /* 見出しのフォントサイズを調整 */
    color: #333; /* 見出しのテキストカラー */
    position: relative;
    padding-left: 20px; /* テキストの左にパディングを追加 */
    display: inline-block; /* アンダーバーをテキストの下にだけ表示するため */
	margin-top: 40px; /* 上の余白を増やす */
	margin-bottom: 20px; /* 見出しの下の余白を増やす */
    position: relative; /* 他の位置指定プロパティを適用するためにrelativeに設定 */
    padding-left: 20px; /* テキストの左にパディングを追加 */
}

.stylish-header::after {
    content: '';
    position: absolute;
    bottom: -5px; /* 見出しの下に位置 */
    left: 0;
    height: 6px; /* アンダーバーの太さ */
    background-color: #3498db; /* アンダーバーのカラー */
	width: 100%; /* テキストの幅に合わせて伸ばす */
    border-radius: 0 5px 5px 0; /* 右端を丸く */

}

.stylish-header::before {
    content: ''; /* 疑似要素のコンテンツ */
    position: absolute; /* 疑似要素を絶対位置に設定 */
    left: 0; /* 左から0の位置に設定 */
    bottom: -5px; /* 下から10pxの位置に設定 */
    height: 3px; /* 線の厚さを3pxに設定 */
    width: 50px; /* 線の幅を50pxに設定 */
    background-color: #2193b0; /* 線の色を青色に設定 */
    border-radius: 5px 0 0 5px; /* 左端を丸く */
} 

.videos-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust the space between videos */
  justify-content: center; /* Center the videos in the container */
}

.video-container {
  flex: 1; /* Allows each video to grow */
  max-width: calc(50% - 10px); /* Adjust for gap */
}

/* Responsive adjustment if needed */
@media (max-width: 100%) {
  .video-container {
    max-width: 100%;
  }
}

/* Hide the thumbnails initially */
.video-thumbnail {
 display: block; /* サムネイルを表示 */
  position: absolute; /* 絶対位置指定 */
  top: 56%; /* 上辺をコンテナの中央に配置 */
  left: 50%; /* 左辺をコンテナの中央に配置 */
  width: 100%; /* コンテナの幅に合わせる */
  height: auto; /* 高さを自動調整 */
  object-fit: cover; /* アスペクト比を保持しつつコンテナに合わせる */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ左と上に移動 */
}

/* Styles for loading text */
.loading-text, .loading-text2, .loading-text3 {
  /* ここにローディングテキストのスタイルを追加 */
  color: #fff; /* 文字色 */
  background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
  padding: 10px; /* パディング */
  border-radius: 5px; /* 角の丸み */
  position: absolute; /* 絶対位置 */
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 中央に配置 */
  display: none; /* 初期状態では非表示 */
}


/* スマートフォンや小さなデバイスの幅で2列から1列に変更 */
@media (max-width: 700px) { /* 600pxをブレイクポイントとして設定 */
	.features {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
		}
  .video-container {
    max-width: 100%; /* スマートフォンではビデオコンテナの最大幅を100%に設定 */
    flex-basis: 100%; /* フレックスアイテムのベースの幅を100%に設定 */
	  }
  .hero-background {
    height: 100%; /* 高さを自動調整 */
  }
}

.paragraph-spacing {
    margin-bottom: 0.5em; /* または任意の単位でスペースを指定 */
}

.red-text {
  color: red; /* 赤色に設定 */
}
/* 全体のコンテナに対して余白を調整 */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロールを無効にする */
    width: 100%; /* 幅を100%にする */
    box-sizing: border-box;
}

/* 各セクションの幅を100%に */
section {
    width: 100%;
    max-width: 100%; /* スマートフォンで幅を100%に制限 */
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box; /* パディングを含めたボックスサイズに調整 */
}

/* ビデオセクションを含めた全体的な調整 */
.video-header {
    width: 100%;
    height: auto;
    padding: 0; 
    box-sizing: border-box;
}

/* フォームコンテナの幅調整 */
.form-container {
    width: 100%;
    max-width: 100%; /* スマートフォンで幅を100%に制限 */
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box; /* パディングを含めたボックスサイズに調整 */
}

/* 説明文のセクションも同様に調整 */
.form-description {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* スマートフォン対応 */
@media (max-width: 500px) {
    .form-container, .form-description {
        padding-left: 10px;
        padding-right: 10px;
    }
}
a {
    visibility: visible !important;
    display: block !important;
    color: inherit; /* テキストの色を継承 */
}

/* 質問コンテナスタイル */
.question-container {
    position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    width: 80%; /* ブラウザの幅の80%に設定 */
    margin: 30px auto; /* 中央配置 */
    padding: 20px; /* 内側の余白 */
    border-radius: 15px; /* 角を丸く */
    background-color: #ffffff; /* 背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 陰影をつける */
    border: 1px solid #ddd; /* 微妙なボーダー */
}

/* スマホ向けのスタイル */
@media screen and (max-width: 768px) {
    .question-container {
        width: 100%; /* 幅を100%に変更 */
        margin: 10px 0; /* 横幅が100%のため水平の余白は不要 */
        border-radius: 10px; /* モバイル用に角の丸みを少し小さく */
    }
}

/* ヘッダーのスタイリング */
.question-container .stylish-header {
    text-align: center; /* テキストを中央揃え */
    font-size: 24px; /* ヘッダーのフォントサイズ */
    margin-bottom: 15px; /* 下に余白 */
    color: #333; /* ヘッダーの色 */
}

/* 段落のスタイリング */
.question-container .paragraph-spacing {
    font-size: 16px; /* 段落のフォントサイズ */
    color: #555; /* 段落のテキスト色 */
    line-height: 1.6; /* 行間 */
    margin-bottom: 15px; /* 段落間の余白 */
}

ul {
    list-style-position: inside; /* マーカーをテキストのすぐ横に表示 */
    padding-left: 0; /* 左側の余白をなくす */
    margin-left: 0; /* 左側のマージンをなくす */
}

li {
    margin-bottom: 10px; /* リスト項目の下部に適切な余白を設定 */
}

	    /* 画像のホバー拡大効果 */
    .centered-image {
        display: block;
        margin: 20px auto;
        max-width: 80%;
        height: auto;
        border-radius: 15px; /* 角を丸くする */
        transition: transform 0.3s ease; /* ホバー時のアニメーション */
    }

    .centered-image:hover {
        transform: scale(1.05); /* ホバー時に拡大 */
    }
	/* スムーススクロールを追加 */
    html {
        scroll-behavior: smooth;
    }

    .scroll-link {
        color: #ffffff; /* リンクの色を白に変更 */
        text-decoration: none; /* 下線を消す */
        font-weight: bold; /* リンクを太字に */
    }

    .scroll-link:hover {
        text-decoration: underline; /* ホバー時に下線を表示 */
    }

    .menu-intro {
        color: #ffffff; /* テキストの色を白に変更 */
        font-size: 16px; /* フォントサイズを少し大きく */
        margin-bottom: 10px; /* 下部に余白を追加 */
        text-align: center; /* テキストを中央揃えに */
        background-color: #333; /* 背景色をダークグレーに */
        padding: 8px; /* パディングを追加 */
        border-radius: 5px; /* 角を丸くする */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ボックスに影を追加 */
        font-style: normal; /* 斜体を解除 */
    }

    .custom-advertisement-text {
        padding: 20px;
        background-color: #444; /* 背景色をダークグレーに */
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 全体に影を追加 */
        color: #ffffff; /* テキストの色を白に */
    }

    .custom-advertisement-text p {
        margin: 0 0 10px; /* 各段落に余白を追加 */
    }

/* メニューに戻るボタンのデザイン */
.back-to-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 123, 255, 0.5); /* 半透明の青色 */
    color: #ffffff; /* ボタンのテキスト色 */
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 1000; /* ボタンが他の要素の上に表示されるようにする */
    display: none; /* 初期状態では表示しない */
}

.back-to-menu:hover {
    background-color: rgba(0, 86, 179, 0.8); /* ホバー時も半透明の濃い青色 */
    transform: scale(1.1); /* ホバー時に少し拡大 */
}


    .custom-link-button {
        display: inline-block;
        padding: 10px 20px;
        margin-top: 10px;
        background-color: #ff5733; /* 背景色を適宜変更 */
        color: #ffffff; /* テキストカラーを適宜変更 */
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

    .custom-link-button:hover {
        background-color: #c70039; /* ホバー時の背景色を適宜変更 */
    }


        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        h2 {
            text-align: center;
            color: #626C9F;
            font-size: 28px;
            margin-bottom: 20px;
        }

        p {
            font-size: 18px;
            margin-bottom: 20px;
        }

        hr {
            border: 1px solid #ccc;
            margin: 40px 0;
        }

        .highlight {
            background-color: #e0e7ff;
            padding: 10px;
            border-left: 5px solid #626C9F;
        }

        ul {
            list-style-type: disc;
            padding-left: 40px;
            margin-bottom: 20px;
        }

        li {
            margin-bottom: 10px;
        }

        a.button {
            display: inline-block;
            background-color: #626C9F;
            color: #A5A3A3;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            text-align: center;
            margin-top: 30px;
            transition: background-color 0.3s ease;
        }

        a.button:hover {
            background-color: #4a567c;
        }

  .scroll-link {
        color: #000 !important; /* 黒色で明確に表示 */
        text-decoration: none;
        font-size: 16px;
        display: block;
        margin: 5px 0;
    }

    .scroll-link:hover {
        color: #4CAF50; /* ホバー時のカラー */
    }

    .custom-advertisement-text {
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 10px;
    }

    .menu-button {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .menu-icon {
        width: 24px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .line {
        width: 24px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    transition: all 0.3s ease-in-out; /* スムーズなアニメーション */
    }

/* メニューが開いた状態 */
.menu-icon.open .line:nth-child(1) {
    transform: translateY(13px) rotate(45deg); /* 上ラインを斜めに */
}

.menu-icon.open .line:nth-child(2) {
    opacity: 0; /* 中央ラインを非表示に */
}

.menu-icon.open .line:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg); /* 下ラインを斜めに */
}

#site-menu {
    display: none; /* 初期状態では非表示 */
    position: absolute;
    top: 70px;
    left: 0; /* 左側に配置 */
    width: 250px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    transition: all 0.3s ease-in-out; /* アニメーション効果 */
    z-index: 1000;
}

#site-menu.active {
    display: block; /* `active` クラスが付与されたら表示 */
}

.menu-button {
    background: none;
    border: none;
    cursor: pointer;
}

.menu-icon {
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}


/* サイト紹介セクション */
.introduction-section {
	position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    background-color: #FFFFFF; /* 明るい背景色 */
    padding: 40px 20px;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 1000px; /* セクションの最大幅を指定 */
}

.introduction-container {
	position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    margin: 0 auto;
    padding: 20px;
}

.introduction-header {
	position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    font-size: 22px;
    font-weight: bold;
    color: #000000; /* 鮮やかなピンク */
    margin-bottom: 15px;
}

.introduction-text {
	position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}

.introduction-text br {
	position: relative; /* 背景画像よりも上に配置するためにrelativeを指定 */
    z-index: 10; /* 背景画像のz-indexより高く設定 */
    margin-bottom: 10px;
}

/* ハンバーガー：白い角丸の四角背景 */
.menu-button{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 44px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;                /* 角丸 */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 0; cursor: pointer;
}

.menu-button:hover{
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.menu-button:focus-visible{
  outline: 2px solid #0a63b7;
  outline-offset: 2px;
}

/* 開いているときは少し強調 */
.menu-button[aria-expanded="true"]{
  background: #fff;
  box-shadow: 0 8px 20px rgba(10,99,183,.18);
}

/* 三本線は濃いめの色で視認性UP（お好みで） */
.menu-icon .line{
  background-color: #222;
}

/* ▼ 注目ラインナップ（強調帯） */
.highlight-lineup{
  position:relative; margin:18px 0; padding:18px;
  border-radius:14px; color:#fff;
  background:linear-gradient(135deg,#0a63b7 0%,#3db0ff 100%);
  box-shadow:0 14px 36px rgba(10,99,183,.28);
}
.highlight-lineup .hl-head{display:flex; gap:10px; align-items:center; justify-content:center; text-align:center}
.highlight-lineup .hl-flag{
  display:inline-block; font-weight:800; letter-spacing:.08em;
  background:#fff; color:#0a63b7; padding:4px 10px; border-radius:999px; font-size:12px;
}
.highlight-lineup h2{margin:6px 0 8px; font-size:clamp(20px,3.6vw,28px); line-height:1.35}
.highlight-lineup .hl-lead{font-size:clamp(15px,2.5vw,18px); margin:6px 0 8px}
.highlight-lineup ul{max-width:980px; margin:8px auto 0; line-height:1.85}
.highlight-lineup li{margin:.25rem 0}
.highlight-lineup .cta{margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.highlight-lineup a.btn{background:#fff; color:#0a63b7; border-color:#fff}
.highlight-lineup small{opacity:.9}

/* アニメ（@keyframes は media の外に定義。opacity は 0 に修正） */
@keyframes hl-pop{from{transform:translateY(6px); opacity:0} to{transform:translateY(0); opacity:1}}

@media (prefers-reduced-motion:no-preference){
  .highlight-lineup{transform:translateY(0); animation:hl-pop .5s ease both}
}