/* 問診グループなどのコンテナ */
.CounselingFormContainer {
    width: 100%;
    display: grid;
    column-gap: 3em;
    row-gap: 1.5em;
    padding: 1em;

    background-color: #fafaff;
}

/**
 * 問診セクション
 */
.CounselingFormContainer .FormSection {
    display: grid;
    column-gap: 3em;
    row-gap: 1em;
    /* 2列表示でも上整列になるように */
    align-content: start;
}
/* 問診のタイトル */
.CounselingFormContainer .FormSection .Title {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    padding-bottom: 0.5em;
    padding-left: 0.2em;
    /* border-bottom: 3px dotted #ddd; */
    border-bottom: 2px solid #ddd;
    position: relative;
}
.CounselingFormContainer .FormSection .Title::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: 2px solid #ff8f9a;
    bottom: -2px;
    left: -2px;
    width: 25%;
    opacity: 0.8;
    transition: all 0.3s;
}
.CounselingFormContainer .FormSection:focus-within .Title::after {
    width: 100%;
    opacity: 1;
}

/**
 * 質問ボックス
 */
.CounselingFormContainer .FormSection .ItemBox {
    display: grid;
    gap: 0.7em;
}
/* 追加質問ボックス */
.CounselingFormContainer .FormSection .ItemBox.FollowUp {
    display: none;
}
.CounselingFormContainer .FormSection .ItemBox.FollowUp.Show {
    display: grid;
}
/* 質問のタイトル */
.CounselingFormContainer .FormSection .ItemTitle {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
}

/**
 * 問診の選択肢リストボックス
 */
.CounselingFormContainer .FormSection .ChoicesBox {
    display: grid;
    gap: 0.7em;
    /* 選択肢「その他」に高さがあり、上に整列させるため */
    align-items: baseline; 
}
/* 問診の選択肢ボックス：複数の選択肢のグリッドレイアウト */
.CounselingFormContainer .FormSection .ChoicesBox.GridLayout {
    grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
}
/* 選択肢の幅広表示設定 */
.CounselingFormContainer .FormSection .ChoicesBox.WideGridLayout {
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

/**
 * 2列表示設定
 */
.CounselingFormContainer,
.CounselingFormContainer .FormSection,
.CounselingFormContainer .FormSection .ItemBox
{
    /* 幅の広いところでは２列表示、狭いところでは１列表示 */
    grid-template-columns: repeat(auto-fit, minmax(max(17em, 40%), 1fr));
}
.CounselingFormContainer .FormSection,
.CounselingFormContainer .FormSection .Title,
.CounselingFormContainer .FormSection .ItemBox,
.CounselingFormContainer .FormSection .ItemTitle,
.CounselingFormContainer .FormSection .ChoicesBox
{
    /* 基本的に１列表示に設定 */
    /* span 2にすると、コンテナのgridに2カラム表示を強制してしまう */
    grid-column: 1 / -1;
}
/* ２列表示にできる要素 */
.CounselingFormContainer .FormSection.TwoColumnLayout,
.CounselingFormContainer .FormSection .ItemBox.TwoColumnLayout,
.CounselingFormContainer .FormSection .ChoicesBox.TwoColumnLayout
{
    grid-column: span 1;
}

/**
 * 選択肢の内部ボックス
 */
.CounselingFormContainer .FormSection .ChoicesBox.InsetBox {
    display: none;
}
.CounselingFormContainer .FormSection .ChoicesBox.InsetBox.Show {
    display: block;
}

/**
 * 選択肢個別ボックス
 */
.CounselingFormContainer .FormSection .ChoiceBox {
    display: grid;
    gap: 0.5em;
    align-items: center;
    /* フォーム要素が横いっぱいに広がってしまうのを防ぐ */
    /* justify-content: start; */
}
/* 選択肢の内容が横に並ぶ必要がある場合 */
.CounselingFormContainer .FormSection .ChoiceBox.ColumnLayout {
    grid-auto-flow: column;
}

/**
 * 選択肢
 */
.CounselingFormContainer .FormSection .ChoicesBox .Choice {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 5px;
}

/**
 * フォーム要素
 */
.ChoiceBox textarea {
    width: 100%;
    resize: none;
    padding: 0.7em;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.ChoiceBox select {
    min-width: fit-content;
    height: auto;
    padding: 0.5em 3em 0.5em 1.5em;
    font-size: 1em;
    background-color: #fff;
    border-radius: 5px;
    background-position: right 0.5em center;

    border: 1px solid #ccc;
}
.ChoiceBox input[type="text"],
.ChoiceBox input[type="tel"],
.ChoiceBox input[type="email"] {
    padding: 0.5em 1em;
}

/* カードデザイン */
.CounselingFormContainer .FormSection {
    padding: 20px 10px;
    border-radius: 10px;
    /* background-color: #f7f7fa; */
    /* background-image: linear-gradient(135deg, #fbfbfc, #f7f7fa); */
}

/* スマホ表示設定 */
@container (width < 400px) {
    .CounselingFormContainer {
        padding: 0px;
    }

    .CounselingFormContainer .FormSection .ChoicesBox.GridLayout {
        grid-template-columns: 1fr 1fr;
    }
    /* 選択肢の幅広表示設定 */
    .CounselingFormContainer .FormSection .ChoicesBox.WideGridLayout {
        grid-template-columns: 1fr;
    }
}