/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
Description: Twenty Seventeen テーマの子テーマ
Author: あなたの名前
Version: 1.0
*/


/* 子テーマの独自スタイルはここに追加します */

/* 親テーマのデフォルトスタイルを上書き */
body {
    background-color: #f5f5f5;
}

/* 独自スタイルの追加 */
h1 {
    color: #333333;
    font-size: 2rem;
}

.parallax-background {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* ビューポート全体を埋める */
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* 背景にする場合 */
}

/* モバイルのみ表示 */
.wp-block-embed-youtube {
    display: none; /* デフォルトでは非表示 */
}

/* モバイル（768px以下）の場合のみ表示 */
@media screen and (max-width: 768px) {
    .wp-block-embed-youtube {
        display: block; /* モバイルで表示 */
    }
}

/* QA全体のコンテナ */
.qa-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 質問部分のスタイル */
.qa-question {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

/* 回答部分のスタイル */
.qa-answer {
    display: flex;
    align-items: flex-start;
    font-weight: normal;
    color: #555;
    margin-top: 10px;
    padding-left: 24px; /* アイコン分のスペース */
    border-left: 4px solid #ddd; /* 回答部分の強調 */
}

/* アイコン部分 */
.qa-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    color: #fff;
}

/* Qアイコンのスタイル */
.qa-question .qa-icon {
    background-color: #0073aa; /* 青色 */
}

/* Aアイコンのスタイル */
.qa-answer .qa-icon {
    background-color: #28a745; /* 緑色 */
}

/* テキスト部分のスタイル */
.qa-text {
    flex: 1;
}

/* QA全体のコンテナ */
.qa-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* 質問部分 */
.qa-question {
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.qa-question::before {
    content: "Q:";
    font-weight: bold;
    color: #0073aa;
    margin-right: 8px;
}

/* 回答部分 */
.qa-answer {
    color: #555;
    margin-top: 10px;
    padding-left: 20px; /* 回答部分を少し内側に */
    border-left: 3px solid #ddd; /* 回答を強調する左線 */
}

.qa-answer::before {
    content: "A:";
    font-weight: bold;
    color: #28a745;
    margin-right: 8px;
}